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.
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:
Behold the duck.
It does not cluck.
A cluck it lacks.
It is specially fond
Of a puddle or pond.
When it dines or sups,
It bottoms ups.
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.
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.
Today I again return to Aarron Walter’s Designing for Emotion (2011, A List Apart). On pages 22-28, Walter discusses contrast. On page 22, he identifies two ways in which we perceive contrast:
Visual contrast: difference in shape, color, form, etc.
Cognitive contrast: difference in experiences or memories
Today I’ll only further explore visual contrast. Walter (p. 23) provides a sign-up screen from Tumblr as an example of effective visual contrast. I provide a slightly different sign-up screen than Walter does, one I captured from Tumblr just minutes ago:
Tumblr’s sign-up screen is an excellent example of effective visual contrast.
Walter says that by eliminating extraneous content, the site simply introduces the product and the less distracted user is more likely to sign up with Tumblr (pp. 23-24):
The high visual contrast in negative space against the large, central form makes it easy to understand what this site is about and what action Tumblr expects.
Page simplicity also helps potential customers to perform a basic cost-benefit analysis, a regular activity that our brains engage in after contrast scanning. The short time needed to fill out the form is a low cost to pay for the potentially large benefit of the service, making conversion highly likely.
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]).
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.
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?
I just thought of the kidrobot logo after seeing that the MailChimp mascot is getting kudos for its effective design. Certainly the kidrobot kid is punkier than the cutesy, Curious George cousin, Freddie von Chimpenheimer IV as the MailChimp mascot is known. But the MailChimp mascot is kept somewhat out-of-view at MailChimp.com. Maybe I’ll re-visit this topic soon.
Marko Dugonjić uses face detection via your webcam to evaluate your distance to the screen and adjust the layout. Perhaps he’s being too modest in describing the idea as it could be applied to the entire layout, not just the typographic aspects.
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.