We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published bySammy Spring
Modified over 2 years ago
1 05-899A/05-499A: Interaction Techniques, Spring, 2014 http://www.cs.cmu.edu/~bam/uicourse/2014inter/ Brad Myers Human Computer Interaction Institute Lecture 1 Spring, 2014 © 2014 - Brad Myers
Course: 05-899A/05-499A: Interaction Techniques Intended for undergraduates and graduates Both numbers are for the identical course Graduates should be in 899A and undergrads in 499A Same assignments Mondays & Wednesdays, 1:30pm – 2:50pm All lectures videotaped & available from schedule page So have a permanent record, in case want to do something with the content But attendance in lectures is required Room: NSH 1305 © 2014 - Brad Myers 2
3 Course Web page: http://www.cs.cmu.edu/~bam/uicourse/2014inter/ Course schedule is tentative Note required readings Note homework schedule Some readings are CMU-only, use CMU network or VPN © 2014 - Brad Myers
4 Instructor Brad Myers Human Computer Interaction Institute Office: Newell-Simon Hall (NSH) 3517 Phone: x8-5150 E-mail: email@example.com@cs.cmu.edu http://www.cs.cmu.edu/~bam Office hours: By appointment. Secretary & Course Administrator: Indra Szegedy, NSH 3501B x8-4431 © 2014 - Brad Myers
Why am I teaching this course? I was at MIT Media Lab (then Architecture Machine Group), 1976-1979 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 © 2014 - Brad Myers 5
6 Teaching Assistant Jeffrey Rzeszotarski firstname.lastname@example.org Newell-Simon Hall 3529 (412) 268-8285 http://jeffrz.com/ (rez-oh-tar-ski) Office hours: Wednesdays after class (3:00pm-4:00pm) in NSH 4605 © 2014 - 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 © 2014 - Brad Myers 7
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. © 2014 - Brad Myers 8
Lecture Topics General topics Many specific kinds of interaction techniques Talks by inventors See schedule: http://www.cs.cmu.edu/~bam/uicourse/2014inter/schedule.html http://www.cs.cmu.edu/~bam/uicourse/2014inter/schedule.html What else? © 2014 - Brad Myers 9
Grading Homeworks Midterm Final Project Final Exam?? Taking it Pass/Fail is fine © 2014 - Brad Myers 10
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 © 2014 - Brad Myers 11
Final Project Ideas See course homepage: http://www.cs.cmu.edu/~bam/uicourse/2014inter/ http://www.cs.cmu.edu/~bam/uicourse/2014inter/ 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. © 2014 - Brad Myers 12
Introduction to this Course: What is an Interaction Technique and Why are they Important? Lecture 1 Spring, 2014 13 © 2014 - Brad Myers
Interaction Techniques Scroll bars, buttons, text fields But 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. © 2014 - Brad Myers 14
What are some other examples? © 2014 - Brad Myers 15
Some examples Visual Basic Physical controls 16 © 2013 - Brad Myers
Other names Widgets (Wikipedia: GUI Widget) Note that there are no cross references in Wikipedia between Interaction Technique and Widget See my video All the Widgetsvideo But not the same as Apple dashboard widgetsdashboard widgets GUI elements Gadgets But not the same as Scott Hudsons Controls (Windows) Components Too generic Behaviors = the interaction part © 2014 - Brad Myers 17
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. © 2014 - Brad Myers 18
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. Wikipedias definition © 2014 - Brad Myers 19
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. © 2014 - Brad Myers 20
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 … © 2014 - Brad Myers 21
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 new interaction techniques are created all the time: Patent on Bounce at end of scrolling for iPhone submitted by Bas Ording in 2007 (right before 1 st iPhone was released in 2007) US 7,469,381US 7,469,381 Try it! iPhone vs. Samsung Pull down to refresh – patent submitted in 2010 by Twitter, became popular in 2013! US 8,448,084 Many new CHI & UIST conference papers every year with new ones © 2014 - Brad Myers 22
Why Study Interaction Techniques, cont. Interaction Techniques have a high economic value 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) linklink Jury orders Samsung to pay $290M to Apple in patent case linklink Need new ones Desktop metaphor is getting tired 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 Selecting individual elements, characters on smartphones © 2014 - Brad Myers 23
24 Problem April 29, 1991 © 2014 - Brad Myers
25 Problem Appliances are too complex © 2014 - Brad Myers
26 Problem Too many remotes © 2014 - 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 © 2014 - Brad Myers 27
Example: check box How many states can it be in? © 2014 - Brad Myers 28
Example: check box How many states can it be in? Checked, not-checked, Disabled, not-disabled Hover, not-hover (cant be hover+disabled) Pressed-inside, pressed-outside, not- pressed (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) © 2014 - Brad Myers 29
Example2: Drawing a new object What happens when move upwards past start point? © 2014 - Brad Myers 30
Measuring Interaction Techniques What are relevant quality metrics for interaction techniques? For evaluating them © 2014 - Brad Myers 31
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. © 2014 - Brad Myers 32
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) © 2014 - Brad Myers 33
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 7ARK Flat squares – Windows Phone and Windows 8 Feedback for behaviors Animation effects – from 19931993 Feel Specific implementation of the behavior Details matter © 2014 - Brad Myers 34
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 © 2014 - Brad Myers 35
/05-640: Interaction Techniques, Spring, Brad Myers Human Computer Interaction Institute Lecture.
COMPUTER INTERFACES 1. The term interface means the link between the computer and the user; it refers to the means by which the user interacts with the.
ECMWF Metview – MOPTC June 2004 Introduction to Metview Vesa Karhila Fernando Ii ECMWF.
1 Web-Enabled Decision Support Systems Access Introduction: Touring Access Prof. Name Position (123) University Name.
© 2014 by McGraw-Hill Education. This is proprietary material solely for authorized instructor use. Not authorized for sale or distribution in any manner.
Asper School of Business University of Manitoba Systems Analysis & Design Instructor: Bob Travica User interface Updated: December 2014.
Mike Scott University of Texas at Austin Game Making with Alice 1.
Pasewark & Pasewark Microsoft Office XP: Introductory Course 1 INTRODUCTORY MICROSOFT WORD Lesson 8 – Increasing Efficiency Using Word.
State of New Jersey Department of Health and Senior Services Patient Safety Reporting System Module 2 – New Event Entry.
PSSA Preparation. Question 1(no calculator) D Question 2 (no calculator)
Discovering Computers & Microsoft Office 2010 Discovering Computers Chapter 3.
© Telcordia Technologies 2004 – All Rights Reserved AETG Web Service Advanced Features AETG is a service mark of Telcordia Technologies. Telcordia Technologies.
XP New Perspectives on Introducing Microsoft Office 2003 Tutorial 1 1 Using Common Features of Microsoft Office 2003 Tutorial 1.
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Windows XP Project An Introduction to Microsoft Windows XP and Office 2003.
Excel Functions. Part 1. Introduction 2 An Excel function is a formula or a procedure that is performed in the Visual Basic environment, outside the.
Course Registration Overrides SLCM_WP_220 1SLCM_WP_220 Overrides.
and 5. and and
Prof.ir. Klaas H.J. Robers, 14 July Graduation: a process organised by YOU.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
©Brooks/Cole, 2001 Chapter 12 Derived Types-- Enumerated, Structure and Union.
1 Multimedia Systems 2 Dr Paul Newbury School of Engineering and Information Technology ENGG II - 3A11 Ext: 2615
Services Course Windows Live SkyDrive Participant Guide.
Computing Fundamentals Module Lesson 6 Using Technology to Solve Problems Computer Literacy BASICS.
Graduate Admission System User Guide for Applicants 1 Last updated: April 2014.
HTML Concepts and Techniques Fourth Edition Chapter 4 Creating Tables in a Web Site.
1 CMPT 275 Software Engineering Course Information SUMMER 2014 Janice Regan,
Services Course Outlook Live Participant Guide.
MS Windows 2000 PRO Widely used version of the Microsoft windows operating system Designed for use on computer workstations and portable computers Workstation.
Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH.
1 Final Cut Pro X Winter Connections Conference 2012.
Chapter 11 Membrane Structure Essential Cell Biology Third Edition Copyright © Garland Science 2010.
State of New Jersey Department of Health and Senior Services Patient Safety Reporting System Module 3 – Root Cause Analysis.
Microsoft Office Illustrated Fundamentals Unit C: Getting Started with Unit C: Getting Started with Microsoft Office 2010 Microsoft Office 2010.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module D (Office 2007 Version) Decision Analysis.
Chapter 15 Intracellular Compartments and Transport Essential Cell Biology Third Edition Copyright © Garland Science 2010.
© 2005 by Prentice Hall Chapter 12 Designing Interfaces and Dialogues Modern Systems Analysis and Design Fourth Edition Jeffrey A. Hoffer Joey F. George.
1. 2 Objectives Become familiar with the purpose and features of Epsilen Learn to navigate the Epsilen environment Develop a professional ePortfolio on.
RefWorks: The Basics October 12, What is RefWorks? A personal bibliographic software manager –Manages citations –Creates bibliogaphies Accessible.
Pasewark & Pasewark Microsoft Office Word: Basics 1 INTRODUCTION Lesson 1 – Microsoft Word Word Basics.
Tips for Taking the FSA ELA Reading and Mathematics Assessments For Grades 3 & 4 Paper-Based Tests 1.
Chapter 14 Designing User Interfaces Systems Analysis and Design Kendall & Kendall Sixth Edition.
CS 6143 COMPUTER ARCHITECTURE II SPRING 2014 ACM Principles and Practice of Parallel Programming, PPoPP, 2006 Panel Presentations Parallel Processing is.
Murach's PHP and MySQL, C15© 2010, Mike Murach & Associates, Inc.Slide 1.
2 |SharePoint Saturday New York City
Page 1 of 37 Module 1: BLOCK 1 / MAIN MENU Objectives As a result of this module the student should demonstrate the following competencies: SoftLab Super.
Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
1 Displaying Open Purchase Orders (F/Y 11). 2 At the end of this course, you should be able to: –Run a Location specific report of all Open Purchase.
1. SAGE Portal – Technology Specifications released – Windows and Mac Secure Browsers released SAGE Formative Upcoming Key Dates 2.
1 NatQuery 3/05 An End-User Perspective On Using NatQuery To Extract Data From ADABAS Presented by Treehouse Software, Inc.
CONTROL VISION Set-up. Step 1 Step 2 Step 3 Step 5 Step 4.
© 2017 SlidePlayer.com Inc. All rights reserved.