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:
- Design Phase
- Double Check
- Holistic View
Regardless of actual project phases, the following evaluations can and should be regularly performed throughout the life of the project.
Have a clear, well-informed plan and be open to adjusting it over time.
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
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.
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.
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.
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.
Don’t drown out important content or functionality with fancy controls, containers or widgets as these can be distractions from user success.
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.
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.
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.
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.
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.
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 to indicate relationships, divisions, and support visual focus (like a frame).
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.
Darker elements recede and lighter elements come forward. Using multiple shades can convey a hierarchy.
Color isn’t for aesthetics alone. It can engage, draw attention, associate and disassociate objects.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…
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.
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.
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.’