UI Sketching. Revision of Ideas. Why Sketch? Getting the Design Right

Transcription

1 Revision of Ideas Revise design, develop requirements, sketch UI. Today lecture on sketching. Study class on Friday. Draw wireframes, build paper prototypes. Prepare and conduct a formative usability test. The following groups can be test users for each other: group 1 and 12; 2 and 11; 3 and 10; 4 and 9; 5 and 8; and 6 and 7. Study class. Analyze test results and discuss consequences for design. Checkpoint for UI sketching, paper prototypes and formative usability test. UI Sketching from presentations accompanying the book Sketching User Experiences, the Workbook, by S. Greenberg, S. Carpendale, N. Marquardt and B. Buxton Why Sketch? Sketching is not about drawing It is about design. Create Sketching is a tool to help you: o o o o o early ideation o think openly about ideas o express o develop, and o communicate design ideas think through ideas force you to visualize how things come together brainstorming: generate abundant ideas without worrying about quality invent and explore concepts Record Sketching is part of a process: o idea generation, o design elaboration o design choices, o ideas you develop o ideas that you come across o archive ideas for later reflection o engineering Reflect, share, critique, decide o communicate ideas to others o invite responses, criticisms, and alternatives; o choose ideas worth pursuing Exploring alternatives Exploring an idea Getting the Right Design Getting the Design Right The Problem fixates on first idea local hill climbing issue did you reach local vs. global maxima? generate many ideas and variations reflect on all ideas choose the ones that look most promisting develop them in parallel add new ideas as they come up then iterate your final choice

2 Elaboration and Reduction Elaboration and Reduction Elaborate - generate solutions. These are the opportunities Reduce - decide on the ones worth pursuing Repeat - elaborate and reduce again on those solutions Design is choice. Elaboration opportunity seeking Reduction decision-making There are two places where there is room for creativity 1. creativity you bring to enumerating meaningfully distinct options from which to choose Design process 2. creativity you bring to defining the criteria, or heuristics, according to which you make your choices. Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons The attributes of sketches What is a sketch? Chapter 1.2 addendum Quick to make The attributes of sketches The attributes of sketches Quick Timely provided when needed Quick Timely Disposable investment in the process and concept, not the execution if you can t afford to throw it away, it s not a sketch

3 The attributes of sketches The attributes of sketches Quick Quick Timely Timely Disposable Disposable Plentiful Plentiful they make sense in a collection or series of ideas meaning & relevance in context Clear vocabulary rendering & style indicates it s a sketch, not an implementation Constrained resolution no higher than required to capture its concept Consistency with state refinement of rendering matches the state of concept development Form studies for a digital alarm clock Image source: Baskinger, M. (2008) Pencils before Pixels. ACM Interactions, March+April, page 32. Sketching User Experiences: The Workbook Minimal detail Openess and freedom vs. Tight and precise incomplete, room to create complete, nothing left to do Include only what is required to render the intended purpose or concept The attributes of sketches Appropriate Degree of Refinement Make the sketch be as refined as the idea: (a) If you have a solid idea, make the sketch look more defined (b) If you have a hazy idea, the sketch will look much rougher and less defined Quick Constrained resolution Timely Consistency with state Disposable Suggest & explore rather than confirm Plentiful suggests /provokes what could be A catalyst Clear vocabulary evokes conversations & discussion

4 From Sketches to Prototypes From Sketches to Prototypes Sketches: early ideation stages of design Prototypes: capturing /detailing the actual design Early design Brainstorm different ideas and representations Choose a representation investment Rough out interface style Task centered walkthrough and redesign Multitude of sketches Sketch variations and details Sketch or low fidelity prototypes Low to medium fidelity prototypes Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign High fidelity prototypes Limited field testing Alpha/Beta tests Working systems Late design Sketching User Experiences: The Workbook Image from Bill Buxton s Book Sketching User Experiences (2007) Morgan Kaufmann Sketches suggest If you want to get the most out of a sketch excessive instruction you need to leave big enough holes for the imagination to fit in Microsoft clipart The Sketchbook The Sketchbook Chapter 1.4 in Why a sketchbook? brainstorm many initial ideas both good and bad explore & refine ideas both in the large and in the small develop variations, alternatives, details archive your ideas for later review reflect on changing thought processes over time communicate ideas to others by showing choose ones worth developing record good ideas you see elsewhere clip inspiring images from sources like magazines shoot, print and collect inspiring photos

5 Best practices Best practices Carry and use your sketchbook regularly and frequently Fill your pages sketch anywhere, anytime, frequently only works if you carry it with you a single well composed idea a series of related drawings about a design idea things you see that inspire ideas Best practices You don t need to be an artist Sketch alternatives (getting the right design) different aspects of the interface different interface representations different contexts of use Sketch details (getting the design right) detailed sketches that elaborate on interface nuances Annotate drawings descriptions that you cannot draw, textual addendums, sources of ideas, date, any other relevant details Don t erase ideas it s a record of all developing ideas, good and bad Don t use it for other things for design only Artist ideas variations artist's sketch page by Emily R. Feingold portion of a page from Saul Greenberg s sketchbook Artist variations studies artist's sketch page

6 Industrial designer Idea variations ideas variations annotations Four different versions of an idea Form factors for wearable computer watch Source: sketch page from student Industrial designer Samnang Eav Sketch examples design variations From Carloyn Snyder s Book: Paper Prototyping (2003) Morgan Kaufmann, p350 Source: Nicolai Marquardt sketchbook, with permission. many ideas + variations Computer science student Andrew Seniuk a metaprogramming environment (with permission) Sketch examples Overviews storyboards Overviews flow over time relationships flow over time relationships Arrows indicate relationships and flow Storyboard Source: Nicolai Marquardt sketchbook, with permission. Source: Nicolai Marquardt sketchbook, with permission.

7 Sketch examples storyboard transitions Scenarios stories of envisaged uses Five envisaged scenarios of a technology in action From Carloyn Snyder s Book Paper Prototyping (2003) Morgan Kaufmann, p11 Source: Nicolai Marquardt sketchbook, with permission crude drawings Collecting materials related to an idea annotations Information visualization techniques from magazines Source: Nicolai Marquardt sketchbook, with permission Sketch examples screen snapshot portion of a page from Saul Greenberg s sketchbook details to prototype Concept: IM contacts as bugs on a leaf From Carloyn Snyder s Book Paper Prototyping (2003) Morgan Kaufmann p31 McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows Instant Messenger. Western Computer Graphics Symposium (Skigraph 02), MarchD

8 details to prototype details to prototype Design sketches Physical icons clay, glass also a sketch! McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows Instant Messenger. Western Computer Graphics Symposium (Skigraph 02), MarchD details to prototype McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows Instant Messenger. Western Computer Graphics Symposium (Skigraph 02), MarchD You now know Sketchbooks are: a designer s most fundamental tool convenient (pages, size, fold over), durable archive, aesthetic Sketchbooks are for: brainstorming, exploring, refining varying, archiving, reflecting, communicating and choosing ideas recording good ideas you see elsewhere Sketchbook instruments are: pencil optional eraser, sharpener, glue, tape, scissors, camera, and other media Prototype Papier mache also a sketch! see video [.wmv] McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows Instant Messenger. Western Computer Graphics Symposium (Skigraph 02), MarchD Sketchbooks can be filled with: Your sketches (many different kinds) and found objects Sketchbooks are used regularly sketch anywhere, anytime Ideas can occur any time Scribble Sketching Chapter 2.1 in reflection while walking inspires different solution conversation sparks a thought a sci-fi movie depicts something interesting an interaction element in something you are using wake up from a dream eureka moment Image from

9 How do you capture that idea? Scribble sketching Sampling the real world by rapidly sketching out ideas to capture the essence of the idea How draw very quickly (few seconds) very low fidelity focus and emphasis on idea essence sacrifice all other details Try it I will show you an image 15 seconds: choose a single idea or concept from that image to capture 30 seconds: scribble-sketch it Example results Emphasis: layout Details: highlight structures of panes, key buttons & fields Abstracted: icons/labels/ text as caricature scribbles Left out: decorations, actual text, lesser interface controls

10 Example results Design Rationale Emphasis: folder navigation Details: annotated interaction methods in the navigation bar Abstracted: icons/labels/ text as caricature scribbles Left out: decorations, actual text, lesser interface controls? Issue (What, Why, How) # Option + Pro - Contra! Decision Sketching in the dark You now know So you can do it even when not looking Scribble sketches movie theatre, meetings Example: While watching Avatar: transparent displays for communication are done very rapidly (few seconds) serve to capture critical ideas on the fly sacrifice detail and fidelity to speed Can even be done without looking Photo from the movie Avatar, 20th Century Fox The Vanilla Sketch Drawings vary in fidelity & detail Captures and explains a moment in interaction time Comprises several basic elements

11 Annotations Computer Telephone Last Name: First Name: Phone: Place Call Help Annotations Arrows as Annotations Names labels, explanatory notes Can also location identifies sketch parts they refer to Example proximity to area braces for large areas arrow to specific area emphasise area of interest relate different parts of a sketch indicate direction show movement indicate a sequence of events (interaction flow) Arrows example Annotations and Arrows example direction and movement interaction flow across sketches Sketching User Here. Experiences: The Workbook Image from: Mijksenaar and Westendorp, Open Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174

12 Annotations and Arrows example portion of a page from Saul Greenberg s sketchbook Notes Annotations and Arrows example Sketching User Experiences: The Workbook buddy bugs - sketches and final prototype, by former 581 student Susannah McPhail Notes Text where spatial location is not important ideas about design elements left out of the drawing alternate design options of sketch elements design issues Notes Annotations, Notes, etc ideas about design elements left out of the drawing outstanding questions assumptions context of use?, #, +, -,! Can be drawn directly on sketch as a layer o tracing paper o digital layer Can be words, lists, paragraphs, sentence fragments Image from

13 You now know As a single sketch Sketches capture a moment in interaction time They are more than just drawings textual annotations are spatially relevant arrows have illustrative power textual notes are stand-alone The Branching Storyboard Storyboards will Contain Branches Chapter 4.3 in Sketching the User Interface: The Workbook Multiple transitions from a state Result of user actions environmental actions system configuration Image from: Image from: Anderson et. Al. Buttress. Usenix Fast 04 The Abstract Branching Diagram Visual Interface Branching Diagram

14 Visual Interface Branching Diagram Indexed Branching Diagram By interface hot spots Computer Telephone Last Name: First Name: Phone: Place Call Help Help Computer Telephone You can enter either the person's Last Name: name or their number. First Name: Then hit the place Phone: button to call them Return Place Call Help Computer Telephone Last Name: Greenberg First Name: Phone: Place Call Help Computer Telephone Last Dialling... Name: Greenberg First Name: Phone: Cancel Place Call Help Indexed Branching Diagram Interacting with a PDA-based Agenda Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Interacting with a PDA-based Agenda Interacting with a PDA-based Agenda The Overview map (where are we?) Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

15 Interacting with a PDA-based Agenda Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford Check to see what the meeting is about Click on that time slot Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Choosing how to contact Mary Sending Mary a text message concering the Tour which is the topic of the meeting Click on Mary s name Select Message from menu Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Select Message Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p From Carloyn Snyder s Book Paper Prototyping (2003) Morgan Kaufmann, p11

16 You Now Know Branching storyboards multiple transitions from a state illustrate decision paths manage complexity Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities can be decomposed to sequential storyboards or simple branching storyboards Basic sketch elements Composing objects Lines, rectangles, and circles will be essential visual elements for many of you sketches Become familiar with this variety of shapes (play with line thickness and hatching styles) Combine basic sketch elements to compose a variety of shapes and objects Sketching vocabulary: best practices Simplicity is key: try to simplify sketched objects to the minimum necessary detail Icons can be a good source of inspiration for simple shapes representing objects 3D is not necessary (most of the time) Sketch with fast, long strokes

17 Drawing people Drawing people Sketches of interactive systems often include people Many possible techniques for drawing a person: Comic-like sketches can also represent people Activities Bodies and emotions By varying people s poses you can express a variety of activities Postures can express the emotional state of a person. Symbols next to the person can emphasize this effect Action lines can emphasize a person s movements Faces and emotions Faces and emotions Express people s emotions through simple variations of how you draw a face Express people s emotions through simple variations of how you draw a face

18 Faces and emotions Combining postures + faces Express people s emotions through simple variations of how you draw a face Combining sketched elements You now know Combine the postures of people, facial expressions, and other sketched elements to illustrate specific situations and actions. Sketching vocabularies are your basic toolset for sketching Simplicity is key People s postures and emotions can be expressed through simple line sketches Learning a basic sketching vocabulary lets you sketch more efficiently Permissions You are free: to Share to copy, distribute and transmit the work to Remix to adapt the work Under the following conditions: Attribution You must attribute the work in the manner specified by the author (but not in any way that suggests that they endorse you or your use of the work) by citing: from presentations accompanying the book Sketching User Experiences, the Workbook, by S. Greenberg, S. Carpendale, N. Marquardt and B. Buxton Noncommercial You may not use this work for commercial purposes, except to assist one s own teaching and training within commercial organizations. Share Alike If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one. With the understanding that: Not all material have transferable rights materials from other sources which are included here are cited Waiver Any of the above conditions can be waived if you get permission from the copyright holder. Public Domain Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license. Other Rights In no way are any of the following rights affected by the license: Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations; The author's moral rights; Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights. Notice For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.