Introduction to User Experience Design 10/07/17

Introduction to User Experience

School of Visual Arts | 7 October, 2017 Robert Stribley

Today’s presentation will be available on SlideShare

following the workshop:

www.slideshare.net/stribs

http://www.slideshare.net/stribs

Robert StribleyAssociate Creative Director,

Experience

Introductions

Sample clients:

• Citibank, JPMorgan, Morgan Stanley,

Oppenheimer Funds, Prudential

• Boston Scientific, Nasonex

• AMResorts, Choice Hotels, RCI,

Sotheby’s International Realty

• Computer Associates, EMC

• Ford, Lincoln

• Mercedes-Benz, MBFS, Mercedes-Benz

Vans, smart

• AT&T, Nextel

• Red Cross, Smithsonian National Air &

Space Museum

• Pearson, Travel Channel, Women’s Wear

Daily

• I’m an Associate Creative Director,

Experience at SapientRazorfish

• I enjoy literature, cinema, music,

photography

• I drink coffee

About You

• What’s your name?

• What do you do for work?

• What do you do for fun?

• Coffee, tea or bottled water?

Introductions

Goals of this workshop

• Understand the basic concepts of user experience (UX)

design

• Experience the general process and techniques used on

a design project

• Review the basic deliverables a UXer develops within a

project

Introductions

Agenda

Morning

• History & Background

• UX Principles

• Design Process

• Deliverables

• Our Project

• User Research

• Competitive Review

Agenda

Afternoon

• Card Sorting

• Site Maps

• Page Types

• Navigation

• Sketching

• Wireframes

• Q&A

Agenda

History & Background

information

architectur

e

interactio

n design

content

strategy

usability

testing

user

research

user

experience

Background

Image by Oliver Reichenstein on

flickr

Walter Disney,

the original

user

experience

designer?

A Brief History of UX

1975

• Richard Saul Wurman coined the term “information architecture”

to describe the field now more often described as “information

design”

1994

• Argus Associates founded in Ann Arbor, MI, the first firm devoted

to IA

1998

• First edition of Peter Morville and Lou Rosenfeld’s Information

Architecture for the World Wide Web, affectionately known as

“The Polar Bear” book

2000

• First IA Summit, Boston, MA – Defining Information Architecture

History of UX

Partially adapted from: “A brief history of information architecture” by Peter Morville and Information Architecture: Designing

information environments for purpose, edited by Alan Gilchrist and Barry Mahon

A Brief History of UX

2002

• Boxes & Arrows, online journal for UX and design goes

live

• 3 new books on UX published, including Jesse James

Garrett’s The Elements of User Experience

2014

• Capital One purchases Garrett’s UX-consulting firm

Adaptive Path

2018

• 18th Annual IA Summit to be held in Chicago, IL, March

12: “Converge”

History of UX

in•for•ma•tion ar•chi•tec•ture n.

• The combination of organization, labeling,

and navigation schemes within an information

system.

• The structural design of an information space

to facilitate task completion and intuitive

access to content.

• The art and science of structuring and

classifying web sites and intranets to help

people find and manage information.

• An emerging discipline and community of

practice focused on bringing principles of

design and architecture to the digital

landscape.Information Architecture for the World Wide Web (1st Edition), p. 4, Rosenfeld and Morville

Navigation

Interaction

Art/Science

Discipline/

Community

Defining UX

userscontent

context

IA

Defining UX

interface

(skin)

information architecture

(skeleton)

Defining UX

metaphor: architectural plans

Defining UX

Flickr.com: Cornell University Library

UX Principles

Scent of Information

Progressive Disclosure

Information Clustering & Hierarchy

Remove Paths Not Taken

Tyranny of Consistency

There Is No fold

Death of the Homepage

Know Your Audience

UX Principles

Scent of Information

1

3 Clicks? A myth

Designing for

scent is more

successful than

designing for

navigation.– Jared Spool, UIE

If there is a scientific

basis to the Three-Click

Rule, we couldn't find it

in our data.- User Interface Engineering,

April 2003

Self Study

“Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering

Progressive Disclosure

2

Tease users.

Then draw them to the

details.

“Progressive disclosure

defers advanced or rarely

used features to a

secondary screen, making

applications easier to learn

and less error-prone.”- Jakob NielsenSelf Study

“Progressive Disclosure” - Jakob Nielsen, December 4, 2006

http://www.nngroup.com/articles/progressive-disclosure/

Self Study

“Progressive Disclosure” – Jennifer Tildwell

Progressive disclosure with menus and form design

http://www.time-tripper.com/uipatterns/Progressive_Disclosure

Information Clustering

& Hierarchy

Lustmord Table by Jenny Holzer, 1994

3

“Designers can create

normalcy out of chaos; they

can clearly communicate

ideas through the organizing

and manipulating of words

and pictures.”

—Jeffery Veen, The Art and Science of Web

Design

When information is

clustered appropriately on

a screen, users can scan

and quickly come to terms

with the intent of the

content.

1. Group features

and content by

type

1. Group features

and content by

type

2. Position them

according to an

intuitive hierarchy

1. Group features

and content by

type

2. Position them

according to an

intuitive hierarchy

3. Drop or demote

the less

important content

Remove Paths Not Taken

4

Reduce the field of view

Once users commit to a

path, remove irrelevant

navigation

Example

Screenshot

The Tyranny of Consistency

5

Consistency is an important but

sometimes over-rated tool

It’s key in maintaining a coherent

experience

But develop an eye to know when to

break from it

Design pages so they’re scalable

Suppress modules or sections of the

page until they're needed

Don’t labor to create content just to

ensure every screen or element is

“consistently” populated

Death of the Home Page

6

People may come to your homepage

But more and more likely not

They’re more likely coming from Google or social

media

Many sites report only 20% of visitors landing on their

homepages

Some as few as 10 or 5%• 88% of traffic coming to The Atlantic not hitting home page

• More than 50% of visitors to the NYT not arriving at the home

page

Have you ever bought a book on Amazon.com

because you saw it on the homepage?

More Important?

• SEO*

• Taxonomy

• Meta data

• Tagging*search engine optimization

Example

Screenshot

There Is No Fold

7

iamthefold.com

“Web users spend 80% of their

time looking at information above

the page fold. Although users do

scroll, they allocate only 20% of

their attention below the fold.”

- Jakob Nielsen, “Scrolling and Attention,” March 22, 2010

“People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable

information makes them believe that it will be worth their time to scroll.

Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom.”

- Jakob Nielsen, “Scrolling and Attention,” March 22, 2010

Know Your Audience

8

Consider the amount

of attention an

audience needs on a

particular screen**It may be zero

Recapping:

• Scent of Information

• Progressive Disclosure

• Information Clustering & Hierarchy

• Remove Paths Not Taken

• The Tyranny of Consistency

• Death of the Home Page

• There Is No Fold

• Know Your Audience

Design Process

Project phases

by Harold Kerzner

Discovery Definition Design Development

Design Process


• Stakeholder Interviews

• Business Requirements

• Feature Prioritization Matrix

• Competitive/Comparative Audit

• User Research

• Site Inventory

• Site Map

Design Process


• Personas

• Content Audit

• Card Sorts

• Use Cases

• Site Map

• User Journeys

• Sketching

• Conceptual Wires/Design

• Experience Brief

Design Process


• Site Map

• Content Matrix

• User Flows

• Sketching

• Wireframes

• Functional Specifications

• Stakeholder Reviews

• Visual Design

• Prototype

• Usability Testing

Design Process

Discovery Definition Development

• User Acceptance Testing

(UAT)

• Quality Assurance (QA)

• Usability Testing

Design Process

Design

What is “agile”?

relating to or denoting a method of project management, used especially for

software development, that is characterized by the division of tasks into short

phases of work and frequent reassessment and adaptation of plans.

"agile methods replace high-level design with frequent redesign”

- Oxford English Dictionary, contrast with “waterfall”

https://en.oxforddictionaries.com/definition/agile

Deliverables

Competitive Review Discovery

Site Map Discovery

Personas

Small Budget

Big Budget

Planne

r

Promoter

Definition

User Journeys Definition



Self Study

“An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows

User Flows Design

Wireframes Design

Visual Design Design

Our Project

Our Project

Events.comEvents.com wants to revamp its website to become the go-to

online resource for people wanting to attend or promote a

large variety of events across the United States.

It should default to the city you’re in—New York—but allow

users to change to other cities within the U.S.

Discovery

User Research

User Research in Copenhagen’s Elderly

Homes

“Through research, we aim to learn

enough about the business goals,

the users, and the information

ecology to develop a solid strategy.”

– Louis Rosenfeld & Peter Morville

Discovery: User Research

Goals

• Identify patterns and trends in user behavior, tasks,

preferences, obstacles.

Methodology

• Focus Groups

• Surveys

• Interviews


“[I]n a delicate inquiry like this, little is to be gained by

distributing circulars. A single patient with the right sort

of lesion and a scientific mind, carefully cross-

examined, is more likely to deepen our knowledge than

a thousand circulars answered as the average patient

answers them, even though the answers be never so

thoroughly collated by the investigator.”

- William James, “The Consciousness of Lost Limbs,” 1887


Class Exercise: Survey Questions

• How do you learn about events in NYC?

• What type of events are you interested in?

• What’s more important to you:

– Price

– Type of Event

– Location

– Date

• Do you ever need to promote an event?

• Do you ever invite people to an event?


Competitive Review

image by brandon schauer

“This type of assessment helps set an industry

‘marker’ by looking at what the competition is up to,

what features and functionalities are standard, and

how others have solved the same problems you

might be tasked with.”– Dorelle Rabinowitz

Discovery: Competitive Review

Heuristic Evaluation

… involves evaluators examining the

interface and judging its compliance with

recognized usability principles (the

‘heuristics’) —Wikipedia

Self Study

For a more detailed explanation of heuristic evaluation, see Jakob Nielsen’s Ten Usability Heuristics.


http://www.useit.com/papers/heuristic/heuristic_list.html

Sample Usability Criteria

These examples aren’t comprehensive. Appropriate criteria will depend on the project to be completed.

Home Page

• Elements are appropriately weighted and distributed

• Information is clustered in meaningful ways

Navigation

• Navigation structure is concise and consistent

• Paths to important information are intuitive and unobstructed

Content

• Content is content chunked appropriately

• Headings and titles are scannable

• Content is current. There are visible indications of content freshness.

• Content is properly adapted for the Web. Tone of voice is consistent throughout.

Design

• Colors are appropriate for the Web. White space is used appropriately. Text is readable.

Search

• Search results are relevant and cleanly presented

Functionality

• Functionality and forms are efficiently designed

Messaging

• Errors messages are presented in clear language. Help readily available contextually to users

• Appropriate channels are provided for user feedback


Methodology

• Review and analyze competitor sites according to

particular criteria (heuristics)

• Draw key findings, which can influence and guide IA

through the design phase

• Include a scorecard for high-level comparison of

points across all sites

Also: Comparative Reviews


Competitive Review

Our

Competitors


Key Findings

• Search is fairly prominent on each site

• Filtering on events is valuable, but not always easily available

• Calendars are helpful, but not always prominent

• Profiles and social features are handled with varying degrees of

detail

• Free events are often highlighted

• Event detail pages may have maps, RSVP, sharing, rating,

commenting functionality

• Displaying other venues and restaurants adds utility

• Option to add or promote an event isn’t always prominent


Lunch Break

Afternoon

• Card Sorting

• Site Maps

• Page Types

• Navigation

• Sketching

• Wireframes

• Q&A

Agenda

Definition

Card Sorting

“There are often better ways to organize data

than the traditional ones that first occur to us.

Each organization of the same set of data

expresses different attributes and messages.

It is also important to experiment, reflect, and

choose which organization best

communicates our messages.”

– Nathan Shedroff, Experience Strategist

Definition: Card Sorting

Methodology• Grouping and labeling with index cards, post it notes

• Two types:

Open – Participants sort cards with no pre-established categories. Useful for new architectures

Closed – Participants sort cards into predetermined, provided groups. Useful for fitting content into existing architectures

• Online card sorts

– WebSort, OptimalSort, Socratic

Goals• Organize content more efficiently

• Find names for categories based on users’ perspectives

Self Study"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07


http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide

Case Studies:

• Wachovia Wealth Management Group

• American Red Cross

• Mercedes Benz


Card Sort

As individuals:

• Take 5 minutes to think of all the events a person could

attend

• Write each event you come up with on a Post-It note


5mins

Card Sort

Now, as a group:

• Take a few minutes to organize your events into

categories (group & label them)

• Then we’ll share some categories


15mins

Characteristics & Findings

• Looking for redundancies

• Lumping and splitting

• Outliers and miscellaneous items

• Placing items in multiple categories

• Categories versus filters

–E.g. Free, Family, Outdoors

• Unique but intuitive labels

–E.g. Geeks, Relax


Next Steps

With the results of a card sort we then can:

• Build consensus

• Refine terminology

• Create a site map

• Help define navigation


Definition: Card Sort Tools

Post-It Plus

This app from 3M allows

you to scan your Post-It

Notes, organize and share

them.

Design

Site Maps

Conceptual DesignDesign: Site Maps

“A site map is a high level diagram

showing the hierarchy of a system.

Site maps reflect the information

structure, but are not necessarily

indicative of the navigation

structure.” – Step Two Designs

Site Map Tools:

• Omnigraffle (Mac)

• Microsoft Visio

• InDesign

• Sketch

Design: Site Maps

Page Types & Templates

The Mercator Atlas of EuropeFrom The British Library

http://www.bl.uk/onlinegallery/ttp/mercator/accessible/pages1and2.html

Home Page Category Page Details Page

Examples:

Design: Page Types & Templates

Navigation

Navigation Bridge, USS Enterprise by Serendigity, Flickr

http://www.flickr.com/photos/maleny_steve/

Types of Navigation

• Site Structure – major nav

• Hierarchical – product families

• Function – sitemap privacy

• Direct – banner ad/shortcut

• Reference – related links

• Dynamic – search results

• Faceted Navigation – filters results

• Breadcrumb – location

• Step Navigation – sequence through forms/results

Self Study

Adapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites

Design: Navigation

http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site

Areas of Navigation

• Global – universal

header/footer

• Local – left nav/right nav

• Local content – text links,

buttons

Self Study

Adapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites

Styles of Navigation

• Rollover

• Dropdown

• Flyout

• Tabs

• Accordion

• Hamburger

Design: Navigation

http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site

Mega Dropdowns

Design: Navigation

Design: Navigation

Power Footers

Design: Navigation

Design: Navigation

Sketching

Aerial Screw by Leonardo da Vinci, 1485-

1487

Can you guess

what this is a

sketch of?

Design: Sketching

“twttr sketch”

Twitter

Design: Sketching

[This sketch] has very special significance – it's hanging in the office

somewhere with one other page. Whenever I'm thinking about something, I

really like to take out the yellow notepad and get it down. – Jack Dorsey, Twitter

“There are techniques and

processes whereby we can put

experience front and center in

design. My belief is that the

basis for doing so lies in

extending the traditional

practice of sketching. ”

- Bill Buxton

Design: Sketching

Attributes of a Sketch

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful

• Clear vocabulary

• Distinct gesture

• Minimal detail

• Appropriate degree of refinement

• Suggest & explore rather than confirm

• Ambiguity

Design: Sketching

Goals for Collaborative Sketching

• To communicate your ideas effectively by

visualizing them

• To benefit from the participation of your

colleagues

• To quickly generate ideas and refine through

iterations

Design: Sketching

Process

1. Discuss

2. Sketch

3. Share

4. Iterate

Design: Sketching

• Discuss the purpose of the specific experience you’re

sketching

• What does it need to accomplish?

• What features are necessary?

• How would you prioritize them?

• Who’s the audience?

• You’re not discussing layout or design

• Just the problem you’re trying to solve

• You’re not sketching yet

Discuss

Design: Sketching

Sketch

• Sketch silently

• Limit your time – 5,10 minutes

• Sketch as much as possible, as many different

ideas as possible

• Don’t worry about mistakes or style

• Emphasis is on the quantity of ideas, not the

quality of the sketches

Design: Sketching

Design: Sketching

Share

• Review your work with your team

• Keep it short – 60 seconds each

• Offer your feedback to others

• What you like

• Questions about what didn’t work for you

• You’re not grilling your colleagues and this

isn’t a competition

Design: Sketching

Iterate

• Now sketch again if you need to

• Or collaborate on a high-level wireframe (e.g.

via whiteboard)

• Then begin your wireframe with a more

informed view, with more and better ideas

• Iterate on your design

Design: Sketching

Class Exercise: Collaborative Sketching

In teams, sketch your ideas.

Event Detail Page

1. Take 15 minutes first to discuss what features belong

here Remember, no sketching yet

Design: Sketching



Event Detail Page


here

2. Time for silent sketching

Design: Sketching



Event Detail Page


here

2. Time for silent sketching

3. Time for sharing your sketches

Design: Sketching


Did you come up with any

differentiating ideas for an

event page?

Design: Sketching

Sketching Tools:

The following apps are all for the

iPad:

• Adobe Ideas (Free)

• Bamboo Paper (Free)

• Muji Notebook ($3.99)

• Penultimate (Free)

• SketchBook (Free)

• Paper (Free)

• Adonit Forge (Free)

Design: Sketching

Wireframes

sculpture by Jaume Plensa, Yorkshire Sculpture

Park

Wireframes

“Web site wireframes are blue prints

that define a Web page’s content and

functionality. They do not convey

design – e.g. colors, graphics, or

fonts.”

- FatPurple

Design: Wireframes

Wireframing/Prototyping

Tools:

• Adobe InDesign

• Axure

• Omnigraffle (Mac)

• Microsoft Visio

• Sketch/Invision

• Mockingbird (online, free)

Self Study

Smashing Magazine: 35 Excellent Wireframing Resources

Also:

• Balsamiq

• iPlotz

• iMockups (iPad)

• Omnigraffle (iPad)

Design: Wireframes

http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

Design a Home PageIn your teams, create your final deliverable, a home page for Events.com

1) Discuss features needed for a homepage

2) Sketch your ideas for a homepage individually

3) Discuss your sketches again with your team

Design: Final Exercise

Final Home Page CollaborationIn your teams, create your final deliverable, a home page for Events.com

Collaborate as a team on a final version of the home

page

Design: Final Exercise

Responsive Design

Responsive Web Design

“Rather than tailoring disconnected designs to each of an ever-

increasing number of web devices, we can treat them as

facets of the same experience. We can design for an optimal

viewing experience, but embed standards-based technologies

into our designs to make them not only more flexible, but more

adaptive to the media that renders them. In short, we need to

practice responsive web design.”

– Ethan Marcotte, Responsive Web Design, A List Apart

Self Study

Ethan Marcotte: Responsive Web Design

Design: Responsive Design

http://alistapart.com/article/responsive-web-design


Responsive Design Characteristics

• Think “mobile first”

• The goal: Maintain content and features across devices

• Responsive designs adjust at different “break points” corresponding to the dimensions of various devices, typically desktop, tablet and mobile

• Navigation may be repositioned

• Modules may be repositioned but hierarchies are maintained

• Images scale down in size or may be cropped

• Text size is maintained where possible, though headings may be reduced in size

• Filters may be moved into a dropdown

• Occasionally, content or features are dropped to save screen real estate or if they’re not device appropriate


Development

Books:

• Information Architecture for the World Wide Web – Louis

Rosenfeld, Peter Morville

• Information Architecture: Blueprints for the Web –

Christina Wodtke, Austin Govella

• The Elements of User Experience – Jesse James Garrett

• Designing Web Navigation: Optimizing the User

Experience – James Kalbach, Aaron Gustafson

• Design of Everyday Things – Donald Norman

• Responsive Web Design – Ethan Marcotte

Web Sites:

• Alertbox

• A List Apart

• Boxes & Arrows

• wireframes.tumblr.com

Further Studies:

• School of Visual Arts

• Continuing Ed classes

• MFA in Interaction Design

• Pratt – Course in Information Design

• Rosenfeld Media

• General Assembly

• Skillshare

• Adaptive Path

• The Information Architecture Institute

• The IA Summit

• Nielsen Norman Group

• User Interface Engineering

Video:

The Right Way to Wireframe by Russ Unger (YouTube)

Additional Resources

http://www.alistapart.com/

http://www.alistapart.com/

http://www.boxesandarrows.com/

http://wireframes.tumblr.com/

Q&A

Slideshare address:


My article on how to find an IA job:http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/

@stribs


http://blog.onwardsearch.com/2012/08/information-architecture-a-guerilla-guide-to-breaking-in/

thank you