What is IA/UX

Prepared by:

Paul Kahn – Experience Design Director

March, 2014

Media Lab, Aalto University

Helsinki, Finland

Intersections of Information Architecture

and User Experience Design

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

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

Paul Kahn | 3

Jesse James Garrett: 5 Layer Process Model— The Elements of User

Experience, Jesse James Garrett (2000)

Paul Kahn | 4

Information Architecture > Facets of User Experience

Paul Kahn | 5

— Peter Morville (2004)

Where we fit in your Internet projects

Paul Kahn | 6

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

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

Paul Kahn | 9

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)

Paul Kahn | 10

— Categorization of popular music

— Pop music categories are an expression of the perception of communities of listeners (bottom-up)

Paul Kahn | 11

Category and Classification

— Categorization is the mental process of grouping things by perceptible similarity within a given context.

— Classification is a set of classesassigned according to a predetermined set of principlesused 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

Paul Kahn | 12

— 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

Paul Kahn | 13

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

Category vs. Classification

— 3 Categories of hair color

Paul Kahn | 15

— Classification of hair color

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.

16

• 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

What is Experience Design ?

17

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

18

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).

19

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.

20

21

22

23

24

25

26

27

28

29

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.

30

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)

31

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

32

The original application followed a 4-step process

Instructions

Practice

Enrollment

Verification

33

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

34

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

35

37

38

• 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

Round 2 Testing (Improved UX and VD)

40

BACK-ENDApp 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-ENDApp 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-ENDAudio instructions often overlap.

Consider: ensuring that audio instructions do not overlap – cut off the first message, if needed.

BACK-ENDAudio instructions often overlap.

Consider: ensuring that audio instructions do not overlap – cut off the first message, if needed.

DESIGNOne participant did not look off the screen – he looked at the top-left of the phone.

Consider: adding an instruction to look “off screen.”

DESIGNOne 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-ENDApp 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-ENDApp 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.

“She’s already barking at me.” (P3)

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.”

41

42

Paul Kahn | 43

Paul Kahn | 46

LATCH (+):

Five ways to organize information for ease of use

(+One)

LocationAlphabetTimeCategoryHierarchy

From Richard Saul Wurman, INFORMATION ANXIETY 2

plus Common Focus

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)

Zillow.com, US Real Estate website

Paul Kahn | 49

Helsinki city services

Metropolitan Museum of Art

Heilbrunn Timeline of Art History

Paul Kahn | 50

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

Paul Kahn | 53

Mad*Pow Team

iPhone Music App

Paul Kahn | 55

Ministers of the French Government

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

Paul Kahn | 57

Time | Categories

Result: co-existence of Categories in Time

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

BBC, British History Interactive Timeline

CBC Archives: On This Day

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

Paul Kahn | 62

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”)

Categories: New York Times Blog Directory, March 2014

Netflix categories of movies

Amazon.com search categories vs. Departments

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

Paul Kahn | 68

Library of Congress: browse by topic/sub-topic

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…

Paul Kahn | 71

Le Monde: Most commented / Most emailed 2012 2013

Paul Kahn | 72

New York Times/Washington Post: stories associated with user interactions

Paul Kahn | 73

Amazon.com: encouraging related purchasing + exposing common purchase behavior

Paul Kahn | 74

Contact Information

Paul Kahn

Experience Design Director

pkahn@madpow.com

Mad*Pow

Portsmouth | Boston | Louisville

www.madpow.com