UX Design Checklist

UX Design Checklist I
1. Home Pag
Menu bar always present at the top of every page to ensure navigation is reachable
on every page and it doesn’t disappear
There should be filter and sort options on every list or results pag
Adhere to web convention when it comes to the logo placement. Users are likely to
fail to navigate to the homepage when the logo is centered compared to left aligned
It takes about 10 seconds for users to form an opinion about your website that
determines whether they will leave or stay. That’s why you need a engaging first
impression.Ensure every element on your website has a strong intention that
supports your goal
The Call to action button copy should be concise and clearly state what your users
will get if they click the CT
There’s a clear link to an ‘About Us’ pag
If the site has a lot of pages, the homepage contains a search input bo
Use authentic images and high quality media that increases the company’s
credibility

Visual Desig
Ensure the site is responsive to deliver a consistent user experience across various
screen size
White space can help guide the user through interactive content. It may help to build
focal points and increase readability and comprehension
Consistency in visual design is key in building familiarity with your users, which
leads to understanding and trust. Create style guides that define what colors, fonts
and icons should be used in the brand’s products, printed and digital media
ensuring consistenc
Grouping related elements together helps in communicating information clearl
Create a visual hierarchy to create a flow that the user eye will follow to relevant
content / elements on the websit
Provide visual cue to suggest clickability for all types of link
Pop-up windows are kept to a minimum. Do not use to show error, success, or
warning messages. Keep them on the page
It is clear which elements are ‘clickable’ and the layout focuses users attention on
what to do next
Logo is in the same place on every page.

01
Accessibilit
Don’t specify important information by colour alone. Use a combination of text,
colour or graphical objects
Use descriptive and informative page title. Page headings and labels for form and
interactive controls should be informativ
Ensuring that repeated components occur in the same order on each page of a site
helps users become comfortable that they will able to predict where they can find
things on each page
Make sure users can interact with your page using the keyboard alone
Don’t restrict your design to only portrait or landscape, unless a specific orientation
is necessary
Giving users advanced notice before opening a new window. You can use text like
“opens in a new window” or a visual icon

Navigatio
Navigation should be clearly labeled and consistent so that users understand where
they are and where they can go t
Using appropriate and familiar copy for your navigation elements throughout your
product’s design, your users will feel more comfortable navigating your website
Use Navigation cues like Breadcrumbs, title of the tab on the browser, URLs to
enhance navigatio
Navigation menus should have a clear hierarchical structure with every category
and clickable sub categories included in the men
A good practice is to link the homepage from the website’s logo (which should
appear on every page at the same spot)
Include a search bar to make your website more usable. Large websites that have
surplus content are incomplete without search bars which would save a user a lot of
time and users can sort & filter category pages
Content is organised into categories logically ( where the user would expect it to be)

Link
Ensure there are no broken links on the websit
Use different colors for visited and unvisited links
There should be no variation in the way links are visualized across the sit
Links should change style on mouse-over, emphasizing to users that they are
clickabl
Don't use tiny text for link
Important CTA’s such as ‘buy’ are displayed as buttons, not links

02
 For
Labels are imperative for accessibility. Make sure every form field has a label
Avoid long labels whenever possible, so forms are easy to read and sca
the range of the answer. Employ this for fields that have a defined character count
like phone numbers, zip codes, etc
When a user makes an error, show the user where the error occurred, provide a
reason, and communicate how to fix it
Fields are labelled with conventional terms e.g. Name, Address, et
Successful form submission is confirmed with a confirmation pag
Entry fields clearly indicate the format required for information, such as dates e.g.
11/11/2021

Conten
Content is easily scannable, with short paragraphs, subheadings, lists and image
There is adequate contrast between the text and background colo
Words, phrases and concepts are familar to the typical use
Product pages have all the details necessary to make an informed orde
Acronyms and abbreviations are written in full when first use
Sub-headings are short, clear and descriptive

Key Elements of a UX Checklist

Indicating progress informs the user what they have completed, where they are
currently and what’s left to complete. By giving appropriate feedback on user’s actions
is an assurance to the user that the system has understood their input and that
progress is being made.

03
 Error State

Error messages are an indicator of system status: they let users know that a hurdle was
encountered and give solutions to fix them. Error messages are effective when users
can see and understand them. It’s also important to provide in-context help to the users
in such a state.

Visual Factor

Consistency is the key principle of UX design. It helps reduce the learning time for a
product since the user gets familiar with the given experience by creating a
subconscious connection. Visual Consistency aids brand recognition as well.

Navigation

Ease of navigation should be a top priority for designers to avoid leaving users lost on
the next step. A clear and comprehensible navigation system is a key component to
providing online visitors with a usable web-interface, one that keeps them engaged until
they’ve achieved their purpose — and we’ve increased conversion rates rather than
bounce rates.

04
 Tool Tips to help New Users

Tooltips are micro content, — short text fragments intended to be self-sufficient. Your
copy can be single- or multiple-line long as long as it’s relevant and it does not block
related content.Tooltips are best when they provide additional explanation for a form
field unfamiliar to some users or reasoning for what may seem like an unusual request.

User Assistance

User assistance (UA)—in the form of manuals or online Help—guides users in their
tasks, suggests better ways of getting their work done, and provides directions for
troubleshooting their problems.

Helping users overcome errors

Error handling is too often an overlooked aspect of UX design. Removing the pain from
error experiences is critical because if a user encounters an error Explain exactly why
they’re getting this error by creating custom 404 and 504 pages. Eg: For unknown
errors, reassure users that you’re working on it, and direct them back to your website.

05
 Recognition rather than recall

In simple terms, the user’s should provided everything like visual cues, options,
actions, instructions available which helps to avoid the memory load or cognition load
and make the decisions error-prone.

White Space

Using white space gives your design elements space to breathe and to live on their
own. Sometimes, having a page with many elements can be too overwhelming for the
users or make the usability more complicated for them to understand.

With a minimalist design, every element on the page serves a purpose. The design is
stripped of everything except for those elements that are absolutely essential.

Flexibility and efficiency of use

Flexibility and efficiency of use heuristic principle is about giving your users ways to
speed up their work with more efficiency and flexibility.You can enhance efficiency for
users is to give them easy access to functionality that they need the most..

06
UX Design Rules

Single-Column Design

Single-column forms are better for usability because the information can be understood
quicker.Single-columns help move the eyes in a more natural direction down the
screen, rather than zig-zagging around.

Give real-time inline validation

People make mistakes, so form validation is important. Minimise friction by giving real-
time validation for each of your form fields.This allows the user to see when and where
they’ve made errors without having to wait until they go to submit the form.

07
 Listing your form labels

Listing your form labels above the fields makes sure they’re always visible, and is
generally better for responsive design.If you use placeholder design, the placeholder
text disappears as soon as the user clicks within the field and people tend to lose track
of what they’re doing.

Auto-focusing form

Auto-focusing the selected form field is also really important for keyboard (or mouse)
navigation, so users can clearly see which field they are on. If you really want to
encourage people to start your form, add a default setting that auto-focuses your first
input field.

08
 Using Tool-Tips

Use Tool-Tips To Help Newbies. Some of your visitors will be regulars. They’ll blast
through your signup sheets and purchasing process. Others will be brand new, and
they might have some questions along the way.Little ‘tool-tip’ icons will help the
newbies understand what they need to do. But at the same time, they don’t get in the
way of your experts.

Distinction - CTA’s

Make A Clear Distinction Between Primary And Secondary Calls-To-Action. It’s clear
which action you want the visitor to take, so make sure they know it. This is just simple
psychology again. You subtly let your users know which one to click.

09
 Design For Eye Scanning

Typically we read websites in an F-pattern, but bold images and calls-to-action are also
known to catch the eye first. Eye Tracking is a usability method and tool that reveals
users’ focus points and navigational patterns on a given interface.

Design for Reachability

Another interesting point is reachability, namely, what we can reach with our fingers.

Consequently, the screen design needs has to be controllable from the lower half of
the screen. Frequently used functions should not appear on top of the screen.

10
 Design for Readability

Try to achieve a readable table using just alignment, spacing and grouping.Avoid zebra
striping, tints and fills, and any other backgrounds. These can be superficially pretty but
are usually a distraction.Use tooltip if the data is too long.

The Golden Ratio

The golden ratio is a mathematical proportion between the elements of different sizes
which is thought to be the most aesthetically pleasing for human eyes. The ancient
Greek structures like the Parthenon use this magical ratio and stand the test of time
and admirers.

11