Web User Experience ARTD 302 April 17, 2008 Keith Instone keith<year>@instone.org © 2008 Keith Instone

Who are you? What are you doing? ARTD 302 - T/R 2:30-4:50. Interactive Graphic Design “Continued exploration in graphic principles and techniques. Emphasis on sequential communication, editorial design and visual communication for the web. Five studio hours.” Designing web graphics.4 Becoming a Digital Designer Don't Make Me Think: A Common Sense Approach to Web Usability Navigation in physical space & virtual space Redesign a site to improve navigation Design a World Changing Website (content, site map, and visual aesthetic for a home page & 2 subpages) Future Casts Final web design solution

ARTD 302 - T/R 2:30-4:50. Interactive Graphic Design “Continued exploration in graphic principles and techniques. Emphasis on sequential communication, editorial design and visual communication for the web. Five studio hours.”

Designing web graphics.4

Becoming a Digital Designer

Don't Make Me Think: A Common Sense Approach to Web Usability

Navigation in physical space & virtual space

Redesign a site to improve navigation

Design a World Changing Website (content, site map, and visual aesthetic for a home page & 2 subpages)

Future Casts

Final web design solution

Who am I? What do I do? Why am I here? IBM > ibm.com > User experience design > Information Architecture lead Computer science > Human-computer interaction > Hypertext > Web usability > Information architecture > User experience Telecommute to work from Maumee BGSU grad 86 & 88, staff until 97

IBM > ibm.com > User experience design > Information Architecture lead

Computer science > Human-computer interaction > Hypertext > Web usability > Information architecture > User experience

Telecommute to work from Maumee

BGSU grad 86 & 88, staff until 97

Web usability old guy (like Steve) Baltimore Maryland, March, 16, 2002

Overview User experience – huh? Roles – who? Principles – what? Methods – how?

User experience – huh?

Roles – who?

Principles – what?

Methods – how?

What do we mean by “user experience”? (Microsoft, 2004) User experience…represents an approach that puts the user , rather than the system, at the center of the process …incorporates user concerns and advocacy from the beginning of the design process and dictates the needs of the user should be foremost in any design decisions

User experience…represents an approach that puts the user , rather than the system, at the center of the process …incorporates user concerns and advocacy from the beginning of the design process and dictates the needs of the user should be foremost in any design decisions

What do we mean by “user experience”? (IBM, 2004) User Experience Design addresses the user's initial awareness, discovery, ordering, fulfillment, installation, service, support, upgrades, and end-of-life activities

User Experience Design addresses the user's initial awareness, discovery, ordering, fulfillment, installation, service, support, upgrades, and end-of-life activities

What do we mean by “user experience”? (UXnet, 2008) User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport.

User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport.

Layers of the (web site!) user experience from http://jjg.net/elements/

From http://terremoto.net/uxcosmos/

User experience team Business lead UE lead Business analyst User researcher UE designer Information architect, interaction designer, user interface designer Visual / graphic designer UE evaluator Content specialists (editors, writers, …) Developers

Business lead

UE lead

Business analyst

User researcher

UE designer

Information architect, interaction designer, user interface designer

Visual / graphic designer

UE evaluator

Content specialists (editors, writers, …)

Developers

User research – “Users in the Mist”

UE Design (flows and models) Step 1. Users search and browse for the right type of card. Step 2. Examine and customize individual cards. Step 3-4. Preview and/or attempt to send card.

UE Design (wireframes, UIs)

Ways to organize UX teams One-(wo)man-band Programmer/writer/designer/therapist Client – agency model Development team (with perhaps a usability/design consultant) Multidisciplinary (which ones? too many?) End-to-end vs. waterfall model Regardless: “User experience” is a good label for the team to gather under

One-(wo)man-band Programmer/writer/designer/therapist

Client – agency model

Development team (with perhaps a usability/design consultant)

Multidisciplinary (which ones? too many?)

End-to-end vs. waterfall model

Regardless: “User experience” is a good label for the team to gather under

“Principles” of user experience Don’t fight biology Understand behavior It is not as new as you think You are not as special as you think Plan on getting it wrong the first few times It should be usable and enjoyable Value, value, value Think outside the box

Don’t fight biology

Understand behavior

It is not as new as you think

You are not as special as you think

Plan on getting it wrong the first few times

It should be usable and enjoyable

Value, value, value

Think outside the box

Don’t fight biology Red text Light blue text

Understand behavior (from you know what)

It is not as new as you think http://usability.gov/

You are not as special as you think (“web design patterns”)

Plan on getting it wrong the first few times Include iteration in the project plan Include iteration in the project plan Include iteration in the project plan Include iteration in the project plan Include iteration in the project plan OK, good enough to launch it (See user testing later)

Include iteration in the project plan

Include iteration in the project plan

Include iteration in the project plan

Include iteration in the project plan

Include iteration in the project plan

OK, good enough to launch it

(See user testing later)

It should be usable and enjoyable

Value, value, value “It is the right thing to do” only goes so far Value to the customer Value to the business Bridge between customer, business and IT – pretty good job security

“It is the right thing to do” only goes so far

Value to the customer

Value to the business

Bridge between customer, business and IT – pretty good job security

Think outside the box

What other principles are you learning about? (I bet they mesh with these) we can stop here or continue…

we can stop here or continue…

Most important tool: Usability Testing Give representative users realistic tasks, watch quietly, be amazed

Give representative users realistic tasks, watch quietly, be amazed

Did not get to the usability testing section Instead we had Q&A and discussion on navigation, ibm.com, my interest in geography, accessibility, ….

Instead we had Q&A and discussion on navigation, ibm.com, my interest in geography, accessibility, ….

Recap User experience = team with a broad view It is a matter of principals… User testing: just do it

User experience = team with a broad view

It is a matter of principals…

User testing: just do it

Thanks for your attention! Blog and other &*$^!, er stuff: http://instone.org/

Blog and other &*$^!, er stuff:

http://instone.org/