Take Advantage of Existing Standards
What are standards?
Standards are agreed upon conventions for a particular process or visual pattern based on research and proven best practices. They provide a basis for commonality across many diverse things. They allow us to learn something once, and employ it in multiple places. An example of a well know interface standard are the simple button icons used in rich text editing toolbars for bold, italic and underlined text. The B is Bold, the I is italic and the U is underlined.
Why are standards important?
By taking advantage of this standard you allow the user to use your editing options without having to learn anything new. This sets expectations, reduces training and cognitive load and increases understanding and clarity for the user. For the developer it decreases coding time as code can be reused from standard code pattern libraries and for the designer it provides a set rule for how buttons like this should look and work. The decreased development and design time results in reduced costs and quicker releases. Applause all around.
What if I want to be different, unique?
Following standards doesn’t mean you have to design in a box. Standards simply provide a set of guidelines to ensure that your end product will be usable based on current conventions. Just like the rest of technology, standards are constantly changing. Some are more hard and fast rules, while some are still being figured out.
For example, drag and drop is a relatively new convention. However not everyone has caught on to this convention yet. This is why you should also take advantage of the double click selection standard as well. This way a user can drag and drop and item to select it, or double click the item.
Consistency as a standard
In order to employ standards successfully, you must commit to them consistently throughout your application. Whether you are using a set of internal company standards, or basic design standards, they should be used consistently throughout the experience. For example, if you have a Next button at the bottom right of one page, it should look the same and be located in the same place each time is it used in the application, bottom right.
This allows users to learn the convention once, and then get on with what they are doing. If you move the button around, so in the next section it at the top and says Continue, then you increase the time it will take the user to learn the application, decrease their efficiency and introduce inconsistency into your design and interactions.
Just as we see inconsistent people, who say one thing and do another as unfavorable. We tend to dislike inconsistent designs. They require more effort and reduce the simplicity causing the user to spend more time focusing on how to simply use the application, then actually getting things done.
Where can I find these standards?
There is a wealth of online information and resources for both developers and designers. Pattern Libraries typically provide images as well as descriptions for use, exceptions, and code samples. Here are some popular interface design pattern libraries:
- User Interface Design Patterns
- Interaction Design Patterns
- Yahoo!’s Design Pattern Library
- Quince an Infragistics Pattern Library
- Konigi ‘s Interface Patterns
- Web Design Patterns
- Jenifer Tidwell’s Designing Interfaces Patterns
- The U.S. Department of Health and Human Services Usability Guidelines
Like in the real world, people using the web are usually distracted and not paying full attention. This is why taking advantage of standards and consistency is extremely important when designing a usable interface. Many designers try to set their designs apart by being cute and cleaver, however while creativity is encouraged it should not be at the expense of usability. It is important to keep standard conventions intact to keep things obvious and meet expectations.