cse 440 introduction to hci
play

CSE 440: Introduction to HCI User Interface Design, Prototyping, and - PowerPoint PPT Presentation

Dec 28, 2022 •254 likes •989 views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 08: James Fogarty Storyboarding Daniel Epstein Brad Jacobson King Xia Tuesday/Thursday 10:30 to 11:50 MOR 234 Today Milestones Design Review

  1. CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 08: James Fogarty Storyboarding Daniel Epstein Brad Jacobson King Xia Tuesday/Thursday 10:30 to 11:50 MOR 234

  2. Today Milestones Design Review (“1x2”) Due Friday Getting the Right Design Due Tuesday Presentations Start Thursday Class Storyboarding Design Check- In (“3x4”) Critique

  3. Tasks in Design Tasks guide your exploration of a design Creating scenarios for each task illustrates what a person does what they see step-by-step performance of task

  4. Sketching

  5. Sketching

  6. Sketching and Storyboards

  7. Sketching and Storyboards

  8. Sketching and Storyboards

  9. Sketching and Storyboards

  10. Sketching and Storyboards

  11. Illustrating Time Storyboards come from film and animation Give a “script” of important events leave out the details concentrate on the important interactions

  12. Storyboards Can be used to explore Much faster and less expensive to produce Can therefore explore more potential approaches Notes help fill in missing pieces of the proposal

  13. Storyboards Can be used to convey Effective storyboards can quickly convey information that would be difficult to understand in text

  14. Storyboards Can illustrate key requirements and leave open less important details of design

  15. Basic Storyboard

  16. Storytelling Stories have an audience Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and share information about people, tasks, goals Put a human face on analytic data Spark new design concepts and encourage innovation Share ideas and create a sense of history and purpose Giving insight into people who are not like us Persuade others of the value of contribution Quesenberg and Brooks

  17. Stories Provide Context Characters Details of interface features and components are not necessarily Who is involved surfaced, they can often be Setting developed and conveyed more effectively with other methods Environment Sequence Can help surface details that might otherwise be ignored What task is illustrated What leads a person to use a design Grocery store application: What steps are involved - use with one hand while pushing a shopping cart Satisfaction - privacy of speech input What is the motivation - split attention What is the end result What need is satisified Amal Dar Aziz

  18. Storytelling Good stories Bad stories Understand audience Do not account for audience Provide context of use Boring or un-engaging Are well-motivated Fantastical or unrealistic Memorable Wrong story for purpose Evokes a reaction Too long to hold attention Evokes empathy Illustrate experience tl;dr Convey emotions Short and to-the-point

  19. Elements of a Storyboard Visual storytelling 5 visual elements Level of detail Inclusion of text Inclusion of people and emotions Number of frames Portrayal of time Truong et al, 2006

  20. 1. How Much Detail? Guideline: too much detail can lose universality Scott McCloud

  21. 1. How Much Detail?

  22. 2. Use of Text Guideline: It is often necessary, but keep it short

  23. 2. Use of Text Guideline: It is often necessary, but keep it short

  24. 3. Include People and Emotions Guideline: Include people experiencing the design and their reactions to it (good or bad) Remember, the point of storyboards is to convey the experience of using the system

  25. 4. How Many Frames? Guideline: 4-6 frames is ideal for end-users Less work to illustrate Must be able to succinctly tell story Potentially longer for design clients More is not always better May lose focus of story May lose attention

  26. 4. How many frames?

  27. 4. How many frames?

  28. 5. Passage of Time Guideline: Only use if necessary to understand

  29. Storyboards for Comparing Ideas Authoritative Supportive

  30. Storyboards for Comparing Ideas Cooperative Competitive

  31. Storyboards for Comparing Ideas Negative Reinforcement Positive Reinforcement

  32. Examples and Tricks in Storyboarding

  33. Drawing is Hard Will a picture work instead?

  34. Existing Images from Other Sources http://designcomics.org/ http://www.pdclipart.org/

  35. Blur Out Unnecessary Detail Using image editing software to simplify photos into sketches

  36. Tracing Photos Baudisch and Chu, 2009

  37. Mapping the Space of Interaction Ron Bird

  38. Comic Presentation Thought bubbles argue for the design Gukeisen et al, 2007

  39. Route Maps

  40. Route Maps

  41. Route Maps

  42. Route Maps

  43. Value of Animation or Video Can illustrate critical timing Can be more engaging than written or storyboard Can more easily convey emotion (e.g., voice, music) Can show interactive elements more clearly Can be self-explanatory If done well, can be an effective pitch

  44. Most Important Trick: Stop Motion http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mackay-StopAction.mp4 Mackay

  45. Most Important Trick: Stop Motion http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mackay-StopActionResult.mp4 Mackay

  46. Video Prototypes May build upon paper prototypes, existing software, and images of real settings Narration optional Narrator explains, actors move or illustrate interaction Actors perform movements and viewer expected to understand without voice-over

  47. Steps to Create a Video Prototype Review field data Review ideas from brainstorm Create text for usage scenarios Develop storyboard, with each scene on a card, illustrating each action/event with annotations explaining what is happening

  48. Steps to Create a Video Prototype

  49. Steps to Create a Video Prototype

  50. Steps to Create a Video Prototype Shoot a video clip for each storyboard card Avoid editing in the camera, just shoot your scenes Use titles to separate clips Like a silent movie Digital changes these tradeoffs a little, but respect the spirit of doing this quickly to get point across If you make an error, just reshoot it

  51. Prototyping Microsoft Surface http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Surface-Document-Interaction.mp4

  52. Prototyping Microsoft Surface http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Surface-Context-Lens.mp4

  53. Lessons from Prior Video Prototypes Narration, Pace, and Flair Three versions of “Don’t Forget” Using Projectors and Simple Props “Buddy Map” Watch for Pace and Scene Relevance “ Consumester ”

  54. Narration, Pace, and Flair http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-1.mp4 Don’t Forget Version 1

  55. Narration, Pace, and Flair http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-2.mp4 Don’t Forget Version 2

  56. Narration, Pace, and Flair http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Don't-Forget-3.mp4 Don’t Forget Version 3

  57. Using Projectors and Simple Props http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Buddy-Map-Backcountry.mp4 Buddy Map

  58. Watch for Pace and Scene Relevance http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Consumester.mp4 Consumester

  59. Lessons from Prior Video Prototypes Split Presentation, Simple Effects “ PickUp ” Still-Frame, More Effects “Graffiti Karma”

  60. Split Presentation, Simple Effects http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Pickup.mp4 Pickup

  61. Still-Frame, More Effects http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Graffiti.mp4 Graffiti Karma

  62. Lessons from Prior Video Prototypes Scenario with a Contrast “ ParkSmart ” (note that screens are static images) Playful while Keeping Pace “ Plantr ”

  63. Scenario with a Contrast http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Parksmart.mp4 But watch for pace and scene relevance ParkSmart

  64. Playful while Keeping Pace http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Plantr.mp4 Plantr

  65. Range of Purposes Illustrating Low-Level Techniques Microsoft Surface examples convey timing Illustrate Designs Focus in this course High-Level Visions StarFire, Knowledge Navigator, A Day Made of Glass

  66. Sun’s “ Starfire ” (1994) http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Sun-Starfire.mp4

  67. Apple’s “Knowledge Navigator” (1987) http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Apple-Knowledge-Navigator.mp4

  68. Corning’s “A Day Made of Glass” (2011) http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Vision-Corning-A-Day-Made-Of-Glass.mp4

  69. LuciaMug Sketch: A Contrast http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mug-Sketch.mp4 http://courses.cs.washington.edu/courses/cse440/videos/videoprototyping/Mug-HiFi.mp4

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION & FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
1 Introduction Introduction Communication System Baseband an adjective that describes

1 Introduction Introduction Communication System Baseband an adjective that describes

Introduction Introduction Physical Layer Mobile network Global ISP Provides the means to transmit bits Basic Concepts of from sender to receiver, Data Transmission Defines the mechanical, electrical, and Home network timing

463 views • 7 slides
Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

INFOGR Computer Graphics Jacco Bikker - April-July 2015 - Lecture 1: Introduction Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical Details Assignments Field Study State of

869 views • 62 slides
Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Virtual and Augmented Reality Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction Who am I? What do I do here? 2 About me Short research bio: - 2014 - finished PhD at FMFI UK - 2014 2016 -

1.3k views • 39 slides
PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience for your presentation. It tells them what your presentation is about, why it is important, and finally, what to listen for in your speech. Get the

505 views • 3 slides
How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

Introduction to Beamer Hafida Benhidour How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer Introduction to Beamer Hafida Benhidour Department of computer science King Saud University November

732 views • 49 slides
Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Shenzhen Cuilu jewelry Co., Ltd

147 views • 14 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

735 views • 34 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

558 views • 18 slides

More recommend