What is IA/UX

  • View
    137

  • Download
    3

Embed Size (px)

DESCRIPTION

Introduction to Information Architecture and Experience Design

Text of What is IA/UX

  • 1. Intersections of Information Architectureand User Experience DesignPrepared by:Paul Kahn Experience Design DirectorMarch, 2014Media Lab, Aalto UniversityHelsinki, Finland

2. Paul Kahn | 2Outline What is Information Architecture What is Experience Design Applying Information Architecture: 3 case studies Six ways to organize information: LATCH+CF 3. Paul Kahn | 3What is Information ArchitectureInformation is a difference that makes a difference a pattern that provides a structure for understandingInformation Architecture is discovering the kinds of information the site contains matching this information to the needs of the users determining the appropriate metadata structure 4. Paul Kahn | 4Jesse James Garrett: 5 Layer Process Model The Elements of User Experience,Jesse James Garrett (2000) 5. Paul Kahn | 5Information Architecture > Facets of User Experience Peter Morville (2004) 6. Paul Kahn | 6Where we fit in your Internet projects 7. Paul Kahn | 8The Information Architect must understandthe data text coding systems: SGML/XML database storage information retrievalthe interaction models principals of user interface design user-based design methodology the limits of current web browser technology 8. Paul Kahn | 9The Information Architect must mediate the requirements of a client, who wants to presentinformation the needs of the user, who needs to find and consume thatinformation balance between the desirable and the possible 9. Paul Kahn | 10Category and ClassificationCategorization isthe mental process of grouping things by perceptible similaritywithin a given context.Creating groups through direct experience (bottom-up) 10. Paul Kahn | 11 Categorization ofpopular music Pop music categoriesare an expression ofthe perception ofcommunities oflisteners (bottom-up) 11. Paul Kahn | 12Category and Classification Categorization isthe mental process of grouping thingsby perceptible similaritywithin a given context. Classification isa set of classesassigned according to a predetermined set of principlesused to impose order on a set of entities. Taxonomic classification establishes stability by applyinga set of rules to one domain (top-down) Classification system offer inter-operability benefits across applications 12. Paul Kahn | 13 MESH Classification of human diseases Each disease is located in one or more places in theMedical Subject Headings (MESH) maintained bythe National Library of Medicine in Washington DC 13. Examples of categories that are classificationsHigh-level categoryThree Categories of Drugs Depressants Stimulants HallucinogensContinuous category/scaleCategories of Hurricanes:Category 1: 74-95 mph windsCategory 2: 96-110 mph windsCategory 3: 111-130 mphwindsCategory 4: 131-155 mphwindsCategory 5: 155+ mph windsPaul Kahn | 14 14. Paul Kahn | 15Category vs. Classification 3 Categories of hair color Classification of hair color 15. 16What is Experience Design (UX) It is User-Centered Services should be experienced through the customers eyes It is Co-Creative All stakeholders should be included in the service design process It is Sequencing The service should be visualized as a sequence of interrelated actions. 16. 17What is Experience Design ? It is Evidencing Intangible services should be visualized in terms of physical artefacts It is Holistic The entire environment of the service should be consideredOops, this is a definition of Service Design Five Principles of Service Design Thinkingfrom This Is Service Design Thinking 17. 18What is User Experience at Mad*Pow All of the above plus some things not already mentioned User Research: recruiting test cohorts, recording and analyzinginterviews and tests Design Studio: rapid design/critique with stakeholders & users Personas and Journey Maps Content Strategy and SEO: defining & creating appropriatecontent for communicating messages Creative Technology: prototyping the best way to communicateacross platforms & channels 18. 19Case 1: Messaging as a Service Aetna came to Mad*Pow for help developing a Unified MemberMessaging strategy Aetna wanted to make sure members were getting the right information at the right time via their preferred channel(s). 19. 20Results Research produced recommendations for Intra-departmental communication and governance AND user-managed filters and profiles. The result is the kind of business strategy and technologyrecommendations that are driven by seeing the user's experienceas a service. 20. 21 21. 22 22. 23 23. 24 24. 25 25. 26 26. 27 27. 28 28. 29 29. 30Case 2: User Experience Design for Mobile AppSmall Software start-up (6+ people) developing SecureEyePrint technology using standard mobile phone camerayeVerify meant to replace password protection as accesskey to mobile applicationsIntegrates with larger end-user applications: banking, healthcare, etc. 30. 31EyeVerify: How it works Software-only biometric Stable feature-set based on the bloodvessels in the whites of the eyes Enables a password-free mobile experience Eyeprint cannot be lost, forgotten or stolen No spoofing - robust liveness detection Uses ordinary, existing smartphone cameras,no hardware dependency Requires just a 720p camera (~1.3 MP) 31. 32EyeVerify: How it works Give a more professional look to the visual design of the betaapplication Increase the probability of user success / Decrease the possibilityof user confusion Streamline the instruction / enrollment / verification process tomake it as rapid as possible Find the best combination of text, image, animation, video andvoice to communicate with the user 32. 33The original application followed a 4-step processInstructionsPracticeEnrollmentVerification 33. 34EyeVerify: Highlights from Round 1 User Testing Most participants were able to use the EyeVerifyapplication with little to no trouble All but one of the participants said that they would like touse EyeVerify instead of entering a password or PIN There is an opportunity to have the interface guide andinform them throughout the process Participants said that the written instructions and videowere quite straightforward and were easy to understand They also said that the hand in front of the facesuggestion was helpful All participants said that the process got easier the morescans they performem 34. 35UX Improvements Replace Enrollment/Verification concept with Create EyePrint Replace two step Enrollment and Verification with a series ofscans that build up the EyePrint Eliminate the second scan (look left, look right) Instruct the user to repeat the scan until the EyePrint is robust User a progress animation to drive towards completion Reduce the Instruction sequence to two animations Focus the animation the transition from a normal face-to-phoneposition to the EyePrint scan position 35. 1. Create Login 2. Welcome 3. Instruction 1 4. Instruction 2AnimationPositionAnimationGazeAnimationGazeGreen BoxTransition5. Instruction 37. Position 8. Gaze Left11. Position or Match Failed9. 1-n Match 10. Final MatchWebsiteRestart BetaorReturn to ApplicationEmailEyeVerify new workflowRich Woodall & Paul Kahn10/14/13 36. 37 37. 38 38. Round 2 Testing (Improved UX and VD) As with the first round of testing, participants were ableto use the EyeVerify application with little to no trouble The biggest opportunities are to better guide usersthrough the instructions and through a failed eye scan Participants said that the written instructions and audiowere easy to understand Many participants said that the process got easier themore scans they performed Overall, participants seemed to have an easier time withthe app than during the first round of testing39 39. 40DESIGNOne participant did not look off the screen helooked at the top-left of the phone.Consider: adding an instruction to look off screen.DESIGNOne participant did not look off the screen helooked at the top-left of the phone.Consider: adding an instruction to look off screen.BACK-ENDApp does not notice if the gaze is not up and to theleft.Consider: adding functionality and messaging thatensures the gaze is in the proper location.BACK-ENDApp does not notice if the gaze is not up and to theleft.Consider: adding functionality and messaging thatensures the gaze is in the proper location.BACK-ENDApp does not give ample time before stating wecannot find your eyes.Consider: adding a brief pause so that users mayattempt to line-up their eyes.BACK-ENDApp does not give ample time before stating wecannot find your eyes.Consider: adding a brief pause so that users mayattempt to line-up their eyes.BACK-ENDAudio instructions often overlap.Consider: ensuring that audio instructions do notoverlap cut off the first message, if needed.BACK-ENDAudio instructions often overlap.Consider: ensuring that audio instructions do notoverlap cut off the first message, if needed.Shes already barking at me. (P3) 40. 41Case 3: Reorganizing a public websiteClient goals for the project Easy to navigate. Users have a clear path to theinformation that interests them and know how to findwhat they want if they come back. Satisfying. People should feel like they found whatthey wanted, and leave wanting to come back, andwhen they walk away they would refer it to someoneelse. Trustworthy. Providers will easily see that thequestions they have will be answered in expert way. 41. 42 42. Paul Kahn | 43 43. Paul Kahn | 46LATCH (+):Five ways to organize information for ease of use (+One)LocationAlphabetTimeCategoryHierarchyFrom Richard Saul Wurman, INFORMATION ANXIETY 2plus Common Focus 44. Paul Kahn | 47LocationLocation is chosen when the information who you are comparingcomes from several different sources or locales. Doctors use differentlocations of the body to group and study medicine. Concerning anindustry you might want to know where on the world goods aredistributed. WSW Location is the X/Y position in the context of a represe