Introduction & Course Overview

Introduction & Course Overview

Professor James A. LandayUniversity of Washington(Guest Lecturer: Kate Everitt)

CSE 490L – Web Design, Prototyping, & ImplementationSpring 2008April 1, 2008

April 1, 2008 CSE 490 L - Spring 2008

Hall of Shame or Hall of Fame?

• http://www.balthaser.com/

2


Hall of Shame!

• no CLEAR FIRST READ (I3)!

• links to basic areas?– doesn’t make

navigation easy

• video doesn’t download fast

• http://www.balthaser.com/

3

Introduction & Course Overview

Professor James A. LandayUniversity of Washington(Guest Lecturer: Kate Everitt)

CSE 490L – Web Design, Prototyping, & ImplementationSpring 2008April 1, 2008

April 1, 2008 CSE 490 L - Spring 2008 5

Outline

• Motivation• Who are we?• Web Design introduction• Course overview & schedule


Customer-Centered Design Matters

• NYTimes, Aug 30 1999, on IBM Web site– “Most popular feature was … search … people couldn't figure

out how to navigate the site”– “The 2nd most popular feature was the help button, because

the search technology was so ineffective.”

• After customer-centered redesign– use of the “help” button decreased 84%– sales increased 400 percent

Good Web Site Design can Lead to Healthy Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

6

http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html


Customer-Centered Design:“build the right site & build the site right!”

7


Who Are We?

• James Landay– Associate Professor in Computer Science & Engineering (CSE) at the

University of Washington (previously at UC Berkeley)– Ph.D. in Computer Science from Carnegie Mellon– HCI researcher w/ focus on informal input (pens & speech), Web design

(tools & patterns), & Ubiquitous Computing– Founder & Chief Scientist of NetRaker, 1st online web site evaluation firm

• Kate Everitt (guest lecturer today)– Senior graduate student in CSE at UW– BS from Queens University– HCI researcher w/ focus on collaborative computing, tabletop I/O

• Sean Liu (TA)– Graduate student in CSE at UW– BS from National Taiwan University– HCI researcher w/ focus on ubiquitous computing

8


Web Design Patterns

• Design patterns communicate common design problems and solutions– how to create navigation bars for

finding relevant content…– how to create a shopping cart that

supports check out…– how to make sites where people

return & buy…

• DOS required text for 490L– buy it ASAP if you don’t have it– read Chapter 1 today– Amazon has a good price

9


NAVIGATION BAR (K2)

• Problem: Customers need a structured, organized way of finding the most important parts of your Web site

10


NAVIGATION BAR (K2)

• Solution– captures essence on how to solve problem

First-level navigation

Second-level navigation

Link to home

11


Iterative design

• Getting it right the first time is hard• Need better support for quick turns around loop

Design

Best Practices for Designing Interfaces

PrototypeEvaluate

Design Patterns

12


Customer-Centered Design

• Empathizing w/ customers, understanding their needs, the tools they use, & their social/organizational context

• What if you don’t practice CCD?– might overrun budget & management pulls plug– site may be too hard to learn/use & visitors never

return

13


Myths of Customer-Centered Design

• Myth 1: Good Design is Just Common Sense– why are there so many bad sites?

• Myth 2: Only Experts Create Good Designs– experts faster, but anyone can understand & use CCD

• Myth 3: Interfaces can be Redesigned Before Launch– assumes site has right features & being built correctly

• Myth 4: Good Design Takes Too Long/Costs Too Much– CCD can reduce total development time & cost (finds problems early on)

• Myth 5: Good Design Is Just Cool Graphics– only one part of the larger picture of what to communicate & how

• Myth 6: UI Guidelines Guide you to Good Designs– only address how a site is implemented, not features, organization, or flow

• Myth 7: Customers Can Always Rely on Documentation & Help– help is the last resort of a frustrated customer

• Myth 8: Market Research Takes Care of Understanding All Customer Needs– does not help you understand behavior: what people say vs. what they do

• Myth 9: Quality Assurance Groups Make Sure That Web Sites Work Well– QA makes sure product meets spec., not what happens w/ real customers on real problems

14


Design = Solutions

• Design is about finding solutions– unfortunately, designers often reinvent

• hard to know how thingswere done before

• why things were done a certain way

• how to reuse solutions

15


Design Patterns

• Design patterns communicate common design problems and solutions– first used in architecture [Alexander]

• ex. How to create a beer hall where people socialize?

16


Design Patterns

• Not too general & not too specific– use a solution “a million times over, without ever

doing it the same way twice”

• Design patterns are a shared language – a language for “building and planning towns,

neighborhoods, houses, gardens, and rooms.”– ex. BEER HALL is part of a CENTER FOR PUBLIC LIFE…– ex. BEER HALL needs spaces for groups to be alone…

17


Patterns Support Creativity

• Patterns come from successful examples– sites that are so successful that lots of users are familiar with

their paradigms (e.g., Yahoo)– interaction techniques/metaphors that work well across many

sites (e.g., shopping carts)

• Not too general (principles) & not too specific (guidelines)– designer will specialize to their needs

• Patterns let designers focus on the hard, unique problems to their design situation– every real design will have many of these

18


PROCESS FUNNEL (H1)

• Problem: Need a way to help people complete highly specific stepwise tasks– ex. Create a new account– ex. Fill out survey forms – ex. Check out

19


PROCESS FUNNEL (H1)

• What’s different?– no tab rows– no impulse buys– only navigation on page

takes you to next step

• What’s different?– no tab rows– no impulse buys– only navigation on page

takes you to next step

• What’s the same?– logo, layout, color, fonts

• What’s the same?– logo, layout, color, fonts

20


PROCESS FUNNEL (H1)

• Problem: What if users need extra help?

21


Process Tunnel



FLOATING WINDOWS (H6)


FLOATING WINDOWS (H6)


PROCESS FUNNEL (H1)Solution Diagram


PROCESS FUNNEL (H1) Related Patterns

(A10) Web Apps

(K5) High-Viz Action Buttons

(A1) E-Commerce (A11) Intranets

(H1) Process Funnel

(K12) Preventing Errors

(H8) Context-Sensitive Help(I2) Above the Fold

(K13) Meaningful Error Messages27

(H6) Floating Windows


Patterns Offer the Best of Principles, Guidelines, & Templates

• Patterns help you get the details right, without over-constraining your solution– unlike principles, patterns not too general, so will apply to

your situation– unlike guidelines, patterns discuss tradeoffs, show good

examples, & tie to other patterns– unlike style guides, patterns not too specific, so can still be

specialized – unlike templates, patterns illustrate flows among different

pages

• Patterns can serve as documentation for team-oriented environments

28


Format of Web Design Patterns

• Pattern Name & Number• Exemplar• Background• Problem Statement• Forces• Solution Summary• Solution Diagram• Related Patterns

29


Pattern Name and NumberPattern Name and Number

ExemplarExemplar

BackgroundBackground

Problem Statement

Problem Statement

Forces &

Solution

Forces &

Solution

30


Bus StopsBus StopsSolution

Diagram

Solution

Diagram

Related

Patterns

Related

Patterns

Solution

Summary

Solution

Summary

31


User Interface Development Process

DesignExploration

Evaluate Execute

Proposal:Demos/Lo Fi Prototypes (How)

Work together torealize the designin detail.

Evaluate withCustomers

DesignDiscovery

Customers, Products,Business, Marketing



Design Definition:- Design Problem Statement- Targeted User Roles (Who)- Targeted User Tasks (What)

Specification:Hi Fidelity, Refined Design - Foundation in product reality - Refined Design description

Storyboard

Customers: - Roles (Who) - Tasks (What) - Context (Stories)Marketing: - Business Priorities - MessagesTechnology: - Products - ArchitectureDesign: - Leading/competing technologies

Review & Iterate

based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli


Iteration

Design

Prototype

Evaluate

At every stage!


Design

• Design is driven by requirements– what the artifact is for– not how it is to be implemented– e.g., phone not as important as “mobile” app.

• A design represents the artifact– for UIs these representations include (?)

• screen sketches or storyboards• flow diagrams/outline showing

task structure• executable prototypes

– representations simplify


Web Design Representations

Site Maps Storyboards

Schematics Mock-ups


Usability

According to the ISO:The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments

• This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals


Usability/User Experience Goals

– Learnable• faster the 2nd time & so on

– Memorable• from session to session

– Flexible• multiple ways to do tasks

– Efficient• perform tasks quickly

– Robust• minimal error rates• good feedback so user can

recover– Discoverable

• learn new features over time– Pleasing

• high user satisfaction

– Fun

• Set goals early & later use to measure progress• Goals often have tradeoffs, so prioritize• Example goals


User-centered Design

“Know thy User”• Cognitive abilities

– perception– physical manipulation– memory

• Organizational / job abilities • Keep users involved throughout

– developers working with target customers– think of the world in users terms– not technology-centered/feature driven


Task Analysis & Contextual Inquiry

• Observe existing work practices– augment with self-report tools (e.g., ESM)

• Create examples & scenarios of actual use• “Try-out”new ideas before building software

?


Rapid Prototyping

• Build a mock-up of design so you can test

• Low fidelity techniques– paper sketches– cut, copy, paste

• Interactive prototyping tools– HTML, DreamWeaver,

Flash, DENIM, etc.

Fantasy Basketball


ESP

Evaluation

• Test with real customers (participants)– w/ interactive prototype– low-fi with paper

“computer”

• Low-cost techniques– expert evaluation– remote, online testing


Goals of the Course

1) Learn to design, prototype, & implement web UIs– the needs & tasks of prospective customers– cognitive/perceptual constraints that affect design– technology & techniques used to prototype UIs– techniques for evaluating web sites– importance of iterative design for usability– how to work together on a team project– communicate your results to a group

• key to your future success

2) Understand where technology is going & what web sites of the future might be like


Course Format

• Interactive lectures• Quarter long project & homework assignments• Readings• All material is/will be online

– slides, exercises, supplemental readings, schedule

– http://www.cs.washington.edu/cse490l

• Have fun & participate!

http://www.cs.washington.edu/cse490l


Project Description

• Each of you will propose a web site/application idea– fixing something you don’t like or a new idea

• Groups– 4 students to a group– work with students w/ different skills/interests– groups meet with teaching staff every 2 weeks

• Cumulative– apply several design/protypting/evaluation methods

to a single interface


Project Process Overview

• Project proposal (individual) due Thursday 4/3• Choose projects you want to work on Thursday 4/10,

We break you into groups Tuesday, 4/15 (show up!)• Project task analysis & “sketches”

– i.e., rough proposals that can & will change– based on field interviews

• In class presentations & critiques• Low fidelity prototyping & user testing• In class presentations & critiques• Interactive prototype using tools & user test• In class presentations & critiques• Online usability test• Final presentations & project fair with industry guests


Mobile Web Project Themes

• Mobile web computing device of future– i.e., everything like today’s Apple iPhone

• Location-enhanced computing– devices that are aware of their location – past examples include car navigation, car pools,

finding nearby restaurants, etc

• Activity-based computing– applications that use inference of human

physical activity to enhance our lives– helping people stay fit

• exercise & nutrition

• Domains of special interest– environment– developing world


Administrivia

• Registration– limited by room and project constraints to 40– appeal email to me if not enrolled (due today at 5 PM)– tell us why you should be in the course

• background, interests, what you can contribute

• Roll today to see who is here


Administrivia (cont.)

• Teaching assistants

– Sean Liu• O.H.: TBA

• Discussion sections– TBD – please talk to Sean about the current times– new material will be covered in discussion attend


Books

• The Design of Sites by van Duyne, Landay, & Hong– Required book. Please get it now if you haven’t

• We will also give you web links & refer to lecture slides

• Other recommended books on web page


Assignments (tentative)

• Individual– 3 written + one talk each

• Group– 5 written assignments

• 3 presentation/demos with the write-ups

– all group work handed in on Web (group web site)


Grading

• A combination of– midterm (20%)– individual assignments (20%)– group project (55%)

• demos/presentation (group component)• project write-ups and exercises• ratings given by other team members & class

– in class participation (5%)

• No curve


Tidbits

• Late Policy– no lates on group assignments– individual assignments lose one letter grade/day

• Cheating policy– will get you an F in the course– more than once can get you dismissed

• More information (syllabus/schedule/slides)– http://www.cs.washington.edu/cse490l


Summary

• Project proposal due at start of lecture Thur.• Next lecture on Human Abilities & Errors• Read

– Ch 1 of Design of Sites (now)– Ch. 2: The Human Information Processor, from The

Psychology of Human-Computer Interaction By Stuart K. Card, Thomas P. Moran, & Allen Newell, 1983, pp. 23-83 (online, for Thur)

Documents

Introduction & Course Overview