cse 440 introduction to hci
play

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

Feb 15, 2024 •205 likes •823 views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 06: James Fogarty Design Diamond Alex Fiannaca Lauren Milne Saba Kawas Kelsey Munsell Tuesday/Thursday 12:00 to 1:20 Quantity versus Quality One

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

  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. Sketching User Experiences

  6. Sketching

  7. Sketching

  8. Sketching

  9. Sketching

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

  11. Quintessential Activity of Design

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

  13. Design as Choice Two openings for creativity Palette of choices Heuristics used to choose Why is your contextual inquiry so important? What you learn directly informs both of these, shaping everything you do this entire quarter

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

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

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

  17. Timely A sketch can be provided when needed

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

  19. 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"

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

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

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

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

  24. Minimal Detail 24

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

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

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

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

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

  30. ABC News and IDEO’s Deep Dive

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

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

  33. Physical Sketching

  34. Physical Sketching Mueller, WirePrint, UIST 2014

  35. Physical Sketching Mueller, WirePrint, UIST 2014

  36. Physical Sketching Mueller, Fabrickation, CHI 2014

  37. Physical Sketching Mueller, Constructable, CHI 2012

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

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

  40. Idea Oscillation

  41. Iteration Toward a Design

  42. Exploration of Alternatives

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

  44. The Converging Path

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

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

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

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

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

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

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

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

  53. Some Evidence Task: Create a web banner ad for Ambidextrous magazine. Dow et al. TOCHI 2010.

  54. Feedback in Parallel or Serial prototype prototype prototype prototype feedback prototype feedback feedback feedback feedback prototype prototype feedback prototype prototype feedback feedback prototype feedback feedback final final Parallel condition Serial condition Dow et al. TOCHI 2010.

  55. Procedure FINAL serial prototyping condition parallel prototyping condition Dow et al. TOCHI 2010.

  56. Parallel: more diverse, better, more clicks Parallel Serial 0 0.5 1 1.5 2 2.5 3 3.5 4 Similarity Parallel Serial 0 5 10 15 20 25 30 35 40 45 50 Expert quality rating (0-50) Parallel Serial 0 50 100 150 200 250 300 350 400 450 500 Clicks per million impressions Dow et al. TOCHI 2010.

  57. Share one or share your best? prototype prototype prototype prototype prototype prototype prototype feedback feedback feedback final final final Share multiple Share best Make one condition condition condition Dow et al. TOCHI 2010.

  58. Share Multiple: better, more clicks Make one Share best Share multiple 0 1 2 3 4 5 6 7 Expert quality rating (0-7) Make one Share best Share multiple 0 200 400 600 800 1000 Clicks per million impressions Dow et al. TOCHI 2010.

  59. Some Evidence Greater divergence in designs Prevents sticking with the first idea Allows mashing ideas together Alternatives facilitate feedback Enable comparison Can improve tone of critique

  60. Sketching and the Design Diamond The design diamond is fundamental to understanding what you are doing here Much of your education, including in CSE, has taught you to focus on having the right answer Here it matters what you do long before the end Most ideas get thrown out, including yours Better ideas are great criticism, and frequently would never have come about otherwise

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

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