Digging into Design Details

Interface design is a complicated process. Designs are rarely created in an ah-ha moment so much as they are the result of a process that takes lots of time and thought. Designing interfaces involves lots of analysis, many conversations and multiple rounds of iteration before a hand-off is solidified and agreed upon. Many aspects must be considered such as the intended users, their goals and tasks, business goals, business scope, the technology, budgets, timelines, constraints and so on. To help deal with the information overload there are many tips, tricks, principles and best practices used in the design community as a basis for forming initial designs and analyzing the multiple aspects of a designs interactivity throughout the itterations. However there are also some lesser known best practices that don’t get as much attention as others. I decided I would like to focus this post on 7 design principles which are sometimes missed or not given as much attention by UX designers as they might deserve.

1. Design the Auxiliary

Auxiliary information and controls are often an afterthought, or considered part of the medium through which the interface is being used. These however, should also get some attention and thoughtful design. Auxiliary details include controls like screen splitters and scroll bars as well as content like supplementary feedback through word count, saved statuses and more. The auxiliary is about quite feedback and subtle controls that can sit quietly and unnoticed until they are needed. Think about how Microsoft word shows the total number of words in a document on the bottom corner of the application. The information is supplementary to the primary task of creating a document. It doesn’t get in the way but it is easy to access when needed.

2. Integrate Up to Speed Aids

Are you creating something new, a big change or moving someone’s cheese? Don’t forget to think about the life-cycle of the person using your interface. How will they get up to speed, and what level of expertise is expected to use what you are designing? Separate what you expect a beginner to be able to do, versus an intermediate, and an expert. Can a beginner use the basic flow? Are expert features accessible but unobtrusive? With more and more touch interfaces, novice users don’t always discover swipes, multiple taps, and gestures that are required for major parts of the interface. While there is a large generation of users who have now grown up with technology, there is also a large group of users who have been forced to learn technology. Is your system accommodating both approaches? Ensure that beginners have the tools to become intermediates, and motivated intermediates can become experts. Then ensure that experts can easily move through the interface without beginner aids slowing them down.

3. Determine User Attention

With all of the mobile first excitement, some interfaces are coming out bare bones when they need to be more complex. Mobile first doesn’t necessarily mean simple, but rather the appearance of simplicity is often a complex orchestration of functionality that enables the user to complete their goals while appearing to be simple. Consider if your interface will be used for long periods of time, for brief tasks, or if is is something that should be in the background without drawing attention to itself until it’s needed. The amount of attention that is expected will impact the way people approach the design, and the way the interface will need to support them.

4. Represent Visually

From gestalt principles to graphics, every visual conveys a message whether or not it is intended. We also have a better memory for visuals then we do for words. When laying out your interface think about places where visuals could replace descriptive information. If a graph could be used for data, what type of graph would be best. Consider the visual hierarchy of the page as well, we often forget about the good ‘ole gestalt principles, but they are affecting perception whether we design for them or not. What about the 8% of men who are color blind, does that affect your design?

5. Consider Multiple Views

In mobile platforms we see landscape and portrait as two different views which can accommodate different layouts and have a different hand postures. But what about different views of the same information? Think about calendars with their agenda, day, week & month views as well as publishing software with print, web, editing, and presentation views. Think about the different types of information needs people can get solve with different views. Are multiple user archetypes trying to get at different pieces of information from the same feature? Views could help solve this problem by providing the appropriate information for the appropriate context.

6. Account for Microinteractions

Probably one of the most egregious and most common missing items from a many designs are explicit and detailed interactive specifications. The devil is in the details and microinteractions are the heart of the details (a term coined in the new book microinteractions by Dan Saffer). We become so used to our own mental model and assumptions of how interface controls and patterns work that too often necessary annotations and analysis are missing from deliverables. These often subtle yet important details can easily draw the line between unobtrusive invisible interfaces, and obvious clunky interactions and interruptions. Littlebigdetails.com is an excellent blog that digs into the details of the little things that make a big difference.

7. Sign Your Work

In architecture blue prints are meticulously designed with every centimeter accounted for, every tick mark in the right spot, and at the bottom of every design a title block with all the relevant information about the design. This helps not only the creator reference it later, but additionally makes it easy to share and provides context. However too often designs are passed off with well known working groups and the assumption that the project and creator is clear. Over time though as teams changes and projects are referenced outside of their original context those details become important. With every design provide your name, the project, the date and the version of the design at the least.  The folks at eightshapes have some great templates that always account for title blocks.

What additional tips or best practices would you like to see more commonly in interface design?