UX Sketching and Lo Fi Prototyping

Paper and pencil rules!

Fall 2019 PSYCH / CS 6755 2

Agenda

ØPurposeØSketchingØWireflowsØWireframesØPractice

Why Sketch?

ØSketching for idea generationØSketching for hypothesis testingØSketching for ice breaking / logjam unjamming

ØQuick, cheap, easyØFlexible and avoids functional or form biases

Fall 2019 PSYCH / CS 6755 3

UX Sketching vs. UI Sketching

ØAre you working on the eXperience or the Interface?

Fall 2019 PSYCH / CS 6755 4

Sketching Basics

ØMaterialsØShapesØDrawing/sketching tipsØFractal FocusØUsing templatesØSaving your work

Fall 2019 PSYCH / CS 6755 5

Sketching: MaterialsØ Surface (large space, paper,

whiteboard, tablet, napkin)Ø Pens (broadly construed)

v Multiple forms, types, colorsØ Accessories

v Post it notes, transparenciesØ Capture method

Fall 2019 PSYCH / CS 6755 6

Sketching: Shapes

ØBuilding blocksv Circle, triangle, squarev Widgetsv People, objects

Fall 2019 PSYCH / CS 6755 7

Sketching: TipsØ Lines vs. circles, ovalsØ Edges vs. cornersØ “Minimalism”Ø “Rapidism”

Fall 2019 PSYCH / CS 6755 8

Sketching: PeopleØ Lines vs. circles, ovals

Fall 2019 PSYCH / CS 6755 9

Sketching: ThingsØ Just the gistØ Only important details

Fall 2019 PSYCH / CS 6755 10

Sketching: Fractal FocusØ Step 1: Generate ideas (informed brainstorming)Ø Step 2: Add details to selected concepts

Ø Start broad, zoom inv Sketch containers, largest elements first

Ø Zoom out again, then zoom in repeatedlyv Generate variations of form, flow, function, etc.v Add details in iterative manner, as a way of testing

designsv Sketching as hypothesis testing

Ø NOTE: Definition and details depend on developmentFall 2019 PSYCH / CS 6755 11

Sketching: TemplatesØ Get past the non-interesting, non-novel elementsØ Leverage templates, or simply ignore

frame and chrome

Fall 2019 PSYCH / CS 6755 12

Sketching: Saving your work

ØTablet is helpfulØDigital camera / phone for most sketching

v Use app like Evernote to “scan” and share/re-use the sketches

ØCan build up the sketch collectionv Use your own earlier sketches as templates/foundations for

subsequent more detailed sketches

Fall 2019 PSYCH / CS 6755 13

EXERCISE: Sketch Elements

ØCircle, triangle, squarev Consistency vs. variations

ØUI forms (easy?)v Device, software, browser, widgets

ØUX components (harder?)v Persons, objects, spaces, interactions, emotions, etc.

ØAnnotationsv Supporting (but crucial) elements in the sketch processv Different colors can help

Fall 2019 PSYCH / CS 6755 14

WireflowsØ Sequence of interaction, flow through the UX

v “Chunks” (e.g., screens)v Choicesv Branches

Ø Overall flow / total journey (high level)v e.g., flow through a complete ecommerce UX

Ø Screen flow (portion of a UX)v e.g., uploading a file to a resume site

Ø Navigation schemev e.g., tabs, buttons, etc.

Ø Screen statesv messages, errors, spinning beachball, progress barFall 2019 PSYCH / CS 6755 15

Wireflows

Fall 2019 PSYCH / CS 6755 16

Wireflows

Fall 2019 PSYCH / CS 6755 17

Sketching Wireflows

ØDefine a starting pointv (could be many)

ØSketch user journey from that pointØAlternative entries, flows, exitsØAdd annotations

v Including information architecture notes

ØNote: KISS: Keep it simple, still

Fall 2019 PSYCH / CS 6755 18

More Wireflows

Fall 2019 PSYCH / CS 6755 19

More Wireflows (logic flow)

Fall 2019 PSYCH / CS 6755 20

More Wireflows (more than screens)

Fall 2019 PSYCH / CS 6755 21

ØFlows include hardware, software, people, things (not just screens!)

Wireframes (finally)

ØInitial mockup of layout of UIØElements and placingØNot photo-realisticØStill focused on system flow

v Added specificity

ØCould program much of the logic from wireframe

Fall 2019 PSYCH / CS 6755 22

Wireframes

Fall 2019 PSYCH / CS 6755 23

Wireframes

Fall 2019 PSYCH / CS 6755 24

Wireframes

Fall 2019 PSYCH / CS 6755 25

Wireframes (note: mixed media)

Fall 2019 PSYCH / CS 6755 26

Fall 2019 PSYCH / CS 6755 27

Upcoming

ØDesign ChallengeØPrototyping software (mid-fidelity)ØMidtermØPrototyping (physical)ØPoster Session #1