• Save
UX LIFE CYCLE
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

UX LIFE CYCLE

on

  • 4,051 views

 

Statistics

Views

Total Views
4,051
Views on SlideShare
3,917
Embed Views
134

Actions

Likes
10
Downloads
0
Comments
0

2 Embeds 134

http://ams.activemailservice.com 74
http://apps.activemailservice.com 60

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX LIFE CYCLE Presentation Transcript

  • 1. Business Information Prototype Visual Design Usability Analysis Architect Development USER EXPERIENCE LIFE-CYCLE Principles of Experience Design. Design Methodology. • Introduction • Business Analysis • Information Architect • Visual Design • Prototype Development • Usability 1◄ || UX LIFE CYCLE || Shad Haque || Product Manager / UX Strategist || shad360@gmail.com Orphiks Inc. © Ophiks Inc.
  • 2. Business Information Prototype Visual Design Usability Analysis Architect Development Introduction 1. Why User Experience? • Easy to use • Fits Expectation • Meets goals 2. Benefits: ① Fewer abandonment ⑤ Fewer calls ② Increases the usage ⑥ Reduces error ③ Saves development time ④ More registration to the website 2◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 3. Business Information Prototype Visual Design Usability Analysis Architect Development Introduction (continued) 3. Some Facts about Users Mental Model of the sites: • Skimming is in - users scan the text if they find some connecting word only then they read the text. Page layout which makes skimming easy fares better. • Readability measure: a. Gunning fog index (measures avg # of words, sentences and big words) 3◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 4. Business Information Prototype Visual Design Usability Analysis Architect Development Introduction (continued) b. Flesch Reading Ease (avg # of syllables per word/sentence) • Scanability: all the elements on a screen are competing for users attention. • Fitts’ law - the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. 4◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 5. Business Information Prototype Visual Design Usability Analysis Architect Development Business Analysis • Requirement • Research • Research Methodology 5◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 6. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 1. Screen Incoming Requests (high-level) • Prioritize by importance and benefits. • Determine resource availability. • Determine stakeholders. 6◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 7. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 2. Initiate Project • Assign project manager (PM) role. • Meet with team to discuss project subject, target population, content, process, next steps, assign rolls and point of contacts. • Create Focus Group. • Define a project folder on server for the project materials and obtain access for team. 7◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 8. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 3. Begin Charter Initial draft contents • Sponsors (Customers or clients; Developers; Users – novice users, expert users, occasional users and disabled users. • Stakeholders • Roles and responsibilities • Define high-level timeline 8◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 9. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 4. Targets and Goals • User needs • Business constraints • Technical requirement 9◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 10. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 5. Visioning • PM and 1 member of IDT meet with sponsors to collect input on what would constitute a successful website. • IDT identifies what is accomplishable. • Draft of scope gets added to Charter. • Set Benchmark 10◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 11. Business Information Prototype Visual Design Usability Analysis Architect Development Requirement 6. Use Case: It is a structured textual specification; and tells who (the actor) does what (the task). • Title: Customer pays bill • Description • Pre-condition (What must be true at the starting point) • Post-condition (This will be true upon successful conclusion) • Basic Path (Most simple set of steps for achieving the goal) • Alternative paths (Multiple navigation path) • Exception Paths (Each Use Case may have extensions where the desired results is not achieved; The Use Case terminates.) 11◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 12. Business Information Prototype Visual Design Usability Analysis Architect Development Research Suggested approaches: • Identify user subjects and locations (PM). • Users will be called upon throughout the entire project process for testing and/or interviews either in person or by phone. • Client Support/IS Security: a) Is there data collected by the help desk? b) Is there data collected by the security? • Average to Power users 12◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 13. Business Information Prototype Visual Design Usability Analysis Architect Development Research Suggested approaches (continued): • Site Audit: a) Current state content mapping/analysis. b) Inventory of all web files (docs, forms, html, scripting, images, etc.). c) Provide audit to Sponsor, who must identify what stays/removed/archived. • Current State Data Gathering (define what needs to be tested). 13◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 14. Business Information Prototype Visual Design Usability Analysis Architect Development Research Methodology 1. Qualitative Vs Quantitative • Qualitative: Behaviors , experience, attitude - Interview of focus group opinions (sme); fewer people but longer duration interviews. • Quantitative: Statistics - Large scale survey, web survey, market research, questionnaire. 14◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 15. Business Information Prototype Visual Design Usability Analysis Architect Development Research Methodology 2. Ethnographic Research • Do a current state field study (timed questions/tasks). This is the first hand observation of real world. • Compile success rate report. • Repeat this same task 6 months post mortem to compare results; whats working/what needs more improvement. 15◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 16. Business Information Prototype Visual Design Usability Analysis Architect Development Research Methodology 3. Interviews/Observations • Compile a list of questions. • Interview specific users and record responses. • Observer (fly on the wall) and make note of what they do, noting length of time when appropriate. 16◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 17. Business Information Prototype Visual Design Usability Analysis Architect Development Research Methodology 4. Surveys • Create a survey to send out to specific target audiences. 17◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 18. Business Information Prototype Visual Design Usability Analysis Architect Development Research Methodology 5. Web-metric Reports • Run a variety of reports about the current state (Google analytics). • AD – who visits key pages 18◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 19. Business Information Prototype Visual Design Usability Analysis Architect Development Information Architecture • Content Analysis • Strategy • Content structure • Design 19◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 20. Business Information Prototype Visual Design Usability Analysis Architect Development Content Analysis 1. Heuristic Evaluation 2. Content Audit 3. Content Inventory 4. Concept Maps 5. Content Gap Analysis 6. Card Sorting • Catalog site content ( use site-audit data). • Pre-card sort with Internal team. • Conduct card sorting with end users. 20◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 21. Business Information Prototype Visual Design Usability Analysis Architect Development Strategy 1. Concept Model 2. Persona 3. Scenario • Task Analysis • Scenario • Work-Flow/ User-Flow. (illustrates individual steps a user goes through on the site to reach their goal - intuitive and logical steps required). 4. Strategy Report 21◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 22. Business Information Prototype Visual Design Usability Analysis Architect Development Content Structure 1. Categorization/Architecture • Define sections of site and organize content into appropriate sections based on card sorting data i.e., begin defining the new category/topic groupings.. • Determine content state, i.e., what needs to stay, re-written and created. 22◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 23. Business Information Prototype Visual Design Usability Analysis Architect Development Content Structure 2. Content Development • Determine SME list • Set SME/Leader expectations for content development and review. • Provide access to project folder on server. • Define content development workflow. • Assign Communication Editor. • Assign content to SMEs. • Define content development workflow. 23◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 24. Business Information Prototype Visual Design Usability Analysis Architect Development Content Structure 3. Blue Print • High-level focus on components within group of pages and relationship between pages. • Navigation flow • Geographical structure. • Illustrates several concept together. • Modularizing blue print: top-level to subsidiary blue print tied through ids. 24◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 25. Business Information Prototype Visual Design Usability Analysis Architect Development Content Structure 4. Sitemap • Gain an understanding of the features, functionality, and the website’s content. • Avoid Sitemap Cop-out: Search engine spiders crawl through the sitemap to find the pages that are hard to find on the site. • Looking at site analytics can help figure out where the traffic to sitemap originates. 25◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 26. Business Information Prototype Visual Design Usability Analysis Architect Development Design - Wireframe 1. Function • Show Relative • suggest grouping/relationships between elements. • Document labeling • Show functionality Continue to Content Development… 26◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 27. Business Information Prototype Visual Design Usability Analysis Architect Development Design – Wireframe 2. Structure • How will the pieces of the site be put together? • Content: What will be displayed on this site? • Information Hierarchy: How is the information organized and displayed? • Functionality: How will this interface work? • Behavior: How does it interact with the user? How does it behave? Relationship. 27◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 28. Business Information Prototype Visual Design Usability Analysis Architect Development Design - Wireframe 3. Types of wireframe: • Sketches (Quick, experimental) • Lo-Fi (Content only block diagrams) • Hi-Fi (Detailed functions and behavior) 4. Navigation Types: • Global • Primary and Secondary • Breadcrumb 28◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 29. Business Information Prototype Visual Design Usability Analysis Architect Development Design - Prototype 1. Paper Prototype (lo-fi) • Create Paper Prototype. • Perform user testing to see if a user can perform certain tasks. • Refine categorization and architecture as needed (3-4 rounds). • Refine categorization & content as needed. 29◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 30. Business Information Prototype Visual Design Usability Analysis Architect Development Design - Prototype 2. Digital Prototype (hi-fi) • HTML/JavaScript (reflects the paper prototype). • Use live navigation to simulate interactivity (text links, menu buttons, data input etc). 30◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 31. Business Information Prototype Visual Design Usability Analysis Architect Development Design - Prototype 3. Digital Prototyping tools • Visio • Axure • InDesign • Balsamiq • Irise • Design8 • Protoshare • OmniGraffle 31◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 32. Business Information Prototype Visual Design Usability Analysis Architect Development Visual Design • Visual prototype/Art Production • Visual Design Guidelines 32◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 33. Business Information Prototype Visual Design Usability Analysis Architect Development Visual Prototype/Art Production 1. Create all graphical assets, reusable page chunk, graphics icons, and optimize images for web presentation. 2. Plan cascading style sheets (CSS). A manual that defines a set of standards for identity, design, and writing can promote clarity and consistency. 33◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 34. Business Information Prototype Visual Design Usability Analysis Architect Development Visual Design Guidelines 1. Typography: Arrange by selecting typefaces, point size, line length, leading, tracking, kerning. 2. Color: Create primary and secondary color palette in order to communicate consistent image of the company. 3. Illustration : Campaign logos and signatures. Icon design(.ico .cur). 34◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 35. Business Information Prototype Visual Design Usability Analysis Architect Development Visual Design Guidelines 4. Images: a. Print /Screen Use: full color, spot color, resolution, RGB, pixel based images, & vector images (Jpg, Eps, Png, Bmp etc). b. Image naming protocol: Name all images as such: picture identity _image #_stocknumber.filetype (Example: SOLOCYCLE_12345_PDT500.JPG) 35◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 36. Business Information Prototype Visual Design Usability Analysis Architect Development Interactive Interface 1. Benefits - All in the same page: • All stakeholders can review HTML site and submit and changes. • All Stakeholders would be on the same page as they could interact with a virtual finished design. • Empirical measurement could be tested. 36◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 37. Business Information Prototype Visual Design Usability Analysis Architect Development Interactive Interface 2. Development Process: • Build HTML/xhtml/html5 pages. • Create cascading style sheets (CSS2/CSS3). • Build Javascript/Jquery based interaction. • Implement jQuery features for quick and dynamic RIA effects. • Include Ajax features. • Use of Meta-data and controlled vocabulary frameworks. 37◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 38. Business Information Prototype Visual Design Usability Analysis Architect Development Usability • Usability Benefits • Usability Testing • Types of Prototyping • Focus Group • Human Factor Design 38◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 39. Business Information Prototype Visual Design Usability Analysis Architect Development Usability Benefits 1. Ease of learning: How fast can a first time user get over the learning curve? 2. Efficiency of use: Once a user has learned to use the system, how fast can a task be done? 3. Memorability: If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything? 39◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 40. Business Information Prototype Visual Design Usability Analysis Architect Development Usability Benefits 4. Error frequency and severity: How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors? 5. Subjective satisfaction: How much does the user like using the system? 40◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 41. Business Information Prototype Visual Design Usability Analysis Architect Development Usability Testing 1. Test the Design at each design stage with the focus group; iterative design approach. 2. Choose laboratory or remote Testing. 3. Types of Testing: • Lab testing: camera and observation • Remote testing: Morae • Design, create, conduct and evaluate usability tests. • Eye-tracking ( Tobii ) 41◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 42. Business Information Prototype Visual Design Usability Analysis Architect Development Usability Testing (continued) 4. Heuristic Evaluations 5. Card Sorting 6. Survey Evaluation 7. Qualitative and Quantitative data analysis. 8. Ethnography/Contextual Inquiry. 9. Use the appropriate prototyping technology: • Paper prototype • HTML /CSS/Javascript Web UI prototype • Electronic: Axure, Visio, Indesign, Irise. 42◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 43. Business Information Prototype Visual Design Usability Analysis Architect Development Types of Prototyping: 1. Low fidelity (wire-frames): Simple layout sketches focused on content and layout. 2. Slide shows: High fidelity visual design, but with minimal interactivity. 3. Medium fidelity: visual design with nominal interaction capability following a scenario. 4. High fidelity: Full interaction capabilities and detailed screen layouts. 43◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 44. Business Information Prototype Visual Design Usability Analysis Architect Development Focus Group - high apparent validity 1. Contextual inquiry (master-apprentice lessons) 2. Thinking aloud protocol 3. Instrumented browser (macro) 44◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 45. Business Information Prototype Visual Design Usability Analysis Architect Development Focus Group - Types 1. Mini groups 2. Dual Operator 3. Client participant 4. Teleconference 5. Dual Moderator 45◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 46. Business Information Prototype Visual Design Usability Analysis Architect Development Focus Group - preparation worksheet 1. Performance - How much time, and how many steps, are required for people to complete basic tasks? 2. Accuracy - How many mistakes was made? 3. Recall - How much does the user remember afterwards or after periods of non-use? 4. Emotional response - How does the person feel about the tasks completed? 46◄ || UX LIFE CYCLE || Orphiks Inc. © Ophiks Inc.
  • 47. Business Information Prototype Visual Design Usability Analysis Architect Development Thank you for visiting! USER EXPERIENCE LIFE-CYCLE More on the anvil: Social media marketing Mobile/iPad apps Metrics driven design Share your thoughts so we can improve. 47◄ || UX LIFE CYCLE || Shad Haque || Product Manager / UX Strategist || shad360@gmail.com Orphiks Inc. © Ophiks Inc.
  • 48. Business Information Prototype Visual Design Usability Analysis Architect Development Special thanks to the folks who I follow. References: 1. http://www.useit.com/ 2. http://www.infodesign.com.au 3. http://www.jjg.net/ia/ 4. http://www.sitepoint.com/architecture-deliverables/ 5. http://www.jrgdesignworks.com/ia.php 6. http://www.humanfactors.com/neurowebbook.asp 7. http://www.mojofat.com/tutorial/ 48◄ || UX LIFE CYCLE || Shad Haque || Product Manager / UX Strategist || shad360@gmail.com Orphiks Inc. © Ophiks Inc.