UX Primer
Desiree 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)
“Satisfy the
Cat”
Guiding principles
Design early
and often
Prioritize user
requirements
Build what
users need
disguised as
what they
wanted
Remember We are not the
user
Learn as much
as possible
about the real
users
Collaborate with
product team
people early and
often
Find ways to
exploit users’
own motivations
Test early and
often, with real
users when
possible
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
Client Needs, Current Usage,
Complementary and Competitive
Products
Identify,
Analyze
Modify
Define
Collect
feedback
Design
Test
UX/UI Requirements
(Personas, Tasks, Goals,
Objectives)
Mockups, Sketches,
Storyboards, Wireframes,
Interactive Prototypes
Usability Tests (formal &
informal)
Ideal process
UX as a whole
-Designed
- tested, validated
with users
User stories
Project lifecycle
Confidential
?
UX as a whole
-Designed
- tested, validated
with users
User stories
Project lifecycle
Confidential
UCD Method: Iterative UI Design Funnel
conservative
conservative
moderate
Final design
blend
radical
radical
Iteration 1
Low fidelity sketches,
wireframes
Iteration next
Iteration final
Wireframes
Interactive models
Overarching UI Design Phase
Product Lifecycle
Multiple Design/Development Sprints
Level of Effort
Design &
UA Test
Development
QA
Design Sprint
Development/QA Sprint
sprint
sprint
sprint
sprint
Product lifecycle
sprint
sprint
Deliverable: Example Use Case
Use Case: Go to ATM to get cash
Essential steps
Product / platform specific 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,
user’s ATM card, and requested
amount of cash
1.
2.
3.
4.
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).
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
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
Deliverable: BCPS Wireframe – Home
(use case based)
Deliverable: More BCPS Wireframes
(use case based)
“conservative”
“stylized”
Deliverable: BCPS ‘Roughs’
“conservative”
(use case based)
BCPS Rubric Results Report
1
Bart Simpson
Y
BettySue Jones
Y
Carol Treen
Y
2
3
4
5
Y
Y
Y
Y
Y
Dan Tan
David Kirkland
Y
Y
Y
Y
Y
Y
6
7
8
9
10
11
12
Score
Y
Y
Y
Y
8
Acceleration
Y
Y
5
Enrichment
1
Scaffolding
3
Scaffolding
8
Acceleration
1
Scaffolding
Y
6
Enrichment
Y
2
Scaffolding
Y
3
Scaffolding
4
Enrichment
3
Scaffolding
7
Acceleration
9
Acceleration
6
Enrichment
Y
Y
Y
Y
Y
Gorje Paulsen
Harry Smith
Y
Howard Hughes
Y
Hubbert Smalls
Y
Y
Y
Y
Madeline Hines
Y
Y
Y
Y
Y
Oscar Neilson
Y
Y
Y
Y
Peter Piper
Y
Y
Y
Y
Y
Y
Y
7
9
10
Rachel Ward
8
Y
Y
Katie House
Question Totals
Y
1
Y
Y
Y
Y
Y
Y
Y
Y
6
7
Y
1
Y
0
9
Y
3
Y
4
Group
Deliverable
BCPS
‘concepts’
(use case based)
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 Targets
Above Grade 2 Learning Target
A student at this level -
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
Can sequence events and describe main character(s)
character(s) in a story with minimal teacher
in a story independently.
prompting or scaffolding.
Classroom Roster
Drag image to cell if child succeeds
8
“stylized”
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 Can describe multiple strategies and/or approaches
(e.g. Visualizing).
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 Can express self in complete sentences that may be
to write complete sentences at times.
simple and compound in structure.
S
E
A
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