Learning more about direct manipulation and reducing the ‘gulfs’

“Direct manipulation” is one of those Human-Computer Interaction (‘HCI’) terms that sounds intriguing. During the online HCI course instructed by Scott Klemmer which I did recently, I learned a bit more about what direct manipulation means.

Direct manipulation is a HCI method which involves continuous representation of objects of interest and rapid, reversible, and incremental actions and feedback. I guess the essence of direct manipulation is to allow users to manipulate objects that are presented to them, using actions that resemble – to varying degrees – the physical world.

An example of direct manipulation is the resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse. As Wikipedia explains: “Having real-world metaphors for objects and actions can make it easier for a user to learn and use an interface (some might say that the interface is more natural or intuitive), and rapid, incremental feedback allows a user to make fewer errors and complete tasks in less time, because they can see the results of an action before completing the action, thus evaluating the output and compensating for mistakes.”

In the lecture, Scott talked about “The Gulf of Execution” and “The Gulf of Evaluation” as introduced by Don Norman and Bill Verplank; how can a user interface bridge the gap between the user ‘knowing what to do’ (“The Gulf of Execution”) and the user ‘knowing what has happened’ (“The Gulf of Evaluation’)? In essence, direct manipulation is about making the interaction between a system and its users as easy and seamless as possible (see Fig. 1 below). Scott went on to talk about how easily users can do certain tasks, as outlined in Don Norman’s The Design of Everyday Things (see Fig. 2 below).

Amongst other things, I learned how you can use design to reduce these gulfs:

  1. Affordances and signifiers – Don Norman introduced the terms “signifiers” and “affordances” in his book, The Psychology of Everyday Things. A “signifier” is some sort of indicator, a signal in the physical or social world that can be interpreted meaningfully. In design, you can use signifiers to convey critical messages to the users. “Affordances” are all about the perceived and actual properties of a thing which determine how this thing can be used.
  2. Reducing the gulfs – Apart from providing visibility through affordances and signifiers, Scott mentioned a number of alternative ways to reduce the ‘gulfs’ in users knowing what to do and knowing what has happened (see Fig. 3 below).
  3. Graphical User Interface (‘GUI’) vs command line  It was interesting to hear Scott compare the pros and cons of a graphical user interface (‘GUI’) against those of the command line interface. Initially, I was strongly inclined to think that a GUI would be much more intuitive and better from a direct manipulation point of view. However, Scott explained that the command line interface tends to work better when the direction it offers is a benefit rather than a drawback (see Fig. 4 below).
  4. Gestural interfaces – At the end of the lecture Scott talked about how all of this direct manipulation stuff applies to gestural interfaces. These interfaces can be a good remedy against menu creep because as a designer you’re almost forced to keep the gestural interface as simple and as minimal as possible. With natural gestures tends to come immediate and clear user feedback.

Main learning point: I didn’t find direct manipulation the most straightforward of topics within the HCI course. However, after spending a bit more time understanding concrete examples and the ways in which the “Gulf of Execution” and the “Gulf of Evaluation” can be reduced, I felt a bit more confident about direct manipulation and specific things to look out for.

Fig. 1 – Design framework around the “Gulf of Execution” and the “Gulf of Evaluation” by Richard Buchanan (Taken from: http://www.dubberly.com/articles/what-is-interaction.html)


Fig. 2 – The making of gulfs (as outlined in Don Norman’s “The Design of Everyday Things”) – How easily can someone:

  • Determine the function of the device?
  • Tell what actions are possible?
  • Determine mapping from intention to physical movement?
  • Perform the action?
  • Tell what the system is in?
  • If the system is in its desired state?
  • Determine mapping from system state to interpretation?

Fig. 3 – The reducing of gulfs (by Don Norman and Jakob Nielsen – Gestural Interfaces: A Step Back In Usability) – In order to reduce gulfs, provide:

  • Visibility – Using perceived affordances and signifiers
  • Feedback
  • Consistency – Standards
  • Non-destructive operations – The importance of “undo”
  • Discoverability – All operations can be discovered by systematic exploration of menus
  • Scalability – The operation should work on all screen sizes, small and large
  • Reliability – Operations should work; events shouldn’t happen randomly

Fig. 4 – Comparing the direct manipulation aspects of a GUI vs command line interface (by Scott Klemmer)

GUI: (see Ben Shneiderman – Eight Golden Rules of Interface Design)

  • Constant feedback
  • Immediate feedback
  • Input – output
  • Visible
  • Consistent

Command line interface:

  • Better for abstractions
  • More geared towards programming purposes

Related links for further learning:

  1. http://en.wikipedia.org/wiki/Direct_manipulation_interface
  2. https://engineering.purdue.edu/~elm/projects/surrogate/surrogate.pdf
  3. http://www.dubberly.com/wp-content/uploads/2009/01/ddo_article_whatisinteraction.pdf
  4. http://www.interaction-design.org/encyclopedia/gulf_of_evaluation_and_gulf_of_execution.html
  5. http://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
  6. http://jnd.org/dn.mss/signifiers_not_affordances.html
  7. http://www.interaction-design.org/encyclopedia/affordances.html
  8. http://www.jnd.org/dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html
  9. http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html
  10. http://cleo.ics.uci.edu/teaching/Winter10/231/readings/1-HutchinsHollanNorman-DirectManipulation-HCI.pdf

Heuristics – Finding usability problems in designs (part 2)

In my last post I wrote about the use of heuristics to find usability problems in designs. In this post, I’ll look into the individual heuristic principles in more detail. It was UX expert Jakob Nielsen who introduced these “10 Heuristics for User Interface Design” in 1985 and these principles serve as a great context to evaluate user interface (‘UI’) designs against:

  1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” As a user, one always wants to know what’s happening; “what’s the status of my current action?” or “what’s happening next?” A good example is the file upload process on Basecamp where the upload button is enabled until clicked. It’s then replaced with a progress bar until the upload has completed (see Fig. 1 below).
  2. Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.” A good example is Apple’s iTunes library navigation where the terms used – music, movies, podcasts, etc. – are self-explanatory and unambiguous (see Fig. 2 below).
  3. User control and freedom – “Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.” An older example of how not to do this comes from “Amazon’s ‘Review and Sell Your Product'” form (see Fig. 3 below). The form doesn’t contain any (obvious) way for the user to cancel or revisit his listing, as observed really well by Lisa Duddington in her great blog post.
  4. Consistency and standards – “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” In your UI design you ideally want to create as little opportunity for user confusion as possible and consistency is therefore paramount. A good example is Microsoft Office where Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options: Home, Insert, Page Layout, etc. (see Fig. 4 below).
  5. Error prevention – “Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.” A good case in point is the “share” functionality in Yammer where the disable button is disabled after it has been clicked in order to prevent the user from updating the same post twice (see Fig. 5 below).
  6. Recognition rather than recall – “Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.” This heuristic is all about making information visual and directly available to the user. Try to avoid creating extra hurdles for the user and help user recognition with previews (e.g. offering previews of all available templates – see Fig. 6 below).
  7. Flexibility and efficiency of use – “Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.” Examples of this principle are flexible shortcuts in the Firefox browser or having flexible defaults with options. A good example of the latter is Expedia who provide some set categories as part of its online hotel search functionality whilst still allowing users to enter a free text field.
  8. Aesthetic and minimalist design – “Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.” An obvious but great example in this respect is Google’s main search page, which is clear, functional and has loads of white space (see Fig. 7 below).
  9. Help users recognise, diagnose, and recover from errors – “Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.” This principle is all about making the problem (and the related solution) clear to the user, by for example highlighting the specific fields that the user forgot to fill out. It clearly helps if an application can show a path forward to the user. A good example is this page taken from a money management tool which explains in clear terms to the user which fields still need completing. I’ve included a similar error alert in Fig. 8 below and which proposes a way for the user to solve the problem.
  10. Help and documentation – “Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.” Examples of a good application of this heuristic are to help learning and decision making through the use of examples within the UI.

Main learning point: I found it incredibly helpful to delve a bit deeper into some of Jakob Nielsen’s “10 Usability Heuristics for User Interface Design” as it helped me to understand the kinds of factors which can influence ‘good design’. These principles can act as a great starting point when reviewing designs and user interfaces.

Fig. 1 – Screenshot of Basecamp’s upload process (taken from: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5)

Basecamp feedback_button

Fig. 2 – Screenshot of iTunes’ library navigation (taken from: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5)

iTunes metaphor_library

Fig. 3 – Screenshot of previous Amazon’s ‘Review and Sell Product’ form (taken from: http://usabilitygal.com/2010/04/30/amazon-fails-on-heuristic-%E2%80%98user-control-and-freedom%E2%80%99/)

Amazon - user control and freedom

Fig. 4 – Screenshot of Microsoft Office toolbars (taken from: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5)

Microsoft consistency_toolbars

Fig. 5 – Screenshot of Yammer’s update feature (taken from: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5)

Yammer prevention_disable

Fig. 6 – Screenshot of the font options available in Keynote (taken from: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5)

Keynote memory_font

Fig. 7 – Screenshot of Google’s main search page

Google minimalist design

Fig. 8 – Screenshot of a message alerting the user that his USB device has not been recognised

USB Device not recognised