Add Google analytics

I have seen the magic of google analytics multiple times, you will be amazed to see how many people from which part of the world are watching your pages and how much time they spend on them. I would like to rate GA as one on the best tools that google has created. Now let us leverage this tool for you. I will show step by step process to make google analytics work for you. The steps are simple to follow, plese do not get bogged by the code, it is just copy and paste at the right place on your webpages, you need not write even a single line of code.

Note: I will refer Google Analytics as GA in the following, please bear with me.


Get google account first

Sign up for a google analytics account. If you have a google account(Gmail) then you can directly login in to GA. Once you have logged in, you will be shown the main section. In the first login you will see no anlytics accounts in the landing page. In GA analytics account means the tracking website, suppose you want to track 3 websites then you need to create 3 analytics accounts or in simple terms 3 profiles. A single google ID can help you to track multiple websites at one time.

Step 1: Login to GA landing page, click on create a new analytics account, you will be taken to the analytics registration page.



Fill the above form and click on Continue.

Step 2: As soon you click Continue, you will be dispalyed with the GA code that you need to paste at the bottom of the page.

The code will look like this

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12226152-1");
} catch(err) {}</script>

Step 3: Paste the code that is given to you at the end of your page just above </body> as illustrated below


Your GA code comes here



Step 4: Now go and check the GA account and after few minutes you will see that GA starts tracking your web page.

See how simple it is to work with Google Analytics.

Transfer blogspot to wordpress blog

I saw many instances where bloggers are taking their own domain and they want to move their blogs. Most of the time i have seen they prefer wordpress blog as the platform, as Blogspot does not allow to host it on as easy as Wordpress. The common trend is that blogger prefer Wordpress for hosting. I am aware and has highlighted in earlier post that the learning curve of Wordpress is longer than blogspot.

Ok now let us try to move blogspot to your own domain. Please follow the below steps as mentioned below.


Step 1:Login to blogger account. Go to settings section. There you will find Blog tools, under blog tools you will have the below options

  • Import blog

  • Export blog

  • Delete blog

Summary:Login > Dashboard > Settings > Basic > Blog tools

Step 2:Click on Export blog, this will take you to download blog page. Click on download blog button. This will ask you to save the blog as a .XML file. Save the file xml on the desktop.

Step 3:Login to Wordpress account where you want to transfer the blogspot blog. Go to dashboard, under dashboard you will find Tools. You will have to move to the Tools > Import > Blogger – Import posts, section.

Now upload the .xml blogger file that you had downloaded earlier. The import blogger tool will take care of the steps and give you options to choose from. You have to give authorization to do it by entering the password of your account. Once step 3 is done you are good to go.

Step 4: Enjoy :-)

Is that simple or not. This is one of the shortest methods by which you can transfer blogspot to wordpress.

There is another method that is a little time consuming, this you can use if the number of posts on blogspot is few. See how this can be done, but note you can not completely delete the blogspot.

Step 1: Login to blogspot

Step 2: Copy the HTML code of the post one by one and paste in the wordpress post HTML editor. By doing this you need not have to reuplaod the images as wordpress will fetch the images from blogspot.

Limitation: If there are imgaes in your posts it become little difficult as the images that you will see on wordpress are actually from blogspot.

You can choose what ever method that is convenient for you.

Blogger or Wordpress?

Blogging platforms, i am sure you must have heard about them. I am going to take example of 2 most famous blogging platform and do a interface analysis focusing on the task completion. I looked at Blogger and Wordpress and have used both of them for writing blogs, however i think when it comes to writing blogs and understand each section, Word press had done a better job.

Good points about wordpress.

1. Collapsible sections: The global navigation is on the left hand side and each section can be expanded by a click, the user can easily find out the section he is looking for, without refreshing the contents in the work area.

2. Robust editor:Wordpress editor is robust as there are multiple options like paste from word, paste from text, image editing, add video etc.

3. Typing area:Toggle full screen mode expands the type pad and you can get a lot of space to type the content. In blogger this flexibility is not so prominent.

4. Categorize posts:There is option to post the blog in a particular category.

5. Plug-ins: Multiple plug ins are available that can make the blog look better and work better. The features in wordpress gives more room for experimenting and fits the need of the user's who want their blogs to be distinct and unique.

HyenaLabs - Blogger-Wordpress


Good points about Blogger

1. Simple:Blogger is very simple to use as there is progressive disclosure in the menu display. The user is not bombarded with all the content. It helps in learn-ability.

2. Visual elements:The layout of the blog can be altered based on visual cues and each section is displayed in an intuitive manner.

3. Content organization: The content is well organized in blogger.

I have given these points on a very high level and focused on the major task completion.If i had to see the biggest hurdle in wordpress is ... it is little difficult to learn. The learning curve is bigger in wordpress.

I had a friend who took quite amount of time to master it, and i also took some time to understand it fully.

Which one to choose

If you are looking for long term good results, its great to choose wordpress, although the learning curve is longer. The plug ins and the huge user base on Wordpress can help you in a bigger way. I am giving these suggestions based on my experience. Later if you want to create your own site you can easily host wordpress as compared to blogger.

Web analytics

Web analytics defined
Web analytics refers to the collection, analysis and reporting of Web site usage byvisitors. The information helps site managers better understand the effectivenessof their online initiatives and helps them optimize their Web site.

While traditional Web analytics have concentrated their analysis on clickstream behavior of users — page by page or sequential navigation of Website visitors. These type of anlaysis leads to a huge raw data to be assimiliated & analyzed so now technocrats are focussing on business reporting. Examples of such reports include marketing campaign analysis, ROI measurement,process analysis and more.





Four site types where webanalytics can be effectively applied.

Usually the below four site types can be used for generation of webanalytics business reporting.

  1. e-commerce: These sites are used to sell products online through online e-commerce engine.Example of such sites include, walmart, etc.The deceding factor in these sites is number of sales comleted sucessfully.

  2. Lead generation: These sites are used to capture the contact details of customers so they can be followed by the sales force team for selling.Example of such sites include sun life insurance,new your life etc.The deciding criteria for these sites are lead capture & form submits.

  3. Content site: These site are based on the advertising business model.Some of the sites doing well in this area are bbc news, fox entertainment, msn etc. The sucess of these sites rely on the returning visits made by the users.The goal is to keep the visitors comming back so they need to refresh the content @ appropriate rates for the site to be successful.

  4. Support or self service: These sites are developed to reduce the loading & cut costs in terms of customer service representatives. These sites provides customers with the ability to find answers to their products queries.The success of these sites depend on providing answers for product queries.

Webanalytics adoption curve

Content or media sites enjoy the highest adoption level because many vendors have been able to provide specific metrics to them early on. Curve portrayed by Geoffrey Moore’s "Crossing the Chasm." notice that the content sites enjoy the highest adoption of Web analytics, followed
by commerce, lead generation and self service models.

Social networking

Today social media, is kool to indulge in but we can say that we are going to a place where we can have 150 friends and connections and when the time comes no one will lend you a $ 100 dollar bill.

It is a fact, but it will need more drill down and sync in. Let me explain it to you.You will have a twitter account and there are 200 people who follow you, but that does not mean they love you or they will help you. They follow you because you tweet some porn jokes every 1 hour or some other thing.

hyenalabs-social networking

So what is the solution for this, i am not a sage to tell you the answer right now, but i say that there are ways in which social media should touch the human stuff of real connection.

You may have a linkedin connection in town, but are you willing to hang out for coffe this week end.The answer is no. Think about this aspect of social media and you will be astonished to some extent.

Let us try to create a better world by making social media more touching. You can not consider yourself better because you have more friends or more connections online. It depends on are you really connected to the people.

Graphic Design tips

"Graphic design pointers"
1. Proximity and uniform connectedness is the two important principles of Gestalt
2. All graphic design is ultimately management of white spaces.

Gestalt principles
Are related to the visual reorganization of figures and forms.
• Emergence: this principle emphasis that we do not recognize a thing in parts but as a whole. For example, we do not recognize a dog by its body parts (tail, face etc) but as a whole.
• Rectification: Is the constructive or generative aspect of perception. If we draw three dots on a white sheet in close order, our mind will see a triangle there.
• Multi stability: is related to having ambiguous perceptions.
• Invariance: is the property in which the simple geometrical shapes are recognized independent of rotation, translation, and scale.
hyenalabs-graphic design
Graphic design principles
The visual design principles are extrapolation of gestalt principles. The perception of visual patterns yielded a number of consistent principles that dominate the theoretical basis for much of modern graphic design.
1. Proximity: The elements that are close to each other are considered as more related than the elements that lie farther apart.
2. Similarity: If the elements share consistent visual look they will be treated as a group.
3. Continuity: We prefer continuous, unbroken contours and paths. The two lines crossing each other are mostly not viewed as four lines meeting at a common point.
4. Closure: We have a strong bias to see completed.
5. Figure ground reversal: Viewer’s perception reverses between two possible interpretations.
6. Uniform connectedness: Refers relations of elements that are defined by enclosing elements within other elements, regions or discrete areas of the page.
7. 1+ 1 = 3 effects: The white space between two elements forms a third element.

1. A consistent approach to layout and navigation allows users to easily locate the information and navigation controls across the web sites.
2. The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.

1. The readers visual scanning moves from contrast of the web pages, then the different sections and finally the written matter content.
2. The most effective way of doing this is to balance the text and links with small graphics.

Color and contrast
1. Text legibility is dependent on the reader’s ability to distinguish the letters from the background filed.
2. Color differentiation depends on brightness and saturation
3. Black text on white background has the highest amount of contrast since black color has no brightness and while color is all-bright.
4. Hue is also a factor with complementary colors such as blue and yellow producing the greatest contrast.
5. Be sure to use colors so it is easy to distinguish text from background.
6. Do not forget that almost 10 percent of male readers have some trouble distinguishing fine shades of red from shades of green
7. If you are using gradient stick with black text and avoid using dark color in the background.
8. Optically bright colors on white like yellow disappear
9. White text on black is almost good for legibility
10. The optimal combination for legibility is black on white
11. Hue
12. Saturation
13. Brightness

Contrast variability
The contrast for the legibility needs to be different from application to application, as there are multiple scenarios in which the application will be used. The mobile devices are used in the house and exteriors, the falling sunlight may make arouse problems in legibility.

Tools for graphic emphasis
1. The tool for graphic emphasis are powerful and must be used in sparingly in small amounts, over use makes them ineffective as emphasis on a particular section is not given.
2. Colors drawn from nature are almost inherently harmonious and subdued

White space
1. A fixed width layout include – the page at the center of the browser window
2. For liquid layouts use 90 to 95 % of the screen instead of 100%, leave some background around the functional areas of the page to prove visual relief.
3. If your page width is reasonable it will provide a visual relief
4. The ground field around the page elements is as active as any figure filed on the page.
5. Filling all the white space in the page is like removing the air form the room. Use white space effectively.

1. The best style is the one that the readers never notice

1. Vision impaired people are lost on the web
2. People with cognitive disabilities such as memory and learning disabilities the difficulty is magnified many fold.

1. Good typography is based on the visual contrast between one font and the other, and the contrast between the text blocks and the surrounding empty space.
2. We read primarily by recognizing the overall shape of the words, not by parsing each letter and then assembling a recognizable word.
3. Avoid all upper case headlines, as they are difficult to read, because words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the readers eye.
4. Legibility depends on the top of the words. If you use initial letters as caps, you disrupt the readers scanning of the words.
5. Initial Caps Causes Pointless Bumps
6. The first thing the users see is the overall contrast and the pattern of the page.
7. Choose few heading styles and subtitles to organize your content then use chosen style religiously.
8. In conventional print layout 30 t0 40 characters per line are considered ideal
9. Web page layout violates one of the basic book and magazine typography. The lines of text in web pages are mostly long to be easily read. Magazine and book columns are narrow for physiological reasons: The eyes span of movement is usually eight cms (3 inches wide) so designers keep the paragraphs wide enough to span in the eyes comfortable span of eight cms. If the lines are long, the user’s eyes are strained by flexing the head and eye muscles.

Does plastic bags increases the shopping experience?

I went to the shopping mart to buy groceries, i am proud to say that in India we have copied the way we buy groceries like – soap, whole grains, daily bread, cookies, vegetables etc from western countries but forgot to imbibe the go green mantra, no to plastics.

Let me illustrate how we used to buy groceries 10 years back in most of the Indian cities. We used to go to a common market where vegetable hawkers, farmers used to sell vegetables fresh from their farms. Or we used to go to small street shops and buy the grains, pulses, wheat etc.

Plastic bags and shopping experience

I think people are more happy when they buy items in paper bags,the paper makes them calm.Paper carry bags looks more elegant and aesthetic than plastic bags. Then why plastic bags are more in use.Sleep on the above question.

vegetable_seller.jpg Vegetables Seller of Dhaka City image by animeshbain

For groceries we used to visit similar shops as shown above

Good points of the above methods of shopping

  1. We used to carry our cloth bag to buy vegetables
  2. We used to carry our cloth bag to buy groceries

Now Smart, Reliance, More etc have successfully copied the retail market from western countries very well, and it is also successful in India, but they missed the paper element in that.

When i was in UK and USA, and went for shopping vegetables, groceries etc.The stores like Sainsbury and Whole foods used to sell products in paper bags not in plastic bags.


What can we do

  1. Carry your own cloth bags when you go for grocery shopping's
  2. You can even use a plastic bag for grocery shopping, but make sure that you use it many times
  3. While buying vegetables do not pack them in separate bags, use a single plastic bag to carry them.
  4. Buy from local hawkers if possible, since they give already recycled plastic bags


What retailers should do

  1. Stop giving plastic bags and use paper bags
  2. Initiate a program to return the plastic bag with some offers
  3. Reuse the plastic bags
  4. Use recycled plastic bags


What govt should do

  1. Ban use of plastic bags in the shopping malls & implement it harshly and cooperation.

If you feel that the points i am making is important, please leave a comment and suggestions.

You can write to me

UX Copenhagen: Go green with Survey Monkey – Online survey & questionnaire preparation tips

Survey Monkey is one of the most popular tools to create surveys, publish survey, conduct survey and finally even record the participants feedback and analyze the results.

I have tried many tools in the market for the user survey but i feel survey monkey is better in many ways. Let us try to see how survey monkey works.

Survey Monkey is my personal favorite


Components in survey monkey: Survey monkey has basically 3 important sections that once mastered will help you to create and manage user surveys.

1. Design: this section helps in designing of the survey which will be posted to the participants


2. Collect: this section will help in collecting the responses


3. Analyze: this section helps in the analysis of the responses and prepare the survey report.

Account type: In most cases a free account will help you to create, collect and analyze the results. In free account there is restriction for download of the reports.Based on the requirements go ahead and sign up. In most cases i think you can easily work with free account, in case you need higher reporting capability then go for the paid options.

Big Step 1: Creation of a new survey

Creation of new survey is as easy as 1 2 3… see the below image for illustration.


Adding Questions: You can easily add questions, notice the default section that will be shown to you and the “Add Question here” button.

. image


Themes: there are some color full themes that you can use to change the look of the survey questionnaire. See the above yellow color and the green themes.

Once you click on “Add question here” the below overlay will be shown to the user


You can select the type of question and frame your answers. This window allows the users to have questions of the following types


In this way you go on and create the questions. Once you log in the application it is pretty much easy to work with it.

Big Step 2: Collect responses

In this section the user publishes the survey to the users. There are 3 ways in which the responses can be collected. The 3 ways are shown below


Big Step 3 : Analyze results

Once the survey is send to the participants, there responses are collected and the analyzed. For collection we need not worry as Survey monkey has built in tool to collect the responses. The survey results are collected on a auto pilot and you can go forward and analyze the results.

image Each questions answers are calculated and based on the responses a graph is created which can be shared with the customers.

Now see how cool it is to use Survey monkey. I would suggest instead of using pen and papers for survey go forward and use online tools this will make the survey easy to manage and in one sense makes the process eco friendly – Go green with Survey Monkey.

If you need more help, please drop an e-mail to

Survey Monkey - The best way to conduct online survey

In this blog i will write about the steps to use survey monkey and how to generate survey reports.

The tips will help you to conduct user survey easily. I will also point some other resources that can be used for conducting surveys.
Please wait a bit, i am in a session, i will post this blog as soon as i get some free time.

Comment box – a good design

In the world of web 2.0 comment box can be of great help. The reason behind that is every comment, every view is important as people are the creators of content.

The comment box should have the below UI elements

1. Word count: A word count will help the users know how much they can type in and what is the current word counts. It boosts user awareness and control.

2. Full view: Make the comment box fluid, so as the user types the text the box expands and provides the user with complete view of his inputted text.

Now let us see how we can do this

. Size of box: The size of the comment box can be predefined so it accommodates the text in one visual.

.Fluid comment box: This can be done my making the box fluid vertically. Only the bottom of the box can be expanded. See the image below



The user can expand the content box by dragging it.

. Spell check: Auto spell check is a god option to provide.


. More: We can also provide editors, font selections, image upload etc, however this depends on the extend of use of the comment box. It is a business decision based on the type of industry.


Creativity has no end, but please don’t forgot usability and UX.

How to add Google Analytics code to Wordpress blog

Google analytics is a tool that can be used to see what users are doing on your sites. To use this you need to have a Google analytics account.


Steps to follow

  1. Download GA plugin

  2. Install Google analytics plugin

  3. Activate plugin

  4. Register a tracking account with GA

  5. Copy and paste the code in wordpress dashboard

Let us work on the problem now, it is pretty easy to do.

Download GA plugin

Download the plugin from here or from here.

Install Google analytics plugin

Upload the GA plugin file in /public_html/wp-content/plugins

If it is a zip file, unzip it.

Activate plugin

Open wordpress dashboard and go to the plugins section.Activate the wordpress plugin



Register the tracking account with Google analytics

Click on  Add a new account in the analytics home page

Sign up

Enter the website details

Copy the analytics code

Copy and paste the code in wordpress dashboard

In wordpress dashboard, go to settings and you will find GA there.


Click on Google Analytics and you will be displayed with the GA settings screen.

Paste the tracking code in the GA script box.

Note: Make sure the tracking code is same.

Go back to Google analytics and see if the results are pulled in. If you do not see success again try. It takes some time to get the details reflected in.

Was it simple. Please drop a comment.

How to plan user survey?

Conducting survey can be a big challange if it is not planned and well defined methodlogy is followed.There are many ways to collect data from the users, which can be used for research and come up with better ways to make good products and value add to the services.

Some common methods are with the average costs

MethodCost ($)
Focus group2000-3000
User interviews50 per user

The methodology that we can follow are illustrated in the below table.



Survey Methodology to use

Major steps Tasks
Design MethodologyGoal clarification
 Overall study design
Determine feasibilityInfrastructure analysis
Develop instrumentsCover letter design
 Pre-notification design
 Questionnaire design
 Gentle reminder design
Select sampleSelecting the sample
Conduct pilot testSending pre-notification
 Conduct pilot test
Revise instrumentsRevise questionnaire
Conduct researchSend Questionnaire
 Attempts to get non-respondents
 Collecting responses
Analyze DataEditing the data and
coding open-ended questions
 Analyzing the data
Report preparationPreparing the report
Report presentationSending the report
 Walkthrough of the report

I hope the above table will help you to scope the work and plan a good survey.

How to prepare for e-mail User Survey?

There are many ways to collect data from the users, which can be used for research and come up with better ways to make good products and value add to the services.

Some common methods are with the average costs

Method Cost ($)
Focus group 2000-3000
User interviews 50 per user

The methodology that we can follow are illustrated in the below table.

Major steps Tasks
Design MethodologyGoal clarification
Overall study design
Determine feasibilityInfrastructure analysis
Develop instrumentsCover letter design
Pre-notification design
Questionnaire design
Gentle reminder design
Select sampleSelecting the sample
Conduct pilot testSending pre-notification
Conduct pilot test
Revise instrumentsRevise questionnaire
Conduct researchSend Questionnaire
Attempts to get non-respondents
Collecting responses
Analyze DataEditing the data and
coding open-ended questions
Analyzing the data
Report preparationPreparing the report
Report presentationSending the report
Walkthrough of the report

I hope the above table will help you to scope the work and plan a good e-mail survey.

Optimalsort & information architecture design – The IA of Optimal sort is questionable


What are you gone crazy? the information architecture of Optimal sort is questionable, as per my view the IA is good but it has missed a major chunk that is critical for the repeated users.

Let me explain it, I was in UK for a UX project for BSI-British Standards Institute. We planned to conduct a card sorting, the best choice we felt is optimal sort and i going forward created an account for optimal sort.

I remember my user id and password for optimalsort website. Now after 6 months when i came to the optimal sort website there is no link that will take me to the login page.

User Login section is missing on the home page

It says sign up but there is no login section

imageimage The major sections of the website is

Tour | What is it? | Sign Up | About us | Blog  

But where is the login section? This can be resolved by including a link that says, login here.

Hiding the complexity – a good UX concept

I bought my new tv this year and to do this i went to different showrooms, i was accompanied by a good friend "Sankar" along. I appreciate Sankar as he is good in making decisions and gives a good analysis. One thing that stroked me, was we see many tv and lcd and finally the one which came home was a 29" inch tv with a nice controls. The controls on the tv was clean, all the ports were behind the tv, so once i play dvd the wires do not drop in front of the screen.


Sansui 29 inches Flat TV (EKA32)


“Keep it clean” is the key that makes a good UI

We almost rejected all the TV designs in which we had the dvd player port displayed in front, as it will look ugly when we have inserted the dvd cords in it. The idea is of hiding the complex controls behind. This concept i can recall is well used by successful companies like NOKIA in making cell phones. The key pad are hidden behind a slide or a flip in the mobile phones.


We should use this concept to the maximum in UI design in software's. Let me give some examples how we can do the same.


Some Tips are

1. Hide it: Hide the detail sections of the interface by using collapse and expand controls.



2. New window: Use another window to show the details, it is a common technique which is used. It is a gentle reminder


3. Tabs: Use tabs to hide different sections of the application

4. Progressive disclosure: Display the next section when it is necessary to display it, For example only show the dependable section when the user has already made a decision to use them. The below image can help in explaining the same thing. comments replies

Let us make the interface clean, if you need more ideas for the same plz send an e-mail to

Where to insert the plugs - In tv console

I bought my new tv this year and to do this i went to different showrooms, i was accompanied by a good friend "Sankar" along. I appreciate Sankar as he is good in making decesions and gives a good analysis. One thing that striked me, was we see many tv and lcd and finally the one which came home was a 29" inch tv with a nice controls on the tv.

We almost rejected all the TV designs in which we had the dvd player port dispalyed in front, as it will look ugly when we have inserted the dvd cords in it. The idea is of hiding the illustrave controls behind. This concept i can recall is well used by successful companies like NOKIA in making cell phones. The key pad are hidden behind a slide or a flip in the mobile phones.