Thank you to Kathy Murphy, Vermont's Chief Marketing Office, for sharing her top tips for designing a usable, accessible website. For other resources see the Internet Basics for Web Design resource page.
When we think about the design and development of websites, we often focus upon graphic design, backend development and semantic markup that is coded and combined into the finished website.
The user experience design is often overlooked. For some, it’s intangible, naturally vague and difficult to understand. However, detailing the experience you want the user to have on the website and making this user experience comprehendible is crucial to the design process.
It is very tempting to skip over the experience design and straight to image selection, overall coloration, font choice, etc. Yet, absence of a clearly defined business process, or hierarchy of information to be conveyed, the result can be a website that’s disjointed, difficult to navigate, and counterproductive to the outcomes the user expects from time spent your website.
Effective website design enables the user to focus upon the content, and conduct the transaction or accomplish their task efficiently. Minimalist website design caters specifically and solely to its mission of effective communication and focuses upon:
- Subject: What’s the most important thing on the web page? Is it effectively keeping the user engaged and focused?
- Usability: What things burden the user experience? What missing elements can enhance user-friendliness?
- Balance: Does the web page have the appropriate visual hierarchy and do the key components have appropriate visual weight?
The following eight important reminders will get you going in the right direction, but you're the one who knows your customers (or should) so the finer points of personalization and "character" are up to you.
1. The importance of focus. You need to think like your visitors do. This is key to your site's success. Your customers simply want to find what they need, make the payment, locate a resource, etc. and get back to real life. If you can make their lives a bit simpler and easier, they'll reward you for it. If, on the other hand, you make their lives more complicated, they'll "surf away" and stay away.
2. The importance of understanding the medium. You are not creating a slideshow, a YouTube video, a TV commercial or a PowerPoint presentation. You are building a website. You need to provide easy, simple, clear navigation on every page, since you never know how people will link to your site and what they will see first. Visitors to your site, no matter how hard you try, will not always go where you would like them to go, or do what you want them to do. Remember that, and give them a few tools to move around the site, like a sitemap and/or internal search engine.
3. The importance of non-aggression. Most Internet users, especially experienced ones, like to stay in control of their movements. Research suggest that your first-time visitors are "hunting," not "deciding," so do not make unnecessary demands for clicking, scrolling, resizing windows or anything else. Neither should you put up any roadblocks that will slow down their hunting, like time-consuming "Flash and splash screens."
4. The importance of reduced load times. Tied into #3 is the notion of your site's real and perceived "speed." Carefully consider each page element and make each one earn its place, based on functionality, not "wow" value. Keep graphic file sizes small and do whatever else you need to do to have a fast-loading, easy to use site.
5. The importance of customer needs. Define all the kinds of people you expect to visit your site and consider what they'll be looking for. Ensure that the navigation design helps the greatest number of people to find the most popular items in the least amount of time. Don't "bury" essential information so that visitors have to dig down two or three levels to find it.
6. The importance of simplicity. Flash is powerful tool, especially helpful in demonstrating things that are difficult to describe in words, but it is so pathetically overused that it has turned people off. It can be a huge distraction, too, since animation and bright (moving) colors are exceptionally hard for our eyes to ignore even when our brains want to.
8. The importance of avoiding surprises. You should use the expected, usual and standard placements for expected, usual and standard site elements. Site navigation is not something you want to be too creative with, as it needs to be immediately understandable and usable. Such consistency across the web is actually a good thing, as it tends to make people's lives a bit easier when they feel they are in "familiar territory." Generally speaking, your various website components should look and work as people think they're supposed to.
Therefore, rather than get caught up in profound design metaphors or using your bandwidth to display every possible website trick and/or treat, you should focus on making your site into a solution for your customers. Make it easy for them to do what they need to do and then get on with their lives. Perhaps the most important thing you can give a site visitor, then, is respect and appreciation.
Need more ideas? While website design is moving fast and furiously forward, when new users to the web are the primary audience, consider the following tried and true tips and everyday design practices to improve your visitors experience with your website:
- Clicking on the logo should take you to the home page of your website
- Your logo/site title should be positioned in the top left of the page
- Duplicate your main navigational links in the page footer with links to additional, but less prominent pages
- Keep your navigation positioning consistent from page to page
- Don’t open links in a new tab/window, except PDF’s and embedded documents
- Highlight your current location in your navigation bar
- Use reasonable sized fonts (12px or larger)
- Make sure font sizes are flexible (Use em’s or %, not px)
- Sans-serif fonts are easier to read at small sizes
- Serif fonts are easier to read at large sizes
- Center your layout on the screen
- Use a page width appropriate for your audience (Older people use lower resolutions, tech saavy people use higher resolutions)
- Use white space to logically group related items on the page
- Use font sizes, colors and styles to prioritize content
- Use 1.4 or 1.5em line height
- Use line lengths of 45 – 60 characters, the same as a paperback book
- Link to related content within the context of your page content
- Make sure your links change color/style when visited
- Always underline links, except some navigational cases
- Do not make important parts of the website look like an advertisement
- Use pull quotes to highlight important content in a lengthy article
- Text should be concise and scannable
- Use dark gray text instead of black text on a white background
- Break long pages into multiple pages
- Do not use all uppercase words, word shape helps word recognition
- Divide text into sections and use sub headlines to make content more easily scanned
- Keep a consistent layout, colors and typography throughout the whole site
- Print friendly automatically with print style sheets
- Use buttons to submit forms (Some images which look like buttons are ok)
- Don’t disguise or over-style inputs
- Don’t redesign standard UI elements, like scrollbars (this means you, flash people!)
- Use breadcrumb navigation for hierarchical content
- Search results page should reiterate the phrase you searched for
- Do call your homepage “home” – not “welcome,” “front page,” “your organization name” or anything else
- Use short and easy to read URL’s
- Give links to other content on your site related to their current page
- Optimize images for fast downloading
- Publish new content regularly, don’t “set it and forget it"
- Test in all browsers and OS’s, and different versions – IE, Firefox, Safari, Opera and Chrome
- Listen to your users and let them dictate changes (user centered design)
- Avoid using jargon in page copy unless absolutely necessary
- Keep forms short, only ask for what you absolutely need
- Encourage conversation around your content. Comments, forums, etc…
- Include a text only sitemap
- Use the title attribute on links to add more context
- Never use “click here” as the text on a link
- Write in a inverted pyramid style
- Create friendly 404 pages which help people find content
- Create incentive to come back later
- Connect information via hyperlinks, don’t force navigational channels