Shopping cart icons:
These icons are widely used,their presence indicates that the site incorporates e-commerce engine.
Mail icons are used to convey that a mail needs to be sent, inbox, mail this page to friends etc.
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.
These icons you will find in community sites & blogs.You need to write some comments - these icons are saying to you
In blog sites these icons are common however they are also available in articles & research paper websites.
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.
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.
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.
Bird eye view of the projects tasks to be carried on diffrent dates
WBS - Work break up structure
Roles & deliverables
First Step: Divide & Conquer strategy, Have a clear picture about the project.Divide the complete project in diffrent phases if possible.Each phase is now broken down into diffrent activities.If it is possible to break activites into sub activities then do so. Now map the complete chunk of phases to the diffrent dates, map the sub sections to the date available for the phases.Dates can clash as multiple phases can be worked upon by diffrent teams or same teams.
After following second step, We can map WBS as shown below.
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: email@example.com
Task analysis is performed for critical tasks that determines the fate of the web application.For example in an Airline website the critical tasks would be
- Search for flights based on price,timings,special offers & destinations.
- Airline ticket buying
- Finding Help & support
Each task is given to users & there behaviour,actions,system responses are evaluated.Mostly the person performing the task analysis accompanies the user while he or she is performing the task.
Design of the task analysis form?
After determining the tasks to be analyzed, a form is prepared to be filled by users who are going to perform tasks.A typical form will have an introduction,description of the tasks to be performed,user form,user notes,user feedback & disclaimer.
Task performance by users.
The users are given the task analyis form, they fill there details & continue with the task assigned.The expert who is perfoming the task analysis accompanies the user & notes down the user actions, the time he took to complete the tasks etc.
Presentation of the analysis.
The task analysis can be presented beautifully in the form of presenation.There are two ways to present it.
Single slide task analysis presentation
Multiple slide task analysis presenation
Single slide task analysis presenation
The complete task analysis is shown in one slide is the ground rule.This type of presentation we go when we are intrested to have a small presentation & the task is not so complicated.The slide will have the followings elements.
User details & background
Name: Sanjay Age:25Gender: male
Education Qualification: B.E
Competency Level: Expert
userOccupation/Work: User Experience Consultant
Objective to visit the site: Book a flight ticket
Problem Faced by Sanjay while performing the task: He did not know that on fare offered dates the tickets are already sold out He is not able to return to the booking page after selecting the seat.He is not able to figure out at what step is he inHe is not sure for which flight the tickets he has chosen for the TO journeyHe is also not sure about the seats for which he has chosen the ticket
Task result: Successful in completing the task There return tickets on the selected dates were sold out so he could not book the ticket.
Step by step description of task perfomed with system responses(In a flow chart)
Step1: User enters the login ID, password in the form & clicks on submit button
System response 1: The personal page is displayed with a welcome message stating the user name.
In this way the whole process is depicted on the single slide.
Multiple slide task analysis presentation
In multiple method screen shots of user steps & system responses are taken. Each screen shot is illustrated with the following details.
Page name: NYSE login page
Click no: 1
Activity: User types the URL in the browser ,he is looking for the login section. He easily finds it ,enters his credentials & clicks on Login Button.
System response: The page refreshes & the user is taken to the user home page.
Observation: User is interested to view the dividends on the home page.
Last but not the least
Finally in the end summary of observations & recommendations to improve the task will follow as shown below.
Observations & recommendations
1.It took 4 clicks for the user to accomplish his task.
2.Select period scroll bar is an intuitive feature in the application.
3.The Information Architecture of the application is user friendly so User does not face any major problem in completing his task.
4.Visual graphs to display the dividends data helps User to easily analyze the data & make decisions.
In this way Task analysis is performed.In case any clarifications & help please e-mail me: firstname.lastname@example.org
Card Sorting tool —> http://www.optimalsort.com
Ever you got intrested to decide Information Architecture of an application.You can easily perform card sorting using Optimal sort.The website allows you to make a free account & perform online card sorting.
Eye tracking stimulator —> http://about.stompernet.com/scrutinizer
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Using this simulation, you can get a better idea of how users interact with your site design.The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse.The parts away from the mouse will be deteriorated into lower resolution, both in detail and color.
Keyword suggestion tool —> http://freekeywords.wordtracker.com/keyword-suggestion-tool.html
Keywords are most important to make the site search engine friendly.Reseach shows that 60% of the users reach the websites by search engines, this makes the Keywords to be used on the webpages more important. Use the keyword suggestion tool to make your web pages search engine friendly.
Page ranking checking tool —> http://www.prcheckingtool.com/
This tool will check 30 different Google data centers and generate Google Pagerank (PR) for your website. This is also a good tool to try an predict your future pagerank as some data centers may display your PR sooner than the real toolbar
Website task management tool —> http://www.taskee.com
Taskee is a hosted website task management tool for small and medium size webdesign companies. Taskee simplifies website task management communication process and makes it easier and cheaper to collaborate during website testing process.
Visitor heat map tool —> http://crazyegg.com/
This is a wonderful tool, it makes you aware what the users are doing on your website.It generates Heat map about the user actions on your webpages.The mouse clicks on the webpages are shown as heat maps.The analysis can go deeper than this based on Search Terms, Operating System, Browser, etc…etc.Have a look at it, it's amazing.
Webrecorder tool —> http://www.dejaclick.com/
Web recorder is a free utility designed exclusively for Firefox. It helps you to bookmark multi-step recording.You can download it for free.
Mouse gesture tool —> http://www.gmdw.com/capstone/
This is a great effort from Sameul Goldwyn in using mouse as a usability testing tool.The mouse is like a fingerprint that shows the user's most intrested content on the web page.
Web accessibility check —> http://www.accesskeys.org/tools/color-contrast.html
AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. The accessibility of the pages can be checked by entering the url of pages.
W3C markup validation check —> http://validator.w3.org/
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.
Font collections —> http://www.dafont.com/
A good collection of fonts.
Most of the tools stated above give you a free account to try & even let you work on small projects.In case you need any clarifications mail me to : email@example.com
- Open source template some impressive templates
- Maxdesign great collections
- CSS play see it
- Changingman a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.
- CSS designs for you Free website templates built using table less XHTML and CSS
- 3 column layouts A set of three column layouts to be used
- Yahoo grid css The foundational GUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
- 6 shooter media collection of a variety of templates
- Mollio is a simple set of html/css templates
- Open source web templates The basic idea behind open source is very simple: When programmers can read, redistribute, and modify the source code for a piece of software, the software evolves. It is a great collection - I recommend to use some of them
- CSS page layouts - divide the page into different stunning sections using the source code
- CSS library - a complete collection of frame library.Form CSS, image CSS & DIVs + containers... many more
- x-designs good collection of templates
- sucking code - its a great gallery of templates that can be downloaded well for use
- box collections - use simple technique to make stunning frame sets on pages
- layout gala - a professional resource for other professionals
- Solucija a good collection of templates
- Jimmy These templates are 100% valid CSS/XHTML and compatible with IE5.0+, FireFox 1.5, Opera 8.5, and Safari 2. They do not use any hacks of any kind, and can easily be modified.
- Open source web design nice works of css templates
If you need any help or guidance drop a mail to: firstname.lastname@example.org
All the above resources can be easily used by developers & UX architects to have a great professional look to there designs.
What is wrong with e-commerce experience today?
What does online retail customers expect now?
Customers expectations have skyrocketed now in online retail & businesses who are not able to cater their needs are slowly moving out of business.
- Fully functional websites with up to date content
- Web sites designed to address the needs of users
- Easy search of products & information
- Clear explanation of can do & can't do tasks on the site
- A coherent user experience
Recommendations for online retail business
- Use scenario design and personas to optimize the effectiveness of your online presence
- Make only promises that you can keep
- Competetive pricing & search
- Use RIA rich internet applications to improve user experience
- Prompt customer service & resolutions
- Community building efforts
- Marketing & promotions by intutive channels like viral videos, CPC-cost per click,link exchange,google ads etc
- Easy task flows & work flows
- Security of user information shown upfront
- Accessible websites
- SEO - make the site search engine optimized as research shows - 65% of users reach sites through search engines.
- Proper branding focus - try to build a online brand for unique quality & service
In this way we can say that online retail is moving faster than expected long back.Need is to take this as an opportunity for making great User Experience applications.
Step one: Define goal & objectives of the session
>> Objectives - find brand first impressions & which key attributes lead to most positive & negative impressions.
- Assess users first impressions of the brand
- Assess users perceptions of most valuable & least valuable things in branding
- Asses users reactions towards the site in terms of trust,credibility & fulfilling objectivity
- Assess users first impressions of the design
- Assess users reaction to unwanted stuff in the design
- Assess users branding vsd prefrences
Step two: Methods to use
Average Income: Rs.15000/
Have visited a home finance site in the past 12 monthsTransact financial services online
Screen at least 10 users form the targeted users.It will be appropriate if users are form the same geographical area for which branding is focused.Conduct face to face sessions seperately with the users.Time for one face to face session should be around 30min.
Step three: First impressions
>> What were participant's first impression.From the face to face sessions pull out the first impressions.
>> The vsd which were chosen by most of the users will win here, highlight why users rejected the vsd & why they favoured the selected vsd.
>> What did participants percieve most value to them like the and,layout,colors used,emphasis on some features or any content topics.
Step six: Least value
>> What is least value to participants.
Step seven: Trust
>> Did they feel that they can trust the brand?Why or why not?
Step eight: Credibility
>> Did the branding seems credible?Why or why not?
Step nine: Objectivity
>> Did the branding seems objective in addresing the purpose of design.Why or why not?
Step ten: Reaction to unwanted stuff
>> What were the participants reactions to unwanted sections on the application.Did they prefer to have something that is not present in the current design.
Step eleven: Branding location
>> Which area of the design participants prefer to be used for branding.Did they prefer the top leftmost corner or top rightmost corner,or even bottom in some exceptional cases.
Step twelve: Important participant quotes
>> Highlight important quotes made by participants in there own words.
In this way we can select the vsd that will be used for the final branding.The above questions will defenitely help to come up with branding solutions.
Try them and if it helps, this blog has served the purpose
- e-commerce: These sites are used to sell products online through online e-commerce engine.Example of such sites include amazon.com, walmart, target.com etc.The deceding factor in these sites is number of sales comleted sucessfully.
- 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.
- 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.
- 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.
Let me illustrate it by examples, in any e-mail client, in the navigation area, we display the number of messages sent, draft and available in the inbox. These numbers help the users to be aware about different sections of the application without being overwhelmed what number of e-mails are present.
In the above illustration the number “6623” helps the user know that 6623 number of e-mails are present in the inbox, taking the same rule user knows that 49 drafts are available.
Linkedin needs improvement
Linkedin has used this strategy to its benefit in the top level of the information cycle effectively. For example it tells the number of e-mail is 2 – but i don’t think this is right,
A question – is this number 2 indicates the total number of e-mail present or new messages received. This the user will know when he becomes a regular user of liked in. For the record 2 shows the new messages received whom you have not read.
Linked in should also include numbers in “Requests to join”. this will let the user know that some requests are pending that he needs to approve.
SHOULD WE USE THIS ONLY IN E-MAIL SECTIONS ?
I suggest no, we should extend this to other parts of the application, where there is a need.
When to use this?
We should use this when the below 3 conditions are present.
1. Number – the number which will be displayed should be countable and should represent a quantity, i.a number of friendship requests, drafts etc
2. Decisive – user should be able to make a good decision based on the numbers displayed.
3. Need – The user need should be there to display the numbers.
Let us see some good examples
Use this feature in the application in your designs and you can make the user’s life easy.
Need more suggestions or help regarding similar areas please contact email@example.com
First step: Research on Website industry positioning
This research can be carried in the below manner.
- Client e-mail tracing: Read through the finer lines in e-mails send from the client, they mostly specifiy the industry sector in which they are positioned.Go through the meeting notes even to find out more, even you can schedule clinet calls to know exact details about the industry positioning of client business website.
- Online research - Forrester: Find out the latest industry trends that are affecting the website.What are the most important parameters that will affect the user experience on the site.Which features are most liked in the web application.If you can get Forrester account then your life will become easy in this respect else you have to do some searching in google.What makes the user experience good is important.
- Stream line Compitetive focus: Have a look at competetior's website, find out what are the best they are doing, the worst things they are doing etc.Try to formulate parameters & best practices by looking at the compitetion.Go through the client website also to have a good understanding about it also.
Second step: Finalize parameters
Collate the information from the above & ideate with the team to finalize the parameters.Once the parameters are done we can move on with the site evaluation.
Third step: Evaluate the website
Note : The biggest trick in site evaluation is that avoid taking a parameter first & try to find out issues related to that.Mostly if you do in this way you restrict your mind to see multiple issues on the website.My experience says "find out issues in the website & then classify it under suitable heads."
Fourth step: Evaluation presentation
We can either go for using word doc or presentation to present the evaluation.
Important tip: When we present the information in word doc, the biggest problem will be positoning the screen shots consistently.We can do this by placing the screen shots in tables & finally hiding the table borders.
In this way we perform site evaluations based on industry trends.In case you need any help & clarifications please mail me: firstname.lastname@example.org
Read more User Experience practices on my other write ups:
1. Stylesheets: Explain all the CSS that will be used in developing the website.If possible provide the file location of the stylesheets or even the files in the stylesheet document in the appendix if possible.
2. Logos: Include all the logos that will be used in the website.Provide the actual dimensions in pixels.The position of the logos should be specified in detail.If any writing is done on the logo specify the color of the text in Hex.Last but not least provide the logos file location & the format in which it need to be used i.e gif,png,jpeg etc.
3. Color to use: The color to be used in the website should be specified in Hex, with a shade card view.The colors used for Text,Layout,Body,navigational links,column lines etc should be presented seperately.
- 5. Home page presentation: Include the mission of the home page in short with the complete look & feel of the page.The look & feel will specify resolution in which the page can be best viewed.The page background has to be specified here.Home page- how it looks when the page is resized is also important.
6. Individual page style needs: Divide each page into prominent elements & sections first.Now describe each element with all the look & feel requirements.This section will be the most important as it is very specific to diffrent sections on the page.Include the style, width, images used & color of each elements.
7. Extra elements in the website: Focus on the additional elements present with the description of the elements.
8. Images & VSD: Feel free to include images & VSD in the above sections to make the styleguide descriptive & helpful for the development team.
In this way we can easily prepare a styleguide for a website, the same can be also done for software system however with complete focus on the software elements.
If you need any help & clarifications please mail me: email@example.comRead more about User Experience on my other write ups: