Interaction Design : Capturing the attention of First-time users
Friday, 21. September 2007, 08:07:24
For any web service or application, the VIPs are the first-time users. Make a good impression in the first page, then they will enter inside. Else, they will move away. Success of a web service business depends upon how fast you can make a first-time visitor into a user/subscriber/customer. Here is my little post based on my observations.
Human Face Analogy
In Interaction Design, Pulling the first-time user's attention is an important factor. Let me explain in simple words. Whenever you look at someone's face, what are the places you normally look at? It is the eyes and lips. Because they are the two moving parts and psychologically your mind notices and registers non-static parts. Have you ever heard anyone saying 'u know? i met a girl with beautiful forehead'? I bet, you had not. But it is common to hear 'u know? i met a girl with lovely lips'! Thats natural.
Dont let them search
Okay. Based on the similar analogy, whenever a new user visits a website or web application for the first time, make sure your page captures attention. Ensure the questions like 'what site is this?, what can i get from this site?, what should i do now? okay site opened, what's next?' etc are answered. By usability standards, a good UI should never let the user to search for information.
Highlight is a good key
So how can you make the information reach the user? A simple approach is "highlight" them. There are multiple ways to highlight a particular text, image or screen area.
- Make the to-be-highlighted text as 'BOLD' ones. Or color them or, increase the font size.
- Or use CSS and paint their background with light yellow (You can see this approach in 37signals.com).
- For images, Draw a thick border around the image. Or introduce a shadow effect. Or increase white space padding (though this closely depends upon the visual appeal)
Convey the story
From a web based product/service perspective, it is very important to convey - what this service is? and what it can do for the users. Use simple metaphors to convey the story to the users. Check out tripit.com for a clear example. The home page explains the storyline within a single shot. They use the highlighters (1) (2) (3) to capture the attention and make the user understand how Tripit works. Notice the simple metaphor icons they used. They are more like standard symbols rather than jazzy images. And then, they placed the "Get Started" button just below the (3)rd box. So if a user reads the story starting from (1), he will reach (3) and end up clicking the bright colored "Get Started" button. So this type of follow-storyline approach enhances user experience by letting the users to understand and jump start in less than a minute. Also this ensures more sign ups creating smiles in marketing and management depts.
Classify Vital, Important and Less Important information
Depending upon the product/service you are working on, you should classify the vital, important and less important information. Then promote the message/information accordingly. In tripit.com, the vital information is "how the system works?". The important information is "what is this product?" Less important informations are the Tripit news, promo information, privacy policy etc
Keep it simple, capture the attention
In any complex web UI, keeping things simple is the key to success. There may be few exceptions where you cannot implement simplicity due to restrictions posed by technology or resource. But in all other cases, keeping it simple will work. Capturing the attention using call outs, highlights etc will enhance the rate of success.
- Rajesh Sundaram
Human Face Analogy
In Interaction Design, Pulling the first-time user's attention is an important factor. Let me explain in simple words. Whenever you look at someone's face, what are the places you normally look at? It is the eyes and lips. Because they are the two moving parts and psychologically your mind notices and registers non-static parts. Have you ever heard anyone saying 'u know? i met a girl with beautiful forehead'? I bet, you had not. But it is common to hear 'u know? i met a girl with lovely lips'! Thats natural.
Dont let them search
Okay. Based on the similar analogy, whenever a new user visits a website or web application for the first time, make sure your page captures attention. Ensure the questions like 'what site is this?, what can i get from this site?, what should i do now? okay site opened, what's next?' etc are answered. By usability standards, a good UI should never let the user to search for information.
Highlight is a good key
So how can you make the information reach the user? A simple approach is "highlight" them. There are multiple ways to highlight a particular text, image or screen area.
- Make the to-be-highlighted text as 'BOLD' ones. Or color them or, increase the font size.
- Or use CSS and paint their background with light yellow (You can see this approach in 37signals.com).
- For images, Draw a thick border around the image. Or introduce a shadow effect. Or increase white space padding (though this closely depends upon the visual appeal)
Convey the story
From a web based product/service perspective, it is very important to convey - what this service is? and what it can do for the users. Use simple metaphors to convey the story to the users. Check out tripit.com for a clear example. The home page explains the storyline within a single shot. They use the highlighters (1) (2) (3) to capture the attention and make the user understand how Tripit works. Notice the simple metaphor icons they used. They are more like standard symbols rather than jazzy images. And then, they placed the "Get Started" button just below the (3)rd box. So if a user reads the story starting from (1), he will reach (3) and end up clicking the bright colored "Get Started" button. So this type of follow-storyline approach enhances user experience by letting the users to understand and jump start in less than a minute. Also this ensures more sign ups creating smiles in marketing and management depts.
Classify Vital, Important and Less Important information
Depending upon the product/service you are working on, you should classify the vital, important and less important information. Then promote the message/information accordingly. In tripit.com, the vital information is "how the system works?". The important information is "what is this product?" Less important informations are the Tripit news, promo information, privacy policy etc
Keep it simple, capture the attention
In any complex web UI, keeping things simple is the key to success. There may be few exceptions where you cannot implement simplicity due to restrictions posed by technology or resource. But in all other cases, keeping it simple will work. Capturing the attention using call outs, highlights etc will enhance the rate of success.
- Rajesh Sundaram
WIDGETIZE