IA Concepts

⁄  Information architecture 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.
⁄  What is IA?
1.  content architecture (Polar Bear style)
2.  interaction design (Cooper’s About Face)
3.  information design (Wurman's Information Architects)
 User Needs Strategy Design
Documentation Documentation Documentation
•  Personas •  Competitive •  Site Maps
•  Usability Test Analyses •  User Flows
Plans •  Concept •  Wireframes
•  Usability Models •  Screen
Reports •  Content Designs
Inventories
!PPROACHESTO5SER%XPERIENCE$ESIGN )MMERSION ORIENTED
#REATORS/BJECTIVES"USINESSCREATIVEOROTHERINTERNALLY DERIVEDGOALSFORTHESITE
SOFTWAREORPRODUCT
-ARCH 'EORGE/LSEN GEORGE INTERACTIONBYDESIGNCOM 5SER!UDIENCE.EEDS%XTERNALLY DERIVEDGOALSFORTHESITESOFTWAREORPRODUCT
IDENTIlEDTHROUGHUSERRESEARCHETHNOTECHNOPSYCHOGRAPHICSETC
4HISDIAGRAMBUILDSON*ESSE*AMES'ARRETTSEXCELLENTh4HE%LEMENTSOF5SER 'ARRETTS ORIGINAL MODEL ARE MINE AND FOR BETTER OR WORSE REmECT MY THINKING
%XPERIENCEvDIAGRAMHTTPWWWJJGNETIAANDHIShlVEPLANESvMODEL!S RATHERTHAN'ARRETTS #REATIVE"RIEF$ElNESTHEINTENDEDEXPERIENTIALANDOREMOTIONALASPECTSTOBE
'ARRETTPOINTSOUTTHE7EBISACONVERGENTMEDIUMANDITSMULTI DIMENSIONAL EVOKEDASWELLASPARTICULARMEDIUMSGENRESMETAPHORSIMAGERYETCTOBEUSED
NATUREHASLEDTOMUCHCONFUSION .OTE4HETERMShMISE EN SCENEvANDhCHOREOGRAPHYvAREAFORCE lTATTEMPT
TOlNDCOMMONALITYAMONGTHEVARIETYOFTERMSUSEDBYTHEMANYDISCIPLINES #HOREOGRAPHY/VERALLDESIGNANDSTRUCTURINGOFPLANNEDSENSORYELEMENTSGRAPHIC
(OWEVER WHILE 'ARRETTS MODEL SEES THE 7EB AS STRICTLY EITHER A SOFTWARE INVOLVEDININTERACTIVEMULTIMEDIATODESCRIBETHESECONSIDERATIONS AUDIOVIDEOANIMATIONTACTILEETC ANDENVIRONMENTSINTOAUNIlEDWHOLETHAT
INTERFACE OR A HYPERTEXT SYSTEM THIS MODEL ALSO ENCOMPASSES INTERACTIVE
SUPPORTSTHEINTENDEDEXPERIENTIALANDOREMOTIONALEFFECT
MULTIMEDIA ,IKEWISE THE hSURFACEv LAYER HAS BEEN EXPANDED BEYOND JUST 4HIS PICTURE IS INCOMPLETE !S WITH 'ARRETTS ORIGINAL MODEL THIS NEW
VISUALDESIGNANDSEEKSTOCLARIFYHOWVISUALANDSENSORYDESIGNVARIESAMONG MODEL IS NOT INTENDED TO COVER OTHER CONSIDERATIONS SUCH AS THOSE RELATED -ISE EN 3CENE!SINTHETHEATRICALSENSEOFhARRANGINGTHESCENEvˆDESIGNINGAND
EACHDIMENSION&INALLYTHISMODELSEEKSTOCOVERABROADRANGEOFTHINGSTHAT TOTECHNICALANDCONTENTDEVELOPMENTWHICHMAYINmUENCEDECISIONSDURING
HAVEDESIGNEDhUSEREXPERIENCESvSUCHASSOFTWAREVIDEOGAMESANDOTHER THE USER EXPERIENCE DEVELOPMENT ,IKEWISE IT RETAINS THE ORIGINAL MODELS
ARRANGINGSPECIlCELEMENTSTOEVOKEEXPRESSIVEQUALITIESSUCHASMOODSTYLEANDFEELING
INTERACTIVEPRODUCTS ASSUMPTION THAT CONTENT IS INFORMATION ORIENTED BECAUSE THATS WHAT USER )NFORMATION$ESIGN)NTHEBROAD4UFTEANSENSEDESIGNINGTHEPRESENTATIONOF
EXPERIENCEPROFESSIONALSNORMALLYDEALWITH/BVIOUSLYlCTIONISCONCERNEDWITH INFORMATIONTOFACILITATEUNDERSTANDING
!SWITH'ARRETTSORIGINALDIAGRAMTHEGOALOFTHISDOCUMENTISTODElNESOME USERAUDIENCEEXPERIENCEANDBOTHHYPERTEXTANDINTERACTIVEMULTIMEDIAHAVE
OFTHEKEYCONSIDERATIONSTHATGOINTOTHEDEVELOPMENTOFAUSEREXPERIENCE BEENUSEDFORSTORYTELLINGANDVIDEOGAMING%QUIVALENTSTEPSFORlCTIONCANBE 6ISUAL3ENSORY$ESIGN4HETREATMENTOFSENSORYCOMPONENTSGRAPHICSAUDIO
ANDTHERELATIONSHIPSAMONGTHESECONSIDERATIONS!NYCHANGESINPORTIONSOF INFERREDFROMTHISMODEL ANIMATIONVIDEOETC USEDTOSTIMULATETHESENSESANDOREMOTIONS

4YPIlEDBYINTERACTIVEMULTIMEDIA

4ASK ORIENTED #ONCEPTION )NFORMATION ORIENTED

#REATORS/BJECTIVES"USINESSCREATIVEOROTHERINTERNALLY DERIVEDGOALSFORTHESITE #REATORS/BJECTIVES"USINESSCREATIVEOROTHERINTERNALLY DERIVEDGOALSFORTHESITE
3TRATEGY

SOFTWAREORPRODUCT SOFTWAREORPRODUCT
5SER!UDIENCE.EEDS%XTERNALLY DERIVEDGOALSFORTHESITESOFTWAREORPRODUCT #REATORS/BJECTIVES 5SER!UDIENCE.EEDS%XTERNALLY DERIVEDGOALSFORTHESITESOFTWAREORPRODUCT
IDENTIlEDTHROUGHUSERRESEARCHETHNOTECHNOPSYCHOGRAPHICSETC IDENTIlEDTHROUGHUSERRESEARCHETHNOTECHNOPSYCHOGRAPHICSETC
5SER!UDIENCE.EEDS
&UNCTIONAL3PECIlCATIONS4HEDETAILEDDESCRIPTIONSOFFUNCTIONALITYFROMTHEFEATURE
3COPE #ONTENT2EQUIREMENTS$ElNINGTHECONTENTREQUIREDTOMEETTHEUSERAUDIENCE
SETTHATMUSTBEINCLUDEDINORDERTOMEETUSERNEEDSANDCREATORSOBJECTIVES #REATIVE"RIEF NEEDSANDTHECREATORgSOBJECTIVES
NTS
&U

IREME
NC
TIO

QU
NT2E
NA

3TRUCTURE
#ONTE
3PL
ECI

)NTERACTION$ESIGN$EVELOPMENTOFAPPLICATIONmOWSTOFACILITATEUSERTASKSDElNING )NFORMATION!RCHITECTURE!RRANGINGANDSTRUCTURINGTHECONTENTBEINGUSEDTO

lC

#HOREOGRAPHY
AT

HOWTHEUSERINTERACTSWITHFUNCTIONALITY FACILITATEINTUITIVEACCESSTOTHEM
URE
ION
)NT

HITECT
S
ERA

!RC
)NFO
CTI

)NTERFACE$ESIGN4RADITIONAL(#)HUMAN COMPUTERINTERFACE ˆDESIGNINGINTERFACE .AVIGATIONAL$ESIGN$ESIGNINGINTERFACEELEMENTSTOFACILITATETHEUSERSMOVEMENT

3KELETON
ON
$

ELEMENTSTOFACILITATEUSERINTERACTIONWITHFUNCTIONALITY AMONGTHECONTENTANDFUNCTIONALITY BEINGUSED

ES

-ISE EN 3CENE
IGN

)NFORMATION$ESIGN)NTHEBROAD4UFTEANSENSEDESIGNINGTHEPRESENTATIONOF )NFORMATION$ESIGN)NTHEBROAD4UFTEANSENSEDESIGNINGTHEPRESENTATIONOF

)NFORMATION N
$ESIG
)NT

INFORMATIONTOFACILITATEUNDERSTANDING INFORMATIONTOFACILITATEUNDERSTANDING
ONAL
ERF

$ESIGN T I
AC

3URFACE I G A
.AV
E$

6ISUAL3ENSORY$ESIGN5SINGTHEVISUALAPPEARANCETHEhLOOKvINhLOOK AND FEELv 6ISUAL3ENSORY$ESIGN4HEVISUALTREATMENTOFTEXTGRAPHICALPAGEELEMENTSAND

ES
IGN

OFSPECIlCINTERFACEELEMENTSTOAIDINTERACTION!LSOTHEUSAGEOFAUDIOMOTIONOR NAVIGATIONALCOMPONENTSUSEDTOAIDCOMPREHENSIONANDORIENTATION!LSOTHEUSAGE

TACTILECUESANDORFEEDBACKFORTHESAMEPURPOSE ANDTREATMENTOFANIMATEDAUDIOVIDEOORTACTILEELEMENTSFORTHESEPURPOSES
6ISUAL3ENSORY
4YPIlEDBYSOFTWAREAPPLICATIONS $ESIGN 4YPIlEDBYHYPERTEXTSYSTEMS

0ORTIONSDRAWNFROMTHEORIGINALh4HE%LEMENTSOF5SER%XPERIENCEvARE¥*ESSE*AMES'ARRETT
4HEREMAINDEROFTHEDIAGRAMIS¥'EORGE/LSEN #OMPLETION HTTPWWWINTERACTIONBYDESIGNCOMMODELS
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.
design
d i
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 design
d
strategic objectives into a conceptual framework for the final user
experience. These emerging disciplines addressing abstract design are
strategic
increasingly recognized for their value in the Web development process.

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/
 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 Indianapolis.

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
sees the voicemail indicator on her phone and begins the lengthy process of calling and listening to her voicemail.
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
looks at her Comcast Message Center Dashboard she quickly sees that she has five new voicemails. Through the Comcast Message Center’s
dashboard, she is able to see that the third voicemail is from her mother and plays the message instantly.
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
looks at her Comcast Message Center Dashboard she quickly sees that she has five new voicemails. Through the Comcast Message Center’s
dashboard, she is able to see that the third voicemail is from her mother and plays the message instantly. The Comcast Message Center’s
presence indicator, Jenny can see that her mother may not be home, but has her cell phone with her. Jenny calls her mother back on her
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 phone
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
Scenario away. She walks in the door, puts down
her bags and takes a look around.
Everything appears to be right where she
left it.
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 calls she
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 the phone
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 others for
how many. to it first. later.

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 return these
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
Pain-Points is laborious and inconvenient.
I have to go to my office to see if anyone
called. Checking from the road is even
more laborious and inconvenient.
How many of the messages are new?
Which ones are important? Can I pick a
specific message to listen to? Which
messages need immediate attention?
Listening to voicemail is time inconve-
nient and time consuming. Why can’t I
listen to a specific message without
listening to the ones before it? Do I have
time to listen to the messages now?
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 calls I’ve
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 something
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?
returned?

Checking voicemail is tedious and
time consuming. I want a system
that is quick, convenient, and easy
C 2.1 View call history status.
Functionality (1) The customer can view the status of
whether or not (s)he has any new
missed calls.
C 3.1 View voicemail status.
(1) The customer can view the status of
whether or not (s)he has any new
voicemail.
C 4.1 Access the voicemail system.
(1) The customer accesses the voicemail
system to listen to new messages.
C 5.1 View new missed call history.
(1) The customer can view the new
missed calls history.
C 6.1 Add to address book (update in
(1) address book).
The customer can add (update) a
name and number in the address
book.
C 7.1 Review call back list. C 8.1 Return calls.
(1) The customer can review a call back (1) The customer can return calls from
list, ordered by priority, and with within the message center.
notes for each call.

for once.
C 2.2 View new missed calls history.
(1) The customer can view the call
history for new missed calls.
C 3.2 View new voicemail list.
(1) The customer can view a list of new
voicemail messages with the name
(number) and date/time of each
voicemail.
C4.2 Select a voicemail for playback.
(1) The customer reviews the list of
messages and related info and
selects a message to play.
C 5.2 View call priority status.
(4) The customer can view the
priority/importance of a call to help
them determine which calls need to
be returned.
C 6.2 Sync address book. C 8.2 Mark call as returned.
(4) The customer can sync the address (2) Once a call has been returned, the
book across home phone, mobile message is automatically marked as
phone, email, etc. 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.
(3) The customer can view the entire
incoming call history, including all
missed, answered, and forwarded
calls.
C 3.4 View similar or duplicate messages.
(4) The customer can view if anyone
who left a duplicate voicemail on
multiple phones, or email for a
similar message.
C 4.4 Message notes.
(4) The customer can place notes
and/or a description next to the
voicemail - useful when returning or
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
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

 An Example LEGEND MILESTONE
DELIVERABLE IDEA REVIEW CHECKPOINT

Product / Software / Web Design Process Guide KEY MEETING INFORM

PHASES concept discover definition refinement development launch preparation post launch

conceptual
MILESTONES start concept
approval
proposal approval and scheduling design
review
PRD
approval
UI design
approval
committed
schedule
visual design
approval
beta launch

Communicate business needs Communicate business needs Brand Positioning Review Promotional & Marketing Needs Business development / partnering
& brand identity & brand identity

{
Mockups to marketing
Note: In some companies these roles are

business
owners
encompassed by one person

Collect team input Product Roadmap Promotion plan

Describe problem or needs, Develop strategic rationale, business case,
proposed solution, and benefits. financial analysis, policy considerations,
implementation plans. Point release plan

L
Research: Solicit input from Business owners/
product Gather information for and
brands - contact other associated stakeholders
(legal, customer support, international)
manager create the Concept Document Gather supporting market research, etc.

Write Draft PRD and Review

A
Gather information for and create the Deliverables:
ROLES

Proposal Document
Project kickoff Product Evangelize Post mortem
Requirements
Document
(PRD)

U
Review user feedback on previous product Refine design concepts Wireframes and navigation maps
UI's and analyze competitive products. (authored by a
Final product

{
ui/id/ia Develop navigation model and Product Manager) Product prototype, e.g. paper, HTML, director, or flash Begin writing functional spec specification Design fidelity checks and bug fixes UI maintenance
refine scenarios & handoff to
design Provide input for level of effort
UI Design Approval UI Revisions based on testing build team
or two people. i.e. ui may do user research or visual designers may do ia, etc.

N
and
Idea Deliverable: Deliverable: Deliverable:
Define personas, usage scenarios, user Proposal Templates
Concept goals, and perform task analysis I T E R AT I O N S I T E R AT I O N S
Document Document Concept Design Review
&
Develop usage scenarios this step Navigation
Concept

C
and/or design concepts and / or may be (authored by
Note: In some companies these roles are blended into one

optional Design UI / ID / IA Design)

Provide input for level of effort Visual design explorations Refined Visual design explorations Art direction Visual Design Approval Handoff to build team Visual maintenance
Materials
Leads brainstorming Concept
(authored by
visual Prototype

H
blended design
design team)

Provide input for level of effort UCD research cont'd. (i.e. paper prototyping, Competitive usability testing Prototype usability test Prototype testing Write/update test plans for final usability
participatory design, field studies, surveys, Usability test release product
etc. capture issues for next release
Define personas, usage scenarios, user
user goals, and perform task analysis. Focus Group, Field Studies,
research Survey Analysis, etc.

Execute visual design Build/publish

production Provide input for level of effort
Build HTML QA

credits Design based on earlier maps created by various UI design teams at America Online Incorporated. Revised and edited by Erin Malone, September 2003 for the AIfIA.
 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 Usability to provide Design team Final functionality &
UE Team Design team
attends meeting Material is from and early testing w/ from Team - prototype and presents visual design signoff
brainstorms, iterates
brainstorm with
Initial concept 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
(people) Initial exposure to Production receives Production builds
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

⁄  Content: Document/ data types, content objects, volume,
existing structure
⁄  Context: Business goals, funding, politics, culture,
technology, resources, and constraints
⁄  Users: Audience, tasks, needs, informations seeking
behavior, experience
⁄  Usable. Ease of use remains vital, and yet the interface-
centered methods and perspectives of human-computer
interaction do not address all dimensions of web design. In
short, usability is necessary but not sufficient.
⁄  Accessible. Just as our buildings have elevators and ramps,
our web sites should be accessible to people with disabilities
(more than 10% of the population). Today, it's good business
and the ethical thing to do. Eventually, it will become the
law.
⁄  Useful. As practitioners, we can't be content to paint within
the lines drawn by managers. We must have the courage and
creativity to ask whether our products and systems are
useful, and to apply our deep knowledge of craft and
medium to define innovative solutions that are more useful.
⁄  Credible. Thanks to the Web Credibility Project, we're
beginning to understand the design elements that influence
whether users trust and believe what we tell them.
⁄  Findable. We must strive to design navigable web sites and
locatable objects, so users can find what they need.
⁄  Desirable. Our quest for efficiency must be tempered by an
appreciation for the power and value of image, identity,
brand, and other elements of emotional design.
⁄  Valuable. Our sites must deliver value to our sponsors. For
non-profits, the user experience must advance the mission.
With for-profits, it must contribute to the bottom line and
improve customer satisfaction.
The Elements of the User's Experience » Trigger
Some circumstance triggers a need and a corresponding
expectation of satisfaction.
Trigger » Expectation
What does the user expect to do, how do they expect to

»
do it, what do they expect to get out of it in the end?
» Proximity
How close is the user to the necessary part of the
Expectation » system? Are they on the right webpage, near the instore

on
» Pr
kiosk, or next to the information desk at the airport?
» Awareness
Does the user notice the necessary part of the system -

ox
the link, the kiosk, or the information desk? Or are they
ti

The User's
l a

distracted by something else, like a spinning logo?

im
» Eva u

» Connection

ity
Does the user make the connection between their need
Experience Cycle and the neccessary part of the system? Do the system
cues match their expectation so that they can make this

»
The user experience is not one simple action - it connection and then act on it?
is an interconnected cycle of attempting to » Action
satisfy hopes, dreams, needs, and desires. This Can the user take action, or is there a mismatch with how
Awa
Respon

takes the shape of individuals comparing their they expected to act and the actual action required?
expectations to the outcomes generated by their » Response
interaction with a system. Managing expections The system provides a response to the user's action - is it
re

then becomes key to successfully providing a the expected response? Does it meet the need?
n

» Evaluation
e

satisfying "return on experience" that delights

se

ss

users and generates shared, sustainable value. The user compares the response with the expection.
Based on this comparison, the user will adjust their
»
»

expectations.
- If expectations are managed well, and are met
consistently, the user will continue the cycle until their
Ac io n initial need is satisfied.
tio n » ect
- If expectations are not met, the user will stop using the

Co n n
system and try other channels or abandon the goal for
the time being.

The Experience Cycle model © 2003-2004 Jess McMullin. All rights reserved.
The Experience Cycle model synthesizes work from three sources: » Don Norman's work with mapping and subsequent cognitive walkthrough methods. » The AIDA model from marketing literature - Awareness, Interest, Desire, Action.
» The notion of cyclical adjustment of expectation reflects the game theory notion of repeated expected utility. This has been explored in the interactive domain with work done at PARC on information foraging.
Credits
⁄  IAI
⁄  Christina Wodtke
⁄  Dan Brown
⁄  Jesse James Garrett
⁄  George Olsen
⁄  Todd Warfel
⁄  Olga Howard
⁄  Erin Malone
⁄  Peter Morville
⁄  Jess McMullin
⁄  Images: www.flickr.com/photos/donsolo/3029452838/,
www.flickr.com/photos/liewcf/894035077/,
www.flickr.com/photos/jurek_durczak/1350758343/
Read More
⁄  Harald Felgner
⁄  A spectrum of projects, from international marketing to IT.
⁄  ux.felgner.ch