Localizing the globe

You have probably seen this at the beginning of a movie:

I am always caught by surprise when the globe stops spinning, expecting to go further. Watching it closely, I realized why: it stops at the Americas. I grew up in Hong Kong, where world maps look like this:

Flickr: planetutopia

What's special about it? The center of the map is the Pacific Ocean. In my mind, that is the focal point of the globe, so I felt unsatisfied when the Universal globe stops spinning at the Americas.

I found it ironic that the globe, being the obvious icon for a global society, is actually usually localized. And today I found a delightful case of a localized globe - the notification icon in the top right corner of Facebook:

I never paid much attention to it, but my friend Corey is visiting Sweden, and noticed that her icon changed from showing the Americas:

To Europe, Africa and Asia:

Very subtle, but very cool!

The Importance of Being Whimsical

What makes a good app? Sure, it should do what it claims to do, intuitively and efficiently. But that is just the base line. How do you stand out from the sea of apps? You need to go above and beyond, and whimsy may just be the secret ingredient you need.

Tumblr

At the keynote at AnDevCon Boston, Chris Haseman and Zack Sultan showed us how they designed and implemented the Tumblr app. They shared many tips and tricks to make your app look good and work well, but the recurring theme is to delight your user.

There are many whimsical touches to Tumblr, one being the pull-to-refresh animation:

Tumblr could have gone with a loading text or a standard spinny, but this custom animation brings the app a notch above others. It entices users to refresh more, increasing engagement. This is the power of whimsy.

Welcome animations

Animation is a great way to add whimsy to your app. At AltWWDC, Ben Johnson showcased many different apps with effective animations.

This is the welcome page of the Just Landed app. The subtle movement of the plane and the clouds hints to the users that there is more to come, encouraging them to try it out. You can argue that this is gratuitous, nothing more than eye candy. It adds no functionality to the app. But apps are not just about functionality. You need to connect with your users, make them feel good using your app. A delightful welcome page sets the stage for the rest of the app, and helps them stay engaged.

Reward your users

What’s happening here? You’re in the Zappos app, thought these sneakers look good, and pressed the "add to cart" button. A cat floated out, dropping the shoes into your cart Mary-Poppins style. What’s your reaction? Cool, I want to see that again. How? By adding more stuff to your cart! A whimsical gesture that directly increases the bottom line. I doubt anyone can call that gratuitous.

Whimsy everywhere

So you want to be whimsical. What to do? Whimsy hinges on unexpectedness, so it's a bit of an oxymoron to provide a formula. Fortunately, you have already taken the first step - awareness. Once you start paying attention, you will see whimsy everywhere, adding them to your repertoire, ready to inspire your own.

The other day I found whimsy in the most boring place of all - airplane safety video.

The video caught my eyes with a teeny tiny suitcase that got stowed under the seat. I found myself looking forward to more funny shots, and paying attention throughout. If you graph the whimsical moments, you can see that they frontload them to set the tone:

Once you are hooked, they get down to business and show you some serious content. Just before you get bored, they sprinkle a bit of whimsy again, keeping you on your toes, watching the whole video looking for more.

Unpredictable delights

It was said that we are addicted to emails because they are like slot machines. Most of the time you get nothing, but once in a while you get something awesome, and so you keep playing, in hope of hitting jackpot. Whimsy does the same trick to your app. It delights users in unpredictable ways, keeping them engaged, and separates your app from the herd.

Graphic Design for Engineers

I have always wanted to pick up some basic image editing skills to pretty up my apps, but never managed to stare at the Photoshop interface long enough to achieve anything. I talked to a few of my engineer friends, and they have the same problem, so I decided to organize a workshop. After asking around for a while I convinced my friend Tara to teach the workshop, and announced it to the CodeChix community. Terri saw the announcement and volunteered to teach as well. Super!

Last night was the workshop. Color generously provided the space for the event, which was awesome.

Rupa and Crystie did an introduction on CodeChix, and handed it off to Tara and Terri.

Rupa

Crystie

Tara and Terri prepared a cheatsheet for us with a bonanza of information. We first went over the basic controls, which was very helpful. For instance, I could not find the fill bucket to change the color of my selection. Guess what, it's hiding under the gradient button!

Tara

Terri then taught us something super powerful: Custom Shape Tool. Photoshop has a library of vector graphics, so if you need a cat in your app, head right over to the Animals section and voilà, you have a cat. With that, Terri went on to teach us how to make a button:

1. Select the Rounded Rectangle Tool. Click, hold down the shift button, drag to make a square.
2. Select the Custom Shape Tool. Choose a shape. Click in the middle of the button, hold down the shift and alt buttons, drag to center the shape in the button.
3. To change the color, click on the color patch on the layer with the shape. If you want to choose a color from a selection, use Window → Swatches.
4. To change the size of the shape, press command-T. Holding the shift key, drag one of the corners. The shift key make sure that the shape maintains a fixed ratio. Otherwise you may get a very fat cat.
5. To make it look like a button, double click on the layer for the button background. Check "Bevel and Emboss" to enable it. Select the item (the background will be highlighted) to change the parameters.

We also went over some other tricks like constraining one shape to be within another, using Kuler to come up with a color scheme etc. Finally, we all used our newly-acquired skills to make a mock up for a mobile app.

Tara and Terri did a really good job in teaching us just the basics so we don't get overwhelmed, but also show us the tricks of the trade so we can put them to use right away. I walk away feeling very empowered. Thank you so much!