IA 7: IA? IxD? UX!

IA? IxD? UX!

⁄  IA 7: IA? IxD? UX! is an uncooked collection of deﬁnitions, categorizations, outlines, and visualizations concerning ⁄  Information architecture IA , ⁄  Interaction design IxD , and ⁄  User experience UX design. ⁄  This deck is an updated version of IA 3: IA Concepts. ⁄  Its main purpose is to sear the partially dry substances into my memory ;)

⁄ IA is deﬁned 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 ﬁndability and usability. 3.  An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

⁄  According to the Interaction Design Association: 1.  IxD deﬁnes the structure and behavior of interactive systems. 2.  Interaction Designers strive to create ⁄  people and meaningful relationships between ⁄  the products and services that they use, ⁄  from computers to mobile devices to appliances and beyond.

⁄ UX is deﬁned by the Nielsen Norman Group as: all aspects of the end-‐‑userʹs interaction 1.  with the company, its services, and its products. 2.  The ﬁrst requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.

3.  Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. 4.  True user experience goes far beyond giving customers what they say they want, or providing checklist features. 5.  In order to achieve high-‐‑quality user experience in a companyʹs oﬀerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

2 Enable frequent users to use shortcuts 6 Permit easy reversal of actions 1 Strive for 5 Oﬀer consistency simple error 7 Support handling internal 3 Oﬀer locus of control informative 8 Reduce short-‐‑ feedback term memory load 4 Design dialog to yield closure

Consistent sequences of Abbreviations actions in similar Function keys situations Hidden commands Identical terminology in prompts, menus, and Macro facilities 1 Strive for consistency interaction help screens 2 Enable frequent users to use shortcuts to increase the pace of Consistent commands throughout

System feedback for Organization of every operator action sequences of actions into Modest response for groups with a beginning, frequent and minor middle, and end actions Informative feedback at 3 Oﬀer informative feedback accomplishment the completion of a 4 Design dialog to yield closure to provide a satisfaction of More substantial response for infrequent group of actions in order and major actions to provide • a sense of relief, • the signal to drop contingency plans and options, and • an indication that the way is clear to prepare for the next group of actions

As much as possible, Encourage exploration design the system so the of unfamiliar options user cannot make a The units of reversibility serious error may be If an error is made, the • a single action, 5 Oﬀer simple error handling relieve anxiety system should be able to 6 Permit easy reversal of actions to • a data entry, or detect the error and oﬀer • a complete group of actions • simple, • comprehensible mechanisms for handling the error

Experienced operators The limitation of human strongly desire the sense information processing that they are in charge of in short-‐‑term memory the system and that the requires that displays be system responds to their • kept simple, actions 7 Support internal locus of control 8 Reduce short-‐‑term memory load • multiple page displays be consolidated, Design the system to • window-‐‑motion frequency be make users the initiators reduced, and of actions rather than the • suﬃcient training time be responders allobed for codes, mnemonics, and sequences of actions

Literature Review Cognitive Walkthrough Without Users Heuristic Evaluation Evaluation Techniques Model-‐‑based Evaluation Model Extraction Silent Observation Qualitative Think Aloud Constructive Interaction With Users Retrospective Testing Controlled Quantitative Experiments

Reduce users‘ memory load Place users in control of the Make the user interface interface consistent

1 Use modes judiciously (modeless) 2 Allow users to use either keyboard or mouse (ﬂexible) 3 Allow users to change focus (interruptible) the interface Place users in control of 4 Display descriptive messages and text (helpful) 5 Provide immediate and reversible actions, and feedback (forgiving) 6 Provide meaningful paths and exits (navigable) 7 Accommodate users with diﬀerent skill levels (accessible) 8 Make the user interface transparent (facilitative) 9 Allow users to customize the interface (preferences) 10 Allow users to directly manipulate interface objects (interactive)

11 Relieve short-‐‑term memory (remember) 12 Rely on recognition, not recall (recognition) 13 Provide visual cues (inform) load 14 Provide defaults, undo, and Reduce users‘ memory redo (forgiving) 15 Provide interface shortcuts (frequency) 16 Promote an object-‐‑action syntax (intuitive) 17 Use real-‐‑world metaphors (transfer) 18 User progressive disclosure (context) 19 Promote visual clarity (organize)

20 Sustain the context of users’ tasks (continuity) 21 Maintain consistency within and across products (experience) 22 Keep interaction results the consistent same (expectations) Make the user interface 23 Provide aesthetic appeal and integrity (abitude) 24 Encourage exploration (predictable)

Keep the Avoid errors, Design clear interface help to recover, exits and closed simple! oﬀer Undo! dialogs! Speak the Include help Minimize user’s and memory load! language! documentation! Be consistent Provide Oﬀer shortcuts and feedback! for experts! predictable!

Context Content Users

Business Audience Document/ goals Tasks data types Context: Users: Content: Funding Needs Content Politics objects Information Culture seeking Volume Technology behavior Existing Experience structure Resources Constraints

⁄  What is IA? 1.  IA is content architecture (Rosenfeld & Morville’s Polar Bear style) — organization for easy retrieval. 2.  IA is interaction design (Cooper’s About Face) — architecting for use. 3.  IA is information design (Wurmanʹs Information Architects) — organizing for comprehension AND UI design.

The Nine Pillarsof Successful Web TeamsJesse James Garrett <jjg@jjg.net> project management9 July 2003The most successful Web teams build their team structures and theirprocesses on these nine essential competencies:Project Management: The hub that binds all the tactical competenciestogether as well as the engine that drives the project forward to completion,project management requires a highly specialized set of skills all its own. concreteNeglecting this area often results in missed deadlines and cost overruns. d i designConcrete Design: Before the abstract design can become a fully realizeduser experience, you must determine the specific details of interfaces,navigation, information design, and visual design. This realm of concretedesign is essential to creating the final product. tacticalContent Production: Knowing what content you need isnt enough. You also technology contentneed to know how youll produce it. Gathering raw information, writing andediting, and defining editorial workflows and approvals are all part of content implementation productionproduction.Technology Implementation: Building technical systems involves a lot ofhard work and specialized knowledge: languages and protocols, coding anddebugging, testing and refactoring. The more complex your site, the moreimportant a competency in technology implementation becomes. abstract bstraAbstract Design: Information architecture and interaction design translate d designstrategic objectives into a conceptual framework for the final userexperience. These emerging disciplines addressing abstract design areincreasingly recognized for their value in the Web development process. strategicContent Strategy: Content is often the reason users come to your site. Butwhat content can you offer to meet your users expectations? How much technology contentcontent is appropriate, and what form should it take? What style or toneshould it have? Before you can produce that content, you need to answer strategy strategyfundamental content strategy questions such as these.Technology Strategy: Web sites are technologically complex, and gettingmore intricate all the time. Identifying the technology strategy for the site –platforms, standards, technologies, and how they can all interoperate – isessential to avoiding costly mistakes. siteSite Strategy: Defining your own goals for the site can be surprisingly strategy trategtricky. Arriving at a common understanding of the sites purpose for yourorganization, how youll prioritize the sites various goals, and the means bywhich youll measure the sites success are all matters of site strategy.User Research: User-centered design means understanding what yourusers need, how they think, and how they behave – and incorporating thatunderstanding into every aspect of your process. User research provides theraw observations that fuel this insight into the people your site must serve. user researchadaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/

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 hExperience Design project Brie f proof of concept user education plan changes and input Design team Usability to provide Design team Final functionality & attends meeting UE Team Material is from and early testing w/ from Team - brainstorms, iterates prototype and presents visual design signoff Initial concept brainstorm with MRP/PRD and Early functionality usability Design works w i t h including Product and collaborates on guidance of what Refine Visual wireframes a n d User Ed. delivers all - Production brainstorms wit h Takes input from Usability - led by Revises user fl o w brainstorming notes designs and User Education to Marketing, visual representation Visual Design Experience priorities of direction, copy, mockups to Help text and - Engineering all members as project team and works Product Marketing to and other definitions of Could be paper begin any Help and Engineering, Exp. of functionality and exploration, Design team discovery shoul d user instructions, production with full associate d - QA UE Team member assigned related to UI member through greater collect and gather requirements, distills pages needed for prototype, functional FAQs and other Design Team and screen design s copy writte n review Visual be - i.e. business help and UI set of style specs screenshots a n d - Partner (if applicable) to project design detail of individual requirements and info, looks at developed static HTML, Flash instructional text Usability Research Work can begin while and finetuned direction constraints, components as [font size & color, specs t o - Usability whats the best scree n s understand competitive functionality interaction, and all error user flow a n d technical necessary line spacing, Production - Creative Director Receives Requirements scenario fo r competitive landscape landscape, rev i e w s Mockups/ messages Revises user fl o w functionality is constraints, colors, images, - Product Marketing Document use r s scope in context of Wireframes as and works thro u g h iterating optional versions to links, etc] - VP (as necessary) Needs: network and sit e image maps greater detail of test List of team precedenc e individual screens members, contact info, initial schedule, approval process Initial exposure to Production receives Production builds (people) scope of design and approved mockups site and features functionality HTML and works w i t h working wi t h Design on product Engineering as Assess techn i c a l area as needed applicable limitations and alternatives Discussion with engineering Engineering informs Engineering Engineering might about any potential new Design if there are begin coding technology and its impact on changes, issues w i t h work from initial schedule and desired user planned functionality functionality tasks spe c sCredits: Erin Malone: Designed for AltaVista November 10, 2000

The Elements of the Users 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 Users 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 AwaRespon 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 users action - is it rene then becomes key to successfully providing a the expected response? Does it meet the need? satisfying "return on experience" that delights » Evaluation 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 Normans 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.

Ease of use remains vital usable Usability is necessary but not suﬃcient Web sites should be accessible to people with disabilities accessible Eventually, it will become the law

Ask whether our products and systems are useful useful Deﬁne innovative solutions that are more useful Navigable web sites Locatable objects ﬁndable

Appreciation for the power and value of image desirable Identity, brand, and other elements of emotional design Design elements inﬂuence whether users trust and believe what we credible tell them

Value to our sponsors For non-‐‑proﬁts: Advance the mission valuable With for-‐‑proﬁts: Contribute to the bobom line and improve customer satisfaction

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

User Needs Documentation Personas Usability Strategy Documentation Test Plans Competitive Usability Analyses Design Documentation Reports Concept Site Maps Models User Flows Content Inventories Wireframes Screen Designs

Design Diagrams Personas Concept Design Deliverables Models Design Site Maps Briefs Flowcharts Competitive Reviews Wireframes Usability Plans Usability Reports

Call History - Compiled Task Analysis Before Scene After Scene Future Scene The spare bedroom (office) of Jenny’s two bedroom townhome in suburban Indianapolis. The spare bedroom (office) of Jenny’s two bedroom townhome in suburban Indianapolis. The spare bedroom (office) of Jenny’s two bedroom townhome in suburban I Jenny comes home from a weekend away and wants to see if there have been any important phone calls or messages that she missed. She Jenny comes home from a weekend away and wants to see if there have been any important phone calls or messages that she missed. She Jenny comes home from a weekend away and wants to see if there have been sees the voicemail indicator on her phone and begins the lengthy process of calling and listening to her voicemail. looks at her Comcast Message Center Dashboard she quickly sees that she has five new voicemails. Through the Comcast Message Center’s looks at her Comcast Message Center Dashboard she quickly sees that she has dashboard, she is able to see that the third voicemail is from her mother and plays the message instantly. dashboard, she is able to see that the third voicemail is from her mother and p presence indicator, Jenny can see that her mother may not be home, but has h cell phone. Jenny returns home from a Jenny checks to see if anyone Jenny checks to see if anyone Jenny listens to her Jenny checks for missed calls Jenny adds the caller to her Jenny reviews her list of calls Jenny returns her p Sub Tasks weekend away. called while she was away. left a voicemail message. voicemail. she needs to return. address book. to return. calls. Jenny returns home from a weekend Jenny walks into the office to check the Jenny checks the voicemail indicator and Jenny sees there are four new voicemail Jenny sees that her grandmother called, One of Jenny’s friends called from her Jenny has a list of calls to return. Each Jenny reviews the order of ca Scenario away. She walks in the door, puts down caller id light on her phone to see if see’s the number six. She knows she had messages. The second new message is but didn’t leave a voicemail; she typically new mobile phone. Jenny wants to add item has the name, number, and a few needs to make and returns th her bags and takes a look around. anyone called while she was away. saved some messages, but doesn’t know from her mother. She would like to listen doesn’t leave messages. the number to her address book. brief notes about the call. calls she can now, saving the Everything appears to be right where she how many. to it first. later. left it. Can I be notified that I missed calls while Can I be notified quickly that someone Can I check quickly to see if I have any Can I listen to a specific message? Can I Can I check my missed calls quickly and Can I add the new number to my address Do I have enough time to return all these Do I have enough time to ret Considerations/Influencers I was away? Is it quick? Is it easy? Do I important called while I was away? messages waiting? listen to the message quickly? Can I save conveniently? Can I quickly determine book quickly and easily? If an entry calls now? Which calls should I return calls now? need any special equipment? How much or delete the message before it is which calls I need to return that don’t already exists, can I update it easily? Can first? does it cost? completed playing? have voicemails? I sync the address book with my mobile? Checking for missed calls and voicemail I have to go to my office to see if anyone How many of the messages are new? Listening to voicemail is time inconve- Checking for missed calls is inconvenient Keeping all my devices in sync is How do I know what each call is about? How do I keep track of which Pain-Points is laborious and inconvenient. called. Checking from the road is even Which ones are important? Can I pick a nient and time consuming. Why can’t I and time consuming. Can the system difficult. How can I keep my mobile How will I know that I’ve returned a call, returned? Do I have to use so more laborious and inconvenient. specific message to listen to? Which listen to a specific message without help me determine which calls need to be phone and email address books in sync? or marked it for “call back later?” else to return the calls? messages need immediate attention? listening to the ones before it? Do I have returned? time to listen to the messages now? C 2.1 View call history status. C 3.1 View voicemail status. C 4.1 Access the voicemail system. C 5.1 View new missed call history. C 6.1 Add to address book (update in C 7.1 Review call back list. C 8.1 Return calls.nd Functionality (1) The customer can view the status of (1) The customer can view the status of (1) The customer accesses the voicemail (1) The customer can view the new (1) address book). (1) The customer can review a call back (1) The customer can return whether or not (s)he has any new whether or not (s)he has any new system to listen to new messages. missed calls history. The customer can add (update) a list, ordered by priority, and with within the message centm missed calls. voicemail. name and number in the address notes for each call.asy book. C 2.2 View new missed calls history. C 3.2 View new voicemail list. C4.2 Select a voicemail for playback. C 5.2 View call priority status. C 6.2 Sync address book. C 8.2 Mark call as returned. (1) The customer can view the call (1) The customer can view a list of new (1) The customer reviews the list of (4) The customer can view the (4) The customer can sync the address (2) Once a call has been retu history for new missed calls. voicemail messages with the name messages and related info and priority/importance of a call to help book across home phone, mobile message is automatically (number) and date/time of each selects a message to play. them determine which calls need to phone, email, etc. returned. voicemail. be returned. C 2.3 View full missed call history. C 3.3 View full voicemail history. C 4.3 Play message. C 5.3 Delete. (2) The customer can view the entire (2) The customer can view the entire (1) Upon selection, the message (1) The customer can delete missed call history, including new and past voicemail history, including new and automatically begins playback. calls from the missed call history. missed calls. past voicemails. C 2.4 View full incoming call history. C 3.4 View similar or duplicate messages. C 4.4 Message notes. (3) The customer can view the entire (4) The customer can view if anyone (4) The customer can place notes incoming call history, including all who left a duplicate voicemail on and/or a description next to the missed, answered, and forwarded multiple phones, or email for a voicemail - useful when returning or calls. similar message. saving the call. C 2.5 View similar or duplicate calls. C 4.5 Set message priority and/or (4) The customer can view if anyone (4) reminder. placed a duplicate call to more than The customer can set a priority one phone. level, due date, and/or reminder for the message. Over time, the system learns and sets these automatically. C 4.6 Save message. (1) The message is automatically saved if the customer doesn’t delete it. C 4.7 Delete. (1) The customer deletes the message. They should be able to perform this action at any time during the message playback. C 4.8 Rewind and fast forward. (2) The customer can rewind and fast forward through the message during playback. C 4.9 Forward message. (4) The customer can forward the message to another number or email Glossary address. Ratings (1) High - address as soon as possible (2) Medium - address after priority 1 (3) Low - after priority 2 and if there is time in development cycle Compiled Task Analysis 1 (4) Future - consider for a future version of the product

⁄  “Information architecture does not exist as a profession. no such thing as an interaction designer ⁄  Thereʹs either. ⁄  Anyone who claims to specialize in one or the other is a fool or a liar.” ⁄  What remains?

⁄ UX covers all aspects of the end-‐‑userʹs interaction 1.  with the company, its services, and its products. 2.  In order to achieve high-‐‑quality user experience in a companyʹs oﬀerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

Credits!

⁄  IAI, IxDA, NN/g ⁄  Special thanks to: Alan Dix, Ben Shneiderman, Christina Wodtke, Dan Brown, Don Norman, Erin Malone, George Olsen, Jan Borchers, Jesse James Garreb, Jess McMullin, Olga Howard, Peter Morville, Theo Mandel, Todd Warfel ⁄  As always: Wikipedia, Boxes and Arrows ⁄  Images: ﬂickr.com/library_of_virginia/2898506631/, /liewcf/894035077/, /nypl/3109284623/ ⁄  To be continued ... ⁄  What‘s missing? Jef Raskin, more of Don Norman (visibility and aﬀordances), Bill Moggridge, Bill Buxton, CMN, Fibs, Gestalt laws, mappings, constraints, storyboards, the usual suspects (sitemap, persona, wireframe). What else?

ant to read more?

⁄  & the Red Fez ⁄  A spectrum of inspirations, from international marketing to IT ⁄  ux.felgner.ch

http://www.felgner.ch	22
http://felgner.ch	7
http://www.istikbal.gr	5
http://www.onlydoo.com	3
http://repetidoralabreguara.blogspot.com	3
http://www.slideshare.net	3
http://educadorinfantil.blogspot.com	3
http://drizzlin.com	3
http://www.petrobras.com.br	3
http://www.todopps.info	3
http://tcbiglesiadedios.blogspot.com	2
http://studysols.com	2
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	2
http://www.web2asia.com	2
http://www.mongodb.org	2
http://obintcp.org	2
http://www.hijodelmedio.com	2
http://preacherspen.org	1
http://www.medicinaestetica.mx	1
http://mahboonyih.blogspot.com	1
http://www.torresburriel.com	1
http://www.irekia.euskadi.net	1
http://www.optimalusability.com	1
http://www.atulsharma.me	1
http://www.society30.com	1
http://fia.pipra.org	1
http://www.ewavemd.com	1
http://azgo.vn	1
http://cetepreconcavo.blogspot.com	1
http://www.waterandstone.com	1
http://www.ciepi.org	1
http://conference2010.whymca.org	1
http://marktab.net	1
http://pmsapp.mercadolibre.com.co	1
http://www.landarchforum.com	1
http://tallerapr1pr2.blogspot.com	1
http://isheyevo.ens-lyon.fr	1
http://www.saujana.sg	1
http://www.pletz.com	1
http://www.tcbiglesiadedios.blogspot.com	1
http://correll.cs.colorado.edu	1
http://pr-uppsatser.se	1
http://hooked-on-thinking.wikispaces.com	1
http://www.paux.de	1
http://m10.indicthreads.com	1

IA 7: IA? IxD? UX!

by Harald Felgner on Dec 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

45 Embeds 97

Statistics

IA 7: IA? IxD? UX! — Presentation Transcript