Designing Interactions

Designing Interactions

Author

Bill Moggridge

Year
2006
image

Review

This is a collection of interviews that meanders through the history of interaction design. It lacks some structure and isn’t exactly insight dense. I’m interested in the history of computers and the pioneers of early computing - so I found it enjoyable. I wouldn’t recommend if you’re looking for something more practical.

You Might Also Like:

image

Key Takeaways

The 20% that gave me 80% of the value.

  • Interaction design: design applied to interactive products and systems
  • A system isn't complete without the people that need to use it. People and their goals are the point of the system, and we must design for them.
  • Good systems have reassuring feedback
  • Navigability - where you are, what you can do, where you can go next, how to get back
  • What it does → how it behaves → quality of the interaction
  • Stuart Card perfected scientific methods to integrate with creative design (Task analysis, approximation and calculation)
  • Doug Engelbart viewed machines as a way to augment the human intellect and boost mankind's ability to deal with complex problems
    • Gave ‘The demo that changed the world’ that included many people’s first sight of…
      • GUI
      • Text editor
      • Collaboration
      • Video conferencing
      • Graphics
      • Fast response time
      • Mouse
  • Personal computers seemed as outrageous as personal nuclear reactors at the time of the NLS and LINC
  • Stuart Card on design… All the work was on the computer side, on the engineering of the machine. People weren't looking at the human interaction with it.
  • Design core skills: synthesis, understanding people and iterative prototyping
  • Usability testing: observe, see what the problems are, fix
  • Bill insisted documents on the Lisa had a white background, so they looked as printed (WISIWYG)
  • On LISA → It took 3 years, to develop a new user interface, operating system and 5 applications
The more user testing a piece of software has, the smoother it can become
Apple Mice 1980 - Good example of design spec
  • Interaction designers need to answer 3 questions
    • How you act (how do you do?)
      • How do you affect the world?
      • We design for a person that does something, we provide affordances
      • We present handles for continuous control
      • We present buttons for discrete control
      • Buttons delegate control to the machine, handles are constantly interacted with
    • How you feel
      • How do you get feedback?
      • A lot of our emotions come from the sensory qualities of the media that we present things with
    • How you understand (how do you know?)
      • The designer needs to help people understand what to do, by showing them a map or a path
  • Interaction Design 4 Step Process by Bill Verplank
  • 1) Motivation
    Errors + Ideas
    - Understand the problems that people are having - or have ideas that could make the world better
    2) Meaning
    Metaphors + Scenarios
    - storytelling, narrative, metaphor - a way to frame it that makes sense to people - Example - It’s a desktop (not a computer) - Together with Metaphor, you need scenarios... - Who is using it? - Where are they? - What are they trying to accomplish?
    3) Modes
    Models + Tasks
    - to have a conceptual model people will understand, you have to have a clear picture of what they are thinking about - the mode thy are in depends on what the task is, and what they’re trying to accomplish - How they can move from one mode to another, from one environment to another, defines the tasks - this is the conceptual cognitive science of understanding what the person doing the task needs to know
    4) Mappings
    Display + Control
    - you are designing a display, and some controls - the display is the representation of what you’re manipulating - the controls need to map to the display
An interface has to be appropriate for the people who are using it, and the task they are performing. They use a computer because they want to create something ... it’s all about accomplishing something that really doesn’t have anything to do with using a computer. The computer is just a tool.
  • Metaphors based on real world objects are becoming obsolete
    • There’s a whole generation of people who now first see a folder on a computer, not in real life
    • The application - document model - came from a world where the focus was on content creation not consumption

On building the first luggable computer…

  • They got people to walk around with weights in their suitcase and increase them until it became intolerable. 8 pounds turned out to be a the limit for most people, so they made that the target.
  • They wanted to do overnight shipping for repairs. They sent a g-meter through the FedEx network and it clocked 60g - so they made that the spec for robustness.
  • 1994 - the key design criteria for the PalmPilot:
    • Size → fit into a pocket
    • Price → $299 (the most people would pay at the time)
    • Synchronisation → with your desktop computer
    • Speed → he was competing with paper not computers
  • Handwriting recognition on Palm → Just asked people to write a certain way to make it work. The folks at PARC were focused on speed, not ease of use - they were using dots and dashes to reflect letters
  • 4 design principles for Palm OS:
    • Less is more
    • Avoid adding features
    • Strive for fewer steps
    • Simplicity is better than complexity
  • The Zen of Palm Design Philosophy
    • Developed Zen Riddles that would try to articulate points in the way people would remember
      • Created a graph with number of features and how often they were used
      • Some things are in your desk, some are in your drawers. The stapler is on top of the desk, the staple remover is in the draw
      • You’re more likely to enter a new phone number than delete one. Therefore promote that option
      • Stressed the importance of immediate access to information - using the analogy of a watch
      • Tested modals and menus - modal buttons confused people when they weren’t there, menus tested better
      • There is an inherent conflict between the reducing the number of steps for fast access and wanting to minimise the number of items on the top level to reduce complexity
    • First understand the customer and then prioritise ruthlessly
    • If you can really understand the one thing your customer wants to do most frequently, and make that a one-step process, then I guarantee people will like the product
    • Just ask → What’s the one thing you want to do? → even if you have to throw out conventions of logic, architecture and hierarchy you should make that just one step. The more illogical it is - the more likely it will be a differentiating feature vs your competition
  • Rob: “It would be the worst phone and the worst PDA” - due to the tradeoffs necessary
  • Technology is adopted in three phases:
  • Enthusiast
    Exploit me Play
    - Users love and appreciate it - Difficulty makes it fun - competing variants will be operated very differently - take the technology beyond what inventors had imagined - show the technologies potential - can be impractical
    Professional
    Help me work Productivity
    - I can use this in my work - More of a focus on costs and prices - Reliability becomes important - Needs to have a clear use case - Return on investment - Expert users (can learn a new skill)
    Consumer
    Enjoy me Compatibility
    - Price starts to get interesting for consumers - Practical within price range - Ease of use - Controls become automated - Compatibility with lifestyle becomes important
  • The consumer phase is much more demanding than the enthusiast phase. Price, reliability, useful, usable
  • Interaction design is making technology fit people
The most interesting thing that’s happened to design is moving away from designing objects to designing experiences and services.
  • When designing a game - he found he was having more fun building the environments and the cities that he was bombing them in the game (that’s where the idea for Sim City came from)
  • What is the simplest possible system that I can build, that for you is going to decompress into the most elaborate set of possibilities?
  • Nobody reads manuals - make it simple
  • Service ecology → process to establish a systemic view of the service and the context it will operate in
  • Italian phrase ‘Rapido, piccolo and economico’ a description of the entrepreneurial process but applies to how we should be testing ideas with prototypes
  • You can focus on a business, customer or technology driver → BUT you need to bring the other dimensions along with them
  • Market research uses lots of subjects, to reveal statistically viable truth, but it’s unlikely to yield inspiration
  • Digital Patina → coloured ares of the website differently based on how often you visited them (through the gradual fading of colour)
John Maeda’s 10 laws of simplicity
  • Gestures should be mimetic rather than symbolic
  • Core skills of design
    • Synthesise a solution from all relevant constraints
    • To frame or reframe the problem or objective
    • To create and envision alternatives
    • To select the best approach from alternatives
    • To visualise and prototype the intended solution
  • The Design Process: Constraints → synthesis → framing → ideation → envisioning → uncertainty → selection → visualisation → prototyping → evaluation
image

Deep Summary

Longer form notes, typically condensed, reworded and de-duplicated.

Introduction

  • What is interaction design?
    • Design applied to interactive products and systems
    • Shaping our everyday life through digital artifacts - work, play, and for entertainment
  • Designing for Everyday life:
    • Computer design - gone from niche professionals, to everyday users
  • 3 stages of technology use (David Liddle of STAR GUI)
    • Enthusiast stage: Excited. Usability is not important.
    • Professional stage: Those who buy it don't use it. Usability less important than price or functionality.
    • Consumer stage: Less interested in the tech. Usability, effectiveness. Zero to one time.
  • A system isn't complete without the people that need to use it. People and their goals are the point of the system, and we must design for them.
  • Qualities we should expect from systems we use (Mitch Kapor, Lotus 1-2-3).
    • Proposed architectural design, 1990 Software Design Manifesto. Start so they are right for people, rather than the practicalities of building it.
    • A design may communicate its purpose, but its qualities speak to people in a different way.
    • Design for usability, utility, satisfaction and communicative qualities AND sociability.
  • Good interaction design:
    • Your connection to the knob on a radio is much more direct than to your keyboard and the screen
    • Hypercard: clear mental model, stacks of cards
    • Good systems have reassuring feedback
    • Navigability - where you are, what you can do, where you can go next, how to get back
      • STAR and Macintosh were influential in this way
    • Consistency - commands in one part of the system should have the same effect in another
      • APPLEWORKS - did this really well
      • Intuitive interaction minimised the burden of conscious thought
  • What it does → how it behaves → quality of the interaction
  • Languages of interaction design:
    • 1D: words and poetry
    • 2D:painting, typography, diagrams and icons
    • 3D: physical and sculptural form. Handle - we want to grab it.
    • 4D: sound, film and animation.
  • Story of a digital watch:
    • Designers prioritised engineering over usability and control
    • Built the watch around the requirements of the chip

Chapter 1: The mouse and the desktop:

  • Douglas Engelbart and Bill English built the first mouse
    • it was the best device they tested for pointing and clicking on a display - they had text editing in mind
  • Stuart Card perfecting scientific methods to integrate with creative design
    • Task analysis, approximation and calculation
  • 1974 Tim Mott: thought of the desktop as part of the office schematic - file cabinet, calendar, trash can, printer, clock, out basket and inbox for electronic mail. Larry Tesler helped.
    • Usability testing, user conversations
  • Larry Tesler went onto work with Bill Atkinson on the LISA at Apple.
    • Pull down menus
    • dialog boxes
    • one-button mouse

NLS, Alto and Star

  • Douglas Engelbart
    • Mouse, point and click text editor on the NLS system (ONLine system) that he developed at the Stanford Research Institute (SRI)
    • Migrated to Xerox PARC
    • became the foundation of the Alto - the first GUI
    • the text-editing demonstrations were fast.
    • Tim Mott and Tesler created a text editor layout that was really easy to use
      • rigorous testing and and rapid iterative prototyping
    • ALTO - btimap display, able to show graphics
      • move away from pixelated fonts
    • Alan Kay, overlapping windows (desktop metaphor)
    • Nobody wanted to buy the Alto
    • They created STAR as the combination of smalltalk and Alto

Doug Engelbart: Bootstrap Alliance

  • Augmenting the human intellect
  • Boost mankind's ability to deal with complex problems
  • Always wanted to create designs that enhance human performance
  • Wanted to spend his career working out how to connect people to knowledge
  • Journey:
    • Nasa Ames Research Centre
    • Stanford Research Institute (funded by ARPA)
    • Xerox PARC
  • The mouse was just the best device for selecting objects on the screen
    • It was worth testing everything that was available
    • Tests measured time, overshoot, everything

The Demo that changed the world (1968):

  • Augmenting the human intellect paper
    • Artefact: physical objects designed for human comfort
    • Language: classifies the picture of his world into concepts
    • Methodology: methods, and procedures: problem solving
    • Training: getting skills to augmentation
  • Triumph: complete system - human and machine
  • Tragedy: training is part of the system. He was building for experts
  • The demo included:
    • GUI
    • Text editor
    • Collaboration
    • Video conferencing
    • Graphics
    • Fast response time
    • Mouse
  • Striving for the best possible performance

Stuart Card @pioneers

  • Wanted to contribute to the design process before the major decisions had been made
  • All the work was on the computer side, on the engineering of the machine. People weren't looking at the human interaction with it
  • "Design is where all of the action is"
  • Technical discipline that would support the design side
  • At PARC we'd argue for resources, and ask for 10 years. They'd give us 10 years to do something
  • Design core skills: synthesis, understanding people and iterative prototyping
  • Fitts law: speed of the mouse ramped up, making your reactions the limiting factor not the device

Tim Mott:

  • Guided fantasies to learn about user needs
  • Later cofounded EA and Audible
  • Guided fantasy: put people in front of a blank screen with a keyboard and mouse and asked them how they'd imagine editing with that hardware
  • "the system was completely unusable by anyone rather than the people who built it"
  • Resigned: this is not something that we should be doing. Bob Taylor: figure out what we should be doing then
  • Nobody had thought about how to use the bitmap display to edit
  • Invented the place between characters and words where the cursor would go
    • just needed something to go between the words that would show where the cursor would go
    • they wanted to use the mouse to draw through the text and select
    • drag through text selection
    • cut and paste
    • small bar for typing things to find
  • Key Question: How do you want to do that?
  • Did usability testing on publishers, and on those that had been around the longest assuming that they would be that hardest to please

The Desktop Office Metaphor

  • Tim and Larry - page layout system for graphic designers

Larry Tesler

  • the best way to design software was with the participation of the customer
  • Rapid prototyping
  • Career:
    • Stanford AI
    • Xerox PARC
    • Apple + LISA
      • cut and paste
      • editable dialog boxes
      • smalltalk browser
    • Amazon
    • Yahoo
  • Participatory Design and usability testing
  • Rapport with users
  • Ask them the right questions
  • Usability testing: observe, see what the problems are, fix
  • "in future you're going to have a big screen, taking bits from these documents, pasting them into pages, without glue. We won't have all these alginment problems..."
  • Icons would remind people of a concept - grasp the idea quickly without having to read a word

Smalltalk browser:

  • Alan Kay:
    • We still don't have a good way to query databases
    • We still don't have a good way to deal with animation
    • We don't have a good way to browse
  • Browsing:
    • window, three panes, scroll bar, browse before you pick
    • may as well let you edit it, with cut and paste etc
  • The brain drain from PARC → 1980 everyone left

Chapter 2: My PC

  • Bill Atkinson developed the entire pull-down menu system in one night. He had the idea that as you moved your mouse across the top, each menu would pop down, and they would ruffle as you went back and forth.
  • There were 2 parallel paths that led to personal computers.
  • The low-cost road was built on the typewriter as an interface to the computer, leading to the IBM PC. It remained dominant until the Macintosh arrived.
  • Low Cost Road Teletype Interaction Built on typewriter as an interface
    High Cost Road Display and Pointing Desktop & mouse but too expensive until Apple
    LINC (first personal machine not time shared)
    NLS
    ALTO
    APPLE II (winning)
    STAR
    LISA
    IBM PC (winning)
    MAC (victory)
    WINDOWS 3.1 (victory)
  • *1951 Whirlwind antiaircraft super computer was on the scene before those above. It had both teletype and display and device.
  • Bill Atkinson designed most of the precedent-setting software that made Apple so successful. Together with Larry Teslerinvented many of the concepts that defined the desktop.
  • Steve Jobs negotiated the rights to use the Xerox mouse technology. The design was expensive and unreliable though. He focused on ease of use.
    • LISA failed commercially, where the mac succeeded, but LISA was where the interaction design precedents were set.
  • Personal computers seemed as outrageous as personal nuclear reactors at the time of the NLS and LINC
  • NLS team knew that what was really expensive today, would be affordable for people in 10 years time, so they set about inventing the future
  • Executives at Xerox were worried, having spent a lot of money on R&D, APPLE II had the first personal computer success (it cost $800 vs Xerox prices of $10,000). Visicalc was also a huge hit. Apple was marketing the APPLE II as a personal computer, and the executives thought... hey why does theirs cost less than jours
  • They agreed to invest $1m in Apple, so they could make a consumer version of the ALTO. As Apple were pre IPO and everyone wanted to invest, Steve Jobs was able to negotiate a deal to get all the technology at PARC.

What did APPLE take from PARC?

  • The significance of the transfer of ideas between Xerox and Apple has been greatly exaggerated.
    • PARC developed the mouse and windows
    • Apple created Lisa and MAC largely from scratch.
    • Apple conduced a lot of user interface research themselves, trying many things
    • Of those working on LISA, very few had even seen STAR, although everyone had seen and was influenced by Smalltalk.
    • LISA was document based, not application based. It had many innovations including the header bar and pull-down menus
    • Bill Atkinson the design lead had spent just 90 minutes at PARC
      • Bill thought he’d seen partially obscured windows updating, so he wrote the code to make it happen at Apple (he hadn’t seen it)

Microsoft Windows

  • Apple had premium design, but expensive hardware. Apples OS allowed it to charge premium prices for the hardware (so they couldn’t licence it to the PC platform)
  • Windows 1,2 an 3 weren’t good enough. Windows 3.1 hit the tipping point and was widely adopted. By Windows 95 Microsoft were dominant, the GUI and mouse were the future
  • Steve Jobs was axed, as LISA and the MAC didn’t sell enough, John Skully was put in charge but didn’t turn things around.
  • Steve returned after a spell at NEXT, to develop MAC OS X and create some captivating hardware.

Bill Atkinson

  • Had a love for perfection. He was an engineer, problem solver and designer
  • Studied neurochemistry at San Diego where he mastered programming too. He met Jeff Raskin (a professor) who was one of the few people to be interested in making human-computer interfaces more humane (largely punch cards and mainframes) at that time. Jeff would later bring Bill to Apple. Jobs persuaded Bill to join “If you want to make a dent in the world, you have to come to the place were it’s happening”
  • He led the software development for LISA and MACINTOSH
  • UI design was largely trial and error. I kept bringing in new stuff and saying ‘What about this?’ Setting up tests so people could try it.
  • What did people expect to happen? - Helped them work out things like scroll bar interactions (where do you put it? where does the bar star and stop? what direction does it go?)
  • Bill insisted documents on the Lisa had a white background, so they looked as printed (WISIWYG)
  • 12 years Apple grew from 30 people to 15,000
  • Apple Lisa: Lisa was very much an office computer. The Mac was more for everyone.

Engineering and UX workflow on Lisa:

  • Bill worked nights, writing code. Larry worked days, and would test that code with people at Apple. Many of Apple’s new employees hadn’t used a computer before. Larry would give bill a report that explained what he had learnt from the tests. They would brainstorm to work out what to do next. They did that for weeks until the specification was solid.
  • They soon formalise that process with different team members so it was more sustainable.
  • Larry was often seen as delaying projects, because he wanted to make changes, but we it was a priority to make something that was easy to use.
    • It took 3 years, to develop a new user interface, operating system and 5 applications

The Pull Down menu system was designed at the time.

  • Putting the menus along the top of the screen rather than on the windows themselves was the breakthrough - giving you the whole height of the screen to work with
  • Bill recorded his prototypes by taking polaroids, annotating them and putting them into folders
  • The dialog box was invented for Lisa - prior to that you had a property key on the keyboard, you would press that to change the properties of something

Apple Mac

  • Bill Atkinson became ‘the user interface guy’ at Apple - Responsible for Lisa graphics
    • wrote window manager, event manager and menu manager
    • Andy Hertzfeld improved them and translated them into assembly language
  • The design team for the mac was kept small. 10 people only. (Lisa had 100)
  • Bill Atkinson on the difference between the Lisa and the Mac
    • Lisa persona → office worker
    • Mac persona → 14 year old boy
    • As a result, some of the design flare was sanitised out of the Lisa (cautious not to offend). But the Mac was able to have more personality. Freedom to come from the heart.
    • The result was that, people who saw the Mac fell in love with it. Only secondarily did they think... “how can I justify this thing?”
    • There was an emotional connection to the Mac, that came from the heart and soul of the design team.
  • Steve brought everything together
    • The mac was friendly - a first for a computer. The physical design was cute
    • The super bowl ad drew attention. Supporting materials, from packaging to print matter had panache
  • Bill Talking about MacPaint
    1. The more user testing a piece of software has, the smoother it can become
    2. The original Mac only had 128 k-bytes of memory
    3. Alan Kay referred to it as...

      A Ferrari with one pint in the gas tank
    4. Much of the Mac software had to be re-written in assembly code just for compactness, then it had to be re-written back into a high-level language so it was maintainable
  • Hypercard
    • MacPaint and MacWrite existed, but nothing that could bring them together in a document
    • Hypercard was like a stack of cards. Cards could have graphics and text, and link to other cards
    • Hypercard in many ways was the precursor to the first web browser
      • it was like a web browser chained to a hard disk
      • the cards were like pages
    • The most important thing about the medium was the ability to try a bunch of different things quickly. Hypercard could also be used as a way to quickly design an application.
Apple Mice 1980 - Good example of design spec
Microsoft Mouse - 1987
  • Interaction designers need to answer 3 questions
    • How you act (how do you do?)
      • How do you affect the world?
      • We design for a person that does something, we provide affordances
      • We present handles for continuous control
      • We present buttons for discrete control
      • Buttons delegate control to the machine, handles are constantly interacted with
    • How you feel
      • How do you get feedback?
      • A lot of our emotions come from the sensory qualities of the media that we present things with
    • How you understand (how do you know?)
      • The designer needs to help people understand what to do, by showing them a map or a path
  • Interaction Design Paradigms
    • A Paradigm is an example that serves as a pattern for the way people think about something
      • It is a set of questions that a particular community has decided are important
    • What is a computer?
      • Intelligent? - Dialog with the computer
      • Tool - (Douglas Englebart direct manipulation)
      • Media - designing and viewing a new medium
      • Life - viruses, evolution, adapting
      • Vehicle - rules, infrastructure, super-highway
      • Fashion - people being seen with the right products
  • Interaction Design Process Mappings - displays and controls
  • Interaction Design 4 Step Process by Bill Verplank
  • 1) Motivation
    Errors + Ideas
    - Understand the problems that people are having - or have ideas that could make the world better
    2) Meaning
    Metaphors + Scenarios
    - storytelling, narrative, metaphor - a way to frame it that makes sense to people - Example - It’s a desktop (not a computer) - Together with Metaphor, you need scenarios... - Who is using it? - Where are they? - What are they trying to accomplish?
    3) Modes
    Models + Tasks
    - to have a conceptual model people will understand, you have to have a clear picture of what they are thinking about - the mode thy are in depends on what the task is, and what they’re trying to accomplish - How they can move from one mode to another, from one environment to another, defines the tasks - this is the conceptual cognitive science of understanding what the person doing the task needs to know
    4) Mappings
    Display + Control
    - you are designing a display, and some controls - the display is the representation of what you’re manipulating - the controls need to map to the display

Cordell Ratzlaff and Mac OS X

  • Mac OS X was design driven - based on what we thought novice users would need
  • Freedom to explore ideas as a designer at
  • Brought system sounds to the mac
    • learnt that people find the same repeated sounds annoying
    • varied sound with tempo and duration of the activity
    • worked on integrating the NeXTSTEP OS into Mac OS
      • they realised that they could only get 95% of the way there. Which was the worst possible situation
      • 2 day offsite where every team shared how they were getting on, and what they needed to from other teams to finish
      • he was last to go - presented translucent menus, gel-like buttons, composite shadowing - the room laughed, as it seemed things were hard enough with all this
      • engineering driven at the time - easier to develop and release (vs ease of use)
      • Steve joined the company, slated the OS, but they spoke about future ideas, and he said come back in 2 weeks, he loved what they showed
    • designers found it rewarding to work with Steve - because although chaotic and challenging, his leadership encouraged everyone to do their best work
  • From Engineering led, to design (user) led
    • First - what do people need (creativity and ingenuity in design)
    • Second - how do we build it (creativity and ingenuity in engineering to make it happen)
  • Steve Jobs brought focus (the consumer market) which helped everyone make design choices
    • Steve Jobs had to protect Cordell and his team to go after new computer users (vs the traditional power users)
  • Cordell was that the chrome was getting chunky, and taking over space that could be used for creating or viewing content
    • He started to ask what’s the opposite of a computer interface? Candy, liquor, liquids
    • The team collected ads with pictures of liquor bottles
    • iMac hardware industrial language was also transparent, so they wanted an OS to match
    • Focus on using it to add value, window layering. Showed off graphics capability.
  • Introduced the column view to finder, to make it easier to find things
    • Allows you to go deeper into the hierarchy without leaving cluttered windows behind
An interface has to be appropriate for the people who are using it, and the task they are performing. They use a computer because they want to create something ... it’s all about accomplishing something that really doesn’t have anything to do with using a computer. The computer is just a tool.

The Time Dimension

  • Research showed that people sometimes associated information with chronological events or sequences
    • they might not remember where a file is stored, but they know they edited it 2 days ago
  • Time is therefore a useful way to organise things on the computer
  • Also animations
    • provide hints as to where something has come from, and where it’s going to
  • The Dock
    • Easy way to launch applications and documents
    • Easy way to switch between applications
    • Easy way to manage their windows
    • The dock became the single consistent way to combine all of these things
    • The dock scaled down so you could keep adding more things - then they added magnification animations so you could see them easier

Cordell believes the whole desktop metaphor is going to go away

  • Metaphors based on real world objects are becoming obsolete
  • There’s a whole generation of people who now first see a folder on a computer, not in real life
  • The application - document model - came from a world where the focus was on content creation not consumption
  • The web and browsers don’t use the file and folder structure
  • Cordell imagines computers more working like personal assistants in future

Chapter 3 - From the Desk to the Palm

  • Alan Kay made the biggest contributions to the Alto and the Dynabook (tablet/laptop concept).
  • In the 1990s there will be millions of personal computers. They will be the size of notebooks today, have high-resolution flat-screen reflexive displays, weigh less than ten pounds, have ten to twenty times the computing and storage capacity of an Alto. Let’s call them Dynabooks. Alan Kay, 1971
    “The best way to predict the future is to invent it.” Alan Kay
  • Jeff Hawkins joined GRiD, developed GRiDpad (the first tablet to market) and later Palm OS and PalmPilots.
    • Palm OS was developed in 1995 - it was dramatically different from the desktop operating systems of the day, there was no mouse and no desktop
    • Later worked with Dennis Boyle of IDEO on the Palm V - which became popular

Alan Kay

  • His epiphany came when he read McLuhan’s ‘Understanding Media 1964’ and realised that computers were going to be an new medium, not just a tool or vehicle.
  • Spent 5 years working with a psychologist who studied the ways in which children learn - and they saw that even children could learn to code.
  • He was interested in the idea of making computing accessible to children, but you’d need a new device to do it (the Dynabook)
    • They’d need to be intuitive, portable and affordable.
    • He made many prototypes at PARC - some call him the inventor of the laptop
    • SmallTalk was probably more influential though
  • Studied the learning process and it’s three stages as defined by Jerome Burner
    • Enactive, iconic and symbolic.
  • He thought users should first learn kinesthetically, then iconically and finally intuitively
  • 1970 - Started by drawing different types of laptops, PDAs and tablets
  • 1976 - Luggables were a first step on the journey (the NoteTaker - prototype)
  • 1981 - The first famous luggable was produced (the Osborne). Sold 11k units in 8 months.

John Ellenby

  • John Ellenby founder of GRiD Systems started at Xerox PARC in 1974. He was surprised by the mouse.
  • Like Alan’s future, but thought children weren’t the right place to start. Early units were going to be expensive, and therefore the early customer needed to have a need and have money
  • He realised that communication was the killer use case of computers (ARPAnet) - but he moved around for his job, and so he couldn’t take the computer with him.
  • He identified the first killer use case
    • Communication on the go (the best of ARPAnet - email)
    • Document replacement (no need to carry papers)
  • The computer was going to need to fill just half the briefcase - components were shrinking, but together they still would fill two suitcases. He needed a 4x reduction.
  • Started a company in 1980 to make it happen
    • Disk drives for storage at the time made the Alto the size of a washing machine
    • Modems were the size of two shoe boxes
    • Created a smaller keyboard
    • Got a processor from Intel
    • Convinced Sharp to build a 6inch flat panel display
  • They thought the weight would come in at 11 pounds.
  • They got people to walk around with weights in their suitcase and increase them until it became intolerable. 8 pounds turned out to be a the limit for most people, so they made that the target.
  • They wanted to do overnight shipping for repairs. They sent a g-meter through the FedEx network and it clocked 60g - so they made that the spec for robustness.
  • The GriD Laptop launched in 1982 - was great but the next one would need to support MS-DOS as the world was adopting it quickly. Gates did them a special version of MS-DOS, design would stay the same for 10 years. Sold a lot to the armed forces
  • The screen folding over the keyboard was patented and licensed to other providers

Jeff Hawkins

  • 1988 - Joined GRiD to work on the first tablet - he conceived of the idea of a tablet with a stylus for input whilst on a career break (as an academic at Berkeley)
  • There was a lot of speculative money backing companies that were working on pen tablets
  • They were all trying to compete with paper - but paper is well evolved, and great.
  • Created the GRiD convertible, which was trying to get the best of laptop and tablet.
  • Although technically impressive, it seemed the people didn’t want it
  • The future of portable computers was likely to be for smaller devices that appealed to consumers
  • People could see themselves using a GridPad if it could be made smaller
  • He thought something portable was going to be the main interface for the world - not bulky desktop machines
  • 1991 - He left grid and founded Palm. Refrained from calling it Palm Software as he didn’t want to limit the brand.
  • All the hardware PDA vendors had failed - so there wasn’t anyone to build software for.
  • 1991 - Designed the Palm Pilot within 1.5 days of realising that he was going to have to do hardware too
  • 1994 - the key design criteria for the PalmPilot:
    • Size → fit into a pocket
    • Price → $299 (the most people would pay at the time)
    • Synchronisation → with your desktop computer
    • Speed → he was competing with paper not computers
  • Needed handwriting recognition technology for easy input. Asked people to ‘write a certain way’ to make it work, as the tech wasn’t good enough yet
    • Read a paper from PARC ‘Tough-typing with a stylus’ but their goal was speed and Jeff knew reliability/accuracy was going to be more important
      • Focused on making it human - at PARC they were using a dot for e and a stroke for s to speed things up, but that made it hard to learn

Rob Haitani

  • Responsibly for designing the user interface of the Palm OS
  • Interaction design for Palm OS
    • Showed people the form factor (before the device worked) → people asked, how would I get the information onto my PC
    • People were enthusiastic when they were shown the cradle and told it would sync
    • Very few people were interested in wireless email - which was hard for the Silicon Valley folks to understand at the time, as email was the hot topic
  • Forced to design for a screen of just 160x160 pixels
    • Which forced them to be disciplined in what they showed to the user
    • Users insisted on seeing the whole day of their calendar, which was hard to do
    • 4 design principles emerged:
      • Less is more
      • Avoid adding features
      • Strive for fewer steps
      • Simplicity is better than complexity
  • The Zen of Palm Design Philosophy
    • Developed Zen Riddles that would try to articulate points in the way people would remember
      • Created a graph with number of features and how often they were used
      • Some things are in your desk, some are in your drawers.
        • The stapler is on top of the desk, the staple remover is in the draw
      • You’re more likely to enter a new phone number than delete one. Therefore promote that option
      • Stressed the importance of immediate access to information - using the analogy of a watch
      • Tested modals and menus - modal buttons confused people when they weren’t there, menus tested better
      • There is an inherent conflict between the reducing the number of steps for fast access and wanting to minimise the number of items on the top level to reduce complexity
    • First understand the customer and then prioritise ruthlessly
    • If you can really understand the one thing your customer wants to do most frequently, and make that a one-step process, then I guarantee people will like the product
    • Just ask → What’s the one thing you want to do? → even if you have to throw out conventions of logic, architecture and hierarchy you should make that just one step
      • The more illogical it is - the more likely it will be a differentiating feature vs your competition

The Palm Product Line

  • 1996 Feb: The Palm Pilot was announced. Meeting all the design criteria and with handwriting recognition (Graffiti).
  • Sold 300k units in the first year (a big success at the time)
  • Microsoft set out to finish them. Balmer held a conference with 1000 developers and put them in the crosshairs - ‘Don’t think about going to work for these guys, we’re going to kill them’
  • Decided to do the hardware too - teamed up with IDEO to make something beautiful the Palm V

Dennis Boyle - IDEO - Palm V

  • Dennis collected things, acquired the latest products and tested them out
  • The majority of sales to date were to men - but they wanted to reach more people
  • Wanted something elegant, didn’t look like technology.
  • Pulled together a design team that was 50% women - that worked out well.
  • They had to move to metal - to get a couple of mm back internally
  • Added rails on either side for a stylus and another accessory based on what people were doing with their palm pilots
  • Very little competition - it became a big hit and sold 5m units.

Jeff Hawkins left after the Palm V to found Handspring

  • Palm was owned by 3com - and they wouldn’t spin it out
  • Handspring would build wireless communication devices in a similar form factor
  • They created a hardware expansion slot - so others could create products for it
  • One of the products was a camera - called the eye module
    • once plugged in - the camera interface would come stright up
  • The next product was a combinations of a PDA and a Cell Phone (The Treo)
    • Rob: “It would be the worst phone and the worst PDA” - due to the tradeoffs necessary
  • Solved the problem of looking at your organiser whilst on the phone by adding a speakerphone
  • Had a physical button to turn off the ringer
  • Small QWERTY keyboard for entering text
  • The keyboard made the product look complex though (put a clamshell over the keyboard)
  • The cell phone was becoming the dominant device of the future
Bert Keely - The architect of table PCs and Mobility at Microsoft (1)

Chapter 4 - Adopting Technology

  • New media systems were really hard to use - people weren’t adopting the newest technology because of it

David Liddle - Worked on the Xerox Star

  • Technology is adopted in three phases:
Enthusiast
Exploit me Play
- Users love and appreciate it - Difficulty makes it fun - competing variants will be operated very differently - take the technology beyond what inventors had imagined - show the technologies potential - can be impractical
Professional
Help me work Productivity
- I can use this in my work - More of a focus on costs and prices - Reliability becomes important - Needs to have a clear use case - Return on investment - Expert users (can learn a new skill)
Consumer
Enjoy me Compatibility
- Price starts to get interesting for consumers - Practical within price range - Ease of use - Controls become automated - Compatibility with lifestyle becomes important
  • Different design values apply at the different stages. How important they are changes:
    • The consumer phase is much more demanding than the enthusiast phase
    • Price, reliability, useful, usable
  • Human Computer Interaction becomes increasingly important
  • Why does a VCR clock flash 12:00 when it isn’t programmed? It probably doesn’t need to
  • Car had to get easier → communication, navigation and entertainment

Mat Hunter - IDEO in 1995 - Point and Shoot Digital Cameras

  • Helped create the point and shoot camera - you press the button, we do the rest
Framework for consumer digital photography:
  • Scenarios were used to develop patterns of value that would appeal to Kodak’s customers and formed the basis for interaction architecture for the system.
  • Business Trip
    Express
  • Built a huge prototype to mimic the interactions before building them
  • The concept of a ‘user experience prototype’ was new at the time, and it proved really useful
  • Camera had three modes, to avoid overwhelm (Capture, Review, Send), you could switch between them using a big physical mode dial
  • Reviewing images you’d taken clearly - was a new concept too.
  • They used a skumorphic film strip so you could easily see all the photos you’ve taken
  • Processing power wasn’t that great - it took a few seconds to load a full image. So allowed you to quickly move through low-res thumbnails, if you stopped the image would load
  • They were able to do things on the prototype that the hardware wasn’t capable of yet - but it showed the direction of travel

David Kelley - Interaction Design - IDEO / Stanford

  • Interaction design is using your technical knowledge → to make something useful, delightful and exciting for people
  • Interaction design is making technology fit people
  • Computers were polarising → things could move but they were pixelated and horrible. The print designers were conflicted
  • Worked on designing Apple’s mouse. They tried really hard to get a 121 accuracy (moving the mouse 1mm would move the pointer 1mm). Precision turned out not to be that important as people’s brains would naturally make adjustments - allowed for cheaper hardware.
  • Appliances were single use - but computers were deliberately general-purpose
  • The most interesting thing that’s happened to design is moving away from designing objects to designing experiences and services.
    • Designers used to work on models, now we’re working on story telling
    • Understanding people and telling stories is now super important
    • Designers need to be experts in methodology - to bring the different disciplines together
    • Designers integrate the technology and the process - holding the experts together.

Paul Mercer - iPod - User Interface

  • Sony spent decades getting better at industrial design and miniaturisation. BUT as the world changed and everything had a display - software would become more important
  • Even though the iPod had just 320×240 pixels - software was really important
  • Before the iPhone → I don’t know anybody who loves the software on their phone

Chapter 5 - Play

  • People play to learn and to have fun - they stop playing when they’re bored
  • Play is a core value.
  • The intrinsics of the product really matter for games - if it’s not a good product, you can’t market your way out of it
  • Preadolescents, teenagers and adults → they all like different things, sports being the exception, they all like sports
  • The more you work with kids the more you realise they have a serious side, they have issues and pressures. They’re little people
  • IDEO prototype and test toys with kids - they’d have them come into the office weekly
  • Price point is really important for toys - needs to be $10-$20 ballpark
  • Brenda Laurel
    • Hierarchy of gender signalling
      • Boys won’t play with a pink furry truck. Pink > truck.
      • Boys won’t use a diary with bullet holes. Bullet holes < game category.
    • They decided to design for girls - instead of doing the politically correct thing of gender-encompassing games
    • Girls were more interested in constructive play - where they’d build a family and there’d be a ongoing narrative. Weren’t as competitive - so having a score was less important

Will Wright - The Sims and Sim City

  • Built lots of models as a child - thinks that everything can be a model - sets of behaviours, rules and probabilities that could be ported into a game
  • When designing a game - he found he was having more fun building the environments and the cities that he was bombing them in the game (that’s where the idea for Sim City came from)
    • Read about Urban theory and dynamics (traffic models etc) ]
    • City planning became interesting enough to be a game
  • Sim City did so well for Maxis that it paid for a lot of other mistakes
  • Sims started with a brief to make a new game that was all about the social interactions in contemporary life
    • Everything was about escapism at the time - the Sims was the opposite of that
    • Became the best selling game in history - had a lot of casual players that didn’t usually play games
    • The original idea was to make a dolls house that bots would want to play with and a strategy game that girls would want to play
  • The Landscape of play:
    • Landscape populated by mountain peaks
      1. Role play, storyline and plot
      2. Skill and achievement
      3. Creative stimulation
      4. Strategy
    • The Sims wasn’t pigeon holed - it was a bit of everything
  • The Sims was open ended - it’s not like a movie. You’re creating the story
  • There’s no single goal in Sim City - you could go for a big city, or a city with no crime
  • The pleasure in playing games is influenced by the structure of the feedback
  • Sim City was about gardening - and Jay Forrester’s theories about urban dynamics
  • The Sims combines the inspiration of Christopher Alexander’s Pattern Language with the metaphor of the dolls house.

Summary:

  • Games only survive if they’re enjoyable
  • Controls must be fun to use - so you can use them immediately - but there must be a sense of skill progression
  • Engagement, feedback and controls are all really important. Controls don’t have to be direct.
  • Abstract ideas inform the game design
  • What is the simplest possible system that I can build, that for you is going to decompress into the most elaborate set of possibilities?

Chapter 6 - Services

  • You are what you use not what you own
  • I-Mode: Content Portfolio launched with 67 partners in 4 categories: Transactions, information (train timetables) , database (yellow pages), entertainment
  • Nobody reads manuals - make it simple
  • Created a common set of 180 icons (emojis) and mandated that all vendors supported them
  • Creating the Service Design community
    • Shared Rules, Shared Access, Shared Communication, Shared time
  • Service design = the design of intangible experiences that reach people through many different touch-points and that happen over time
  • Services often weren’t designed before
  • Service ecology → process to establish a systemic view of the service and the context it will operate in
  • Services should be sustainable
  • Understanding of different actors, a larger system or network over time
  • Touch-points → tangibles that make up the total experience of using a service. All to be considered when designing a service - creating a clear unified customer experience
  • Evidencing → where possible map the evidence that’s driving you in a certain direction
  • Experience prototyping is key
    • Italy phrase: Rapido, piccolo and economico (Italian description of the entrepreneurial process)
    • Fast and cheap prototyping
  • Service Experience Models: the model is an invaluable way to develop, refine, share and present their designs
  • Service blueprinting → describes a service in enough detail to implement and maintain it

Fran Samaloinios

  • You can focus on a business, customer or technology driver → BUT you need to bring the other dimensions along with them
  • Think about research in Subjects, truth and inspiration
    • Market research uses lots of subjects, to reveal statistically viable truth, but it’s unlikely to yield inspiration
    • Empathic research can yield inspiration from small numbers of subjects. But you rely on the researchers judgement to determine if they are truthful
  • Process: Observations → insights → framework → ideas → prototypes → solution
    • The framework bounds the problem and reduces the complexity
  • In service design, we have to think about the stakeholders too - not just the customers
  • The framework of a customer journey helps you think about the experiences nad touch-points that exist before and after the most obvious parts of a service

Chapter 7 - The Internet

  • The internet is a set of protocols for communicating between machines.
  • One protocol is HTTP - that protocol created the web.
  • Email is not part of the web, as email is transported through the internet but not the web
  • 3 ways of interacting with the world: manipulation, locomotion and conversation
    • All three of those metaphors are present on computers
  • The internet brought the immediacy advantage
  • The internet is a communication media
  • Google’s experimentation infrastructure was game changing - it used to be hard to test something on 20-40 people, Google’s team could run tests on 100 million users instantly
    • Let’s find out - Let’s try it → was the attitude at Google
  • Google’s early restraint with ads and it’s better results gave it the edge and it quickly won market share
  • PageRank → better pages must have more links to them from other pages. Links from better pages are more important too.
  • Larry: We had to download the entire web, and store it and process it. To download the web, you start at one page and just follow all the links.
    • 1000 pages per second
  • They wanted a fun name. Googol wasn’t available - but Google was (they’d originally misspelled it though)
  • Growth was based on quality of service - no marketing
  • Text based ads were the key - the sales team didn’t want to do ads that were based on search results - but the results spoke for themselves
  • It was a design challenge to add services without increasing complexity. New services are deployed off the main page. They have to get traction on their own - without main page promotion.
  • Google Philosophy - 10 Truths:
    • Focus on the user and all else will follow
    • It’s best to do one thing really, really well
    • Fast is better than slow
    • Democracy on the web works
    • You don’t need to be at your desk to need an answer
    • You can make money without doing evil
    • There’s always more information out there
    • The need for information crosses all borders
    • You can be serious without a suit
    • Great just isn’t good enough

Steve Rogers BBCi

  • People have to understand and want to engage with your service
  • Understand your audience, understand who it is that’s likely to get involved
  • Visit people, talk to people
  • The BBC had great content - but navigation was really hard
  • They needed an anchor point for a site that size (the toolbar)
  • Digital Patina → coloured ares of the website differently based on how often you visited them (through the gradual fading of colour)

Chapter 8 - Multi-sensory and Multimedia

  • We have 5 senses - our connection to computers is sensory deprived and physically limited
  • Could we break away from staring at monitors and walk through an environment with sensory displays everywhere - or carry a system with you that augments your vision
  • Can we blur the line between real and simulated?
  • Multi-disciplinary teams at IDEO have project rooms - a dedicated space filled with information generated during research and work. Large foam boards.
  • A graphical user interface is the separation of intangible representations from general purpose remote controllers, which enables flexibility and malleability
  • An abacus is the simplest form of computation device
  • Mechanical objects are usually descriptive of what they do
    • The object reminds you of what it does
    • Kitchens are a great experience - lots of good products, all work well together, guessable
  • Physical money has value, it’s ownership is defined largely by where it is. How close to you it is

Designing Sound

  • Sound can have emotion and convey information

Affordances

  • Stairs can’t be designed without knowing the capabilities of people. The depth and riser height are selected for a certain leg length - to minimise bio-mechanical energy used
    • There’s a complex relationship between the capabilities of the human and the dimensions of the stairs - you have to consider them both
  • For something to have an affordance you need to think more about the biophysics of a situation and combine that with fairly low-level perceptual information - information that ca be conveyed through light and sound that gives them hints about what to do with an object

Chapter 9 - Futures and Alternative Nows

  • Alternative Nows: Things that might be here now if we had different values
  • Design as a medium to ask questions, provoke and stimulate people, designers and industry
  • Researching complicated pleasure - how can you design products that provide complex and complicated pleasures
  • Placebo underwear - makes you go about your day with a different mindset
  • GPS table - shows ‘lost’ when inside, shows it’s exact location when outside

John Maeda’s Laws of Simplicity

  1. A complex system of many functions can be simplified by carefully grouping related functions
  2. The positive emotional response derived from a simplicity experience has less to do with utility and more to do with saving time
  3. When the richness of an experience is increased in a manner that facilitates the perception of the overall intent, but all means don’t skimp. Add more!
  4. The more you know about something beforehand, the simpler it will ultimately be perceived
  5. In order to feel, you gotta have noise. Too much noise, and all you’ve got is noise.
  6. Recognise not only the absolute laws of the physical universe as important constraints, but also the artificial laws as of equal importance when striving for simplicity.

Looks like he’s updated the laws since this book →

  1. Reduce - The simplest way to achieve simplicity is through thoughtful reduction
  2. Organise - Organisation makes a system of many appear fewer
  3. Time - Savings in time feel like simplicity
  4. Learn - Knowledge makes everything simpler
  5. Differences - Simplicity and complexity need each other
  6. Context - What lies in the periphery of simplicity is definitely not peripheral
  7. Emotion - More emotions are better than less
  8. Trust - In simplicity we trust
  9. Failure - Some things can never be made simple
  10. The One - Simplicity is about subtracting the obvious, and adding the meaningful
  • Gestural interfaces
    • The problem with gestures is that they require recall instead of recognition
      • You have to be able to remember all the gestures
      • There’s only a small universal set of gestures
    • Gestures should be mimetic rather than symbolic

Chapter 10 - People and Prototypes

  • Core skills of design
    • Synthesise a solution from all relevant constraints
    • To frame or reframe the problem or objective
    • To create and envision alternatives
    • To select the best approach from alternatives
    • To visualise and prototype the intended solution
  • It’s much easier to recognise a good solution than to explain it
  • Evaluation criteria for a design project
    • Creativity / innovation
    • Aesthetics / quality
    • Human factors / values
    • Performance / technology
    • Completeness / presentation
  • Design is about understanding constraints
  • Increasing Increasing complexity of constraints:
    • Ecology - the interdependence of living things, for sustainable design
    • Anthropology - The human condition, for global design
    • Sociology - the way people relate to one another, for the design of connected system
    • Psychology - The way the mind works, for the design of human-computer interactions
    • Physiology - The way the body works, for the design of physical man-machine systems
    • Anthropometrics - The sizes of people, for the design of physical objects
  • Types of Design
  • image
  • Interaction Design → the design of everything that is both digital and interactive
  • IDEO method cards → 51 ways to learn about people
  • Design Process
  • Constraints → synthesis → framing → ideation → envisioning → uncertainty → selection → visualisation → prototyping → evaluation