Interaction Design Checklist

Defining the relationship between user and product includes broad theoretical concepts as well as technical and visual details that affect user perception and experience. I pulled the following list together for some teammates that wanted to understand what I do better. It is by no means exhaustive, it simply highlights some key concepts involved in the design and evaluation of software product human-computer interaction that are easy to comprehend and evaluate.

I have grouped the list into four sections:

  1. Planning
  2. Design Phase
  3. Double Check
  4. Holistic View

Regardless of actual project phases, the following evaluations can and should be regularly performed throughout the life of the project.

1. Planning

Have a clear, well-informed plan and be open to adjusting it over time.

Know your users

Understand the various users of your system and let that awareness color every choice you make. I can’t stress enough how important this knowledge is for decision-making for design and development.

  • How your product fits into their daily life
  • Their level of technical ability and domain knowledge
  • Their needs, expectations, priorities and pain points
  • What will make them successful
Know what you’re doing

Doesn’t this seem obvious? Contrary to popular belief, Interaction Design is not something that can be tacked onto a product at the end of the production cycle. This can be the cause of costly rework or completely missed opportunities. Make sure you have mapped out a plan based on solving user problems, verify that your ideas and designs actually solve the issues you’ve identified, and double check that each goal aligns with the goals of your business. Also, be willing to adjust your goals based on knowledge acquired throughout the process.

Prioritize

When you’re mapping out what you want to accomplish, you want to be creative in your brainstorming phase so be open-minded. Otherwise you might miss some great opportunities. In a sense, you’re creating a wish list and you want to explore a variety of options. After you’ve brainstormed, identify the essential items. Some items are necessary for project success and it’s essential to identify where this threshold lies. Make sure everyone is aware of how items are prioritized and where the thresholds lie so everyone is making decisions that support the big picture.

Don’t sweat the small stuff

When managing priorities, keep in mind what features are most important to the success of the user and be willing to let go of things that aren’t essential. Some features or designs are important, but when compared to the list of priorities and identified thresholds, it’s importance may be different than what you were thinking without that context.

Don’t jump into design prematurely

Develop a clear understanding of the content and the features first, then concentrate on how it’s best presented to help the user accomplish their tasks.

Content is the star of the show

Don’t drown out important content or functionality with fancy controls, containers or widgets as these can be distractions from user success.

Keep your eye on the ball

It’s easy to get lost on a tangent and there’s always more that can be done. Refer back to a clear list of goals often and revise as often as necessary.

2. Design Phase

Design for user success.

Give visual feedback

Display visual feedback for buttons, tabs, links, etc. to let the user know what’s active and that the system is responding to them. This also includes the use of confirmation dialogs, results lists, alerts, etc.

Don’t obscure functionality

If the user doesn’t know it’s there it may as well not have been built. Make sure discoverability is appropriate for all features and options.

Let the user breathe easy

Don’t pigeonhole a user into a corner they can’t get out of. Make sure important decisions can be reversed or confirm they want to proceed before data is lost.

Be trustworthy

Make sure nothing in the user interface presents confusion. Make sure things operate the way they are expected to by the user. This refers to consistency with visual cues, consistency with widgets and functions and ensuring that designs perform the way they are intended in all aspects. There should be no surprises.

Visual context awareness

Take a holistic view (w/in the UI). Everything affects everything. If you change one element in the UI, notice how it affects other elements on the page.

Use whitespace effectively

Use whitespace to indicate relationships, divisions, and support visual focus (like a frame).

Information chunking

Research shows people can only process so much information at a time, so chunk information into consumable portions when presenting a large set of options.

Contrast creates dimensionality

Darker elements recede and lighter elements come forward. Using multiple shades can convey a hierarchy.

Color matters

Color isn’t for aesthetics alone. It can engage, draw attention, associate and disassociate objects.

Question everything

Everything on a page needs to be processed by the user at some level: Images, colors, text, layout elements, etc. Exclude anything that does not serve a purpose.

Manage visual complexity

Each object in the UI has visual weight. The more complex an object is, the more attention it draws. Therefore, adding visual complexity or visual stimuli to one object, often requires adjustment of other objects on the page to balance visual demands. It is sometimes tempting to add complexity at the beginning because the canvas is open and bland, but it can easily get out of hand as time goes on and new content and features are filled in.

A rose is a rose, except when it’s not a rose

Help users navigate and interact with the product by providing a consistent experience. Presenting similar functions in different ways just because the available plugin act different in one context causes confusion and requires excessive mental processing. On the other hand, consistent presentation of like components improves the identification, understanding and use of product artifacts, the very definition of ease-of-use. Conversely, do not allow features that function differently to look the same. This can cause just as much confusion and frustration for the user.

Just-in-time design

Present options and information at the appropriate contextual moment. For example, don’t present all possible options at once. This will overload the user. Instead, present primary options first and offer intuitive ways to get to secondary or subsequent features. Make sure advanced or secondary features are available when looked for. This way you can present a simple interface that doesn’t lack robust features.

The Department of Redundancy Department

It can sometimes be tempting to be explicitly clear and technically accurate with verbiage, but keep in mind users are being presented with visual cues and multiple page elements that might make some ‘accurate’ references redundant. Generally, users quickly scan the page to locate their intended target. Help them parse the page quickly with clear, concise verbiage that is context aware and fits nicely with visual cues.

Polish and shine

Pixel-polish presents a professional image. It’s a reflection of your business and its credibility. It also has a large impact on the ability of users to focus and follow flow in the UI. Small visual aberrations can distract, even confuse visually sensitive users.

3. Double Check

Key questions to ask. This seems like a simple list, yet it encompasses performing evaluations for all ‘pages’ of the product and for every task the user can perform in the system.

When I arrive at this page, do I know what to do?

Users tend to scan pages. Make sure visual designs support scanning. This refers to the use of information hierarchy, chunking, color differentiation, whitespace, contrast, etc. Perform this evaluation for all key ‘pages’ in the system.

For each identified user task, is the path to completion clear?

It’s easy for a feature that was designed early to get lost in a feature added later. Refer back to the prioritized task list and step through the path to complete each task. Double check that the most important features stand out on the page and that the flows are easy to follow.

Does the design accommodate both visual and linguistic processors?

People process information differently. Make sure the design includes clear and distinct verbiage and crisp visual signifiers. Also, keep in mind those who are colorblind. Eight percent of the male population is at least partially color blind, so make sure that color is not the only way to differentiate significant visual cues.

4. Holistic View

Step back and take another high-level view of your product and the relationship it has with its consumers.

Is the product solving user needs?

Product teams learn a great deal of information throughout the process of building product solutions. It’s important to step back and reevaluate the premise and determine if the solutions being developed truly help the various users of the system accomplish their goals. This process can be paired with how to best position the product to the intended market.

Is something missing?

With design changes and fast-paced design and development, key elements can slip through the cracks. Make sure you evaluate what your product delivers and whether you feel something important is missing in the user experience.

Does the product appropriately reflect the business?

Make sure your product design promotes your business from an aesthetic and a massaging standpoint. Also consider it in the context of other products you offer. Make sure that any users that might access multiple products experience consistency and ease-of-use when moving from one product to another.

Thinking beyond the interface…

Responsiveness is key

A system that does everything you want it to but does it slowly isn’t particularly useful in most situations. Make sure response time is reasonable for the target audience, especially if product use reaches across the globe.

Reinforce user success

If possible, build in features that reinforce success. Show the user what they’ve accomplished and remind them why the product is significant to them. This can be done with analytics or even small features that display completed tasks or steps. Find out what is perfect for your audience.

Personal appeal

Engage the user and create an emotional bond by giving them options for personalization or customization, even if it’s just a color selection. You’d be surprised how much a consumer responds to a system they feel is ‘theirs.’