Sketching and Prototyping PDF

10/29/2024 Sketching and Prototyping 1 Sketch a conversation between the designer and the artifact 2 1  10...

10/29/2024 Sketching and Prototyping 1 Sketch a conversation between the designer and the artifact 2 1  10/29/2024 Why sketch? Sketching offers a visual medium for exploration, offering cognitive scaffolding to externalize cognition Sketching serves as a tool for designers to converse about their ideas. Helps externalize cognition, offering a low-cost way to explore ideas. 3 Being creative with sketches How do you produce a great idea? Generate lots of ideas Work through ideas through externalization in sketch Critique the ideas Refine them to make them better Sketching offers a low-cost medium for working with early ideas before committing to one Design is process of creation & exploration 4 2  10/29/2024 Sketching vs. Prototyping 5 Physical sketches Production tools for sketching: whiteboards, blackboards, cork boards, flip chart easels post it notes duct tape, scotch tape, push pins, staples marking pens, crayons, spray paint scissors, hobby knives, foam core board duct tape bits of cloth, rubber 6 3  10/29/2024 The space remembers Covering walls, whiteboards, etc., materials are extremely useful Provides fast access for revisiting and remixing old ideas Facilitates group discussion of design 7 Sketches are sketchy Not mechanically correct and perfectly straight lines Freehand, open gestures Strokes may miss connections Resolution & detail low enough to suggest is concept Deliberately ambiguous & abstract, leaving “holes” for imagination 8 4  10/29/2024 Rules for sketching Everyone can sketch; you do not have to be artistic Most ideas conveyed more effectively with sketch than words. Sketches are quick and inexpensive to create; do not inhibit early exploration Sketches are disposable; no investment in sketch itself Sketches are timely; made in-the-moment, just-in-time Sketches are plentiful; entertain large # of ideas w/ multiple sketches of each 9 Sketches include annotations 10 5  10/29/2024 Fidelity of sketches & mockups 11 Storyboards for UI design Sequence of visual “frames” illustrating interplay between user & envisioned system Explains how app fits into a larger context through a single scenario / story Bring design to life in graphical clips - freeze frame sketches of user interactions “Comic-book” style illustration of a scenario, with actors, screens, interaction, & dialog 12 6  10/29/2024 Crafting a storyboard Set the stage: Who? What Where? Why? When? Show key interactions with application Show consequences of taking actions May also think about errors 13 Example elements of a UI storyboard Hand-sketched pictures annotated with a few words Sketch of user activity before or after interacting with the system Sketches of devices & screens Connections with system (e.g., database connection) Physical user actions Cognitive user action in “thought balloons” 14 7  10/29/2024 Example: ticket kiosk 15 Example: ticket kiosk 16 8  10/29/2024 Frame transitions Transitions between frames are particularly important What users think, how users choose actions Many problems can occur here (e.g., gulfs of execution & evaluation) Useful to think about how these work; can add thought bubbles to describe 17 Wireframes Lines & outlines (“wireframes”) of boxes & other shapes Capturing emerging interaction designs Schematic designs to define screen content & visual flow Illustrate approximate visual layout, behavior, and transitions emerging from task flows Deliberate unfinished: do not contain finished graphics, colors, or fonts 18 9  10/29/2024 Example 19 Example 20 10  10/29/2024 Wireframes Can be used to step through a particular scenario Focus on key screens rather than every screen Tools can help Can be made clickable Can use templates; copy & edit similar screens 21 Creating a wireframe What are the key interactions needed to support design? What widgets support these interactions? What are the best ways to lay them out? How do these relate to conceptual design & user’s mental model? 22 11  10/29/2024 Creating a wireframe What are all of the items: toolbars, scrollbars, windows, …? Are there too many widgets on the screen? What happens when data is larger than available space? Will the entire page scroll or be an individual panel? How much detail do the items need to show? 23 Design critiques Stylized meetings to get feedback on design sketches & prototypes Request feedback from peers History: studio art education 24 12  10/29/2024 Designer: Frame the discussion State explicitly: What would you like comments on? Overall idea? Usability? Specific interaction design? Visual design? Take a dispassionate stance (this is hard!) Show alternatives where possible 25 Prototyping How do you know your system design is right before you invest the time to build it? Answer: prototyping! Evaluation performed before investing resources in building a finished product Early version of a system constructed much faster & with less expense used to evaluate & refine design ideas 26 13  10/29/2024 Interactivity of prototypes Scripted, click-through prototypes Prototype w/ clickable links to move between screens Live-action storyboard of screens Simulates real task flow but static content Fully-implemented prototypes Usually expensive to implement the actual system But can build key pieces of system first to evaluate 27 Paper prototypes Low fidelity prototype paper mockups Goal: get feedback from users early very low cost interactive prototype of the envisioned interaction design 28 14  10/29/2024 Paper prototyping (1) Set a realistic deadline Gather set of paper prototyping materials Work fast & do not color within the lines Reuse existing sketches & mockups Make underlying paper mockups of key screens 29 Paper prototyping (2) Use paper cutouts & tape onto full-size transparencies as “interaction sheets” for moving parts, making modular by including only a small amount Do not write or mark on interaction sheets Be creative Reuse at every level Cut corners wherever possible (trade accuracy against efficiency) Make a “this feature not implemented” message 30 15  10/29/2024 Paper prototyping (3) Include “decoy” user interface objects not needed for expected tasks Accommodate data value entry by users w/ blank transparencies Organize materials to manage complex task threads Pilot test thoroughly 31 16