IA 7: IA? IxD? UX! is an uncooked
collection of definitions, categorizations, outlines, and visualizations concerning
⁄ Information architecture IA,
⁄ Interaction design IxD, and
⁄ User experience UX design.
This deck is an updated version of IA 3: IA Concepts. It’s main purpose is to sear the partially dry substances into my own memory.
Download is disabled due to the copyrighted material within the presentation.
Credits: Alan Dix, Ben Shneiderman, Christina Wodtke, Dan Brown, Don Norman, Erin Malone, George Olsen, Jan Borchers, Jesse James Garrett, Jess McMullin, Olga Howard, Peter Morville, Theo Mandel, Todd Warfel
Image credits: flickr.com/library_of_virginia, /liewcf, /nypl
2. ⁄ IA 7: IA? IxD? UX! is an uncooked
collection of definitions, categorizations,
outlines, and visualizations concerning
⁄ Information architecture IA ,
⁄ Interaction design IxD , and
⁄ User experience UX design.
⁄ This deck is an updated version of IA 3: IA Concepts.
⁄ It’s main purpose is to sear the partially dry substances into my own memory.
3. ⁄ IA is defined by the Information Architecture Institute as:
1. The structural design of shared
information environments.
2. The art and science of organizing and
labeling web sites, intranets, online
communities, and software to support findability and
usability.
3. An emerging community of practice focused on
bringing principles of design and
architecture to the digital landscape.
4. ⁄ According to the Interaction Design Association:
1. IxD defines the structure and
behavior of interactive systems.
2. Interaction Designers strive to create
⁄ people and
meaningful relationships between
⁄ the products and services that they use,
⁄ from computers to mobile devices to appliances and
beyond.
5. ⁄ UX is defined by the Nielsen Norman Group as:
all aspects of the end-‐‑user'ʹs interaction
1.
with the company, its services,
and its products.
2. The first requirement for an exemplary user
experience is to meet the exact needs of the
customer, without fuss or bother.
6. 3. Next comes simplicity and elegance that
produce products that are a joy to own, a joy to
use.
4. True user experience goes far beyond giving
customers what they say they want, or
providing checklist features.
5. In order to achieve high-‐‑quality user experience in a
company'ʹs offerings there must be a seamless
merging of the services of multiple
disciplines, including engineering, marketing,
graphical and industrial design, and interface design.
7. 2 Enable frequent
users to use shortcuts
6 Permit easy
reversal of actions
1 Strive for 5 Offer
consistency
simple
error 7
Support
handling
internal 3 Offer
locus of
control
informative
8 Reduce short-‐‑ feedback
term memory load
4 Design dialog
to yield closure
8. 2 Enable frequent users
to use shortcuts to
1 Strive for consistency
increase the pace of
interaction
• Consistent sequences of • Abbreviations
actions in similar situations
• Function keys
• Identical terminology in • Hidden commands
prompts, menus, and help • Macro facilities
screens
• Consistent commands
throughout
9. 4 Design dialog to yield
3 Offer informative closure to provide a
feedback
satisfaction of
accomplishment
• System feedback for every • Organization of sequences of
operator action
actions into groups with a
• Modest response for frequent beginning, middle, and end
and minor actions
• Informative feedback at the
• More substantial response for completion of a group of
infrequent and major actions
actions in order to provide
• a sense of relief,
• the signal to drop
contingency plans and
options, and
• an indication that the way is
clear to prepare for the next
group of actions
10. 6 Permit easy
5 Offer simple error
reversal of actions to
handling
relieve anxiety
• As much as possible, • Encourage exploration of
design the system so the unfamiliar options
user cannot make a • The units of reversibility
serious error
may be
• If an error is made, the • a single action,
system should be able to • a data entry, or
detect the error and offer
• a complete group of
• simple,
actions
• comprehensible
mechanisms for
handling the error
11. 7 Support internal locus 8 Reduce short-‐‑term
of control
memory load
• Experienced operators • The limitation of human
strongly desire the sense that information processing in
they are in charge of the short-‐‑term memory requires
system and that the system that displays be
responds to their actions
• kept simple,
• Design the system to make • multiple page displays be
users the initiators of actions consolidated,
rather than the responders
• window-‐‑motion frequency
be reduced, and
• sufficient training time be
alloaed for codes,
mnemonics, and sequences
of actions
12.
13. Literature
Review
Cognitive
Walkthrough
Without Users
Heuristic
Evaluation
Evaluation Techniques
Model-‐‑based
Evaluation
Model
Extraction
Silent
Observation
Qualitative
Think Aloud
Constructive
Interaction
With Users
Retrospective
Testing
Controlled
Quantitative
Experiments
14. Reduce users‘
memory load
Place
users in
control
of the Make the
user
interface
interface
consistent
15. 1 Use modes judiciously
(modeless)
2 Allow users to use either
keyboard or mouse (flexible)
3 Allow users to change focus
(interruptible)
the interface
Place users in control of
4 Display descriptive messages
and text (helpful)
5 Provide immediate and
reversible actions, and feedback
(forgiving)
6 Provide meaningful paths and
exits (navigable)
7 Accommodate users with
different skill levels (accessible)
8 Make the user interface
transparent (facilitative)
9 Allow users to customize the
interface (preferences)
10 Allow users to directly
manipulate interface objects
(interactive)
16. 11 Relieve short-‐‑term memory
(remember)
12 Rely on recognition, not
recall (recognition)
13 Provide visual cues (inform)
load
14 Provide defaults, undo, and
Reduce users‘ memory
redo (forgiving)
15 Provide interface shortcuts
(frequency)
16 Promote an object-‐‑action
syntax (intuitive)
17 Use real-‐‑world metaphors
(transfer)
18 User progressive disclosure
(context)
19 Promote visual clarity
(organize)
17. 20 Sustain the context of users’
tasks (continuity)
21 Maintain consistency within
and across products
(experience)
22 Keep interaction results the
consistent
same (expectations)
Make the user interface
23 Provide aesthetic appeal and
integrity (aaitude)
24 Encourage exploration
(predictable)
18. Keep the Avoid errors, Design clear
interface help to recover, exits and closed
simple!
offer Undo!
dialogs!
Speak the Include help
Minimize
user’s and
memory load!
language!
documentation!
Be consistent
Provide Offer shortcuts
and
feedback!
for experts!
predictable!
20. Business Audience
Document/
goals
Tasks
data types
Context:
Users:
Content:
Funding
Needs
Content
Politics
objects
Information
Culture
seeking Volume
Technology
behavior
Existing
Experience
structure
Resources
Constraints
21.
22. ⁄ What is IA?
1. IA is content architecture (Rosenfeld & Morville’s
Polar Bear style) — organization for easy
retrieval.
2. IA is interaction design (Cooper’s About Face)
— architecting for use.
3. IA is information design (Wurman'ʹs Information
Architects) — organizing for comprehension
AND UI design.
23.
24. The Nine Pillars
of Successful Web Teams
Jesse James Garrett <jjg@jjg.net>
project management
9 July 2003
The most successful Web teams build their team structures and their
processes on these nine essential competencies:
Project Management: The hub that binds all the tactical competencies
together as well as the engine that drives the project forward to completion,
project management requires a highly specialized set of skills all its own. concrete
Neglecting this area often results in missed deadlines and cost overruns.
d i
design
Concrete Design: Before the abstract design can become a fully realized
user experience, you must determine the specific details of interfaces,
navigation, information design, and visual design. This realm of concrete
design is essential to creating the final product.
tactical
Content Production: Knowing what content you need isn't enough. You also technology content
need to know how you'll produce it. Gathering raw information, writing and
editing, and defining editorial workflows and approvals are all part of content implementation production
production.
Technology Implementation: Building technical systems involves a lot of
hard work and specialized knowledge: languages and protocols, coding and
debugging, testing and refactoring. The more complex your site, the more
important a competency in technology implementation becomes. abstract
bstra
Abstract Design: Information architecture and interaction design translate
d
design
strategic objectives into a conceptual framework for the final user
experience. These emerging disciplines addressing abstract design are
increasingly recognized for their value in the Web development process.
strategic
Content Strategy: Content is often the reason users come to your site. But
what content can you offer to meet your users' expectations? How much technology content
content is appropriate, and what form should it take? What style or tone
should it have? Before you can produce that content, you need to answer
strategy strategy
fundamental content strategy questions such as these.
Technology Strategy: Web sites are technologically complex, and getting
more intricate all the time. Identifying the technology strategy for the site –
platforms, standards, technologies, and how they can all interoperate – is
essential to avoiding costly mistakes. site
Site Strategy: Defining your own goals for the site can be surprisingly
strategy
trateg
tricky. Arriving at a common understanding of the site's purpose for your
organization, how you'll prioritize the site's various goals, and the means by
which you'll measure the site's success are all matters of site strategy.
User Research: User-centered design means understanding what your
users need, how they think, and how they behave – and incorporating that
understanding into every aspect of your process. User research provides the
raw observations that fuel this insight into the people your site must serve.
user research
adaptive path http://www.jjg.net/ia/pillars/
http://www.adaptivepath.com/
25.
26. User Experience Design Process: Critical Path
Kickoff
Project Initiation Initial Design Cyc l e Design Iteration / Testing / Iteration / E a r l y R e f i n e m e n t Refinement / Copy / Final Visual Design / Robust Testing Production Build / Reviews / Design Team Sign Offs
Meeting
Project is Product Team meets - Product Team meets -
Product Marketing
Prod. Marketing does P&L, content evaluation, Product Team meets -
inititated by Product Design meeting with Hand off to
creates materials that describe needs, goals, Design presents functional
Marketing with Prod. Mktg. feeds team Product Team meets - Product Marketing, Product Team production,
objectives, dependencies, partnerships, user flow, potential user Product Team meets -
Program any results from Marke t Review Engineering, and Approval cycle here engineering and
business issues and any other relev a n t scenarios and high level Review revisions
Management Resear c h recommendations from Usability to review operations mode of
content or functionality issues, pulls together screens need e d testing recommendations the product cycle
cross-functional tea m Approval cycle h e r e
iteration cycle Detailed Product
Feasability Studies / Field testing - both for
Resear c h Expert advice on Functionality/
Usability
functionality and
What do Users w a n t previous research a n d feedback cyc l e Conceptual model
new research need e d testing with early specific content and
How do they want to do it Meeting visual design iteration cycle
(Usability Conceptual Phase) (Usability 2nd Phase) prototypes
coordinated by iteration cycle
Program iteration cycle
feedback cyc l e
Management
UE Team member
Create D e s i g n Design takes
assigned to
Spec/Creative Rapid prototype for User Ed develops recommended Design works w i t h
Experience Design
project
Brie f proof of concept user education plan changes and input Design team Usability to provide Design team Final functionality &
attends meeting UE Team
Material is from and early testing w/ from Team - brainstorms, iterates prototype and presents visual design signoff
Initial concept brainstorm with
MRP/PRD and Early functionality usability Design works w i t h including Product and collaborates on guidance of what Refine Visual wireframes a n d User Ed. delivers all - Production
brainstorms wit h Takes input from Usability - led by Revises user fl o w
brainstorming notes designs and User Education to Marketing, visual representation Visual Design Experience priorities of direction, copy, mockups to Help text and - Engineering
all members as project team and works
Product Marketing to and other definitions of Could be paper begin any Help and Engineering, Exp. of functionality and exploration, Design team discovery shoul d user instructions, production with full associate d - QA
UE Team member assigned related to UI member through greater
collect and gather requirements, distills pages needed for prototype, functional FAQs and other Design Team and screen design s copy writte n review Visual be - i.e. business help and UI set of style specs screenshots a n d - Partner (if applicable)
to project design detail of individual
requirements and info, looks at developed static HTML, Flash instructional text Usability Research Work can begin while and finetuned direction constraints, components as [font size & color, specs t o - Usability
what's the best scree n s
understand competitive functionality interaction, and all error user flow a n d technical necessary line spacing, Production - Creative Director
Receives Requirements scenario fo r
competitive landscape landscape, rev i e w s Mockups/ messages Revises user fl o w functionality is constraints, colors, images, - Product Marketing
Document use r s
scope in context of Wireframes as and works thro u g h iterating optional versions to links, etc] - VP (as necessary)
Needs:
network and sit e image maps greater detail of test
List of team
precedenc e individual screens
members,
contact info, initial
schedule,
approval process
Initial exposure to Production receives Production builds
(people)
scope of design and approved mockups site and features
functionality
HTML
and works w i t h working wi t h
Design on product Engineering as
Assess techn i c a l area as needed applicable
limitations and
alternatives
Discussion with engineering Engineering informs
Engineering
Engineering might about any potential new Design if there are
begin coding technology and its impact on changes, issues w i t h
work from initial schedule and desired user planned functionality
functionality tasks
spe c s
Credits: Erin Malone: Designed for AltaVista November 10, 2000
29. Ease of use remains vital
usable
Usability is necessary but
not sufficient
Web sites should be
accessible to people with
disabilities
accessible
Eventually, it will become
the law
30. Ask whether our products
and systems are useful
useful
Define innovative
solutions that are more
useful
Navigable web sites
Locatable objects
findable
31. Appreciation for the
power and value of image
desirable
Identity, brand, and other
elements of emotional
design
Design elements
influence whether users
trust and believe what we credible
tell them
32. Value to our sponsors
For non-‐‑profits: Advance the
mission
valuable
With for-‐‑profits: Contribute to
the boaom line and improve
customer satisfaction
33. PracticeUX Persona Diagram (Sample)
Educated in Industry Not Educated in Industry
How did we get here?
1 Marketing Director User has never worked with a like-client 3 1) Find the person in your client’s organization that has the
IT Director consultancy most knowledge of their clients and prospects (if that’s
who your site should speak to). In this case we spoke to
Exclusionary Focal the Sales Director.
2) Get as much information related to the kinds of
questions their clients and prospects ask. This will give
you first-hand insight into the client/prospect knowledge of
Familiar with Core Business
the industry and their knowledge of your clients work.
3) Create a Persona chart that defines the client/prospect
in terms of knowledge discussed above.
4) Discuss the chart with your client to see if you’ve
missed anything and ask your client to chose a focal vs.
exclusionary persona.
Might be a client Might be a client
CEO, CIO, Management, Director
Focal
Not Familiar with Core Business
Knowledge Factor
Exclusionary Focal Persona
2 Might be a client w/role in executive level 4 Where Persona should be
!"Copyright Olga Howard 2005-2006
34. User Needs Documentation
Personas
Usability
Strategy Documentation
Test Plans
Competitive
Usability Analyses
Design Documentation
Reports
Concept Site Maps
Models
User Flows
Content
Inventories
Wireframes
Screen
Designs
35. Design Diagrams
Personas
Concept
Design Deliverables
Models
Design
Site Maps
Briefs
Flowcharts
Competitive
Reviews
Wireframes
Usability
Plans
Usability
Reports
36. Call History - Compiled Task Analysis
Before Scene After Scene Future Scene
The spare bedroom (office) of Jenny’s two bedroom townhome in suburban Indianapolis. The spare bedroom (office) of Jenny’s two bedroom townhome in suburban Indianapolis. The spare bedroom (office) of Jenny’s two bedroom townhome in suburban I
Jenny comes home from a weekend away and wants to see if there have been any important phone calls or messages that she missed. She Jenny comes home from a weekend away and wants to see if there have been any important phone calls or messages that she missed. She Jenny comes home from a weekend away and wants to see if there have been
sees the voicemail indicator on her phone and begins the lengthy process of calling and listening to her voicemail. looks at her Comcast Message Center Dashboard she quickly sees that she has five new voicemails. Through the Comcast Message Center’s looks at her Comcast Message Center Dashboard she quickly sees that she has
dashboard, she is able to see that the third voicemail is from her mother and plays the message instantly. dashboard, she is able to see that the third voicemail is from her mother and p
presence indicator, Jenny can see that her mother may not be home, but has h
cell phone.
Jenny returns home from a Jenny checks to see if anyone Jenny checks to see if anyone Jenny listens to her Jenny checks for missed calls Jenny adds the caller to her Jenny reviews her list of calls Jenny returns her p
Sub Tasks weekend away. called while she was away. left a voicemail message. voicemail. she needs to return. address book. to return. calls.
Jenny returns home from a weekend Jenny walks into the office to check the Jenny checks the voicemail indicator and Jenny sees there are four new voicemail Jenny sees that her grandmother called, One of Jenny’s friends called from her Jenny has a list of calls to return. Each Jenny reviews the order of ca
Scenario away. She walks in the door, puts down caller id light on her phone to see if see’s the number six. She knows she had messages. The second new message is but didn’t leave a voicemail; she typically new mobile phone. Jenny wants to add item has the name, number, and a few needs to make and returns th
her bags and takes a look around. anyone called while she was away. saved some messages, but doesn’t know from her mother. She would like to listen doesn’t leave messages. the number to her address book. brief notes about the call. calls she can now, saving the
Everything appears to be right where she how many. to it first. later.
left it.
Can I be notified that I missed calls while Can I be notified quickly that someone Can I check quickly to see if I have any Can I listen to a specific message? Can I Can I check my missed calls quickly and Can I add the new number to my address Do I have enough time to return all these Do I have enough time to ret
Considerations/Influencers I was away? Is it quick? Is it easy? Do I important called while I was away? messages waiting? listen to the message quickly? Can I save conveniently? Can I quickly determine book quickly and easily? If an entry calls now? Which calls should I return calls now?
need any special equipment? How much or delete the message before it is which calls I need to return that don’t already exists, can I update it easily? Can first?
does it cost? completed playing? have voicemails? I sync the address book with my mobile?
Checking for missed calls and voicemail I have to go to my office to see if anyone How many of the messages are new? Listening to voicemail is time inconve- Checking for missed calls is inconvenient Keeping all my devices in sync is How do I know what each call is about? How do I keep track of which
Pain-Points is laborious and inconvenient. called. Checking from the road is even Which ones are important? Can I pick a nient and time consuming. Why can’t I and time consuming. Can the system difficult. How can I keep my mobile How will I know that I’ve returned a call, returned? Do I have to use so
more laborious and inconvenient. specific message to listen to? Which listen to a specific message without help me determine which calls need to be phone and email address books in sync? or marked it for “call back later?” else to return the calls?
messages need immediate attention? listening to the ones before it? Do I have returned?
time to listen to the messages now?
C 2.1 View call history status. C 3.1 View voicemail status. C 4.1 Access the voicemail system. C 5.1 View new missed call history. C 6.1 Add to address book (update in C 7.1 Review call back list. C 8.1 Return calls.
nd Functionality (1) The customer can view the status of (1) The customer can view the status of (1) The customer accesses the voicemail (1) The customer can view the new (1) address book). (1) The customer can review a call back (1) The customer can return
whether or not (s)he has any new whether or not (s)he has any new system to listen to new messages. missed calls history. The customer can add (update) a list, ordered by priority, and with within the message cent
m missed calls. voicemail. name and number in the address notes for each call.
asy book.
C 2.2 View new missed calls history. C 3.2 View new voicemail list. C4.2 Select a voicemail for playback. C 5.2 View call priority status. C 6.2 Sync address book. C 8.2 Mark call as returned.
(1) The customer can view the call (1) The customer can view a list of new (1) The customer reviews the list of (4) The customer can view the (4) The customer can sync the address (2) Once a call has been retu
history for new missed calls. voicemail messages with the name messages and related info and priority/importance of a call to help book across home phone, mobile message is automatically
(number) and date/time of each selects a message to play. them determine which calls need to phone, email, etc. returned.
voicemail. be returned.
C 2.3 View full missed call history. C 3.3 View full voicemail history. C 4.3 Play message. C 5.3 Delete.
(2) The customer can view the entire (2) The customer can view the entire (1) Upon selection, the message (1) The customer can delete missed
call history, including new and past voicemail history, including new and automatically begins playback. calls from the missed call history.
missed calls. past voicemails.
C 2.4 View full incoming call history. C 3.4 View similar or duplicate messages. C 4.4 Message notes.
(3) The customer can view the entire (4) The customer can view if anyone (4) The customer can place notes
incoming call history, including all who left a duplicate voicemail on and/or a description next to the
missed, answered, and forwarded multiple phones, or email for a voicemail - useful when returning or
calls. similar message. saving the call.
C 2.5 View similar or duplicate calls. C 4.5 Set message priority and/or
(4) The customer can view if anyone (4) reminder.
placed a duplicate call to more than The customer can set a priority
one phone. level, due date, and/or reminder for
the message. Over time, the system
learns and sets these automatically.
C 4.6 Save message.
(1) The message is automatically saved
if the customer doesn’t delete it.
C 4.7 Delete.
(1) The customer deletes the message.
They should be able to perform this
action at any time during the
message playback.
C 4.8 Rewind and fast forward.
(2) The customer can rewind and fast
forward through the message during
playback.
C 4.9 Forward message.
(4) The customer can forward the
message to another number or email
Glossary address.
Ratings (1) High - address as soon as possible
(2) Medium - address after priority 1
(3) Low - after priority 2 and if there is time in development cycle Compiled Task Analysis 1
(4) Future - consider for a future version of the product
37.
38.
39.
40. ⁄ “Information architecture does not exist as a
profession.
no such thing as an interaction designer
⁄ There'ʹs
either.
⁄ Anyone who claims to specialize in one or the other is a fool
or a liar.”
⁄ What remains?
41. ⁄ UX covers
all aspects of the end-‐‑user'ʹs interaction
1.
with the company, its services,
and its products.
2. In order to achieve high-‐‑quality user experience in a
company'ʹs offerings there must be a seamless
merging of the services of multiple
disciplines, including engineering,
marketing, graphical and industrial design, and
interface design.
43. ⁄ IAI, IxDA, NN/g
⁄ Special thanks to: Ben Shneiderman, Christina Wodtke,
Dan Brown, Don Norman, Erin Malone, George Olsen,
Jan Borchers, Jesse James Garrea, Jess McMullin, Olga
Howard, Peter Morville, Theo Mandel, Todd Warfel
⁄ As always: Wikipedia, Boxes and Arrows
⁄ Images: flickr.com/library_of_virginia/2898506631/,
/liewcf/894035077/, /nypl/3109284623/
⁄ To be continued ...
⁄ What‘s missing? Jef Raskin, more of Don Norman (visibility and affordances), Bill Moggridge,
Bill Buxton, CMN, Fias, Gestalt laws, mappings, constraints, storyboards, the usual suspects
(sitemap, persona, wireframe). What else?