CSCD 487/587Human Computer Interface

Winter 2013

Lecture 2HCI and Interactive Design

Introduction

Last time .. just introduced the topic of Interactive Design

Mentioned that we all use products every day of our lives How many are wonderful, easy and even fun

to use? Noted that many are frustrating and seem to

lack consideration for user based design

Good vs. Bad Designs

Book gives examples of good vs. bad design Provides an example of hotel voice mail

system that is so frustrating … person went out and bought a new cell phone rather than use the ultra frustrating hotel voice mail interface

Other examples of bad design, elevator and vending machine ...

4

Bad Designs– Elevator controls and labels on the

bottom row all look the same, so it is easy to push a label by mistake instead of a control button

– People do not make same mistake for the labels and buttons on the top row. Why not? From: www.baddesigns.com

Elevator Controls

5

Bad Designs

• Need to push button first to activate reader

• Normally insert bill first before making selection

• Contravenes well known convention

From: www.baddesigns.com

Vending Machine

6

Good and Bad Design

• What is wrong with remote on right?

• Why is the TiVo remote so much better designed?– Peanut shaped to fit

in hand– Logical layout and

color-coded, distinctive buttons

– Easy to locate buttons

Good Designs http://www.jnd.org/GoodDesign.html

Hotel Alarm clock that is easy to use From Hilton Hotels

Visual Buttons

Built-in Mp3 player

More Good Designs More well-designed products

Travel Baby StrollerTea Brewer

9

What to Design

• Need to take into account– Who the users are– What activities are being carried out– Where the interaction is taking place

• Need to optimize interactions users have with a product– So that they match the users’ activities and

needs

10

What is interaction design?

• “Designing interactive products to support the way people communicate and interact in their everyday and working lives”

– Sharp, Rogers and Preece (2011)

• “The design of spaces for human communication and interaction”

– Winograd (1997)

11www.id-book.com

Goals of Interaction Design

• Develop usable products– Usability means easy to learn, effective

to use and provide an enjoyable experience

• Involve users in the design process

12

Terms• Number of other terms used emphasizing

what is being designed, e.g.– User interface design,– Software design,– User-centered design,– Product design,– Web design,– Experience design (UX)

• Interaction design is umbrella term covering all these aspects– Fundamental to all disciplines, fields, and approaches

concerned with researching and designing computer-based systems for people

13www.id-book.com

HCI and Interaction Design (ID)

14www.id-book.com

Relationship Between ID, HCI and Other fields

• Academic disciplines contributing to ID– Psychology– Social Sciences– Computer Science– Engineering– Ergonomics– Informatics

15www.id-book.com

Relationship between ID, HCI and other fields

• Design practices contributing to ID– Graphic design– Product design– Artist-design– Industrial design

ID Came from HCI http://mysite.verizon.net/resnx4g7/PCD/

WhatIsInteractionDesign.html

From “What is Interactive Design” by Craig Marion Originally, Computer Scientists focused on hardware

and software issues exclusively Made sense in context of computer development

history … In late 80's ACM and IEEE recommended user

interface design for CS curriculum Subfield called Human Computer Interaction was

created

Came from HCI Concept of Interaction Design came later

Broader than just HCI One early definition

“Any communication between a user and computer, be it direct or indirect

Direct interaction involves a dialog with feedback and control throughout the performance of the task.

Indirect interaction may involve background or batch processing. The important thing is that the user is interacting with the computer in order to accomplish something” (Dix et al., 1998)

Web Design and ID In the context of Web Design, interaction

design is designing appealing user experiences

One web designer discusses navigation in Web design as

Rather than designing sidebars and menus, you're designing spaces and interactions

... You're crafting the user experience. . . . In graphical Web environment, interface design

has to do with constructing visual meaning

Interaction Designer A user interaction designer's job

Responsible for ensuring usability, including user performance and satisfaction

They are concerned with design issues such as functionality, sequencing, content, and information access, as well as what menus should look like, how forms should be formatted, whether to use a mouse or trackball, and how to ensure consistency across an interface

Interaction Designer In many cases especially in smaller

development companies User product design is conducted by the

developers creating the products There nobody with the title Interaction

Designer

Another View Interactive Design http://hci.stanford.edu/~winograd/

Terry Winograd from Stanford, discusses how Interaction Design is truly something different than either programming or straight design … But the "page" today is often much less like a printed page

than a graphic user interface -- not something to look at, but something to interact with

Page designer needs to be a programmer with a mastery of computing techniques and programming languages such as Java.

Yet, something more is missing in the gap between people trained in graphic arts and people trained in programming

Neither group is really trained in understanding interaction as a core phenomenon. They know how to build programs and they know how to lay out text and graphics,

But there is not yet a professional body of knowledge that underlies the design of effective interactions between people and machines

History of Humans and Computers

And their Interactions

History of Humans and Computers Where did HCI innovations and philosophy come

from? Who were the major personalities? What were the important systems? “Understand the past and you are better

equipped to understand the future ...”

Chronology of System Development(another take on style)

1945-1955Pioneer

1955-1965Historical

1965-1980Traditional

1980-1995Modern

1995-?Future

UI Paradigmbatch processing command languages

full screen (menus,forms) WIMP

noncommand basedinterfaces

Terminal TechnologyTTY typewriter

line orientedterminals (“glass

TTY” CRT)full screen terminals

graphical displays

desktopworkstations

heavy portables

“Dynabook”multimedia I/O

easily portable

cellular modem

User Typesexperts, pioneers

technocrats

professionalcomputerists

specialized groupswithout computer

knowledge

businessprofessionals

hobbyists

everybody

Operating Modeone user

batch

central processing

time sharing

remote accesssingle user PC’s

networked singleuser

embedded systems

ProgrammingLanguage

machine language assembler high level languages

problem orientedlanguages

spreadsheets

nonimperative visualprogramming

Wise, 1997

Vannevar Bush MEMEX• MIT professor 25 years, etc.

– Claude Shannon (information theory) was student

• Roosevelt’s science advisor in WWII • Invented continuous intergraph or Differential Analyses

– Essentially, Charles Babbage’s Difference Engine with shafts driven by motors

– Analog computing solutions to differential equations (gears, etc.)

– Big and handmade

Vannevar Bush MEMEX• "As We May Think", 1945

– MEMory EXtender system– Atlantic Monthly!– available at:

http://www.theatlantic.com/atlantic/atlweb/flashbks/computer/bushf.htm

– “new knowledge not reaching the people who would benefit from it”

– Concerned about explosion of scientific literature which made it impossible even for specialists to follow developments in a field,

– “A Memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility

– It is an enlarged intimate supplement to his memory.”

“A memex looked like a desk with two pen-ready touch screen monitors and a scanner surface. It had several gigabytes of storage space filled with textual and graphic, indexed, information”

• Microfilm projectors for viewing different information – uses mircofilm for storage – new material can be

added via microfilm or by direct entry via ‘‘dry photography'‘

• Supports indexing, cross referencing, keywords– supports associative

indexing via links and creation of ``trails'' which can later be followed

– allows annotations comments, and marginal notes .

– envisions multimedia i/o: other senses, such as, speech and audio

Vannevar Bush MEMEX

Associative indexing"The process of tying things together is important”New profession of “trail blazing"Trail building and trail following by user

History of HCI

Douglas Engelbart

The Problem (early ‘50s)“...The world is getting more complex, and problems are getting more urgent. These must be dealt with collectively. However, human abilities to deal collectively with complex / urgent problems are not increasing as fast as these problems

If you could do something to improve human capability to deal with these problems, then you'd really contribute something basic.”

...Doug Engelbart

Douglas Engelbart, 1963 Turing Award, 1998

Augmentation of human intellect (1963)

“... increasing capability of man to approach a complex problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems.”

His ideas built on Bush's idea of a machine that would aid human cognition

Hierarchical structures for ordinary documents

Group creation and problem solving

May 23 30

Augment/NLS (1968)Augment/NLS Features:

NLS System(1965 1968)• Outline editors for idea development • Hypertext linking • Tele-conferencing, word processing, e-mail

System Had• Mouse pointing device for on-screen selection• Invented the mouse (1965) as a replacement for light pens for use in his NLS system• Full windowing software environment • On-line help systems• Concept of consistency in user interfaces

History of HCI

The First Mouse (1964)The First Mouse (1964)

Ivan Sutherland Direct manipulation interface, where visible objects

on screen are directly manipulated with pointing device, was first demonstrated by Ivan Sutherland in Sketchpad

His 1963 MIT PhD thesis SketchPad supported manipulation of objects using

a light-pen, including grabbing objects, moving them, changing size

Sutherland’s Sketchpad First truly interactive

graphics system, Sketchpad A fairly sophisticated

“paint” (or drawing) program

“Sketchpad, A Man-Machine Graphical Communication System”

Available www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf

Video: www.youtube.com/watch?v=mOZqRJzE8xg

Ivan Sutherland using Sketchpad in 1963 CRT monitor, light pen and function-key panel

Advances in Computer Graphics for

Interaction • Input devices such as data tablets (1964)

• Display processors, capable of real time image manipulation (1968)

• Introduction of low cost graphics terminals (1970s)

• OS support for interactive graphics under timesharing systems

• New programming languages for embedded graphics support

 

The “Personal Computer”, 1

Dynabook (Alan Kay, 1977): Conceptualized notebook

computer:

cardboard prototype

“...a self contained knowledge Manipulator in a portable package the size of an ordinary notebook...”

Powerful processor, lots of memory, high resolution graphics, high fidelity audio

 Altair 8800 (1975):Considered to be first microcomputer

2 MHz Intel 8080 with 256 bytes standard RAM and interfaced with the user through octal front panel switches

Popular Electronics home computer people, could build for around $400

Altair 8800

The “Personal Computer”, 2

Apple II (1977) Was “easy to use”

Color graphicsHigh-level language embedded in ROM 4K of memory, more could be added to a maximum of 12K (if using the 4K chips) or 48K (if using the 16K chips)

Innovations at Xerox PARC in Late 1970s Xerox Alto

Many ideas developed at Xerox PARC • User conceptual model via the

desktop metaphor . • Direct manipulation,

property/option sheets to specify appearance of objects .

• What you see is what you get (WYSIWYG)

• Universal generic commands that are used throughout the system

– e.g., move, copy, edit, delete

• High degree of consistency “look and feel”

May 23 38

Xerox Star - ‘81

First commercial PC designed for “business professionals”Desktop metaphor, pointing, WYSIWYG

First system based on usability engineering

May 23 39

Xerox Star (1981)

May 23 40

Xerox Star (GUI)

Apple Computer - Lisa

Apple Lisa (1983)

      “after a visit to Xerox …”

Based on ideas from Xerox Star

      could be used as an office tool but also individuals

At $10,000 was cheaper than the Star,

But... also failed...

Apple Computer - Macintosh

Apple Macintosh (1984)

Same ideas from Lisa, but much improvedReasons for success: –  Cheaper: only $2500 . –   ‘‘second generation,'' many problems

with Lisa were fixed . – Open architecture and powerful

developers toolkit . – Published interface guidelines: consistent

look and feel for apps– Excellent graphics and emergence of

desktop publishing–  Apple had marketing expertise,

distribution channels, and experienced computer sales and support staff

 

May 23 43

IBM (1981)

IBM PCProduct shot of IBM Personal Computer (5150), introduced in 1981;

Features: Monitor, keyboard, and pin-feed printer; b/w.Operating system (OS) was by Microsoft, who licensed it to IBM as PC-DOS

Although not necessarily best machine by technological standards, IBM's expertise and fact that IBM PC actually looks and feels like a professional computer system made IBM PC and the numerous PC clones extremely popular

Evolved into so-called Wintel (Windows + Intel) computer systems, used world-wide.

From http://www.blinkenlights.com/pc.shtml

May 23 44

MS DOS (1981)

Microsoft DOS (Disk Operating System) is a command line user interface.

Microsoft releases MS-DOS 1.0 to IBM, for original IBM PC in 1981

In 1982 MS-DOS 1.1 supports 320KB double-sided floppy disk drives

© Microsoft Inc.

May 23 45

MS Windows (1987)

Release of the IBM PC AT in August 1984 running at 6MHz

Windows planed 1983 was released on August 11, 1987

Windows 1.01 was a large disappointment!

© Microsoft Inc.

May 23 46

Ultimate Display (1965)

Ivan Sutherland pioneer in field of computer graphics and in 1965 he described

'The Ultimate Display', which included interactive graphics and force-feedback devices

In 1968, he described a prototype virtual reality system in his paper 'A head-mounted three-dimensional display'

But it was a team at NASA Ames Research Center opened up virtual reality worlds with their Virtual Interface Environmental Workstation (VIEW),

Developed during 1980s as a training system for future astronauts

© NASA Ames Research Center

47

VIEW (ca.1985)The VIEW configuration included a head-mounted display, head and hand tracking, speech recognition, three-dimensional audio output, and a tracked and instrumented glove.

The glove was the interface through which the user could interact with the virtual world. A graphical representation of the glove moved around the virtual world in response to the user's hand movements. The glove had fibreoptics embedded in it and these detected changes in finger positions, while a separate motion sensor detected the position of the hand.

The computer recalculated the coordinates of the glove's image based its movements

© NASA Aerospace Lab.

May 23 48

Virtual Cockpit (1987)

© British Aerospace Lab.

May 23 49

Digital Data Entry Glove (1985)

Digital Data Entry Glove, T. G. Zimmerman & Y. Harvill first glove-like device (cloth) onto which numerous touch, bend, and inertial sensors were sewn.

measured finger flexure, hand-orientation and wrist-position, and had tactile sensors at fingertips.

orientation of hand tracked by video camera; required clear line-of-sight observation for the glove to function.

designed as alternative to keyboard; matched recognized gestures/hand orientations to specific characters, specifically to recognize the Single Hand Manual Alphabet for the American Deaf; circuitry hard-wired to recognize 80 unique combinations of sensor readings to output a subset of the 96 printable ASCII characters; a tool to “finger-spell” words.

finger flex sensors, tactile sensors at the fingertips, orientation sensing and wrist-positioning sensors; positions of sensors were changeable.

US Patent 4,542,291: Zimmerman & Harvill, Optical Flex Sensor, September 17, 1985 [ACM CHI paper 1987] © VPL Research,

Inc.

May 23 50

World Wide Web (1990)In 1980, Tim Berners-Lee, a consultant at CERN, wrote a program called "Enquire-Within-Upon-Everything," enabling links to be made between any point in the system.

Instead of standardizing equipment or software, they created standards for data, and a universal addressing system. That way any document on the Internet could be retrieved and viewed

In 1990, CERN was the largest Internet site in Europe. Over the next year or two, the proposal was circulated and revised, resulting in an initial program being developed that was dubbed the World Wide Web.

In 1992, the World Wide Web was demonstrated and distributed, and browser software was released throughout and beyond CERN. That November there were about 26 reliable Web servers.

The early browsers were functional but not especially "user-friendly."

A young programmer at the National Center for Supercomputing Applications (NCSA) named Marc Andreesen created a new graphical Web browser. This was pleasing to the eye and easy to use -- just point-and-click. Users didn't need to know any programming or even any Internet addresses.

Andreesen and his coworkers called this browser Mosaic, and released free versions for Windows and Macintosh in August of 1993.

By October there were more than 200 Web servers, and at the end of 1993, Mosaic was being downloaded from NCSA at a rate of 1,000 copies per day. By June 1994, there were 1,500 Web servers.

In July 1993, there were 1,776,000 hosts in 26,000 domains; by July 1996, there were 12,881,000 hosts in 488,000 domains. In July 1996, there were 3,054 Internet service providers and projections of Web user sessions rising to 15.79 billion in the year 2000.

May 23 51

Augmented Reality (AR)

User sees real environment; combines virtual with real

Supplements reality, instead of completely replacing it

Photo-realism not necessarily a goal

Core aspects

May 23 52

Augmented Reality (AR) Boeing (1990)

The term "augmented reality" was coined at Boeing in 1990 by researcher Tom Caudell.

He and a colleague, David Mizell, were asked to come up with an alternative to the expensive diagrams and marking devices then used to guide workers on the factory floor.

Proposed replacing large plywood boards, which contained individually designed wiring instructions for each plane, with a head-mounted apparatus that would display a plane's specific schematics through high-tech eyeware and project them onto multipurpose, reusable boards.

Customized wiring instructions would essentially be worn by the worker and altered quickly and efficiently through a computer system.

© Boeing Inc., USA

Tom Caudell

May 23 53

MIT Wearables (1996-)

What's a Wearable?

To date, personal computers have not lived up to their name. Most machines sit on the desk and interact with their owners for only a small fraction of the day. Smaller and faster notebook computers have made mobility less of an issue, but the same staid user paradigm persists. Wearable computing hopes to shatter this myth of how a computer should be used. A person's computer should be worn, much as eyeglasses or clothing are worn, and interact with the user based on the context of the situation. With heads-up displays, unobtrusive input devices, personal wireless local area networks, and a host of other context sensing and communication tools, the wearable computer can act as an intelligent assistant, whether it be through a Remembrance Agent, augmented reality, or intellectual collectives.

May 23 54

TX-0 (1959)Does Speech Recognition

MIT Speech group with TX-0, c1959.

Speech, handwriting recognition, neuro data analysis, etc.

Interactive editors, debuggers, etc.

© MIT Lincoln Lab

The TX-0 computer was the world's first high speed transistorized computer.

The TX-0 was the most powerful system of its day (1957), representing a quantum leap in computer technology at the time.

May 23 55

Speech controlled application

A voice activated dental record system (ORATEL, ORQUEST)(200 different words, relatively simple grammar)

1. Dragon2. L&H3. IBM Pure Speech4. Kurzweil

Summary

HCI and Interactive design spans a wide range of interfaces and systems

Future will only get more interesting as technology evolves along with humans

Seems like the lines are blurring between what is artificial and what is human

The End Reference

http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html

Reading Assignment Go to book website,

http://www.id-book.com/chapter1_links.php Read essay, “What is Interactive Design”

http://mysite.verizon.net/resnx4g7/PCD/WhatIsInteractionDesign.html Read article, “First Principles, from Tog”

http://www.asktog.com/basics/firstPrinciples.html

Write a brief summary of the articles, few paragraphs.Be prepared to answer questions on on Friday