Taking UX outside of the UX Team
SQLI supported my professional development by allowing me to attend a User Experience conference in Lisbon in May 2018. UXLX is an annual conference that brings together hundreds of UX professionals from all around the world for four days of learning, networking, and fellowship.
Dan Brown, designer and co-founder of eightshapes, gave one of the most fascinating speeches. Dan proposed 'Information Architecture Lenses,' a practical tool for constructing digital structures, in his session. This was a deck of 51 cards, each with a list of themes and questions regarding IA that he had compiled over the years.
Dan had asked himself the same set of questions regarding the underlying structural considerations on every project he had worked on. These were the very queries that aided him in moving the design process forward. Each inquiry served as a lens through which he evaluated the structure of various pieces on a website, in a mobile app, in certain user flows, or in a small piece of content.
Our UX/UI team at a multinational luxury goods company has been concentrating all of its efforts on a customer support product that will be delivered in the near future. Other teams, on the other hand, have recently approached us, seeking help on UX best practices and practical hands-on advise for their projects.
Whether it's surprising or not, many businesses still overlook UX Design, regardless of their maturity. And we discovered that while most of our coworkers recognized what UX stood for (user experience), they struggled to describe what it meant to design for a user experience or what a UX designer performs.
So, in addition to answering numerous questions about specific features and user flows for their projects, we scheduled group sessions and a half-day workshop to evangelize and teach about what UX Design is.
At this point, we remembered how useful Dan Brown's deck of cards is as a practical tool for anyone wanting to learn about the design process. As a result, we decided to make a comparable tool, a checklist with a list of the most important UX topics to remember. It can be used as a 'lens' or informational tool to cross-check product features, common UI components, or do a basic user experience evaluation. Our goal was to assist colleagues in developing an autonomous UX mentality, aligning themselves with UX principles independently, better understanding users, and avoiding costly mistakes.
Our user experience checklist is a "work in progress" that will be updated as needed. Moving forward, we believe that our mission of assisting and educating people about user experience has only just begun. We expect that our tight collaboration will improve and yield significant benefits, including a larger team size.
UX Checklist
Use this checklist the next time you start a project to review and improve the UX of your components so that users have a more delightful, frictionless experience.
1/17: Follow standards
Users should not have to consider whether several words, elements, or actions have the same meaning or function. Make them think as little as possible. Stick to the rules of design.
How do you spot a potential issue?
If a component is difficult to comprehend, or if a content swap occurs, your user will wonder what it is for: this is when you must act.
2/17: Minimal is king
Information that is irrelevant or only occasionally required should not be included in dialogues. Every additional unit of data on a screen competes with the relevant units of data, reducing their visibility.
How do you spot a potential issue?
Is the information on the screen merely that which is necessary for the user's decision-making process? If not, you must take action.
3/17: Use color wisely
Use color consistently and limit your color pallet to no more than two or three hues. To draw attention, use rich colors. Pay attention to the text and graphics: most readers prefer horizontal alignments.
How do you spot a potential issue?
Do you use color to distinguish between primary and secondary buttons? Is AA color-contrast compliance required for text and labels? Do you use alignment in your forms on a regular basis? If not, you must take action.
4/17: Smart content
Clutter makes it easier to lose concentration or interest. Only show the content and features that are required. Progressive disclosure principle: hide or remove stuff that is only required if the user 'clicks' for further information. Remove distractions: people don't value all info equally, so prioritize. Summarize when more information isn't required.
How do you spot a potential issue?
Do you only provide relevant content and features on a single page? Do you keep information that isn't considered important hidden or don't ask for it? If not, you must take action.
5/17: Visual hierarchy
Consider how you want the user's eyes to be drawn through each screen in order. Then, group and align comparable pieces: grouping data is a simple technique to correlate elements and establish visual order.
How do you spot a potential issue?
Are similar fields in your form grouped together? Are you arranging the fields into logical parts if there are more than six? Do you offer filtering and sorting options? Do you only ask for mandatory information on forms? If not, you must take action.
6/17: Design proudness
Design is the marriage of a pleasurable user experience and a functional user interface. Analyzing it will aid in the prevention of potential friction, misconceptions, and flow stumbling blocks.
How do you spot a potential issue?
Is the most significant information at the top of the page? Is there any value in every piece on the screen? Will the user be able to attain his objective with it? If not, you must take action.
7/17: Icons matter
Icons and other graphic components can help to maintain aesthetic harmony, consistency, and clarity. Icons from the same icon set or family should be used. Don't make users think about what they're seeing. Make your presence felt.
How do you spot a potential issue?
Is every element on the website consistent, as if it belongs to the same visual «family»? If not, you must take action.
8/17: Error prevention
A thorough design that prevents problems is preferable than good error messages. Before users commit to an action, prompt them with a confirmation choice.
How do you spot a potential issue?
Is there a validation component to avoid error if the user needs to affirm a vital action during a process? If not, you must take action.
9/17: Useful messages
Users can recognize, diagnose, and recover from mistakes with the help of a useful error message. Error messages should be delivered in a "human" tone of voice, with the problem clearly stated and a helpful solution suggested.
How do you spot a potential issue?
Do error messages point to the source of the issue? If not, you must take action.
10/17: Recognition is better
Make visual elements and functionalities visible and recognizable to reduce the user's memory load.
Users should not have to recollect information from one system component to the next. When possible, instructions for use should be visible or easily accessible.
How do you spot a potential issue?
Are reminders, signals, and messages positioned on the screen where the eye is most likely to be looking? If not, you must take action.
11/17: Shortcuts save time
Expert users benefit from shortcuts for the most common actions because they save time and make operations easier. Make shortcuts stand out from the rest of the "common" parts.
How do you spot a potential issue?
Do you have shortcuts for the most commonly performed tasks? If not, you must take action.
12/17: System feedback
A system should always keep users up to date on what's going on by providing suitable feedback in a timely manner.
How do you spot a potential issue?
Is there a title or header that describes the material on every screen? Do consumers understand where they are in multi-step flows? Do consumers receive feedback if a process is completed successfully? If not, you must take action.
13/17: Accessibility
Take into account concerns like colorblindness and make sure your system is simple to use and reliable (to allow error in use while preventing destructive actions).
How do you spot a potential issue?
Is it possible to use keyboard shortcuts or alternate texts to compensate for sluggish internet connections? If not, you must take action.
14/17: Empty states
When a user opens a screen for the first time, what will it look like? What if there isn't any information to show in a list? Rather than being passive screens, empty states could be used to inspire users to take action.
How do you spot a potential issue?
Do you have "empty" states for each screen component? If not, you must take action.
15/17: Loading...
We always assume that a system will run quickly if there are no network constraints. Make sure users are always informed when fresh content is being loaded or a validation procedure is in progress. Use a progress bar if it will take a long time.
How do you spot a potential issue?
Do you employ a visual cue to let your users know that your process is taking longer than expected? If not, you must take action.
16/17: Wording consistency
Interface design is also a part of copywriting. Avoid utilizing industry jargon and make your message brief and sweet. Always strive to use language that your mother will understand.
How do you spot a potential issue?
On this screen, what do your users need to know? Do you communicate in the same language as your target audience? If not, you must take action.
17/17: Affordances are good
Affordances are inherent qualities of a product that make its use and function clear. People can use affordances to figure out what precise activities an object can accomplish. The affordance of an element can be increased or decreased depending on its color, shape, size, and position.
How do you spot a potential issue?
Is that button self-evident? Is that a button, or something else? Is it a brand? Is it possible to click on it? If you are unsure, you must take action.
The team behind this project
Paulo Lourenço - UX/UI Designer