+ All Categories
Home > Documents > UX Audit Cheat Sheet GGUX

UX Audit Cheat Sheet GGUX

Date post: 14-Apr-2016
Category:
Upload: astarx
View: 232 times
Download: 3 times
Share this document with a friend
Description:
UX Audit Cheat Sheet GGUX
15
UX AUDIT CHEAT SHEET A checklist for UX-focused QA audits
Transcript
Page 1: UX Audit Cheat Sheet GGUX

ux audit cheat sheet

a checklist for ux-focused Qa audits

Page 2: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 2

UX AUDIT che at sheet

table of contents

content

text content .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

non-text content (images, audio, video) . . . . . . . . . . . . . . . . . . . . . . . . 4

l abeling

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

page titles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

breadcrumbs .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

form l abels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

table/grid l abels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

tool tip l abels (icons) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

presentation

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

navigation

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

search .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

workflow .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

inter action

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Page 3: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 3

UX AUDIT che at sheet

table of contents (continued)

feedback

confirmation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

instruction .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

errors .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

visual hier archy

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

color .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

contr ast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

forms

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

validation/submission .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

accessibilit y

gener al . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Page 4: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 4

UX AUDIT che at sheet

content1

text content

Language is plain, clear and simple.

Content is written with common language that users easily understand.

Terms, language and tone used are consistent throughout the site.

Language, terminology and tone used is understood by the target audience.

Content is useful and up-to-date, providing answers to common questions.

There is no “happy talk” — long upfront instructions or “welcome” text.

Titles and Headings clearly describe the content of the page.

Headings precede related paragraphs.

Lists are used for related sub-points or sub-navigation links.

Links in text are contextually related to what the user is currently doing or reading.

All sentences, paragraphs, titles and headlines are left-aligned.

Content is scannable — short paragraphs, descriptive headings, lists and images.

There is adequate contrast between the text content and background.

Words and sentences, when applicable, are emphasized by both color and weight.

Visual content (e.g. infographic, chart) is used to illustrate complex concepts.

Separate ideas are kept in separate sentences and paragraphs.

Full words are used instead of cryptic abbreviations.

Uppercase words are used only for labels or acronyms.

Acronyms (e.g. UX) are used sparingly.

Acronyms are explained (e.g. User Experience) in the first instance of use.

acheck all true statements

Page 5: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 5

UX AUDIT che at sheet

non-text content (images, audio, video)

Alt-text exits for all non-text material.

All multimedia content has an alternative (e.g. text content).

Icons are real-world metaphors if possible (e.g. credit card symbols at checkout).

Audio or video doesn’t start automatically, unless user expects it.

Users can control the speed of presentation (e.g. Stop, Start, Pause, etc.).

l abeling2

gener al

page titles

breadcrumbs

Label terms are familiar to the intended user and are not system-oriented terms.

Labeling describes value when possible (e.g. “Free Trial” vs. “Register”).

Language is consistent across label types (e.g. verb/noun, tense, tone, word count).

Full words are used instead of cryptic abbreviations.

Labels are visually distinct from content and/or data.

Each page title exactly matches the wording of the related navigation menu link.

Each page title exactly matches the wording of the related breadcrumb link.

Each page title gives the user a clear idea of the page’s content and purpose.

Breadcrumb paths match established navigation paths.

Every breadcrumb has a counterpart in a navigation menu.

The full navigation path is shown in the breadcrumb (e.g. “Home > Services > Annual Reports > File an Annual Report” instead of “Home > File an Annual Report”).

acheck all true statements

Page 6: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 6

UX AUDIT che at sheet

form l abels

table/grid l abels

tool tip l abels (icons)

Form labels have less color and contrast than the content they describe.

Each form label is in close proximity to the item it describes.

Table labels have less color and contrast than the content they describe.

Each table label is in close proximity to the item it describes.

Tool tip icons are universally recognizable (e.g. “?”).

Tool tip icons are visually distinct from content and/or data.

Tool tip icons have less color and contrast than the content they describe.

presentation3

gener al

Most common devices, browsers and screen resolutions are supported.

There is no horizontal scrolling on any device, browser or screen resolution.

Page layouts are consistent across the whole website.

Negative space supports scanning and quickly determining what items are related.

The order of information matches user expectation.

Modal or pop-up windows are used only when strict focus is necessary for the user.

There is no distracting blinking, flashing, or animation.

User can control layout and text size via the browser.

Users are adequately supported according to their level of expertise (e.g. shortcuts to forms for expert users, wizards for novice users).

acheck all true statements

Page 7: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 7

UX AUDIT che at sheet

presentation/gener al (continued)

search

Visual styles are consistent throughout the application or site.

Frequently used tasks are readily available and well supported (e.g. shortcuts).

Visual metaphors used will be understood by both casual and expert users.

Search is available on every page, not just the homepage.

Search box is wide enough so that users can see what they’ve typed.

navigation4

gener al

Navigation, page titling and breadcrumbs tell the user where she is, how she got here and where she can go.

The current location is clearly indicated (e.g. breadcrumb, highlighted menu item).

Navigation location and styling is consistent on every page.

Navigation menus are persistent (on every screen) and consistent (items don’t disappear/reappear).

Navigation labels are clear and obvious, readily understood by the target audience.

Navigation structure addresses common user goals.

Navigation is flexible, allowing users to navigate by their desired means (e.g. searching, browse by type, browse by name, most recent etc.).

There is a site description in the window title, which is easily understandable as a bookmark.

Site uses friendly URLs that are descriptive and understandable.

Alphabetical A-Z sorting is used only when there are no better alternatives, such as grouping items into descriptive, related groups.

acheck all true statements

Page 8: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 8

UX AUDIT che at sheet

navigation/search (continued)

workflow

Search is always the form itself, not a link to a form.

The search interface is appropriate to meet user goals (e.g. multi-parameter, prioritized results, filtering search results).

The search facility deals well with common search queries (e.g. showing most popular results), misspellings and abbreviations.

Search results are relevant, comprehensive, precise, and well displayed.

Search results do not return broken links.

The flow of content and/or tasks follows progressive disclosure.

All primary onscreen content is related to the user’s current task.

The flow of content matches the flow of the work the user is trying to accomplish.

Workflows with multiple steps include an overview of those steps.

Workflows with multiple steps include a persistent progress indicator.

Illustrations are used to make instructions easier to understand (if applicable).

Similar operations and tasks are presented and performed in similar ways.

Repetitive actions or frequent activities are made easier (e.g. option to use previously entered information).

Evidence of (or reference to) previous actions are provided to enable recognition instead of recall; the user doesn’t have to remember what he did last.

inter action5

gener al

Calls to action (e.g. Register, Add, Submit) are clearly labeled and appear clickable.

Verbs are used for all actions (e.g. Save, Go, Submit, Continue).

acheck all true statements

Page 9: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 9

UX AUDIT che at sheet

inter action/gener al (continued)

controls

links

Labeling of Interactive elements is familiar to users and does not use system-oriented terminology.

Users have control over interactive content, experiences or workflows — where they’re going, how they get there, and how easily they can stop and start.

The UI (and all buttons or controls) responds consistently to user actions in terms of visual display, appropriate context and data functionality.

Frequently used features are readily available.

Default actions — or actions that visually appear as primary actions — are not destructive (e.g. Delete).

Standard browser functions (e.g. Back, Forward, Copy, Paste) are supported.

Buttons or other controls are placed consistently in every screen/page.

All controls are clearly related to the information around them.

Interactive elements are not abstracted (e.g. buttons clearly look like buttons).

Droplists are editable where applicable, providing suggestions as the user types.

UI Controls provide rich hints, help, or tool tip text where applicable.

Primary, secondary and tertiary controls are visually distinct from one another.

Important links aren’t placed in moving or animated features (e.g. auto- rotating carousels and accordions).

Text links are visually distinct from other text content.

Link text is descriptive; there are no “click here” links.

Secondary actions are displayed as links (e.g. Cancel, Hide, Close).

There are no broken links.

Page 10: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 1 0

UX AUDIT che at sheet

feedback6

confirmation

instruction

errors

The UI responds to a user’s actions or requests visually (onscreen message).

The UI provides feedback to let the user know his/her request is being processed.

Messages and alerts appear consistently, in the same location and visual style.

Alert messages are visually distinct, easily distinguished from screen content or other interactive elements.

Users can easily undo, go back and change or cancel actions — or are given the chance to confirm an action before committing (e.g. before placing an order).

Confirmation is required when an action is destructive (e.g. Delete).

Confirmation is required when an action is difficult or impossible to undo.

The user always knows what to do first/next.

Instructions specific to the overall process are given at the start of the process.

Instructions specific to a particular step are given at the start of that step.

Instructions obvious to expert users are hidden but available (e.g. Tool tip).

Errors are clear, visually distinct from labels/data and appear in an appropriate location (e.g. adjacent to data entry field, adjacent to form, etc.).

Error messages are concise, written in easy to understand language and describe what’s occurred and what action is necessary.

Common user errors (e.g. missing fields, invalid formats, invalid selections) have been taken into consideration and where possible prevented.

Users are able to easily recover (i.e. not have to start again) from errors.

acheck all true statements

Page 11: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 11

UX AUDIT che at sheet

feedback/errors (continued)

help

Online help is contextual where possible (e.g. Tool tip).

Users can easily recover from errors, unintended actions, or actions that didn’t lead to desired results (e.g. Undo, Back).

Help is written in easy to understand language, with terms users will recognize.

Accessing online help does not stop user progress; they can resume work where they left off after accessing help).

Users can easily get further help (e.g. phone number, live chat, email support).

Workflows requiring rapid or time-limited responses provide visual alerts explaining this at the beginning of the process.

Users are alerted to pending time-out and are allowed to request more time.

The system keeps users informed about what has happened, what is happening or what will happen during workflows or upon taking action (visibility of system status).

visual hier archy7

gener al

Information is visually organized and presented in order of importance to the user.

The visual hierarchy on the screen reflects the user’s information priority.

Visual hierarchy clearly directs the user to the first (or next) required action.

Calls to action serve as the primary visual content element (when applicable).

Items that are functionally or contextually connected are grouped together visually (proximity & alignment).

Negative space is used purposefully to help the user scan, identify grouped/ related content and separate unrelated items.

Similar types of information are presented in similar, consistent ways.

acheck all true statements

Page 12: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 12

UX AUDIT che at sheet

color

contr ast

fonts

The UI uses no more than 3 primary colors.

The UI “chrome” is made up of de-saturated colors that recede visually so content comes immediately into focus.

Colors help establish reinforce the hierarchy of content and interactive elements.

The color scheme is used consistently throughout the application or web site.

Colors are not over-saturated and don’t vibrate or fatigue the eye.

Items with the most contrast are also the most important items on the screen, both to the user and/or the business.

Contrast is the primary mechanism for establishing visual priority/hierarchy.

Contrast is the primary mechanism for visually separating content from controls (e.g. buttons, links, menus)

Contrast is the primary mechanism used to separate labels from the content or data they describe.

Foreground elements (content and controls) are easily distinguished from the background.

No more than two (2) distinct font families are used (e.g. Helvetica & Times).

Fonts used for content are at least 12 pixels in size.

Font size and weight is used to differentiate between content types (e.g. Headings, subheadings, paragraphs).

Font styles, sizes and weights are used consistently throughout every screen.

Font styles, sizes and weights establish and reinforce the hierarchy of content.

Different font styles (or families) are used to separate labels from content.

Different font styles (or families) are used to separate content from controls.

Page 13: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 1 3

UX AUDIT che at sheet

forms8

gener al

input

validation/submission

Only absolutely necessary questions are asked in forms.

Long droplist menus are avoided when possible; instead users can input text, which is validated on the back end.

Complex processes are broken up into easily understood steps and sections.

For multi-step workflows, a progress indicator is present with numbers or stages.

Required and optional form fields are clearly indicated.

Fields are labeled with common terms, e.g. Name, Address (supports auto-fill).

Fields requiring specific formatting include guidance and examples (e.g. “Password must be 6 characters minimum and must contain at least 1 symbol.”).

Appropriate input assistance (e.g. calendar widget for date selection) is used and required formats are indicated.

Help and instructions (e.g. examples, information required) are provided where necessary, in context with particular fields or sections.

Expected data selection conventions are followed (e.g. radio button when only one choice can be made, check box when multiple selections can be made).

Form field error messages are displayed next to the related input field.

Form field error messages include suggestions for correcting the error.

Primary action (e.g. Submit) is visually distinct from secondary actions (e.g. Cancel).

Form submission is confirmed in a visually distinct manner (e.g. colored banner).

Users are not automatically taken anywhere else in the site after submitting a form, except to a confirmation page (if desired or necessary).

acheck all true statements

Page 14: UX Audit Cheat Sheet GGUX

v i s it g i v eg o o d u x .co m 1 4

UX AUDIT che at sheet

yes! i want more free stuff!

accessibilit y9

gener al

Alt attributes are provided for non-text elements, such as images and maps.

Captions and transcriptions are used for audio and video.

Color alone is not used to convey hierarchy, content or functionality.

Content is readable without a style sheet.

The site can be navigated with a keyboard, without using a mouse or trackpad.

Browser's keyboard shortcuts aren't overridden.

Links, buttons and check boxes are easily clickable (e.g. user can select a check box by clicking the text as well as the check box).

All controls can be operated via the keyboard.

Keyboard-based navigation is coordinated with screen reader keystroke assignments.

acheck all true statements

want more free tools like this? if you found this uX audit Cheat sheet useful, visit givegoodux.com

(or use the button below) and register to receive free tools, tips and

tricks from Joe — every week!

Page 15: UX Audit Cheat Sheet GGUX

think first

get $600 in free bonus content

when you buy think first the week of OctOber 5, 2015!

“A very practical guide to success in business.”

dr. don norman direCtor of the designlab, uC san diego

author, THE DESIGN OF EVERYDAY THINGS

“ Think First is a practical guide to UX that makes sense of strategy and structure. Highly recommended!”

peter morville bestselling author of INTERTwINGlED

“ For designers and developers, understanding strategy and UX is an increasingly necessary skill. Joe Natoli’s Think First demystifies these foundational ideas in a very conversational, easy to read style.”

ilise benun founder of marketing-mentor.Com

author of 7+ books

Think First is filled with step-by-step methods and straightforward, jargon- free advice that applies to anything you’re designing or building. I share lessons learned from my 26 years as a UX consultant to Fortune 100 organizations:

4 Simple user research methods that anyone can perform — even if you’ve never done research of any kind.

4 The right questions to ask stakeholders and users.

4 The 3 crucial questions you must ask of every client, every time.

4 How to tell the difference between what people say they need vs. what they really need.

4 How to figure out what features and functions deliver great UX.

4 How to avoid scope creep and never-ending projects.

My new book shows you how to create successful products,

memorable user experiences and happy customers!

learn more at givegooduX.Com/think-first

click here or visit givegooduX.Com/3-free-bonuses/


Recommended