cse 440 introduction to hci
play

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

Apr 08, 2023 •324 likes •1.34k views

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

  1. Animation Case Study Based on increased understanding of how animation should be done in the interface, increasingly mature tools develop Now built into major commercial toolkits (e.g., Microsoft’s WPF, JavaFX, jQuery) Once mature, begins to be used as a building block in even more complex behaviors

  2. Animation Case Study The Kinetic Typography Engine: An Extensible System for Animating Expressive Text Lee et al, 2002 http://dx.doi.org/10.1145/571985.571997

  3. Kinetic Typography Engine

  4. Kinetic Typography Engine

  5. Kinetic Typography Engine Goals of Kinetic Type Animation Composition Emotional content Creation of characters Direction of attention

  6. Tools and Interfaces Why Interface Tools? Case Study of Model-View-Controller Case Study of Animation Sapir-Whorf Hypothesis Thoughtfulness in Tools Case Study in Self-Tracking

  7. Sapir-Whorf Hypothesis Roughly, some thoughts in one language cannot be stated or understood in another language Our tools define the language of interaction Beyond the simple matter of code Frame how we think about possibilities Myers, Hudson, Pausch. Past, Present, and Future of User Interface Software Tools. TOCHI 2000.

  8. Sapir-Whorf Hypothesis Roughly, some thoughts in one language cannot be stated or understood in another language Language is not simply a way of voicing ideas, but is the very thing which shapes those ideas Our tools define the language of interaction Beyond the simple matter of code Frame how we think about possibilities You must be aware of this when choosing tools, designing applications, and creating new tools

  9. Animation Case Study Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects Baudisch et al, 2006 http://dx.doi.org/10.1145/1166253.1166280

  10. Phosphor Animation can help people follow interface transitions Windows Media Player But the right speed is crucial Too fast increases error rate Apple Expose Too slow increases task time The right speed depends on familiarity, distraction, etc. It cannot be determined

  11. Phosphor Phosphor shows the outcome immediately, then explains change in retrospect using a diagrammatic depiction

  12. Phosphor

  13. Phosphor

  14. animation Challenging Assumptions of Tools Phosphor breaks from the assumptions that have evolved into current transition tools past animation future phosphor future past phosphor

  15. Prefab Prefab uses pixel analysis to modify existing applications from the outside, using only pixels Prefab is informed by how toolkits work, but not linked to any particular toolkit implementation Allows trying and fielding new ideas that are not supported by existing applications or toolkits

  16. Prefab

  17. Prefab

  18. Understanding Tools Tools promote and encapsulate proven practices Reduce expertise barriers Enable more rapid and iterative implementation Codification eventually constrains design Inevitable consequence of codification versus evolving understanding of emerging technologies Codification goes deeper than the code Frames how we think about our applications Myers, Hudson, Pausch. Past, Present, and Future of User Interface Software Tools. TOCHI 2000.

  19. Rebuilding the Language We regularly rebuild the entire system Command Line, Text Screens Multiple Generations of Desktop Multiple Generations of Web Mobile Apps We will do it again Several near-term challenges require it e.g., Touch, Cloud, Distributed Interfaces Backward compatibility helps, but is not required Olsen. Evaluating User Interface Systems Research. UIST 2007.

  20. Informing the Next Language Research explores the next generation of language, while being limited by the current We therefore conflate: Ideas Proof of Concept Engineering Implementation Broken Metaphors Unspeakably Dirty Hacks

  21. Informing the Next Language Research explores the next generation of language, while being limited by the current Prefab is not just about ‘do everything with pixels’, We therefore conflate: but about exploring new Ideas possibilities in the current ecosystem of interface tools Proof of Concept Engineering Implementation Broken Metaphors Unspeakably Dirty Hacks

  22. Mobile Phones as Pagers Our notion of technology design for journals / ESM / EMA has been anchored by papers journals and pager-based reminders Csikszentmihalyi, Larson. Validity and Reliability of the Experience-Sampling Method. J Nerv Ment Dis 1987 . Feldman Barrett, Barrett. An Introduction to Computerized Experience Sampling in Psychology. Soc Sci Comput Rev 2001 . Froehlich, Chen, Consolvo, Harrison, Landay. MyExperience … MobiSys 2007 .

  23. Unlock Journaling for Self-Report Truong, Shihipar, Wigdor. Slide to X: Unlocking the Potential of Smartphone Unlocking. CHI 2014 . Zhang, Pina, Fogarty. Examining Unlock Journaling with Diaries and Reminders ... CHI 2016.

  24. Unlock Journaling for Self-Report Stanford Sleepiness Scale Hoddes, Zarcone, Dement. Development and Use of Stanford Sleepiness Scale. Pyschophysiology 1972 .

  25. Unlock Journaling for Self-Report Pleasure and Accomplishment (e.g., self-monitoring depressive symptoms) Lejuez, Hopko, Acierno, Daughters, Pagoto. ... Behavioral Activation Treatment for Depression … Behav Modif 2011 .

  26. Unlock Journaling for Self-Report Russell’s Affect Grid Russell, Weiss, Mendelsohn. Affect Grid: A Single-Item Scale of Pleasure and Arousal. J Pers Soc Psychol 1989 .

  27. Unlock Journaling vs. Notifications Unlock journaling is: rated less intrusive (1.77 vs. 2.22 on a 5-point scale) yields greater frequency (15.0 vs. 9.8 per 12-hour day) comparable timeliness (8.6 vs. 9.3 minutes) Instead of reminders to journal, unlock journaling makes the opportunity visible, easy, and optional It should not have taken 10 years to get here

  28. Mobile Food Journals Origins in daily recall Self-monitoring of food can support many goals Weight Loss Diabetes Management Trigger Identification High burdens detract from potential benefit, data is often wrong Burke. The Dietary History as a Tool in Research. J Am Diet Assoc 1947 . Craig, Kristal, Cheney, Shattuck. The Prevalence and Impact of ‘Atypical’ Days in 4-Day Food Records. J Am Diet Assoc 2000 .

  29. Mobile Food Journals Mobile devices provide real-time feedback Search for each food in a large database, often breaking into components Typically provide calorie-based feedback High burdens detract from potential benefit, data is often wrong Tsai, Lee, Raab, Norman, Sohn, Griswold, Patrick, K. Usability and Feasibility of PmEB … Mobile Netw Appl 2007 .

  30. Perceptions of Healthy Eating “What does healthy eating look like to you?” Food types: Food qualities: Diet qualities: “vegetables” “low processed” “balanced” “fruits” “organic” “variety” “protein” “fresh” “portion” Cordeiro, Bales, Cherry, Fogarty. Rethinking the Mobile Food Journal … CHI 2015 .

  31. Difficulty as a Negative Nudge “I just avoided eating things that were hard to log” – SP132 “Prepackaged meals were the easiest because of bar codes but those aren’t healthy” – SP123 “I could make life easier by eating the same things regularly” – SP97 “It discourages you from eating out or at a friend’s, even if it is healthy” – SP42 Cordeiro, Epstein, Thomaz, Bales, Jagannathan, Abowd, Fogarty. Barriers and Negative Nudges ... CHI 2015 . Cordeiro, Bales, Cherry, Fogarty. Rethinking the Mobile Food Journal … CHI 2015 .

  32. Deploying a Photo-Based Journal Mobile capture and review Web review and annotation Cordeiro, Bales, Cherry, Fogarty. Rethinking the Mobile Food Journal … CHI 2015 .

  33. Leveling the Difficulty of Journaling With prior techniques: 60% report not journaling because it was too difficult 65% report not journaling because they did not know With photo-based capture: 22% report not journaling because it was too difficult None report not journaling due to food knowledge “For some meals, it’s just really easy to take a picture … than sit there and type in every ingredient” – FP20

  34. Journaling without Judgment With prior journals, participants report choosing not to journal because they would exceed a calorie budget or because a food was unhealthy 13% of survey participants 45% of field participants Photos enable mindfulness while avoiding judgment “[it was] easier because there were no calorie counts, no judgments, but still makes you aware” – FP14 “Do I really want to eat this? I’m capturing this” – FP17

  35. Triggers and Trends “I eat too much pizza” – FP10 “I’m surprised at how many times I’m seeing things that I consider an exception to my diet!” – FP4 “I don’t branch out as much as I thought I did, even when I go somewhere new, I kind of get what I always get somewhere else” – FP10

  36. Food Journals as Daily Recall “it should be noted that much of the use of food journaling is in a more clinical setting with the purpose being sharing and evaluating the journal with nutritionists and care providers … it’s not relevant if photos are more or less easily understood by the user if a nutritionist is the eventual consumer of the data” – Actual Anonymous Grumpy R3

  37. Tools and Interfaces Tools embody expertise and assumptions Tools evolve based on emerging understanding of how to address categories of problems Be conscious of your tool decisions Try to think about designs before tying to a tool Choose good and appropriate tools Understand what you are getting in a tool Push yourself to think outside the tool

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