UX Sketching and Lo Fi Prototyping - Georgia Institute of...
Transcript of UX Sketching and Lo Fi Prototyping - Georgia Institute of...
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