sva intro to information architecture & design fall 09

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

INTRODUCTION TO

Information Architecture&

DesignSCHOOL OF VISUAL ARTS | FALL 2009 | ANH DANG

About Me

Anh DangInformation ArchitectNEW YORK TIMES

Adjunct ProfessorSCHOOL OF VISUAL ARTSPRATT INSTITUTE

About You

Hello Class

Let’s Go

Let’s get started

About the class

LecturesDiscussionsExercises

Information + (Interactions + Interfaces)

3 I’s

Information + ( Interactions + Interfaces )• Understanding content• Organize content

3 I’s

Information + ( Interactions + Interfaces )• Understanding content• Organize content

• Mapping task flows• Evaluating user goals

• Learning design basics• Creating a concept• Testing prototypes

Discussion Point

What is IA?

http://flickr.com/photos/dcjohn/

Venn Diagram

USERSCONTENT

CONTEXT

IA/ID Pyramid

INTERFACE

INFORMATION ARCHITECTURE

Discussion Point

What is GOOD design?

Braun’s 10 Principles of Good Design

Braun’s 10 Principles of Good DesignGOOD DESIGN IS1. Innovative2. Enhances the usefulness of product3. Is aesthetic4. Displays the logical structure of a product; it’s form

follows its function5. Is unobtrusive6. Is honest7. Is enduring8. Is consistent right to the details9. Is ecologically conscious10. Is minimal design

Goals of User Experience DesignCreate designs that effectively communicate a

message and allow users to accomplish their goalseasily, simply, and rapidly.

*****ADDPICTURE******

Exercise 1DESIGN LIGHTNING ROUND

“Don’t make me think.”STEVE KRUG

Subway ***ADD PHOTO***

Door 1

Door 2

Remote 1

Remote 2

Microwave

Themostat

Google

Example Continental

Example Northwest

ORGANIZING

INFORMATION

“There are often better ways to organize datathan the traditional ones that first occur to us.

Each organization of the same set of dataexpresses different attributes and messages.

It is also important to experiment,reflect, and chose which organizationbest communicates our messages.”

NATHAN SHEDROFF

Principle: LATCH

Most information can be organized by:

RICHARD SAUL WURMAN

Principle: LATCH

LocationATCH

RICHARD SAUL WURMAN

Principle: LATCH

LocationAlphabet

RICHARD SAUL WURMAN

Principle: LATCH

LocationAlphabet

TimeCH

RICHARD SAUL WURMAN

Principle: LATCH

LocationAlphabet

TimeCategory

RICHARD SAUL WURMAN

Principle: LATCH

LocationAlphabet

TimeCategoryHierarchy

RICHARD SAUL WURMAN

Example: Vietnam War Memorial

CASe Study: NYT Homepage (category)

Case StudyL Times Wire (time)

Exercise 2SHOPPING ON ETSY

EXERCISE 1

Exercise 1Etsy is a site with a lot of products and a lot of categories.Conduct a card sort and organize the content in a mannerthat is useful and interesting. Propose a new navigationsystem that is easy for users to find search and browse forETSY products

•Group and label with index cards, post-it notes•Cluster similar items and create categories•Identify patterns and relationships•Recommend a new taxonomy

Technique Card Sorting

CARD SORTING

“Card sorting is a great, reliable,inexpensive method for finding patterns

in how users would expect to findcontent or functionality.”

DONNA SPENCER

Card SortingMETHODOLOGY• Grouping and labeling with index cards,

post-it notes

GOALS• Find names for groups of content based on

user’s perspective.• Organize content more efficiently.

VISUALIZING

INFORMATION

Principle: Visual Organization

Visual Variables of Contrast

POSITION SIZE

ORIENTATIONVALUE

Principle: Gestalt Principles of Grouping

Gestalt Principles of Grouping

PROXIMITY SIMILARITY CONTINUITY

CLOSURE AREA SYMMETRY

Jock Mackinlay’s Visual Features

Principle: Gestalt Principles of Grouping

Information Seeking Mantra BEN SCHNEIDERMAN

• Overview first• Zoom & filter• Details on demand

Examples

Example: Map

Case Study: Gap Minder

Hans Rosling

GAP MINDER

INTERACTIONS&

INTERFACES

“Most design is intended to beused by people, so the needs andrequirements of people ought to

be driving much of the workthroughout the entire process.”

DONALD NORMAN

http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpg

Donald Norman

Principle: Things to Consider

Things to consider…• Who is the target audience?• What is the purpose of the product?• When would this product be used?• Where would this product be used?• How easy is it to understand what to do?• What are all the steps needed to accomplish a task?

Principle: Things to Consider

Things to consider…• Who is the target audience?• What is the purpose of the product?• When would this product be used?• Where would this product be used?• How easy is it to understand what to do?• What are all the steps to accomplish a task?• What are the business goals?• What are the user goals?• What are the product interface goals?

Principle: Design Concepts

Key Design ConceptsAffordance

MappingConstraints

VisibilityFeedback

Affordance

AFFORDANCE“Perceived properties that determine how

a thing is used [and] provide strong cuesto the operations of things.”

DONALD NORMAN

affordance

Affordance

Mapping

MAPPING“Relationship between two things, in this

case between controls and theirmovements and the results in the world.”

DONALD NORMAN

Mapping

http://flickr.com/photos/annavsculture/441610821/

Mapping

Contraints

CONSTRAINTSLimitations that constrain

possible interactions

Constraints

http://flickr.com/photos/annavsculture/441610821/

Constraints

Visibility

VISIBILITY“Just the right things have to be visible: to indicate

what parts operate and how, to indicate howthe user is to interact with the device.”

DONALD NORMAN

Visibility

Fdback

FEEDBACK“Sending back to the user information

about what action has actually been done,what result has been accomplished.”

DONALD NORMAN

Feedback

http://flickr.com/photos/huladancer22/530743543/

Exercise 3ZIPTHRU

EXERCISE 2

Exercise 3Redesign the interface and user taskflow of Zipthur to improve itsusability. Use information organization principles such as LATCH,visual variables of contrast, gestalt principles of grouping to improve:•Affordance•Mapping•Visibility•Constraints

Diagram the task flows to1.Check balance2.Get a New Card3.Add funds to your card

Design Process

To do…

• Heuristic Evaluation• Map task flows• Sketch concepts• Prototype• User Test

http://www.flickr.com/photos/mollivan_jon/67850029/

HEURISTIC EVALUATION

Heuristic EvaluationMETHODOLOGY• Use a small set of criteria to evaluate

information and interface to identifyusability problems.

GOALS• Evaluate usability of current product and

guide design direction.• Organize content more efficiently.

Technique Task Flows

TASK FLOWS

Technique Task Flow

Task FlowsMETHODOLOGY• Identify all the possible pathways of user

GOALS• Identify gaps and opportunities of how to

improve the flow of information andinteractions.

Sketching

SKETCHING

“There are techniques and processeswhereby we can put experience front and

center in design. My belief is that the basis fordoing so lies in extending the traditional

practice of sketching. ”BILL BUXTON

Technique

Methodology• Draw!

Goals• Quickly generate ideas and refine through

iterations.• Identify key features and functionality.

Sketching

Attributes of a Sketch BILL BUXTON

• Quick• Timely• Inexpensive• Disposable• Plentiful• Clear vocabulary• Distinct gesture• Minimal detail• Appropriate degree of refinement• Suggest & explore rather than confirm

Paper Prototyping

http://www.flickr.com/photos/arrrika/2298422351/

PAPER PROTOTYPING

“A prototype can answer design questionsand communicate design ideas… ”

FRED BEECHER

User Testing

http://www.flickr.com/photos/psd/2247745929/

USER TESTING

ResourcesSITES• interactiondesign.sva.edu• boxesandarrows.com• konigi.com• subtraction.com• smashingmagazine.com• designmind.frogdesign.com• adaptivepath.com• iainstitute.com

ORGANIZATIONS• Interaction Designers Association (IxDA)• Usability Professionals’ Association (UPA)• Human Computer Interactions (HCI)• AIGA

EVENTS• Swiss Miss Creative Mornings• SVA MFA Interaction Design Events

resources

Good Design

“Good design will have it all - aesthetic pleasure, art, creativity -

and at the same time beusable, workable, and enjoyable.”

DONALD NORMAN

THE END.

sva intro to information architecture & design fall 09

school of visual arts

anh dang introduction

design basics

content introduction

interfaces introduction

started introduction

class introduction

atm introduction

Education

sva sva pc declaration of finance form su15

obi ee architecture intro

intro to enterprise architecture (ea)

bscp537: qualification process for sva parties, sva party

introduction to information architecture & design - sva...

intro to architecture

solenoid valve sva20 series · sva 20s-d24 sva 20d-d24 sva...

sva lesson

intro to web architecture chapter 1

data sheet shut-off valves types sva-dl and sva-dh...

04 architecture intro

intro & implementation of a microservices architecture

9622 3 erp architecture intro

2011 ku architecture intro for gaunt

artist in residence intro talk @ sva, visible futures lab...

new intro to architecture week 4

technical brochure stop valves sva-dl & sva-dh 250-300

introduction to information architecture and design - sva...

plataforma sva

intro to drupal 7 architecture