Wooga, which develops “social games” and is based in Berlin, Germany, tells about realigning (I wonder if something went slightly askew in language translation) its logo in The New Wooga Logo: Realign over Redesign. The motivation is largely captured in this sentence: The logo space for Bubble Island on the iPhone or iPad is only 10×10 pixel [sic]:
Still, this paragraphs adds more:
The old logo was designed for web applications, which allowed several shades and highlights and a more complex visual appearance. Designing for mobile has to take different aspects into account: such as data size. If you small shrink the logo for mobile, the intricacies of the old design would become blurry. Wooga also uses the logo for in-game items on web and mobile and with this in mind three key factors emerge: legibility for smaller screens, reducing logo related bugs and emphasizing the existing features of the logo.
The new logo (below right) seems a touch less anthropomorphic, a touch less personified. While I slightly prefer the former, it had fewer constraints than the newer, which probably is quite satisfactory. To further reduce the logo’s footprint and perhaps loading time, some have mentioned that Wooga could eliminate the gray “W” as it is redundant.
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.
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:
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]).
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.