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


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


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

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


Quote

“Don’t make me think.”STEVE KRUG


ATM


Subway ***ADD PHOTO***


Door 1


Door 2


Remote 1


Remote 2


Microwave


Themostat


Yahoo


Bing


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:

LATCH

RICHARD SAUL WURMAN


Principle: LATCH


LocationATCH

RICHARD SAUL WURMAN


Principle: LATCH


LocationAlphabet

TCH

RICHARD SAUL WURMAN


Principle: LATCH


LocationAlphabet

TimeCH

RICHARD SAUL WURMAN


Principle: LATCH


LocationAlphabet

TimeCategory

H

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


Quote

“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

HUE

SHAPE


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


Example: Map


Case Study: Gap Minder

Hans Rosling

GAP MINDER


Lunch

LUNCH


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


Visibility


Fdback

FEEDBACK“Sending back to the user information

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

DONALD NORMAN


Feedback


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

tasks

GOALS• Identify gaps and opportunities of how to

improve the flow of information andinteractions.



Sketching

SKETCHING


Quote

“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


Quote

“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

Education

school of visual arts

anh dang introduction

design basics

content introduction

interfaces introduction

started introduction

class introduction

atm introduction