Upfront count display – How it helps in user awareness

We have seen numbers help users to take critical decisions and have an overview where they are headed and how they are interacting with the application.

Let me illustrate it by examples, in any e-mail client, in the navigation area, we display the number of messages sent, draft and available in the inbox. These numbers help the users to be aware about different sections of the application without being overwhelmed what number of e-mails are present.

notification

In the above illustration the number “6623” helps the user know that 6623 number of e-mails are present in the inbox, taking the same rule user knows that 49 drafts are available.

Linkedin needs improvement

Linkedin has used this strategy to its benefit in the top level of the information cycle effectively. For example it tells the number of e-mail is 2 – but i don’t think this is right,

A question – is this number 2 indicates the total number of e-mail present or new messages received. This the user will know when he becomes a regular user of liked in. For the record 2 shows the new messages received whom you have not read.

e-mail notification

Linked in should also include numbers in “Requests to join”. this will let the user know that some requests are pending that he needs to approve.

linked requests

SHOULD WE USE THIS ONLY IN E-MAIL SECTIONS ?

I suggest no, we should extend this to other parts of the application, where there is a need.

When to use this?

We should use this when the below 3 conditions are present.

1. Number – the number which will be displayed should be countable and should represent a quantity, i.a number of friendship requests, drafts etc

2. Decisive – user should be able to make a good decision based on the numbers displayed.

3. Need – The user need should be there to display the numbers.

Let us see some good examples

facebook

Use this feature in the application in your designs and you can make the user’s life easy.

Need more suggestions or help regarding similar areas please contact smartsanjaykumar@gmail.com

My achievements in UX design

As I am working in User Experience design and usability engineering, i am just trying to look back and see what i did best. I am happy to say that some things got derailed on some instances but finally i made it and things were on track.

Good job done :-)

I am trying to look back by recollecting who were the clients and what i had worked in.(I cant’s disclose more details – NDA)

I am sure i forgot some of them which i will refer to my resume and update

Let us go in a backward cycle




In 2009

Client WorkDomain What i worked on?

Universal Music Group

Music and entertainment VEVO – usability testing

Cadence
IT software Complete Software design

BSI-British standards institute
Standards, management systems, business improvement etc Enterprise software design, UX workshops

Pepsi Co.
Food and beverages Wireframes

eBay
Online commerce Task flow & form design

Mobile apps
Mobile apps3 different mobile application design

Kotak bank
Banking UX evaluations

Employee portal
Software and IT Employee portal design

Dashboard design
Software and ITDashboard Software design




In 2008

Client WorkDomain What i worked on?

target.com.au – Australia
Retail UX evaluation of Target

Tyco thermal
Thermal Web analytics analysis

Walt Disney
Entertainment Wireframes

Lan airlines
Airlines UX evaluations

Mexicana airlines
Airlines UX evaluations

NYSE
Trading Design suggestions




In 2007

Client WorkDomain What i worked on?

India times
Entertainment

Usability testing

Software Design


Citi bank
Banking

Product manager

Software Design

Usability Testing

UX evaluations




In 2006 & 2005

Client WorkDomain What i worked on?

General Electric
GE – you know what they do

Software design
Usability testing

UX consulting


State bank of India
Banking UX evaluations

Good Action buttons - how can we design them

Action buttons on a web page or software are the controls that help the user's to take decisions and move in the task flow. We can compare action buttons as the cross roads in the street where the cab driver decides which turn to take and based on his decision he reaches to the next junction in the town. Taking the same example when the user clicks on a action button he is posed the next screen and he can move on to complete his task on the website or software.

Types of action button, I can say broadly we can have below 3 types of action buttons.

1. Call to action button - these are the action buttons that stand out on the landing pages of many websites and encourage you to join the site or create an account. The main purpose of these buttons is to keep you in focus and make you sign up. In PET design these action button is trying to achieve the big P - persuasion element. These buttons you can also see on video sites which encourages you to click on to view video.

intense-debate

songbirdimage

2. Action buttons - these action buttons you will encounter when you are doing the task and they comes and helps you to take an important decision. For example when you are writing the blog, there are action buttons in the editor which helps you to either save the blog or publish button.

balanced action button

3. Action Links - we can not call them as action buttons, but they work similarly as action buttons. The designer can not include so many buttons at one place so he makes some of them as action links, these makes the design looks clean. Most of the times the action links will be the secondary actions the user usually takes.

image

Saying this, what will help if the user is not provided with intutive and effective action buttons- the obvious answer is that he will be taken to a different task flow and he may fail to complete his tasks in given time. Now let us focus our energies to design effective action buttons.

Some tips based on my design experiences.

1. Verbose - Instead of using the action button with "Yes" "No" "Delete", make it more verbose. The words that are used in action button has big impact in making the user in taking the right decision.The windows action button are not so intuitive, see how Gtalk implements Verbose action buttons so effectively.

wrong action

verbose action button

2. Alignment - The text written used in the action button should be centered in the middle. It is a minute check which takes the user experience to the next level. It is good to balance the action button with proper alignment of words in it.

wordpress

3. Contrast - The contrast between the words and the background used should be chosen with care. A combination of warm and cool colors should be used. Care should be taken that the words used should stand out and be legible.image

4. Break the rule - Who said that action buttons should be in rectangular shapes of a rectangular box. Experiment and analysis is the key. Experiment with shapes as shown below.

buttons action button

5.Positioning - Place the action button below the form, i suggest if you are planning to show the next page of the form, then it is advisable to place the action buttons on the right hand side. As the users read from left to right, it will be a good place to suggest the forms are flowing.

image

6. Spacing - If there are two different action buttons and the result of clicking them is completely opposite then it is good to have a good amount of space between them. Chances are there by mistake the user will click on the other one, and get disappointed.

balance

7. Balance - The action button which the user will click least, you can decrease the importance of this button by making it a action link. In this way chances are less for the user to click on the less preferred action as user's eyes will stay focused on the action button.

action button modified

I am sure the above guidelines and best practices can help you develop more conversion rates on the website by GOOD Clicks by users.

Need more help in design of action buttons please drop an e-mail to smartsanjaykumar@gmail.com

How to design effective SEARCH - Interaction Design

After looking at many websites with search option in the inner pages and not so impressive way of performing search, i think posting a blog on some of the best practise in search design will be helpful to all. Let us try to understand what is a search.
Search is a feature that allows users to find the the required piece of information they are looking. If we dissect search, there will be 4 parts to it.
1. Basic search - in this the user types the keywords and he is good to go. He presses the search button and get the results.
2.Advanced search - in this the user uses many filtering options to narrow down his search efforts. The advanced search will be different for all websites as, the UI elements is dependent on the content whose search is being done. After getting the main two user flows let us see what happens when the user makes the search.
3. SERP - Search engine results page is the page that is shown to after he enters the keywords.
4. Search results Relevancy metric - I am jotting this important area as it is utmost importance whether the user got what he was looking for. Was the search results helpful to the user or not.
Working on the below 4 areas, we can make an effective search.I heard designers from HFI(Human factors international) say's usability is not enough, i want to add to it that as far as we are meeting the needs of the users and helping him accomplish his tasks users will stick to the site or software. If some one else comes with a better solution for the user, they may leave our site- the bottom line is VALUE - what value we are adding to the user's life.
Now let us get each section right.
Basic search Design
Tip 1: Focus - As soon as the page is refreshed the cursor focus should be in the search text box. This saves an extra click to the users. If there are some forms on the page we can avoid this, as there are chances that the user may be more interested to fill the form.
Tip 2: Text box length - The length of the text box should be long enough to even accommodate a phrase if the user types, the idea is avoiding the horizontal scroll.
Tip 3: Narrow down - try to narrow down the user's search efforts in basic search also. For example we can include UI elements which helps the user to decide what he is looking for and letting the search engine understand the query at a higher level. A classic example can be clicking on the maps, images or docs options in search.
Tip 4: Progressive disclosure - Make the user aware that advanced search options is available by including the "advanced search" link.

Tip 5: Auto suggest - Including auto suggest can be of great help as it makes the basic search process easier.
Tip 6: Search settings - can be a good section where user can have controls and his preferences for search.

Advanced search Design
Tip 1: Search parameters - Have a look at the search results, that will be shown to the user and decide the parameters on which they can be filtered. An information architecture of the content can be of great help to decide on the search parameters. For example - the search parameter can be file type, date published, containing the words - etc

Tip 2: UI elements - To accomplish the tasks for narrowing down the user's search, we will use different UI elements. Select the best suitable UI elements. For example we can provide radio buttons when there are 3-6 options for the user in a certain group. A drop down can be used when the options are more. This decision needs to be carried out by the designer.
Tip 3: Grouping - Group the sections in the advanced search options and group them visually. A good example is shown below.
Tip 4: Action oriented language - Use the words such as "open search results in new browser window" instead of "pop out results"

SERP Design
Tip 1: Pagination - make the pagination good to navigate, option to move to different pages is good by few clicks however user's rarely move to see the results on the last page. User usually stick to the first 1-8 pages that are shown to them.
Tip 2: Results summary - a summary of results is good to have so the user known how effective was his particular search.
Tip 3: Current page - Notify the user by "showing page 5 of 10 search results" and similar words.
Tip 4: Show similar results - There are chances that a user finds a particular results helpful and is interested to know similar results. Having an option to see similar results is good.
Tip 5: Filters - An option to filter search results in order to narrow down to the required information is good to have. For example we can include sort features that allows the user to filter the search results.
Tip 6: Hierarchy - maintain a hierarchy of information by different visual treatment to the search results heading, description and the online link.

Search results relevancy metric design
Tip 1: Try to capture the user feedback on the search results asking him wether the search results shown to him were helpful.
Tip 2: Suggestions- a forum or e-mail communication to get user's suggestions can be of great help.
I think these are some of the benchmarks that needs to be satisfied for effective search design. I agree the search engine plays an important role and tagging of keywords, however this is out of scope as this blog is pertaining to what we can do at user interface level to design a good user experience.

If you need some more suggestions, or help regarding SEARCH please send an e-mail to smartsanjaykumar@gmail.com














How to create a brand by good UX design?

I am looking on google webpages, yahoo web pages and one thought strikes me. These pages are designed by some designers at the end of the day. Their designs have created a brand. Friendfeed has also become a great success slowly. Is there magic in the hands of all the designers who design these applications. What extra they do which helps the application perform so well. Let us try to digg into this topic and get some answers.

I think they follow the below strategy and create brands. Based on my work experience, i can say i got a good value by doing the following things.

Try them and if it helps, this blog has served the purpose

1. Who is the user - Enquiring about the end user is most important, it is even more important than the application and the stakeholders.

2. Who are the stakeholders - Who are they and what are they trying to achieve in the limited time,money and resources. If you start thinking like a CEO of the stakeholders company you have killed the lion in one shot.

3.What is the business problem - Understand the business problem as if it is your problem. Ask intelligent questions to understand the problem scope.

4.Sleep - Suggest some initial solutions to yourself, if in a meeting room to the stakeholders and the team, and get their feedback on the same. If you are alone, call an old Friend and ask him for suggestions, you can even drop a call to you grand mother and see what she says. The idea is to get some initial feedback on the way you are proceeding to solve the business problem. Now sleep with the problem for 2-3 days and you will get some solutions.

5.Sketch it up - Sketch the business scenarios on a piece of paper, in short sketch your whole thought process.

6.Information Architecture - Jot down the content inventory and finally the information architecture, IA gives you a deep level thoughts at what level you are trying to solve the problem, is the screen coming at the level one or level two.

7.Prototype - Make some paper prototypes at a very high level, count the number of clicks the user is taking to achieve his tasks.

8.Test- Test the paper prototypes and if time permits make the visio or ppt prototypes and test it.

9.Visual design - If it works fine, give the design more realistic look by appropriate visual design.

10.User - At all points keep the user in mind, the stakeholder in mind and the business goal.
The above flow has helped me a lot in designing great apps, let's see how it helps you.

How to create StyleGuide?

Style guides are important artifacts that are the byproducts of a well planned design work. They are made in order to provide a consistent User Experience throughout the application. In most of the cases they serve as a guide book for designers. It can be advocated that a single
software/application can lead to a varying degree of User Experience by applying two
different style guides for the same software. Here I will provide a view on how to create an effective style guide. Style guide creation is a good practice, we have heard this slogan many times. Now let us try to create one of these.

Style Guide Shouts about
In most cases a style guide turns to be a word file that illustrates the following aspects of a website/web application pages.

1. Real estate content area distribution
2. Types of pages
3. Branding guidelines
4. Error messages
5. Images used
6. Colors
7. Typography
8. Page Elements description
9. Other( Page Behaviors etc i.e. change of page color on overlays etc)
The style guide is used as a reference by design teams as a torch to provide a consistent user
experience to its users. It guides them in knowing what typography to use, what are the sizes of icons, how the pagination should look etc.
Now let me illustrate each section in brief with simple examples which will provide a thought through to come up with style guides when you are designing the new application.

Style Guide walk through – are you ready
Provide a small description about the style guide showing its relation to the software/web application. It will have a small description saying this style guide is of “XYZ web site”
communicating its design elements, navigation, color combinations, branding etc. It will be used as a guide to design/modify the application etc. Now work on each section with a crisp brief as shown below.

Real estate content area distribution: In this section illustrate the real estate area utilization scheme. Show how the page area is divided into different sections as header, footer, global navigation,
secondary navigation, add areas ETC.

Types of pages: This section encompasses different types of pages the application has. In general most of the web applications have these 4 types of pages

1. Home/Landing page
2. Main Section specific pages
3. Sub section specific pages
4. Task/Transaction related pages

Branding guidelines: Each organization has its own branding guidelines that should be followed. These can be the company logos, the action buttons, the color combinations, the tag-lines etc. The branding will have the below important elements(Its up to the designer if he want to focus more on
each element in the branding guidelines, well its a good practice to know each element with respect to branding essentials of the company)

1. Logo usage
2. Tag line
3. Imagery
4. Color
5. Language
The company logo is always displayed on the top left corner in 30 X 40 pixels.
Tag Line example
a) Underneath the Evo text, when the Evo text is used alone.
b) Spaced alone, provided that the Evo house icon and/or text appear
on the same page.

Imagery example
Include the images that are approved by the stakeholders for different sections. It will have different banners, product images etc.

Error messages
Include the error message notification pattern. The color combinations used to inform the user the different types of errors. It also includes the place where the error message is displayed.

Colors: In this section include all the colors that are used in the web site/ applications etc with their hex values.

Typography
Include the different types of fonts used for different sections of the web site. It includes the typography used for main section, the content, the header, buttons, footer section etc. It should provide even the colors of the mouse hovered texts.

Page Elements Description
Describe the elements that combine together to form a page. A page element can be the icons used, the tables used, the instructional messages, the approved images etc.

Table design
Write the specifications about the table design. This will have illustrations on the color of table and the typography used in the tables.
Table example

Table color
The table line: # d7e7ef
Column header color: #464646
Table filled color: #ffffff
Table typography
Header text: Arial , 14 #ffffff
Hyperlink text: Arial, 12 #95c0d5
Inactive links: Arial, 12 #999999

Others: In this section you can illustrate how the page behaves when an overlay is displayed. The color of the overlay etc. You can include those sections that may not fit in the above main areas.

Once I want to highlight that the style of style guides may vary from designers to designers however their essance is covered above. Hope this helps to tweak some thoughts to come up with an effective style guide.

SAS - Software as a Service - User hesitation

I very well agree that SAS - software as a service will be the next big thing, however when it comes to their use, why some designers act dumb is my question. This idea popped out of my critical mind once i tried to create an account on mint.com. Mint allows the user to manage their finances and daily budgets, it gives him good options to check out deals and best buys.

The account is free, the ROI model for mint is - they get the profit from the advertisers who are trying to sell deals on mint.


Why i did not moved future with mint.
  • Security is my concern, mint is a financial planning site, do they need to collect financial data by hacking to your bank account transactions. i don't think so.



  • I logged in and a pop up came asking me my bank, my account number, my password etc.Give me a break ....



  • Come on guys--- the flow is ok, but not so encouraging.



The numbers for financial planning and budgeting is based on
1. How much money your account have
2. How much assets
3. How much liability
4. Source of income etc


i think these details can be added in the software instead of the software linking to your bank account and just fetching out data. Why to open another hole in the water tank when there are increasing concern about online banking security.


Please feel free to add your thoughts on the same. Do we need to change the task flow or do we have to share the banking secrets to the software just for the sake of budgeting.

XHTML & CSS templates

As a web developer or a UX Architect we need not always work from ground zero to come up with nice css layouts & designs.There are handsome amount of resources already made by exceptional developers.Which can be effectively used in your designs.Here are a few of them.


 

XHTML & CSS Templates

  


  • Open source template some impressive templates

  • Maxdesign great collections

  • CSS play see it

  • Changingman a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.


  • CSS designs for you Free website templates built using table less XHTML and CSS

  • 3 column layouts A set of three column layouts to be used

  • Yahoo grid css The foundational GUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

  • 6 shooter media collection of a variety of templates

  • Mollio is a simple set of html/css templates

  • Open source web templates The basic idea behind open source is very simple: When programmers can read, redistribute, and modify the source code for a piece of software, the software evolves. It is a great collection - I recommend to use some of them

  • CSS page layouts - divide the page into different stunning sections using the source code



  • CSS library - a complete collection of frame library.Form CSS, image CSS & DIVs + containers... many more

  • x-designs good collection of templates

  • sucking code - its a great gallery of templates that can be downloaded well for use

  • box collections - use simple technique to make stunning frame sets on pages

  • layout gala - a professional resource for other professionals


  • Solucija a good collection of templates

  • Jimmy These templates are 100% valid CSS/XHTML and compatible with IE5.0+, FireFox 1.5, Opera 8.5, and Safari 2. They do not use any hacks of any kind, and can easily be modified.

  • Open source web design nice works of css templates  


All the above resources can be easily used by developers & UX architects to have a great professional look to there designs.