Your SlideShare is downloading. ×
0
Interaction designA short/condensed historyRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
The future is already here. It’s just not evenly distributed.William GibsonRemy Bourganel | short history | interaction de...
...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
Pre-computerBefore computers, there wasn’t “interaction design.”But most of the qualities we seek have been valued through...
> Operate the machine                                                                            When programmable, intera...
Engineering designDesign was engineering design:• make faster, bigger machines, expose their guts through controls,• peopl...
People as component in a system of productionThe 5 elements of system design:• personnel selection• personnel training• ma...
Punch cards                                                                            Puch cards                         ...
Wiring a new program                                                                            ENIAC, 1946, Mauchly and E...
Front panel switches                                                                            DEC PDP-8, TI 980, 1960’s ...
Configure switchesRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
Batch processing, feed it cards, wait while it runsRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
Preparing punch cardsRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
Preparing punch cards                                                                            Each key press punches ho...
Online processing                                                                            Spacewar, Steve Russel, 1962 ...
Operator console                                                                            IBM system 360, 1960’sRemy Bou...
Remote terminal                                                                            IBM 3270, 1970’sRemy Bourganel ...
Home computer...                                                                            Altair 8800, 1975Remy Bourgane...
Command line interfacesRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
User friendliness                                                                            “User Friendly” a buzz phrase...
User friendliness                                                                            sketchpad, Ivan Sutherland, 1...
User friendliness                                                                            Mouse, Doug Englebart, 1964  ...
Hardware/software...Alan Kay: Those who are serious about software should make their own hardware.Remy Bourganel | short h...
> Operate the machine > use the softwareRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
> Operate the machine > use the softwareShift in focus from controlling the computer to using applications and toolstrying...
A tool for home business and small business calculations                                                                  ...
A tool for home business and small business calculations                                                                  ...
A tool for writing                                                                            wordstar, Seymour Rubenstein...
Wordstar, quick reference card...                                                                            A few wordsta...
Rapid evolution...                                                                            Xerox Alto, 1972, Xerox Star...
> Operate the machine > use the software > perform a taskRemy Bourganel | short history | interaction design | Ensad DGMM ...
> Operate the machine > use the software > perform a task• Wordstar was so complex yet so popular, it invited both complai...
The announcement of a revolution...                                                                                 Mackin...
The announcement of a revolution...                                                                            All 39 page...
The software design manifestoMitch Kapor, 1990“The Roman architecture critic Vetrivius advanced the notion that well-desig...
> Operate the machine > use the software > perform a task> experienceRemy Bourganel | short history | interaction design |...
> Operate the machine > use the software > perform a task> experienceLive/learn/work/play.After twenty years of trying to ...
From interface...                                                                            …interface design in a nutshe...
... to interaction...                                                                            When we add time, we see ...
Support a person doing an activity in context                                                                            T...
...                                                                            Shelley Evenson by way of Chris Pacione    ...
... to experience                                                                            But suppose I asked you      ...
Some experiences models                                                                             viceral               ...
> Operate the machine > use the software > perform a task> experience > connectRemy Bourganel | short history | interactio...
> Operate the machine > use the software > perform a task> experience > connectNot only are we having to move past tools a...
Connect                                                                            We are used to designing for           ...
Connect                                                                            ... now, more often, the machines fade ...
Connect                                                                            ... or we make it possible for people t...
Connect                                                                            ... and now we are learning to account ...
> Operate the machine > use the software > perform a task> experience > connect > dynamically enabledRemy Bourganel | shor...
The future“The future is already here. It’s just not evenly distributed.”William GibsonRemy Bourganel | short history | in...
The future• “The street has its own uses for things” (William Gibson)• People are creating new kinds of interactions by th...
A plausible future, dynamic and distributed systems• Ecosystems of devices, internet of things,• Invisible computing,• Dyn...
About system, the power of tenCharles Eams’ power ot ten: http://www.youtube.com/watch?v=0fKBhvDjuy0Remy Bourganel | short...
About views of the future...Designing experiences will keep developing to integrate cultural aspects.Harry Potter (integra...
Consequences on design practiceWe are now designing inter-connected systems of people & objects.• Design as a change agent...
SourcesThanks to Marc Rettig, mrettig@well.com• www.computinghistorymuseum.org – lots of nice links and presentations.• ww...
Upcoming SlideShare
Loading in...5
×

A short history of interaction design

981

Published on

Published in: Design, Technology, Spiritual
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
981
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "A short history of interaction design"

  1. 1. Interaction designA short/condensed historyRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  2. 2. The future is already here. It’s just not evenly distributed.William GibsonRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  3. 3. ...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  4. 4. Pre-computerBefore computers, there wasn’t “interaction design.”But most of the qualities we seek have been valued through the ages.useful/usable/desirableaffordable for the right peopleappropriately complexappropriately styledappropriately transparent in function and useappropriately adaptable, extensible, malleableoverall, having “good fit” with people, context, activity, resultRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  5. 5. > Operate the machine When programmable, interactive machines first appeared, the creators of their interfaces, emphasized the goal of “operating the machine.”Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  6. 6. Engineering designDesign was engineering design:• make faster, bigger machines, expose their guts through controls,• people adapt to the machines and speak the language of the machines,• elaborate efforts to prepare problems for the machines,• no designers involved, but lots of clever engineers – emergence of a new set of skills, new disciplines,• in the meantime, the field of human factors is blooming, along with things like “aviation psychology”.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  7. 7. People as component in a system of productionThe 5 elements of system design:• personnel selection• personnel training• machine design• job design• environmental designRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  8. 8. Punch cards Puch cards 80 columns to hold 80 characters or numbersRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  9. 9. Wiring a new program ENIAC, 1946, Mauchly and Eckert 3,000 cubic feet 30 tons 18,000 vacuum tubes 70,000 resistors 170 kilowatt power req. ~1 kilobit memory Approximate processing power of today’s singing birthday card.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  10. 10. Front panel switches DEC PDP-8, TI 980, 1960’s The internal architecture of the machine is exposed in the controls. You can see that the PDP-8 is an octal computer, with its switches in three-bit configurations (it takes three bits to count from 0 to 7, for a total of 8 numbers. Base 8. Octal. Get it?). The TI 980 is a hexadecimal machine, with switches in groups of four. Using the switches, you program the machine one word at a time (a word being, say, two hexadecimal bytes for the TI).Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  11. 11. Configure switchesRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  12. 12. Batch processing, feed it cards, wait while it runsRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  13. 13. Preparing punch cardsRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  14. 14. Preparing punch cards Each key press punches holes, so there’s no “erase.” Fixing a mistake almost always required ejecting the card and starting it over. In a pinch – say you really needed to fix a card and the punch was down – a clever operator might know enough about the card encoding to close some holes with tape and open others with a knife.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  15. 15. Online processing Spacewar, Steve Russel, 1962 www.media.mit.edu/groups/el/projects/ spacewar/Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  16. 16. Operator console IBM system 360, 1960’sRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  17. 17. Remote terminal IBM 3270, 1970’sRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  18. 18. Home computer... Altair 8800, 1975Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  19. 19. Command line interfacesRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  20. 20. User friendliness “User Friendly” a buzz phrase for years. Early on, it meant things like providing clear help and easy to remember command names. A great and still relevant book from the time: Paul Heckel’s Elements of Friendly Software Design. Still available from Amazon.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  21. 21. User friendliness sketchpad, Ivan Sutherland, 1963 CAD features in 4K RAM (?) using an oscilloscope and a light pen. Englebart, Sutherland and others were shifting from “operating the machine” to providing people with useful tools. Englebart sought to “augment the human intellect.” Think about a world of punch cards, then watch the video: http://ftp.archive.org/movies/lisarein/oreilly/ etech2003/alankay/sketchpad-ui-1963-mres.mov Sutherland’s demo itself is available on the ACM SIGCHI Video compilation for 1983.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  22. 22. User friendliness Mouse, Doug Englebart, 1964 A landmark event in the history of interaction design: Doug Englebart’s 1968 demo at SRI. He demonstrated most of the ideas we associate with modern desk-top computing: the mouse hypertext, objects in the interface, dynamic file linking, and even two people at different locations communicating over network audio and video. This work was done from a human-centered point of view, and the demo is required viewing. Watch it, remember it’s 40 years ago, and think about how progress is made in this field.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  23. 23. Hardware/software...Alan Kay: Those who are serious about software should make their own hardware.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  24. 24. > Operate the machine > use the softwareRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  25. 25. > Operate the machine > use the softwareShift in focus from controlling the computer to using applications and toolstrying to make it so people have to adapt less to use the machines’ capabilitydesign is still done mostly by engineers, few specialists still mostly thought of as “computer human factors”.Use a spreadsheet/use a word processor/play a game.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  26. 26. A tool for home business and small business calculations Visicalc, Dan Bricklin, 1979 Finally people had a reason to buy a home computer (specifically, an Apple II): so they could use VisiCalc, the first spreadsheet. THE place to learn about Visicalc: www.bricklin.com/ visicalc.htm Download a working version!Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  27. 27. A tool for home business and small business calculations As Dan Bricklin points out, VisiCalc’s design has lived long: “It was interactive in a WYSIWYG way: • Point to change a value. • Instant automatic recalculation based on formulas stored in the cells referencing other cells • Scroll left/right/up/down • The input, definition, formatting and output were all merged into a natural, program-by-example interface • Labels and formulas distinguished by first character typed • Minimal-keystroke formula entry…. The goal here was to make it worth using the first time you needed an answer in a way that would let you benefit the next time by just changing a few values and recalculating. If the input style did not let you "teach" the computer by doing the calculation, people may not have used it. • A1, B1, SUM(A1..A7) • Realtime scrolling • Numeric and text formatting • Status and formula lines”Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  28. 28. A tool for writing wordstar, Seymour Rubenstein & John Barnaby, 1979 WordStar had a very complicated interface, but once you invested the time to learn it, it was very powerful. Now there was another reason to buy a home computer: to create, format, store, and edit text documents.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  29. 29. Wordstar, quick reference card... A few wordstar commands WordStar had a very complicated interface, but once you invested the time to learn it, it was very powerful. Now there was another reason to buy a home computer: to create, format, store, and edit text documents.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  30. 30. Rapid evolution... Xerox Alto, 1972, Xerox Star, 1981, Microsoft Windows 1.1Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  31. 31. > Operate the machine > use the software > perform a taskRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  32. 32. > Operate the machine > use the software > perform a task• Wordstar was so complex yet so popular, it invited both complaint and competition.• The success of Lotus 1-2-3 over Visicalc was partly due to ease of use and appropriate power (tip o’ the hat to Mitch Kapor); that and its enterprise- penetrating platform, the IBM PC.• Its use in large companies led to an emphasis on ease of learning, ease of use, reduced errors, saved time.• This eventually led to a professional emphasis on people doing a task rather than “a tool with good controls”.Draw a picture/create a brochure/budget/compose music/troubleshoot aircraftRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  33. 33. The announcement of a revolution... Mackintosh ad.Then, during the 1984 An athletic woman in …which she throws intoSuperbowl, you see the colorful clothing runs the screen, smashing thefirst commercial for the into the auditorium, image and voice of theMacintosh (directed by carrying a huge status quo.Ridley Scott of Blade hammer…Runner fame). A crowdof solemn men isgathered in a gloomyauditorium, listening to aranting bureaucrat on ahuge screen.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  34. 34. The announcement of a revolution... All 39 pages of advertising that Apple bought in a 1984 issue of newsweek are available here: http:// www.aci.com.pl/mwichary/ computerhistory/ads/macnewsweekRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  35. 35. The software design manifestoMitch Kapor, 1990“The Roman architecture critic Vetrivius advanced the notion that well-designed buildings were those which exhibited firmness, commodity and delight. The same might be said of good software. Firmness: a program should not have any bugs which inhibit its function. Commodity: a program should be suitable for the purposes for which it was intended. Delight: the experience of using the program should be a pleasurable one. Here we have the beginnings of a theory of design for software.” www.kapor.com/homepages/mkapor/Software_Design_Manifesto.htmlRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  36. 36. > Operate the machine > use the software > perform a task> experienceRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  37. 37. > Operate the machine > use the software > perform a task> experienceLive/learn/work/play.After twenty years of trying to help people perform tasks, we realized successdepended on expanding the scope of view most good work now involves an effortto fit context of use, characteristics of individuals, patterns of life most good worknow attempts to go beyond expressed need to latent or masked needs.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  38. 38. From interface... …interface design in a nutshell is concerned with the person in front of the screen, with understanding and communication. But interface design often takes a fairly static view of things…Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  39. 39. ... to interaction... When we add time, we see the conversation back and forth between people and machines. We design the language for these conversations, we contribute something to the context in which they happen.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  40. 40. Support a person doing an activity in context To do a good job of interaction design, we have to understand as much as we can about the context, the activity, what else is going on, where people’s attention is focused, what happens before and after, what their goals are, and so on.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  41. 41. ... Shelley Evenson by way of Chris Pacione contributes this exercise to help us understand how interaction design these days differs from the days of “making tools.” Suppose I asked you to design a vase. You would sketch or model any number of forms, most of them probably looking like a cousin of the vase shown here.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  42. 42. ... to experience But suppose I asked you to design a way for people to incorporate plants into their life, or a way for people to enjoy flowers. Interaction is focuses particularily on what to design/designing the right thing.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  43. 43. Some experiences models viceral calimorphic cognitive practical experience experience experience bebavioural reflective experiential socioplastic sensorial emotionnalNokia’s DNA experience model Donald Norman’s experience model Stephane Vial’s experience modelRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  44. 44. > Operate the machine > use the software > perform a task> experience > connectRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  45. 45. > Operate the machine > use the software > perform a task> experience > connectNot only are we having to move past tools and objects to experiences, we are alsolearning to design new ways for machines to connect with one another, and andso machines to people, and ultimately people to people.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  46. 46. Connect We are used to designing for individuals...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  47. 47. Connect ... now, more often, the machines fade to the background – we design for what happens between people through the machines...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  48. 48. Connect ... or we make it possible for people to build things together through the machines – the construction is in the foreground, not the technology...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  49. 49. Connect ... and now we are learning to account for variations in groups, genres of connections.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  50. 50. > Operate the machine > use the software > perform a task> experience > connect > dynamically enabledRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  51. 51. The future“The future is already here. It’s just not evenly distributed.”William GibsonRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  52. 52. The future• “The street has its own uses for things” (William Gibson)• People are creating new kinds of interactions by themselves, bypassing the commercial product pipeline (e.g., web logs and peer-to-peer content sharing networks).One implication: we should learn how to give people “clay” or “legos” instead ofproducts and services.Another implication: platforms are very important, from all points of view –design, technology, businessRemy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  53. 53. A plausible future, dynamic and distributed systems• Ecosystems of devices, internet of things,• Invisible computing,• Dynamic, distributed content,• Dynamic structure,• Dynamic form,• Dynamic, distributed context,• Dynamic, distributed audience,• Dynamic, distributed use.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  54. 54. About system, the power of tenCharles Eams’ power ot ten: http://www.youtube.com/watch?v=0fKBhvDjuy0Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  55. 55. About views of the future...Designing experiences will keep developing to integrate cultural aspects.Harry Potter (integrated, magical) vs Minority report (distributed, immanent) andtheir relative brands...Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  56. 56. Consequences on design practiceWe are now designing inter-connected systems of people & objects.• Design as a change agent, apply empathic design practices,• Develop interdisciplinary, collaborative process,• Prototype and fail early and often,• Beware the inevitable surprise of negative side effects and hacking,• Maintain a humble attitude of discovery, exploration, service.Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  57. 57. SourcesThanks to Marc Rettig, mrettig@well.com• www.computinghistorymuseum.org – lots of nice links and presentations.• www.computer.org/pubs/annals/annals.htm – site for the IEEE journal, Annals of the History of Computing• Want to see what it was like to run the world’s first stored-program computer? Try the simulator at www.dcs.warwick.ac.uk/~Eedsac/• www.tcm.org -- the computer museum• users.libero.it/fmaida/emusearch – a place to search for all sorts of emulators. Relive the past!• A great collection of images: www.tonh.net/museum/index.html• 1993 SIGCHI Conference video, which has the Sketchpad demo.• LOOP interview: Archiving Experience Design (loop.aiga.org)Remy Bourganel | short history | interaction design | Ensad DGMM | © 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×