aka 'Welcome to my life'
Disclaimer: Any similarity to projects and designs living or dead is purely coincidental.
PS.: My absolute favorite is the dude swallowing his snack "...and a web address, in case people want more info".
- Debunking the Myths of Remote Usability Studies (by Corrie Kwan, Jin Li, and May Wong) - some myths might seem obvious, but others - drawn from first-hand experience - are not. Anyway, lot's of good advise to be considered.
- How to Communicate With Your Clients (by Joel Reyes) - In short: Listen, Ask, Consult, Respect, Reason
- Beginner’s Guide to SEO: Best Practices – Part 3/3, Part 2/3, Part 1/3 (by hongkiat) - Search Engine Optimization is a must in all our toolboxes. Excellent three-part tutorial, thx!
- 250 Quick Web Design Tips (Part 2) (Part 1) (by Alexander Dawson) - about Browsers, Styles, Techniques, Marketing and all other good stuff.
- Agile UX and The One Change That Changes Everything (by Anders Ramsay) - Start Building Earlier through Rapid and Rich Communication and Just-in-Time Detail.
As always, send me your link or mention it in the comments. Anything related to this blog is much appreciated by all of us. Thanks!
In this post I try to keep true to my promise to add some spice to the world of web design and usability: I will try to investigate the cons of designing "sexy" versus "conservative".
So far clients still owe me a consistent definition of what they mean by asking for a "sexy" or "conservative" user interface. I guess I have a hunch and we all probably feel the difference but eventually it boils down to subjective interpretations.
Photo credits: AlphaX/X17, Adrian Varnedoe, A. Than/Pacific Coast News
Just for a moment think of who you would rather want to have a long-lasting relationship with? The Paris Hilton on the left of the photo (sexy) or the Paris Hilton to the right (conservative)? Ok, probably neither, but for the sake of the argument?
In the words of one of our consultants: make the design 'sexy' for our marketing department and 'conservative' for our users. What now? Really?
Let's try to look at the cons of either side in an unbiased way by using a funny dating analogy:
The Bad of too Sexy
Designing too sexy gives everything away for free and leaves you with nothing to hold in reserve
Users know within seconds whether a site is right for them or not, they smell the scent of usefulness and determine that what is offered is worth further time investment. One might call initial attraction a success but it is human nature to want something more if we cannot have it.
So keep certain things a mystery. Don't give everything away upfront or for free. It's OK to tease though.
A 'slutty' design may lower your general value
Your users may feel that they have a higher intrinsic value than you do. Therefore you are not really worth further attention or a long-term relationship.
Design for emotions but keep in mind that trust is only built when your users can take you serious.
Sexy design may show your less than desirable aspects
Surely skillful designers know that it is important to emphasize the attractive aspects of your business and hide the less attractive characteristics. But, trying to pretend being somebody or something that you are not will come across as fake and unreal.
Stay true to your values and represent who you are. Don't pretend to be young or sexy if you aren't.
The Bad of too Conservative
Designing conservatively may indicate a low self-esteem
'Playing it safe' can be caused by many things: traditions, missing innovation, dusty policies, organizational structures, stubborn managers. Whatever it is, it will be felt by the users and could be interpreted as old-fashioned, slow (to deliver), outdated or simply lame.
Being bold is important (having a skilled designer helps too). Engage modern technology and trends like the social web.
Designing conservatively may indicate discomfort with your own business
You might have a hard time defining your business or telling an attractive story of who you are or what you do. This means you are not wholly comfortable or happy with what you represent and therefore choose to show as little of yourself as possible. Holding back is very risky because users (clients) might not understand who you are and don't know why they should get engaged or continue spending their time on your site.
Work hard to make your content/service attractive rather than the appearance. Don't hold back with something that helps engaging users.
Designing conservatively may not catch your users
Design must stand out because it will make YOU stand out. In times where everybody and everything is available on the web it's more important than ever to be unique in your offering, precise in how your business is different (or better) to others and clear in your message. Your front-end should clearly communicate all that! Designing too conservative may ultimately result in fewer visits and engagements.
Be unique and clear about your offerings and communicate it through your user interface.
The purpose of (most) web designs is to engage people and build relationships. That's why appearance is so important and that's why you should not design in stereotypes (aka 'sexy' or 'conservative').
Try to be clear about what you offer and honest in how you present it.
Like with anything in life, make sure to do your homework, learn about your target audience (think google). This will tell you how to dress appropriately and make the date between you and your users a pleasurable experience and hopefully a long-lasting one as well.
What's your opinion? How do you design? Why?
Which browser platform should we design for? To most web developers this question is a nightmare and dilemma at the same time, but yet again we face it almost on a daily basis. Just to show you how difficult an answer might be is the disparity between two projects I'm involved in, one for a federal government body that by definition only supports IE6 and another that is expected to be finished in 6 months and therefore was hoping to target IE8. Are these expectations realistic?
Let's have a look at some website analytics that were collected over the past year (July 2008 - July 2009), taken from Fanposter.org, a social media website with over 5000 registered users from almost 100 countries and collected through Google Analytics.
Note: While I'm aware that the audience of this website might not be representative for all age groups or countries/regions, it still provides valuable hints about browser usage and trends.
Lesson 1: Internet Explorer on the fall
Internet Explorer is historically bundled with Microsoft Windows Operating Systems. IE6 was released August 27, 2001 just months before WinXP; IE7 was released October 18, 2006 and included with Windows Vista and Win Server 2008; IE8 final was released March 19, 2009 and will be included with Windows 7.
The combined total market share for Internet Explorer over the past year was 76.5% but the trend shows a clear decline over the past months from 74.0% in May to 68.8% in June and 53.9% in July.
Will this trend continue to hold true?
A lot will depend on the upcoming release of Windows 7 in October 2009 with Microsoft's power in reaching the people to upgrade their browsers. But almost certainly Microsoft will loose its dominant position of 95% in 2002 and 2003 (IE5 & IE6) or over 75% in the past year to its numerous very capable competitors.
Lesson 2: IE8 on the rise
When comparing the 3 current versions of Internet Explorer out there (IE6, IE7 and IE8 with IE5 and lesser not appearing in the analytics anymore and therefore being disregarded) it seems to be evident that IE8 is on the rise. Though the really surprising observation is that this increase cannot be accounted to users abandoning IE6 but rather to users upgrading their version of IE7. How come? The answer seems to lie in fact that many companies and their IT departments as well as governmental bodies still continue to hold on to and enforce the use of IE6. Can Microsoft overcome these - mostly security-related - concerns through IE8?
Lesson 3: IE6 might not die as soon as we all may wish
As discussed above IE6 is still a requirement for many users. A quick look at Google Trends reveals that searches for IE6 (Figure 3: blue line) have been pretty stable over the past 4-5 years while searches for IE7 (Figure 3: red line) are declining and searches for IE8 (Figure 3: yellow line) are in the lead. This goes hand in hand with the observations in Lesson 2 above.
In the meantime let's join the numerous battles to kill IE6 like Norwegian Websites Declare War on IE 6 and IE Death March or more seriously at Bring down IE6. Joke or not, IE6 will be around for some more time and therefore needs to be considered if we want it or not.
It won't even help that Digg is discussing to drop support for IE6 or YouTube Will Be Next To Kiss IE6 Support Goodbye. Both sites don't need users that cannot upgrade IE6 e.g. due to limitations at work because exactly these users have limited access restricted by their companies anyway.
Lesson 4: Firefox stays on top
A very interesting observation is the fact that Firefox does a really great job in staying on top of things and keeping their user base up to date. In the last month of the observation period less than 5% of all Firefox users had a version lesser than 3, or in other words, the great majority of Firefox users was using version 3 and higher. And with versions 3.7 and Firefox 4 in the making, a huge base of motivated developers and fascinating plug-ins the future looks bright. Firefox's marketshare seems to climb steadily also, as of July 2009 it showed 32.1% (20.5% average over the past year) with the majority Windows versions and only 0.6% on Mac and 0.2% on Linux. Obviously we all love the high commitment to standards compliancy that makes developing web apps a blast, right?
Lesson 5: Chrome & Safari
Google Chrome was released December 11, 2008 and first received as Google's never-ending battle against Microsoft (see graphic by Federico Fieni) but more likely just another smart move to keep users on the web - the faster, the better - or like Ben Parr explains "Revenue = Amount of Time on the Web".
As far as marketshare is concerned, Chrome rose to 2.3% in July according to my analytics. This is still fairly small but not to be underestimated. In terms of testing Google's developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome". But what about Safari?
Safari accounts for 1.3% in the yearly average (with 1.2% on Mac and the rest on Windows). Should we test Safari with a marginal share like this? It really depends on your budget and company structure which might require unjustified additional resources for your QA team. Do the math for yourself: 1% of 10k visitors are 100 potential customers - is it worth the effort?
Lesson 6: Opera is the misunderstood genius
Opera shows an average of 1.1% with an unexpected peak in July 2009 - I need to continue observing where and why that came from. Needless to say, Opera is strong in European countries like Russia and on mobile devices such as mobile phones, smartphones and PDA's (personal digital assistants). It's a shame that Opera is not further ahead, it has been and still is innovator and spearhead in terms of new useful features as well as standards compliancy and implementation.
What are your experiences?
Without giving any decisive conclusions I'd like to hear your experiences or analytics to this subject. For which browser platform do you design for? What do you tell your clients when they ask you this question?
"It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open..." (Chapter 5). Sounds familiar to us geeky programmers out there? Yes, and the root of all evil are clients that design their webpage from a sushi menu, picking whatever they like.
Usually I encourage my clients to look around, get inspired and show me what they like. It gives me a sense of how they think and into which directions they want us to go. But never forget: Clients identify problems, designers provide solutions! Understand why the client shows you a specific page or design element and what exactly they like in it. Don't feel pressured to include every detail in your final design otherwise you wake up at 1am facing a yellow-eyed creature and you'll end up with a Frankenstein Design.
What are warning signals that your project might face a Frankenstein Design?
- Client mentions Stakeholders too often. Money makes the world go round, but will eventually ruin the user experience.
- Client fell in love with a bad design. Try to build solid knowledge about good and bad design principles so you can explain the pro's and con's of a particular design.
- Client needs to please too many interests. It's understandable that every party involved wants to see their logo on the page, but honestly, one is enough 😉
- Client decides on a color scheme. Besides corporate colors clients feel strongly about certain colors that either clash with your design, psychological theory or existing color schemes or are simply bad taste altogether.
- Client has no idea at all. That means trouble! Not now, but once you are done. Guaranteed.
- Got more?
What you can do
- Listen. Hear what the client tells you and try to understand why they say it.
- Feel. Sense what the underlying need is and translate it into design elements.
- Talk. Speak up, don't shut up, don't wait until it's too late.
- Fight. Pick your battles, don't let rules overrule what you think is right, at least voice it.
- Reconsider. Don't get hooked to an idea too strongly, be open to erase your white-board drawings and start over.
- Document. Make notes, sketch ideas, capture screens, summarize. Send these notes out.
- CYA. Cover your ass, seek consensus and approval, set it in stone through written acknowledgments (mockups help).
Send me your experiences? What is missing on this list?
The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?
In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.
During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.
Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:
Next Step: XHMTL Prototype
Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.
Help me to improve the stencils
I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates 🙂
I just came back from an extended trip to Las Vegas, a fascinating city for a multitude of reasons. Not only is it the fastest-growing city in the US, it is also constantly transforming and reinventing itself, a Disneyland for grown-ups, gambling capital of the world, vacation spot for one and Sin City for others. It became evident to me that this city offers more than just pleasure, it teaches us how to attract, entertain and keep us happy despite the fact that we are loosing our money, which means they must be doing something right. Here are my 10 Webpage Design Lessons learned from a trip to Las Vegas... seriously:
1.) Don't Listen to Users
"What happens in Vegas, stays in Vegas", the motto of Las Vegas is a true #1 (who ever came up with that slogan is a genius in my eyes)! When asking your fiance/fiancee about his/her bachelor party ... pardon ... when designing an easy-to-use interface, pay attention to what users do, not what they say. Jacob Nielsen states that self-reported data is typically three steps removed from the truth:
- People bend the truth to be closer to what they think you want to hear or what's socially acceptable.
- In telling you what they do, people are really telling you what they remember doing.
- In reporting what they do remember, people rationalize their behavior.
Lesson: Perform user tests as early as possible (e.g. design phase).
2.) Optimize your Top Task
Marriage is wonderful and so is the wedding day, at least mine was. Of course I blacked out the six months of preparation and swet that lead to that event. Now, Vegas wasn't Vegas without finding a way to optimize the wedding experience: A 24-hour drive-thru wedding chapel called A Little White Chapel Tunnel of Love. "Ahem, yes, Combo 2 with two wedding rings, a bouquet and the Elvis... can you make it 'Love me tender' please?" - "120 Dollars at the first window please."
Lesson: Identify and optimize your top task.
3.) Direct your Users
Once inside a Casino it is incredibly difficult to find your way out - I'm not certain but I would take any bet that exactly this is the purpose of a Casino designer. More than once I found myself in a maze of slot machines surrounded by their ringing noise and flashing lights. Whatever I was looking for (except ATM's) seemed always to be at the other end of the Casino.
Design your page in a way that helps users find their way around but at the same time support your business model, e.g. Amazon has perfected the process of returning articles and submitting online or email support request but made it really difficult to find a phone support number which would seriously compromise their business income.
Lesson: Create a logical Information Architecture; add links to related items; cross-reference articles.
4.) Make it Easy to Learn
Casino games are mostly very easy to learn, don't you agree? It can't get any easier than inserting your bills, hitting the main button on the front panel or operating the lever to the side, wait until the reels have stopped spinning, compare the pattern of symbols on the reels with the possible winning combinations stated to the top of the machine and cash in the jackpot.
The actual difficult part is to get the people to play or use the machines. That's when the Casino offers free lessons and sections with machines that pay well, everything to get you started.
Lesson: Help novice users to learn and avoid frustration by offering easy entry tasks.
5.) Provide relevant and attractive Content
Vegas has realized very early that sex-appeal and show makes a great combination, but it was limited to mostly the male population and that's when the city started to transform itself into a family-friendly, theme-park like vacation destination with Castles, Musicals, Rollercoasters in and around the Casinos, 3D rides and more. Free drinks, cheap buffets, Day-Spa's and a variety of other promotions added to the perfect experience. Attractive entertainment options could still be found at any corner in the form of bars, clubs and shows but lately I recognize a shift back to more go-go style entertainment in newly created bars in between the slot machines and tables. I guess the family-style hasn't really worked out.
Lesson: Create attractive content that is relevant to your target audience; test and adjust if necessary.
6.) Make it Easy to Enter
Casinos do everything to get you into their building. Almost free (two dollar tip is ok) valet parking allows you to drop off your car quickly and one-directional moving walkways (obviously you need to walk back) shovel you inside, that's where the music plays... Get the people where they want to be as quickly and easy as possible, show me the money!
Lesson: Avoid splash screens and flash intros; keep page sizes small.
7.) Avoid Windows and Clocks
There are two things you will never find in a Casino: windows and clocks. Right, nothing should distract your focus on the slot machines to the other wonderful Casinos outside and nobody wants to encourage you to make time-sensitive decisions (leaving the Casino early) by realizing how much time (and money) you have already spent during your visit.
Lesson: Avoid popup windows and time-sensitive triggers or forwarders.
8.) Make Sign-up Easy
Even though 100% of players think they can win only 1% will win. The only safe way to win in Las Vegas is to sign up for a Players Club. Handing over your name and address to the Casino will in many cases give you an immediate bonus of 5 or 10 bucks in free slot play, discount coupons for drinks and shows as well as little Thank you presents (wink-wink, Tropicana gives you a free T-Shirt and a deck of playing cards). Gambling itself is then rewarded through comps like more gifts, free buffets, free hotel rooms, free show tickets and more. I'm 11 cards richer now 😉
Well, the sign-up process was easy enough, the only interaction with the clerk was handing over my drivers license and entering a PIN twice. Guess what, sure enough I always hit the Enter key after entering the PIN which wasn't very well received by the system and the clerk. I don't even know why I ended up apologizing. Why in the world can't the system take care of that? Another day, another Casino, another Keypad, yes, another keypad, it was an actual computer keypad which is reverse to an ATM keypad and thus reverse to ALL the other keypads. Try your ATM PIN on your keyboard right now ... exactly!
Lesson: Anticipate input errors and handle them gracefully; use common and widely accepted interfaces.
9.) Monitor User Behavior
There is no way one could walk into a Casino and cheat undetected. The famous 'Eye in the Sky' is omni-present. 24/7 'Surround'-Surveillance captures every movement, every face and every deal. That doesn't really worry me as long as they keep on bringing the free beer. It is clear that this kind of monitoring helps the Casinos to optimize their winnings not only by preventing cheats but also by detecting patterns in playing behavior and machine pay-out/malfunctions. I don't see a threat in it as long as my face isn't connected with the data collected.
Lesson: Use Server Traffic Log Analysis and Search Log Analysis to optimize your website.
10.) Make it Sexy
Sexy is probably the attribute I hear most often lately, it's not 'slick' or 'beautiful' anymore, it's 'sexy' now. That's fine with me if only I knew what that means. Any ideas? Send them to me...
Anyway, what would be a blog about Vegas without mentioning sexy at least twice, huh?
Cheers and good luck!