cse 440 introduction to hci
play

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

Nov 25, 2023 •173 likes •1.14k views

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

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

  2. Quantity versus Quality One class told they will be graded on quality, another on quantity Bayles and Orland, 2001

  3. Quantity versus Quality The quantity class produces better pots. Why? Bayles and Orland, 2001

  4. Quantity versus Quality The quantity class produces better pots. Why? “While the quantity group was busily churning out piles of work—and learning from their mistakes—the quality group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay” Bayles and Orland, 2001

  5. Today Administrative Assignment 0 Assignment 1c: Project Bid Section Balance and Movement Denny 303 on Tuesday 10/10 The Design Diamond Examining a Design Process Sketching and Prototypes

  6. Assignment 0: Flash Card Name formal, preferred, pronouns Majors/Minors career goals Year 1,2,3,4,5,6,… Hometown Interesting Fact or “What I did on my …” Submit PDF via Canvas

  7. Project Status and Assignments Proposals to be “Funded” and Posted for Bidding Bidding Tomorrow, Team Formation Thursday Please Watch Your Email During This Process Looking Forward Ideation on Friday in Section 2b: Design Research Plan due Tuesday 1/17 2c: Design Research Check-In due Friday 1/20 2d: Design Research Review due Tuesday 1/24 Other Assignments Assignment 0 Due Thursday Reading 1 Posted, Due Thursday

  8. Section Balance and Movement 9:30 Section: 12 people 10:30 Section: 15 people 11:30 Section: 14 people 12:30 Section: 13 people Project bidding will include “bid with section” and “bid in another section”, to allow moving A “switch section” bid dominates your other bids Most of you will bid “No Desire to Switch”

  9. Denny 303 on Tuesday 10/10

  10. Today Administrative Assignment 0 Assignment 1c: Project Bid Section Balance and Movement Denny 303 on Tuesday 10/10 The Design Diamond Examining a Design Process Sketching and Prototypes

  11. Objectives Be able to: Describe an iterative design process Describe the design diamond model of design, its implications, and how it can break down Describe properties of a sketch versus a prototype Differentiate examples of sketches from prototypes

  12. Sketching User Experiences

  13. Sketching

  14. Sketching

  15. Sketching

  16. Sketching

  17. Sketching A process that enables you to think through ideas and convey design ideas to others very early in the design phase

  18. Quintessential Activity of Design

  19. Design as Choice

  20. IDEO’s Deep Dive (ABC News, 1999) http://courses.cs.washington.edu/courses/cse440/videos/design/IDEO-DeepDive.mp4

  21. ABC News and IDEO’s Deep Dive Things to see in this video: brainstorming design research Why build a shopping cart with no bottom? sketching critique A highly iterative design process with a variety of intermediate artifacts

  22. IDEO’s Deep Dive (ABC News, 1999) http://courses.cs.washington.edu/courses/cse440/videos/design/IDEO-DeepDive.mp4

  23. IDEO’s Deep Dive (ABC News, 1999)

  24. IDEO’s Deep Dive (ABC News, 1999)

  25. IDEO’s Deep Dive (ABC News, 1999)

  26. IDEO’s Deep Dive (ABC News, 1999)

  27. IDEO’s Deep Dive (ABC News, 1999)

  28. IDEO’s Deep Dive (ABC News, 1999)

  29. IDEO’s Deep Dive (ABC News, 1999)

  30. IDEO’s Deep Dive (ABC News, 1999)

  31. IDEO’s Deep Dive (ABC News, 1999)

  32. Perfect Shopping Cart?

  33. Perfect Shopping Cart? Several design flaws Kids will slide and fall out of that seat Where to put bags of dog food, cases of beer? Hook design with reusable bags Self-scanning challenges with theft Focus on the design process Designs always have limitations and tradeoffs

  34. Design as Choice

  35. Design as Choice In the diamond, what are two openings for creativity? Why is your design research so important?

  36. Sketching in Design (2007) “Design as Choice” “the creativity that you bring to enumerating meaningfully distinct options from which to choose”

  37. Sketching in Design (2007) “Design as Choice” “the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices”

  38. Design as Choice In the diamond, what are two openings for creativity? Palette of choices Heuristics to choose Why is your design research so important? What you learn directly informs both of these, shaping everything you do this entire quarter

  39. Design as Choice Elaboration Reduction palette of choices heuristics to choose

  40. The Design Diamond danger! danger! start generate select danger! intentional! danger!

  41. Properties of Sketches Quick Distinct Gesture Timely Minimal Detail Inexpensive Appropriate Refinement Disposable Suggest and Explore Plentiful Ambiguous Clear Vocabulary

  42. Quick A sketch is quick to make, or at least gives that impression

  43. Timely A sketch can be provided when needed

  44. Inexpensive Cost must not inhibit the ability to explore a concept, especially early in design

  45. Disposable If you cannot afford to throw it away, then it is not a sketch Investment is in the process, not the physical sketch But they are not "worthless"

  46. Plentiful Sketches do not exist in isolation Meaning and relevance is in the context of a collection or series

  47. Clear Vocabulary The way it is rendered makes it distinctive that it is a sketch (e.g., style, form, signals) Could be how a line extends through endpoints Physical sketches have their own vocabulary

  48. Distinct Gesture Fluidity of sketches gives them a sense of openness and freedom Opposite of engineering drawing, which is tight and precise vs.

  49. Minimal Detail Include only what is required to render the intended purpose or concept

  50. Minimal Detail 52

  51. Appropriate Degree of Refinement Make the sketch as refined as the idea If you have a solid idea, make the sketch look more defined If you have a hazy idea, make the sketch look rougher and less defined

  52. Suggest and Explore Rather than Confirm Sketch should act as a catalyst to the desired and appropriate behaviors, conversations, and interactions

  53. Ambiguity Intentionally ambiguous Value comes from being able to be interpreted in different ways, even by the person who created them Sketches have holes

  54. Sketching as Conversation Create Mind Sketch knowledge, representation new knowledge Interpret Requires ambiguity

  55. Sketch vs. Prototype Sketch Prototype Invite Attend Suggest Describe Explore Refine Question Answer Propose Test Provoke Resolve Tentative, non committal Specific Depiction The primary differences are in the intent

  56. ABC News and IDEO’s Deep Dive

  57. Sketching is Not Defined by Ink Although sketching can often be done in ink, these properties can be found in other forms Those other forms are therefore sketches

  58. Sketching the Mouse Making the Macintosh: http://www-sul.stanford.edu/mac/index.html

  59. Sketching the Mouse Making the Macintosh: http://www-sul.stanford.edu/mac/index.html

  60. Physical Sketching

  61. Physical Sketching Mueller, WirePrint, UIST 2014

  62. Physical Sketching Mueller, WirePrint, UIST 2014

  63. WirePrint (2014) Mueller, WirePrint, UIST 2014

  64. WirePrint (2014) Mueller, WirePrint, UIST 2014

  65. Physical Sketching Mueller, Fabrickation, CHI 2014

  66. faBrickation (2014) Mueller, Fabrickation, CHI 2014

  67. faBrickation (2014) Mueller, Fabrickation, CHI 2014

  68. Physical Sketching Mueller, Constructable, CHI 2012

  69. Constructable (2012) Mueller, Constructable, CHI 2012

  70. Constructable (2012) Mueller, Constructable, CHI 2012

  71. The Design Diamond danger! danger! start generate select danger! intentional! danger!

  72. Idea Oscillation danger! danger! start generate select danger! intentional! danger!

  73. Critiquing Sketches is Important Ideas are both good and bad Both are useful in design By making clear what is a bad design, we can avoid actually implementing it Bad ideas help you justify your good ideas Feedback can turn a good idea into a great idea Sketching generates too many ideas to implement

  74. Idea Oscillation

  75. Iteration Toward a Design

  76. Exploration of Alternatives

  77. Exploration of Alternatives … a designer that pitched 3 ideas would probably be fired. I'd say 5 is an entry point for an early formal review (distilled from 100's). … if you are pushing one you will be found out, and also fired. … it is about open mindedness, humility, discovery, and learning. If you aren't authentically dedicated to that approach you are just doing it wrong! Alistair Hamilton VP Design Symbol Technologies

  78. The Converging Path

  79. Is this a sketch? Why or why not?

  80. Is this a sketch? Why or why not?

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