View
234
Download
1
Category
Tags:
Preview:
Citation preview
UX PrimerDesiree McCrorey
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)
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
wantedFind ways to exploit users’
own motivations
Collaborate with product team people
early and often
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
unsatisfied satisfied
UCD Method: Iterative Design Process
Identify, Analyze
Define
Design
Test
Collect feedback
Modifyiterate
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
Ideal process
Confidential
UX as a whole-Designed- tested, validated with users
User stories
Project lifecycle
?
Confidential
UX as a whole-Designed- tested, validated with usersUser stories
Project lifecycle
UCD Method: Iterative UI Design Funnel
Product Lifecycle
Iteration nextWireframes
Iteration 1Low fidelity sketches,
wireframesIteration final
Interactive models
conservative
radical
moderate Final design
conservative
radical
blend
Overarching UI Design Phase
Development/QA Sprint
Design & UA Test
Development QAL
evel
of
Eff
ort
Design Sprint
Product lifecycle
sprint sprint sprint sprint sprint sprint
Multiple Design/Development Sprints
Essential steps1. User goes to a facility with ATM2. User puts ATM card info into
machine3. User enters PIN 4. User specifies amount of cash to
withdraw5. ATM accepts transaction request6. ATM issues transaction receipt,
user’s ATM card, and requested amount of cash
Product / platform specific steps1. User goes to Wells Fargo ATM2. 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 PIN5. User enters ATM card PIN using ATM physical keyboard and presses
keyboard or on-screen OK button6. System authenticates and presents account management options
(add, withdraw, transfer funds, update info, etc.)7. User taps on-screen “Withdraw” button8. 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 amounts11. User taps on-screen $20012.System presents on-screen transaction receipt options13.User taps “printed receipt” option14.System spools out printed receipt15.System pushes out ATM card16.System waits for card to be removed17.When removed, system issues requested amount in cash18.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).
Deliverable: Example Use Case
Use Case: Go to ATM to get cash
Deliverable: BCPS Wireframe – Home (use case based)
Deliverable: More BCPS Wireframes (use case based)
“conservative”
“stylized”
Deliverable: BCPS ‘Roughs’ (use case based)
1 2 3 4 5 6 7 8 9 10 11 12 Score Group
Bart Simpson Y Y Y Y Y Y Y Y 8 Acceleration
BettySue Jones Y Y Y Y Y 5 Enrichment
Carol Treen Y 1 Scaffolding
Dan Tan Y Y Y 3 Scaffolding
David Kirkland Y Y Y Y Y Y Y Y 8 Acceleration
Gorje Paulsen 1 Scaffolding
Harry Smith Y Y Y Y Y Y 6 Enrichment
Howard Hughes Y Y 2 Scaffolding
Hubbert Smalls Y Y Y 3 Scaffolding
Katie House Y Y Y Y 4 Enrichment
Madeline Hines Y Y Y 3 Scaffolding
Oscar Neilson Y Y Y Y Y Y Y 7 Acceleration
Peter Piper Y Y Y Y Y Y Y Y Y 9 Acceleration
Rachel Ward Y Y Y Y Y Y 6 Enrichment
Question Totals 8 1 7 9 10 1 6 7 0 9 3 4
BCPS Rubric Results Report
“conservative”
Grade 2, Unit 1 Diagnostic RubricTransfer 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 Targets Above Grade 2 Learning Target Notes from the diagnostic event to inform instruction
A student at this level - 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.
Drag image to cell if child succeeds
Classroom Roster
8
DeliverableBCPS ‘concepts’
(use case based)
S
E
A
“stylized”
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
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
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 Dialogs Status, error, settings, tooltips, pop-ups, pop-overs, pop-ins
Typography font 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 Elements voice, 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
Design Behaviors Index
Create
Delete
Save
Selection
Feedback
Errors
Wizards
Undo
Cancel
Drag & Drop
Recommended