Designing Experience School of Visual Arts Instructor: Anh Dang 27 September 2008

Workshop Description This workshop will introduce students to the basic principles of user experience and provide a conceptual framework for thinking about and designing good experiences online and offline. A wide range of design practices will be explored through discussions and exercises during the workshop.

This workshop will introduce students to the basic principles of user experience and provide a conceptual framework for thinking about and designing good experiences online and offline. A wide range of design practices will be explored through discussions and exercises during the workshop.

Agenda Introductions Design Experience Overview Lunch Guest Speaker Classroom Case Study Q/A

Introductions

Design Experience Overview

Lunch

Guest Speaker

Classroom Case Study

Q/A

Goals Understand the basic Interface, Information, Interaction Design concepts Experience the general process & techniques used on a design project

Understand the basic Interface, Information, Interaction Design concepts

Experience the general process & techniques used on a design project

Back to Basics Interfaces Information Interactions

Interfaces

Information

Interactions

Goals of user experience design Communicate a message that allow users to accomplish their goals easily, simply, and rapidly.

Communicate a message that allow users to accomplish their goals easily, simply, and rapidly.

Designing Interfaces

ATM

Design of Everyday Things Donald Norman

Donald Norman

Key Design Concepts Affordance Mapping Constraints Visibility Feedback

Affordance

Mapping

Constraints

Visibility

Feedback

Affordance “ Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.” Donald Norman http://flickr.com/photos/holster/1303003175

“ Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.”

Donald Norman

Mapping Relationship between two things http://flickr.com/photos/annavsculture/441610821/

Relationship between two things

Constraints Limitations that constrain possible interactions http://flickr.com/photos/hippie/2561854165/

Limitations that constrain possible interactions

Visibility “ Just the right things have to be visible: to indicate what parts operate and how, to indicate how the user is to interact with the device.” Donald Norman http://flickr.com/photos/huladancer22/530743543/

“ Just the right things have to be visible: to indicate what parts operate and how, to indicate how the user is to interact with the device.”

Donald Norman

Feedback “ Sending back to the user information about what action has actually been done, what result has been accomplished.” Donald Norman

“ Sending back to the user information about what action has actually been done, what result has been accomplished.” Donald Norman

Exercise #1

Things to Consider Who is the target audience? What is the purpose of the device? What can you do with it? How can you tell what state it is in? How easy is it to use?

Who is the target audience?

What is the purpose of the device?

What can you do with it?

How can you tell what state it is in?

How easy is it to use?

Designing Information

“ There is virtually unlimited freedom in how we represent data. The difficult question is how best to represent it .” william wright

“ There is virtually unlimited freedom in how we represent data. The difficult question is how best to represent it .” william wright

Information Design Hans Rosling

Hans Rosling

Visual Variables for Contrast position size orientation value hue shape

Gestalt Principles of Grouping proximity similarity continuity closure area symmetry

Gestalt Principles of Grouping proximity similarity

similarity proximity

Content Organization Alphabets Locations Time Continuums Categories Numbers Randomness Nathan Shedroff

Alphabets

Locations

Time

Continuums

Categories

Numbers

Randomness

Nathan Shedroff

Vietnam War Memorial http://flickr.com/photos/steffsmith_fotos/267461474/

Continental

Northwest

Exercise #2

NYC Recycles

Designing Experience

User Experience Design Process 1. Discovery Stakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research 2. Definition Persona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards 3. Design Sitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps 4. Development Functional Specifications, Quality Assurance Testing, Site development

1. Discovery

Stakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research

2. Definition

Persona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards

3. Design

Sitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps

4. Development

Functional Specifications, Quality Assurance Testing, Site development

interface information architecture

users content context IA

Guest Speaker Robert Stribley Senior Information Architect Avenue A | Razorfish

Robert Stribley

Senior Information Architect

Avenue A | Razorfish

Exercise #3

Founded in February 2004 by Mark Zuckerberg Started as a collegiate social networking application Facebook gives people the power to share and makes the world more open and connected. Open to 13 years + in 2006 More than 64 million active users

Founded in February 2004 by Mark Zuckerberg

Started as a collegiate social networking application

Facebook gives people the power to share and makes the world more open and connected.

Open to 13 years + in 2006

More than 64 million active users

NEW

Conclusion

Braun’s 10 principles of good design Good design is… Innovative Enhances the usefulness of product Is aesthetic Displays the logical structure of a product; it’s form follows its function Is unobtrusive Is honest Is enduring Is consistent right to the details Is ecologically conscious Is minimal design

Good design is…

Innovative

Enhances the usefulness of product

Is aesthetic

Displays the logical structure of a product; it’s form follows its function

Is unobtrusive

Is honest

Is enduring

Is consistent right to the details

Is ecologically conscious

Is minimal design

Thank you!