Revision of Ideas • Revise design, develop requirements, sketch UI. Today lecture on sketching. • Draw wireframes, build paper prototypes. On Friday lecture on paper prototyping. • 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 November 19. • Analyze test results and discuss consequences for design. • Supervision in week 47: 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 http://sketchbook.cpsc.ucalgary.ca Sketching is not about drawing It is about design. Sketching is a tool to help you: o express o develop, and o communicate design ideas Sketching is part of a process: o o o o idea generation, design elaboration design choices, engineering Sketching User Experiences: The Workbook Why Sketch? • Create o o o o o o early ideation think openly about 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 o ideas you develop o ideas that you come across o archive ideas for later reflection • Reflect, share, critique, decide o communicate ideas to others o invite responses, criticisms, and alternatives; o choose ideas worth pursuing Sketching User Experiences: The Workbook Exploring an idea Getting the Design Right The Problem fixates on first idea local hill climbing issue did you reach local vs. global maxima? Sketching User Experiences: The Workbook Exploring alternatives Getting the Right Design • • • • • • 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 Sketching User Experiences: The Workbook 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 Elaboration Reduction opportunity seeking decision-making Design process Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons Sketching User Experiences: The Workbook Elaboration and Reduction Design is choice. There are two places where there is room for creativity 1. creativity you bring to enumerating meaningfully distinct options from which to choose 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 Sketching User Experiences: The Workbook What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook The attributes of sketches Quick • to make Sketching User Experiences: The Workbook The attributes of sketches Quick Timely • provided when needed Sketching User Experiences: The Workbook The attributes of sketches 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 Sketching User Experiences: The Workbook The attributes of sketches Quick Timely Disposable Plentiful • they make sense in a collection or series of ideas • meaning & relevance in context 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 The attributes of sketches Quick Timely Disposable Plentiful 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 Sketching User Experiences: The Workbook Openess and freedom vs. Tight and precise • incomplete, room to create • complete, nothing left to do Sketching User Experiences: The Workbook Minimal detail • Include only what is required to render the intended purpose or concept Sketching User Experiences: The Workbook 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 Sketching User Experiences: The Workbook The attributes of sketches 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 Sketching User Experiences: The Workbook From Sketches to Prototypes • Sketches: early ideation stages of design • Prototypes: capturing /detailing the actual design investment Image from Bill Buxton’s Book Sketching User Experiences (2007) MorganSketching KaufmannUser Experiences: The Workbook From Sketches to Prototypes Early design Brainstorm different ideas and representations Choose a representation 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 excessive instruction Sketching User Experiences: The Workbook Sketches suggest If you want to get the most out of a sketch… …you need to leave big enough holes for the imagination to fit in Microsoft clipart The Sketchbook Chapter 1.4 in Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook The Sketchbook 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 Sketching User Experiences: The Workbook Best practices Carry and use your sketchbook regularly and frequently • sketch anywhere, anytime, frequently • only works if you carry it with you Sketching User Experiences: The Workbook Best practices Fill your pages • a single well composed idea • a series of related drawings about a design idea • things you see that inspire ideas Sketching User Experiences: The Workbook Best practices 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 Sketching User Experiences: The Workbook You don’t need to be an artist portion of a page from Saul Greenberg’s sketchbook Sketching User Experiences: The Workbook Sketchbook examples Artist • ideas • variations artist's sketch page by Emily R. Feingold Sketching User Experiences: The Workbook Sketchbook examples Artist • variations • studies Sketching User Experiences: The Workbook artist's sketch page http://www.fmhs.cnyric.org/art/StudioFoundation/Sketchbook/sketchbook.html Sketchbook examples Industrial designer • ideas • variations • annotations Form factors for wearable computer watch Source: sketch page from student Industrial designer Samnang Eav Sketching User Experiences: The Workbook Sketchbook examples Idea variations Four different versions of an idea Source: Nicolai Marquardt sketchbook, with permission. Sketching User Experiences: The Workbook Sketch examples – design variations From Carloyn Snyder’s Book: Paper Prototyping (2003) Morgan Kaufmann, p350 Sketching User Experiences: The Workbook Sketchbook examples Computer science student Andrew Seniuk – a metaprogramming environment (with permission) many ideas + variations Sketching User Experiences: The Workbook Sketchbook examples Overviews • flow over time • relationships Arrows indicate relationships and flow Source: Nicolai Marquardt sketchbook, with permission. Sketching User Experiences: The Workbook Sketch examples – storyboards Overviews • flow over time • relationships Storyboard Source: Nicolai Marquardt sketchbook, with permission. Sketching User Experiences: The Workbook Sketch examples – storyboard transitions From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11 Sketching User Experiences: The Workbook Sketchbook examples Scenarios • stories of envisaged uses Five envisaged scenarios of a technology in action Source: Nicolai Marquardt sketchbook, with permission Sketching User Experiences: The Workbook Sketchbook examples Collecting • materials related to an idea Information visualization techniques – from magazines Source: Nicolai Marquardt sketchbook, with permission Sketching User Experiences: The Workbook Sketchbook examples crude drawings annotations portion of a page from Saul Greenberg’s sketchbook Sketching User Experiences: The Workbook Sketch examples – screen snapshot From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31Sketching User Experiences: The Workbook Sketchbook examples – details to prototype Concept: • IM contacts as bugs on a leaf McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger. Western Computer Graphics Symposium (Skigraph’02), MarchD Sketching User Experiences: The Workbook Sketchbook examples – details to prototype Design sketches McPhail, S. (2002) Buddy Bugs: A Physical User Interface for Windows® Instant Messenger. Western Computer Graphics Symposium (Skigraph’02), MarchD Sketching User Experiences: The Workbook Sketchbook examples – details to prototype 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 Sketching User Experiences: The Workbook Sketchbook examples – details to prototype 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 Sketching User Experiences: The Workbook 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 Sketchbooks can be filled with: • Your sketches (many different kinds) and found objects Sketchbooks are used regularly • sketch anywhere, anytime Sketching User Experiences: The Workbook Scribble Sketching Chapter 2.1 in Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook Ideas can occur any time • • • • • • 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 http://skyvington.blogspot.ca/2010/11/eureka.html Sketching User Experiences: The Workbook 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 Sketching User Experiences: The Workbook 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 Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook 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 Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook Example results 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 Sketching User Experiences: The Workbook Design Rationale • • • • • ? Issue (What, Why, How) # Option + Pro - Contra ! Decision Sketching User Experiences: The Workbook Sketching in the dark So you can do it even when not looking • movie theatre, meetings… Example: While watching Avatar: transparent displays for communication Photo from the movie Avatar, 20th Century Fox Sketching User Experiences: The Workbook You now know Scribble sketches • • • • 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 Sketching User Experiences: The Workbook The Vanilla Sketch Captures and explains a moment in interaction time Comprises several basic elements Sketching User Experiences: The Workbook Drawings – vary in fidelity & detail Sketching User Experiences: The Workbook Computer Telephone Last Name: First Name: Phone: Place Call Help Sketching User Experiences: The Workbook Annotations Sketching User Experiences: The Workbook Annotations Names labels, explanatory notes • location identifies sketch parts they refer to Example • proximity to area • braces for large areas • arrow to specific area Sketching User Experiences: The Workbook Arrows as Annotations Can also • • • • • emphasise area of interest relate different parts of a sketch indicate direction show movement indicate a sequence of events (interaction flow) Sketching User Experiences: The Workbook Arrows example • direction and movement • interaction flow across sketches Sketching User Here. Experiences: The Image from: Mijksenaar and Westendorp, Open Workbook Annotations and Arrows example Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174 Sketching User Experiences: The Workbook Annotations and Arrows example portion of a page from Saul Greenberg’s sketchbook Sketching User Experiences: The Workbook Annotations and Arrows example Sketching User Experiences: The buddy bugs - sketches and final prototype, by former 581 student Susannah McPhail Workbook Notes Text where spatial location is not important Sketching User Experiences: The Workbook Notes ideas about design elements left out of the drawing alternate design options of sketch elements design issues Sketching User Experiences: The Workbook Notes • ideas about design elements left out of the drawing • outstanding questions • assumptions • context of use… • ?, #, +, -, ! Can be • words, lists, paragraphs, sentence fragments… Sketching User Experiences: The Workbook Annotations, Notes, etc Can be drawn • directly on sketch • as a layer o tracing paper o digital layer Image from http://www.shop.casaleganitos.com/silkscreens/architecture-drawings/ Sketching User Experiences: The Workbook You now know 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 Sketching User Experiences: The Workbook As a single sketch Sketching User Experiences: The Workbook The Branching Storyboard • Chapter 4.3 in Sketching the User Interface: The Workbook Image from: Storyboards will Contain Branches • Multiple transitions from a state • Result of • user actions • environmental actions • system configuration… Image from: Anderson et. Al. Buttress. Usenix Fast ‘04 Sketching User Experiences: The Workbook The Abstract Branching Diagram Sketching User Experiences: The Workbook Visual Interface Branching Diagram Sketching User Experiences: The Workbook Visual Interface Branching Diagram • By interface hot spots… Computer Telephone Last Name: First Name: Phone: Place Call Help Computer Telephone Help You can enter either the person's name or their Last Name: number. Then hit the First Name: place button to call them Phone: Place Call Return Help Computer Telephone Computer Telephone Last Name: Greenberg First Name: Phone: Dialling.... Last Name: Greenberg First Name: Cancel Phone: Place Call Place Call Help Help Sketching User Experiences: The Workbook Indexed Branching Diagram Sketching User Experiences: The Workbook Indexed Branching Diagram Sketching User Experiences: The Workbook Interacting with a PDA-based Agenda Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Interacting with a PDA-based Agenda Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Interacting with a PDA-based Agenda The Overview map (where are we?) Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Interacting with a PDA-based Agenda Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Check to see what the meeting is about Click on that time slot Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Choosing how to contact Mary Click on Mary’s name Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Sending Mary a text message concering the ‘Tour’ which is the topic of the meeting Select Message from menu Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook Select Message Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Sketching User Experiences: The Workbook 1From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p11 Sketching User Experiences: The Workbook You Now Know • Branching storyboards • multiple transitions from a state • illustrate decision paths • manage complexity • can be decomposed to sequential storyboards or simple branching storyboards Sketching User Experiences: The Workbook Sketching Vocabulary •Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities Basic sketch elements • 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) Sketching User Experiences: The Workbook Composing objects Combine basic sketch elements to compose a variety of shapes and objects Sketching User Experiences: The Workbook 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 Sketching User Experiences: The Workbook Sketching User Experiences: The Workbook Drawing people • Sketches of interactive systems often include people • Many possible techniques for drawing a person: Sketching User Experiences: The Workbook Drawing people Comic-like sketches can also represent people Sketching User Experiences: The Workbook Activities By varying people’s poses you can express a variety of activities Action lines can emphasize a person’s movements Sketching User Experiences: The Workbook Bodies and emotions • Postures can express the emotional state of a person. • Symbols next to the person can emphasize this effect Sketching User Experiences: The Workbook Faces and emotions Express people’s emotions through simple variations of how you draw a face Sketching User Experiences: The Workbook Faces and emotions Express people’s emotions through simple variations of how you draw a face Sketching User Experiences: The Workbook Faces and emotions Express people’s emotions through simple variations of how you draw a face Sketching User Experiences: The Workbook Combining postures + faces Sketching User Experiences: The Workbook Combining sketched elements Combine the postures of people, facial expressions, and other sketched elements to illustrate specific situations and actions. Sketching User Experiences: The Workbook You now know • 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 • Sketching User Experiences: The Workbook 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. Sketching User Experiences: The Workbook