ux primer desiree mccrorey. primer outline what’s ux, ui, ucd ucd methods deliverables

19
UX Primer Desiree McCrorey

Upload: leslie-skinner

Post on 22-Dec-2015

230 views

Category:

Documents


1 download

TRANSCRIPT

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

UX PrimerDesiree McCrorey

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

Primer Outline

What’s UX, UI, UCD

UCD Methods

Deliverables

Page 3: 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…

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

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

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

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

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

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

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

Ideal process

Confidential

UX as a whole-Designed- tested, validated with users

User stories

Project lifecycle

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

?

Confidential

UX as a whole-Designed- tested, validated with usersUser stories

Project lifecycle

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

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

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

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

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

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

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

Deliverable: BCPS Wireframe – Home (use case based)

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

Deliverable: More BCPS Wireframes (use case based)

“conservative”

“stylized”

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

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”

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

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”

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

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

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

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

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

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

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

Design Behaviors Index

Create

Delete

Save

Selection

Feedback

Errors

Wizards

Undo

Cancel

Drag & Drop