Evangelising UX beyond the UX Team
In May 2018, SQLI sponsored my professional growth by allowing me to attend a User Experience conference, in Lisbon. UXLX is an annual event that gathers many UX professionals from around the world for four days of education, networking, and fellowship.
One of the most interesting talks was given by Dan Brown, Designer and Co- founder of eightshapes. In his talk, Dan introduced a practical tool for designing digital structures, which he called 'Information Architecture Lenses'. This was a deck of 51 cards, each one listing topics, and questions about IA, that he had been gathering for several years.
On every project he had worked on, Dan asked himself the same set of questions about the underlying structural decisions. These questions were the very critique that helped him move the design process forward. Each question was a lens, through which he examined the structure of different elements in a website, a mobile application, specific user flows or a tiny piece of content.
Within a global luxury goods group, our UX/UI team has been focusing all efforts on a customer service product, with versions to be released soon. Recently, however, we were contacted by other teams, asking for guidance on UX best practices and practical hands-on advice for their projects.
Surprisingly or not, UX Design is still neglected by many companies, independent of their maturity. And we found that most of our colleagues knew that UX stands for user experience but they had a hard time explaining what designing for a user experience means, or what a UX designer does.
So, we planned group sessions and a half-day workshop, not only to tackle many questions about specific features and user flows for their projects but also to evangelize and educate about what UX Design is.
At this point, we remembered how valuable Dan Brown's set of cards is, in having a practical tool that can help anyone to understand how the design process works. So we decided to create a similar tool, a checklist with a set of the most common UX topics to keep in mind. It can be used as an informational tool or 'lens' to cross-check features in a product, common UI components or perform a basic evaluation of the user experience. Our goal was to help colleagues to adopt an autonomous UX mindset, to be independently aligned with UX principles, better understand users, and avoid costly mistakes.
Our UX checklist is a “work in progress” that will be modified and refined as necessary. Moving forward, we feel that our mission, to help and educate others about UX, has just begun. We hope that this close cooperation will enhance and result in important benefits, in particular an increase in our team size.
UX Checklist
The next time you start your project, use this checklist to evaluate and improve the UX of your components, to ensure users a more enjoyable, frictionless experience.
1/17: Follow standards
Users should not have to think whether different words, elements or actions have the same meaning or function. Don’t make them think. Follow design conventions.
How to identify a potential problem?
If a component is difficult to understand, or because of a content switch, your user will think about what is used for: then you need to act.
2/17: Minimal is king
Dialogues should not contain irrelevant or rarely needed information. Every extra unit of information in a screen competes with the relevant units of information, thus diminishing their visibility.
How to identify a potential problem?
Is the information displayed on the screen, only the essential to the user’s decision-making process? If not, then you need to act.
3/17: Use color wisely
Be smart and use color consistently, limiting the color palette – ideally 2, no more than 3 colors. Use saturated colors to attract attention. Pay attention to text and graphics: horizontal alignments are more natural for most readers.
How to identify a potential problem?
Are you using color to differentiate buttons – primary, secondary? Are text and labels, AA color-contrast-compliant? Are you using alignment consistently in your forms? If not, then you need to act.
4/17: Smart content
Clutter contributes to losing focus or interest. Display only required content and functionalities. Hide or remove content that is only necessary if the user ‘clicks’ for more detail – principle of progressive disclosure. Eliminate distractions: not all data is equally important to users, prioritize. When detail isn’t needed, summarize.
How to identify a potential problem?
Are you displaying relevant content and functionalities only once in the same page? Do you hide or don’t request information that is not considered priority. If not, then you need to act.
5/17: Visual hierarchy
Think about the order you want the user’s eyes to be drawn through each screen. Then, group similar elements and align them: grouping information is an easy way to associate elements and create visual order.
How to identify a potential problem?
Are you grouping related fields in your form? If more than six fields, are you grouping them into logical sections? Do you provide filter and sorting features? In forms, do you ask users only mandatory information? If not, then you need to act.
6/17: Design proudness
Design is the combination of an enjoyable user experience with an efficient user interface. Analyzing it will help prevent possible friction, misunderstandings and flow blockers.
How to identify a potential problem?
Are the most important elements on top of the page? Does every element on the screen delivers value? Will the user achieve his goal with it? If not, then you need to act.
7/17: Icons matter
Graphic elements such as icons, can ensure visual harmony, consistency and clarity. Use icons from the same icon set or family. Don’t make users think about meaning. Be obvious.
How to identify a potential problem?
Does every element in the page communicates consistency, as being part of the same visual «family»? If not, then you need to act.
8/17: Error prevention
Better than good error messages is a careful design that prevents problems from occurring. Prompt users with a confirmation option, before they commit to an action.
How to identify a potential problem?
If during a process, the user needs to confirm a key action, is there a validation component to avoid error? If not, then you need to act.
9/17: Useful messages
A useful error message helps users recognize, diagnose, and recover from errors. Error messages should be expressed using a “human” tone of voice, precisely indicate the problem, and constructively suggest a solution.
How to identify a potential problem?
Do error messages suggest the cause of the problem? If not, then you need to act.
10/17: Recognition is better
Minimize the user's memory load by making visual elements and functionalities visible and recognizable.
User’s should not have to remember information from one part of the system to another. Instructions for use should be visible or easily retrievable, whenever appropriate.
How to identify a potential problem?
Are prompts, cues, and messages placed where the eye is likely to be looking on the screen? If not, then you need to act.
11/17: Shortcuts save time
Shortcuts for the most frequent tasks save time and facilitate operations for expert users. Make shortcuts different from other “common” elements.
How to identify a potential problem?
Are you providing shortcuts for the most used tasks? If not, then you need to act.
12/17: System feedback
A system should always inform users about what is going on, through appropriate feedback, within reasonable time.
How to identify a potential problem?
Does every screen begins with a title or header that describes content? In multi-step flows, do users know exactly where they are? If a process ends sucessfully, do users receive feedback? If not, then you need to act.
13/17: Accessibility
Consider accessibility issues, such as colorblindness and make sure your system is simple to operate and robust (to allow error in use while preventing destructive actions).
How to identify a potential problem?
Does the platform support Keyboard shortcuts or alternative texts for slow internet connections? If not, then you need to act.
14/17: Empty states
How will a screen look like, when the user opens it for the first time? What if there is no data to display in a list? Empty states should not be passive screens but an opportunity to invite users to start an action.
How to identify a potential problem?
Do you provide «empty» states for each component on screen? If not, then you need to act.
15/17: Loading...
We always think that a system will be fast without any network constraints. Make sure you always show users when a new content is loading or a validation process is ongoing. If it takes time, use a progress bar.
How to identify a potential problem?
Do you provide a visual help to indicate your user that your process is taking more time than expected? If not, then you need to act.
16/17: Wording consistency
Copywriting is interface design as well. It is better to avoid using industry jargon and keep it short and sweet. Always try to use words that your mom could understand it.
How to identify a potential problem?
What do your users need to know on this screen? Do you speak the same language as your audience? If not, then you need to act.
17/17: Affordances are good
Affordances are inherent characteristics that makes something obvious about its use and function. Affordances help people understand what specific actions an object can perform. Color, shape, size and position are properties that can increase or decrease an element’s affordance.
How to identify a potential problem?
Is that button obvious? Is it a button? Is it a logo? Is it clicable? If you are not sure, then you need to act.
The team behind this project
Paulo Lourenço - UX/UI Designer