2. Intro
Goals of this workshop
• Understand the basic concepts of user
experience design.
• Experience the general process and
techniques used on a design project.
8. Intro
Anh Dang
Iʼm an information architect at The New York Times,
adjunct professor at Pratt Institute,
instructor at School of Visual Arts,
speaker at various design conferences.
9. Intro
Robert Stribley
Iʼm an senior information architect and content
strategist at Razorfish,
writer of music and arts reviews,
producer/promoter for a variety show,
photographer of various things.
10. Intro
About You
• What is your name?
• What do you do?
Select one or the other
• For Love or For Money
• Spontaneous or Plan
• Lavish or Frugal
• Brisket or Ribs
15. Background
in•for•ma•tion ar•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.
Information Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and Morville
16. 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.”
17. Background
quot;It's hard to say who really is an
information architect. In some
sense, we all are.”
— Alex Wright, Author Glut
18. Background
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.
19. Background
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
2009
• 10th Annual IA Summit held in Memphis, TN
Partially adapted from:
“A brief history of information architecture” by Peter Morville
Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon
25. Design Process
Discovery
Definition
Design
Development
• Stakeholder interviewers
• Business requirements
• Competitive & Comparative Audits
• User Research
26. Design Process
Discovery
Definition
Design
Development
• Persona/Scenario Development
• Content & Meta Data Audits
• Use Cases
• Creative Brief
• Moodboards
27. Design Process
Discovery
Definition
Design
Development
• Site Maps
• Task Flows
• Wireframes
• Prototypes
• User Testing
• Visual Design
28. Design Process
Discovery
Definition
Design
Development
• Functional
Specifications
• Quality
Assurance
• Site Development
31. A Business Proposal
forgood is a new start up that wants to
become the online resource for users to learn
about all the summer events in New York City.
Designs by Paul Lau
33. 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
35. User Research
Methodology
• Focus Groups
• Surveys
• Interviews
Goals
• Identify patterns and trends in user behavior,
tasks, preferences, obstacles.
36. User Research
Class Exercise: Survey Questions
• How do you learn about summer 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?
38. 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
39. Competitive Review
Methodology
• Usability Criteria
• Scorecard
• Heuristic Evaluation
Goals
• Review and analyze competitor sites
according to particular criteria.
• Draw key findings, which can influence and
guide IA through the design phase.
41. 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
45. Competitive Review: Going.com
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
46. Competitive Review: Going.com
Home Page
• Post an Event
• Search
• Organizer Tools
• Whatʼs Hot
• Browse Events
• Next in Top this Week
• My Calendar
• Iʼm a Fan Of
• Similar People
• Photobooth
• Recession Busters
• Recently Cool Listed
• City Buzz
47. Competitive Review: Going.com
Navigation
Primary
Utility
• Things to Do
• Profile
• Places to Go
• Inbox
• People to See
• Settings
• Logout
Secondary
• Post an Event
• Recession Busters
• Search
• Top Photo
• More Cities
48. Competitive Review: Going.com
Functionality
• Search
• Event posting
• Calendar
• RSVP online
• Profiles
• Picture rating
• Buy tickets
• Event filtering
• Who likes it?
• Link to Google Maps
• Comments
49. Competitive Review: NYCgo.com
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. With
the launch of major interactive initiatives—
including nycgo.com and the Official NYC
Information Center—NYC & Company
becomes the ultimate resource for visitors
and residents to find everything they need
”
about what to do and see in New York City.
http://nycgo.com/?event=view.footerArticle&id=49568
50. Competitive Review: NYCgo.com
Home Page
• Search
• This Week
carousel
• NYC Insider
• NYC Essentials
• Events calendar
• Recent articles
• Filter by borough
• My NYC profiles
51. Competitive Review: NYCgo.com
Navigation
Primary
Secondary
• Plan Your Visit
• Do Business with NYC & Company
• Hotels
• Dining
Utility
• Shopping
• Search
• Nightlife
• Language Selector
• Arts & Entertainment
• Sports & Leisure
• My NYC
• Offers
• Events
• NYC Life
53. Competitive Review
Key Findings
• Search placed prominently on each site, sometimes with
advanced search
• Clear need for and emphasis on filtering of events
• Calendars provide obvious benefit but are handled with
varying degree of success
• Maps also prove helpful, if not as necessary
• Profiles and community features are also common, but
handled with varying degrees of detail, success
• Free events often highlighted/bubbled up
• Event detail pages vary, may have maps, RSVP, sharing,
rating, commenting functionality
56. 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
59. Personas
JACK
The “Take-It-All-In” Tourist
“Iʼm visiting the Big Apple
and want to find things that
are cool to check out
besides the typical tourists
attractions.”
Lavish
Spontaneous
Planned
Frugal
60. Personas
JULIETTE
The “Must-Plan” Mother
“I want to find things that my whole
family can do together. With kids
under 5 years old, itʼs tough to
keep them entertained!”
Lavish
Spontaneous
Planned
Frugal
61. Personas
KATE
The “No-Non-Sense” Native
“I just want the inside scoop of
the best and most interesting
things to do in the city.”
Lavish
Spontaneous
Planned
Frugal
62. Personas
SAWYER
The “Happy-Go-Lucky” Cheapster
“I just want to have fun and
not spend a lot of money. ”
Lavish
Spontaneous
Planned
Frugal
63. Personas
KATE
The “No-None-Sense” Native
JACK
The “Take-It-Stride” Tourist
SAWYER
JULIETTE
The “Happy-Go-Lucky”
The “Must-Plan” Mother
Cheapster
64. Personas
Class Exercise: Personas
Each team is assigned a Persona. You will role play your
persona to give us a good picture of who you are and what
your behaviors are.
• Characteristics (likes, dislikes, etc.)
• Goals
• Obstacles
70. 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
chose which organization best
communicates our messages.”
– Nathan Shedroff
72. Card Sorting
Methodology
• 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.
73. Card Sorting
Class Exercise: Card Sorting
In teams, organize the data.
L- Location
A- Alphabet
T- Time
C- Categories
H- Hierarchy
77. Design Concepts
Affordance
“Perceived
properties that
determine how a
thing is used [and]
provide strong cues
to the operations of
things.”
-
Donald Norman
77
79. Design Concepts
Constraints
Limitations that
constrain possible
interactions
http://flickr.com/photos/hippie/2561854165/
80. 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/
81. Design Concepts
Feedback
“Sending back to
the user
information about
what action has
actually been done,
what result has
been
accomplished.”
- Donald Norman
81
83. Grids
“I think 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.”
– Khoi Vinh
94. 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
96. Sketching
Sketching Through the Ages
1485-1487
2005
Ornithopter by Leonardo da Vinci
Schematic representation of
the major components of a
helicopter by Richard Wheeler
100. 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
“twttr sketch” Twitter.com
101. Sketching
Attributes of a Sketch
• Quick
• Timely
• Inexpensive
• Disposable
Bill Buxton
• Plentiful
Sketching User
Experiences
• Clear vocabulary
• Distinct gesture
• Minimal detail
• Appropriate degree of refinement
• Suggest & explore rather than confirm
• Ambiguity
104. Braunʼs 10 principles of good design
Good design is…
1. Innovative
2. Enhances the usefulness of product
3. Is aesthetic
4. Displays the logical structure of a product; itʼs form follows
its function
5. Is unobtrusive
6. Is honest
7. Is enduring
8. Is consistent right to the details
9. Is ecologically conscious
10. Is minimal design
105. Resources
SITES
• Boxesandarrows.com
• Thegridsystem.org
• Konigi.com
• Subtraction.com
PROFESSIONAL ORGANIZATIONS
• Interaction Designers Association (IxDA)
• Usability Professionalsʼ Association (UPA)
• Human Computer Interactions (HCI)
• AIGA
