Friday, 14 November 2008

Shortcut Keys

This has been contributed by Sachin Kumar Sharma, an employee of MindTree.

Most of the time, interaction on the internet is with the mouse. We probably use the keyboard only when we are typing in a particular URL or entering a user name and password.

There are dozens of keyboard shortcuts we can utilize on our browser to invoke functions or features.

If you know the shortcut keys, you are well on your way to working faster. But, that sometimes isn’t the best solution as it is either hard to find or we don’t know that it exists.

Remembering Them All?
There have been improvements in design where Microsoft has now introduced the ‘Ribbon’ look and feel where shortcut keys are easier to remember. This could be better without the cluttered interface; a solution nonetheless.

Thursday, 6 November 2008

ReBrand by Color Branding – What color are you?

Life is full of colors
Yes we all know… then what? Color branding a simple concept when effectively used can differentiate your Business from the crowd in astronomical measures. The mere thought of your pet color will make people think about your business, product, and service. There are many business around the globe that focus on color for example IBM – the big blue, Kingfisher airlines – RED, Google – Blue + yellow + red + green in its logo(It has used eye catching colors to grab attention & colors that creates excitement, fun).

Effects of color

  • Test takers score higher and weight lifters lift more in blue rooms.
  • Blue text increases reading retention.
  • Yellow evokes cheerfulness. Houses with yellow trim or flower gardens sell faster.
  • Reds and oranges encourage diners to eat quickly and leave. Red also makes food more appealing and influences people to eat more. (It is no coincidence that fast food restaurants like Mc Donald’s use these colors.)
  • Black clothes make people look thinner.
  • Black on white is the easiest to read, on paper, and on computer screens.(Most of the content on the web will be in the same color pattern)
  • The most visible color is yellow.
  • The most legible of all color combinations are black on yellow and green on white followed by red on white. Used in street light signals all over the world.
Successful Color Branding Implementers

Steps to incorporate Color Branding
When you are going for color branding initiatives then it is good to go for professional help rather than mere intuition since there are many legal pros & cons involved in it. I am not here to scare you by saying this, but a professional help will do no harm at a little extra cost as compared to the benefits your business will receive by color branding.

Step 1: Study the competition and research on the color branding initiatives they are taking. Learn the legal implications of color branding. Watch the impact of the color on the competition customers, how they respond, why they respond, how customers perceive the color, what characteristics the competition color stands for.

Step 2: Finalize the characteristics your business brand intends to showcase. For example if it is a cargo business then you can keep “Always on time”, Hard working, etc as the characters of it, again it may differ from business to business. Finalizing the characteristics is the business call.

Step 3: Take professional help to work upon the competition color branding research & choosing own color branding scheme. Select the color that you feel will represent your business characteristics. Make sure that color is not taken by any other business worldwide. Of course it is a tricky thing to do but some professional help will not harm after all the returns are huge in the long run.

Step 4: Try to use the color for the company logo first then slowly creep the color in web sites, online presence even in the online advertisement you are focusing. After coloring the online media, include your brand color in the physical space, office buildings, office buses, transport, even to the office employees if it is possible. There is a catch here you can not go out & make all the employees wear your brand color clothes if you are in a Law/Consulting firm. Common sense is the base line when we go for color branding initiatives.

Step 5: Do the color branding where ever you can capitalize it, in Job fairs, stalls, exhibitions, student campaigns etc. The whole world is open for you if you just use the stuff between the ears for color branding. The gain of color branding is immense if perceived in a professional manner.

The above steps can be effectively used to make the best profits from color branding. Again the same questions pops in your mind. “What is my Color”.

How to add value to User Interface codes?

Why User Interface is so important?
User Interface is the focus point of User Experience. It is the plane on which user expects many good things to happen. User Interface in reality is the intersection of user’s tasks, his social background, technology, his physiology and many other things, which may be very personal to users. Like user is only having 500 $ in his account & he has to search a gift that is less than 200 $. The importance of User interface code validations is rising up, as Accessibility guidelines are becoming strict, more over it is important to provide a good user experience to the users.

Gains of user interface code validations
1. Accessibility: Not all the users are average some users are special with eyesight disability, hearing disability etc. They mostly use screen reader or other aids to view the pages in websites. A validated user interface becomes more accessible for the users. If he code is not validated the screen reader reads it, but not in the same order in which the page should be read. Some of the content the screen reader will skip move between lines in haphazard fashion causing many problems for disabled users. A validated code is more accessible.
2. Maintenance: A good validated user interface is easy to maintain when the code is given to third party to make any modifications or changes. Research shows it becomes a lot easier to recognize different chunks of code and work faster on a validated use interface code.
3. W3C standards: Following the W3C standards for developing the user interface codes will help the company to get a good name in the market & gain new customers.
4. Client good books: Clients value the steps you are taking to give then clean user interface codes for their projects.
5. Cheap no extra cost or software’s to buy: W3 provides the validation service free of cost. You just need to have an internet connection that is common in workplace.
6. Long-term benefits: The long-term benefits of this simple practice are enormous in terms of RIO & developing a good brand for User Experience service providers in the market.

Steps for User Interface validations
Step 1:
Login to

Step 2: Choose the type of code input method for validation. You can validate by three methods. Each method is explained in the below steps.
· Validate by URL
· Validate by File upload
· Validate by direct input

Option 1: Validate by URL
Enter the URL of the webpage whose code you need to validate. Make sure the web page is uploaded on the internet.

Option 2: Validate by file upload

Option 3: Direct input
This option is a favorite one. Just copy paste the user interface code (HTML) in the text box & click Check button.

Code validations ERROS

Guidelines to follow
The development team should make a habit to run code validation before they submit the pages for deployment. All the web pages need to be validated before deployment. This simple practice of validation will have huge gains & above all, it is a little time that can be invested to gain a more accessible website & client satisfaction.

Tuesday, 4 November 2008

Approach to Software & Internet Accessibility

Our approach to Web Accessibility is that of Inclusion. We believe that all websites should have a single version of the page that’s designed for accessibility rather than text-only versions. An accessible page is of value even for individuals who don’t require accessible pages – as it follows good web design principles.

A holistic approach for accessible design goes beyond template design. It needs to become part of project lifecycle, product evaluation, operational procedures etc. However, at MindTree, we divide template level accessibility design at four broad levels.These broad guidelines are detailed into a checklist.

Organisation of Content: The content across and within pages should be organised so that
  1. Summary on top: Since visually impaired users can’t scan a page, a summary of the page at the top is useful both for accessibility and search engine optimisation.
  2. Means to skip common content (like top and side navigation) so that a screen reader can jump to the content. This is useful for everyone.
  3. Quick Search: Since visually impaired users can’t scan on-page text, page design should not interfere with use of Browser’s Find functionalities (e.g. some DHTML, show/hide features.)

Creative Design for Accessibility:

  1. Avoid pixel-perfect designs as these don’t look good when text & screen sizes are changed
  2. Use relative font-sizes within a fluid layout so that it works well even when text sizes are changed using Browsers’ native controls.
  3. Avoid use of Graphics for labels, menus, links and avoid use graphics for small text
  4. Don’t use colour only to portray meaning. Use high-contrast to allow better readability.
  5. The pages should work well even without CSS.
  6. Avoid layouts that may interfere with use by dyslexic users.

Provision of Equivalents within the code:

  1. Use tags within HTML that enhances accessibility.
  2. Text equivalents for all meaningful visual content – this also helps in better search engine indexing of visual content. This could be alternative text, audio captioning, transcripts, subtitles etc.

Testing with Users:

  1. No amount of proactive planning and automated testing can substitute for actual user testing using different browsers and screen-readers. While planning Usability/User Testing include user(s) who access accessible version of the pages to iron out accessibility issues.

Monday, 3 November 2008

The Persona of an Indian HCI Professional (Salary Survey)

I was looking up at the Salary Survey for HCI Professionals in India for 2006 and thought it would be interesting to look at the 'Persona of the Indian HCI Professional'.

The Persona
  • Is in the 26 -35 age bracket and has been working for 5-8 years. Started working straight after a Bachelor's Degree (possibly 21/22 years old) somewhere between 1998 and 2001 - the heydays of Dot Com.
  • Works in an IT Services company with a title called User Interface Designer [and then the survey calls the industry mature :) ]
  • Is self-trained and does not have formal education in design – may have a bachelor/master degree though. A degree in Product Design & Visual Comm (possibly from NID or one of the IIT) command better salaries.
  • Lives Bangalore and earns 5-7 lakhs/pa.
  • Primarily takes requirements (as told by the customer without applying any UCD techniques - looking at % distribution of 'techniques in use') and designs user-interfaces.

Few Questions:

  • Age: Most people are within 28 -35 age bracket. Does this mean that you don’t ‘design’ after you are 35
  • Probably Yes - The differences in salaries is more pronounced in early and later years. I guess this would ties into how much value can you add to your current job. And how is your current education and current job preparing you for it?
  • Probably No - It's possible that people who are in HCI joined directly from campus (given the dot come hype) and professionals from other industry didn't move to HCI during 1999 - 2001 rush. Hence the most senior people within HCI are around 35 years.

How well paid are we when compared globally?

It also suggest that an HCI Professional is paid as well in India as in other places in the world. If you see the Jacob Nielsen’s survey you will notice that the salaries in the UK are around GBP 30-40K mark – which when multiplied by 20 gives you 800,000. This ties in well with Indian salaries of 500 - 700 K INR. (1 GBP = 20 INR in terms of Purchasing Power Parity or PPP). India is fourth largest economy in terms of PPP.