Presentation on theme: "CSCI 6363 Human Computer Interaction Fall, 2015"— Presentation transcript:
1 CSCI 6363 Human Computer Interaction Fall, 2015 Class IntroductionandUser Interface HistoryXerox Star, 1981CSCI 6363 Human Computer Interaction Fall, 2015
2 Introduction Welcome Introductions Name, where from, program, year of study (when finish, if 2nd year about program), “goals” – from course and more generallyAbout the course structure – class web siteSyllabusExams“Objectives” and examsProgramming and ProjectNow, some detailsUser 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
3 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 interfacesWill 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 systemWill examine human-computer interaction literature through:“Secondary sources”, books, review articles“Primary sources”, technical journal articlesAs a graduate course, requires synthesis of ideas
4 Familiar Systems … What is the below? Right, a computerMany (essentially all) courses concerned with, e.g., algorithms, architecture, operating systems, …How many courses have you had concerned with these?
5 Familiar Systems … What is the below? Right, a human Not so many courses in your curriculum talk about design forHowever, without humans there would be no computers!(because they not only build them, they buy and use them)
6 Familiar Systems …So, the subject(s) of this course – human computer interactionComputer system, human, software, hardware, programming, models, …And – most importantly, their interactionHuman-Computer Interaction: HCI
7 Familiar Systems …So, the subject(s) of this course – human computer interactionComputer system, human, software, hardware, programming, models, …And – most importantly, their interactionHuman-Computer Interaction: HCI
8 Familiar Systems …So, the subject(s) of this course – human computer interactionComputer system, human, software, hardware, programming, models, …Also, will be concerned with how to program display and interaction mechanisms common to user interface implementation
9 Familiar Systems …So, the subject(s) of this course – human computer interactionComputer system, human, software, hardware, programming, models, …Also, will be concerned with how to program display and interaction mechanisms common to user interface implementationEven learn some things about the humanCognition, performance, …
10 Why Design for the Human? Practically …Design of systems often “neglected” elementAt least in context of curriculumProducts succeed or not, depending much more on their interface design, than, e.g., efficiency of implementationE.g., Apple!!Bigger picture …“External aids to cognition”, as critical for humansAbility of computers to store and retrieve information has significant impact on our cultureHistory of computing systems leads to emphasis on interactive systemThis is the 50 year lessoni.e., the perspective that will help you think across your career
13 Ever seen this? What’s wrong here? To start with, it doesn’t provide the user feedback about whether the last action was correctIt does not say it is the course scheduleThen, well, I guess it’s a matter of “selecting a term”
15 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?
16 OK, scroll down Besides impression and satisfaction, what’s the cost? About 6 seconds per userIf practicedIf no error6 secs * 3 times * 30,000 users =~150 hoursHow long to do right?~ 0 hours
17 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 principleWhat is the user’s impression of the system and the organization using it?
18 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!)
19 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 codeAnd somebody has to program itDiscipline wise …ACM SIGCHI is 2nd largest conferenceSIGGRAPH in 10’s of k, SIGCHI k’s … many just hundredsBigger picture …“External aids to cognition”, as critical for humansAbility of computers to store and retrieve information may have deep implicationsHistory of computing systems leads to emphasis on interactive systemsContext first
20 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 hciHumanInteractionStyle, characterization, designProgramming systemsOther UTPA CS courses:CSCI 6360: GraphicsCSCI 6361: Visualization
21 External Aids to Cognition A “big picture” (1,000 year) ideaSurely important for a careerHuman as “tool maker”… and the computer is a heck of a toolComputers “amplify cognition”
22 Amplifying Cognition A really big idea … Humans think by interleaving internal mental action with perceptual interaction with the worldThis interleaving is how human intelligence is expandedWithin a task (by external aids)Across generations (by passing on techniques)Computer in general, and interactive systems in particular, are important class of external aidsA quick example, then back to the abstract
23 Amplifying Cognition A really big idea … Humans think by interleaving internal mental action with perceptual interaction with the worldThis interleaving is how human intelligence is expandedWithin a task (by external aids)Across generations (by passing on techniques)Computer in general, and interactive systems in particular, are important class of external aidsA quick example, then back to the abstract
24 External Cognition – A Demo In your head: 34 x 72
25 External Cognition – A Demo In your head: 34 x 72Without special purpose algs, it’s a choreNeed to remember intermediate results:34 x 2 and 34 x 70 and add themExternal aids make it easy to remember int. resultspaper and pencil, easyOr do away with altogethercalculator, fast
26 Amplifying CognitionHumans think by interleaving internal mental action with perceptual interaction with the worldThis interleaving is how human intelligence is expandedWithin 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”
27 External Aids to Cognition In fact, a long history of external aidsAbacusSlide rule exploits addition of logs for multiplicationAnalog deviceComputers are general purpose external aids to cognitionQuite revolutionary …… and a great place to spend a career …
29 Ratio of Human Cost to Hardware Cost for Computing Many years ago computers were large expensive unreliable machinesVon Neuman thought a few machines of capacity of Eniac would be enough for USPlugging 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 simpleA few calculations vs. interactive scientific visualization, or the human task of managing one's own "information space"ENIAC
30 Ratio of Human Cost to Hardware Cost Interface styles have changed over timeAs cost of hardware has decreased, has resulted in increasing need for efficiency of human time utilization
31 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 interfaceToday, even "entry-level" PC's have "way more" processing power than needed for most taske.g., word processingToday, cost of hardware is essentially trivial compared to the cost of human user!
32 Ratio of Human Cost to Hardware Cost Moore’s law is the 800 pound elephant in the roomBut, no real change in change in interaction style since mid ’80’s30 years!Approaching a complete human generation!Rather, more computing devicesShneiderman notes, and his current edition reflects thisAlso, connectivity of devices and storage
33 Context of User Interfaces Graphics is key enabling technology in evolution of computing environments:Graphical user interfacesVisual computing,e.g., desktop publishing, scientific visualization, information visualizationHardware revolution drives everything~ every 18 months, computer power improves by factor of 2 in price/performanceMoore'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
34 Moore’s Law… the 800 pound elephant in the room
35 Moore’s Law – CPUs Exponential growth Hardware revolution drives everything~ every 18 months, transistor count improves by factor of 2 in price/countBelow has linear y axis for emphasis, next with log y axisMoore's Law, mid ‘60’s … really, ~Law, or even metaphorGordon Moore, 1962
36 Moore’s Law - CPUs Hardware revolution drives everything ~ every 18 months, transistor count improves by factor of 2 in price/countMoore's Law
37 Moore’s Law - CPUs Hardware revolution drives everything ~ every 18 months, transistor count improves by factor of 2 in price/countMoore's Law
38 Another Example of Exp. Growth The Internet … by whatever metric
39 Another Example of Exp. Growth And digital camera resolution ….
41 The Other Side of Moore’s Law Computing Becomes Exponentially Cheaper With implications for interface design, ubiquitous computing, …Computing power a commodityE.g., cpu power for gui such as Mosaic, IE, ~50 cents! today, cf. Kuniavsky
42 On Exponential Growth … Some “technology” is exponential in advancementOther things are not …E.g., software and …
43 But, Moore’s Law Dead?… and transistor count not equal to power
44 Moore’s Law Dead?Transistor count not equal to performance
45 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 parallelizationPipeline architecture works well with current approach to cgNow, gpu processing power significant fraction of cpu processing power in pc’sHow to use parallel, here, gpu, architectures is not a new questionCf. Nvidia gpu programming language (CL)
47 Ratio of Human Cost to Hardware Cost Moore’s law is the 800 pound elephant in the roomBut, no real change in change in interaction style since mid ’80’s25 year’s!Approaching a complete human generationRather, more computing devicesShneiderman notes and his current edition reflects thisAlso, connectivity of devices and storage
48 And Ratio of Human Cost to Hardware Cost for Computing … and “Neural Power” But, like, not …1. Promise of future fallacy2. 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
49 Chronology of System Development (another take on style) Wise, 1997
50 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
51 W W W = Hypertext (a quick example of why vision and history matter)
52 W W W = Hypertext (a quick example of why vision and history matter) Real “power” interest in Internet only arose well after its initial implementationARPANETRelatively few people cared about ftp, bbs, …At least “few” compared to current use of WWWInterest and use arose only after:Specification of WWWHow to go from one file/document to another via its address … the link!And then only with design of a graphic user interface for itText-based browsers not too neat (at least to non-computer types)How to “navigate” easily and with use of pictures/images/iconsEssential idea of “navigation” among documents dates to Vannevar Bush’s Memex, 1945
53 History: Vannevar Bush, MEMEX MIT professor 25 years, etc.Claude Shannon (information theory) was studentRoosevelt’s science advisor in WWII Invented continuous intergraph or Differential AnalysesEssentially, Charles Babbage’s Difference Engine with shafts driven by motorsAnalog computing solutions to differential equations (gears, etc.)Big and handmade
54 History: Bush's MEMEX, 1945 "As We May Think", 1945 MEMory EXtender systemAtlantic Monthly!available at:“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”
55 History: Bush's MEMEX, 1945Microfilm projectors for viewing different informationuses mircofilm for storagenew material can be added via microfilm or by direct entry via ‘‘dry photography'‘Supports indexing, crossreferencing, keywordssupports associative indexing via links and creation of ``trails'' which can later be followedallows annotations comments, and marginal notes .envisions multimedia i/o: other senses, such as, speech and audioAssociative indexing"The process of tying things together is the important thing.“New profession of ``trail blazing"Trail building and trail following by user
56 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
57 Design of the Internet and its Access History of Berners-Lee specificationHistory of Mosaic
58 Design/Invention of the WWW ARPANET, 1969 – then, NSFNET – then, InternetDOD sponsored distributed network with alternate routes to withstand nuclear attackInternet Protocol added, 1978Tim Berners-LeeCERNOrganisation européenne pour la recherche nucléaireEuropean Organization for Nuclear Research1980, ENQUIREHypertext with linked pages1989, First proposal for “large hypertext system”1990, with Robert Caillau standards for www published
59 Design/Invention of the WWW 1990, CERN phone book first document on WWW1st web server a NeXT designed by Steve Jobsinfo.cern.ch1st web browserTim Berners-LeeText onlyPaul Kuntz, 1991Brought NeXT software back to Stanford Linear Accelerator CenterLouise Addis adapted for VM/CMS os on IBM mainframeDisplay center’s documents
60 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 World Wide Web project Tel: +41(22) CERN Fax: +41(22) Geneva 23, Switzerland (usual disclaimer)In article (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 ( 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: < 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. . .
61 A Design to Popularize the WWW Early adopters of www were universities, centers, etc.As with ARPANETText based browsers with embedded linksPrimitive functionality and interface elementsErwise and Viola, 1992For X-windows1st graphical browsers outside NeXT-basedMosaicCode still available! (checked, 3/1/13)ftp://ftp.ncsa.uiuc.edu/Mosaic/Marc Andreesen and Eric BinaUndergraduate students at UIUC and working at NCSAUsed computers belonging to UIUC to develop, so belonged to university1993 demo:Strongly support of integrate multimediaResponsive to bug fixesMosaic – Netscape NavigatorJim Clark, founded SGI“browser wars”
63 Some More History Vision, or Design, then Technology to (fully) Support Doug EnglebartA Turing Award for vision in interactionIvan SutherlandA early 1960’s “paint program” that foreshadowed muchAlan KayThe “personal computer” – also, dynabook, Apple IIToday’s ubiquitous interaction styleXerox Star and AltoThen, Steve Jobs visits Xerox, … Apple Lisa and Macintosh
64 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 cognitionhierarchical structures for ordinary documentsgroup creation and problem solvingNLS System (19651968):outline editors for idea developmenthypertext linkingtele-conferencing, word processing,System required:mouse pointing device for on-screen selection: Invented the mouse (1965) as a replacement for light pens for use in his NLS systema one-hand chording device for keyboard entryfull windowing software environmenton-line help systemsconcept of consistency in user interfaces
65 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 itThis fact often neglected in view of the field of computing …
66 Sutherland’s Sketchpad Ivan Sutherland“Pioneer” of … lots of thingsVisualizationGraphicsInteractionStill aroundEvans and Sutherland graphicsFirst truly interactive graphics system, SketchpadA fairly sophisticated “paint” (or drawing) programMIT, Ivan Sutherland’s 1963 Ph.D. thesis“Sketchpad, A Man-Machine Graphical Communication System”Available:Video:“Among most important works in computer science”Ivan Sutherland using Sketchpad in 1963CRT monitor, light pen and function-key panel
67 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.
68 Sutherland’s 1960’s equipment “Ultimate display”, 1965Sword of Damocles – 1st HMDActual camera-like metal shuttersNot OSHA approved
69 Advances in Computer Graphics for Interaction Input devices such as data tablets (1964)Display processors, capable of realtime image manipulation (1968)Introduction of lowcost graphics terminals (1970s)OS support for interactive graphics under timesharing systemsNew programming languages for embedded graphics supportNew applications flourished- computeraided math libraries (1968) .- 3D computer graphics / molecular modeling (1968, 1977).- animation, movies, sequencing of images (1966, 1969)
70 The “Personal Computer”, 1 Dynabook (Alan Kay, 1977):Conceptualized notebook computer:cardboard prototype“...a selfcontained knowledge manipulator in a portable package the size of an ordinary notebook...”powerful processor, lots of memory, high resolution graphics, high fidelity audioAltair 8800 (1975):Considered to be first microcomputer2 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 $400Altair 8800
71 The “Personal Computer”, 2 Apple II (1977):Was “easy to use”Color graphicsHigh-level language embedded in ROM4K of memory, more could be added to a maximum of 12K (if using the 4K chips) or 48K (if using the 16K chips)
72 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
73 (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 featuresa single user machine supplied with software for word processing, electronic mail and other office tasksthe 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 interfacepioneered developments of GUIs and applications text editing, drawing, document processing, email, windows, menus, scrollbars, mouse control and selection simultaneous file storagefeatured 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)
75 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 serversThe 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
76 The Xerox Star (1981), 2Star 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 developersthe software was designed for users with no computer knowledge, it became very demanding on the hardwareperceived as too slow unreasonable speed because of memory consumption and the number of hardware cycles neededcostly, $16,595 in 1981; IBM introduced a cheaper machine .limited functionality: no spreadsheetlacked an open architectureno 3rd party application development: because the programming language was never publicly released.direct manipulation was overly used and not the best in some cases
77 (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 desktopknowledge about how to use office equipment might be used in using and learning the systemUSE ‘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 oftheir visible characteristics. Actions can be understood purely in terms of their effects on the screen."- this has come to be called "direct manipulation"
78 (fyi) Xerox Star Design Goals (2) WHAT YOU SEE IS WHAT YOU GET (WYSIWYG)UNIVERSAL COMMANDSas many commands as possible should be able to be used in the sameway throughout the systemhelp, undoCONSISTENCYmechanisms should be used in the same way wherever they occurfor example, the left mouse button always selectsSIMPLICITYwhen possiblebut novices and experts use the same systemin Alan Kay's words: "simple things should simple, complex thingsshould be possible"MODELESS INTERACTIONin practice, select object, then actionfor example, no delete modeUSER TAILORABILITYwell, if these design goals (except for the last one) CONJURED UP for youthe Apple Lisa and Macintosh, that's goodbecause it was after a trip to Xerox PARC, that Steve Jobs conjured up theApple Lisa and Macintosh(and, I understand, entered into licensing agreements with Xerox)indeed, these goals have become for most designers theBASIC TENETS OF GRAPHIC INTERFACE DESIGN
79 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 individualsat $10,000 was cheaper than the Star,but... also failed...
80 Apple Computer - Macintosh Apple Macintosh (1984):same ideas from the Lisa, but much improvedReasons 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
82 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 earlierE.g., translation vs. thinking, forming phonemesA 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?
83 Shneiderman Text “Human Computer Interaction” “Designing the User Interface”Some of the key points …
84 But first … Ben Sheiderman Provocative statements Pioneer, academic, popularizer, …U. Maryland Human Computer Interaction LabProvocative statements
85 But first … Ben Sheiderman Provocative statements Pioneer, academic, popularizer, …U. Maryland Human Computer Interaction LabProvocative 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…”
86 “The interface is the system.” Interface provides/conveys the only view of the “underlying” systemProvides:Model of task, system capabilities … more laterUser interface strongly affects perception of softwareUsable software sells (way) betterOr at a premium, cf. AppleUnusable web sites are abandonedPerception is sometimes superficialUsers blame themselves for UI failingsPeople who make buying decisions are not always end-users
87 Usability of Interactive Systems (next week) IntroductionWhat is an interface?Examples of good and bad designPrinciples of designAbout the fieldEvolution of hci and interface designInteraction Design:Some principles through examplesUsabilityWhat, why, examples, motivationUniversal UsabilityGoals for the Profession
88 Interfaces – Should and Must Do Right Always should have “good” interfacesComputing time (power) is getting cheaperUsers’ time isn’tRatio discussed last timeSometimes must have “good” interfacesDisasters happen (notes)Therac-25 radiation therapy machineAegis radar system in USS VincennesBad user interface design can also cost lives. The Therac-25 was a radiation therapy machine for treatingcancer patients. It had an electron beam with two settings: a low-energy mode, beamed directly onto thepatient, and a high-energy mode in which the beam was blocked by an X-ray generating filter. Tragically, thesystem’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 differentchoice within the 8-second interval it took for the machine to swing its magnets into place, then part of thesystem wouldn’t receive the new setting. As a result, a fast, experienced operator could inadvertently givesevere overdoses, and several patients died. (Nancy Leveson, “Medical Devices: the Therac-25”, 1995,In 1988, the USS Vincennes guided missile cruiser shot down an Iranian airliner over the Persian Gulf withalmost 300 people aboard. There were two failures in this incident. The radar operator interpreted the airlineras 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 onthe ground at an airport hundreds of miles away, not the signal from the airliner; and the plane’s altitudereadout showed only its current altitude, not the direction of change in altitude, leaving to the operator themental 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, UI Design and Implementation, MIT course citationLeveson, N. (1995). Appendix - Medical Devices:The Therac-25
89 In fact, User Interfaces are Hard to Design Software designers (let alone coders!) are not the userAs we’ve discussedMost software engineering is about communicating with other programmersUI is about communicating with usersThe user is always rightConsistent problems are the system’s fault…except when the user is not rightUsers aren’t designers
90 Usability Is it a “good” interface? In what ways? Usability: How well users can use the system’s functionalityDimensions 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?
91 Usability Dimensions Vary In Importance So, what are the elements of usability?… It depends on the userNovice users need learnabilityInfrequent users need memorabilityExperts need efficiencyBut no user is uniformly novice or expertDomain experienceApplication experienceFeature experience
92 Usability Is Only One Attribute of a System BTW, in developing large systems, development process entails a (often large) teamSoftware designers have a lot to worry about:Functionality – UsabilityPerformance – SizeCost – ReliabilitySecurity – StandardsMany design decisions involve tradeoffs among different attributesWhich is the essence of the design process
94 Usability Engineering Is a Process … an iterative processDesignImplementEvaluateWill later look at the “spiral” model of software engineering, which systematically incorporates iteration and changeDesignEvaluateImplement
95 Usability Engineering Is a Process DesignTask analysis“Know thy user”“Know thy domain”Design principlesOverarchingDesign guidelinesAvoid obvious mistakesMay be vague or contradictoryDesignEvaluateImplement
96 Usability Engineering Is a Process ImplementPrototypingCheap, throw-away implementationsLow-fidelity: paper, Wizard of OzMedium-fidelity: HTML, Visual BasicGUI implementation techniquesInput/output modelsToolkitsUI buildersDesignEvaluateImplement
97 Usability Engineering Is a Process EvaluateEvaluation tests prototypes, using …Expert evaluationHeuristics and walkthroughsPredictive evaluationTesting against an engineering model (simulated user)Empirical evaluationWatching users do itDesignEvaluateImplement
98 Usability of Interactive Systems IntroductionWhat is an interface?Examples of good and bad designPrinciples of designAbout the fieldEvolution of hci and interface designInteraction Design:Some principles through examplesUsabilityWhat, why, examples, motivationUniversal UsabilityGoals for the Profession
99 Theories, Principles, Guidelines Navigating interface, organizing displayGetting user’s attention, data entryPrinciples:“Rules that distill out the principles of effective user interfaces”Determine users’ skill levelIdentify tasksChoose an interaction style“Golden rules of interface design”Integrating automation and human controlTheories and models:Levels of analysis theoriesStages-of-action modelsGOMS and keystroke-level modelConsistency through grammarsWidget levelContext of use
100 Managing Design Processes Organizational design to support usabilityShneiderman talks about both “design” and organizational context in which it occursCarroll and Rosson’s characterization of design“radically transformational”Shneiderman’s “three pillars of design”Guidelines documents and processesUser interface software toolsExpert reviews and usabilityDevelopment methodologiesIBM: Ease of Use, Lucid“Ethnographic” user observationParticipatory designScenario developmentSocial impact statement for early design reviewLegal Issues
101 Expert Reviews, Usability Testing, Surveys, and Continuing Assessment IntroductionEvaluation Plans, Acceptance Testing, and Life CycleExpert reviewsUsability testing and techniquesGoal is to “engineer” a good interface, constrained by time and costSurvey instrumentsAcceptance testsEvaluation during active use“Controlled psychologically oriented experiments”Elements of science, as applied to interface evaluation
102 Command Line, Menu Selection, Form Fillin, Dialog Boxes What and why “frameworks (or theories) of interaction”The big picture (again)Overview of interaction stylesCommand line, menus, …, WIMP, …Direct manipulation“Look and feel”Details:“Theory, principles, and (especially) guidelines”Menus, form fillin
103 Interaction Frameworks (Dix) Communication between user and systemWhy have a framework?Allows “precision” in accounting for differencesE.g., gulfs of execution and evaluationPresents global viewAll elements receive attentionTask“work on task”“commands”SystemUser“gives”“performs”“feedback”
104 Direct Manipulation (Hutchins et al.) IntroductionBig picture first, details and a theoretical account laterExamples of Direct-Manipulation systemsExplanations of Direct ManipulationHutchins et al. paperVirtual Environments, or Immersive Interfaces
105 Balancing Function and Fashion User Manuals, Online Help, and Tutorials Error messagesNonanthropomorphic designDisplay designWindow designColor“User Manuals, Online Help, and Tutorials”
106 Balancing Function & Fashion Interface design, both graphics and interaction, not yet “high art” (Shneiderman)Architecture and fashion are old, interfaces are notBut, not too sure how far analogy goes …Usually, consider that interface design is about software engineering, usability, etc.Recall, early discussionsPerhaps better, computer interface design is youngYet, there is styleAnd it elements can be examinedWhere “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are madeRecall, guidelines constrain, etc.
107 “Look and Feel” “Look and feel” Lots of things you can interact with: main WIMP components (windows, menus, icons)ButtonsDialogue boxesPalettes… Collectively known as widgetsappearance + behavior = look and feel