Make Your Web Visual Design More Usable:
Often when making the switch to web, graphic designers strive for visual and conceptual excellence, but may face hurdles in dealing with usability expectations. Listed below are 10 common best practices for ensuring your design's user experience is as solid as the visual design you worked so hard on:
1. Canvas size - the minimum screen resolution to accommodate for now is 1024 x 768, so you can ditch that 800 x 600 layout. This means typical width restrictions are between 960 - 980px and page height is scrollable.
2. Type size - traditionally, 12pt is a good minimum. This way users with higher resolutions are not squinting to read your text. As a measure, the New York Times uses 15px (or 1.5em) for it's article body text.
3. Whitespace - don't be stingy, give your users the ability to easily scan the page by allowing appropriate amounts of whitespace between page content. Regardless of how much info needs to be squeezed "above the fold", it's useless if it's packed so tightly that it's virtually illegible.
4. Clear delineation of space - Another tactic to aid scan-ability is to clearly define space by visually grouping different content types. It's also a good idea to label your groupings so people know what they're looking at.
5. Large target areas - for hovers and links there's nothing worse than trying to select a 2 x 2px live area. Give users a better experience by making the target area of graphic links as large as possible.
6. Navigation conventions - At the most fundamental level it's best to follow the navigation conventions of tabbing, utilizing a horizontal main nav and left column sub nav to allow users to easily find what they're looking for without having to "learn" your site.
As an analogy, imagine trying to complete some tasks you always do, but on an operating system you've never used before. If similar things are in familiar places, it will provide a more shallow learning curve.
7. Grid based layout - Use a grid just as you always have. Arrange your elements in columns with margins and regular leading to bring a strong underlying mathematical structure to each page type.
8. Extensibility - Always allow for a varying amount of content. Just when you think all of your links are going to be one line of text, there will inevitably be one entry with two lines or more. Plan for these events in advance and always allow the design to accommodate them when they happen. Use character maximums and pager controls to tame never ending text.
Also, know what happens when images you choose are swapped out with images chosen by the client. You may need to establish a visual guideline before launch to ensure the correct brand experience is conveyed.
Similarly, tone of voice guidelines should be drafted to keep the messaging on brand while accomplishing shorter term marketing goals and site usability.
9. UI is Systemic - Similar functions in different parts of the site should be similar. Create small graphic families for similar elements to keep users oriented as they access info and complete tasks on different pages.
10. Smallest Effective Difference - Use the smallest effective difference between visual elements in your design. Big shifts in visual appearance between elements can create distraction. Make differences clear, but elegant.
Start with these simple tips and you'll be well on your way to a useful and usable site design!
Three excellent resources for viewing how other designers have overcome common usability issues:
> konigi
> patterntap
> grid based layouts
