Human-Computer Interaction for Tech Execs

Human-Computer Interaction for Tech Execs

05-640: Interaction Techniques, Spring, 2019 Brad Myers Human Computer Interaction Institute Lecture 1 Spring, 2019 2019 - Brad Myers 1 Course: 05-440 should also have this number clerical error Does anyone care? 05-640: Interaction Techniques

Intended for undergraduates, Masters and PhDs Third time offered 2014 was videotaped: 2016: Mondays & Wednesdays, 1:30pm 2:50pm Attendance in lectures required In-class quizzes on required readings Class participation counts as part of grades Room: GHC 4211 2019 - Brad Myers 2

Course Web page: Course Web page: Course schedule is tentative Note required readings Note homework schedule Some readings are CMU-only, use CMU network or VPN 3 2019 - Brad Myers Instructor

Brad Myers Human Computer Interaction Institute Office: Newell-Simon Hall (NSH) 3517 Phone: x8-5150 E-mail: [email protected] Office hours: By appointment. Secretary:

Lauren Hardwig NSH 3526B 412-268-1638 [email protected] 4 2019 - Brad Myers Teaching Assistant Asit Parida [email protected] Masters in HCI (currently)

Office hours: TBD 5 2019 - Brad Myers Why am I teaching this course? I was at MIT Media Lab (then Architecture Machine Group), 19761979 At Xerox PARC, 1976-1980 Designed one of the first commercial window managers, 1980-1984 First to put progress bars into icons, and collect icons in a window, etc. Studies of two handed UIs and progress bars with Bill Buxton, 1984 - 1988 All the Widgets history video, 1990 "A Brief History of Human Computer Interaction

Technology. ACM interactions, 1998 With student, invented new text input technique Significant consulting on patents on interaction techniques, 1988-present 6 2019 - Brad Myers My Book is in progress! Writing a book based on this material Progressing slowly Tentative title Click, Flick, Pick! The Story of Interaction Techniques Trade and academic publishers interested! Could use help! 7 2019 - Brad Myers Course Requirements

This course does not require any programming Prerequisites: Students should preferably have taken UCRE/Methods or DHCS or Intro. HCI Tech Execs However, I am allowing students interested in history of technology to enroll without any background in HCI or experience in programming 8 2019 - Brad Myers Education Goals After taking this course, students will be able to:

Articulate design issues regarding interaction techniques. Design a new interaction technique given a set of requirements and constraints. Evaluate interaction techniques using the appropriate tests for performance and usability. Describe the historical progression of the most important interaction techniques and the factors that impacted their evolution and eventual widespread adoption. 9 2019 - Brad Myers Lecture Topics General

topics Many specific kinds of interaction techniques Lots of history Useful to have examples of different approaches See schedule What would you like to hear about? 10 2019 - Brad Myers Guest Lectures by Inventors 2019

confirmed: Bill Atkinson, contributor to many early Apple Lisa and Machintosh interactions, including: the marching ants selection, the menu bar, the Selection lasso, FatBits, MacPaint, HyperCard pull-off menus, and many others Dan Bricklin, inventor of Spreadsheets (VisiCalc) Shumin Zhai, inventor of "ShapeWriter" text entry for smartphones (like Swipe), and the Google Pixel phone squeeze interactions ("Active Edge") Don Hopkins, Pie menus 2016: Norm Cox icon designs Bruce Horn original Macintosh UI Loren Brichter pull-to-refresh

Tandy Trower Microsoft Windows designs May-Li Khoe Apple's Force Touch, 3D Touch 2014: David C. Smith Icons Larry Tesler Copy-and-paste Ted Selker IBM pointing stick Chris Harrison many new ones 11 2019 - Brad Myers Grading Homeworks Midterm Final

Project No final exam Taking it Pass/Fail is fine It is fine with me if everyone gets A 12 2019 - Brad Myers Homeworks Mostly measurement activities on your own First one: Measuring the speed and accuracy of clicking with various pointing devices

Mouse, laptop touchpad, IBM pointing stick, fingers on smartphone, fingers on tablet, stylus on phone, stylus on tablet, Nintendo Wii controller, (what else?) Discussion of your measurements with respect to the historical record 13 2019 - Brad Myers Final Project Ideas See course homepage: Create or edit a Wikipedia page about an interaction technique or about an inventor of one, with appropriate citations Document, evaluate and critique one or more existing

interaction techniques with appropriate evidence Interview an inventor of a particular interaction technique Pick a particular, important milestone design, and enumerate and describe all of the novel interaction techniques introduced in that system. Invent a new interaction technique and evaluate it Create a project of your own design, in consultation with the professor. 14 2019 - Brad Myers Introduction to this Course: What is an Interaction Technique and Why are They Important? Lecture 1 Spring, 2019 15 2019 - Brad Myers Interaction Techniques Scroll

But bars, buttons, text fields also: Drawing a new object in an editor Copy-and-paste Selecting a cell in a spreadsheet How high level? Text editor widget, but not Word Scroll bar is composed of buttons, etc.

16 2019 - Brad Myers What are some other examples? 17 2019 - Brad Myers Some examples Visual Basic Physical controls 18 2019 - Brad Myers Other names Widgets (Wikipedia: GUI Widget)

Note that there have been no cross references in Wikipedia between Interaction Technique and Widget See my video All the Widgets But not the same as Apple dashboard widgets GUI elements Gadgets Controls (MS Windows)

Components But not the same as Scott Hudsons Too generic Behaviors = the interaction part 19 2019 - Brad Myers Definitions

My definition: An interaction technique starts when the user does something that causes a computer to respond, and includes the direct feedback from the computer to the user. Interaction techniques are generally reusable across various applications. 20 2019 - Brad Myers Definitions Wikipedias definition: An interaction technique, user interface technique or input technique is a combination of hardware and software elements that provides a way for computer users to accomplish a single task. (has changed recently)

21 2019 - Brad Myers Definitions Foley & van Dam, 1990: An interaction technique is a way of using a physical input/output device to perform a generic task in a human-computer dialogue. 22 2019 - Brad Myers What is not an interaction technique? Whole applications (Microsoft Word) Dashboard widgets small apps for the desktop Output only (no interactions)

Visualizations But many come with specialized interactions, then they might count? Animations Movies 23 2019 - Brad Myers Why Study Interaction Techniques? Used extensively

Everyone who uses a computer uses copy-paste, etc. So can have an enormous impact Interesting historically Why do we do things the way we do? Is there a good reason?

Example: which way does the arrow point in a scroll bar? And Patent on Bounce at end of scrolling for iPhone submitted by Bas Ording in 2007 (right before 1st iPhone was released in 2007) US 7,469,381 new interaction techniques are created all the time: Try it! iPhone vs. Samsung Pull down to refresh patent submitted in 2010 by Twitter, became popular in 2013!

US 8,448,084 Inventor was a guest speaker last time! Many new CHI & UIST conference papers every year with new ones 2019 - Brad Myers 24 Why Study Interaction Techniques, cont. Interaction Often the subject of patents and lawsuits

Cant patent overall look and feel Apple Wins Over Jury in Samsung Patent Dispute, Awarded $1.05 Billion in Damages (Live Blog) link Jury orders Samsung to pay $290M to Apple in patent case link Need Macs & PCs look and work pretty similar to each other and to the designs of the 1980s (30 years ago) Text entry on smartphones is a big barrier new ones Desktop metaphor is getting tired

Techniques have a high economic value Text entry on smartphones!!! Selecting individual elements, characters on smartphones 2019 - Brad Myers 25 Problem April 29, 1991 26 2019 - Brad Myers Problem

Appliances are too complex 27 2019 - Brad Myers Problem Too many remotes 28 2019 - Brad Myers Why are Interaction Techniques Hard to Design? Surprisingly large number of design decisions Individual differences and preferences Lots of details that impact human performance

How far does the cursor move when you move the mouse 1 inch? Trick question depends on mouse speed Complex formula developed through experimentation How far does the content move on an iPhone when you flick your finger? Needs to work for long distance, and highly accurate local movements Nokia phones released just after the iPhone got this all wrong

29 2019 - Brad Myers Example: check box How many states can it be in? 30 2019 - Brad Myers Example: check box How

many states can it be in? Checked, not-checked, partial checked Disabled, not-disabled Hover, not-hover (cant be hover+disabled) Pressed-inside, pressed-outside, notpressed (cant be pressed + disabled, cant be pressed-inside + not-hover) Keyboard focus, not-focus 2^4 * 3 = 48, but many are not possible Often forget about the release-outside case & interface gets confused (Flash implementations) 2019 - Brad Myers 31 Example2: Drawing a new object What happens when move upwards past start point?

32 2019 - Brad Myers Measuring Interaction Techniques What are relevant quality metrics for interaction techniques? For evaluating them? 33 2019 - Brad Myers Measuring Interaction Techniques What are relevant quality metrics for interaction techniques?

(same as other HCI usability metrics!) Efficiency (speed) Error rate Learnability Discoverability Memorability Aesthetics & emotional impact Satisfaction (Pleasurable) Consistency with other interactions Etc. 2019 - Brad Myers 34

Measuring Interaction Techniques But also generalizability How often can be used? Different applications? Different kinds of input values? Dimensionality One D (menu, slider) or 2-D (mouse), or more How many items? (pick among 5 items vs. among 100 or 1,000)

35 2019 - Brad Myers Designing Interaction Techniques Taking into account device characteristics Taking into account human characteristics Look Styling 3D look and feel Smiths ARK (1986), up through Windows 7 Flat squares Windows Phone and Windows 8 Feedback for behaviors

Animation effects from 1993 Feel Specific implementation of the behavior Details matter 2019 - Brad Myers 36 Affordances Perceived and actual properties of the thing, primarily those fundamental properties that determine how the thing could possibly be used. (Norman DOET book, p. 9)

When affordances are taken advantage of, the user knows what to do just by looking Helps people understand what to do with the control 37 2019 - Brad Myers

Recently Viewed Presentations

  • Pro Semesters Discussion

    Pro Semesters Discussion

    Why Cal Poly Should Remain on a Quarter System Senate First Reading February 2011 * * Loss of Polytechnic Identity * * Elements of Concern Faculty workload Student concerns Loss of Polytechnic identity Cost and other concerns 1 3 4...
  • Neuron—basic cell of the nervous system

    Neuron—basic cell of the nervous system

    Neuron—basic cell of the nervous system. Cephalalgia--headache. Neurologist—MD who treats/diagnoses diseases/disorders of the nervous system. Cognition—mental activities associated with thinking, learning, memory. Tetanus--lockjaw.


    ANP 101: Introductory Animal Physiology. CELL ADAPTATION, CELL INJURY and CELL DEATH, contd. 3) Cell Injury. If the limits of adaptive response are exceeded, or in certain instances when adaptation is not possible, a sequence of events called .
  • A new Money Advice strategy for Citizens Advice

    A new Money Advice strategy for Citizens Advice

    Improving Debt Advice provision. Lisa Colclough National Money Advice Policy and Development Officer Citizens Advice * The CAB Service Citizens Advice Bureaux - independent charities 390 member bureaux 16000 volunteers 95% public awareness 52% public usage/contact 7 million new problems...
  • Flags of Our Fathers - Woodbridge Township School District

    Flags of Our Fathers - Woodbridge Township School District

    The Bond Tour. The Iwo Jima Photograph becomes the symbol for the 7th war bond drive . Rene Gagnon is asked to identify the Marines in the photo . Ira Hayes threatens to kill Gagnon if he identifies him, but...
  • Low Carbon Innovation in China Prospects, Politics & Partnerships

    Low Carbon Innovation in China Prospects, Politics & Partnerships

    Not a 'Manhattan project' Profound test for state/market funding, even the entire debate Exceptional dependence on geo-politics Need for international collaboration in innovation International context - economic turbulence; political economic transition; 'global' emergence China and LCI - Policy Significant legislative...
  • Othello - Pottstown School District

    Othello - Pottstown School District

    Women were mostly silent, they did not speak out much at all about their opinions, especially in public. Some women wrote, but mostly all they wrote about was prayer and meditation. ... Othello's enemy and his ensign. (An ensign is...
  • 2D Coordinates represent coordinates of two locations Each

    2D Coordinates represent coordinates of two locations Each

    Each coordinate is an ?-bit unsigned number ... Each 1-bit comparator is composed of 3 XOR gates, 1 AND gate. MUX block is composed of 2? XOR gates, ? AND gates, where ? denotes the length of operands. ?=? for...