Sketching and Prototyping

Slides:

Advertisements

Similar presentations

Design, prototyping and construction

Advertisements

Saul Greenberg Storyboarding –a series of key frames originally from film; used to get the idea of a scene snapshots of the interface at particular points.

CSCI 4163 / CSCI 6610, Winter 2014 Human-Computer Interaction web.cs.dal.ca/~hawkey/4163 Dr. Kirstie Hawkey,

ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.

TUR - Prototyping How to have a satisfied user? What are the sources of user satisfaction? What are the sources of user satisfaction? Where the user.

Reference Prof. Saul Greenberg, University of Calgary, notes and articles.

Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.

User Centered Design and Prototyping

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.

Concepts and Prototypes

1 CS 544 Prototyping Low and Medium Fi Prototyping Acknowledgement: Some of the material in these lectures is based on material prepared for similar courses.

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:

James Tam User Centered Design And Prototyping Why User Centered Design is important Approaches to User Centered Design Rapid prototype techniques.

SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.

User Centered Design and Prototyping

James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.

Objectives By the end of class, you will be able to… Explain why prototyping is an important phase of design. Create and test paper prototypes. Explain.

User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.

Sequential Storyboards Chapter 4.1 in Sketching the User Interface: The Workbook Image from:

Spring /6.831 User Interface Design and Implementation1 Lecture 8: Generating Designs.

Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.

Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.

SE 204 – Human Computer Interaction Lecture 6: Prototypes Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO) 1.

Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004.

Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 1 Informatics 121 Software Design I Lecture 12.

What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook.

HCI Prototyping Chapter 6 Prototyping. Learning Outcomes At the end of this lecture, you should be able to: –Define the term “prototyping” –Explain the.

S556 SYSTEMS ANALYSIS & DESIGN Week 11. Creating a Vision (Solution) SLIS S556 2  Visioning:  Encourages you to think more systemically about your redesign.

COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgements:

CPSC User Centered Design and Prototyping Why user-centered design is important Prototyping User centered design Prototyping methods.

Problem with vanilla sketches

Supporting rapid design and evaluation of pervasive application: challenges and solutions Lei Tang 1,2, Zhiwen Yu 1, Xingshe Zhou 1, Hanbo Wang 1, Christian.

University of Washington HCDE 518 & INDE 545 Lo-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy Ko,

CS2003 Usability Engineering Human-Centred Design Dr Steve Love.

Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)

ICS 463, Intro to Human Computer Interaction Design: 5. Design Processes Dan Suthers.

Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,

Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.

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.

Sketching and Prototyping Sketches / low / medium / high fidelity prototypes – as investment in design increases (red arrow), so does the formality of.

Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN.

Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.

James Tam User Centered Design And Prototyping Rapid prototyping techniques Why User Centered Design is important Approaches to User Centered Design.

Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.

Design, prototyping and construction

Sampath Jayarathna Cal Poly Pomona

Task-Centered Walkthrough

Prototyping & Design CS 352.

Wrapping up prototyping

Introduction to Prototyping

Projects 2 05/05/11.

Cognitive Walkthrough

Design, prototyping and construction

Cognitive Walkthrough

Chapter 11 Design, prototyping and construction 1.

Mockups and Prototypes

UNDERSTAND THE CHALLENGE

ITEC 334 Fall 2009 Computer Programming in the Web Era

Design, prototyping and construction

Interface Design and Usability

Design, prototyping and construction

Presentation transcript:

Sketching and Prototyping Sketches / low / medium / high fidelity prototypes as investment in design increases (red arrow), so does the formality of the criteria whereby concepts are reviewed or accepted From design to evaluation similarly, interface design (idea generation) progresses to usability testing (idea debugging and refinement) From Design for the Wild, Bill Buxton (in press) with permission

Sketching and Prototyping Early design Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems Late design

© MIT Students

© MIT Students

© MIT Students

Sketches drawing of the outward appearance of the intended system crudity means people concentrate on high level concepts but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place Call Help

Storyboarding a series of key frames as sketches originally from film; used to get the idea of a scene snapshots of the interface at particular points in the interaction users can evaluate quickly the direction the interface is heading Excerpts from Disney’s Robin Hood storyboard, www.animaart.com/Cellar/disneyart/90robin%20storyboard.jpg.html

note how each scene in this storyboard is annotated From www.michaelborkowski.com/storyboards/images/big_bigguy1.gif

Scan the stroller -> Initial screen Place the order -> Change the color ->

Scan the shirt -> Alternate path… Delete that item-> Touch previous item ->

Storyboarding Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington From Design for the Wild, Bill Buxton with permission

Patterns are good solutions to common problems Design Patterns Patterns are good solutions to common problems Software engineering General GUI Web Kinds of UI patterns Structural Navigation Widgets

Structural Patterns

© Apple, Inc

© Microsoft © Apple, Inc.

© FileMatrix

© Google Inc.

Techniques for Simplicity: Remove inessential elements © Google Inc.