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

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

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
Cinematic Drone https://vimeo.com/174064811 Some basic moves Some basic moves How to pull off

Cinematic Drone https://vimeo.com/174064811 Some basic moves Some basic moves How to pull off

Cinematic Drone https://vimeo.com/174064811 Some basic moves Some basic moves How to pull off five essential drone shots and uplift your videos https://vimeo.com/blog/post/how-to-pull-off-5-essential-drone-shots-and-uplift Grammar of the

686 views • 47 slides
Markov Random Fields and its Applications Huiwen Chang Introduction Markov Random

Markov Random Fields and its Applications Huiwen Chang Introduction Markov Random

Markov Random Fields and its Applications Huiwen Chang Introduction Markov Random Fields(MRF) A kind of undirected graphical model To model vision problems: Low level: image restoration, segmentation, texture analysis High

901 views • 89 slides
Computer Graphics (CS 543) Lecture 9: Clipping, Viewport Transformation & Hidden Surface

Computer Graphics (CS 543) Lecture 9: Clipping, Viewport Transformation & Hidden Surface

Computer Graphics (CS 543) Lecture 9: Clipping, Viewport Transformation & Hidden Surface Removal Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Polygon Clipping Not as simple as line segment clipping

562 views • 55 slides
Motion and optical flow Thurs Feb 2, 2017 Kristen Grauman UT Austin Announcements A1 due

Motion and optical flow Thurs Feb 2, 2017 Kristen Grauman UT Austin Announcements A1 due

2/1/2017 Motion and optical flow Thurs Feb 2, 2017 Kristen Grauman UT Austin Announcements A1 due tomorrow, Friday Due to AAAI travel Office hours Tues Feb 7 cancelled (by appt) Lecture Tues is ON as normal 1 2/1/2017

469 views • 25 slides
CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 07:

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 07:

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 07: James Fogarty Storyboarding and Kailey Chan Video Prototyping Dhruv Jain Nigini Oliveira Tuesday / Thursday Chris Seeds 12:00 to 1:20 Jihoon Suh

1.22k views • 110 slides
Pediatric Trauma and the Pediatric Trauma Society: Our time has come. Barbara A. Gaines, MD

Pediatric Trauma and the Pediatric Trauma Society: Our time has come. Barbara A. Gaines, MD

Pediatric Trauma and the Pediatric Trauma Society: Our time has come. Barbara A. Gaines, MD November 15, 2014 Mentors Colleagues My personal reasons for trying to advance pediatric trauma And I couldnt do any of this without A

579 views • 43 slides
Welcome Presented by Laura Friedman Thank you for joining us Why a Virtual Town Hall

Welcome Presented by Laura Friedman Thank you for joining us Why a Virtual Town Hall

Virtual Town Hall Meeting: Monday, September 21, 7pm Responding to Crises and Planning for the Future The meeting will begin soon. We will start with a short video. mhccnyc@gmail.com Welcome Presented by Laura Friedman Thank you for joining us

516 views • 23 slides
Introduction: Generative Model for Graphs Modeling graphs is fundamental for studying networks

Introduction: Generative Model for Graphs Modeling graphs is fundamental for studying networks

GraphRNN: A Deep Generative Model for Graphs (24 Feb 2018) Jiaxuan You, Rex Ying, Xiang Ren, William L. Hamilton, Jure Leskovec Presented by: Jesse Bettencourt and Harris Chan March 9, 2018 University of Toronto, Vector Institute 1

306 views • 29 slides

More recommend