Style guide creation

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.


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.




What is User Experience anyway?

Today people are talking about User Experience.UX in all the applications/products they are making or are planning to make in future.All the IT giants like IBM,Microsoft,Honeywell,Google & even Indian counterparts like Satyam,Infy,TCS,Mindtree,Wipro have dedicated UX
professionals working in User Experience consulting.

I feel if we can not measure the user experience then there is no concrete manner to specify which product/application is better than the other,how can we improve it etc.Let us try to scope user experience.

Different types of User Experience
  • + ve : This will make you feel good and suggest your mind it was a pleasant thing to do.
  • - ve : This will make you uncomfortable and lost
  • cognitive/memorable : You would like to store in memory even will take pictures of the moment to recall it better. Visit to a tourist place,parks etc.
  • ordinary: Does not makes much significance to you in the long run. i.e. waking on the road to get to the shop next turn.

Experience dimensions coordinates

The above diagram shows different coordinates of user experience, a majority of experiences can be covered by the above diagram.

entertainment (concert, theater, movie)
o absorb it
o it’s passive – you watch it
education (this talk)
o absorb it
o active – you’re involved, too
escapism (wilderness trek, gaming)
o immersed in it (physically or virtually part of the experience –
o Active – you’re doing something
aestheticism (at the Grand Canyon)
o Immersed – immersed in the beauty of it
o Passive – you have little effect on the experience – you can’t
change the Grand Canyon, but it can change you.

Some measures to create +ve user experience

  • Question the Experience Quo: Ask yourself what type of experience you want your users to leave the application.What will make the user say "What a good application".Figure out how you can turn the negative or ordinary experiences into +ve experiences.

  • Cut down extra steps: Remove extra steps that you feel is not task oriented in the interaction flow design phase.Avoid unexpected,irrelevant information that will be displayed as messages when the user is submerged in completing the task.Try to save the personal information of the user & auto populate if possible.
  • RIA(Rich Internet applications): Use Rich Internet apps like auto suggest,data drop down components in the form elements.Use only one active area concept by making the behind window inactive etc.There are many more RIA components that will enhance the user experience.
  • Focus on Hot spots: There will be some actions/steps the user will be interested to perform, focus on it & improve the step,remove unwanted actions etc.This will lead to a heightened use experience in the long run.
  • Design upturn: Find the things which has not changed in Long years & improve it in one way or other to create a lasting cognitive impact on the users mind.For example you can have a intuitive shopping cart, new navigation menus etc.
  • Understand the user MINDSET: This one step will make the user experience great.If we have a physiological understanding of the user's mind set while interacting with the product then it will give us a great edge in the whole process.We can craft great apps/products with ease as we will understand the user better & their needs.
  • The 5 second law of attraction: Try to grab the user attention in the first 5 seconds.Give him a feel that the task wont take much time & it is easy to perform with minimal information inputs.
  • Picture the Road Map upfront: Let the user know what lies ahead as they click on the next button.Upfront showing at the number of steps it will take to complete the task, the current step being performed will really give a positive user experience.

In this way User Experience can be evaluated & enhanced further.

Columbus sails in Navigation schemes

Navigation helps the users to find the information easily,with ease & visit different sections of the application. The conventional style of navigation is common, however there are quite new experiments that people are doing. They are willing to experiment like Columbus sailing in unknown directions, most often confident of finding the land. Let us see some of the new experiments in navigation.

Vertical columns: Taking a vertical look in the navigation is OK,however the usability of the navigation huts here

    Large typography: The big text is intuitive in some way or the other making a good impact on the user's mind.

    Horizontal sliding steps: See the horizontal boxes moves left & right depending on the mouse actions.It is a good way for navigational aid.

    Mid page horizontal: The complete global navigation is placed in the center of the page.The top section above the navigation is used for add section effectively.

Unconventional pictorial: Use of new icons to reflect the different sections of the web page is good here.It is always not better to use the same conventional images.

    Dining table: This food company is using the concept of dining table to suggest co related navigation to the users.

Hide icon: Only one icon will be displayed at one time, it is a new pattern effectively used in this site.

Directions: See the navigation is able to navigate in all possible directions.This is a surprise navigation which should be avoided if the site is focused on task completion.

Sound effects: The mouse actions on the navigational links produces different sounds.You can play good music here by coordinated mouse actions.

The experimental work done in navigational schemes is good above,This type of navigation can be used to very specific sites like design,architecture etc with good amount of usability.A balance in creativity & usability will lead to great experimental navigation schemes for the applications.

How to conduct usability testing?

Usability testing can be very expensive in major product designs if the scope of the product is large using global product user's representatives.The tools that usually go hand in had with such usability testing are very expensive and not easily available.Some of the tools & facilities that come handy are
  1. Morae customer experience software
  2. Camtasia Studio
  3. UserVue Remote User Research
  4. Accessories(Camera etc)
  5. Usability Labs etc

Does this means that we can not go for usability testing if the project allocation fund is small? No not at all, there are many economical usability testing methods can be used to design better product & services like paper prototype usability testing, walk through testing etc.Let us explore the typical steps to follow when we are going to perform usability testing.

Step 1: Software/Application/Product information collection

Knowledge of product to be tested is vital for facilitator & note takers involved in usability testing.If you are new to the project then this information can be collected from the product manager,UX architect,designers or other team members involved in the design of the product.If you are working from the initiation phase of the project then it is an ideal scenario.The user persona's,technical infrastructure,industry area to which the product pertains,number of users globally,geographical locations of users etc are some of the information you should look upon.

Step 2: Critical Task/Scenarios selection

Sit with the product design team and product manager to come to conclusion most critical tasks that will be performed with the application by the users.Suppose it is a flight travel ticket booking site then the most critical tasks that come into mind will be

  • Buying a ticket online
  • Search flights
  • Online Customer service

Step 3:Test scripts & scenarios

A test script includes the task the users needs to perform & gave their valuable responses.Preparation of test scripts will have the below sections.

  • Pre-test questions: "Questions should be very simple" this is the ground rule.We can ask the users to fill a small information sheer which asks for name,age,gender,location,education,interest & hobbies etc. Uncomfortable questions like what is your annual income should not be asked unless it is mandatory affecting their tasks in case of BFSI(Banking and Financial Services) products.
  • Test scenarios: A typical test scenario will be like this.

"This year Diwali holidays are falling in October end.Your manager has granted you ten days of leave.Please book a flight ticket for yourself on the travel portal"

  • Post test questions: The post test questions will be focused on getting the responses from usability testing participants in an intuitive manner.i.e. How do you feel about the number of steps involved. What do you like most about travel portal. Any suggestions you would like to give to improve the application.

Step 4: Conducting usability testing:

Before inviting the actual participants for the usability tests,make a dummy test with one of your team members(with the least knowledge about the product) to insure all the software,cameras,questions framed are working fine & suits well.

  • Invite the participants & welcome them for the test
  • Introduce them to usability testing team
  • Make the users comfortable saying that "We are not testing user skills here rather we are testing the application".This will make the user more comfortable.
  • Distribute the test scripts,Help them in filling the small form, answer their queries in most caring manner.
  • TAKE CARE OF THE USERS - this line should never be compromised.
  • Usability testing - Invite the users to their respective systems & ask them to work on the test scenarios. Make a not of the time while they are performing the test.If they ask any question's answer them with some clues but do not help them in making the task success.Use words like "I am very delighted to see what you have done till now, it will help us to make the application user friendly.Let me take you to the next task".
  • Post-test questions - Collect the users feedback from Post test questions.
  • Note takes will be taking notes throughout the sessions, they will focus on getting the important information that will improve the application.They will have all the quantitative details about each user like how much time they took to complete the test,what were the important path they followed etc, they are also responsible for the videos data capturing & screen hot area files etc.

Step 5: Collecting the responses & Thank giving to the users

Collect the test scenarios form users.Give them the gifts if you have promised it before & thank them for giving their valuable inputs.In this way we can go for usability testing.Usability testing is a Art,science & craft together s0 it will take some time to master the skills.

Not a problem there is first time for everything. :-)

Focus group Basics

Conducting a Focus group will make you excited in many ways as you need to play the role of a moderator for the discussion, meet new people,get to know many perspectives of an idea, assimilate participants ideas into quantifiable data to be used in projects in a useful manner etc.Moderator is a critical role that will have a Major impact on the success & failure of the Focus group.A Focus group necessarily means a group of people involved in a constructive discussion focusing on a particular topic with the aid of a moderator.A focus group when planned has different phases as follows.

1. Preparation & Planning phase
This phase is one of the most important in all the phases as it will lead to the decision the selection of the participants,Location for conducting the focus groups,supplementary preparation for tea,coffee breaks,introduction of the focus groups, questions to ask etc.

2. Preparing Questions

The structure of the questions should be from easy first & a little tough later.Avoid framing questions which are difficult to answer for the participants or makes them uncomfortable.A ground research on the participants background - cultural,educational,religion,work will help a long way in framing comfortable & productive answers from the participants.

3. Introduction to participants

Make a short one page introduction note & distribute among the Focus group participants.This note may include the following sections
  • Welcome note: We welcome you for the session to discuss the important/higher end features that should be made available to Travel portal users.Our the Focus group team extends a warm welcome to you, we hope that you will have a great time with us.
  • Schedule: The session will be for 1 hour and it will have the below sessions

Sessions Time

X 10AM

Y 10:30AM
Break 10:30AM to 10:45 AM
Z 10:45 AM to 11:15

4. Starting the Sessions & asking questions

Start the session with a quick self introduction & session objective introduction.Ask easy questions first, listen to the participants when they say,encourage them to participate in the discussion.Avoid participants from taking control of the situation in a professional manner, since not all the participants will be taking part actively so they can also get chance to contribute.

5. Take notes & recordings
Take notes while participants are giving their ideas.You can go for recorded sessions with prior permissions form participants either in audio or visual.If you are going for such recording include a disclaimer that the recording is for getting the ideas in a clear manner so any important information is not missed.It will not be shared to third parties.

6. End the focus groups

When you have finished your focus group, thank the participants for taking part and leave a contact name and number in case they wish to follow up any of the issues that have been raised during the discussion.If possible provide them the summary of the report if they want through e-mail at later stages.In the end distribute token of thanks if you have planned for the focus group.

In this way a focus group is being conducted, there may be some variations depending from project to project requirements.