Introduction to Information Architecture and Experience Design

1. Intersections of Information Architecture
and User Experience Design
Prepared by:
Paul Kahn – Experience Design Director
March, 2014
Media Lab, Aalto University
Helsinki, Finland

2. Paul Kahn | 2
Outline
— What is Information Architecture
— What is Experience Design
— Applying Information Architecture: 3 case studies
— Six ways to organize information: LATCH+CF

3. Paul Kahn | 3
What is Information Architecture
Information is
— a difference that makes a difference
— a pattern that provides a structure for understanding
Information Architecture is
— discovering the kinds of information the site contains
— matching this information to the needs of the users
— determining the appropriate metadata structure

4. Paul Kahn | 4
Jesse James Garrett: 5 Layer Process Model
— The Elements of User Experience,
Jesse James Garrett (2000)

5. Paul Kahn | 5
Information Architecture > Facets of User Experience
— Peter Morville (2004)

6. Paul Kahn | 6
Where we fit in your Internet projects

8. Paul Kahn | 8
The Information Architect must understand
the data
— text coding systems: SGML/XML
— database storage
— information retrieval
the interaction models
— principals of user interface design
— user-based design methodology
— the limits of current web browser technology

9. Paul Kahn | 9
The Information Architect must mediate
— the requirements of a client, who wants to present
information
— the needs of the user, who needs to find and consume that
information
— balance between the desirable and the possible

10. Paul Kahn | 10
Category and Classification
Categorization is
—the mental process of grouping things by perceptible similarity
within a given context.
—Creating groups through direct experience (bottom-up)

11. Paul Kahn | 11
— Categorization of
popular music
— Pop music categories
are an expression of
the perception of
communities of
listeners (bottom-up)

12. Paul Kahn | 12
Category and Classification
— Categorization is
the mental process of grouping things
by perceptible similarity
within a given context.
— Classification is
a set of classes
assigned according to a predetermined set of principles
used to impose order on a set of entities.
— Taxonomic classification establishes stability by applying
a set of rules to one domain (top-down)
— Classification system offer inter-operability benefits across applications

13. Paul Kahn | 13
— MESH Classification of human diseases
— Each disease is located in one or more places in the
Medical Subject Headings (MESH) maintained by
the National Library of Medicine in Washington DC

14. Examples of “categories” that are classifications
High-level category
Three Categories of Drugs
• Depressants
• Stimulants
• Hallucinogens
Continuous category/scale
Categories of Hurricanes:
Category 1: 74-95 mph winds
Category 2: 96-110 mph winds
Category 3: 111-130 mph
winds
Category 4: 131-155 mph
winds
Category 5: 155+ mph winds
Paul Kahn | 14

15. Paul Kahn | 15
Category vs. Classification
— 3 Categories of hair color
— Classification of hair color

16. 16
What is Experience Design (UX)
• It is User-Centered
• Services should be experienced through the customer’s eyes
• It is Co-Creative
• All stakeholders should be included in the service design process
• It is Sequencing
• The service should be visualized as a sequence of interrelated actions.

17. 17
What is Experience Design ?
• It is Evidencing
• Intangible services should be visualized in terms of physical artefacts
• It is Holistic
• The entire environment of the service should be considered
Oops, this is a definition of Service Design 
—Five Principles of Service Design Thinking
—from This Is Service Design Thinking

18. 18
What is User Experience at Mad*Pow
• All of the above plus some things not already mentioned
• User Research: recruiting test cohorts, recording and analyzing
interviews and tests
• Design Studio: rapid design/critique with stakeholders & users
• Personas and Journey Maps
• Content Strategy and SEO: defining & creating appropriate
content for communicating messages
• Creative Technology: prototyping the best way to communicate
across platforms & channels

19. 19
Case 1: Messaging as a Service
• Aetna came to Mad*Pow for help developing a Unified Member
Messaging strategy
• Aetna wanted to make sure members were getting
• the right information
• at the right time
• via their preferred channel(s).

20. 20
Results
• Research produced recommendations for
• Intra-departmental communication and governance
• AND user-managed filters and profiles.
• The result is the kind of business strategy and technology
recommendations that are driven by seeing the user's experience
as a service.

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30
Case 2: User Experience Design for Mobile App
Small Software start-up (6+ people) developing Secure
EyePrint technology using standard mobile phone camera
—yeVerify meant to replace password protection as access
key to mobile applications
—Integrates with larger end-user applications: banking, health
care, etc.

31. 31
EyeVerify: How it works
— Software-only biometric
— Stable feature-set based on the blood
vessels in the whites of the eyes
— Enables a password-free mobile experience
— Eyeprint cannot be lost, forgotten or stolen
— No spoofing - robust liveness detection
— Uses ordinary, existing smartphone cameras,
no hardware dependency
— Requires just a 720p camera (~1.3 MP)

32. 32
EyeVerify: How it works
— Give a “more professional look” to the visual design of the beta
application
— Increase the probability of user success / Decrease the possibility
of user confusion
— Streamline the instruction / enrollment / verification process to
make it as rapid as possible
— Find the best combination of text, image, animation, video and
voice to communicate with the user

33. 33
The original application followed a 4-step process
Instructions
Practice
Enrollment
Verification

34. 34
EyeVerify: Highlights from Round 1 User Testing
— Most participants were able to use the EyeVerify
application with little to no trouble
— All but one of the participants said that they would like to
use EyeVerify instead of entering a password or PIN
— There is an opportunity to have the interface guide and
inform them throughout the process
— Participants said that the written instructions and video
were quite straightforward and were easy to understand
• They also said that the “hand in front of the face”
suggestion was helpful
— All participants said that the process got easier the more
scans they performem

35. 35
UX Improvements
• Replace Enrollment/Verification concept with Create EyePrint
• Replace two step Enrollment and Verification with a series of
scans that “build up” the EyePrint
• Eliminate the second scan (look left, look right)
• Instruct the user to repeat the scan until the EyePrint is robust
• User a progress animation to drive towards completion
• Reduce the Instruction sequence to two animations
• Focus the animation the transition from a “normal” face-to-phone
position to the EyePrint scan position

36. 1. Create Login 2. Welcome 3. Instruction 1 4. Instruction 2
Animation
Position
Animation
Gaze
Animation
Gaze
Green Box
Transition
5. Instruction 3
7. Position 8. Gaze Left
11. Position or Match Failed
9. 1-n Match 10. Final Match
Website
Restart Beta
or
Return to Application
Email
EyeVerify new workflow
Rich Woodall & Paul Kahn
10/14/13

37. 37

38. 38

39. Round 2 Testing (Improved UX and VD)
• As with the first round of testing, participants were able
to use the EyeVerify application with little to no trouble
• The biggest opportunities are to better guide users
through the instructions and through a failed eye scan
• Participants said that the written instructions and audio
were easy to understand
• Many participants said that the process got easier the
more scans they performed
• Overall, participants seemed to have an easier time with
the app than during the first round of testing
39

40. 40
DESIGN
One participant did not look off the screen – he
looked at the top-left of the phone.
Consider: adding an instruction to look “off screen.”
DESIGN
One participant did not look off the screen – he
looked at the top-left of the phone.
Consider: adding an instruction to look “off screen.”
BACK-END
App does not notice if the gaze is not up and to the
left.
Consider: adding functionality and messaging that
ensures the gaze is in the proper location.
BACK-END
App does not notice if the gaze is not up and to the
left.
Consider: adding functionality and messaging that
ensures the gaze is in the proper location.
BACK-END
App does not give ample time before stating “we
cannot find your eyes.”
Consider: adding a brief pause so that users may
attempt to line-up their eyes.
BACK-END
App does not give ample time before stating “we
cannot find your eyes.”
Consider: adding a brief pause so that users may
attempt to line-up their eyes.
BACK-END
Audio instructions often overlap.
Consider: ensuring that audio instructions do not
overlap – cut off the first message, if needed.
BACK-END
Audio instructions often overlap.
Consider: ensuring that audio instructions do not
overlap – cut off the first message, if needed.
“She’s already barking at me.” (P3)

41. 41
Case 3: Reorganizing a public website
Client goals for the project
• Easy to navigate. “Users have a clear path to the
information that interests them and know how to find
what they want if they come back.
• Satisfying. “People should feel like they found what
they wanted, and leave wanting to come back, and
when they walk away they would refer it to someone
else.”
• Trustworthy. “Providers will easily see that the
questions they have will be answered in expert way.”

42. 42

43. Paul Kahn | 43

46. Paul Kahn | 46
LATCH (+):
Five ways to organize information for ease of use (+One)
Location
Alphabet
Time
Category
Hierarchy
From Richard Saul Wurman, INFORMATION ANXIETY 2
plus Common Focus

47. Paul Kahn | 47
Location
“Location is chosen when the information who you are comparing
comes from several different sources or locales. Doctors use different
locations of the body to group and study medicine. Concerning an
industry you might want to know where on the world goods are
distributed.” WSW
— Location is the X/Y position in the context of a representation
— In the most abstract sense, the X and Y positioning of any object on a
plane is a purely visual distinction
— Location can be used to organize information a geographical region
(states, countries)
— Location can be used in relation to an object (such as the body)

48. Zillow.com, US Real Estate website

49. Paul Kahn | 49
Helsinki city services

50. Paul Kahn | 50
Metropolitan Museum of Art
Heilbrunn Timeline of Art History

52. Paul Kahn | 52
Alphabet
— “Alphabet is best used when you have enormous amount of data. For
example words in a dictionary or names in a telephone. As usually
everybody is familiar with the Alphabet, categorizing by Alphabet is
recommendable when not all the audience is familiar with different
kind of groupings or categories you could use instead.” WSW
— Reference to the order sequence of the letters in an alphabet
— Common 26 letter European alphabet
— Alphabetic order varies according to language

53. Paul Kahn | 53
Mad*Pow Team

54. iPhone Music App

55. Paul Kahn | 55
Ministers of the French Government

56. Paul Kahn | 56
Time
“Time is the best form of categorization for events that happen over
fixed durations. Meeting schedules or our calendar are examples. The
work of important persons might be displayed as timeline as well. Time
is an easily framework in which changes can be observed and
comparisons made.” WSW
— Absolute reference to actual event in time
— Sequence of events in linear time, hours, days, months, years, decades,
centuries
— Potential for cycle as well as sequence

57. Paul Kahn | 57
Time | Categories
Result: co-existence of Categories in Time

58. Eli Rosen’s Civil War Project (CMU, 2012)
http://www.elibrosen.com/civilwar/

59. BBC, British History Interactive Timeline

60. CBC Archives: On This Day

61. Herbert Bayer, WORLD GEOGRAPHIC ATLAS. A Composite of Man’s
Environment. Chicago: Container Corporation of America, 1953.

62. Paul Kahn | 62

63. Paul Kahn | 63
Category
— “Category is an organization type often used for goods and industries.
Shops and services in the yellow pages are easy to find by category.
Retail stores are divided into e.g. men- and woman-clothing. This mode
works well to organizing items of similar importance.” Wurman
— Categories are determined by similar content
— Each category is at the same level (“similar importance”)

64. Categories: New York Times Blog Directory, March 2014

65. Netflix categories of movies

66. Amazon.com search categories vs. Departments

67. Paul Kahn | 67
Hierarchy
“Hierarchy organizes by magnitude. From small to large, least
expensive to most expensive, by order of importance, etc. Hierarchy is
to be used if you want to assign weight or value to the ordered
information.” WSW
— Organized by sequence of importance
— Recursive sequence of whole to part, largest to smallest
— Organizing in nested containers:
1st thing contains 2nd thing leads to 3rd thing

68. Paul Kahn | 68
Library of Congress: browse by topic/sub-topic

70. Paul Kahn | 70
A Sixth Method: Common Focus (CF)
— Organizing information based on user interaction
— Currently viewed
— Most discussed
— Most popular
— People who bought this item also bought…
— Based on what you looked at before…

71. Paul Kahn | 71
Le Monde: Most commented / Most emailed 2012 2013

72. Paul Kahn | 72
New York Times/Washington Post: stories associated with user interactions

73. Paul Kahn | 73
Amazon.com:
encouraging related purchasing +
exposing common purchase behavior

74. Paul Kahn | 74
Contact Information
Paul Kahn
Experience Design Director
pkahn@madpow.com
Mad*Pow
Portsmouth | Boston | Louisville
www.madpow.com