Interaction designer and author Dan Saffer recently published a book called “Microinteractions: Designing with Details”. As the title clearly suggests, this book is very much about those small interactions which make up a product or a feature. In fact, Saffer’s book is very much inspired by a quote from the famous American designer Charles Eames who believed that “The details are not the details. They make the design.”

“Microinteractions” is a very practical book in which the principles behind designing effective microinteractions are well explained and illustrated. These are the main things I learned from reading “Microinteractions”:

1. Doing a single thing (and doing it well) – Saffer defines a microinteraction as “a contained product moment that revolves around a single use case.” It’s about creating functionality that does one thing (and does it well), and microinteractions are typically not meant to be standalone features. Examples of microinteractions are accomplishing a simple task, adjusting a setting or connecting devices together. Saffer stresses the need for microinteractions to be simple and effortless.
2. The different parts that make up a microinteraction – In “Microinteractions” Saffer breaks down the different parts that form an microinteraction: (1) the trigger which initiates the microinteraction (an example is the iPhone “eject” button in iTunes, see Fig. 1) (2) the rules which determine how it functions (3) the feedback that the rules generate (an example is YouTube’s favicon which changes dependent on the status of the video being played, see Fig. 2) and (4) the loops and modes that make up the meta-rules of a microinteraction.
3. Start with user need (and restrain yourself) – If anything, “Microinteractions” serves as a good reminder of the importance of starting your designs with an understanding of user need: what does the user want to accomplish? When do they want to do it? How often? This focus on user needs is one of the reasons why Saffer urges his readers to apply constraint when it comes to designing microinteractions. He states that designing microinteractions is all about “doing as much as possible with as little as possible.” I’ve included some examples of well designed microinteractions referenced in the book in Fig. 3 below.

Main learning point: “Microinteractions: Designing with Details” is an incredibly helpful and insightful book. Dan Saffer writes in a concise but practical way, making the reader think about user needs and how to translate this into microinteractions that help user accomplish their goals. The book is one of the best design books I’ve read in a while and I’d recommend it to anyone with in an interest in design or human interaction. Even if you don’t end up reading the book, at least have a look at the very helpful microinteraction framework that Dan Saffer has developed (see Fig. 4 below)!

Fig. 1 – The iPhone “eject” button in iTunes (from: http://designaday.tumblr.com/post/52102915032/in-the-details-button-on-button)

Fig. 2 – YouTube’s favicon changes based on whether the video is buffering, playing or paused (from: http://littlebigdetails.com/post/51723823559/youtube-the-favicon-changes-based-on-whether-the)

Fig. 3 – Good examples of well designed (and restrained) microinteractions

Gmail warns the user when he starts chatting with a user outside his organisation (from: http://littlebigdetails.com/post/52299973913/gmail-if-you-use-a-corporate-mail-account-when)

The Evernote Web Clipper button will automatically convert to gray and will be disabled if the extension is already installed in the browser (from: http://littlebigdetails.com/post/50576515664/evernote-web-clipper-if-the-extension-is-already)

The “Follow” button changes to “Follow back” on Mixcloud if the user is already following you (from: http://littlebigdetails.com/post/42582626398/mixcloud-the-follow-button-changes-to-follow) 

Fig. 4 – Microinteractions framework as included in “Microinteractions: Designing with Details” by Dan Saffer