Oxide Design Co.

Top tips for interface design

Months ago when we were working with Maren Hogan to figure out the most appropriate way to launch a blog for Oxide, she’d offhandedly mentioned that “top ten this” or “best five of that” blog posts often receive a disproportionately large amount of traffic. I remember thinking to myself that hell would freeze over before Oxide would be posting top ten lists on our news site. Well, only 22 posts in, and here we are. However, I have an excuse. I was asked by Joe Olsen to present on interface design at this year’s Heartland Developers Conference. Since I had already developed this content for my session, I thought it’d be worthwhile to share it with an even broader audience.

“Good design is obvious. Great design is transparent.”
— Joe Sparano

UI design, whether it’s for applications, web sites, or electoral ballots must be first and foremost about function, not style.

“If you have a great app that is easy and intuitive to use, it doesn’t really matter what it looks like. By the same token, a great-looking app with poor usability will generally not fly very far. Quality trumps aesthetics every time.”
— Warren Benedetto, Transfusion Media

What follows is a set of easy-to-follow rules for the design of layouts, creating highly user-friendly and efficient design. The purpose is simple: to maximize usability. There’s an exception to every rule, but when clarity is the goal, you should find these to be almost universally applicable.

This is not intended to be broad, conceptual guidelines (e.g. model-driven design, “design for people”, etc.) or detailed, hyper-specific instruction (e.g. “form labels work best above the field”, “place text six pixels below an icon”, etc.). Indeed, I hope it finds a useful space in between those two categories.

1. Use sentence case

Use sentence case wherever possible, including headlines, instructions, labels, and other text.

Lowercase letters are more legible than all capitol letters because they create a silhouette that is easier to recognize. Additionally, the unexpected capitol letters in title-case sentences can erroneously indicate importance where there is none.

2. Left align your type

Left align type in all cases, and left align groups of related objects whenever possible.

Left-aligned type is more legible than centered or right-aligned type, each of which forces the eye to search for the start of the next line. Western users read left-to-right, top-to-bottom; therefore, it creates unnecessary complexity when a reader cannot scan easily scan down the leftmost column.

3. Use one sans serif font

Stick to a single sans serif font (in regular, bold, and italic if necessary) whenever possible. If you must use a second font, employ it exclusively for a distinctly different type of content and do so consistently.

Different fonts require the eye to stop reading and adjust, because the change indicates that something different is being indicated. Additionally, while serif fonts (Times, Garamond, etc.) are good for large amounts of printed text, sans serif fonts (Helvetica, Arial, Verdana, Tahoma, etc.) are recommended for short amounts of reading, and for on-screen use.

4. Use icons functionally

Use icons only in those places where it’s important to add emphasis and clarity to an action or piece of information. When using icons, stick to symbology that is already readily understood or imagery that is singular in meaning.

Use of icons and other graphics can aid in efficiency and clarity. The problem with icons is that when they don’t work, they really don’t work. Inaccurate or unclear icons can create confusion, and overuse of icons can drastically lessen their impact when they might have been helpful.

5. Use color functionally

Use color and shading consistently; use a single color to indicate the same type of action or same kind of information. Always back up color with a secondary indicator for users who may not recognize color.

Color can add a great deal of usability to layouts if used sparingly and consistently. On the other hand, color can confuse the user if employed gratuitously or randomly. Color is most effective when used to draw attention to only the most important elements in an application (such as a dynamic alert), or consistently used to indicate a specific type of information (such as instructions). However, color cannot be relied on as the only way to communicate important information — many users have some form of color blindness.

6. Use clear, simple language

State instructions and options as simply as possible. Use terms that are already familiar to the audience instead of shorthand or “code developer speak”. Label buttons with actions instead of “yes” and “cancel”.

The verbiage displayed on screens is a primary source of information for your users. Poorly worded text or cryptic abbreviations and codes can alienate users — or worse yet, confuse them into the wrong action. The specific language used in any UI layout is at least as important as any other element on the screen.

7. Support process and navigation

Clearly communicate where a user is in each process, and provide feedback after each action is complete. Use tools such as breadcrumbs to identify location if there are multiple levels of depth. Avoid nested menus. Clearly identify what is clickable and what is not.

In order for users to find an application functional, they need to always have a sense of place. A good application should function like a well-designed museum: a clearly marked wayfinding system to help each visitor find the specific exhibit they came to see. Wayfinding in UI layouts can involve numbering steps in a process, showing breadcrumb trails, confirming when any action has been completed, and anything else that helps a user understand exactly where they’re at.

8. Indicate relative levels of importance

Use relative size, contrast, and position to help the user focus on what is most important. Determine the relative importance of elements on a screen, and then intentionally make the design reflect that hierarchy.

Layout and text sizes should support information hierarchy. A clear hierarchy of elements can help reduce the appearance of complexity even in circumstances where the tasks are quite complex. Size, contrast, and placement of each element should work together to create a clear understanding of the path a user should take.

9. Make use of white space

Use less white space between items to create a group of related items, use more white space to separate distinct groups or concepts. When possible, use white space instead of lines, borders, or frames.

White space can improve comprehension for the viewer by indicating the relationship between objects or groups of objects. Often times, there’s a lack of attention paid to the empty space in a UI layout. Default uniform spacing between all items on a screen can create confusion about where to focus, or which pieces are related.

10. When in doubt, leave it out

Simplify whenever possible, remembering that everything should have a reason for being. If you can’t determine an element’s explicit and required functionality, remove it from the layout.

Perceived complexity can be one of the greatest roadblocks for any interface or application. A good guidepost for UI design is Edward Tufte’s “least effective difference” concept: use the smallest visual distinction required in order to effectively communicate an idea. In the real world, this means emphasizing what’s important and scaling back (or removing) everything else.

“Everything should be made as simple as possible, but no simpler.”
— Albert Einstein