Wednesday, April 30, 2008

The shopping list interface

I have noticed many women make a list of the items they like to purchase before they go grocery shopping. Usually they make detailed lists of items which contain the following-
  • quantity (eg: 2 cans of organic milk)
  • size (eg: 200 gms of Tide Powder)
  • brand (eg: Pantene shampoo)
Some shoppers (usually women with kids) are so organized that they prepare a list which reflect the store's floor plan. These lists are based on
  • sections/departments in the store (the items located in the front side of the store, like fruits and vegetables, are placed on the top of the list as this is what the shopper immediately sees after entering the store)
  • further drilled down to the items in that particular aisle (Under diary section, the first items in the aisle are on the top. eg: If milk is placed as the first item, the shopper will have it on the top under diary section)
This organization of the list helps user save time as they do not have to remember what's needed after going to the store and moving back and forth aisles.

What happens when these organized shoppers shop online occasionally? Most of the retail sites allow shopping lists only for returning users. But let's take this particular scenario -

Sue, 43, mother of 3 kids, who usually make the organized list while shopping, accesses the store's website. She does not have much time and quickly needs to buy few items. She know what she needs to buy, but-
  • she needs to go to that particular department, scroll through so many items and then enter quantity and add to the cart. she needs to repeat the same process for every item.
  • or, she needs to type the item in the search field which displays the results and select and again add to cart
Now what if the whole search process was made lot more simpler.
As soon as Sue entered the site, she is given an option to prepare a shopping list. Since she knows exactly what she wants, she can just start typing, exactly the way she writes the list.
The typeahead feature can suggest or help to quickly select the desired products. She can then directly checkout.

This not only saves her time (as her 3 kids keep her busy) due to the reduced number of clicks, but also help continue the offline shopping process in a much efficient manner.

Friday, March 28, 2008

Expressive Typography

Expressive Typography pays attention to physical shapes of type, and uses them as a visual element to convey emotions and not just information.

In the logo below for 'Mahabharat', an Indian epic of a war, the characters fight with each other.

Here 'M' depicts the 'Kauravs' who are trying to trample the 'Pandavs'. As the eye moves towards 'B' the Pandavas stand up for their rights and fight against them.

In the image below, the letters are positioned/ arranged in such a way to depict 'sluggishness'.


Expressive Typography can bridge the 'meaning' and the 'type' together. Eg: Jost Hochuli used a simple 'fi' ligature, to create this meaningful image of unity and integration between two countries (France and Italy).Type can also be used as a collage as shown below


Tag Clouds are examples of 'weighted list' where type depicts the most frequently visited sections of the site. Data clouds may depict varying type to suggest volume, etc.

Tuesday, December 25, 2007

How Emerging Economies influence the future of Design?

UI design started mainly with focus for the users in west. Today, with more applications and devices being sold in BRIC nations and other emerging economies, 'internationalization' has become a common term for designers. But why are users in emerging economies so important?
If you look at some stats on the net you will notice that soon the mobile subscriptions in China will be bigger than the entire population of US. The GDP of BRIC nations is increasing and there is a huge potential for spending, due to which more products will be sold in these countries.

Hence, it is imperative for designers to think of mental models of not just 'Tim Smith' but also 'Deepak Kumar'. Designers need to take into consideration cultural perceptions into their design. What is 'good' or 'normal' in a certain culture may offensive in a different culture. Eg: In India, majority of users would be offended if you ask whether s/he has children after s/he mentions s/he has never been married. But it is OK to ask a user in Europe about children even if s/he was never married. Hence, designers need to ensure while designing forms, the marital status field always needs to be before the field on children. And put the children field to 'No' by default (with an option to say 'yes' if needed).

The above example required very subtle change to make a design global. However, at times, products need to be 'localized' for a specific country as the design is unable to accommodate a big change. Or, the interface needs to be very accommodating for various countries.
Eg: Often interface design would move from left to right on the screen. But newer users also read from top to bottom (as in Chinese or Japanese), or right to left (as in Arabic). Designers will need to shift their thinking to accommodate these differences.
In this situation, the designer needs to decide whether to 'globalize' or 'localize' the interface. The decision is based on the magnitude of application and the users who will use it. User research in countries where the product will be launched will help decide this.
In the past few companies attempted to serve these markets by simply offering their existing products with minor modifications, and many failed. Few cellphone manufacturers also had to redesign their phones to make them dust resistant and add other features (like flashlight) to make them work in rural environment. The mantra for these companies has been 'Think global, act local'.