Introduction to User Experience

class 1 Welcome!

About the Instructor – Syllabus – Final Project

YOU

•Five words on you•Five words on why you are here

•Or a haiku

NOT YET! Think about it….

2

3

Why do we know what we know?•Wrote Information Architecture: Blueprints for the Web•Founded IAI•Founded Boxes and Arrows•Ran design teams, product teams in companies such as Yahoo, Linkedin, Myspace, Zynga•Currently advising a number of startups on UX

About Christina Wodtke

4

Why do we know what we know?• Information Science at University of Washington• IA for Microsoft, Zaaz, Concent• Concent is located in Japan, where he worked at projects from air conditioner interfaces to corporate governance website•YOUR TA!

About Eric Bell

YOU

•Five words on you•Five words on why you are here

•Or a haiku

5

6

week 1 STRATEGY

•Introduction to UX, research, business requirements, Personas

week 3 SCOPE

•Requirements, Content and Feature Strategy

week 4 STRUCTURE

•Information Architecture, Interaction Design, Communicating Design

week 6 UNIQUE CONTEXTS

•Social, Games, Network Design, Offline and on, Mobile

week 10 SKELETON & SKIN

•Brand, Visual Design

syllabus

7

Grading

Homework 25%

Get the most out of class by doing all your homework.

Participation 25%

Get to know your classmates and share your ideas with them.

Final Project 50%

Show off what you’ve learned.

7

8

PRESENTATIONS DEC 19 & 20

Select from one of several start-ups

•Real World! Delivers lunch, matchmaking local restaurants with desk-bound office workers

•Social! Collecting materials from a variety of other services, from Flickr to Facebook ,to create memory sites

•Entertainment! Fashion site that lets women post items they want to find, and other women find them

•Gift! parents and grandparents subscribe their kids to monthly cooking delivery box

•Kids! online directory of out of school programs for children

Notes: if user research, brainstorming, etc you discover pivots, changes, or new opportunities you are empowered to do them!

final project

Software and Books

• you can get omnigraffle• or Balsalmiq, or whatever…. Paper perhaps• you’ll probably need Photoshop or something sexy when it comes to the sexy part

•Recommended: Elements of User Experience, Don’t Make Me Me Think, Designing Interactions, Designing the Social Web and MY BOOK!

9

What is UX? – What makes up User Experience – Requirements – Strategy – Principles

class 1 UX introduction

What is user experience?

What experience do you love?What is it?Why do you love it?What’s your favorite part?

13

Don Norman

"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

14

jesse james garrett

the design of anythingindependent of medium

or across [device]with human experience as an explicit outcome

and human engagement as an explicit goal

-Jesse James Garrett

15

jesse james garrett

-Jesse James Garrett

Historically, online we’ve cared about:

TEAM of DESIGNERS

GRAPHIC DESIGN

INFORMATION ARCHITECT

INTERACTION DESIGNER

21

dan saffer

22

Startups are seeking

This Course

•You’ll do the entire plane•You will suck. That is AWESOME•Not trying=failing•Find your love. Follow it.

24

A SHORT HISTORY OF ARCHITECTURE

Design Principles

Cave

Hut

Stone Age City

VITRUVIUS

firmitas, utilitas, venustas : : durability, convenience, beauty 

Durability

“Durability will be assured when foundations are carried down to the solid ground and materials wisely and liberally selected”

Vitruvius

Frank Lloyd Wright’s Imperial Hotel, Japan, survived an

earthquakeThe reflecting pool provided a source of

water for fire-fighting;Cantilevered floors and balconies provided

extra support for the floors;A copper roof, cannot fall on people below

the way a tile roof can;Seismic separation joints, located about

every 20 m along the building;Tapered walls, thicker on lower floors,

increasing their strength;Suspended piping and wiring, instead of

being encased in concrete, smooth curves, making them more resistant to fracture.

Technical EarthquakesSlow loading javascript fails on low bandwidth, and can cause users to accidently search for the label inside your search box. Is your site designed to be robust when things break (for

example, filter out the label from the query. Or don’t place labels in fields; it reduces usage anyhow.)

I’m searching for “my architect, not “movies, directors,

actors”

Social Earthquakes

If people post jobs in discussion areas, any user

can move them to job board

If people use

connection invites

to spam/market, they can be

reported.

Prepare forTechnical TremorsExecutionMaintenanceScale Bandwidth

Social FaultlinesInnocents/IdiotsTrollsSpammersCriminals

Convenience“When the arrangement of the apartments is faultless and presents no hindrance to use, and when each class of building is assigned to its suitable and appropriate exposure” Vitruvius

Sound familiar?

We’re talking usability!

“Early in life I had to choose between honest arrogance and hypocritical humility. I chose honest arrogance and have seen no

occasion to change.” Frank Lloyd Wright

Usonian houses were beautiful, human scaled.. And didn’t have closet space. Should we choose beauty over usability sometimes?

Human

Human

The Facebook Inbox is chock full of annoying

non-human mails, despite the fact they know who is

human and who I am connected

to. Not convenient.

 Bilbao did not leak. I was so proud.

 I call it the "Then What?" Okay, you

solved all the problems, you did all the stuff, you

made nice, you loved your clients, you loved

the materials, you loved the city, you're a good

guy, you're a good person... and then what? What do you

bring to it? 

See his great TED talk http://www.ted.com/talks/frank_gehry_asks_then_what.html

Beauty (delight)

“when the appearance of the work is pleasing and in good taste, and when its members are in due proportion according to correct

principles of symmetry.” Vitrvius

“Less is more.” ~ Mies

SEAGRAM BUILDING (Philip Johnson did interiors, 1957)

This logical and elegant 38-story skyscraper (525' H) has alternating horizontal bands of bronze plating and bronze-tinted glass and decorative bronze I-beams which emphasize its verticality. Placed to the rear of its site and set back from Park Avenue, it incorporates a large plaza in the front as part of the design--thus avoiding the need for set-backs. It uses granite pillars at the base and has a two-story glass-enclosed lobby.

Seagram Building

New York City

1957Is this

Beautiful?

“Less is a bore.” ~ Venturi

Is this Beautiful?

Do we dictate what is beautiful by

constraining user choice?

Or support passionate use that may not

meet our aesthetic

standards?

Beautiful

Convenient

Durable

WHY SO USER CENTERED?

51

B=f(P+E)- Lewin’s Equation

Behavior is a function of a Person and his Environment

You can’t control the person, but you can design the environment to change behavior

53

measure ux: usability

54

julian missig

Andrei

Andrei Michael Herasimchuk has been designing world class software across web browsers, desktop clients, mobile smartphones and tablet computers for more than two decades. He was the lead designer behind the Adobe Creative Suite and the product lead for Adobe Lightroom. He was Chief Design Officer for Involution Studios, a digital product design company based in the United States and led the 2010 redesign of Yahoo! Mail. In 2011, Andrei joined Twitter and is currently the Director of Design. His writing and thoughts on design can be found at Design by Fire (http://www.designbyfire.com).56

57

homework

Watch Steve Krug’s Do it yourself Usability Test http://www.sensible.com/rsme.html

Read the package

Select a particularly satisfying user experience. Describe why, noting at least three touch points.

*without using search