SlideShare une entreprise Scribd logo
1  sur  66
interaction design history in a teeny  little nutshell   version 1.5 marc rettig marcrettig.com presented at carnegie mellon university 2 april 2004 [email_address]
history fine print this presentation was originally prepared in 2003 for a lecture in Melissa Cicozi’s undergrad Design History class at Carnegie Mellon University. This slight revision was presented in 2004, in Jodi Forlizzi’s Graduate Interaction Design Seminar at CMU. this isn’t a history of computing technology. This isn’t a history of interfaces. It is an overview of the history of designing for interaction. standard disclaimers apply: this was not carefully fact-checked, and it very much represents my personal view of what has been and is now important.  Caveat emptor, and bon appetit.
operate the machine Consider these planes (an ancient tool): their designers sought fitness for use, ease of use, good control, long-lasting materials, a good feel in the hand, efficiency of operation, precise adjustment. In use over time, these tools come to be loved by their owners.
pre-computer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
operate the machine When programmable, interactive machines first appeared, the creators of their controls, their interfaces, emphasized the goal of “operating the machine.”
back in the day ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],operate the machine
characteristic statement of the time ,[object Object],The Five Elements of System Design personnel selection  personnel training  machine design  job design  environmental design
a current statement of the goal of “human factors” ,[object Object],[object Object],[object Object],[object Object],[object Object]
input and output: people adapt to the machines punch card, 80 columns, to hold 80 characters or numbers paper tape, also encoding characters with holes.  For fun, go make images of punch cards that say anything you want:  http:// www.facade.com/legacy/punchcard
wiring the ENIAC with a new program ENIAC 1946 Mauchly and Eckert stats: 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 but  not  a stored-program device Great description here:  www.computinghistorymuseum.org/teaching/lectures/pptlectures/7b-eniac.ppt
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).
configure switches, run batch, output to tape
batch processing: feed it cards, wait while it runs What you used to do punch a deck of cards; take the cards to a little window, hand them to the operator; she puts them in line with everyone else’s jobs; when it’s your turn she puts your cards in the hopper and pushes “RUN”; your program works or it doesn’t; an hour or twelve later, you pick up your cards and (hopefully) printout at the same little window. What you do now double-click an icon, see what happens immediately.
preparing punch cards An important by-product: confetti. All the chaff from all those cards was just  great  to throw around the dorm.
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.  So on the one hand, we were adapting to the machines. On the other hand, the workings of the machines were exposed, right out where we could get to them.
online processing Spacewar Steve Russel 1962   Wanna try it?  lcs.www.media.mit.edu/groups/el/projects/spacewar /
operator console IBM System 360 1960’s
remote terminals attached to the S/360 IBM 3270 1970’s   80 columns x 24 lines a.k.a., “80 cards” Don’t laugh. These are very hip boys.
at home, it’s still the switches – but what to  do  with it? MITS Altair 8800 1975 One of the first commercially available home computers. You ordered it. You built it. You operated it through front panel switches.
command line interfaces Very efficient once you learned them. At least the good ones were / are. Of course they still exist, and have finally come to your Macintosh! Still, the emphasis is very much “operate the machine.”
“user friendliness” “ User Friendly” was a  huge  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.
in the meantime, a few people were thinking differently  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.  Wanna see the demo?  sloan.stanford.edu/mousesite/1968Demo.html
“you can actually  talk  to the computer” 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. Video of Alan Kay presenting and describing this work (at Etech 2003) can be found here:  http://ftp.archive.org/movies/lisarein/oreilly/etech2003/alankay/sketchpad-ui-1963-mres.mov  (or ../sketchpad-ui-1963-mres.mov for hi-resolution). Sutherland’s demo itself is available on the ACM SIGCHI Video compilation for 1983.
operate the machine use the software
[object Object],[object Object],[object Object],[object Object],use the software operate the machine
operate the machine use the software use a spreadsheet use a word processor play a game
a tool for home 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!
Interface and interaction ideas that survived 25 years (so far) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],www.bricklin.com/visicalc.htm/firstspreadsheetquestion.htm
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. Find WordStar history here:  http:// www.wordstar.org/wordstar/history/history.htm
wordstar  quick reference card A few WordStar commands  (^ indicates one should hold down the Ctrl key) Interested? Purchase a WordStar command emulator package for Microsoft Word by visiting  www.wordstar.org
the future could usually be seen before it arrived Xerox STAR, 1981 Microsoft Windows 1.01, 1985 Xerox Alto, 1972
operate the machine use the software perform a task
[object Object],[object Object],[object Object],[object Object],operate the machine use the software perform a task
operate the machine use the software perform a task draw a picture create a brochure create a budget compose music troubleshoot the aircraft
the mac taps into pent-up desire for ease and pleasure of use  Then, during the  1984 Superbowl, you see the first commercial for the Macintosh (directed by Ridley Scott of Blade Runner fame). A crowd of solemn men is gathered in a gloomy auditorium, listening to a ranting bureaucrat on a huge screen.  Think of a world full of command-line interfaces… An athletic woman in colorful clothing runs into the auditorium, carrying a huge hammer… … which she throws into the screen, smashing the image and voice of the status quo. hello.
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/macnewsweek
the software design manifesto ,[object Object],[object Object],Mitch Kapor  1990 I don’t know that this was a landmark event in the whole industry’s eyes, but Mitch Kapor’s Software Design Manifesto was a clear articulation of the idea that making useful, usable, delightful software is a  design problem , not an engineering problem. This is only a small extract here. The whole thing has both historical importance and modern currency.
present
use the software perform a task experience live, learn, work, play operate the machine
[object Object],[object Object],[object Object],use the software perform a task experience live, learn, work, play operate the machine
operate the machine use the software perform a task experience live, learn, work, play compose music run a business learn math manage a  household immerse in a fantasy buy, use, &  maintain a car
art and engineering To oversimplify, at the risk of stereotyping: if your primary concern is to make something cool or interesting happen on the screen, you are probably in the camp of artists or engineers. As opposed to…
interface … interface design, which 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…
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.
design to 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.
design a vase 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.
design a way to enjoy flowers  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.  Contemporary design has changed the questions.
the cycle of experience Social Reputation Awareness Attraction Orientation Compelling   Interaction Extension Retention tip of the hat to john rheinfrank and shelley evenson
interaction design’s many layers of concern strategy does the product connect with business goals? experience repeated interaction, activities in context interaction interface in use through time by different people interface presentation of information and controls information & functionality categories, types, attributes, relationships
the work: alignment alignment strategy does the product connect with business goals? experience repeated interaction, activities in context interaction interface in use through time by different people interface presentation of information and controls information & functionality categories, types, attributes, relationships
operate the machine use the software accomplish a task experience: live, learn, work, play connect Another aspect of modern design: not only are we having to move past tools and objects to experiences, we are also learning to design new ways for people to connect with one another.
we are used to  designing for individuals
we’re learning to account for differences in individuals. But the machines often stay most prominent
now, more often, the machines fade to the background – we design for what happens between people  through  the machines
or we make it possible for people to build things together through the machines – the construction is in the foreground, not the technology
and now we are learning to account for variations in groups, genres of connections
future
[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object]
operate the machine use the software accomplish a task experience: live, learn, work, play connect dynamically enable
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],dynamically enable
an explosion ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
the future ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
the way forward ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
thank you [email_address]
some resources on the history of computing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Besides the links sprinkled through thes slides, these are some of the resources I found helpful in preparing this presentation. My thanks to the many creators.

Contenu connexe

Tendances

UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
Prototyping for effective UX
Prototyping for effective UXPrototyping for effective UX
Prototyping for effective UXRan Liron
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionProttay Karim
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
Interaction Design
Interaction DesignInteraction Design
Interaction DesignKajsa Gren
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 

Tendances (20)

What is UX?
What is UX?What is UX?
What is UX?
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
User experience design
User experience designUser experience design
User experience design
 
Ux design
Ux designUx design
Ux design
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
Prototyping for effective UX
Prototyping for effective UXPrototyping for effective UX
Prototyping for effective UX
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
The Design of Everyday Things
The Design of Everyday ThingsThe Design of Everyday Things
The Design of Everyday Things
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 

Similaire à History of Interaction Design

Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5pemi hua
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction DesignChristina Wodtke
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivityjylee6977
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivityjylee_kgit
 
3 2 1_contact: A touch, multitouch, and stylus exploration
3 2 1_contact: A touch, multitouch, and stylus exploration3 2 1_contact: A touch, multitouch, and stylus exploration
3 2 1_contact: A touch, multitouch, and stylus explorationNortheast Kansas Library System
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentJazmi Jamal
 
Final Draft of IT 402 Presentation
Final Draft of IT 402 PresentationFinal Draft of IT 402 Presentation
Final Draft of IT 402 Presentationmonacofamily
 
Ch 1 introduction and 2 computer software 1
Ch 1 introduction  and 2 computer software 1Ch 1 introduction  and 2 computer software 1
Ch 1 introduction and 2 computer software 1rjsuthar56
 
1.lecture_07_paradigms.ppt
1.lecture_07_paradigms.ppt1.lecture_07_paradigms.ppt
1.lecture_07_paradigms.pptUsamajawad3
 
Intel Compute stick documentation
Intel Compute stick documentationIntel Compute stick documentation
Intel Compute stick documentationGeorgekutty Francis
 
25 years of Human Computer Interaction
25 years of Human Computer Interaction25 years of Human Computer Interaction
25 years of Human Computer InteractionHuman Interface Group
 
(1) gui history_of_interactivity
(1) gui history_of_interactivity(1) gui history_of_interactivity
(1) gui history_of_interactivityNico Ludwig
 

Similaire à History of Interaction Design (20)

Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
IMD 203 - Ch01
IMD 203 - Ch01IMD 203 - Ch01
IMD 203 - Ch01
 
3 2 1_contact: A touch, multitouch, and stylus exploration
3 2 1_contact: A touch, multitouch, and stylus exploration3 2 1_contact: A touch, multitouch, and stylus exploration
3 2 1_contact: A touch, multitouch, and stylus exploration
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and development
 
Final Draft of IT 402 Presentation
Final Draft of IT 402 PresentationFinal Draft of IT 402 Presentation
Final Draft of IT 402 Presentation
 
Ch 1 introduction and 2 computer software 1
Ch 1 introduction  and 2 computer software 1Ch 1 introduction  and 2 computer software 1
Ch 1 introduction and 2 computer software 1
 
1.lecture_07_paradigms.ppt
1.lecture_07_paradigms.ppt1.lecture_07_paradigms.ppt
1.lecture_07_paradigms.ppt
 
Intel Compute stick documentation
Intel Compute stick documentationIntel Compute stick documentation
Intel Compute stick documentation
 
The iPad is 40 years old
The iPad is 40 years oldThe iPad is 40 years old
The iPad is 40 years old
 
25 years of Human Computer Interaction
25 years of Human Computer Interaction25 years of Human Computer Interaction
25 years of Human Computer Interaction
 
Historyofcomputers
HistoryofcomputersHistoryofcomputers
Historyofcomputers
 
Computers
ComputersComputers
Computers
 
Architecture presentation
Architecture presentationArchitecture presentation
Architecture presentation
 
(1) gui history_of_interactivity
(1) gui history_of_interactivity(1) gui history_of_interactivity
(1) gui history_of_interactivity
 
Computer history
Computer historyComputer history
Computer history
 
Invention Of Computer Essay
Invention Of Computer EssayInvention Of Computer Essay
Invention Of Computer Essay
 
e ball
e balle ball
e ball
 

Plus de Marc Rettig

Rettig+du plessis ixda_pgh_participation+design_apr2017
Rettig+du plessis ixda_pgh_participation+design_apr2017Rettig+du plessis ixda_pgh_participation+design_apr2017
Rettig+du plessis ixda_pgh_participation+design_apr2017Marc Rettig
 
A few notes on creating together
A few notes on creating togetherA few notes on creating together
A few notes on creating togetherMarc Rettig
 
Culture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made PracticalCulture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made PracticalMarc Rettig
 
The Journey of Creativity
The Journey of CreativityThe Journey of Creativity
The Journey of CreativityMarc Rettig
 
SVA Fundamentals of Design for Social Innovation book 2013
SVA Fundamentals of Design for Social Innovation book 2013SVA Fundamentals of Design for Social Innovation book 2013
SVA Fundamentals of Design for Social Innovation book 2013Marc Rettig
 
Managing Emergence
Managing EmergenceManaging Emergence
Managing EmergenceMarc Rettig
 
Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Marc Rettig
 
Rettig.interface designislanguagedesign
Rettig.interface designislanguagedesignRettig.interface designislanguagedesign
Rettig.interface designislanguagedesignMarc Rettig
 

Plus de Marc Rettig (8)

Rettig+du plessis ixda_pgh_participation+design_apr2017
Rettig+du plessis ixda_pgh_participation+design_apr2017Rettig+du plessis ixda_pgh_participation+design_apr2017
Rettig+du plessis ixda_pgh_participation+design_apr2017
 
A few notes on creating together
A few notes on creating togetherA few notes on creating together
A few notes on creating together
 
Culture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made PracticalCulture Work: Organizational Becoming Made Practical
Culture Work: Organizational Becoming Made Practical
 
The Journey of Creativity
The Journey of CreativityThe Journey of Creativity
The Journey of Creativity
 
SVA Fundamentals of Design for Social Innovation book 2013
SVA Fundamentals of Design for Social Innovation book 2013SVA Fundamentals of Design for Social Innovation book 2013
SVA Fundamentals of Design for Social Innovation book 2013
 
Managing Emergence
Managing EmergenceManaging Emergence
Managing Emergence
 
Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05
 
Rettig.interface designislanguagedesign
Rettig.interface designislanguagedesignRettig.interface designislanguagedesign
Rettig.interface designislanguagedesign
 

Dernier

在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一A SSS
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 

Dernier (20)

在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 

History of Interaction Design

  • 1. interaction design history in a teeny little nutshell version 1.5 marc rettig marcrettig.com presented at carnegie mellon university 2 april 2004 [email_address]
  • 2. history fine print this presentation was originally prepared in 2003 for a lecture in Melissa Cicozi’s undergrad Design History class at Carnegie Mellon University. This slight revision was presented in 2004, in Jodi Forlizzi’s Graduate Interaction Design Seminar at CMU. this isn’t a history of computing technology. This isn’t a history of interfaces. It is an overview of the history of designing for interaction. standard disclaimers apply: this was not carefully fact-checked, and it very much represents my personal view of what has been and is now important. Caveat emptor, and bon appetit.
  • 3. operate the machine Consider these planes (an ancient tool): their designers sought fitness for use, ease of use, good control, long-lasting materials, a good feel in the hand, efficiency of operation, precise adjustment. In use over time, these tools come to be loved by their owners.
  • 4.
  • 5. operate the machine When programmable, interactive machines first appeared, the creators of their controls, their interfaces, emphasized the goal of “operating the machine.”
  • 6.
  • 7.
  • 8.
  • 9. input and output: people adapt to the machines punch card, 80 columns, to hold 80 characters or numbers paper tape, also encoding characters with holes. For fun, go make images of punch cards that say anything you want: http:// www.facade.com/legacy/punchcard
  • 10. wiring the ENIAC with a new program ENIAC 1946 Mauchly and Eckert stats: 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 but not a stored-program device Great description here: www.computinghistorymuseum.org/teaching/lectures/pptlectures/7b-eniac.ppt
  • 11. 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).
  • 12. configure switches, run batch, output to tape
  • 13. batch processing: feed it cards, wait while it runs What you used to do punch a deck of cards; take the cards to a little window, hand them to the operator; she puts them in line with everyone else’s jobs; when it’s your turn she puts your cards in the hopper and pushes “RUN”; your program works or it doesn’t; an hour or twelve later, you pick up your cards and (hopefully) printout at the same little window. What you do now double-click an icon, see what happens immediately.
  • 14. preparing punch cards An important by-product: confetti. All the chaff from all those cards was just great to throw around the dorm.
  • 15. 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. So on the one hand, we were adapting to the machines. On the other hand, the workings of the machines were exposed, right out where we could get to them.
  • 16. online processing Spacewar Steve Russel 1962 Wanna try it? lcs.www.media.mit.edu/groups/el/projects/spacewar /
  • 17. operator console IBM System 360 1960’s
  • 18. remote terminals attached to the S/360 IBM 3270 1970’s 80 columns x 24 lines a.k.a., “80 cards” Don’t laugh. These are very hip boys.
  • 19. at home, it’s still the switches – but what to do with it? MITS Altair 8800 1975 One of the first commercially available home computers. You ordered it. You built it. You operated it through front panel switches.
  • 20. command line interfaces Very efficient once you learned them. At least the good ones were / are. Of course they still exist, and have finally come to your Macintosh! Still, the emphasis is very much “operate the machine.”
  • 21. “user friendliness” “ User Friendly” was a huge 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.
  • 22. in the meantime, a few people were thinking differently 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. Wanna see the demo? sloan.stanford.edu/mousesite/1968Demo.html
  • 23. “you can actually talk to the computer” 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. Video of Alan Kay presenting and describing this work (at Etech 2003) can be found here: http://ftp.archive.org/movies/lisarein/oreilly/etech2003/alankay/sketchpad-ui-1963-mres.mov (or ../sketchpad-ui-1963-mres.mov for hi-resolution). Sutherland’s demo itself is available on the ACM SIGCHI Video compilation for 1983.
  • 24. operate the machine use the software
  • 25.
  • 26. operate the machine use the software use a spreadsheet use a word processor play a game
  • 27. a tool for home 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!
  • 28.
  • 29. 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. Find WordStar history here: http:// www.wordstar.org/wordstar/history/history.htm
  • 30. wordstar quick reference card A few WordStar commands (^ indicates one should hold down the Ctrl key) Interested? Purchase a WordStar command emulator package for Microsoft Word by visiting www.wordstar.org
  • 31. the future could usually be seen before it arrived Xerox STAR, 1981 Microsoft Windows 1.01, 1985 Xerox Alto, 1972
  • 32. operate the machine use the software perform a task
  • 33.
  • 34. operate the machine use the software perform a task draw a picture create a brochure create a budget compose music troubleshoot the aircraft
  • 35. the mac taps into pent-up desire for ease and pleasure of use Then, during the 1984 Superbowl, you see the first commercial for the Macintosh (directed by Ridley Scott of Blade Runner fame). A crowd of solemn men is gathered in a gloomy auditorium, listening to a ranting bureaucrat on a huge screen. Think of a world full of command-line interfaces… An athletic woman in colorful clothing runs into the auditorium, carrying a huge hammer… … which she throws into the screen, smashing the image and voice of the status quo. hello.
  • 36. 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/macnewsweek
  • 37.
  • 39. use the software perform a task experience live, learn, work, play operate the machine
  • 40.
  • 41. operate the machine use the software perform a task experience live, learn, work, play compose music run a business learn math manage a household immerse in a fantasy buy, use, & maintain a car
  • 42. art and engineering To oversimplify, at the risk of stereotyping: if your primary concern is to make something cool or interesting happen on the screen, you are probably in the camp of artists or engineers. As opposed to…
  • 43. interface … interface design, which 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…
  • 44. 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.
  • 45. design to 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.
  • 46. design a vase 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.
  • 47. design a way to enjoy flowers 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. Contemporary design has changed the questions.
  • 48. the cycle of experience Social Reputation Awareness Attraction Orientation Compelling Interaction Extension Retention tip of the hat to john rheinfrank and shelley evenson
  • 49. interaction design’s many layers of concern strategy does the product connect with business goals? experience repeated interaction, activities in context interaction interface in use through time by different people interface presentation of information and controls information & functionality categories, types, attributes, relationships
  • 50. the work: alignment alignment strategy does the product connect with business goals? experience repeated interaction, activities in context interaction interface in use through time by different people interface presentation of information and controls information & functionality categories, types, attributes, relationships
  • 51. operate the machine use the software accomplish a task experience: live, learn, work, play connect Another aspect of modern design: not only are we having to move past tools and objects to experiences, we are also learning to design new ways for people to connect with one another.
  • 52. we are used to designing for individuals
  • 53. we’re learning to account for differences in individuals. But the machines often stay most prominent
  • 54. now, more often, the machines fade to the background – we design for what happens between people through the machines
  • 55. or we make it possible for people to build things together through the machines – the construction is in the foreground, not the technology
  • 56. and now we are learning to account for variations in groups, genres of connections
  • 58.
  • 59.
  • 60. operate the machine use the software accomplish a task experience: live, learn, work, play connect dynamically enable
  • 61.
  • 62.
  • 63.
  • 64.
  • 66.