18 August 2011
Laws of Simplicity in Web Design: Part 1
I've followed John Maeda's career since his ground-breaking research at MIT Media Lab. Now President of the Rhode Island School of Design, Maeda is the leading expert in the simplicity of interface in the information age. His book, The Laws of Simplicity, outlines 10 laws to follow when designing almost any complex system.
The following list is Maeda's 10 laws, followed with techniques I've used in web design to keep things simple.
Law 1: Reduce
Crowded copy is difficult to look at. Giving information on a page plenty of breathing room with ample margins is a first step. Fewer things on a page are easier to take in. Hiding information until the moment it's needed, for instance, when filling out a complex form, makes a task seem less overwhelming. Drop-down menus, instructions that popup on mouse-over, or using an accordion technique keeps the user focused.
Law 2: Organize
Obviously, an alphabetized list is easier to read than one that isn't. Categorizing content should feel the same way as alphabetizing: logical, sequential ordering with every topic included. "Miscellaneous" or "Info" categories are symptoms of lazy organizing. Sensitivity to the user's point of view should lead the categorizing process. Too often, organizations end up "talking to themselves" with their own vocabulary, rather than talking to their audience. Some visitors to your site are novices, some are experts, but all of them are looking for something they don't know. Put yourself in their shoes.
Law 3: Time
"Skip Intro" flash animation jokes aside, anything that makes you wait becomes a complication. If your site offers good content, chances are that you'll have repeat visitors. Do those folks a favor and make it easy for them to come back. Technologies like Flash, and sometimes dynamically generated pages (content that changes as things are added or subtracted over time) make it impossible to bookmark content and force the user to go through a series of clicks to rediscover where they were before. I'll put "Spotlight" links with a nice big graphic on the home page for the most hit areas of the site. If you have a lot of dynamically-driven content, a "Search" box is a must for every page. If they have to wait, a progress bar or loading graphic helps take the worry out of waiting.
Law 4: Learn
It's easier to use knowledge that a user already has rather than teach them a whole new way of doing things. This is never more true when it comes to navigating a web page. Everyone knows green means go and red means stop. Everyone knows that blue highlighted text is a link. A right pointing triangle means "play." A button that looks like something you can press in the real world, with drop shadow and light source in the graphic, doesn't present any confusion about its function. If you need to change link colors for aesthetic reasons, keep it consistent throughout the site so the user only has to "learn" once.
Law 5: Differences
Using contrast and color to delineate headings, topics, and subtopics helps the eye make sense of information. If two topics side-by-side are different, making them also look different reinforces the idea. Intuitive, unconscious trickery! Subtle differences can also make all the difference. A wall of text can be easier to scan if broken up in sections using varying backgrounds, boxes, or margin changes. A table of data is always easier to read if alternating rows have a different color.
Continue to Part 2. Part Two