Monday, November 25, 2013

Concept teaches Viber how to design for iOS 7


Remember the absolutely eye-candy re-imagining of Apple’s clunky Messages app inMavericks, so awesomely done by Ramotion, a Palo Alto, California interface design shop? If not, stop what you’re doing (reading this) and give it a quick look, now. Some of the best UI/UX designers in the world, Ramotion’s grown just as sick and tired of Viber’s out-of-touch looks as us.
Yours truly used to be a heavy Viber user. Now I no longer care. Why? I’ll tell you why: the app’s proven itself a really frustrating experience. The soft keyboard fails to honor my system-wide international settings. It crashes a lot. It acts up far too often. As if that weren’t enough, Viber’s aesthetics fails miserably as a victim of a bunch of poor design choices – so much so that I can’t stand using it anymore. Viber really, really needs some serious rebooting.
Ramotion’s vision for Viber stunned me by being so much more than a fresh coat of paint, like WhatsApp’s upcoming iOS 7 update (screenieshands-on video) is shaping up to be. Small wonder: these guys know good interface design so I’m not surprised they’ve actually gone about re-imagining the whole app experience.
Are you ready to see how Viber’s iOS 7 overhaul should, but probably never will, look like? Just hit the jump and feast your eyes on gorgeous renders…
The trick to Ramotion’s work is research by Alan Baddeley (1982) and Nelson Cowan (2011) on the qualities of human memory and perception, which finds human beings can simultaneously perceive no more than four objects. The concept, available on Behance.net, simplifies the experience by using color gradients to draw your eyes to the attention zone, as depicted top of post.
This zone changes dynamically.
For example, on the Contacts screen the gradient concentrates your attention on four most-used contacts at the top. The awesomeness begins with a simplified registration process no longer requiring both the country code and your telephone number.
“Country code in the telephone number is enough for the app to identify where you are,”Ramotion explains.

So simple yet evidently so painfully hard to grasp for Viber developers.
The basic design principles that led Ramotion involve crisp book typography, edge-to-edge design, color gradients and black text inside white chat bubbles.

I’m loving a new keypad experience a lot! It closely follows the native Phone app so it’s easy to imagine people feeling right at home – consistency always wins.
Really, why would any app want to invent a new look keypad?
Check out the video.
Another nice-to-have: taking into account Dieter Rams’ 10th principle for good design, buttons at the top take advantage of text labels, but only during the first month of use.
After that, the labels gradually shrink as the pictogram icons grow, until they eventually disappear completely. So, as you become more experienced with Viber, the app optimized its interface to your skill level.
I’d imagine there’d have to be an option in settings to turn this behavior on and off.
Finally, in taking inspiration from Finder Tags in OS X Mavericks and shortcuts in iOS, the concept envisions something called Color Emotion Vocabulary, shown off in the above Vimeo video.

This software feature recognizes specific custom words in your chat to automatically transitions the interface to a new color scheme. Not only does the color-shifting sharpen your attention, it also helps reflect the mood of your exchange.
For example, if I’m enraged and drop the F-bomb during chat, Viber could help illustrate my state of mind by switching to a reddish appearance. It only makes sense for this dynamic color-coding to become a form of communication itself.
Viber should be giving Ramotion a call ASAP, really.

No comments:

Post a Comment