Any application is composed of several mini-tasks and it’s always useful to break up the interface and look at all the features/tasks seperately and see if they’re completing their respective circuits in their communication with the user.
I like to see 3 components of this interface dialogue with the user: Inform, Input and Output.
Here’s a small infographic I prepared that might help in viewing from a bird’s eye, the tasks that you perform in a user interface.
So we’re shifting to our new office here and this is the greeting that we sent to all. Of course Mario’s reached Hauz Khas Village but there’s no princess waiting there (sigh).
We all need information on new systems to find our way through. Be it physical products or even non-physical, vis-a-vis web/mobile-based products. Most information providing booklets/pamphlets/brochure perish after their job has been done, as wiping papers are crumpled sheets on the road. What’s worse, most don’t even get a complete scan by the people they’re supposed to be properly read by, even though they contain some very important information.
The problem that we were trying to solve was very similar and in a way, a little tough because the general literacy and awareness levels of this section are low and convincing them to retain a piece of information, specially something that has no real utility after being read, is very tough. The specific problem was to help understand job seekers how babajob can help them find jobs and make them keep this piece of information. So we came up with this solution.
The solution is simple. This card helps the job seekers use it in 3 ways:
1. Reading and understanding how babajob works for them.
2. Using this as a debit card/pan card holder.
3. Using it as a calendar.
Ok here it is! Your own free to use web stencil, and this is first of many, which means stencils for iPad, iPhone etc are on the way. Also in store is some more cool stuff to help you create neat and fast UI sketches and wireframes. Download this file, print it and start sketching your UI easily using the grid!
Read MoreThe windows phone 7 is an example of great craftsmanship, not only when it comes to the technology but also looking at it as a piece of well designed software. When I say well-designed, I’m talking about not only the user interface, which is smartly and entirely set in Segoe WP, but also something else that makes it stands miles above many other phones/applications that have been seen in the recent times – It’s animations and transitions.
I could go on talking about why it takes an edge above the iPhone and Nokia, having used it for a considerably long time now but this post is limited to discussing only (and only) the animations of this wonderful phone. Let’s take a look.
Making a strong statement about the beauty of animations in a device (or for that matter, even a movie) would be a little vague and unsubstantiated without talking about it in the reference of the principles of traditional animation, laid out as (almost) rules by Disney in their book The Illusion of Life: Disney Animation.
The book and its principles have become generally adopted, and have been referred to as the “Bible of the industry.” In 1999 the book was voted number one of the “best animation books of all time” in an online poll. Though originally intended to apply to traditional, hand-drawn animation, the principles still have great relevance for today’s more prevalent computer animation. [Thank you, wikipedia]
I’ll describe here, what I saw in the WP7, as examples of a brilliant use of most of these principles:
1. Squash & Stretch
2. Exaggeration
3. Arcs
4. Anticipation
5. Secondary Action
6. Follow through & Overlapping action
7. Solid Drawing
8. Slow in & Slow out
9. Staging
10. Timing
In general, notice how the menus and items move around, appear and disappear in the WP7 interface. This is calculated timing for the perfect viewing experience.
11. Straight Ahead vs Pose to Pose
I couldn’t notice any examples of this principle. Could you?
Read More
The short cartoon strip
This cartoon came as a part of some print work that’s been happening for babajob.com. The aim is to convince people to believe that simple mobile solutions can help change their lives. The strata that is under the umbrella is at the bottom of the pyramid and he real challenge is making them understand the concept behind a certain mobile application.
As a technology, this might be considered unapproachable and hard to deal with and there lied all the challenge. This was made simple by Mercedes (Associate at Babajob), who provided the hand renderings and later, when there were sequences for the dialog as embellishments.
The constrain that I faced was that these print-outs due to a restricted budget were to be printed in black and white only. This meant a little boredom but some more experimentation pouring in. I realized shading would be fun as grays would be the only tool at hand.
Anyways, here’s the result (almost all). Hope it works!
Read More
<