Make me Happy
Usability has always been an important facet of success in whatever measure, on the web. Despite many usability horrors (which I won’t call out here), people are incredibly adept at ‘muddling through’. This muddling through is a notion which Steve Krug’s excellent Don’t make me Think articulates really well. He proffers that this is the principal way in which we use the web because:
- We’re usually in a hurry
- There’s no real penalty for getting it wrong
- Weighing options may not improve our changes
- Guessing is more fun
There are definitely some truths in there and we can use those general observations to shape the experience folks get on our sites. Taking this one step further, I’ve observed that we can generalize these principles into 5 tenets of web smiles; positive experiences which build trust in your brand (or the one you’re building for).
1: Least surprise
The web has been around for a little while. Some 20 odd years in recognizable form certainly. Over that time, visual metaphors and cues have evolved, and as users, we expect those things to behave in a manner which we’ve seen before. Screen elements such as Buttons, Tabs, Links etc, should operate in a familiar manner, and where appropriate, be idempotent; you can click a tab many times and it won’t ‘magically’ do other things. Ever used a site whereupon hovering over an area popped up a video and took over the page? Big no-no. Be obvious where you can, and provide hints where you can’t.
2: Consistency
- Color – Establish a color palette for your site/pages. Be consistent in it’s use. This ties back to the principle of least surprise. Consistency of color doesn’t arouse user’s suspicion; it doesn’t force them to think and re-evaluate whether they’re still in the same site. It looks similar, therefore the experience is in line with their tacit expectations.
- Typography – Establish a small set generally (1-3) of typefaces which you will use throughout the site. Reasons as above.
- Visual Hierarchy – Creating a consistent visual hierarchy draws appropriate levels of attention, to headings within your site. Big and bold? That’ll be a new section. Smaller and Bold? A new sub-section or aside. Regular text? Oh that’s the body content then. Effortless.
- Layout – Using a consistent layout throughout your site, or within logical sections on larger sites, serves to meet expectations around the level of detail of the content at a given level. Mentally effortless.
3: Less is more
What can be taken away – Write the content for your page. Now halve it. Now you’re approaching succinctness. Your users come to your site (at least the first time) with three questions:
- What is it?
- How does it work?
- What does it cost?
You should aim to answer the first question immediately. The second within the first few moments of using the site, certainly at a high level, within 10-15 seconds on your site (count that in your head. It’s actually a long time on the web!). The third answer should be available within a click or two of the second. If you can’t give specific prices, give a ballpark figure where possible.
Avoid ‘Happy Text’
‘Welcome to Joe’s Medicine store – Here you can find all kinds of medicine. Click on the links above to zzzzzzzzzzzzzzzzzzzzz’.
No need. People know how to use the web, provided you give them consistent, simple navigation.
- Animation – Its cool isn’t it? BigVideo.js [http://dfcb.github.io/BigVideo.js/] Used judiciously, animation is a great way to add interest and draw attention to elements within your site. If you’re using video, particularly as backgrounds, ensure you provide a ‘stop’ icon in a reasonable place. Constant motion may render your site unusable for those with autism, especially if unable to stop the motion.
- Taglines – are a great way to draw on a user’s world knowledge to answer the question ‘what is it?’ themselves, and with minimal cognitive overhead. BMW: The Ultimate Driving Machine. Immediate, terse and meaningful.
4: Don’t punish mistakes
There are few things more annoying than filling a web-form, hitting submit and having an empty form presented back to you with ‘Errors were found in your submission’ or the likes, as your response. Guide users to errors or omissions in their submission. When they get it wrong, provide contextual help.
When it comes to capturing data, ask for the minimum, be obvious in what you require, and provide validation in context if you can.
5: Speed, speed, speed… speed.
An old boss of mine drummed the mantra:
Make it work, Make it right, Make it fast
Into my head. Turns out he was spot on. Once you’ve satisfied the above, focus on making your site as performant as possible. Building the impression of quality also involves creating a site which gives the perception of high performance. Steve Souders writes an excellent article on the subject here. Don’t go nuts optimizing for performance until you’re ready for it. Generally, this is later in development. Premature optimization == pain and re-work in many cases.
Following these generalized principles for web development, I really believe you’ll end up with a superior experience for your site’s visitors. This has all manner of positive benefits, the more subtle of which include an increased level of trust that you, or the company you’re building for are capable; you’ve been able to disseminate the offering in such a way that the website is simple and intuitive. As that was painless, it sets an expectation that future interactions will be of similar quality. First impressions, Check 🙂
