Monday, 18 July 2011

Experiences at an Airport

Airport is a place, where we are bound to come early for Check In and other formalities. As I reached Bangalore Airport and Delhi Airport 2 hours earlier to the scheduled departure, I wandered around and wondered.......



Some of my observations:
  • People go around looking for something new and exciting around the airport
  • A BMW kiosk was the center of attention. The Kiosk displayed BMW cars and at the bottom gave information about the airport.
  • Many people were also going through the display of clothes by many Fashion retail houses like Tommy, DKNY etc. Interestingly I could not find even a single person buying or even trying out the clothes. But, some people were buying small accessories, chocolates, sweets and  most of the people bought eatables and food items.
  • Regarding food items, I have observed that people are increasingly buying packaged food to be consumed on flight. This is becoming a phenomenon after low cost airlines have become a rage. These airlines do not provide "free" food on flight, so, I believe people find a wider variety and better deal on airports rather than on flights.
  • Foot Massage chairs are usually kept for demonstration in malls and were available here at airports too. Noticeably, only a few use the chairs available at malls but at the airport, there was a queue to have a demonstration for the same.
  • As soon as the newspapers came in, everyone jumped on them. Almost everyone picked up every newspaper daily possible. As I watched a couple of people, they browsed through the spicy parts of the newspapers and then kept them aside. Only a few went on to read some news articles in details. All such papers went into either waste baskets or got collected by an airport staff (I think to be sold in junkyard).A few people also saved the newspapers for the journey.
  • When we got onto the flight, just a 2.5 hours journey, the observations were even more interesting.
    • Most people fiddle around with every object around them
      • The flight magazine
      • The safety manual --> Some keep it back as soon as they pick it up, dejectedly, but others pick it back to read.
    • People cannot make any calls using their mobile phones on flights. But, they keep playing with the device, just in case it would come alive and get them some entertainment (engagement)
    • Alas, some people start small talk with their neighbors over silly things such as: how rude was the airhostess, weather, India etc.
  • When we touch down, then somewhere in the back of our minds is there a tiny doubt over our luggage: Will we get it back? When will it come? Is it broken? 
  • Public transport and public transport information from the Airports is still not all that great, although we get some options: Buses, Taxis, Metro, Shared Taxi, Autos, Shared Autos; but the challenge is in identifying what suits my needs best and how to know about it. 
I believe, Airports provide a lot of opportunities, and the opportunities are even more attractive because of one major reason:
  "People are actively seeking for solutions!"

Do share what other opportunities come to your mind, or what other observations do you make while in an Airport?

Friday, 15 July 2011

Signage: A True Global Language

Walking on the streets of Phuket, unbelievably thirsty, of all the Andaman Sea water around me, I wanted a fresh water tap/ bottle and I spot a familiar water tap sign. What a relief!!! A foreign country, an unknown place, language differences and a sign that is literally water to thirsty!

Signage is any visual graphics created to display information to a particular audience. It is a crisp information display that can be globally understood. The most common places for display are Roads, Hospitals, Public Places, and Airport. Signages are designed with smart appropriate usage of following elements:

Shape: The various needs lead to range of shape. Rectangular -the most commonly used shape appropriate to display information. There can be a picture and text to convey the message within the shape. Triangle, Square, Hexagonal, Circle, Oval, Block arrow are other shapes used across the world.

Color: The basics of color psychology using red to show stop, danger; yellow for Alert; green- positive sign to give permission. Various background colors example white, yellow, and black to enhance the graphics, text used in the sign.


Fig 1: Shapes and colors for signages

Pictures/Graphics/Pictograms: A sketch, outline or picture of known objects, Graphics of relative things and beings. Adding graphics to signage’s helps in relating the sign.

Text: Alphabets, alphanumeric characters are used in signages. The usage of variety of font types, font size, Font colors. The text can be country, language specific.



Fig 2: example showing signage’s by combination of the elements

These elements can be used together in various permutation and combination for a Signage Design.

There are different types of signage’s to serve variety of purpose. A signage can be to direct the person to the right information, guidance, Branding. Based on the purpose it serves, broadly signages can be:

Street/Traffic Sign: Seen in every part of the world. Used to identify traffic roads, traffic rules, types of roads.
Fig 3: Traffic Signs


Banner Sign: Banner is a flag or other piece of cloth bearing a symbol, logo, slogan or other message. Banners are used mostly for advertisement, Marketing.

Commercial,Public Places signage: These are pictorial or brief text signages used in various commercial, public places. These signage’s help to identify the required information.


Fig: 4 Signage’s example at Public Places

The Usage of the signage’s helps in finding the way, expanding the information reach beyond language and cultural barriers.

Thursday, 7 July 2011

Dissecting Discipline of Designing Experiences

Often I come across different viewpoints on Experience Design discipline about what it is and what exactly experience designers do. The executioner’s (in software business) school of thought is that experience design is the practice of designing technology products and services (each of which is a human experience) based on the consideration of an individual's or a group's needs, tasks, desires, beliefs, knowledge, skills, experiences, and perceptions. Thus, it results into achieving certain user goals and leads to a successful system acceptance by users.

The other school of thought is more at an abstract level that defines experience design as a discipline of designing mental journeys that leaves the customer with memories of having performed something special, meaningful, engaging, with sense of achievement or just fun and entertainment.

Like any other discipline, I think experience design can also be understood as an organized production system that is about creating output in the form of desired experiences using available inputs such as knowledge and ideas, and finally using resources in the form of design processes and skills.


Let’s take an example of thematic restaurants. Today, food is more of an experience rather than a necessity, as only a minor part of the average income (approximately 10 per cent) is spent on food.

Dining is a combined body and mind (sensory) experience and has aspects of culture and society. The body tastes, smells, sees, hears, feels and digests the food. The mind reads the food consciously and unconsciously in the form of activated emotions and memories.

Theme restaurants are cautiously designed to deliver customer experiences by influencing customer’s state of mind with the right ambiance, environment, lighting, music/live performance, and personal service on top of the food served to stimulate emotions like happiness and so on. A great deal of skills and processes are required to accomplish delivery of such desired experiences in the restaurant business.

Another example could be watching theater, which is another form of immersive experience thoughtfully crafted for audience. The stage performances are scripted around a theme to entertain and educate audience (selective sometimes) by stimulating emotions such as anger, happiness, surprise, confusion, and more.

The two examples mentioned above can help us dissect different aspects of organized experience delivery system.



Core Activity
The core activity is what a customer wants to accomplish as a task or an activity. For example, watching a play in a theater or eating in a restaurant.

The Concept (or the ‘Feel’)
The core concept is the theme that the customer admires and what the product stands for. For example, a concept “Happiness is in small moments of life and must be shared” is the theme of Unilever ice cream brand and is well translated into the design of ice cream packaging and ice cream vending machine designs where in a customer is delivered ice cream when he/she smiles into the face recognition system. See demo

Peripheral Experience
Peripherals are supporting experiences (part of the overall customer experience) to which a customer initially pays extra emphasis. For example, the way seating is arranged, welcoming gesture at the entry, cleanliness, and so on.

Core Experience
Core experiences are activities in which a customer gets involved physically and mentally. For example, taste of the food, dialog delivery of an actor, sound and music and so on. Developing core experience is a skilled job and the output is actively consumed by customers. However, core experience cannot be appreciated without a good theme.

Support Services
Support services are materials such as cutlery, menu, and order delivery that are used to accomplish the core activity.

Such a dissection would help in understanding design and delivery of experiences. In my next blog I will make an attempt to explore how a similar approach can be applied in design for software applications.

How to Design sized web content for Mobile web

Previous post highlighted some of the guidelines that will help, while designing for mobile web.
But if we specifically talk about iOS, then it has capability of displaying content designed for desktop. So same content can be used across devices.

iOS displays existing web content in two ways, it can display the web content on the screen resolution of the device or it can render the page at the actual size of the page and then "zoom out" to fit the page on the screen of the device. This virtual screen is called "Viewport"

What is Viewport?

It can be defined as the rectangular area ( screen) where the content is displayed.

Image below displays the "Desktop Viewport" and "Viewport on iOS"

















For most of the devices the screen resolution and the display size are equal to the viewport. This thing is applicable in case of desktop , laptops etc, but in the case of mobile it is different. Many pages on web, wont render well on all phones, at their screen resolution. In order to render all the pages well, mobile phone render pages on the virtual resolution and then scale them down to fit on the screen of the device.
For example: In iOS the device screen width is 320 pixels and the viewport size width can be 980 pixels, so in this case, the webpage with 980 px width, will fit perfect on the screen.


Viewport Meta Tags

Safari on iOS displays almost all the pages well, that are designed for desktop. If this doesnt work then you need to change the settings by configuring the viewport. Configuring the Viewport is easy, just add a line of HTML to your webpage. It is basically done through viewport meta tags. Typically viewport meta tag is used to set the width and initial scale of the viewport to improve the presentation of the webpage. For example : if the width of your webpage is less than 980 px, then you should set the width of the viewport to match the width of your webpage.

"Viewport meta tags are basically used to configure the width and the scale of the viewport"

If your webpage is narrower than the default width, then set the width of your viewport to the width of the webpage, as displayed in the image below:





















Viewport settings for Web Applications

If you are designing web application specifically for iOS, then the recommended size of your webpage should be the size of the iOS. Apple recommends that set the width as “device-width” so that the scale is 1.0 in the portrait orientation and it doesn't change when the device is in landscape orientation.














Configuring the viewport helps resizing the web content for the device. But it will not be able to give a good user experience every time, because in some cases text will not be readable, user has to zoom in, zoom out , scroll a lot, in order to read the content, reach the targeted link etc.

Wednesday, 6 July 2011

Content Design guidelines for Mobile web

While creating a website the first thing that a designer decides is the appropriate dimensions for it . But when it comes to mobile, the resolution and dimensions are not fixed. They are changing very rapidly, also the lifespan of mobile devices are much shorter. The constant release of new mobile devices also adds to mobile device resolutions. So this wide variety of resolution, makes it difficult for designer to select an appropriate dimension to work on.
























Figure1: This is a very limited list and not complete. It is just to give an idea about the resolutions.


To answer this problem, we need to create layouts for specific collection of devices. These layouts changes depending upon the resolution and orientation of a device, in order to enhance the experience on mobile.The main reason of this mobile resolution specific experience is the “one web” approach to the web design.

…One Web means making, as far as is reasonable, the same information and services
available to users irrespective of the device they are using. However, it does not mean
that exactly the same information is available in exactly the same representation across
all devices. The context of mobile use, device capability variations, bandwidth issues, and
mobile network capabilities all affect the representation. Furthermore, some services and
information are more suitable for and targeted at particular user contexts…

Guidelines for Designing for Mobile web

Many of these guidelines will improve the reliability, performance, look and user experience of your webpage, on all mobile platforms.

Simple
Users on mobile, quickly want to get the desired information. So mobile site should be simple than the standard site. Standard site is already simple, simplify it further more, to optimize it for mobile. This may include re doing the menus, removing images, breaking texts at certain places etc. You need to simplify the site from design and functionality perspective. Make sure that everything presented on the site should be simple, readable and useful.

Example





















Lightweight

Use lightweight graphics for mobile site. Even it is good to use a simple, separate mobile theme for mobile site. Mobile theme means you can actually consider how user are using your site and then optimize it for mobile accordingly.

Example





















Use Columns and Blocks

Use columns and blocks to layout your webpage like many online newspapers. If the content on a webpage, cover the full width with content, then it generally becomes difficult to read. Columns and blocks breaks the webpage into parts, thus making it easier to read and also allows user to double tap on objects on page.

Example





















Limit Page Length

Include as much content from your actual site as practically possible. But include that too a limit. Don't make the user to scroll too long , to view the complete page. In a touchscreen phone its still easier to view a longer page, but also think about a user with a keypad based phone. Break the content into parts, use pagination etc to avoid long scrolling.


Don't use pop ups or open new window

Do not use pop ups or open new windows, while browsing a website on mobile. As it can infer between the browsing experience.


Don't rely on flash or java script
Not all phones support flash or java script. And if some of the phones support, then it is not sure that its the latest version. Make sure that content on your mobile site is plain HTML/CSS, otherwise large content of your site will be on risk, if users will not be able to access it.


Limit scrolling to one direction
It is really annoying when user has to scroll in multiple directions, while browsing through a site. And this become worse, if user has to browse that over a mobile phone. Limit your browsing to one direction (vertical) to give a better experience to the user.

Example





















Link to the Standard site

Whatever platform users might be using, they might want to see the standard site, as nowadays many smartphones, i phones are capable of presenting the desktop site as it is. Always give a link to the main site, it can be link it the footer. It should also allow the user to go back to the mobile version from the main site without using back button.

Example





















Size and Sequence

Plan the proper sequence of the content on your site, depending upon the importance of the content, buttons, navigation links etc. Interface should also be designed keeping in mind the touchscreen interface, where buttons, click able links should be bigger.

Example






















References: noupe.com , UX booth, cyberdesigz.com