1 / 19

UX Primer

Desiree McCrorey. UX Primer. Primer Outline. What’s UX, UI, UCD UCD Methods Deliverables. What is UX (User Experience). Design activities that try to keep users from experiencing…. UCD (User Centered Design). “Satisfy the Cat”. Guiding principles. Remember - We are not the user.

trilby
Download Presentation

UX Primer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desiree McCrorey UX Primer

  2. Primer Outline • What’s UX, UI, UCD • UCD Methods • Deliverables

  3. What is UX (User Experience) • Design activities that try to keep users from experiencing…

  4. UCD (User Centered Design) “Satisfy the Cat” • Guiding principles Remember - We are not the user Learn as much as possible about the real users Design early and often Prioritize user requirements Collaborate with product team people early and often Build what users need disguised as what they wanted Test early and often,with real users when possible Find ways to exploit users’ own motivations

  5. Satisfy the Cat - User vs Customer • Needs, wants, goals are often different, but both should be satisfied • The larger organization, the larger the gap • Satisfy the Cathttp://www.youtube.com/watch?v=dln9xDsmCoY unsatisfied satisfied

  6. UCD Method: Iterative Design Process Client Needs, Current Usage, Complementary and Competitive Products Identify, Analyze UX/UI Requirements (Personas, Tasks, Goals, Objectives) Define Modify iterate Design Collect feedback Mockups, Sketches, Storyboards, Wireframes, Interactive Prototypes Test Usability Tests (formal & informal)

  7. Ideal process UX as a whole • Designed • tested, validated with users User stories Project lifecycle Confidential

  8. ? UX as a whole • Designed • tested, validated with users User stories Project lifecycle Confidential

  9. UCD Method: Iterative UI Design Funnel Iteration 1 Low fidelity sketches, wireframes Iteration next Wireframes Iteration final Interactive models conservative conservative blend moderate Final design radical radical Overarching UI Design Phase Product Lifecycle

  10. Multiple Design/Development Sprints Design & UA Test Development QA Level of Effort Design Sprint Development/QA Sprint sprint sprint sprint sprint sprint sprint Product lifecycle

  11. Deliverable: Example Use Case Use Case: Go to ATM to get cash Essential steps User goes to a facility with ATM User puts ATM card info into machine User enters PIN User specifies amount of cash to withdraw ATM accepts transaction request ATM issues transaction receipt, user’s ATM card, and requested amount of cash Product / platform specific steps User goes to Wells Fargo ATM System flashes ATM card slot green lit frame User pushes Wells Fargo ATM debit card into ATM machine card slot System validates card, retains card and displays on-screen instructions to prompt user to enter PIN User enters ATM card PIN using ATM physical keyboard and presses keyboard or on-screen OK button System authenticates and presents account management options (add, withdraw, transfer funds, update info, etc.) User taps on-screen “Withdraw” button System presents withdraw funds options (from checking, savings, other accounts) and shows amounts available for withdrawal per account User taps on-screen “Checking Account” System presents most popular withdrawal amounts on-screen ($100, $200, $300) and option to enter other amounts User taps on-screen $200 System presents on-screen transaction receipt options User taps “printed receipt” option System spools out printed receipt System pushes out ATM card System waits for card to be removed When removed, system issues requested amount in cash System resets for next transaction • Use Case Types • Essential – platform/system independent flow use case • Product-specific (BCPS) use case • Also note each use case can have alternatives (flow variations).

  12. Deliverable: BCPS Wireframe – Home (use case based)

  13. Deliverable: More BCPS Wireframes(use case based) “conservative” “stylized”

  14. Deliverable: BCPS ‘Roughs’(use case based) “conservative” BCPS Rubric Results Report

  15. DeliverableBCPS ‘concepts’ (use case based) Classroom Roster Drag image to cell if child succeeds 8 “stylized” S E A

  16. Deliverable: BCPS Interactive prototypes (use case based) • Interactive versions of UI designs • Varying levels of graphic treatment/fidelity • Mimic the intended functionality of the final product • Vital to verify fundamental usability • Used to help product team stay on same page • Used to test with users

  17. Deliverable: UI Design Specification UI Design Specification ideally contains • User types, goals, task groups, tasks of each group group, platforms, and other info essential to scope the task • Key task requirements (min. set of capabilities that must be provided) • Essential use cases (steps taken regardless of system, products, tools) • Product-specific use cases (specific steps taken using BCPS) • Preliminary visuals (sketches, wireframes, modified screen shots, mockups) and descriptions that correlate to the task flows • Final visuals (representative of final look and feel), descriptions, interaction rules that correlate to the task flow • Library of controls, behaviors, formats, etc. • UX goals • Meets primary functional requirements • Considered easy to learn and use by user population

  18. Design Elements Index

  19. Design Behaviors Index • Create • Delete • Save • Selection • Feedback • Errors • Wizards • Undo • Cancel • Drag & Drop

More Related