cse 440 introduction to hci
play

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

Feb 22, 2024 •108 likes •1.22k views

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. Storyboards for Comparing Ideas Negative Reinforcement Positive Reinforcement

  2. Examples and Tricks in Storyboarding This is also the focus of Reading 2 Due Saturday night (not needed for Friday section) Will go over these quickly, especially the videos You then view them outside of class

  3. Drawing is Hard Will a picture work instead?

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

  5. Blur Out Distracting Details Using image editing software to simplify photos into sketches

  6. Tracing Photos Baudisch and Chu, 2009

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

  8. Selective Use of Color

  9. Route Maps

  10. Route Maps

  11. Route Maps

  12. Route Maps

  13. Mapping the Space of Interaction Ron Bird

  14. Value of Animation or Video Can illustrate critical timing Can be more engaging than written or storyboard Can help 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

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

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

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

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

  19. Steps to Create a Video Prototype

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

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

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

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

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

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

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

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

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

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

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

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

  32. Lessons from Prior Video Prototypes Scenario with a Contrast “ParkSmart” (note that screens are static images) Playful while Keeping Pace “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
CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 08:

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

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

894 views • 78 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
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
Distributed Algorithms Below the Greedy Regime Yannic Maus Mohsen Ghaffari , Juho Hirvonen,

Distributed Algorithms Below the Greedy Regime Yannic Maus Mohsen Ghaffari , Juho Hirvonen,

Coloring Distributed Algorithms Below the Greedy Regime Yannic Maus Mohsen Ghaffari , Juho Hirvonen, Fabian Kuhn, Jara Uitto This project has received funding from the European Unions Horizon 2020 Research and Innovation Programme under

655 views • 29 slides

More recommend