UX Primer Desiree McCrorey. Primer Outline What’s UX, UI, UCD UCD Methods Deliverables

Download UX Primer Desiree McCrorey. Primer Outline What’s UX, UI, UCD UCD Methods Deliverables

Post on 22-Dec-2015




0 download

Embed Size (px)


  • Slide 1
  • UX Primer Desiree McCrorey
  • Slide 2
  • Primer Outline Whats UX, UI, UCD UCD Methods Deliverables
  • Slide 3
  • What is UX (User Experience) Design activities that try to keep users from experiencing
  • Slide 4
  • UCD (User Centered Design) Guiding principles Design early and often Remember - We are not the user Prioritize user requirements Learn as much as possible about the real users Test early and often, with real users when possible Satisfy the Cat Build what users need disguised as what they wanted Find ways to exploit users own motivations Collaborate with product team people early and often
  • Slide 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 Cat http://www.youtube.com/watch?v=dln9xDsmCoY http://www.youtube.com/watch?v=dln9xDsmCoY unsatisfied satisfied
  • Slide 6
  • UCD Method: Iterative Design Process Identify, Analyze Identify, Analyze Define Design Test Collect feedback Collect feedback Modify iterate Usability Tests (formal & informal) UX/UI Requirements (Personas, Tasks, Goals, Objectives) Mockups, Sketches, Storyboards, Wireframes, Interactive Prototypes Client Needs, Current Usage, Complementary and Competitive Products
  • Slide 7
  • Ideal process Confidential UX as a whole -Designed - tested, validated with users UX as a whole -Designed - tested, validated with users User stories Project lifecycle
  • Slide 8
  • ? Confidential UX as a whole -Designed - tested, validated with users UX as a whole -Designed - tested, validated with users Project lifecycle
  • Slide 9
  • UCD Method: Iterative UI Design Funnel Product Lifecycle Iteration next Wireframes Iteration 1 Low fidelity sketches, wireframes Iteration final Interactive models conservative radical moderate Final design conservative radical blend Overarching UI Design Phase
  • Slide 10
  • Development/QA Sprint Design & UA Test DevelopmentQA Level of Effort Design Sprint Product lifecycle sprint Multiple Design/Development Sprints
  • Slide 11
  • Essential steps 1.User goes to a facility with ATM 2.User puts ATM card info into machine 3.User enters PIN 4.User specifies amount of cash to withdraw 5.ATM accepts transaction request 6.ATM issues transaction receipt, users ATM card, and requested amount of cash Product / platform specific steps 1.User goes to Wells Fargo ATM 2.System flashes ATM card slot green lit frame 3.User pushes Wells Fargo ATM debit card into ATM machine card slot 4.System validates card, retains card and displays on-screen instructions to prompt user to enter PIN 5.User enters ATM card PIN using ATM physical keyboard and presses keyboard or on-screen OK button 6.System authenticates and presents account management options (add, withdraw, transfer funds, update info, etc.) 7.User taps on-screen Withdraw button 8.System presents withdraw funds options (from checking, savings, other accounts) and shows amounts available for withdrawal per account 9.User taps on-screen Checking Account 10.System presents most popular withdrawal amounts on-screen ($100, $200, $300) and option to enter other amounts 11.User taps on-screen $200 12.System presents on-screen transaction receipt options 13.User taps printed receipt option 14.System spools out printed receipt 15.System pushes out ATM card 16.System waits for card to be removed 17.When removed, system issues requested amount in cash 18.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). 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). Deliverable: Example Use Case Use Case: Go to ATM to get cash
  • Slide 12
  • Deliverable: BCPS Wireframe Home (use case based)
  • Slide 13
  • Deliverable: More BCPS Wireframes (use case based) conservative stylized
  • Slide 14
  • Deliverable: BCPS Roughs (use case based) 123456789101112ScoreGroup Bart SimpsonYYYYYYYY8Acceleration BettySue JonesYYYYY5Enrichment Carol TreenY1Scaffolding Dan TanYYY3Scaffolding David KirklandYYYYYYYY8Acceleration Gorje Paulsen1Scaffolding Harry SmithYYYYYY6Enrichment Howard HughesYY2Scaffolding Hubbert SmallsYYY3Scaffolding Katie HouseYYYY4Enrichment Madeline HinesYYY3Scaffolding Oscar NeilsonYYYYYYY7Acceleration Peter PiperYYYYYYYYY9Acceleration Rachel WardYYYYYY6Enrichment Question Totals8179101670934 BCPS Rubric Results Report conservative
  • Slide 15
  • Grade 2, Unit 1 Diagnostic Rubric Transfer Goal(s): Students will be able to use their knowledge of reading strategies (e.g., monitoring comprehension, visualizing, making connections, summarizing, asking questions) to independently read a variety of texts. Grade 2 Learning TargetsAbove Grade 2 Learning Target Notes from the diagnostic event to inform instruction A student at this level - Unit Essential Question 1: What risks are worth taking? Can sequence events and identify main character(s) in a story with minimal teacher prompting or scaffolding. Can sequence events and describe main character(s) in a story independently. Can identify main problem and story lesson(s) with minimal teacher prompting and scaffolding. Can describe main problem(s) and story lesson(s) independently. Unit Essential Question 2: What does a good reader do? Can describe one strategy used during reading (e.g. Visualizing). Can describe multiple strategies and/or approaches taken during reading (e.g. Visualizing, making connections, retelling). Unit Essential Question 3: What is a complete thought? Can express self primarily in phrases but is able to write complete sentences at times. Can express self in complete sentences that may be simple and compound in structure. 8 Deliverable BCPS concepts (use case based) S E A stylized
  • Slide 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
  • Slide 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
  • Slide 18
  • Design Elements Index Navigational structure Information/content architecture content organization, hierarchy, tables, grids, information density, grouping and containment Interactive Elements dialogs, feedback, buttons, checkboxes/radio buttons, accumulators, dropdown lists, highlights, toggles, scrollbars, breadcrumbs, trees, links, popovers, tooltips, menus, page controls, progress indicators, wizards, etc., settings Secondaries and DialogsStatus, error, settings, tooltips, pop-ups, pop-overs, pop-ins Typographyfont sizes, emphases, style, line spacing, alignments Visual Properties depth of field, colors, separators, texture, gravity, reflection, fonts, icons, symbols, graphics, labels, branding, metaphors, graphs, charts, grids, selected/selectable property, disabled property, animations, light & shadow Language Elementsvoice, lexicon, abbreviations, capitalization, error & help text, status Page Elements header, masthead, footer, logo placement, titles, status/message placements, search, account access, help, metaphors, forms, Primary Page Layouts alignment, scale, white space, relationship harmony, hierarchy, proportions, position, balance Account Security Protocols/Procedures Login/logout, security questions, account recovery
  • Slide 19
  • Design Behaviors Index Create Delete Save Selection Feedback Errors Wizards Undo Cancel Drag & Drop