Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Structure: Interaction Design


Published on

This is a lecture I gave to my User Experience class at General Assembly on Interaction Design. It covers a brief history, and the various approaches that are being used.
I borrowed from other sources to a degree, which I have cited extensively.

Published in: Design

Designing Structure: Interaction Design

  1. Designing Structure Interaction Design
  2. interaction designBy marc rettigmarcrettig.comThen edited by christina history in a teeny little nutshellOriginally presented atcarnegie and shrunk teeniermellonuniversityon 2 april 2004By and remixed by christina
  3. Consider these planes (an ancient tool):their designers sought fitness for use, easeof use, good control, long-lasting materials,a good feel in the hand, efficiency ofoperation, precise adjustment. In use overtime, these tools come to be loved by theirowners.operate the machine
  4. pre-computer Before computers, there wasn’t “interaction design.” But most of the qualities we seek have been valued through the ages.• useful• usable• desirable• affordable for the right people• appropriately complex• appropriately styled• appropriately transparent in function and use• appropriately adaptable, extensible, malleable• overall, having “good fit” with people, context, activity, result
  5. With computers When programmable, interactive machines first appeared, the creators of their controls, their interfaces, emphasized the goal of “operating the machine.”operate the machine
  6. characteristic statement of the timepeople are seenas components The Five Elements of System Designin a system of personnel selectionproduction personnel training machine design job design environmental design
  7. a current statement of the goal of “human factors” Rettig’s summary Good Designs: • design against misuse,“minimize the unintended uses, and abuses damage and • design for all sizes, shapes, inconvenience” attitudes and personalities people
  8. input and output: people adapt to the machinespunch card,80 columns, to hold 80characters or numberspaper tape, also encodingcharacters with holes. For fun, go make images of punch cards that say anything you want:
  9. batch processing: feed it cards, wait while it runsWhat you used to dopunch a deck of cards; takethe cards to a little window,hand them to the operator;she puts them in line witheveryone else’s jobs; whenit’s your turn she puts yourcards in the hopper andpushes “RUN”; your programworks or it doesn’t; an hour ortwelve later, you pick up yourcards and (hopefully)printout at the same littlewindow.What you do nowdouble-click an icon, seewhat happens immediately.
  10. command line interfacesVery efficient once youlearned them. At least thegood ones were / are. Ofcourse they still exist, andhave finally come to yourMacintosh!Still, the emphasis is verymuch “operate themachine.”
  11. “user friendliness”“User Friendly” was a hugebuzz phrase for years. Earlyon, it meant things likeproviding clear help andeasy to remember commandnames. A great and stillrelevant book from the time:Paul Heckel’s Elements ofFriendly Software Design. Stillavailable from Amazon.
  12. in the meantime, a few people were thinking differentlymouseDoug Englebart1964A landmark event in thehistory of interaction design:Doug Englebart’s 1968 demoat SRI. He demonstratedmost of the ideas weassociate with modern desk-top computing: the mousehypertext, objects in theinterface, dynamic file linking,and even two people atdifferent locationscommunicating over networkaudio and video. This workwas done from a human-centered point of view, andthe demo is required viewing.Watch it, remember it’s 40years ago, and think abouthow progress is made in thisfield. Wanna see the demo?
  13. • shift in focus from controlling the computer to using applications and tools • trying to make it so people have to adapt less to use the machines’ capability • design is still done mostly by engineers, few specialists • still mostly thought of as “computer human factors”use the softwareoperate the machine
  14. a tool for home and small business calculationsvisicalcDan Bricklin1979Finally people had a reasonto buy a home computer(specifically, an Apple II): sothey could use VisiCalc, thefirst spreadsheet. THE place to learn about Visicalc: Download a working version!
  15. Interface and interaction ideas that survived 25 years (so far) 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”
  16. a tool for writingwordstarSeymour Rubenstein &John Barnaby1979WordStar had a verycomplicated interface, butonce you invested the timeto learn it, it was verypowerful. Now there wasanother reason to buy ahome computer: to create,format, store, and edit textdocuments. Find WordStar history here:
  17. wordstarquick 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
  18. • 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”perform a taskuse the softwareoperate the machine
  19. GOMS• Goals are what the user intends to Developed in 1983 by Stuart accomplish. Card, Thomas P. Moran and Allen Newell• Operators are actions that are inThe Psychology of Human performed to reach the goal. Computer Interaction.• Methods are sequences of operators that accomplish a goal. There can be more than one method available to accomplish a single goal; if this is the case• Selection rules are used to describe when a user would select a certain method over the others.
  20. the mac taps into pent-up desire for ease and pleasure of useThink of a world full of command-line interfaces…Then, during the 1984 Superbowl, you An athletic woman in colorful clothing …which she throws into the screen,see the first commercial for the runs into the auditorium, carrying a smashing the image and voice of theMacintosh (directed by Ridley Scott of huge hammer… status quo.Blade Runner fame). A crowd ofsolemn men is gathered in a gloomyauditorium, listening to a rantingbureaucrat on a huge screen. hello.
  21. All 39 pages of advertising that Apple bought in a 1984 issue of newsweek are available here:
  22. the software design manifestoMitch Kapor “The Roman architecture critic Vetrivius advanced the1990 notion that well-designed buildings were those whichI don’t know that this was alandmark event in the wholeindustry’s eyes, but Mitch exhibited firmness, commodity and delight. The sameKapor’s Software DesignManifesto was a clear might be said of good software. Firmness: a programarticulation of the idea thatmaking useful, usable,delightful software is a design should not have any bugs which inhibit its function.problem, not an engineeringproblem. This is only a smallextract here. The whole thing Commodity: a program should be suitable for thehas both historical importanceand modern currency. 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.”
  23. present
  24. experiencelive, learn, work, playperform a taskuse the softwareoperate the machine
  25. • after twenty years of trying to help people perform tasks, we realized success depended on expanding the scope of view • most good work now involves an effort to fit context of use, characteristics of individuals, patterns of lifeexperience • most good work now attempts to golive, learn, work, play beyond expressed need to latent or masked needsperform a taskuse the softwareoperate the machine
  26. manage a household compose music run a businessexperiencelive, learn, work, play learn mathperform a task buy, use, & maintain a caruse the software immerse in a fantasyoperate the machine
  27. interface…interface design,which is concernedwith the person infront of the screen,with understandingand communication.But interface designoften takes a fairlystatic view of things…
  28. interactionWhen we add time,we see theconversation backand forth betweenpeople andmachines. Wedesign thelanguage for theseconversations, wecontributesomething to thecontext in whichthey happen.
  29. design to support a person doing an activity in contextTo do a good job of interaction design, we have tounderstand as much as we can about the context, theactivity, what else is going on, where people’s attentionis focused, what happens before and after, what theirgoals are, and so on.
  30. Now to your regularly scheduled lectureBYE MARC!
  31. From Dan’s fine book, Designing for InteractionAPPROACHES TO IXD
  32. Types of Interaction DesignTable 2.1. Four Approaches to DesignApproach Overview Users DesignerUser-centered design Focus on user needs The guides of Translator of user and goals design needs and goalsActivity-centered Focus on the tasks Performers of Creates tools fordesign and activities that the activities actions need to be accomplishedSystems design Focus on the Set the goals Makes sure all the components of a of the system parts of the system system are in placeGenius design Skill and wisdom of Source of The source of designers used to validation inspiration make products From Dan Saffer’s Designing for Interaction
  33. UCD You’ve been soaking in it! Many designers don’t think there is another approach
  34. ACD• Activity focused design• Activity : Purpose : Tasks• Task analysis• Task suggests tools; i.e. “turn on” suggests a switch The gardener might have a goal (to have a tidy yard) but the purpose of raking is simple: to collect leaves. ACD would focus on collecting leaves.
  35. From aMcDonald’spatentapplication onsandwich making
  36. The critique of ACD: does it limit?If I ask you tomake a vaseyou mightcome upwith a vastnumber ofvariations ofform, but itwould mostlylook like oneof these
  37. design a way to enjoy flowersBut if I ask you tothink of a way toenjoy plants andflowers?
  39. System Design• Focus is on a system, not a user or task• All elements are cataloged• Relationships are defined
  40. Heating System• Goal. This is not the users’ goal, but rather the goal of the system as a whole, which can be drawn from user goals. The goal states the ideal relationship between the system and the environment it lives in. In a heating system, an example of a goal may be keeping your house at 72 degrees Fahrenheit.• Environment. Where does the system “live”? Is it digital or analog or both? The environment in the heating system example is the house itself.• Sensors. How does the system detect changes in the environment? A heating system has a thermostat with a thermometer (Figure 2.3) to detect temperature changes.• Disturbances. Changes are called disturbances; these are elements in the environment that change the environment in both expected and unexpected ways. In the heating system example, a disturbance is a drop or rise in temperature.• Comparator. The comparator embodies the goal within the system. It compares the current state (the environment) to the desired state (the goal). Any difference between the two is seen by the system as an error, which the system seeks to correct. In the heating system example, the comparator can be a tiny computer or a mercury switch that compares what the sensor tells it about the environment (for example, “72 degrees...72 degrees...72 degrees...71 degrees...71 degrees”) to the goal (“Keep the house at 72 degrees”).• Actuator. If the comparator says, ah, something is different (an “error”) by examining the data coming from the sensor, it sends a command to the actuator (in this case, the boiler). Actuators are a means of making changes (output) to the environment. In this case, the actuator makes heat.• Feedback. With output comes feedback. Feedback is a message about whether or not a goal was achieved or maintained— whether or not an error was detected. In this example, feedback would report either that the house is still at 71 degrees or that is now at 72 degrees and the heater can be turned off.• Controls. Controls are means of manually manipulating the parts of the system (except the environment). In this example, you use a control to set the temperature you want the house to be. Another control might trigger the actuator and turn the heat on. From Dan Saffer’s Designing for Interaction
  41. Sitepath (system) Diagramming
  43. Genius Design
  44. Jonathan IvesIntuition is compressed experience
  45. This is a trick questionWHICH SHOULD YOU DO?
  47. Contextual Principles• What you know about the context/users/activity. E.g. – Recipes must be scannable – User should know where they are in a recipe – Recipes allow users to find ingredients for shopping and mise en place by listing them apart from instructions• You make them up
  48. Tivo Tennants • It’s entertainment, stupid. • It’s TV, stupid. • It’s video, dammit. • Everything is smooth and gentle. • No modality or deep hierarchy. • Respect the viewer’s privacy. • It’s a robust appliance, like a TV.
  49. Universal Principles• Direct Manipulation• Affordances• Feedback• Mental Model• Standards
  50. Some Laws• Fitts’s Law simply states that the time it takes to move from a starting position to a final target is determined by two things: the distance to the target and the size of the target.
  51. Hick’s Lawthe time it takes for users to make decisions isdetermined by the number of possible choices theyhave at one scanning. The user will scan a large list,and discard half or more of it to focus in on theirchoice.Rule of Large Menus: one large menu is more time-efficient than several small submenus supportingthe same choices, even if we ignore the timeoverhead of moving among submenus.Exception: very large menus of unorganized itemsare harder for a user to parse and subdivide
  52. The Magical Number Seven• Is stupic
  53. Law of the Conservation of Complexity• Larry Tesler• not stupid• states that some complexity is inherent in every process. There is a point beyond which you can’t simplify the process any further; you can only move the inherent complexity from one place to another.
  54. The Poka-Yoke Principle• Poka-Yoke roughly translates in English to mistake proofing: avoiding (yokeru) inadvertent errors (poka). Designers use Poka- Yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation.
  55. Errors• Prevent• Allow fixes• COMPASSION• Avoid learned Dismissal
  57. Well, I didn’t expect that.
  58. And the MechanicsTHE CORE LOOP
  59. This is a core loop for a very simple game. I’m actually shocked we don’t map this on other projects. Amazon’s isSeek, evaluate, buy.
  60. Will Wright on Game Design: Watch 30:27-33:27
  61. Backyard Monsters takes the classic tower defense loop (build defense, get attacked, redo) and adds complexityby letting you also attack and build offensive as well as defensive tools.
  63. The AOF Method1. Defining your Activity2. Identifying your (Social) Objects3. Choosing your Features Courtesy of Joshua Porter. Check out!
  64. 2. Identifying your Social Objects
  65. What are Social Objects?• Social objects can be ideas, people, or physical objects.• By interacting through/with social objects, people meet others they might not otherwise know.• Social objects can be the reason why people have an interaction or form a relationship. Joshua Porter (
  66. 3. Choosing your Features
  68. And user stories:USE CASES
  69. First, name all your use cases (or user stories, or scanrios)
  70. Example: Log in Use CaseLoginBrief Description• This use case describes how a user logs into the Course Registration System.Basic Flow• This use case starts when an actor wishes to log into the Course Registration System.The system requests that the actor enter his/her name and password.• The actor enters his/her name and password.• The system validates the entered name and password and logs the actor into the system.Alternative Flows• Invalid Name / Password If in the Basic Flow the actor enters an invalid name and/or password, the system displays an error message. The actor can choose to either return to the beginning of the Basic Flow or cancel the login, at which point the use case ends.Pre-Conditions• NonePost-Conditions• If the use case was successful, the actor is now logged into the system. If not the system state is unchanged.Next, break it into its component tasks. List positivefirst, then list all the scenarios for when things gowrong under “alternate”
  71. I prefer the two column approach, with user on one side, system on the other. Note: I do not say “pushes button.” or the like anywhere: save interface design for late, just focus on interactionUser SystemUser inserts card Requests PINUser enters Pin Displays choices 1. Get balance 2. Withdraw money 3. Make deposit(1) User selects Get Balance Displays current balance(2)User selects withdraw System ask the user for anmoney amountUser enters an amount Systems checks balance. If < balance, asks for confirmation
  72. Use case tips• Tip 1. When creating use cases, be productive without perfection• Tip 2. Define your use case actors• Tip 3. Define your "Sunny Day" Use Cases (Primary Use Cases)• Tip 4. Identify reuse opportunity for use cases• Tip 5. Create a use case index• Tip 6. Identify the key components of your use case• Tip 7. Name and briefly describe your use case• Tip 8. Create the use case basic flow• Tip 9. Create the use case alternate flows• Tip 10. Produce your use case document Writing Effective Use Cases (Examples) By Darren Levy
  73. Homework• One scenarios• One task analysis• One object, and all features (optional, recommended)• Write a use case• Portfolio work: Map one key activity for your site, visually