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

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

Web usability old guy (like Steve)

Baltimore Maryland, March, 16, 2002

Overview

• 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

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

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.

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

User research – “Users in the Mist”

UE Design (flows and models)HomePage

ThumbnailPages

1Step 1. Users search and browse for the right type of card.

Choose another View CardDetails

CustomizeCard

Cancel

Blank Card

2Step 2. Examine and customize individual cards.

View CardDetails

CustomizeCard

Card Sent(Confirm)

Preview, Send Error

CancelCustomizedCard

Cancel/Choose another

Send3

4Step 3-4. Preview and/or attempt to send card.

UE Design (wireframes, UIs)

Logo Banner Ad orInternal

Promotion

Cards Gift ShopInvitations

Home | Help | Login/SignoutSearch | Site Index

My CardshopGift Certificates Promotions

partner ad/offer space

Reasons to SendBirthday Subchannel | Subchannel |Subchannel Subchannel | Subchannel | more...

Channel Subchannel | Subchannel |Subchannel Subchannel | Subchannel | more...

Welcome, Tim! Dad's Day is June 18th.Send a card for free.

CardThumbnail

CardThumbnail

CardThumbnail

title: text textMore Father'sDay Cards

title: text textMore SummerCards

title: text textMore MusicCards

Calendar full calendar

date Holiday date editorial holiday date editorial holiday date editorial holiday date editorial holiday date editorial holidaydate Holiday date editorial holiday date editorial holiday date editorial holiday date editorial holiday date...

CollectionsMusicTVMoviesStationeryTeen LoungeAfrican AmericanSpanishlReligious

Search Assistant

Don't know where to start? I can help you SEARCH

PromoImage(Music)

New Cards | Most Popular | Highest Rated

Banner Ad orInternal

Promotion

SearchAssistant

Image

learn more | about us | investor relations | advertise with us | privacy policyjob opportunities | contact us | terms of service

Header navigation forsite-wide functions.

Tabs represent majorcategories of services

Primary cardclassification scheme.

Expand level twochannels as much as

possible.

Promote searchingusing the wizard on

home. Position tocatch users not

satisfied by channels.

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

“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

Red text

Light blue text

Understand behavior(from you know what)

It is not as new as you thinkhttp://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)

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

Think outside the box

What other principles are you learning about?(I bet they mesh with these)

we can stop here or continue…

Most important tool: Usability Testing

• 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, ….

Recap

• 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/