The global mobile app market is poised to grow to $52 billion by 2016. Smartphone penetration is at an all-time high (sales increased by 42.7% to 154 million units). The mobile app market will mint the next generation of technology millionaires. There are more than 680,000 apps currently in the Apple app store, with nearly 375 being added every day. The market is enormous, the opportunities even greater. But the obvious question is: What makes an app successful?
The answer is a combination of an innovative idea, solid engineering, and brilliant design. But there’s something greater than this combination that determines an app’s success: its aesthetic moorings. How the different elements in an app come together can be vital in shooting it to the top of the charts. Here, we take a look at the aesthetics of some of the top apps in the Apple app store and learn from their example.
Bad Piggies
Rovio’s latest offering was destined to be a success even before it hit the app store. With the Angry Birds pedigree and positive media buzz behind it, Bad Piggies was off to a flying start (pun intended).
From anecdotal evidence (I’m afraid I don’t have numbers to back this up), the piggies were more popular than the bird characters in Angry Birds. My nephew, all of 5, would constantly badger me to explain why these mean looking birds were trying to kill the cute, fat piggies.
Rovio understood this and based the next installment in the Angry Birds franchise on the pigs. In fact, looking at the game branding, you’ll be hard pressed to find more than a handful references to the birds.
Consider the icon:
And the splash screen:
Looking at these screens, you would hardly know the birds even existed in previous games. This shows Rovio’s increasing confidence in the strength of its own brand and its products, which don’t need to piggyback (again, pun intended) on past successes. We also have to keep in mind Rovio’s plush-toy line (which is set to top $400M in sales this year).
Let’s drill down a bit further into the game:
Pigs abound, in the icon, the home screen, the logo, and of course, the game. I especially love the neat little touch of ‘pig-noses’ for the dots in the i’s.
There’s an overabundance of green, which is befitting given the green color of the pigs. Bad Piggies is a good example of how different hues of a single base color can be combined to create the illusion of depth. Nowhere is this more apparent in the home screen:
Small details work together to create a memorable experience. The pig’s eyes follow your finger as you create the airplane. The pig’s expression of sheer joy as he rolls down a slope, and the way he celebrates a victory stays with you for a very long time.
Bad Piggies is sitting at the top of the app charts right now not only because it is a wonderful game (arguably the finest in the entire franchise), but because of its unique creative vision.
What we can takeaway from Bad Piggies:
- Give your brand room to breathe. Prioritize the user experience instead of shoving your branding down people’s throats.
- Variations of the same basic color can create a powerful visual impression and the illusion of depth when used right.
- When creating games, character quirks matter. Little details can elevate your character from the good to delightful. Rovio is one of the best company to follow when creating characters: from the birds to the piggies to Amazing Alex, each of its characters is unique and instantly recognizable.
- Character-centric games must put their character first in all branding material: icons, splash screens, etc. This was true with the earlier Angry Birds games, as it is true with Bad Piggies.
DMD Panorama
DMD Panorama is an incredibly popular camera app that lets you take panoramic pictures on your iPhone or iPad (iPhone 5 has native panoramic picture capabilities built-in). The app has been downloaded more than 4 million times and is made by a Lebanese company called Dermandar.
Let’s dive a little deeper into the app.
The Icon:
The icon borrows from a popular template that is used by a majority of top camera apps. The icon itself doesn’t give any indication about the brand, or the app’s capabilities (unlike Rovio’s example above, which placed its game protagonist right in the center of the icon), but it is highly detailed and pretty enough to arouse interest.
A surprisingly high number of apps in the photo/video category utilize similar camera icons:
The writing on the wall should be pretty clear: When making photo and video applications, a high resolution, vividly detailed camera icon is as safe a bet as any. It uses the familiar (even nostalgic) imagery of a clunky, old-fashioned camera to lure in visitors, and gives them a fair idea of what to expect from the app.
DMD Panorama is very lightly branded. The only time you’ll see the app manufacturer’s name is on a blink-and-miss-it splash screen. After that, you are thrust straight into the experience. In this regard, the experience is very minimalistic, as compared to some other paid camera apps.
The home screen gives you the bare minimum of information required. I actually had to play around for a while before I understood how the panorama functionality works.
Blue is the dominant color, and the app has just three buttons right at the very bottom (giving first priority to the camera itself).
The gallery page is, again, blue with only a handful of buttons:
It is interesting to note that the bottom and top buttons have been scarcely modified and are your standard iOS buttons. Dermandar hasn’t tried to re-invent the wheel. All the icons do exactly what you expect them to do.
A blue bar at the bottom of each image notes the image’s title, and gives you options to add a geo-pin, change the image title, and share it on social networking sites.
The gallery background is blue, with a center gradient and a diagonal pattern.
It is visually unimpressive, but keep in mind that this area will get filled up with pictures as you take panoramas, so most users won’t take more than a few looks at it.
What we can takeaway from DMD Panorama:
- Create beautiful icons. High-resolution images work especially well. Align the icon with the category/niche of the app. The icon is the first thing app store visitors see; dazzle them with brilliance.
- Don’t reinvent the wheel. Stick to the tried and tested iconography.
- Focus on the user experience, not the app. DMD Panorama puts the camera before the UI or even the brand.
- Re-use standard elements if possible. DMD Panorama doesn’t mess around with standard buttons and icons because it doesn’t need to. It customizes mostly the portions of the app that will be used heavily. This saves time, doesn’t confuse the user, and allows for fast prototyping.
- Not everything needs to be perfect. DMD Panorama’s gallery background, for instance, is amateurish. Yet, it can get away with it because the background quickly gets filled up with images. Your time is sometimes better allocated to finishing off the product than obsessing over trivial details.
Maps+
Enough space has already been devoted to the debacle that was Apple Maps. To put it bluntly, Apple Maps is downright unusable, so much so that Tim Cook himself had to issue an apology. Sure enough, a lot of entrepreneurs jumped on the opportunity and updated their maps apps just as consumers were beginning to look for better alternatives. One of the top free alternatives is Maps+, which utilizes Google Maps but adds a few bells and whistles of its own.
Let’s take a deeper look into this app.
The Icon:
A confession: I wasn’t actively looking for a maps app when I stumbled upon Maps+. It was ranked quite high in the app store and the stunning icon design caught my eye immediately. The icon uses familiar iconography of a compass to indicate the purpose of the app. It’s subtle yet effective. The glossy compass against the blood-red background catches the eye. Little wonder that Maps+ is doing so well.
Digging further, the Maps+ app is an exercise in minimalism. There’s no overt branding, no ostentatious splash screen. You are directed straight to the map with a little icon in the bottom-right corner between you and the experience of exploration.
Tap the icon, and a menu pops-up, giving access to the many different functionalities of the app. It’s a supreme example of immersive, unobtrusive UI.
Through this menu, you can create alarms, routes, pin locations, geo-locate tweets, and access the settings menu. A standard ‘i’ icon serves as the help button to guide you through the menu, but the UI is intuitive enough to make it superfluous.
In the main menu, you’ll find an arrow pointing to the ‘Edit’ button.
Tap the edit button, and you can drag different features on the four corners of the map for even faster access. It’s ingenious UI design that preserves the minimalist aesthetics while offering users an easy way to customize the experience.
Of course, Maps+ is a commercial product. The makers have placed strict limits on how many times you can use a feature. Every time you exceed the limit, a notification pops-up to urge you to upgrade to the paid version.
Maps apps are a dime a dozen in the app store, yet few work as well as Maps+. It doesn’t try to complicate the entire experience by cluttering up the UI or diverting your attention from the experience of using the map. All the elements, from UI to icon design to even monetization work together to create arguably one of the best maps experience on iOS.
What we can takeaway from Maps+:
- Less is more: not every app needs loud branding and snazzy graphics. Sometimes, it’s better to let the core functionality of the app – in this case, maps – do all the talking.
- Spend time on your icon design – I really cannot stress this enough.
- Embrace minimalism. Hide all but the most essential elements of the app.
- Build with monetization in mind. After all, making apps is business, not charity.
- Give users the power to customize the app experience, without destroying the integrity of the UI.
- Great design is intuitive. If you have to explain what each button does, you may have already lost the user’s attention.
- Great design is also cohesive. It is the coming together of diverse elements to create an enjoyable, fulsome experience. Well-designed apps leave you with a feeling of satiety.
Final Thoughts
Many things must work together for an app to be successful, but you won’t go wrong by focusing obsessively on design. Observe as much as you create; the best way to dethrone the top apps from their thrones is to learn from and improve on their successful elements. iOS is a very visual experience. A well-designed app often trumps a poorly designed, but feature rich app. Be obsessive about details, and embrace a design ideology – minimalism, kitsch, etc. – and stick to it with passionate intensity.
0 yorum:
Yorum Gönder