Information Architecture 3: Concepts
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Information Architecture 3: Concepts as PDF for free.
More details
- Words: 4,517
- Pages: 22
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 Documentation
Strategy Documentation
Design Documentation
• Personas • Usability Test Plans • Usability Reports
• Competitive Analyses • Concept Models • Content Inventories
• Site Maps • User Flows • Wireframes • Screen Designs
!PPROACHES TO 5SER %XPERIENCE $ESIGN -ARCH 'EORGE /LSEN
GEORGE INTERACTIONBYDESIGNCOM
4HIS DIAGRAM BUILDS ON *ESSE *AMES 'ARRETTS EXCELLENT h4HE %LEMENTS OF 5SER %XPERIENCEv DIAGRAM HTTPWWWJJGNETIA AND HIS hl VE PLANESv MODEL !S 'ARRETT POINTS OUT THE 7EB IS A CONVERGENT MEDIUM AND ITS MULTI DIMENSIONAL NATURE HAS LED TO MUCH CONFUSION (OWEVER WHILE 'ARRETTS MODEL SEES THE 7EB AS STRICTLY EITHER A SOFTWARE INTERFACE OR A HYPERTEXT SYSTEM THIS MODEL ALSO ENCOMPASSES INTERACTIVE MULTIMEDIA ,IKEWISE THE hSURFACEv LAYER HAS BEEN EXPANDED BEYOND JUST VISUAL DESIGN AND SEEKS TO CLARIFY HOW VISUAL AND SENSORY DESIGN VARIES AMONG EACH DIMENSION &INALLY THIS MODEL SEEKS TO COVER A BROAD RANGE OF THINGS THAT HAVE DESIGNED hUSER EXPERIENCES v SUCH AS SOFTWARE VIDEO GAMES AND OTHER INTERACTIVE PRODUCTS !S WITH 'ARRETTS ORIGINAL DIAGRAM THE GOAL OF THIS DOCUMENT IS TO DEl NE SOME OF THE KEY CONSIDERATIONS THAT GO INTO THE DEVELOPMENT OF A USER EXPERIENCE AND THE RELATIONSHIPS AMONG THESE CONSIDERATIONS !NY CHANGES IN PORTIONS OF
'ARRETTS ORIGINAL MODEL ARE MINE AND FOR BETTER OR WORSE REm ECT MY THINKING RATHER THAN 'ARRETTS .OTE 4HE TERMS hMISE EN SCENEv AND hCHOREOGRAPHYv ARE A FORCE l T ATTEMPT TO l ND COMMONALITY AMONG THE VARIETY OF TERMS USED BY THE MANY DISCIPLINES INVOLVED IN INTERACTIVE MULTIMEDIA TO DESCRIBE THESE CONSIDERATIONS 4HIS PICTURE IS INCOMPLETE !S WITH 'ARRETTS ORIGINAL MODEL THIS NEW MODEL IS NOT INTENDED TO COVER OTHER CONSIDERATIONS SUCH AS THOSE RELATED TO TECHNICAL AND CONTENT DEVELOPMENT WHICH MAY INm UENCE DECISIONS DURING THE USER EXPERIENCE DEVELOPMENT ,IKEWISE IT RETAINS THE ORIGINAL MODELS ASSUMPTION THAT CONTENT IS INFORMATION ORIENTED BECAUSE THATS WHAT USER EXPERIENCE PROFESSIONALS NORMALLY DEAL WITH /BVIOUSLY l CTION IS CONCERNED WITH USERAUDIENCE EXPERIENCE AND BOTH HYPERTEXT AND INTERACTIVE MULTIMEDIA HAVE BEEN USED FOR STORYTELLING AND VIDEO GAMING %QUIVALENT STEPS FOR l CTION CAN BE INFERRED FROM THIS MODEL
)MMERSION ORIENTED
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC #REATIVE "RIEF $El NES THE INTENDED EXPERIENTIAL ANDOR EMOTIONAL ASPECTS TO BE EVOKED AS WELL AS PARTICULAR MEDIUMS GENRES METAPHORS IMAGERY ETC TO BE USED #HOREOGRAPHY /VERALL DESIGN AND STRUCTURING OF PLANNED SENSORY ELEMENTS GRAPHIC AUDIO VIDEO ANIMATION TACTILE ETC AND ENVIRONMENTS INTO A UNIl ED WHOLE THAT SUPPORTS THE INTENDED EXPERIENTIAL ANDOR EMOTIONAL EFFECT -ISE EN 3CENE !S IN THE THEATRICAL SENSE OF hARRANGING THE SCENEvDESIGNING AND ARRANGING SPECIl C ELEMENTS TO EVOKE EXPRESSIVE QUALITIES SUCH AS MOOD STYLE AND FEELING )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING 6ISUAL3ENSORY $ESIGN 4HE TREATMENT OF SENSORY COMPONENTS GRAPHICS AUDIO ANIMATION VIDEO ETC USED TO STIMULATE THE SENSES ANDOR EMOTIONS
4YPIl ED BY INTERACTIVE MULTIMEDIA
4ASK ORIENTED
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC
3COPE
#REATIVE "RIEF
L NA TIO NC AT l C ECI 3P
3TRUCTURE
S ION
)NT
)NTERACTION $ESIGN $EVELOPMENT OF APPLICATION m OWS TO FACILITATE USER TASKS DEl NING HOW THE USER INTERACTS WITH FUNCTIONALITY
ERA $ ES IGN ERF E $ ES
3URFACE
AC IGN
0ORTIONS DRAWN FROM THE ORIGINAL h4HE %LEMENTS OF 5SER %XPERIENCEv ARE ¥ *ESSE *AMES 'ARRETT 4HE REMAINDER OF THE DIAGRAM IS ¥ 'EORGE /LSEN
ON
4YPIl ED BY SOFTWARE APPLICATIONS
)NT
6ISUAL3ENSORY $ESIGN 5SING THE VISUAL APPEARANCE THE hLOOKv IN hLOOK AND FEELv OF SPECIl C INTERFACE ELEMENTS TO AID INTERACTION !LSO THE USAGE OF AUDIO MOTION OR TACTILE CUES ANDOR FEEDBACK FOR THE SAME PURPOSE
3KELETON
CTI
)NTERFACE $ESIGN 4RADITIONAL (#) HUMAN COMPUTER INTERFACE DESIGNING INTERFACE ELEMENTS TO FACILITATE USER INTERACTION WITH FUNCTIONALITY )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC
#REATORS /BJECTIVES 5SER!UDIENCE .EEDS &U
&UNCTIONAL 3PECIl CATIONS 4HE DETAILED DESCRIPTIONS OF FUNCTIONALITY FROM THE FEATURE SET THAT MUST BE INCLUDED IN ORDER TO MEET USER NEEDS AND CREATORS OBJECTIVES
)NFORMATION ORIENTED
#ONCEPTION
3TRATEGY
#ONTE #HOREOGRAPHY
NT 2E
QU
NTS IREME
URE HITECT
!RC )NFO -ISE EN 3CENE N )NFORMATION $ESIG $ESIGN ONAL I T A G I .AV
6ISUAL3ENSORY $ESIGN #OMPLETION
#ONTENT 2EQUIREMENTS $El NING THE CONTENT REQUIRED TO MEET THE USERAUDIENCE NEEDS AND THE CREATORgS OBJECTIVES )NFORMATION !RCHITECTURE !RRANGING AND STRUCTURING THE CONTENT BEING USED TO FACILITATE INTUITIVE ACCESS TO THEM .AVIGATIONAL $ESIGN $ESIGNING INTERFACE ELEMENTS TO FACILITATE THE USERS MOVEMENT AMONG THE CONTENT AND FUNCTIONALITY BEING USED )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING 6ISUAL3ENSORY $ESIGN 4HE VISUAL TREATMENT OF TEXT GRAPHICAL PAGE ELEMENTS AND NAVIGATIONAL COMPONENTS USED TO AID COMPREHENSION AND ORIENTATION !LSO THE USAGE AND TREATMENT OF ANIMATED AUDIO VIDEO OR TACTILE ELEMENTS FOR THESE PURPOSES
4YPIl ED BY HYPERTEXT SYSTEMS HTTPWWWINTERACTIONBYDESIGNCOMMODELS
The Nine Pillars
of Successful Web Teams
project management
Jesse James Garrett <[email protected]> 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. Neglecting this area often results in missed deadlines and cost overruns. 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.
technology implementation
Content Production: Knowing what content you need isn't enough. You also 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 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.
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 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 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 Strategy: Defining your own goals for the site can be surprisingly 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.
adaptive path
http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/
strategic
Abstract Design: Information architecture and interaction design translate 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.
content production
abstract bstra design d
technology strategy
content strategy
site strategy trateg
user research
tactical
concrete design d i
Call History - Compiled Task Analysis
Checking voicemail is tedious and time consuming. I want a system that is quick, convenient, and easy for once.
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 reviews her list of calls to return.
Jenny returns her phone calls.
Sub Tasks
Jenny returns home from a weekend away.
Jenny checks to see if anyone called while she was away.
Jenny checks to see if anyone left a voicemail message.
Jenny listens to her voicemail.
Jenny checks for missed calls she needs to return.
Scenario
Jenny returns home from a weekend 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 caller id light on her phone to see if anyone called while she was away.
Jenny checks the voicemail indicator and see’s the number six. She knows she had saved some messages, but doesn’t know how many.
Jenny sees there are four new voicemail messages. The second new message is from her mother. She would like to listen to it first.
Jenny sees that her grandmother called, but didn’t leave a voicemail; she typically doesn’t leave messages.
One of Jenny’s friends called from her new mobile phone. Jenny wants to add the number to her address book.
Jenny has a list of calls to return. Each item has the name, number, and a few brief notes about the call.
Jenny reviews the order of calls she needs to make and returns the phone calls she can now, saving the others for later.
Considerations/Influencers
Can I be notified that I missed calls while I was away? Is it quick? Is it easy? Do I need any special equipment? How much does it cost?
Can I be notified quickly that someone important called while I was away?
Can I check quickly to see if I have any messages waiting?
Can I listen to a specific message? Can I listen to the message quickly? Can I save or delete the message before it is completed playing?
Can I check my missed calls quickly and conveniently? Can I quickly determine which calls I need to return that don’t have voicemails?
Can I add the new number to my address book quickly and easily? If an entry already exists, can I update it easily? Can I sync the address book with my mobile?
Do I have enough time to return all these calls now? Which calls should I return first?
Do I have enough time to return these calls now?
Pain-Points
Checking for missed calls and voicemail 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 inconvenient 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 and time consuming. Can the system help me determine which calls need to be returned?
Keeping all my devices in sync is difficult. How can I keep my mobile phone and email address books in sync?
How do I know what each call is about? How will I know that I’ve returned a call, or marked it for “call back later?”
How do I keep track of which calls I’ve returned? Do I have to use something else to return the calls?
C 2.1 View call history status. (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 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. (4) The customer can sync the address book across home phone, mobile phone, email, etc.
C 2.3 View full missed call history. (2) The customer can view the entire call history, including new and past missed calls.
C 3.3 View full voicemail history. (2) The customer can view the entire voicemail history, including new and past voicemails.
C 4.3 Play message. (1) Upon selection, the message automatically begins playback.
C 5.3 Delete. (1) The customer can delete missed calls from the missed call history.
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.
Functionality
C 2.5 View similar or duplicate calls. (4) The customer can view if anyone placed a duplicate call to more than one phone.
Jenny adds the caller to her address book.
C 7.1 Review call back list. (1) The customer can review a call back list, ordered by priority, and with notes for each call.
C 8.2 Mark call as returned. (2) Once a call has been returned, the message is automatically marked as returned.
C 4.5 Set message priority and/or (4) reminder. The customer can set a priority 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 address.
Glossary 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
(4)
Future - consider for a future version of the product
C 8.1 Return calls. (1) The customer can return calls from within the message center.
Compiled Task Analysis
1
PracticeUX Persona Diagram (Sample)
1
Educated in Industry
Not Educated in Industry
Marketing Director IT Director
User has never worked with a like-client consultancy
Exclusionary
3
Focal
How did we get here? 1) Find the person in your client’s organization that has the most knowledge of their clients and prospects (if that’s who your site should speak to). In this case we spoke to the Sales Director.
Familiar with Core Business
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 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
Not Familiar with Core Business
Focal
Knowledge Factor
Exclusionary 2
Might be a client w/role in executive level
!"Copyright Olga Howard 2005-2006
Focal Persona
4
Where Persona should be
An Example Product / Software / Web Design Process Guide PHASES MILESTONES
discover
definition
concept approval
start
Communicate business needs & brand identity
{
IDEA
KEY MEETING
INFORM
REVIEW CHECKPOINT
refinement
proposal approval and scheduling
Communicate business needs & brand identity
DELIVERABLE MILESTONE
conceptual design review
Brand Positioning
development
PRD approval
UI design approval
Review Promotional & Marketing Needs
launch preparation
committed schedule
visual design approval
post launch
beta
launch
Business development / partnering
Note: In some companies these roles are encompassed by one person
Mockups to marketing
business owners
Describe problem or needs, proposed solution, and benefits.
ROLES
product manager
{
Note: In some companies these roles are blended into one or two people. i.e. ui may do user research or visual designers may do ia, etc.
concept
LEGEND
Collect team input
Develop strategic rationale, business case, financial analysis, policy considerations, implementation plans.
Gather information for and create the Concept Document
Gather supporting market research, etc.
Concept Document Develop usage scenarios and/or design concepts
and / or
Leads brainstorming
Proposal Document this step may be optional
Product Requirements Document (PRD) (authored by a
Evangelize
Wireframes and navigation maps
Product Manager)
UI Design Approval I T E R AT I O N S
Concept Design Review
Visual design explorations
Begin writing functional spec
Product prototype, e.g. paper, HTML, director, or flash
and
Concept Prototype
Concept Design Materials
Refined Visual design explorations
UI Revisions based on testing
Final product specification & handoff to build team
Design fidelity checks and bug fixes
Deliverable:
Templates & Navigation (authored by UI / ID / IA Design)
I T E R AT I O N S
Art direction
Visual Design Approval
Handoff to build team
(authored by blended design team)
Provide input for level of effort
user research
Develop navigation model and refine scenarios
Deliverable: Define personas, usage scenarios, user goals, and perform task analysis
Provide input for level of effort
visual design
Refine design concepts
Provide input for level of effort
Deliverable:
UCD research cont'd. (i.e. paper prototyping, participatory design, field studies, surveys, etc.
Competitive usability testing
Prototype usability test
Prototype testing
credits
Provide input for level of effort
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.
Post mortem
UI maintenance
Visual maintenance
Write/update test plans for final usability Usability test release product capture issues for next release
Define personas, usage scenarios, user goals, and perform task analysis.
Focus Group, Field Studies, Survey Analysis, etc.
Execute visual design
production
L A U N C H
Deliverables: Project kickoff
Review user feedback on previous product UI's and analyze competitive products.
Idea
Promotion plan Point release plan
Write Draft PRD and Review
Gather information for and create the Proposal Document
ui/id/ia design
Product Roadmap
Research: Solicit input from Business owners/ brands - contact other associated stakeholders (legal, customer support, international)
Build HTML
Build/publish QA
User Experience Design Process: Critical Path Kickoff Meeting
Product Marketing
Project Initiation Project is inititated by Product Marketing with Program Management
Prod. Marketing does P&L, content evaluation, creates materials that describe needs, goals, objectives, dependencies, partnerships, business issues and any other relev a n t content or functionality issues, pulls together cross-functional tea m
Initial Design Cyc l e
Design Iteration / Testing / Iteration / E a r l y R e f i n e m e n t
Product Team meets Design presents functional user flow, potential user scenarios and high level screens need e d Approval cycle h e r e
Prod. Mktg. feeds team any results from Marke t Resear c h
Refinement / Copy / Final Visual Design / Robust Testing
Product Team meets Review recommendations from testing
Product Team meets Review revisions
iteration cycle
Meeting coordinated by Program Management UE Team member assigned to project attends meeting
Initial concept brainstorms wit h Product Marketing to collect and gather requirements and understand competitive landscape
UE Team member assigned to project
Engineering
HTML
Experience Design
Usability
Feasability Studies / Field Resear c h What do Users w a n t How do they want to do it (Usability Conceptual Phase)
Credits: Erin Malone: Designed for AltaVista November 10, 2000
Takes input from all members as related to UI design Receives Requirements Document Needs: List of team members, contact info, initial schedule, approval process (people)
Expert advice on previous research a n d new research need e d (Usability 2nd Phase)
Functionality/ Conceptual model testing with early prototypes
feedback cyc l e
Production Build / Reviews / Design Team Sign Offs Product Team meets Design meeting with Product Marketing, Engineering, and Usability to review recommendations
iteration cycle
UE Team brainstorm with Usability - led by project team member what's the best scenario fo r use r s
Early functionality designs and definitions of pages needed for developed functionality
Rapid prototype for proof of concept and early testing w/ usability Could be paper prototype, functional static HTML, Flash interaction, Mockups/ Wireframes as image maps
User Ed develops user education plan Design works w i t h User Education to begin any Help and FAQs and other instructional text and all error messages
Design takes recommended changes and input from Team including Product Marketing, Engineering, Exp. Design Team and Usability Research Revises user fl o w and works thro u g h greater detail of individual screens
Revises user fl o w and works through greater detail of individual scree n s
iteration cycle
Design team brainstorms, iterates and collaborates on visual representation of functionality and screen design s Work can begin while user flow a n d functionality is iterating
Visual Design exploration, copy writte n and finetuned
Experience Design team review Visual direction
Design works w i t h Usability to provide prototype and guidance of what priorities of discovery shoul d be - i.e. business constraints, technical constraints, optional versions to test
Refine Visual direction, copy, user instructions, help and UI components as necessary
Initial exposure to scope of design and functionality
Design team presents wireframes a n d mockups to production with full set of style specs [font size & color, line spacing, colors, images, links, etc]
Discussion with engineering about any potential new technology and its impact on schedule and desired user tasks
Engineering informs Design if there are changes, issues w i t h planned functionality
Final functionality & visual design signoff - Production - Engineering - QA - Partner (if applicable) - Usability - Creative Director - Product Marketing - VP (as necessary)
User Ed. delivers all Help text and associate d screenshots a n d specs t o Production
Production receives approved mockups and works w i t h Design on product area as needed
Assess techn i c a l limitations and alternatives
Engineering might begin coding work from initial functionality spe c s
Product Team meets Hand off to production, engineering and operations mode of the product cycle
Detailed Product testing - both for functionality and specific content and visual design iteration cycle
feedback cyc l e
Create D e s i g n Spec/Creative Brie f Material is from MRP/PRD and brainstorming notes and other requirements, distills info, looks at competitive landscape, rev i e w s scope in context of network and sit e precedenc e
Product Team Approval cycle here
Production builds site and features working wi t h Engineering as applicable
⁄ 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
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?
l a ti
Expectation
»
How close is the user to the necessary part of the system? Are they on the right webpage, near the instore kiosk, or next to the information desk at the airport?
Pr
» Awareness
The User's Experience Cycle
»
»
se
tio n
»
Ac
Awa r e n e ss
Respon
The user experience is not one simple action - it is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires. This takes the shape of individuals comparing their expectations to the outcomes generated by their interaction with a system. Managing expections then becomes key to successfully providing a satisfying "return on experience" that delights users and generates shared, sustainable value.
»
» Eva u
» Proximity
ity im ox
»
Some circumstance triggers a need and a corresponding expectation of satisfaction.
» Expectation
»
on
» Trigger
Co n n
io ect
n
Does the user notice the necessary part of the system the link, the kiosk, or the information desk? Or are they distracted by something else, like a spinning logo?
» Connection Does the user make the connection between their need and the neccessary part of the system? Do the system cues match their expectation so that they can make this connection and then act on it?
» Action Can the user take action, or is there a mismatch with how they expected to act and the actual action required?
» Response The system provides a response to the user's action - is it the expected response? Does it meet the need?
» Evaluation 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 initial need is satisfied. - If expectations are not met, the user will stop using the 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
⁄ 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 Documentation
Strategy Documentation
Design Documentation
• Personas • Usability Test Plans • Usability Reports
• Competitive Analyses • Concept Models • Content Inventories
• Site Maps • User Flows • Wireframes • Screen Designs
!PPROACHES TO 5SER %XPERIENCE $ESIGN -ARCH 'EORGE /LSEN
GEORGE INTERACTIONBYDESIGNCOM
4HIS DIAGRAM BUILDS ON *ESSE *AMES 'ARRETTS EXCELLENT h4HE %LEMENTS OF 5SER %XPERIENCEv DIAGRAM HTTPWWWJJGNETIA AND HIS hl VE PLANESv MODEL !S 'ARRETT POINTS OUT THE 7EB IS A CONVERGENT MEDIUM AND ITS MULTI DIMENSIONAL NATURE HAS LED TO MUCH CONFUSION (OWEVER WHILE 'ARRETTS MODEL SEES THE 7EB AS STRICTLY EITHER A SOFTWARE INTERFACE OR A HYPERTEXT SYSTEM THIS MODEL ALSO ENCOMPASSES INTERACTIVE MULTIMEDIA ,IKEWISE THE hSURFACEv LAYER HAS BEEN EXPANDED BEYOND JUST VISUAL DESIGN AND SEEKS TO CLARIFY HOW VISUAL AND SENSORY DESIGN VARIES AMONG EACH DIMENSION &INALLY THIS MODEL SEEKS TO COVER A BROAD RANGE OF THINGS THAT HAVE DESIGNED hUSER EXPERIENCES v SUCH AS SOFTWARE VIDEO GAMES AND OTHER INTERACTIVE PRODUCTS !S WITH 'ARRETTS ORIGINAL DIAGRAM THE GOAL OF THIS DOCUMENT IS TO DEl NE SOME OF THE KEY CONSIDERATIONS THAT GO INTO THE DEVELOPMENT OF A USER EXPERIENCE AND THE RELATIONSHIPS AMONG THESE CONSIDERATIONS !NY CHANGES IN PORTIONS OF
'ARRETTS ORIGINAL MODEL ARE MINE AND FOR BETTER OR WORSE REm ECT MY THINKING RATHER THAN 'ARRETTS .OTE 4HE TERMS hMISE EN SCENEv AND hCHOREOGRAPHYv ARE A FORCE l T ATTEMPT TO l ND COMMONALITY AMONG THE VARIETY OF TERMS USED BY THE MANY DISCIPLINES INVOLVED IN INTERACTIVE MULTIMEDIA TO DESCRIBE THESE CONSIDERATIONS 4HIS PICTURE IS INCOMPLETE !S WITH 'ARRETTS ORIGINAL MODEL THIS NEW MODEL IS NOT INTENDED TO COVER OTHER CONSIDERATIONS SUCH AS THOSE RELATED TO TECHNICAL AND CONTENT DEVELOPMENT WHICH MAY INm UENCE DECISIONS DURING THE USER EXPERIENCE DEVELOPMENT ,IKEWISE IT RETAINS THE ORIGINAL MODELS ASSUMPTION THAT CONTENT IS INFORMATION ORIENTED BECAUSE THATS WHAT USER EXPERIENCE PROFESSIONALS NORMALLY DEAL WITH /BVIOUSLY l CTION IS CONCERNED WITH USERAUDIENCE EXPERIENCE AND BOTH HYPERTEXT AND INTERACTIVE MULTIMEDIA HAVE BEEN USED FOR STORYTELLING AND VIDEO GAMING %QUIVALENT STEPS FOR l CTION CAN BE INFERRED FROM THIS MODEL
)MMERSION ORIENTED
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC #REATIVE "RIEF $El NES THE INTENDED EXPERIENTIAL ANDOR EMOTIONAL ASPECTS TO BE EVOKED AS WELL AS PARTICULAR MEDIUMS GENRES METAPHORS IMAGERY ETC TO BE USED #HOREOGRAPHY /VERALL DESIGN AND STRUCTURING OF PLANNED SENSORY ELEMENTS GRAPHIC AUDIO VIDEO ANIMATION TACTILE ETC AND ENVIRONMENTS INTO A UNIl ED WHOLE THAT SUPPORTS THE INTENDED EXPERIENTIAL ANDOR EMOTIONAL EFFECT -ISE EN 3CENE !S IN THE THEATRICAL SENSE OF hARRANGING THE SCENEvDESIGNING AND ARRANGING SPECIl C ELEMENTS TO EVOKE EXPRESSIVE QUALITIES SUCH AS MOOD STYLE AND FEELING )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING 6ISUAL3ENSORY $ESIGN 4HE TREATMENT OF SENSORY COMPONENTS GRAPHICS AUDIO ANIMATION VIDEO ETC USED TO STIMULATE THE SENSES ANDOR EMOTIONS
4YPIl ED BY INTERACTIVE MULTIMEDIA
4ASK ORIENTED
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC
3COPE
#REATIVE "RIEF
L NA TIO NC AT l C ECI 3P
3TRUCTURE
S ION
)NT
)NTERACTION $ESIGN $EVELOPMENT OF APPLICATION m OWS TO FACILITATE USER TASKS DEl NING HOW THE USER INTERACTS WITH FUNCTIONALITY
ERA $ ES IGN ERF E $ ES
3URFACE
AC IGN
0ORTIONS DRAWN FROM THE ORIGINAL h4HE %LEMENTS OF 5SER %XPERIENCEv ARE ¥ *ESSE *AMES 'ARRETT 4HE REMAINDER OF THE DIAGRAM IS ¥ 'EORGE /LSEN
ON
4YPIl ED BY SOFTWARE APPLICATIONS
)NT
6ISUAL3ENSORY $ESIGN 5SING THE VISUAL APPEARANCE THE hLOOKv IN hLOOK AND FEELv OF SPECIl C INTERFACE ELEMENTS TO AID INTERACTION !LSO THE USAGE OF AUDIO MOTION OR TACTILE CUES ANDOR FEEDBACK FOR THE SAME PURPOSE
3KELETON
CTI
)NTERFACE $ESIGN 4RADITIONAL (#) HUMAN COMPUTER INTERFACE DESIGNING INTERFACE ELEMENTS TO FACILITATE USER INTERACTION WITH FUNCTIONALITY )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING
#REATORS /BJECTIVES "USINESS CREATIVE OR OTHER INTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT 5SER!UDIENCE .EEDS %XTERNALLY DERIVED GOALS FOR THE SITE SOFTWARE OR PRODUCT IDENTIl ED THROUGH USER RESEARCH ETHNOTECHNOPSYCHOGRAPHICS ETC
#REATORS /BJECTIVES 5SER!UDIENCE .EEDS &U
&UNCTIONAL 3PECIl CATIONS 4HE DETAILED DESCRIPTIONS OF FUNCTIONALITY FROM THE FEATURE SET THAT MUST BE INCLUDED IN ORDER TO MEET USER NEEDS AND CREATORS OBJECTIVES
)NFORMATION ORIENTED
#ONCEPTION
3TRATEGY
#ONTE #HOREOGRAPHY
NT 2E
QU
NTS IREME
URE HITECT
!RC )NFO -ISE EN 3CENE N )NFORMATION $ESIG $ESIGN ONAL I T A G I .AV
6ISUAL3ENSORY $ESIGN #OMPLETION
#ONTENT 2EQUIREMENTS $El NING THE CONTENT REQUIRED TO MEET THE USERAUDIENCE NEEDS AND THE CREATORgS OBJECTIVES )NFORMATION !RCHITECTURE !RRANGING AND STRUCTURING THE CONTENT BEING USED TO FACILITATE INTUITIVE ACCESS TO THEM .AVIGATIONAL $ESIGN $ESIGNING INTERFACE ELEMENTS TO FACILITATE THE USERS MOVEMENT AMONG THE CONTENT AND FUNCTIONALITY BEING USED )NFORMATION $ESIGN )N THE BROAD 4UFTEAN SENSE DESIGNING THE PRESENTATION OF INFORMATION TO FACILITATE UNDERSTANDING 6ISUAL3ENSORY $ESIGN 4HE VISUAL TREATMENT OF TEXT GRAPHICAL PAGE ELEMENTS AND NAVIGATIONAL COMPONENTS USED TO AID COMPREHENSION AND ORIENTATION !LSO THE USAGE AND TREATMENT OF ANIMATED AUDIO VIDEO OR TACTILE ELEMENTS FOR THESE PURPOSES
4YPIl ED BY HYPERTEXT SYSTEMS HTTPWWWINTERACTIONBYDESIGNCOMMODELS
The Nine Pillars
of Successful Web Teams
project management
Jesse James Garrett <[email protected]> 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. Neglecting this area often results in missed deadlines and cost overruns. 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.
technology implementation
Content Production: Knowing what content you need isn't enough. You also 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 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.
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 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 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 Strategy: Defining your own goals for the site can be surprisingly 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.
adaptive path
http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/
strategic
Abstract Design: Information architecture and interaction design translate 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.
content production
abstract bstra design d
technology strategy
content strategy
site strategy trateg
user research
tactical
concrete design d i
Call History - Compiled Task Analysis
Checking voicemail is tedious and time consuming. I want a system that is quick, convenient, and easy for once.
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 reviews her list of calls to return.
Jenny returns her phone calls.
Sub Tasks
Jenny returns home from a weekend away.
Jenny checks to see if anyone called while she was away.
Jenny checks to see if anyone left a voicemail message.
Jenny listens to her voicemail.
Jenny checks for missed calls she needs to return.
Scenario
Jenny returns home from a weekend 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 caller id light on her phone to see if anyone called while she was away.
Jenny checks the voicemail indicator and see’s the number six. She knows she had saved some messages, but doesn’t know how many.
Jenny sees there are four new voicemail messages. The second new message is from her mother. She would like to listen to it first.
Jenny sees that her grandmother called, but didn’t leave a voicemail; she typically doesn’t leave messages.
One of Jenny’s friends called from her new mobile phone. Jenny wants to add the number to her address book.
Jenny has a list of calls to return. Each item has the name, number, and a few brief notes about the call.
Jenny reviews the order of calls she needs to make and returns the phone calls she can now, saving the others for later.
Considerations/Influencers
Can I be notified that I missed calls while I was away? Is it quick? Is it easy? Do I need any special equipment? How much does it cost?
Can I be notified quickly that someone important called while I was away?
Can I check quickly to see if I have any messages waiting?
Can I listen to a specific message? Can I listen to the message quickly? Can I save or delete the message before it is completed playing?
Can I check my missed calls quickly and conveniently? Can I quickly determine which calls I need to return that don’t have voicemails?
Can I add the new number to my address book quickly and easily? If an entry already exists, can I update it easily? Can I sync the address book with my mobile?
Do I have enough time to return all these calls now? Which calls should I return first?
Do I have enough time to return these calls now?
Pain-Points
Checking for missed calls and voicemail 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 inconvenient 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 and time consuming. Can the system help me determine which calls need to be returned?
Keeping all my devices in sync is difficult. How can I keep my mobile phone and email address books in sync?
How do I know what each call is about? How will I know that I’ve returned a call, or marked it for “call back later?”
How do I keep track of which calls I’ve returned? Do I have to use something else to return the calls?
C 2.1 View call history status. (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 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. (4) The customer can sync the address book across home phone, mobile phone, email, etc.
C 2.3 View full missed call history. (2) The customer can view the entire call history, including new and past missed calls.
C 3.3 View full voicemail history. (2) The customer can view the entire voicemail history, including new and past voicemails.
C 4.3 Play message. (1) Upon selection, the message automatically begins playback.
C 5.3 Delete. (1) The customer can delete missed calls from the missed call history.
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.
Functionality
C 2.5 View similar or duplicate calls. (4) The customer can view if anyone placed a duplicate call to more than one phone.
Jenny adds the caller to her address book.
C 7.1 Review call back list. (1) The customer can review a call back list, ordered by priority, and with notes for each call.
C 8.2 Mark call as returned. (2) Once a call has been returned, the message is automatically marked as returned.
C 4.5 Set message priority and/or (4) reminder. The customer can set a priority 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 address.
Glossary 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
(4)
Future - consider for a future version of the product
C 8.1 Return calls. (1) The customer can return calls from within the message center.
Compiled Task Analysis
1
PracticeUX Persona Diagram (Sample)
1
Educated in Industry
Not Educated in Industry
Marketing Director IT Director
User has never worked with a like-client consultancy
Exclusionary
3
Focal
How did we get here? 1) Find the person in your client’s organization that has the most knowledge of their clients and prospects (if that’s who your site should speak to). In this case we spoke to the Sales Director.
Familiar with Core Business
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 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
Not Familiar with Core Business
Focal
Knowledge Factor
Exclusionary 2
Might be a client w/role in executive level
!"Copyright Olga Howard 2005-2006
Focal Persona
4
Where Persona should be
An Example Product / Software / Web Design Process Guide PHASES MILESTONES
discover
definition
concept approval
start
Communicate business needs & brand identity
{
IDEA
KEY MEETING
INFORM
REVIEW CHECKPOINT
refinement
proposal approval and scheduling
Communicate business needs & brand identity
DELIVERABLE MILESTONE
conceptual design review
Brand Positioning
development
PRD approval
UI design approval
Review Promotional & Marketing Needs
launch preparation
committed schedule
visual design approval
post launch
beta
launch
Business development / partnering
Note: In some companies these roles are encompassed by one person
Mockups to marketing
business owners
Describe problem or needs, proposed solution, and benefits.
ROLES
product manager
{
Note: In some companies these roles are blended into one or two people. i.e. ui may do user research or visual designers may do ia, etc.
concept
LEGEND
Collect team input
Develop strategic rationale, business case, financial analysis, policy considerations, implementation plans.
Gather information for and create the Concept Document
Gather supporting market research, etc.
Concept Document Develop usage scenarios and/or design concepts
and / or
Leads brainstorming
Proposal Document this step may be optional
Product Requirements Document (PRD) (authored by a
Evangelize
Wireframes and navigation maps
Product Manager)
UI Design Approval I T E R AT I O N S
Concept Design Review
Visual design explorations
Begin writing functional spec
Product prototype, e.g. paper, HTML, director, or flash
and
Concept Prototype
Concept Design Materials
Refined Visual design explorations
UI Revisions based on testing
Final product specification & handoff to build team
Design fidelity checks and bug fixes
Deliverable:
Templates & Navigation (authored by UI / ID / IA Design)
I T E R AT I O N S
Art direction
Visual Design Approval
Handoff to build team
(authored by blended design team)
Provide input for level of effort
user research
Develop navigation model and refine scenarios
Deliverable: Define personas, usage scenarios, user goals, and perform task analysis
Provide input for level of effort
visual design
Refine design concepts
Provide input for level of effort
Deliverable:
UCD research cont'd. (i.e. paper prototyping, participatory design, field studies, surveys, etc.
Competitive usability testing
Prototype usability test
Prototype testing
credits
Provide input for level of effort
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.
Post mortem
UI maintenance
Visual maintenance
Write/update test plans for final usability Usability test release product capture issues for next release
Define personas, usage scenarios, user goals, and perform task analysis.
Focus Group, Field Studies, Survey Analysis, etc.
Execute visual design
production
L A U N C H
Deliverables: Project kickoff
Review user feedback on previous product UI's and analyze competitive products.
Idea
Promotion plan Point release plan
Write Draft PRD and Review
Gather information for and create the Proposal Document
ui/id/ia design
Product Roadmap
Research: Solicit input from Business owners/ brands - contact other associated stakeholders (legal, customer support, international)
Build HTML
Build/publish QA
User Experience Design Process: Critical Path Kickoff Meeting
Product Marketing
Project Initiation Project is inititated by Product Marketing with Program Management
Prod. Marketing does P&L, content evaluation, creates materials that describe needs, goals, objectives, dependencies, partnerships, business issues and any other relev a n t content or functionality issues, pulls together cross-functional tea m
Initial Design Cyc l e
Design Iteration / Testing / Iteration / E a r l y R e f i n e m e n t
Product Team meets Design presents functional user flow, potential user scenarios and high level screens need e d Approval cycle h e r e
Prod. Mktg. feeds team any results from Marke t Resear c h
Refinement / Copy / Final Visual Design / Robust Testing
Product Team meets Review recommendations from testing
Product Team meets Review revisions
iteration cycle
Meeting coordinated by Program Management UE Team member assigned to project attends meeting
Initial concept brainstorms wit h Product Marketing to collect and gather requirements and understand competitive landscape
UE Team member assigned to project
Engineering
HTML
Experience Design
Usability
Feasability Studies / Field Resear c h What do Users w a n t How do they want to do it (Usability Conceptual Phase)
Credits: Erin Malone: Designed for AltaVista November 10, 2000
Takes input from all members as related to UI design Receives Requirements Document Needs: List of team members, contact info, initial schedule, approval process (people)
Expert advice on previous research a n d new research need e d (Usability 2nd Phase)
Functionality/ Conceptual model testing with early prototypes
feedback cyc l e
Production Build / Reviews / Design Team Sign Offs Product Team meets Design meeting with Product Marketing, Engineering, and Usability to review recommendations
iteration cycle
UE Team brainstorm with Usability - led by project team member what's the best scenario fo r use r s
Early functionality designs and definitions of pages needed for developed functionality
Rapid prototype for proof of concept and early testing w/ usability Could be paper prototype, functional static HTML, Flash interaction, Mockups/ Wireframes as image maps
User Ed develops user education plan Design works w i t h User Education to begin any Help and FAQs and other instructional text and all error messages
Design takes recommended changes and input from Team including Product Marketing, Engineering, Exp. Design Team and Usability Research Revises user fl o w and works thro u g h greater detail of individual screens
Revises user fl o w and works through greater detail of individual scree n s
iteration cycle
Design team brainstorms, iterates and collaborates on visual representation of functionality and screen design s Work can begin while user flow a n d functionality is iterating
Visual Design exploration, copy writte n and finetuned
Experience Design team review Visual direction
Design works w i t h Usability to provide prototype and guidance of what priorities of discovery shoul d be - i.e. business constraints, technical constraints, optional versions to test
Refine Visual direction, copy, user instructions, help and UI components as necessary
Initial exposure to scope of design and functionality
Design team presents wireframes a n d mockups to production with full set of style specs [font size & color, line spacing, colors, images, links, etc]
Discussion with engineering about any potential new technology and its impact on schedule and desired user tasks
Engineering informs Design if there are changes, issues w i t h planned functionality
Final functionality & visual design signoff - Production - Engineering - QA - Partner (if applicable) - Usability - Creative Director - Product Marketing - VP (as necessary)
User Ed. delivers all Help text and associate d screenshots a n d specs t o Production
Production receives approved mockups and works w i t h Design on product area as needed
Assess techn i c a l limitations and alternatives
Engineering might begin coding work from initial functionality spe c s
Product Team meets Hand off to production, engineering and operations mode of the product cycle
Detailed Product testing - both for functionality and specific content and visual design iteration cycle
feedback cyc l e
Create D e s i g n Spec/Creative Brie f Material is from MRP/PRD and brainstorming notes and other requirements, distills info, looks at competitive landscape, rev i e w s scope in context of network and sit e precedenc e
Product Team Approval cycle here
Production builds site and features working wi t h Engineering as applicable
⁄ 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
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?
l a ti
Expectation
»
How close is the user to the necessary part of the system? Are they on the right webpage, near the instore kiosk, or next to the information desk at the airport?
Pr
» Awareness
The User's Experience Cycle
»
»
se
tio n
»
Ac
Awa r e n e ss
Respon
The user experience is not one simple action - it is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires. This takes the shape of individuals comparing their expectations to the outcomes generated by their interaction with a system. Managing expections then becomes key to successfully providing a satisfying "return on experience" that delights users and generates shared, sustainable value.
»
» Eva u
» Proximity
ity im ox
»
Some circumstance triggers a need and a corresponding expectation of satisfaction.
» Expectation
»
on
» Trigger
Co n n
io ect
n
Does the user notice the necessary part of the system the link, the kiosk, or the information desk? Or are they distracted by something else, like a spinning logo?
» Connection Does the user make the connection between their need and the neccessary part of the system? Do the system cues match their expectation so that they can make this connection and then act on it?
» Action Can the user take action, or is there a mismatch with how they expected to act and the actual action required?
» Response The system provides a response to the user's action - is it the expected response? Does it meet the need?
» Evaluation 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 initial need is satisfied. - If expectations are not met, the user will stop using the 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
Related Documents
Information Architecture 3: Concepts
May 2020 12
Asi Information Architecture Final
December 2019 16
Information Architecture Doc
November 2019 18
3 Architecture
June 2020 7
Database System Concepts And Architecture
June 2020 9
Database System Concepts And Architecture
May 2020 15More Documents from "akashdeepime"
Touch Research 2: Hci Details
June 2020 8
Touch Research 1: Inspiration And History
May 2020 11
