Emotional design: Tapbots utility robots

Screenshot of home "page" of Tapbots.com

Tapbots are utility robots with an anthropomorphic touch.

Tapbots are utility robots for iPhones, iPods, iPads and Macs. Here’s designer Mark Jardine of Tapbots from an interview with Aarron Walter whose work on emotional design I’ve presented several times in this blog of late:

The whole UI concept was really inspired by the movie, Wall•e. They were designed in a way that you could practically guess their function by the way they looked. I really loved that. So when we set out to design Weightbot, I wanted it to resemble a typical weight scale. With Convertbot, we wanted it to feel like it was in the same robot family, yet was designed specifically for the purpose of converting units.

Our concept for the first 2 apps was selling our apps as if they were physical robots. That’s why the icons resemble the interface. We also gave the icons eyes to humanize them a bit. But we use this idea as a selling point and not to distract the user in the actual app. We want our apps to be used seriously, but also give the sense that they are more than just a piece of software.

We did want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do. When I switched to the Mac (from Windows), I began to appreciate software design and found great joy in using software that was carefully crafted. Our goal was for everyone to be able to feel like that about software.

Ogden Nash’s “The Duck”

I had hoped to post again about emotional design for web sites but I’m delaying that a scosh. So now for something somewhat different:

The Duck

Behold the duck.
It does not cluck.
A cluck it lacks.
It quacks.
It is specially fond
Of a puddle or pond.
When it dines or sups,
It bottoms ups.

Ogden Nash

Cognitive contrast: Ricardo Mestre’s duplos.org

I continue with Aarron Walter on contrast Designing for Emotion (2011, A List Apart). On page 25, Walter cites this site by web designer Ricardo Mestre as an example of cognitive contrast:

Mestre’s design doesn’t follow a strict grid; it’s organic. The rich textures, unrefined edges, and layers of flat shapes make it feel more like elegant paper craft than a website. The purple monster that darts from behind a tree and the humorous copy create an emotional imprint on his audience, making this portfolio unforgettable.

Ricardo Mestre's web site

Aarron Walter cites Ricardo Mestre’s duplos.org as an example of cognitive contrast.

It’s better to visit Mestre’s site as the image above doesn’t capture the entire interactive experience.

Microsoft Office’s Mr. Clippy as anti-inspiration for MailChimp’s mascot

Mr. ClippyMailChimp mascot Freddie Von Chimpenheimer IV

Now I resume the topic of the post of 8 April 2013 on emotional design regarding MailChimp’s mascot Freddie Von Chimpenheimer IV. I quote extensively from Aarron Walter’s Designing for Emotion (2011, A List Apart, pp. 60-61):

Remember Mr. Clippy, the cartoon assistant in Microsoft Office from 1997 to 2003? He inspired uncontained vitriol from users because of his poor timing. While writing a letter in Word, Clippy would slide onto the screen and ask, “It looks like you’re writing a letter. Would you like help?” The general response people had was, “Get the hell out of my way you bloody pain in the backside.” (That’s the polite version.) Blocking a user’s workflow is always a bad idea.

Clippy was our [MailChimp’s] anti-inspiration. We wanted to achieve the opposite of what he did in Microsoft Office. We never wanted Freddie to provide feedback about the app, deliver stats, or tell you when something has gone wrong. He’s not there to help. He’s simply a layer of fun that enhances a usable workflow, and above all, he has to stay out of the way of our busy users.

Because his greetings are randomized, there’s a little surprise awaiting users around every corner of the app.

We had a blast coming up with ridiculous greetings. Initially, we did it to entertain ourselves. Sure, we recognized humor as an important part of our brand that sets us apart from our competition, and we wanted to let our personality shine in the app experience. But the truth is, it was fun to write copy for a talking primate and we were just a touch self-indulgent.

When we launched the new version of the app, we discovered curious things about Freddie’s influence on the user experience. At first we saw tweets (FIG 4.8 [not reproduced here]) about how his greetings brightened the work day.

But what really surprised and excited us was that the random jokes actually helped users complete, long, more complicated task flows (FIG 4.9 [not reproduced here]).

“The Elements of Style” applied to analytic design

As a student, I imbibed many of the lessons in William Strunk Jr. and E.B. White’s The Elements of Style  and tried to get them to flow out with the ink of my pen or printer. The book concentrated guidelines on grammar and writing style into its few pages advising to omit needless words or warning of commonly misused words or expressions.

Edward R. Tufte’s The Visual Display of Quantitative Information   has been likened to The Elements of Style.  Tufte notes that we spend years educating students how to write and that newspaper articles, for example, are written at a relatively rather high level, whereas students get scant training on how to present graphical data. And the quality of graphical presentations and the common understanding of them reflect that lack of investment. Tufte, who has self-published for decades, produced several other similar, somewhat redundant, books on analytical design. While these do not deal primarily with web design, and while there are important differences between design for the web and design for other media, much of what Tufte writes does apply to the web. Tufte’s readers will learn why he dislikes pie charts and three-dimensional pie charts even more. They can also view his re-designs of some basic chart types while learning his philosophy on graphical design.

Strunk and White advise to omit needless words; Tufte advises to omit needless non-data ink. There is more to Strunk and White and to Tufte than that, but that’s not too bad of a start.

Elegant (non-web) design: the Falkirk Wheel

Here’s an example of elegant design apart from the web: the Falkirk Wheel near Falkirk, Scotland. I’ve not looked into any of its political or financial considerations and for all I know it could be a dud from either or both of those perspectives and others, too. It is a rotating boat lift connecting the Forth and Clyde Canal with the Union Canal and is very different from the locks of the Panama Canal which serve much larger ships. Don’t you think it is neato?

Responsive web advertising

Alvaris Falcon’s The Responsive Web Design War Strategy  enumerates five disadvantages of responsive web design while also discussing some benefits of that design approach which offset or partially offset these disadvantages. Among the five disadvantages is that responsive web design disrupts (a trendy word, like the expression game-changer,  isn’t it?) most web advertising models. The solution, he suggests, is to become responsive with web advertising, too. Falcon credits an illustration from Mark Boulton who has this piece from 15 November 2011 on responsive advertising.