Categories
Uncategorized

UX Checklist for Non-UX Designers

View the original post

Are your customers satisfied with your product’s UX in 2021? Don’t rush to say ‘yes’ (even if you think so), cause I have 10 reasons below to convince you about the opposite — there is still room to polish your UX.

Recently, I’ve decided to gather a lot of the best UX practices in one place — a Notion checklist with step-by-step instructions “How to check basic UX”. Having done a bunch of UX audits myself, I have collected over 100+ UX criteria, guidelines, tutorials, and recommendations.

When we launched it on Product Hunt, the checklist proved to be useful for many users.

So, I thought I should share this with the Muzli community as well, in case it proves helpful. This article is a brief overview of just some of the criteria present in the checklist.

UX audit checklist

The basic audit is divided into 10 ‘chapters’ that cover UX essentials:

  • Fields and forms
  • Login
  • Registration
  • Mobile UX
  • Visual design
  • Typography
  • Architecture
  • Interaction
  • Privacy
  • User trust

Fields and Forms

That’s where interaction with the product starts. Users fill in forms to register, log in, set up personal accounts, and so on. So, to make them as simple as possible, ensure that: forms are grouped according to the requested content (ex. personal information, address, education, etc)

  • all fields are arranged in one column
  • field labels are clear and familiar to users
  • size of fields matches the information entered (e.x. smaller fields for zip codes, bigger — for addresses)
  • users do minimum clicks (for ‘address’, ‘date’, ‘time’, users can select the data, not only enter it)
  • forms have at least 44 pixels in height & easy to click with a finger
  • every button has clear CTA
  • all buttons are of ‘standard’ size and stand out among other elements.
Fields are arranged in one column

Login

The basic rule of thumb is that login should be as smooth as possible (but you don’t need me to tell you that). Some obvious things to check are:

  • Do you have the ‘Forgot password’ clear link option?
  • Is there a ‘Remember me’ checkbox?
  • Can you make a password visible with an ‘eye’ button?
  • Can those who haven’t signed up yet, choose the ‘Create an account’ option on the login page?
  • Show value before prompting people to login
  • Provide a new user experience if you need to explain something
  • Login via social networks
  • Ask for permissions in context and explain why
  • Provide a way to log out
“smooth as possible” sign-in example at dropbox.com

Registration

It’s during registration that part of your users may drop off. Why? Big & complex forms require longer involvement and much more effort. Not everyone has time for it. To prevent high drop-off, check whether:

  • Available registration via social networks: Google, Facebook, iCloud
  • Registration by email or phone contains a minimum of steps
  • ‘Terms and conditions’ page is present — users have a legal right to read the terms & conditions they agree to by pressing ‘Sign up’ or ‘Register’ button
  • Password requirements are clear & visible (these might include number of characters needed, their format & other symbols allowed)
  • Password match is displayed when it’s entered for the second time
  • ‘Login/sign in’ options are available below for the users that have already signed up
Mailchimp requirements for password creation

Mobile UX

Today, a mobile-friendly website is a must. Most web admins already know that Google uses mobile-first index, which means mobile-friendly websites rank higher. So, I’ve collected some basic UX principles to keep in mind:

  • Buttons should have a finger-friendly design & be easily reached with one hand.
  • The font of the main text must be responsive and 16 pixels at least.
  • Images are only of the highest quality with no pixels visible. The product image should occupy 60%-90% of the screen. All photos in the gallery are swipeable.

Don’t forget that your site should be also well-designed for both vertical and horizontal positions of the phone.

Screen map of what can be reached with one hand/combined, #oldbutgold

Visual design

Visual design is not about aesthetics & nice pictures — it’s about guiding users through your website or app to complete the necessary actions. One of the most essential things here is the visual hierarchy of elements — putting the most important items on top. Why? Users rely on visual hierarchy to understand what to do and where to go.

So, arrange website or app elements in such a way that everything on the screen would lead them to the required action. Making primary actions stand out from secondary ones will help with that. For example, make ‘Accept’ buttons brighter and bigger than ‘Decline’ ones.

Some other tips to lead users through your website more efficiently are:

  • information arranged according to F- or Z- pattern
  • contrast of the main text is not less than 4,5:1
  • there are no more than 3 main colors on the page
  • successful form submission is visually distinct
  • alerts messages stand out visually & are consistent
example of clear visual hierarchy pixaera.com

Typography

Fonts influence how users perceive information. So, make them simple, readable, and visually consistent. Here’s a short checklist for you:

  • use no more than 2 different font families, each to differentiate content from controls
  • apply different font styles/sizes for various content types
  • use uppercase only for headers, labels, or acronyms
  • no more than 3 typefaces (including title) per page
  • content fonts should be at least 14px in size.
A different font is used for controls

Architecture

Time to look at the website’s navigation. In the perfect world, it’s consistent and scalable. Users are able to navigate back and forth on any page. For larger sites, there is always a visible search bar.

Visible search bar and navigation as usual

Interaction

Smooth interaction is one of the pillars for good UX. What complicates it? Repetitive actions, regular interruptions of the processes, long recovery after errors, etc. So, try to avoid all that.
At the same time, make sure your users are supported according to their level of expertise (e.x. use shortcuts for expert users and tooltips for novice ones)

‘Go to the homepage’ button gives users a chance to start over

Privacy

Privacy is what everyone cares about. You should too. Two points here:

  • make sure to have SSL certificates on your website.
  • always ask visitors for permission to use cookies & give an option to refuse them.

Building user trust

Finally, users become customers when they trust you. Then, natural question — how to build users’ trust on a website? Here’s the answer:

  • Create ‘About’ page to tell users about your product
  • Show off your quality. Whenever you have any reviews, rewards, or certificates, share them. Just make sure they are credible and relevant.
  • Put the actual phone number & address in your footer — tell users how to reach out to you.
Website footer with address, phone number, email & rating

Found something?

Still think that there’s nothing to improve in your UX? Bet, you don’t think so anymore. And that was, actually, only the first part.

Surely, you know that a full-fledged UX audit takes much more. At least, it will include an analysis of your product against 10 usability Heuristics by Jacob Nielson. These are like ‘Bible’ when it comes to UX design, in my personal opinion. But that’s a great piece of theory for another article.


UX Checklist for Non-UX Designers was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.