CSCI 6363 Human Computer Interaction Fall, 2015 Class Introduction and User Interface History Xerox Star, 1981 CSCI 6363 Human Computer Interaction Fall, 2015

Introduction Welcome Introductions Name, where from, program, year of study (when finish, if 2nd year about program), “goals” – from course and more generally About the course structure – class web site Syllabus Exams “Objectives” and exams Programming and Project Now, some details User interfaces have to do with people, and computer scientists don't like to work on problems involving people. The classic work on user interfaces that sets the current paradigm was invented outside of universities in industrial research laboratories and government-funded institutes. -- Stuart Card, interface researcher at Xerox PARC

About the Course Content “Human Computer Interaction” “Presents theory of human-computer interaction, as well as development methods for interfaces, such as user centered design, … . Course presents evaluation and testing techniques, such as heuristic evaluation, … as well as user-interface programming and ethical and societal issues.” Will look in detail about how to design and implement interfaces Will develop skills through both the study of design principles from the literature and their application to development of systems “Theories, Principles, guidelines” Qt is a “high level”, cross-platform, evolving system Will examine human-computer interaction literature through: “Secondary sources”, books, review articles “Primary sources”, technical journal articles As a graduate course, requires synthesis of ideas

Familiar Systems … What is the below? Right, a computer Many (essentially all) courses concerned with, e.g., algorithms, architecture, operating systems, … How many courses have you had concerned with these?

Familiar Systems … What is the below? Right, a human Not so many courses in your curriculum talk about design for However, without humans there would be no computers! (because they not only build them, they buy and use them)

Familiar Systems … So, the subject(s) of this course – human computer interaction Computer system, human, software, hardware, programming, models, … And – most importantly, their interaction Human-Computer Interaction: HCI

Familiar Systems … So, the subject(s) of this course – human computer interaction Computer system, human, software, hardware, programming, models, … And – most importantly, their interaction Human-Computer Interaction: HCI

Familiar Systems … So, the subject(s) of this course – human computer interaction Computer system, human, software, hardware, programming, models, … Also, will be concerned with how to program display and interaction mechanisms common to user interface implementation

Familiar Systems … So, the subject(s) of this course – human computer interaction Computer system, human, software, hardware, programming, models, … Also, will be concerned with how to program display and interaction mechanisms common to user interface implementation Even learn some things about the human Cognition, performance, …

Why Design for the Human? Practically … Design of systems often “neglected” element At least in context of curriculum Products succeed or not, depending much more on their interface design, than, e.g., efficiency of implementation E.g., Apple!! Bigger picture … “External aids to cognition”, as critical for humans Ability of computers to store and retrieve information has significant impact on our culture History of computing systems leads to emphasis on interactive system This is the 50 year lesson i.e., the perspective that will help you think across your career

Why Design for the Human? An example

Ever seen this?

Ever seen this? What’s wrong here? To start with, it doesn’t provide the user feedback about whether the last action was correct It does not say it is the course schedule Then, well, I guess it’s a matter of “selecting a term”

What’s a module? Is it like a semester?

OK, scroll down But, why do you (the user have to scroll down? Why isn’t the usual, rather the exceptional, choice the one on top? What is the user’s impression of the system and the organization using it?

OK, scroll down Besides impression and satisfaction, what’s the cost? About 6 seconds per user If practiced If no error 6 secs * 3 times * 30,000 users =~ 150 hours How long to do right? ~ 0 hours

OK, scroll down But, why do you (the user) have to scroll down? Why isn’t the usual, rather the exceptional, choice the one on top? A simple design principle What is the user’s impression of the system and the organization using it?

OK, scroll down But, why do you (the user have to scroll down? Why isn’t the usual, rather the exceptional, choice the one on top? What is the user’s impression of the system and the organization using it? ? Incompetent ? Doesn’t care about user (me!)

Why HCI and Interactive Systems? The interface is all the user (customer, employee) sees! Efficiency, success, satisfaction … Practically … In sw systems > 50% of code is ui code And somebody has to program it Discipline wise … ACM SIGCHI is 2nd largest conference SIGGRAPH in 10’s of k, SIGCHI k’s … many just hundreds Bigger picture … “External aids to cognition”, as critical for humans Ability of computers to store and retrieve information may have deep implications History of computing systems leads to emphasis on interactive systems Context first

Overview of Interactive Systems Humans interact with computers primarily through displays (and input devices) In fact, lots of things going on that are part of the whole context of computing, humans and hci Human Interaction Style, characterization, design Programming systems Other UTPA CS courses: CSCI 6360: Graphics CSCI 6361: Visualization

External Aids to Cognition A “big picture” (1,000 year) idea Surely important for a career Human as “tool maker” … and the computer is a heck of a tool Computers “amplify cognition”

Amplifying Cognition A really big idea … Humans think by interleaving internal mental action with perceptual interaction with the world This interleaving is how human intelligence is expanded Within a task (by external aids) Across generations (by passing on techniques) Computer in general, and interactive systems in particular, are important class of external aids A quick example, then back to the abstract

Amplifying Cognition A really big idea … Humans think by interleaving internal mental action with perceptual interaction with the world This interleaving is how human intelligence is expanded Within a task (by external aids) Across generations (by passing on techniques) Computer in general, and interactive systems in particular, are important class of external aids A quick example, then back to the abstract

External Cognition – A Demo In your head: 34 x 72

External Cognition – A Demo In your head: 34 x 72 Without special purpose algs, it’s a chore Need to remember intermediate results: 34 x 2 and 34 x 70 and add them External aids make it easy to remember int. results paper and pencil, easy Or do away with altogether calculator, fast

Amplifying Cognition Humans think by interleaving internal mental action with perceptual interaction with the world This interleaving is how human intelligence is expanded Within a task (by external aids) Across generations (by passing on techniques and knowledge) Computers in general, and interactive systems in particular, are important class of “external aids to cognition”

External Aids to Cognition In fact, a long history of external aids Abacus Slide rule exploits addition of logs for multiplication Analog device Computers are general purpose external aids to cognition Quite revolutionary … … and a great place to spend a career …

External Aids to Cognition

Ratio of Human Cost to Hardware Cost for Computing Many years ago computers were large expensive unreliable machines Von Neuman thought a few machines of capacity of Eniac would be enough for US Plugging in cables, or setting switches, was reasonable use of operator time (both training and operation) Cost of computer time relative to operator time was very high, And tasks that were performed were relatively simple A few calculations vs. interactive scientific visualization, or the human task of managing one's own "information space" ENIAC

Ratio of Human Cost to Hardware Cost Interface styles have changed over time As cost of hardware has decreased, has resulted in increasing need for efficiency of human time utilization

Ratio of Human Cost to Hardware Cost Change in the relative cost of computer to human time, coupled with tasks that can be performed due the processing power are responsible for the change in interface style (put another way:) Power of computer essentially ALLOWS more computing power to be directed toward the interface Today, even "entry-level" PC's have "way more" processing power than needed for most task e.g., word processing Today, cost of hardware is essentially trivial compared to the cost of human user!

Ratio of Human Cost to Hardware Cost Moore’s law is the 800 pound elephant in the room But, no real change in change in interaction style since mid ’80’s 30 years! Approaching a complete human generation! Rather, more computing devices Shneiderman notes, and his current edition reflects this Also, connectivity of devices and storage

Context of User Interfaces Graphics is key enabling technology in evolution of computing environments: Graphical user interfaces Visual computing, e.g., desktop publishing, scientific visualization, information visualization Hardware revolution drives everything ~ every 18 months, computer power improves by factor of 2 in price/performance Moore's Law … and exponential growth generally – things are different … Graphics memory and network speeds are on even faster exponentials   graphics chips in particular have major improvements every six to nine months

Moore’s Law … the 800 pound elephant in the room

Moore’s Law – CPUs Exponential growth Hardware revolution drives everything ~ every 18 months, transistor count improves by factor of 2 in price/count Below has linear y axis for emphasis, next with log y axis Moore's Law, mid ‘60’s … really, ~Law, or even metaphor Gordon Moore, 1962

Moore’s Law - CPUs Hardware revolution drives everything ~ every 18 months, transistor count improves by factor of 2 in price/count Moore's Law

Moore’s Law - CPUs Hardware revolution drives everything ~ every 18 months, transistor count improves by factor of 2 in price/count Moore's Law

Another Example of Exp. Growth The Internet … by whatever metric

Another Example of Exp. Growth And digital camera resolution ….

Taking Advantage of Exp. Growth?

The Other Side of Moore’s Law Computing Becomes Exponentially Cheaper With implications for interface design, ubiquitous computing, … Computing power a commodity E.g., cpu power for gui such as Mosaic, IE, ~50 cents! today, cf. Kuniavsky

On Exponential Growth … Some “technology” is exponential in advancement Other things are not … E.g., software and …

But, Moore’s Law Dead? … and transistor count not equal to power

Moore’s Law Dead? Transistor count not equal to performance

Parallelism and Moore’s Law Moore’s law is alive and well for graphics and may be fine too for “gpu computing” Because lends itself to parallelization Pipeline architecture works well with current approach to cg Now, gpu processing power significant fraction of cpu processing power in pc’s How to use parallel, here, gpu, architectures is not a new question Cf. Nvidia gpu programming language (CL)

Ratio of Human Cost to Hardware Cost

Ratio of Human Cost to Hardware Cost Moore’s law is the 800 pound elephant in the room But, no real change in change in interaction style since mid ’80’s 25 year’s! Approaching a complete human generation Rather, more computing devices Shneiderman notes and his current edition reflects this Also, connectivity of devices and storage

And Ratio of Human Cost to Hardware Cost for Computing … and “Neural Power” But, like, not … 1. Promise of future fallacy 2. Computer processing not (at all) like neural processing (but, cf. this month’s CACM, “Cognitive Computing”) Hans Moravec, When will computer hardware match the human brain? Dec. 1997 http://www.frc.ri.cmu.edu/~hpm/

Chronology of System Development (another take on style) Wise, 1997

Future? Web is part of it Mobile applications are part of it What else? First, intellectual precursors to “web as we know it” Example of what “the idea” looked like, before the technology to support it was available

W W W = Hypertext (a quick example of why vision and history matter)

W W W = Hypertext (a quick example of why vision and history matter) Real “power” interest in Internet only arose well after its initial implementation ARPANET Relatively few people cared about ftp, bbs, … At least “few” compared to current use of WWW Interest and use arose only after: Specification of WWW How to go from one file/document to another via its address … the link! And then only with design of a graphic user interface for it Text-based browsers not too neat (at least to non-computer types) How to “navigate” easily and with use of pictures/images/icons Essential idea of “navigation” among documents dates to Vannevar Bush’s Memex, 1945

History: 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

History: Bush's MEMEX, 1945 "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 the 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.” desk, slanting screens, buttons, levers, and keyboard “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”

History: Bush's MEMEX, 1945 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 Associative indexing "The process of tying things together is the important thing.“ New profession of ``trail blazing" Trail building and trail following by user

Editor’s foreword to Bush’s 1945 Atlantic Monthly article As Director of the Office of Scientific Research and Development, Dr. Vannevar Bush has coordinated the activities of some six thousand leading American scientists in the application of science to warfare. In this significant article he holds up an incentive for scientists when the fighting has ceased. He urges that men of science should then turn to the massive task of making more accessible our bewildering store of knowledge. For years inventions have extended man's physical powers rather than the powers of his mind. Trip hammers that multiply the fists, microscopes that sharpen the eye, and engines of destruction and detection are new results, but not the end results, of modern science. Now, says Dr. Bush, instruments are at hand which, if properly developed, will give man access to and command over the inherited knowledge of the ages. The perfection of these pacific instruments should be the first objective of our scientists as they emerge from their war work. Like Emerson's famous address of 1837 on "The American Scholar," this paper by Dr. Bush calls for a new relationship between thinking man and the sum of our knowledge. --THE EDITOR

Design of the Internet and its Access History of Berners-Lee specification History of Mosaic

Design/Invention of the WWW ARPANET, 1969 – then, NSFNET – then, Internet DOD sponsored distributed network with alternate routes to withstand nuclear attack Internet Protocol added, 1978 Tim Berners-Lee CERN Organisation européenne pour la recherche nucléaire European Organization for Nuclear Research 1980, ENQUIRE Hypertext with linked pages 1989, First proposal for “large hypertext system” 1990, with Robert Caillau standards for www published

Design/Invention of the WWW 1990, CERN phone book first document on WWW 1st web server a NeXT designed by Steve Jobs info.cern.ch 1st web browser Tim Berners-Lee Text only Paul Kuntz, 1991 Brought NeXT software back to Stanford Linear Accelerator Center Louise Addis adapted for VM/CMS os on IBM mainframe Display center’s documents

From alt.hypertext, August 6, 1991 We also have code for a hypertext server. You can use this to make files   available (like anonymous FTP but faster because it only uses one connection).   You can also hack it to take a hypertext address and generate a virtual   hypertext document from any other data you have - database, live data etc. It's   just a question of generating plain text or SGML (ugh! but standard) mark-up on   the fly. The browsers then parse it on the fly. The WWW project was started to allow high energy physicists to share data,   news, and documentation. We are very interested in spreading the web to other   areas, and having gateway servers for other data.  Collaborators welcome! I'll   post a short summary as a separate article. Tim Berners-Lee                         t...@info.cern.ch World Wide Web project                  Tel: +41(22)767 3755     CERN                                    Fax: +41(22)767 7155 1211 Geneva 23, Switzerland             (usual disclaimer) In article <1991Aug2.115...@ardor.enet.dec.com> kan...@ardor.enet.dec.com (Nari  Kannan) writes: >    Is anyone reading this newsgroup aware of research or development efforts in > the following areas: >     1. Hypertext links enabling retrieval from multiple heterogeneous sources of   > information? The WorldWideWeb (WWW) project aims to allow links to be made to any   information anywhere. The address format includes an access method   (=namespace), and for most name spaces a hostname and some sort of path. We have a prototype hypertext editor for the NeXT, and a browser for line mode   terminals which runs on almost anything. These can access files either locally,   NFS mounted, or via anonymous FTP. They can also go out using a simple protocol   (HTTP) to a server which interprets some other data and returns equivalent   hypertext files. For example, we have a server running on our mainframe   (http://cernvm.cern.ch/FIND in WWW syntax) which makes all the CERN computer   center documentation available. The HTTP protocol allows for a keyword search   on an index, which generates a list of matching documents as annother virtual   hypertext document. If you're interested in using the code, mail me.  It's very prototype, but   available by anonymous FTP from info.cern.ch. It's copyright CERN but free   distribution and use is not normally a problem. The NeXTstep editor can also browse news. If you are using it to read this,   then click on this: <http://info.cern.ch/hypertext/WWW/TheProject.html> to find   out more about the project. We haven't put the news access into the line mode   browser yet. The WorldWideWeb (WWW) project aims to allow links to be made to any information anywhere. . .

A Design to Popularize the WWW Early adopters of www were universities, centers, etc. As with ARPANET Text based browsers with embedded links Primitive functionality and interface elements Erwise and Viola, 1992 For X-windows 1st graphical browsers outside NeXT-based Mosaic Code still available! (checked, 3/1/13) ftp://ftp.ncsa.uiuc.edu/Mosaic/ Marc Andreesen and Eric Bina Undergraduate students at UIUC and working at NCSA Used computers belonging to UIUC to develop, so belonged to university 1993 demo: http://www.totic.org/nscp/demodoc/demo.html Strongly support of integrate multimedia Responsive to bug fixes Mosaic – Netscape Navigator Jim Clark, founded SGI “browser wars”

Some Interactive Systems History

Some More History Vision, or Design, then Technology to (fully) Support Doug Englebart A Turing Award for vision in interaction Ivan Sutherland A early 1960’s “paint program” that foreshadowed much Alan Kay The “personal computer” – also, dynabook, Apple II Today’s ubiquitous interaction style Xerox Star and Alto Then, Steve Jobs visits Xerox, … Apple Lisa and Macintosh

Douglas Engelbart, 1963 Turing Award, 1998 – this is a big deal! Augmentation of human intellect (1963) “... increasing the capability of man to approach a complex problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems.” Recognized 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 NLS System (1965­1968): outline editors for idea development hypertext linking tele-conferencing, word processing, e-mail System required: mouse pointing device for on-screen selection: Invented the mouse (1965) as a replacement for light pens for use in his NLS system a one-hand chording device for keyboard entry full windowing software environment on-line help systems concept of consistency in user interfaces

Turing Award ACM’s highest honor E.g., p = np ? Several Turing awards for interfaces and insights to nature of computing as we have described it This fact often neglected in view of the field of computing …

Sutherland’s Sketchpad Ivan Sutherland “Pioneer” of … lots of things Visualization Graphics Interaction Still around Evans and Sutherland graphics First truly interactive graphics system, Sketchpad A fairly sophisticated “paint” (or drawing) program MIT, Ivan Sutherland’s 1963 Ph.D. thesis “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 “Among most important works in computer science” Ivan Sutherland using Sketchpad in 1963 CRT monitor, light pen and function-key panel

Ivan Sutherland’s Sketchpad, 1963 Regarded as the first to implement much of what called “visualization”, “immersion”, and “virtual reality” (not to mention cg) Some quotes: ….. If the task of the display is to serve as a looking-glass into the mathematical wonderland constructed in computer memory, it should serve as many senses as possible. ….. By working with such displays of mathematical phenomena we can learn to know them as well as we know our own natural world. Such knowledge is the major promise of computer displays. ….. The ultimate display would, of course, be a room within which the computer can control the existence of matter. A chair displayed in such a room would be good enough to sit in. Handcuffs displayed in such a room would be confining, and a bullet displayed in such a room would be fatal. With appropriate programming such a display could literally be the Wonderland into which Alice walked.

Sutherland’s 1960’s equipment “Ultimate display”, 1965 Sword of Damocles – 1st HMD Actual camera-like metal shutters Not OSHA approved

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 New applications flourished - computer­aided math libraries (1968) . - 3D computer graphics / molecular modeling (1968, 1977). - animation, movies, sequencing of images (1966, 1969)  

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 appeared in Popular Electronics home computer people, could build for around $400 Altair 8800

The “Personal Computer”, 2 Apple II (1977): Was “easy to use” Color graphics High-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 Comprehensive combination of many ideas developed at Xerox PARC and other pioneering systems: 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 . modeless interaction and limited amount of user tailorability  

(FYI) Xerox Alto The Xerox Alto (1979): it was always referred to as the "personal computer" it used high resolution bit-mapped graphics, a mouse, menus, icons and other features a single user machine supplied with software for word processing, electronic mail and other office tasks the 15 inch display was bit-mapped and had 72-dpi resolution (about 1000 x 800) 1/2 meg of memory, 29 mb of disk storage, and a mouse about the minimum specifications to support a graphic interface pioneered developments of GUIs and applications text editing, drawing, document processing, e­mail, windows, menus, scrollbars, mouse control and selection        simultaneous file storage featured the world's first What-You-See-Is-What-You-Get (WYSIWYG)    lead to the creation of Ethernet, a local area networking protocol, to link Altos within PARC (1975)

Xerox Alto Screen shots of an Alto

The Xerox Star (1981), 1 "The best way to predict the future is to invent it." --Alan Kay Designed for business professionals in an office environment. Contained all of the Alto's capabilities plus multilingual software, the Mesa programming language, and interim file servers The most distinguishing features of the Star were technologies like bitmapped screens, windows, a mouse-driven interface, and icons. The system allowed users to create complex documents by combining computing, text editing and graphics, and to access file servers and printers around the world through simple point-and-click actions  

The Xerox Star (1981), 2 Star did not turn out to be a commercial success. The reasons for failure: it was ahead of its time and the full potential of the software was only visible to the PARC developers the software was designed for users with no computer knowledge, it became very demanding on the hardware perceived as too slow unreasonable speed because of memory consumption and the number of hardware cycles needed costly, $16,595 in 1981; IBM introduced a cheaper machine . limited functionality: no spreadsheet lacked an open architecture no 3rd party application development: because the programming language was never publicly released. direct manipulation was overly used and not the best in some cases  

(fyi) Xerox Star Design Goals (1) FAMILIAR USER'S CONCEPTUAL MODEL         as much as possible, the functionality of the system would be conveyed to the user by representing system objects by familiar concrete objects        that is, if possible, metaphor would be used to convey the capabilities of the system        after all, this was a personal computer for office use, so the designers settled on the metaphor of computer system as desktop knowledge about how to use office equipment might be used in using and learning the system   USE ‘SEEING’ AND ‘POINTING’ VS. ‘REMEMBERING’ AND ‘TYPING’         everything that is relevant to a task is visible on the screen         their rationale was couched in terms of the human visual and memory systems         basically, if possible, it's more efficient not to have to remember the set of all commands and objects         and then they made a very interesting statement, that I'll elaborate on later: "A subtle thing happens when everything is visible: the display becomes reality. The user model becomes identical with what is on the screen. Objects can be understood purely in terms of their visible characteristics. Actions can be understood purely in terms of their effects on the screen." - this has come to be called "direct manipulation"

(fyi) Xerox Star Design Goals (2) WHAT YOU SEE IS WHAT YOU GET (WYSIWYG) UNIVERSAL COMMANDS as many commands as possible should be able to be used in the same way throughout the system help, undo CONSISTENCY mechanisms should be used in the same way wherever they occur for example, the left mouse button always selects SIMPLICITY when possible but novices and experts use the same system in Alan Kay's words: "simple things should simple, complex things should be possible" MODELESS INTERACTION in practice, select object, then action for example, no delete mode USER TAILORABILITY well, if these design goals (except for the last one) CONJURED UP for you the Apple Lisa and Macintosh, that's good because it was after a trip to Xerox PARC, that Steve Jobs conjured up the Apple Lisa and Macintosh (and, I understand, entered into licensing agreements with Xerox)   indeed, these goals have become for most designers the BASIC TENETS OF GRAPHIC INTERFACE DESIGN

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 the Lisa, but much improved Reasons for success:         cheaper: only $2500 .        previous systems prepared the market .        ‘‘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  

Ware’s “Ultimate Display”

A question to ponder … Recall, ui history Nothing much new lately (30 years since gui/wimp) Is this because ui (or is) design awaits a fundamentally new way of conceptualizing the use of computers? A fact: Second language use acquired after some young, e.g., 5-8 years old, is fundamentally different than language skills acquired earlier E.g., translation vs. thinking, forming phonemes A way that can only be conceptualized by a person (or really some critical mass of people) who have fundamentally (neurologically) different ways of perceiving computers? Has it happened already? When might that happen? How might it happen?

Shneiderman Text “Human Computer Interaction” “Designing the User Interface” Some of the key points …

But first … Ben Sheiderman Provocative statements Pioneer, academic, popularizer, … U. Maryland Human Computer Interaction Lab http://www.cs.umd.edu/hcil/ Provocative statements

But first … Ben Sheiderman Provocative statements Pioneer, academic, popularizer, … U. Maryland Human Computer Interaction Lab http://www.cs.umd.edu/hcil/ Provocative statements “User-interface designers are becoming heroes of a profound transformation. Their work has turned the personal computer into the social computer, enabling users to communicate and collaborate in remarkable ways. The desktop applications that once served the needs of professionals are now enabling broad communities of users to prepare user-generated content that can be shared with millions of WWW users. And … through billions of cellphones…”

“The interface is the system.” Interface provides/conveys the only view of the “underlying” system Provides: Model of task, system capabilities … more later User interface strongly affects perception of software Usable software sells (way) better Or at a premium, cf. Apple Unusable web sites are abandoned Perception is sometimes superficial Users blame themselves for UI failings People who make buying decisions are not always end-users

Usability of Interactive Systems (next week) Introduction What is an interface? Examples of good and bad design Principles of design About the field Evolution of hci and interface design Interaction Design: Some principles through examples Usability What, why, examples, motivation Universal Usability Goals for the Profession

Interfaces – Should and Must Do Right Always should have “good” interfaces Computing time (power) is getting cheaper Users’ time isn’t Ratio discussed last time Sometimes must have “good” interfaces Disasters happen (notes) Therac-25 radiation therapy machine Aegis radar system in USS Vincennes Bad user interface design can also cost lives. The Therac-25 was a radiation therapy machine for treating cancer patients. It had an electron beam with two settings: a low-energy mode, beamed directly onto the patient, and a high-energy mode in which the beam was blocked by an X-ray generating filter. Tragically, the system’s design had a race condition between the user interface and the beam controller. If the operator chose a mode, and the machine started configuring itself, and then the operator backed up and made a different choice within the 8-second interval it took for the machine to swing its magnets into place, then part of the system wouldn’t receive the new setting. As a result, a fast, experienced operator could inadvertently give severe overdoses, and several patients died. (Nancy Leveson, “Medical Devices: the Therac-25”, 1995, http://sunnyday.mit.edu/therac-25.html) In 1988, the USS Vincennes guided missile cruiser shot down an Iranian airliner over the Persian Gulf with almost 300 people aboard. There were two failures in this incident. The radar operator interpreted the airliner as an F-14, descending as if to attack, rather than (in reality) a civilian plane that was climbing after takeoff. Both failures seemed to be caused by user interface. The IFF system was reporting the signal from an F14 on the ground at an airport hundreds of miles away, not the signal from the airliner; and the plane’s altitude readout showed only its current altitude, not the direction of change in altitude, leaving to the operator the mental comparison and calculation to determine whether the altitude was going up or down. (Peter Neumann, “Aegis, Vincennes, and the Iranian Airbus“, Risks v8 n74, May 1989). Miller, 2004, 6.831 UI Design and Implementation, MIT course citation Leveson, N. (1995). Appendix - Medical Devices: The Therac-25 http://sunnyday.mit.edu/papers/therac.pdf

In fact, User Interfaces are Hard to Design Software designers (let alone coders!) are not the user As we’ve discussed Most software engineering is about communicating with other programmers UI is about communicating with users The user is always right Consistent problems are the system’s fault …except when the user is not right Users aren’t designers

Usability Is it a “good” interface? In what ways? Usability: How well users can use the system’s functionality Dimensions of usability (quick look): Learnability: is it easy to learn? Efficiency: once learned, is it fast to use? Memorability: is it easy to remember what you learned? Errors: are errors few and recoverable? Satisfaction: is it enjoyable to use?

Usability Dimensions Vary In Importance So, what are the elements of usability? … It depends on the user Novice users need learnability Infrequent users need memorability Experts need efficiency But no user is uniformly novice or expert Domain experience Application experience Feature experience

Usability Is Only One Attribute of a System BTW, in developing large systems, development process entails a (often large) team Software designers have a lot to worry about: Functionality – Usability Performance – Size Cost – Reliability Security – Standards Many design decisions involve tradeoffs among different attributes Which is the essence of the design process

Usability Engineering Is a Process

Usability Engineering Is a Process … an iterative process Design Implement Evaluate Will later look at the “spiral” model of software engineering, which systematically incorporates iteration and change Design Evaluate Implement

Usability Engineering Is a Process Design Task analysis “Know thy user” “Know thy domain” Design principles Overarching Design guidelines Avoid obvious mistakes May be vague or contradictory Design Evaluate Implement

Usability Engineering Is a Process Implement Prototyping Cheap, throw-away implementations Low-fidelity: paper, Wizard of Oz Medium-fidelity: HTML, Visual Basic GUI implementation techniques Input/output models Toolkits UI builders Design Evaluate Implement

Usability Engineering Is a Process Evaluate Evaluation tests prototypes, using … Expert evaluation Heuristics and walkthroughs Predictive evaluation Testing against an engineering model (simulated user) Empirical evaluation Watching users do it Design Evaluate Implement

Usability of Interactive Systems Introduction What is an interface? Examples of good and bad design Principles of design About the field Evolution of hci and interface design Interaction Design: Some principles through examples Usability What, why, examples, motivation Universal Usability Goals for the Profession

Theories, Principles, Guidelines Navigating interface, organizing display Getting user’s attention, data entry Principles: “Rules that distill out the principles of effective user interfaces” Determine users’ skill level Identify tasks Choose an interaction style “Golden rules of interface design” Integrating automation and human control Theories and models: Levels of analysis theories Stages-of-action models GOMS and keystroke-level model Consistency through grammars Widget level Context of use

Managing Design Processes Organizational design to support usability Shneiderman talks about both “design” and organizational context in which it occurs Carroll and Rosson’s characterization of design “radically transformational” Shneiderman’s “three pillars of design” Guidelines documents and processes User interface software tools Expert reviews and usability Development methodologies IBM: Ease of Use, Lucid “Ethnographic” user observation Participatory design Scenario development Social impact statement for early design review Legal Issues

Expert Reviews, Usability Testing, Surveys, and Continuing Assessment Introduction Evaluation Plans, Acceptance Testing, and Life Cycle Expert reviews Usability testing and techniques Goal is to “engineer” a good interface, constrained by time and cost Survey instruments Acceptance tests Evaluation during active use “Controlled psychologically oriented experiments” Elements of science, as applied to interface evaluation

Command Line, Menu Selection, Form Fillin, Dialog Boxes What and why “frameworks (or theories) of interaction” The big picture (again) Overview of interaction styles Command line, menus, …, WIMP, … Direct manipulation “Look and feel” Details: “Theory, principles, and (especially) guidelines” Menus, form fillin

Interaction Frameworks (Dix) Communication between user and system Why have a framework? Allows “precision” in accounting for differences E.g., gulfs of execution and evaluation Presents global view All elements receive attention Task “work on task” “commands” System User “gives” “performs” “feedback”

Direct Manipulation (Hutchins et al.) Introduction Big picture first, details and a theoretical account later Examples of Direct-Manipulation systems   Explanations of Direct Manipulation Hutchins et al. paper Virtual Environments, or Immersive Interfaces

Balancing Function and Fashion User Manuals, Online Help, and Tutorials Error messages Nonanthropomorphic design Display design Window design Color “User Manuals, Online Help, and Tutorials”

Balancing Function & Fashion Interface design, both graphics and interaction, not yet “high art” (Shneiderman) Architecture and fashion are old, interfaces are not But, not too sure how far analogy goes … Usually, consider that interface design is about software engineering, usability, etc. Recall, early discussions Perhaps better, computer interface design is young Yet, there is style And it elements can be examined Where “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are made Recall, guidelines constrain, etc.

“Look and Feel” “Look and feel” Lots of things you can interact with: main WIMP components (windows, menus, icons) Buttons Dialogue boxes Palettes … Collectively known as widgets appearance + behavior = look and feel

And programming, too

End