Thinking Out of the Box

Micro-Interactions vs. Macro-Interactions

Markus Weber

In order to successfully conduct user-centered-design projects, it is important for the team to have a shared vocabulary and understanding of key concepts. Grave misunderstandings can occur, when the parties involved use identical terminology, but the concepts that they refer to diverge. This starts with terms like “usability” or “user experience”, for which – in the worst case – you can find as many different explanations as there are members on the project team. Confusion can also arise regarding the concept of “interaction design”.

Clarifying certain key concepts in advance can go a long way in putting the project on the right track and avoiding communication problems. Pointing out the “elements of user experience”, as described by Jesse James Garrett [PDF] can be a helpful step in doing so, e.g. to avoid a situation where improved usability is requested, but what is actually wanted is an overhauled visual design.

For certain factors of user experience, such as visual design, it is relatively simple to explain what they are about to “non-UX” people. Visual design is usually a concept that is easily grasped, after all, everyone has their notion of aesthetics (which does not imply that there is agreement in the judgment of aesthetics).

Macro-Interaction Design vs. Micro-Interaction Design

For interaction design, things can be more difficult, since the best interaction design often goes unnoticed (and should go unnoticed, since interaction should feel natural without the user thinking much about it). It can thus take some time to point out the focus of interaction design on the behavior of the system in response to the users’ actions. In some cases, implicit misunderstandings can persist, namely when one party is focused with interaction on a feature-level whereas the other party is concerned with the “big picture” of overall interaction with the user interface in question.

A distinction between macro-interaction design and micro-interaction design can be helpful to prevent team-members to simply speak of “interaction design” but referring to diverging concepts. Entries in a “project glossary” could look something like this:

Macro-interactions are concerned with the way that users interact with the user interface in order to carry out meaningful key tasks, usually by navigating the interface and using a series of system functionalities and several widgets/controls. Macro-interactions are about reaching goals that are related to the users’ work.

Micro-interactions focus on the behavior of individual widgets/controls without taking into account interactions of a larger scale, they are “blind” to the semantics of users’ workflows, so to speak. Micro-interactions are concerned with the generic behavior of components in reaction to users’ actions on an “atomic” and context-free level.

An example for differences in micro-interaction design is illustrated below.

The sequence shows how auto-complete of addresses is implemented in Firefox and Safari. The macro-interaction is more or less the same in the two cases: the user wants to navigate to a site and the user interface provides support by showing a list of addresses from the history that match what the user has entered in the address field so far.

Auto-complete of addresses in Firefox and Safari

Auto-complete of addresses in Firefox and Safari

There are differences in micro-interaction, however, with the most significant one being the fact that, in Firefox, auto-complete happens exclusively below the address field, so, that, in order to navigate to the first suggestion, the user has to use the arrow down key (or mouse) and then press Enter to navigate to the desired entry. In Safari, the “best match” is completed within the address field, so that, at any point while typing, the user can press the Enter key to navigate to that address.

This is not a major difference and the goal of providing a list of matching addresses to what the user has already typed is reached in both cases. But the micro-interaction designs contribute to the overall “feel” of the two interfaces. Either by having an extra feeling of comfort with Safari due to not being forced to make that extra click to reach the first entry, or by the confusion of seeing the completed entry directly in the address bar while typing.

Those micro-interactions can also shape user behavior by becoming so “engrained” that it is hard for users accustomed to them to get used to an interface in which things are handled differently: there are cases of hardcore Safari users who curse Firefox after trying to press enter to navigate to the first matching address and ending up with having specified an invalid address – and then making the same mistake again when they enter the next address because handling things as with Safari has become integral part of their interaction behavior.

Documentation of Interaction Designs

When it comes to specifying and documenting macro-interaction design, wireframes and storyboards are essential tools for, e.g. to illustrate how a sequence of screens and dialogs unfolds as users carry out their work and in order to show how functionality for the individual tasks can be accessed.

For micro-interaction design, other means of documentation are usually employed. Since this kind of interaction involves the very dynamic details of individual interface elements, extensive textual descriptions or detailed storyboards can become necessary, but even those often fail to capture the “feel” of the interaction, which results from the tiny dynamic aspects and which cannot be communicated by anything else except the experience itself. For example: even though it is possible to describe the “auto complete” micro-interaction shown above in textual form, the description could not do the experience of interacting with it justice. Even judging the interactions based on the animations shown can be hard.

Working on Interaction Designs

When the goal of a project consists in “optimizing interaction design”, there are obviously two areas that can be focused. A reasonable approach is to work top down, with getting the right macro-interaction design before defining the micro-interaction design. This does not imply that the micro-interaction design should be handled with less care compared to macro-interaction design – micro-interactions can have significant impact on the overall user experience. The macro-interaction design of a user interface, however, provides the framework in which the micro-interaction design unfolds and determines, amongst other things, which controls should be used. After such a framework has been determined, the micro-interaction design can be established. By using a GUI theme that has been developed with a modern GUI toolkit such as WPF or Silverlight, it is even possible to employ an “off-the-shelf” micro-interaction design. The behavior of the individual components of such a micro-interaction design is already aligned harmonically. That way, the individual components play together well and coherently. By adjusting central parameters, all components can be manipulated in the same way, so that, e.g. when reaction time of components is manipulated, coherence is not impaired.

Working on Micro-Interaction Design

Suppose now that the micro-interaction design for a user interface shall be focused on. In case the project team (or the project sponsor) is not aware of the distinction between micro-interaction design and macro-interaction design, now would be a good (read: the latest) point to explain it. It is important to be absolutely clear about micro-interaction design in order to avoid generating false expectations regarding the impact on usability that can reasonably be expected.

After expectations have been set appropriately, there are two prototypical ways of going about the definition of micro-interaction design.

  1. component-wise definition of interaction design
    In this case, micro-interactions are defined per component, i.e. each component such as search boxes, expanders etc. are dealt with in isolation without aligning individual behaviors, e.g. in respect to their animation speed.
  2. concerted interaction design
    Concerted interaction design, on the other end of the continuum, still is focused on the behavior of individual controls, but the behavior of the controls is aligned in the sense that they behave “similarly” on the key dimensions such as animation speed, reaction time etc. (Using a GUI theme that is configured via central parameters as mentioned above can be helpful in this respect.)

Needless to say that component-wise definition of micro-interactions is likely to result in an awkward “feel” of the interface, e.g. when the speed with which animations unfold varies between components. Concerted design of micro-interactions on the other hand ensures that there is coherence regarding the dynamic behavior and “feel” of the interface. Still, all stakeholders should be aware of the fact that a lot of carefully crafted micro-interactions do not necessarily result in convincing macro-interaction design. The feel of the user interface can be “polished” and made coherent in the way just described and some user-friendly aspects can sometimes be sneaked into a system via micro-interactions, but still, the interface may fail completely when it comes to supporting users’ tasks on a larger scale.

Relevance of Micro-Interactions

When macro-interaction design is done properly, however, micro-interaction design can be the aspect that distinguishes a good user interface from a great user interface. With new interaction paradigms and technical possibilities, the domain of micro-interactions is becoming more and more important regarding user experience. Take, e.g., the user interfaces for devices like the iPhone or Microsoft Surface, which are heavy on micro-interaction design with interface elements “wiggling”, “breathing” and “pulsating” when touched or moved. None of these aspects affects the overall execution of tasks, but they contribute essentially to the experience the user has while interacting with the system. If micro-interaction design for these products was not well thought out and coherent, user experience would be impaired – and users may not even be able to say why.

Which may be another way to distinguish micro-interaction design from macro-interaction design: If users say that the interface does not “feel” right, but cannot put their finger on it why, it may be worth checking micro-interactions.

Firefox is a registered trademark of the Mozilla Foundation.
Safari is a trademark of Apple Inc., registered in the U.S. and other countries.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Luzie Seeliger

Project Coordination and Communication

+49 681 959 3110

Contact form

  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mühlheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    On the map

    +49 69 241 827 91

    +49 681 959 3119