UX capability presentation

How to prepare UX capability presentation for prospective clients?

A good UX capability presentation can make or break a new project & a prospective business partner so all business leaders should know the fine benchmarks for the presentation.The manner in which the slide is organised, the template used,the color scheme used etc should be chosen with care.Never choose the color scheme that may offend the client due to their cultural backgorunds.

First step: Find a suitable theme to be used in the presenatation.If you are using MS word 2007 then you can be a lucky as it asks for themes in the begining & even you can download the themes online when you are going to open a new ppt.Make sure the theme you selected matches the clients business,process,branding,project etc this will engage the client.

Second step: Once the slide theme is selected, work on the master slide.Include the client logo & your company logo on suitable places on the master slide.Include the slide number.The other things that can also go in are copyright information.

Third step: Work on the introduction slide.Mention your company's name in bold,the punch line & the name of the ppt.

Fourth step:Include some funny images & cartoons depecting the importnace of User Expereince.You can also include famous quotes on UX like.Design is not just what it looks like and feels like. Design is how it works
– Steve Jobs

Fifth step:Mention all the services your company offers in UX consulting on a sperate slide.

Sixth step:On a new slide state the services you will provide for the clients industry.In the consequite slides explain each service in detail.

Seventh step:Leverage technology slide, state how your service can help the client to leverage technology.

Eighth step: Schematic diagram of the methodology you follow in UX.Explain the methodolgy in detail.

Ninth step: Schematic diagram of UX models like garret, funnel of UX etc that you follow which will help the client's business.

Tenth step: Include case studies of previous projects with benefits & screen shots followed by way forward.Capability ppt needs a lot of work & care, i have only highlighted the major elements that are usually present in the ppt with there sequence.

In this way you can make a crisp & lucrative UX capability presentation for prospective clients.If you need any help & clarification please mail me: smartsanjaykumar@gmail.com

Morae - 10 Steps to Morae Usability Testing

Morae is a tool that has made its place in the Usability Testing space in a short period of time. It is a combination of three software’s. In the early days the users interactions with the system is recorded with a camera and it was analyzed for the usability tests results.However, the advance of software’s has made a big leap in Usability testing. This software’s can do the following kool things.

Kool 1: Once installed on the users system they record user’s actions and even differentiate the users mouse clicks. The left hand click will be displayed in a different color with a circle around it & the right hand click will be shown in another color.
Kool 2: The software will generate evaluative graphs that can be used by the analyst to come to issue conclusions by him.
Kool 3: The analyst can observe the users action on a separate screen by installing the Observer on his system. There will be delay of some seconds in the broad casting of the videos.
Kool 4: The analyst can manage the usability tests & projects generate graphs & reports in the Manager module.

THREE DIFFRENT SOFTWARES IN MORAE
1. Morae Recorder: This exe file is software that is installed on the user’s machine on which the user will take the tests.
2. Morae Observer: Installed on the analyst machine to view the user’s action.
3. Morae Manger: Used to manage different projects & generate the usability reports.
10 Simple steps to work with Morae.
Step 1 : Download the software
You can download the software from Morae website
http://www.techsmith.com/company/contact/moraetrial.asp
Step 2: Install the software on your machine. There will be three exe files. Install them one after the other.
Step 3: Install the Recorder software on the user’s machine (If you want to have a separate machine for the user and want to view the users actions at the same time.
Step 4: Check the connection of the system. See that the computers are connected via a LAN network or through internet.
Step 5: Run the recorder software on the users machine. You will get the below screen. Click on the red button to start recording. To run the application click on the red button present on the right hand top corner.

Step 6: Let the user work on the system. Run the Observer application on your machine. Enter the ip address of the users system to connect to it in the pop up window. Once you are connected you can see the users actions right here on your machine.

Step 7: After the recording is done. Visit the user’s machine & click on to stop the recording. You can stop the recording by right clicking on the right hand panel icon. Once the recording is stopped Morae Recorder will prompt you to save the file that will be a .rdg file in the local machine. Save the recorded file on the users machine.
Step 8: Once you come & see in your machine, Morae Observer will ask you to save the file in a video format on the machine. Save the file in the video format.
Step 9: Open Morae Manager on your system. Create a new project. Import the .rdg files & the video files and start playing with the reports.


Step 10: Generate reports using Morae manager & impress the clients. Get your usability test done with a Big check from the client.
For more information & DEMO VIDEOS , visit the link below
http://video.techsmith.com/morae/latest/demo/ondemand/index.html

Plastic 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.

For groceries we used to visit similar shops as shown above

hyenalabs-plastic

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.

hyenalabs-shopping experience 3

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

Clean interface design

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.


hyenalabs-crops


  “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.



windows-vista-firewall-path

Some Tips are

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

Collapse_And_Expand_Slides_In_Outline_Pane___To_Expand_Selected_Or_All_Slides_Ri


 


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.

Digg.com comments

Digg.com replies

 "Let us make the interface clean", should be the main goal in all interface designs.

Effective search 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




Stakeholder interviews

As UX architect's and consultants we all have seen or at least heard about stakeholder interviews. In this blog i will show you how to prepare for stakeholder interviews . So let us see how we go about. Before a stakeholder interview is conducted a invite letter is prepared to send across the stakeholders. I am going to speak about the invite letter here, You will learn how to create one, send it and then conduct the stakeholder interviews.



Two types of stakeholder interviews
In person interviews - interview may last from 30 minutes to 60 minutes
Group interviews - with 4-5 people it will usually take more than 60 minutes

Lets begin

Step 1: Decide the type of interview you are going forward. If you are going with the group interview then there will be a slight change in the Agenda of the interview, the change i will explain in the below sections.

Step 2: Create the invite letter. The stakeholder interviews are done based on some questions, these questions are wrapped in a invite letter and send. A typical invite letter will have the below section. Take a word doc and illustrate the below sections and Magic happens - you have prepared the stake holder invite letter.

CONTENT OF STAKEHOLDER INVITE LETTER

  • Objective of the stakeholder interview

  • Scope

  • Venue

  • Agenda

  • Questionnaire


A typical objective can be
"The stakeholder interview is designed to gather business insights form the key experts who are working with the product. The focus of the interview is to gather the business needs and user needs form the stakeholders. A set of suggestive questions will be posed and their list is at the end of this invite letter."



A typical scope can be
"The stakeholder holder interviews is totally focused on improving the user experience of the site. The inputs gathered will help us to define the persona and usability goals."

Venue
"You know what should go here - when where you are going to conduct it"
If there is a bridge booked then, mention the bridge numbers.

Agenda
Agenda is a little tricky, i am giving you a example. Please mention the time zones correctely, EST or IST.....
Questionnaire
A sample questionnaire is mentioned below. You can tweak the questions below and send this word doc to the stakeholders .

1. Define purpose/vision for the site

* What is the purpose of the site?

2. Develop goals for the site

* How would you define a successful Web site for your organization?
* What does success look like? How will you know when you have been successful?
* How would you describe the site?
* From an organization’s viewpoint?
* From a user’s viewpoint?

3. Define audiences & goals

* Who are the users of the site? (Primary and secondary users)
* How would you describe the users? (User characteristics, i.e., age, experience, education, etc.)
* Why will they come to the site? (User needs, interests, and goals)
* When and where will users access the site? (User environment and context)
* How will users access the site? (User computer settings, i.e., connection speed, resolution, etc.)

4. Conduct task analysis and prioritize tasks

* What will users do on the site? (User tasks, content, features and functionality)
* Which tasks are critical to users’ success on the Web site? (Criticality)
* Which tasks are most important to users? (Importance)
* Which features of the site will users use the most? (Frequency)
* Which features are prone to usability issues? (Vulnerability)
* Which tasks are critical to the organization’s success on the Web site?
* How often will users frequent your Web site?
* What will compel users to return to your Web site?

5. Determine measurable usability objectives

* Which tasks should users be able to accomplish easily with few errors? (Efficiency)
* Which tasks should users be able to finish quickly and efficiently? (Effectiveness)
* What level of satisfaction should users have after using the site? (Enjoyability)

6. Discuss expectations, requirements & preferences

* What is your vision of what the site should do?
* Describe your initial view of the project. What do you think the project should entail?
* What prompted the redesign?
* Who will be the key point of contact?
* Are there any restraints, mandates, or guidelines for the site?
* Are there any sites you would like to model or a particular style that you prefer?
* What characteristics/attributes/attitude should the site convey to users?

7. Determine accessibility requirements and needs

* Is the site currently accessible?
* What type of accessibility testing has been done?
* What types of accessibility tools are being used?
* Who is the key point of contact on accessibility issues?

8. Identify available resources and training needs

* What level of resources is available for site updating and maintenance?
* Do you have content writers skilled in writing for the Web?
* Are there graphic designers on staff?
* Who will be responsible for programming and maintaining the site?
* Who is in charge of site marketing and promotion?

9. Discuss initial technology needs

* What are your hosting needs?
* Do you currently have a domain name or do you need a new one?
* Are you currently using a content management system? If so, which one?
* Are you currently logging Web metrics? If so, what metrics are you currently capturing?
* Do you currently have a search engine? If so, what type of search are you using?

10. Timeline and Project Plan

Step 3: Send the invite letter.

Step 4: Conduct the stakeholder interviews.

The above composed docs can be send as an invite letter to the stakeholders. The idea behind the invite letter is to make sure the stakeholder knows what you will ask and they have clue, and if they want to do some R&D they can do and come.

Happy stakeholder interviews.

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.



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.

 








 

 

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 –
Games)
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.

Iconesque web images for best usability

To convey the user important information & action steps we use icons in our design.This makes the application look asthetic & clean.I have collected some of the images from diffrent web applications & websites to give a wonderful insight into the diffrent patterns that can be used in icons.


Shopping cart icons:
These icons are widely used,their presence indicates that the site incorporates e-commerce engine.



















Mail
Mail icons are used to convey that a mail needs to be sent, inbox, mail this page to friends etc.












Print
These icons are used to indicate that the current page can be printed by clicking the icon, in most of the cases the printable version of the page is printed.








Feedback/Comments
These icons you will find in community sites & blogs.You need to write some comments - these icons are saying to you







Posts/Articles
In blog sites these icons are common however they are also available in articles & research paper websites.











Arrows
Mostly arrows are used to put emphasis on a particular section or highlight a point.They are usually used to invoke the user to take action.



















Bullets
The function of bullets is to highlight the important points,steps, parts etc in the applications.









Hope the icons gave you indepth view of how they easily enhance usability in web apps.

Top online retailers "ADD to Cart" action buttons

Have you ever wondered why amazon.com,walmart,big W,Target USA,JC Penny,E-bay are the most visited online retailers.The answer lies in the User experience they provide to the users.The most important section in online retail is making the users click on "Add to Cart" action button & "Check out".If you are able to make the user do this two critical steps easily then your sales will skyrocket.

Therefore the importance of Add to cart buttons becomes more important to accomplish this.The below action buttons i have collected from popular online retailers, hope this will give you a deeper perception on the creativity used in "ADD to cart" action buttons.
































Get inspired by the above designs & make a good UX for your online retail users.Please drop an e-mail to me at: smartsanjaykumar@gmail.com if u need any UX clarifications.