ux toolkit: phase three - skeleton
TRANSCRIPT
UX Designer | Twitter @maitedalila
Phase Two
UX Toolkit
Phase One
discovery
Phase Two
structure
Phase Three
skeleton
Wireframes Usability Checklist
Before you start Homepage
Reviewing your wireframes Navigation
Expected User Feedback Search
Choices Links
Wireframe Elements Layout
Gestures Forms
Example Content
Table of Contents
Wireframe
checklist
How will users will move around the site?
What content is going to be on the page?
Which content is most important on the page?
How will the content be organized on the page?
Where will users go from this page?
Where is this page on the site?
designing WIREFRAMES Preparing Wireframes
Is the most important content the first thing you notice?
Is anything important missing from the page?
Is there anything on the page that shouldn’t be there?
Which content is related and how?
Can you get to all of the major sections of the site from here?
Should you be able to?
Do all of the labels make sense?
Review Wireframesdesigning WIREFRAMES
Something needs to be
higher on the page.
Something should be the
focus point for the user.
The call to action is weak There’s too much/ not
enough text or images
Something is missing Something is confusing Users can’t figure out how
they would take a
particular action on a page
The most important
content is below the fold
?
designing WIREFRAMES Expected Feedback
When users want to finish
task quickly
When the decision is
difficult (either it matters a
lot to your users or users
don’t understand what
they are deciding
When the option are
difficult to compare
When your users don’t
know their preferences.
Having a lot of choice becomes a problem in four situations:
Choicesdesigning WIREFRAMES
Landing Page Article Calendar Event Team
News Magazine Contact Form Chat
Comments Profile Product List
Product Cart Payment Form
Blog
Content
Elementsdesigning WIREFRAMES
Tabs
Songs
Maps Directory
Tags Pricing Search
Success Error Share
External Website
Gallery
Video
Login
Download
Stream
Elements
ect…
designing WIREFRAMES
Gestures
Tap Hold Double tap Tap Hold
Twin tap Twin tap hold Flick Drag
designing WIREFRAMES
designing WIREFRAMES Gestures
Hold and Drag PinchSpread
designing WIREFRAMES Homepage Example
Homepage
Login user
Image
Menu
Header /Sub Text
Title/ Body Text
Button
Image
designing WIREFRAMES Listing Page Example
Homepage
Login user
Video Player - Votes
Media
Tap for more info
designing WIREFRAMES Article Example
Homepage
Login user
Video Player - VotesBlog Article
User
Article
designing WIREFRAMES Form Example
Homepage
Login user
Video Player - VotesBlog Article
Input
Form
Submit
Title
designing WIREFRAMES Pop-up Example
Lightbox/ Popup
Buttons
Pop-up
Close
Example
Error Ok, let’s move on
designing WIREFRAMES
Tips
Involve everyone. (Copywriters, marketing, developers, stakeholders etc…)
They can provide ideas and solutions you have not thought about.
Remember: UX is not UI Avoid designing your wireframes too much. It can
be distracting when you are trying to focus on functionality.
Be lean. Choose the right tools. It’s totally okay to start with pen and paper
and work you way up to high-fidelity as you iterate.
designing WIREFRAMES
USABILITY checklist
Clear call for action. Users
know what to do next and
why it benefits them,
The home page creates a
positive first impression.
Logged in user’s name is
displayed on the site
Ex. “Hello Charles”
Changes to the site are
announces. Ex. Changes in
delivery policy.
Company location and
contact information easily
accessible
Privacy policy is clear Images/ videos are
relevant and meaningful.
No stock photos.
Audio does not start
automatically.
Created by David Parejafrom the Noun Project
Homepage
USABILITY checklist
Important links aren't
placed in moving features,
Ex. auto-rotating carousels
or accordions.
Alphabetical A-Z sorting is
avoided. It is used only
when there are no better
alternatives, such as
grouping items into
descriptive, related
groups.
Users know where they
are on the site.
EX. Breadcrumbs.
Also, there is a site map on
large sites.
Navigation is consistent on
every page.
Navigation
USABILITY checklist
Links are descriptive.
There are no "click here"
links.
There is a site description
in the window title, which
is easily understandable as
a bookmark.
Site's URL is memorable.
Navigation
Search
Search bar is easy to find Search is available on
every page, not just the
homepage.
In line text with
suggestions of what users
can search
Auto complete as users
type
USABILITY checklist
LinksUSABILITY checklist
Links are easily
recognizable. They look
clickable.
Visited links color is
different than unvisited.
There are no broken links.
Check with e.g. W3 Link
Checker.
LayoutUSABILITY checklist
Site is responsive.
Works with different
screen sizes.
Related information is
grouped together clearly.
Avoid pop-up windows Consistency. Page
layouts are
consistent across
the whole website.
Pages aren't
cluttered. There is
enough white space
to support scanning.
FormsUSABILITY checklist
Simplicity. Only
absolutely necessary
questions are asked
in forms.
Fields are labeled with
common terms, e.g. Name,
Address (supports autofill).
Data should be
validated next to
the field before the
form is submitted.
When form errors
occur, the cursor
should move to the
first problem field
FormsUSABILITY checklist
Fields should automatic
cal enter formatting data
Clearly distinguish
between optional
and required fields
in the form
Text boxes should be
the correct length
Avoid long dropdown
menus.
FormsUSABILITY checklist
Field labels on forms
should clearly
explain what entries
are desired
Forms should use
autofocus where
appropriate
Your fields should
contain default
values
Your interface should be
compatible with source
documents (when needed)
Forms
Know why you’re asking every question
• why does the service need that information?
• who uses the information and what for?
• which users need to provide the information?
• how will you check that the information is accurate?
• how will you keep the information up to date?
USABILITY checklist
Forms
Start with one thing per page
‘One thing’ could be:
• one piece of information to understand
• one decision to make
• one question to answer
USABILITY checklist
Forms
Start with one thing per page
Having only one thing on a page helps people to:
• understand what they’re being asked to do
• focus on the specific question and its answer
• find their way through an unfamiliar process
• use the service on a mobile device
• recover easily from form errors
USABILITY checklist
Forms example
Start with one thing per page
It also helps you to:
• save people’s work automatically as they go
• capture analytics about each question
• handle branching questions and loops
USABILITY checklist
ContentUSABILITY checklist
Contrast. There is
adequate contrast
between the text and
background. Also,
accesible for color blind.
Check with e.g. Check My
Colours
Content is scannable.
There are short
paragraphs, descriptive
headings, lists and images.
Visual content is used
when appropriate, instead
of large amounts of text.
Content is written with
common language that
users easily understand.
Check with
e.g.: The Readability Test
Tool.
Contact and company
information is clearly
displayed. Clicking the
contact link doesn't
automatically open a mail
application.
First-use Empty State
USABILITY checklist
An explanation of what
content is going in that
section
What
An orientation of where
the user is in the
application or broader
experience
Where
An explanation of the
timing of your product and
the action or event that
must occur for data to
exist on this screen
When
Deliver this information in a show-or-tell format
Click here for more examples…
USABILITY checklist
Personalized features. Language
currency, delivery options are
changed based on user's location.
Buttons are clear.
Ex. "Free Trial" button,
”Register” Avoid “Next”
Prices are clearly displayed.
There are no hidden costs or
surprises in the terms.
Sample content. For example
there is a sample newsletter next
to a newsletter sign up form.
Credible references, credentials,
contact information, location, and
images of real people are displayed
on the website and up-to-date.
Uncluttered. Info is scannable
and images can be enlarged or
zoomed in on for more details
highly recommended
Take-away
End on a happy note
The end of the user’s journey is the most important phase in
UX design.
By providing a means to an end, we ensure our users leave
happy – reflect upon happiness – and keep coming back for
more.
designing WIREFRAMES USABILITY checklist
Phase One
discovery
Phase Two
structure
Phase Three
skeleton
UX Toolkit
Twitter @maitedalila
UX Designer