SVA Workshop 072311

photo by davidteter on flickr
Introduction to Information Architecture & DesignSchool of Visual Arts | Summer 2011Robert Stribley

Introduction

Introduction
Aussie-Style Liquorice

Pattern Recognition:
In cognitive psychology, the ability to identify familiar forms within a complex arrangement of sensory stimuli
Butterfly on the New York City Highline

Butterflies at the American Museum of Natural History’s Butterfly Conservatory.

Intro
Introduction
Robert Stribley
I’m an senior information architect at Razorfish
I write music and arts reviews,
I produce a promote a variety show
I photograph various things
I drink coffee
Clients include:
Bank of America, Morgan Stanley Smith Barney, Wachovia
Boston Scientific, Nasonex
Choice Hotels
Computer Associates, EMC
Ford
Nextel
Red Cross
Travel Channel, Women’s Wear Daily

Intro
About You
What’s your name?
What do you do for work?
What do you do for fun?
Coffee, tea or bottled water?
Introduction

Intro
Introduction
Goals of this workshop
Understand the basic concepts of user experience design
Experience the general process and techniques used on a design project
Review the basic deliverables an information architect develops within a project

Agenda

Agenda
Agenda
Morning
Background
Design Process
Our Project
User Research
Competitive Review
Personas
Lunch

Agenda
Agenda
Afternoon
Card Sorting
Site Maps
Page Types
Grids
Navigation
Sketching
Wireframes
Q&A

Background

Background
Background: Defining IA
in•for•ma•tionar•chi•tec•ture n.
The combination of organization, labeling, and navigation schemes within an information system.
The structural design of an information space to facilitate task completion and intuitive access to content.
The art and science of structuring and classifying web sites and intranets to help people find and manage information.
An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.
Navigation
Interaction
Art/Science
Discipline/ Community
Information Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and Morville

Background
The Information Architecture Institute defines information architecture as “the art and science of organizing and labeling websites, intranets, online communities and software to support usability.”

Background
"It's hard to say who really is an information architect. In some sense, we all are.”
— Alex Wright, Author Glut

context
IA
users
content

interface
information architecture

skin
skeleton

Design Process
metaphor: architectural plans
Flickr.com: Cornell University Library

Background: History
A Brief History of IA
1975
Richard Saul Wurman coined the term “information architecture” to describe the field now more likely described as “information design”
1994
Formation of Argus Associates in Ann Arbor, WI, the first firm devoted to IA
1998
First edition of Peter Morville and Lou Rosenfeld’s Information Architecture for the World Wide Web, affectionately known as “The Polar Bear” book

Background: History
A Brief History of IA
2000
First IA Summit, Boston, MA – Defining Information Architecture
2002
Boxes & Arrows, online journal for information architects goes live
3 new books on IA published, including Jesse James Garrett’sThe Elements of User Experience
2011
12thAnnual IA Summit held in Denver, CO
Partially adapted from: “A brief history of information architecture” by Peter Morville and Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon

Design Process

Design Process
Design Process
Discovery
Design
Definition
Development

Design Process
Design Process
Discovery
Design
Definition
Development
Stakeholder interviewers
Business requirements
Competitive & comparative audits
User research
Site inventory

Design Process
Design Process
Discovery
Design
Definition
Development
Personas
Content & meta data audits
Card sorts
Use cases
Mood boards
Sketching
Site maps
Creative brief
UX brief

Design Process
Design Process
Discovery
Design
Definition
Development
Site maps
Task flows
Sketching
Wireframes
Stakeholder reviews
Prototypes
Usability testing
Visual design
Functional specifications

Design Process
Design Process
Discovery
Design
Definition
Development
Quality assurance
Site development

Background
Deliverables
IA Deliverables
discover
design
define
requirements document
sketches
site map
comparative/competitive
review
personas
wireframes
feature/functionality
inventory
user flows
prototype
experience brief
use cases

Background
Deliverables
IA Deliverables
discover
design
define
requirements document
sketches
site map
comparative/competitive
review
personas
wireframes
feature/functionality
inventory
user flows
prototype
experience brief
use cases
visual design

Our Project

Our Project
What to do?

Our Project
Events.comwants to revamp its website to become the go-to online resource for people wanting to attend or promote events across the United States.
Our Project

Discover

User Research
User Research in Copenhagen’s Elderly Homes

User Research
“Through research, we aim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy.”
Louis Rosenfield & Peter Morville
Discovery: User Research

User Research
Methodology
Focus Groups
Surveys
Interviews
Goals
Identify patterns and trends in user behavior, tasks, preferences, obstacles.
Discovery: User Research

User Research
Class Exercise: Survey Questions
How do you learn about events in NYC?
What type of events are you interested in?
What’s more important to you:
Price
Type of Event
Location
Date
How often do you attend the events?
Do you ever need to promote an event?
Do you ever invite people to an event?
Discovery:User Research

Competitive Review
image by brandonschauer

Discovery: Competitive Audit
“This type of assessment helps set an industry ‘marker’ by looking at what the competition is up to, what features and functionalities are standard, and how others have solved the same problems you might be tasked with.”
Dorelle Rabinowitz
Discovery: Competitive Review

Competitive Review
Methodology
Usability Criteria
Heuristic Evaluation
See Ten Usability Heuristics by Jakob Nielsen http://www.useit.com/papers/heuristic/heuristic_list.html
Scorecard
Goals
Review and analyze competitor sites according to particular criteria
Draw key findings, which can influence and guide IA through the design phase
Also:
Comparative Reviews

Competitive Review
Competitors

Competitive Review: Flavorpill
Flavorpill
“
Flavorpill loves culture. We embrace the high-brow, low-brow, underground, mainstream, and everything in between — as long as it's good.
A city guide for those who like to go out, Flavorpill publishes a daily update of worthwhile cultural-event listings, from art exhibits and readings to concerts, plays, and festivals.
”
http://flavorpill.com/about

Competitive Review: Flavorpill
Home Page
Search
Recent Activity
Our Pick
What’s Happening Today
Events calendar
Featured Venue
Featured Events
Giveaways
New York Guide
Navigation
Primary
Events
Today
Editor Picks
Giveaways
Venues
Daily Dose
Flavorwire
Utility
City Dropdown
Sign In/Sign Out
SignUp/ Profile
Follow Us (RSS, Facebook, Twitter)
Search
Features & Functionality
Search
Calendar
Filtering
Google maps
Comments
Profile

Going.com
Competitive Review: Going.com
“
Going helps you find fun things to do and fun people to meet.
Ever wish there were one place where you can find all the events around town?
Want to know whether an event is worth going to and see who else likes it?
Looking to meet some new people who are up for doing fun things?
We felt the same frustration and decided to do something about it. The result is Going: we now have hundreds of events a day and thousands of people who are up for doing fun things.
”
http://newyork.going.com/about_site

Competitive Review: Going.com
Features & Functionality
Search
Calendar
Profiles
Who likes it?
Comments
Event posting and promoting
RSVP online/Buy tickets
Event filtering
Link to Google Maps
Home Page
Post an Event
Search
Inbox
Organizer Tools
What’s Popular this Week
City Feed
Recession Busters
Top Searches (tag cloud)
Photo Booth
Navigation
Primary
Things to Do
Places to Go
People to See
Secondary
Recession Busters
More Cities
Utility
Profile
Inbox
Post an Event
Search
Settings
Logout

NYCgo.com
“
NYC & Company is New York City’s official marketing, tourism and partnership organization.
Our mission is to maximize travel and tourism opportunities throughout the five boroughs, build economic prosperity and spread the dynamic image of New York City around the world.
”
http://nycgo.com/?event=view.footerArticle&id=49568
Competitive Review: NYCgo.com

Competitive Review: NYCgo.com
Home Page
Search
This Week carousel
NYC Highlights
Events calendar
Recent News
Plan Your Trip
Deals & Offers
Filter by borough
My NYC profiles
Navigation
Primary
Top Attractions
What to Do
Where to Stay
Plan Your Trip
Deals
Broadway
NYC Restaurant Week
Free
Secondary
Travel Trade
Meeting Planners
Membership
Press
Utility
Search (with categories)
Language Selector
Temperature
Twitter, Facebook, Email
Functionality
Search
Google maps
Calendar
Find an event
Filtering
MyNYC

Competitive Review
Key Findings
Search placed prominently on each site, sometimes with advanced search
Clear need for and emphasis upon filtering events
Calendars provide obvious benefit
Profiles and community features are also common, but handled with varying degrees of detail, success
Free events often highlighted
Event detail pages vary, may have maps, RSVP, sharing, rating, commenting functionality
Maps would prove helpful, especially to out-of-towners
The ability to add or promote an event is not always present or prominent

Competitive Review
What else have we learned?
Who are the audiences of these sites?
What are the strengths of these sites?
What are their weaknesses?
How might another event site differentiate itself from these sites?

Define

Personas
Personas is a component of the Metropath(ologies) exhibit, recently on display at the MIT Museum by the Sociable Media Group from the MIT Media Lab . It uses sophisticated natural language processing and the Internet to create a data portrait of one's aggregated online identity. In short, Personas shows you how the Internet sees you.
Created at Personas: http://personas.media.mit.edu

Personas
“Personas summarize user research findings and bring that research to life in such a way that everyone can make decisions based on these personas, not based on themselves.”
Steve Mulder
Definition: Personas

Personas
Characteristics of Effective Personas
Varied and distinct
Detailed
Not weighed down with minutiae
Tied into business-specific goals
Backed by data

Personas
Methodology
Cluster Analysis
Goals
Create a narrative based on real data to illustrate user behavior, motivations, goals

Big Budget
Promoter
Planner
Small Budget

Sabrina
Jenny
Donny
Jerry

Personas
Sabrina, 27
The party planner
Location:
Gramercy Park
Attitude:
Organized, outgoing
Financial Perspective:
Generous, bit of spendthrift
Online Habits:
Avid user of social networking sites, Twitter, Facebook, etc
Events:
Wine tastings, gallery openings
Quote:
“I love getting bunches of friends together to attend all these NYC events. There’s so much great stuff to do in this city!”
Big Budget
Planner
Promoter
Small Budget

Jerry, 44
The out-of-towner
Location:
Cincinnati, OH
Attitude:
Casual, yet adventurous
Moderate spender
Online Habits:
Utilitarian use of the Web to research trips, read about the arts and pay bills
Events:
Museums, visiting landmarks, tours
Quote:
“I’m visiting the Big Apple with my wife and we want to check out some art-related events.”
Big Budget
Planner
Promoter
Small Budget

Personas
Donny, 38
The local comedian
Location:
East Village
Attitude:
Laidback, loosely organized
Frugal, paycheck to paycheck
Online Habits:
Spends time networking, promoting his act online, haunts comedy sites
Events:
Comedy slams, variety shows
Quote:
“I land a few comedy gigs around the city and I want to promote them better.”
Big Budget
Promoter
Planned
Small Budget

Personas
Jenny, 33
The professional promoter
Location:
Williamsburg
Attitude:
Busy, disciplined, professional
Healthy budget for promotions and
advertising
Online Habits:
Heavy use of social networking sites both professionally and personally, shops online
Events:
Small gigs, big concerts, DJ sets
Quote:
“I manage a few bands and DJs and I have to ensure they’re listed in the right, targeted places.”
Big Budget
Planned
Promoter
Small Budget

Class Exercise: Personas
Sabrina
Jenny
Donny
Jerry
In regards to Events.com,
What tasks might each persona attempt to complete on Events.com?
What features can you imagine each persona might like on such a site?
What obstacles or pain points might they encounter?

Lunch Break

Agenda
Afternoon
Card Sorting
Site Maps
Page Types
Grids
Navigation
Sketching
Wireframes
Q&A
Agenda

Card Sorting

Card Sorting
Definition: Card Sorting
“There are often better ways to organize data than the traditional ones that first occur to us. Each organization of the same set of data expresses different attributes and messages. It is also important to experiment, reflect, and choose which organization best communicates our messages.”
Nathan Shedroff, Experience Strategist

Methodology
Grouping and labeling with index cards, post it notes
Two types:
Open – participants sort cards with no pre-established categories – useful for new architectures
Closed – participants sort cards into predetermined, provided groups – useful for fitting content into existing architectures
Online card sorts
WebSort, OptimalSort, Socratic
Goals
Organize content more efficiently
Find names for groups of content based on users’ perspectives
Self Study:
"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07

Class Exercise: Card Sorting
As individuals:
Take 5 minutes to think of all the events a person could attend
Write each event you come up with on a Post-It note

Class Exercise: Card Sorting
Now, as a group:
Take a few minutes to organize your events into categories (group & label them)
Then we’ll share some categories

Card Sorting: Next Steps
With the results of a card sort we then can:
Build consensus
Refine terminology
Create a site map
Help define navigation

Design

Site Maps

Conceptual Design
Design: Site Maps
“A site map is a high level diagram showing the hierarchy of a system. Site maps reflect the information structure, but are not necessarily indicative of the navigation structure.”
- Step Two Designs

Conceptual Design
Design: Site Maps
Site map for Men‘s section of designer clothing site

Conceptual Design
Design: Site Maps
Site map by KaziShanto, Louise Blouin Media

Conceptual Design
Design: Site Maps
Biocarta Site map, Fromson Consulting

Page Types

Conceptual Design
Design: Page Types
Home Page
Category Page
Details Page

Grids
Design: Grids
“The true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.”
KhoiVinh, former design Director, NYTimes.com

Grids
Design: Grids

Grids
Design: Grids
12 column grid

Grids
Design: Grids
3 columns of 4 units

Grids
Design: Grids

Grids
Design: Grids
Variations of the 12 column grid

Grids
Design: Grids
Self Study: Want to know more?
Learn more about design by grids:
960 Grid System
960.gs
Design by Grid
www.designbygrid.com
Hashgrid
www.hashgrid.com

Navigation

Grids
Design: Navigation
Types of Navigation
Site Structure – major nav
Hierarchical – product families
Function – sitemap privacy
Direct – banner ad/shortcut
Reference – related links
Dynamic – search results
Breadcrumb – location
Step Navigation – sequence through forms/results
Faceted Navigation – filters results
Areas of Navigation
Global – universal header/footer
Local – left nav/right nav
Local content –text links, buttons
Styles of Navigation
Rollover
Dropdown
Tabs
Self Study: Want to know more?
Adapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites

Sketching

Design: Sketching

Design: Sketching
Sketching Through the Ages
1485-1487
Ornithopter by Leonardo da Vinci
2005
Schematic representation of the major components of a helicopter by Richard Wheeler

Sketching
Design: Sketching
“There are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching. ”
- Bill Buxton
Bill Buxton
Sketching User Experiences

Sketching
Design: Sketching

Sketching
Design: Sketching
Any guesses as to what this is a sketch of?

Twitter.com
“twttr sketch”
Sketching
Design: Sketching
Twitter
[This sketch] has very special significance – it's hanging in the office somewhere with one other page.
Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down.
– Jack Dorsey, Twitter

Sketching
Design: Sketching
Attributes of a Sketch
Quick
Timely
Inexpensive
Disposable
Plentiful
Clear vocabulary
Distinct gesture
Minimal detail
Appropriate degree of refinement
Suggest & explore rather than confirm
Ambiguity
Bill Buxton
Sketching User Experiences

Sketching
Design: Sketching
Methodology
Draw
Limit your time
Don’t worry about mistakes or style
Goals
Benefit from the participation of your colleagues
Quickly generate ideas and refine through iterations

Design: Sketching
Class Exercise: Sketching
In teams, sketch your ideas.
1) Create & Promote an Event
Design: Sketching

Design: Sketching
Create & Promote an Event
Take 5 or so minutes first to discuss what features this area should include
Is it a single page? Multiples steps?
Design: Sketching

Design: Sketching
Don’t forget to keep your personas in mind
Sabrina
Jenny
Donny
Jerry

Design: Sketching
1) Create & Promote an Event
2) A Homepage
Design: Sketching

Info
Design: Sketching Tools
Sketching Tools:
The following apps are all for the iPad
Adobe Ideas (free)
Bamboo Paper (free)
Muji Notebook (3.99)
Penultimate ($1.99)
SketchBook Pro ($4.99)

Wireframes
photo & sculpture by polly verity

Design: Wireframes
Wireframes
What are wireframes?
“Web site wireframes are blue prints that define a Web page’s content and functionality. They do not convey design – e.g. colors, graphics, or fonts.”
- fatpurple

Design: Sketching
Wireframes
Design: Wireframes - Examples
wireframe by Mike Rohde

Design: Sketching
wireframe by matthieumingasson

Design: Sketching
wireframe by spaceboxru

Design: Sketching
wireframe by matthieumingasson

Design: Sketching

Wireframing/Prototype Tools:
Adobe InDesign
Axure
Omnigraffle (Mac)
Microsoft Visio
Mockingbird (online, free)
Also:
iPlotz
iMockups (iPad)
Omnigraffle (iPad)
Info
Design: Wireframing Tools

Design: Sketching
Design: Wireframes
Class Exercise: Final Wireframe
In your teams, create your final deliverable.
Assign one of the following to a team member:
Create & Promote an Event
Event Detail
3) Homepage
As an individual now, you’ll create a final “wireframe,” which incorporates your team mates’ designs and feedback.

Design: Sketching
Design: Wireframes
Develop
Wireframe & Prototyping Tools
Axure
Dreamweaver
InDesign
Visio

Books:
Information Architecture for the World Wide Web – Louis Rosenfeld, Peter Morville
Information Architecture: Blueprints for the Web – Christina Wodtke, Austin Govella
The Elements of User Experience – Jesse James Garrett
Designing Web Navigation: Optimizing the User Experience – James Kalbach, Aaron Gustafson
Design of Everyday Things – Donald Norman
Local Events:
Dot DotDot, SVA Lecture Series
IA Meetup
Info
Additional Resources
Web Sites:
Alertbox
A List Apart
Boxes & Arrows
Organizations:
Human Computer Interactions (HCI)
Interaction Designers Association (IxDA)
Usability Professionals Association (UPA)
Further Studies:
Adaptive Path
The Information Architecture Institute
The IA Summit
Pratt – Course in Information Design
Nielsen Norman Group
Rosenfeld Media
User Interface Engineering

Slideshare address:
http://www.slideshare.net/stribs
Additional credit:
Thanks to Anh Dang
Info
Additional Info

Design: Sketching
Design: Wireframes
Addendum:
Design Principles & Concepts
Wireframe & Prototyping Tools
Axure
Dreamweaver
InDesign
Visio

Dieter Rams: 10 principles of good design
Good design is…
Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.
© Dieter Rams, amended March 2003 and October 2009

Design Concepts
Design Concepts
Donald Norman, Co-Founder, Nielsen Norman Group

Design Concepts
Key Concepts
Affordance
Mapping
Constraints
Visibility
Feedback
Design Concepts

128
Design Concepts
Affordance
“Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.”
- Donald Norman

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

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

Design Concepts
Design Concepts
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/

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

Design: Sketching
Design: Wireframes – Templates versus Pages

SVA Workshop 072311

by Robert Stribley on Jul 26, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

SVA Workshop 072311 Presentation Transcript