What is a sketch? 1 Concepts (and selected visuals) from this slide deck are based on: -Buxton, B. (2007) Sketching User Experiences: Getting the Design.

Slides:



Advertisements
Similar presentations
Chapter 11 Design, prototyping and construction 1.
Advertisements

Design, prototyping and construction
Designing in the Wild Bill Buxton Microsoft Research
ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.
Reference Prof. Saul Greenberg, University of Calgary, notes and articles.
Human Computer Interaction
Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.
CPSC 481 Foundations and Principles of Human Computer Interaction
Department of Computer Science
Prototyping Techniques
Saul Greenberg Prototyping techniques Learning different techniques for rapid prototype development.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
The Unified Software Development Process - Workflows Ivar Jacobson, Grady Booch, James Rumbaugh Addison Wesley, 1999.
James Tam User Centered Design Why User Centered Design is important Approaches to User Centered Design.
Chapter 6 The Process of Interaction Design Presented by: Kinnis Gosha, Michael McGill, Jamey White, and Chiao Huang.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Graphical User Interfaces Design and usability Saul Greenberg Professor University of Calgary Slide deck by Saul Greenberg. Permission is granted to use.
Foundations and Principles of Human Computer Interaction Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as.
COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgement:
Midterm Exam Review IS 485, Professor Matt Thatcher.
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
User Interface Design Process Gabriel Spitz. User-Interface design Steps/Goals Understand who are the users and what do they do Articulate how will users.
User Interface Design Process Lecture # 6. CS Structure  Understand the User Interface  Design the User Interface  Evaluate the User Interface.
Sofia Carlander Kinoshita Laboratory 2004/2005
Interactive Sketching Methods for non-sketchers. Part 1. The Vanilla Sketch Captures: an essence of an idea a moment in time the look of an interface.
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
User Interface Design Process Gabriel Spitz. User-Interface design Steps/Goals.
Principles of User Centred Design Howell Istance.
Engineering Design Process
What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook.
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
Lecture 9 Usability of Health Informatics Applications (Chapter 9)
The Sketchbook Chapter 1.4 in Sketching User Experiences: The Workbook.
Prof. James A. Landay Computer Science Department Stanford University Spring 2015 CS 377 E : ENGELBART ’ S UNFINISHED LEGACY : DESIGNING SOLUTIONS TO GLOBAL.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
CS 5150 Software Engineering Lecture 3 Software Processes 2.
Software Engineering User Interface Design Slide 1 User Interface Design.
University of Washington HCDE 518 & INDE 545 Sketching HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns,
Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
Usability Engineering Dr. Dania Bilal IS 582 Spring 2006.
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
The Design Process Courtney Robertson. What are the two types of design? (List and define) Artistic Design: the type of design artists normally do Engineering.
Introduction to Evaluation without Users. Where are you at with readings? Should have read –TCUID, Chapter 4 For Next Week –Two Papers on Heuristics from.
© 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 Prototyping.
Sketching the User Experience1
User Interface Evaluation Introduction Lecture #15.
Sketching and Prototyping Sketches / low / medium / high fidelity prototypes – as investment in design increases (red arrow), so does the formality of.
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
Prof. James A. Landay Computer Science Department Stanford University Spring 2016 CS377E: DESIGNING SOLUTIONS TO GLOBAL GRAND CHALLENGES Design Exploration.
University of Washington HCDE 418 Sketching 1 What is Sketching? HCDE 418.
October 4, 2012.
Methodology Overview basics in user studies Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this.
Sketching and Prototyping
atlassian
atlassian
Task-Centered Walkthrough
INF385G: Topic Discussion Huang, S. C.
Prototyping CPSC 481: HCI I Fall 2014
NSERC Undergraduate Summer Research Award 2014
Wrapping up prototyping
Prototyping.
CS 321: Human-Computer Interaction Design
Design, prototyping and construction
Chapter 11 Design, prototyping and construction 1.
Usability Techniques Lecture 13.
DESIGN, PROTOTYPING and CONSTRUCTION
Interface Design and Usability
Design, prototyping and construction
Presentation transcript:

What is a sketch? 1 Concepts (and selected visuals) from this slide deck are based on: -Buxton, B. (2007) Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann.

Remember the Design Funnel From Buxton. Modified from Pugh, S. (1990) Total design: Integrated methods for successful products engineering. Addison-Wesley. P. 75 Iterative:GeneralIteration 1Iteration 2Iteration 3 overall conceptsexploratoryclarificationresolution Granularity:GeneralCourseMediumFine overallbigintermediatedetailed conceptsgesturesdevelopmentrefinement

Sketching is about Design From Bill Buxton slide deck. Need to attribute the photograph.

The attributes of sketches Quick to make

The attributes of sketches Quick Timely provided when needed

The attributes of sketches Quick Timely Disposable investment in the concept, not the execution

The attributes of sketches Quick Timely Disposable Plentiful they make sense in a collection or series of ideas Image source: -Baskinger, M. (2008) Pencils before Pixels. ACM Interactions, March+April, page 32. Form studies for a digital alarm clock

The attributes of sketches 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 Quick Timely Disposable Plentiful

The attributes of sketches Constrained resolution Consistency with state Suggest & explore rather than confirm suggests /provokes what could be A catalyst evokes conversations & discussion Quick Timely Disposable Plentiful Clear vocabulary

The attributes of sketches Quick to make Timely provided when needed Disposable investment in the concept, not the execution Plentiful they make sense in a collection or series of ideas 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 actual state of development of the concept Suggest & explore rather than confirm value lies in suggesting and provoking what could be i.e., they are the catalyst to conversation and interaction A catalyst evokes conversations and discussion Concepts from Bill Buxton’s Book Sketching User Experiences (2007) Morgan Kaufmann

A Sketch is not a Prototype Difference is a contrast of purpose (always) a contrast in form (usually, but not always) But it’s a continuum sketchprototype

From Sketches to Prototypes Sketches: early ideation stages of design Prototypes: capturing /detailing the actual design from Bill Buxton’s Book Sketching User Experiences (2007) Morgan Kaufmann investment

From Sketches to Prototypes Early design Late design Brainstorm different ideas and representations Choose a representation Rough out interface style Multitude of sketches Sketch variations and details Sketch or low fidelity prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Low to medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems

1 From Bill Buxton’s Book Sketching User Experiences (2007) Morgan Kaufmann excessive instruction

If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.

You now know Attributes of a sketch quick, timely, disposable, plentiful, clear vocabulary, constrained resolution, consistent with design state A sketch is not a prototype difference is a contrast of purpose (always), and form (mostly) Sketch properties evocative, suggest, explore, question, propose, provoke, t Prototype properties didactic, describe, refine, answer, test, resolve, specific, depiction