UX Toolkit: Phase Three - Skeleton

38
UX Designer | Twitter @maitedalila Phase Two UX Toolkit Phase One discovery Phase Two structure Phase Three skeleton

Transcript of UX Toolkit: Phase Three - Skeleton

Page 1: UX Toolkit: Phase Three - Skeleton

UX Designer | Twitter @maitedalila

Phase Two

UX Toolkit

Phase One

discovery

Phase Two

structure

Phase Three

skeleton

Page 2: UX Toolkit: 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

Page 3: UX Toolkit: Phase Three - Skeleton

Wireframe

checklist

Page 4: UX Toolkit: Phase Three - Skeleton

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

Page 5: UX Toolkit: Phase Three - Skeleton

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

Page 6: UX Toolkit: Phase Three - Skeleton

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

Page 7: UX Toolkit: Phase Three - Skeleton

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

Page 8: UX Toolkit: Phase Three - Skeleton

Landing Page Article Calendar Event Team

News Magazine Contact Form Chat

Comments Profile Product List

Product Cart Payment Form

Blog

Content

Elementsdesigning WIREFRAMES

Page 9: UX Toolkit: Phase Three - Skeleton

Tabs

Songs

Maps Directory

Tags Pricing Search

Success Error Share

External Website

Gallery

Video

Login

Download

Stream

Elements

ect…

designing WIREFRAMES

Page 10: UX Toolkit: Phase Three - Skeleton

Gestures

Tap Hold Double tap Tap Hold

Twin tap Twin tap hold Flick Drag

designing WIREFRAMES

Page 11: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Gestures

Hold and Drag PinchSpread

Page 12: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Homepage Example

Homepage

Login user

Image

Menu

Header /Sub Text

Title/ Body Text

Button

Image

Page 13: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Listing Page Example

Homepage

Login user

Video Player - Votes

Media

Tap for more info

Page 14: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Article Example

Homepage

Login user

Video Player - VotesBlog Article

User

Article

Page 15: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Form Example

Homepage

Login user

Video Player - VotesBlog Article

Input

Form

Submit

Title

Page 16: UX Toolkit: Phase Three - Skeleton

designing WIREFRAMES Pop-up Example

Lightbox/ Popup

Buttons

Pop-up

Close

Page 17: UX Toolkit: Phase Three - Skeleton

Example

Error Ok, let’s move on

designing WIREFRAMES

Page 18: UX Toolkit: Phase Three - Skeleton

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

Page 19: UX Toolkit: Phase Three - Skeleton

Catch common usability problems

https://userium.com/

USABILITY

checklist

Page 20: UX Toolkit: Phase Three - Skeleton

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

Page 21: UX Toolkit: Phase Three - Skeleton

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

Page 22: UX Toolkit: Phase Three - Skeleton

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

Page 23: UX Toolkit: Phase Three - Skeleton

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

Page 24: UX Toolkit: Phase Three - Skeleton

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.

Page 25: UX Toolkit: Phase Three - Skeleton

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.

Page 26: UX Toolkit: Phase Three - Skeleton

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

Page 27: UX Toolkit: Phase Three - Skeleton

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.

Page 28: UX Toolkit: Phase Three - Skeleton

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)

Page 29: UX Toolkit: Phase Three - Skeleton

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

Page 30: UX Toolkit: Phase Three - Skeleton

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

Page 31: UX Toolkit: Phase Three - Skeleton

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

Page 32: UX Toolkit: Phase Three - Skeleton

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

Page 33: UX Toolkit: Phase Three - Skeleton

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.

Page 34: UX Toolkit: Phase Three - Skeleton

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…

Page 35: UX Toolkit: Phase Three - Skeleton

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

Page 36: UX Toolkit: Phase Three - Skeleton

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

Page 37: UX Toolkit: Phase Three - Skeleton

Phase One

discovery

Phase Two

structure

Phase Three

skeleton

UX Toolkit

Page 38: UX Toolkit: Phase Three - Skeleton

Twitter @maitedalila

UX Designer