cse 440 introduction to hci
play

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

Sep 30, 2022 •103 likes •894 views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 08: James Fogarty Storyboarding and Alex Fiannaca Video Prototyping Lauren Milne Saba Kawas Kelsey Munsell Tuesday/Thursday 12:00 to 1:20 Today

  1. CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 08: James Fogarty Storyboarding and Alex Fiannaca Video Prototyping Lauren Milne Saba Kawas Kelsey Munsell Tuesday/Thursday 12:00 to 1:20

  2. Today Milestones Use This Week to Refine and Decide Design Review (“1x2”) Due Friday Reading 3 Due Friday Getting the Right Design Due Tuesday Presentations Start Thursday Class Storyboarding and Video Prototyping Design Check- In (“3x4”) Peer 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 Relative to film, these function as sketches

  13. Storyboards Can be used to convey Effective storyboards can quickly convey information that would be difficult to understand in text Imagine explaining this in text, for various audiences

  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. Amal’s Guide to Storyboarding Amal Dar Aziz

  19. Amal’s Guide to Storyboarding Amal Dar Aziz

  20. Amal’s Guide to Storyboarding Amal Dar Aziz

  21. 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

  22. Elements of a Storyboard Visual storytelling 5 visual elements Level of detail Inclusion of text To better characterize design intuitions: Inclusion of people gather and analyze artifacts semi-structured interviews and emotions survey focused on identified elements Number of frames Portrayal of time Truong et al, 2006

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

  24. 1. How Much Detail? Sketching People Star people by Bill Verplank Keith Haring

  25. 1. How Much Detail?

  26. 1. How Much Detail? Unnecessary details distract from the story

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

  28. 2. Use of Text Guideline: It is often necessary, but keep it short Short text is more effect, less likely to over-explain Watch for cases where text induces weird biases

  29. 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

  30. 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

  31. 4. How many frames?

  32. 4. How many frames? People found the extra panels were not needed

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

  34. 5. Passage of Time Guideline: Only use if necessary to understand Inclusion of the clock distracts

  35. Storyboards for Comparing Ideas Authoritative Supportive

  36. Storyboards for Comparing Ideas Cooperative Competitive

  37. Storyboards for Comparing Ideas Negative Reinforcement Positive Reinforcement

  38. Examples and Tricks in Storyboarding

  39. Drawing is Hard Will a picture work instead?

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

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

  42. Tracing Photos Baudisch and Chu, 2009

  43. Mapping the Space of Interaction Ron Bird

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

  45. Selective Use of Color

  46. Route Maps

  47. Route Maps

  48. Route Maps

  49. Route Maps

  50. 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 But you need to keep it quick and effective

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

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

  53. 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

  54. 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

  55. Steps to Create a Video Prototype

  56. 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

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

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

  59. 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 ”

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

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

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

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

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

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

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

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

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

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

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

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