This document can be considered as main document for the MSc Interaction Design coursework. This course focuses on the role of interaction design in interactive systems management, contribution of cognitive psychology to interaction design and demonstrating high level key transferable skills. This document is related to the identifying bad interaction design and critically evaluating current research in that area. I have chosen topic "Usability of Websites". This document will illustrate how to analyze bad website and provide the recommendation to improve the website design.
Purpose of the document
Purpose of this document is to find the website which has bad interaction design and critically evaluating current research in that area. I have chosen topic "Usability of the website". This can be considered as final document for the interaction design coursework.
Desktop research has been conducted to produce the best practices outlined in this document. This document is resulted from some of references on web as well as from some books. A list of research sources consulted can be found in appendix 6.
This document includes following sections:
Evaluation of Interaction Design
In today's world of internet, everybody surf on the web and used to do lot of his task while surfing. We used to visit lot of website and gather information from worldwide web. But nobody care of how the website has designed? Website we visited was easy to use? Was that secure to transact? etc. there are lot of question for which we are not aware of while surfing. The reason I have selected this topic is there are lot of lot site on WWW (World Wide Web) which are having very bad design. Can we trust such sites? , Is it secure to transact by using such sites? We should aware of the bad design and also able to recognize such bad site providing fraud information which is not trustworthy. Second thing is that usability plays very important role in any kind of business. If user is not satisfied with the product then it's going to affect on the business. User satisfaction is the key to grow the business and usability play master role in the user satisfaction. Hence it is very essential to concentrate on the usability of the websites.
What is Usability?
Usability is nothing but relationship between user and the device with which he is interacting. User should feel comfortable while using the interactive system, this applied to computer, website or any other electronic device. When user is interacting with any device he should happy with whatever the feedback given by the device and he could able to do his task without any difficulty that is nothing but usability. Usability is important for everyone for people, technology and for business. The usability means user can learn things, can complete his task fast, reduce mistakes and finally satisfied with the design.
Usability Best Practices
This section of the document will illustrate the some of the guidelines for the usability of the website. Below are some points which plays important role while calculating usability of the website.
Accessibility of website
While dealing with the accessibility of the website it is important to make our website accessible to the users who are having disabilities. Website does not rely on colors only to convey information. There should be test-plug-ins or applets for accessibility. Website must ensure that script allowed accessibility. Website should manage multimedia providing the equivalent pages.
Cognitive Psychology: User expects that disable person also able to access the website.
Master page and Homepage Design
Homepage is the first impression of any website. Good website has very attractive homepage according to the domain of the website. It must be ensured that homepage should look like homepage with all the major options. Home page should be short but descriptive. User can return to homepage within second. Homepage should maintain proper text-image balance. Homepage will not be below the fold. It should be clubbed into visible screen. Master page is the template which can be visible on the each page of the website. Master page is like heart of the website. It is half done if proper master page is designed for the website.
Cognitive Psychology: User determines quality of the website by looking to home page. He doesn't want to drill down the website and expects all options and purpose of website should be on homepage. He wants all the information on the visible screen without scrolling.
Master Page Structure
Page structure should be proper for the good website. Important items should be placed consistently and on the top. Level of importance should be maintained and items should be aligned on the page. Fluid layout without scroll stopper and moderate white spaces contribute much for the good designed website. Appropriate line spacing and page length should be selected.
Cognitive Psychology: User anticipates some items on the screens and comfortable to access items on the top rather than scrolling down. It is human tendency that he will first look on the top then moves to left, then right and finally down.
Navigation and work-flow
Properly designed website should have well structured navigations. Main navigation should be easily identifiable, clear and concise. Logo should be connected to the homepage. Number of buttons links should be reasonable. There should be breadcrumb navigation to provide feedback on user menu. Primary menu should align to left. Website should have clickable 'List of Content' on long pages.
Cognitive Psychology: User likes to move from label to label. He can divert his mind at any point and want to navigate to another page. User can confuse by seeing meaningless tabs. He wants to see where he is in the website.
Individual Page Structure
Rapid scrolling for reading should be provided on the pages of website. Horizontal scrolling looks very bad so it should be eliminated. Ideally scrolling should be replaced by paging. User feels comfortable in paging rather than scrolling.
Cognitive Psychology: User doesn't like to scroll horizontally. User would like to move page to page.
Each and every page of the website should contain meaningful and descriptive heading. Important rows, columns should be highlighted. User could easily identify what would be the content by just looking at the headings and tittles. Level of importance should be maintained while giving the heading in the proper hierarchy. Headings should convey exactly what it does. It will not be ambiguous.
Cognitive Psychology: User will look at the headings rather than the other content. He may confuse if headings are not meaningful. He likes to reduce option by abstracting important points.
Hyperlinks and data
Proper hyperlinks are the key for the good websites. Website should have meaningful link labels with link to the related content. Clickable areas should be easily identifiable. Misleading cues to click should be avoided. Hyperlink should change its color if once visited. Pointing and clicking facility should add advantage to the website. External and internal links should be clearly visible. Link should be pointed to proper and related page. Text appearance should be with proper font. Mixed case or prose case will be good. Bold text should be rarely used. Proper color coding, highlighting information, using proper font and ensuring visual consistency are some of the keys to design good websites.
Cognitive Psychology: User looks for the clickable areas. He tries to click on the items which he likes. User may confuse whether images are clickable. He likes to read with medium sized font. User generally attracts towards movements, large objects and bright colors.
GUI and Multimedia
Website should contain good graphics, images, multimedia for attractive look. There should be simple background label clickable images. It should be ensured that website image convey intended message and images used are limited. Website should used video, animation and audio properly.
Cognitive Psychology: User can analyze images and graphics rather than text. Watching video will be interesting for them. User may get frustrate if audio or video taking lot of time for buffering.
Every website must provide 'search' facility to search particular data on entire website. Search should not be case sensitive. It should be on each and every page of the website. Website should notify user when there are multiple options available. Usability testing is related to the testing the website by applying various methods.
Cognitive Psychology: User likes to search for the particular item instead of going through entire website. User would like to refine his search.
Mistakes that usually find in web design
Below are the some general mistakes that usually find in the web design.
Meaningless notation and convention
It may happen that user has to put his own effort to find out what the notation or convention wants to convey. User cannot understand what does that word means. This happens because of using complex language or slangs used in the website. It would be better to avoid local language, slangs or complex language in the website. It should be taken into account that notation used in the website are proper.
Sometimes it may come to view that there are very long and scrolling pages appears in the website. User doesn't like to scroll the pages in the website. He feels like he is reading the book instead of surfing. It would be better to have text fit to the pages and user can read it without scrolling.
Hyperlinks not changing color once visited
Most of the websites doesn't have this facility. Hyperlink remains as it is if it is visited by user. Due to this user get confused which links he has visited and which not. User will visit the same link again and again, it may cause frustration for the user and he may close the site look for another option. It will be better to provide this facility while designing the websites.
Reading while surfing
Some websites has word or PDF for online reading. As mentioned earlier, user hates to read with document while he is surfing internet. It may divert user from being complete his desired task. User may get embarrassed by seeing lot of information in the form of PDF or word. It should be better to avoid PDF or word for online reading.
Same Font throughout the website
It would be highly undesirable to use the same font for all the text in the website. User should differentiate between headings, tittles and text. In case data available in same font then it will be very hard for user to bifurcate headings and tittles.
Advertise on web
There shouldn't be such element on website which will look like advertisement. It is OK if it is shopping site but for any other site it should be strictly avoided. It may change user's mentality towards the website.
Some website provides search facility but the results appearing after search are very poor and irrelevant. The output of search is not scalable and user doesn't find what he is looking for. Such kind of search may frustrate user. Sometimes it may happen that user is not able to find 'Search' text box on the page or search may take lot of time to produce result.
New window to open link
In some websites it may seen that if user clicks on the link, it opens in the new window. Any user will not expect that he should surf with lot of windows open around him. He may get tired of closing each window. He may distract from his original task if new window produce something new. It should be strictly avoided to open new window for each hyperlink on the page.
Evaluation of interaction design
Let's consider example of bad interaction design and critically evaluate it based on the some standard guide lines mentioned in the above section of the document. We will take website of New Zealand Chess Supplies Ltd, located at http://www.chess.co.nz/ on the internet. It is pretty hard to decide what this site is about? But looking at the name it indicates that it should deal with supplying the product of chess material. The screenshot of the homepage of website is shown below,
Now, we will illustrate the content of this website with above mentioned criteria.
Accessibility of New Zealand chess supplies Website
In case of the accessibility of this website, it doesn't seem that this website is accessible for the people having disabilities. The website doesn't manage any multimedia file like video, audio or animation to help blind people. To ensure whether script allowed accessibility we need to take certain tests like "Hi Software Â® Cynthia Saysâ„¢ Portal". We will test this website for accessibility. This is reference to http://www.contentquality.com/ to ensure accessibility of website.
Below is the result of the test,
The test result is "Fail" means this site not passing accessibility criteria.
Homepage evaluation of New Zealand chess supplies Ltd
As mentioned earlier, Homepage is the first impression of the website. Here looking at the homepage of this website, It looks rubbish and unattractive. Home page doesn't have proper heading with distinct font. Homepage has not indicated who are they? And what they do. Looking at the home page we are unable to predict what they do? Text and Image balance is not proper also homepage is not descriptive. Menu navigation used on the homepage is not indicating what it actually does. There is no logo or slogan appearing on homepage which will directed to the homepage from any page of the website. Menu list is named as "CLICK ON FOR" which is not suitable. All contact details are mentioned on the homepage instead of having separate tab or page. Homepage has no image or any other multimedia to know user what is all about. Headings are lying at the bottom of the page. Headings are not located at the top of the page. Font used in the homepage is too small as it acts as main navigation and headings. No image or any other multimedia files are added to the home page.
Page Structure of New Zealand chess supplies Ltd
As per the guidelines, page should have all important items placed at the top. In this website nothing appears on the top. Page length selected is not proper lot of empty space on the page. Level of importance not maintained on pages. Pages are very long and user needs to scroll much to get information. Page scanning is not done expect the homepage. There are no links to navigate to the homepage. Below is the screen showing page structure of the website.
No link to homepage on top. It is at bottom of the page.
No navigation Menu on pages
Page structure is not proper as lot of empty space in this area.
Work-flow and navigations of New Zealand chess supplies Ltd
Work-flow and navigations are very poor as this website is considered. No navigation items found in the website except in the homepage. There is no logo, no slogan, no buttons, no proper links, and main thing is that there is no breadcrumb navigation. User will not understand where he is on the website. Website has long scrolling pages. The most of the discrepancy is appearing in the screen 3.
Paging of New Zealand chess supplies Ltd
New Zealand chess supplies website has very long and scrolling pages. Some pages of the website have lot of external links as well as internal links are saturated as shown in screen 4. Also the 'order Form' terms and conditions are not properly formatted. This is shown in the images below.
Lot of saturated internal links on page
* Screen 4
New Zealand chess supplies website has not proper headings, tittles and labels. Some contact details are shown as headings in some pages which is not relevant. Fonts are evenly spread throughout the website so it is very difficult to bifurcate between main headings from sub-headings. There are no levels of headings followed in the website. Just informal headings are used to name the pages.
Sub heading font large in size than heading.
Hyperlinks and data of New Zealand chess supplies Ltd
New Zealand chess supplies website has lot of hyperlinks. There are lots of external links found dead. Some found just linked to the one image. It is very difficult identify links from the text. As there are some texts which is colored blue and underlined but it is not link. It means clickable areas are hard to find out. Huge numbers of hyperlinks are used in the website. Text is not properly placed in the website. Text with poor font, poor color and poor size has been used in the website. Color coding is also not proper. Text in the website spread in random order there are no bullets and numbering done for the data. "Order form" not designed properly. It has not mentioned in the form that which fields are mandatory which are optional. Some fields in the form are single lined. There is no checkbox available to accept terms and conditions in the order form. There are lots of misleading cue of the link as shown in screens below.
No bullets and numbering for the text.
Highlighted areas looks like hyperlink but it's not
GUI and Multimedia
New Zealand chess supplies website has very poor Graphical User Interface including homepage. It is far away from attraction. Other pages of the website are having plain white background without images. Not use of images in design of website. Some images are there but they are displaying in new window. There is no use of graphics, video, audio or animation in the website. This website is lacking in graphical user interface.
Page is without any graphics, multimedia on it.
New Zealand chess supplies website has not provided search facility anywhere. It is not possible for the user to search any kind of data on this website.
Now we will perform positive analysis of the same website located at http://www.chess.co.nz/ on the internet. As we perform negative analysis of this website and find lot of defects in the websites. There are some good things also present in the website. Let's illustrate it one by one against general mistakes of website guidelines mentioned in above section 4.2 of the document.
Meaningful notation and convention
Even though notations are not properly placed in the proper order but the menu tittles are meaningful and convey the desired message. At home page every notation clearly indicates what it does.
Hyperlinks with changing color
Most of the websites is not having this facility but this website changes the color of the visited hyperlinks.
Color of visited link changes to pink.
There are no word or PDF files used in the website for the online reading. Online reading is just by scrolling the pages. Website also has facility to jump to desired information on the page so no need to scroll the entire page to get the information.
The website has combination of the different fonts. User can differentiate information by analyzing different fonts. Web content of the page are indicated by the different font.
New Zealand chess supplies website has no element on the any of the page which looks like advertisement. It is shopping site still it has not included the advertisement of the product. Flashy advertisements can ruin the website. It is better to avoid the flashy advertise on the home page or any other page.
Open link in the same window
Some websites opens new page in the new window. User may get frustrated by looking new window for each click. This website opens links in the same window.
Recommendations to improve usability
To improve usability of the website, there needs to be some improvement in some areas of the website. We will illustrate these areas of improvements with respect to above mentioned points.
Accessibility of the Websites
Work-flow and navigation
Hyperlinks and data
GUI and Multimedia
Accessibility of the website
New Zealand chess supplies website has accessible for the normal competent user without having any disorder or disabilities. To make this website accessible it must be ensure that script of the website allows the accessibility while designing the website. Some applets should be there for accessibility. Some multimedia pages like audio files should be added to the website s o that it will help blind user to listen to the audio. Script of the website should be designed in such a way that "Cynthia test" which we have performed in the above part of document shown in *screen 2 will result "Pass". This means that the website is passing the accessibility criteria.
As we mentioned in the above part, Homepage is the first impression of the website. Homepage defines quality of the website hence homepage should be properly defined. New Zealand chess supplies website homepage is poor so it needs to be reconstructed by taking some points into consideration. Below are some suggestions to improve homepage.
Home page should have logo and tagline on the top of the page. Logos should appear on every page of the website and link to the homepage.
Home page should have some basic information about who are New Zealand chess supplies Ltd and what they do. This information should be included in the separate menu named "About Us". It will help user to analyze basics of the company.
Label "CLICK ON FOR" (Generic Instruction) should be replaced with "Menu" or some other suitable name. It will sound better.
Contact information included on the home page should be grouped into separate menu named "Contact Us". User will contact by clicking on the "Contact Us" menu.
Proper footer with copyright, privacy statement, feedback, news room and site map should be included in the home page.
"Search" text box should be there on homepage. User can get desired information by inputting text in the search box.
Some video or image files of satisfied user should be added to homepage as a multimedia. Video file with his testimonial. It will help user to clear their mind that there is no hidden things after enrolment.
Text "Welcome to our Website" is a link to their product. Product should be linked with other links.
Page design of the homepage redesigned as it has lot of empty space.
As it is shopping site it should contain at least one advertisement like a moving banner. It should not affect the main navigation. It should be named as "Advertisement" so that user will not get confused.
Above mentioned, page will act as a "Master page". It will reflect to all other pages excluding the content place holder.
Master page: It is a design template page whose content will appear on every page of the website and the information related tom the individual page will lie in the content place holder. Master page will help in the navigation of the items and quick link to the home page. Master page design will change the lookout of the overall site and make it attractive.
Home page should be like this Home page should be like this
About website or act as content place holder.
To be removed
Company name, logo and tagline
We just explained some of the solutions for the homepage but other pages also be modified to make it user friendly. Below are the some recommendations to improve the page structure of the New Zealand chess supplies Ltd website.
Content of the website should lie on the entire page as there is lot of empty space on the right hand side of the page.
Navigation menu should be on the top of the pages whereas it is on the bottom.
Graphical user interface of the rest of the pages are very poor. It should be decorated with proper background.
Page length should be reduced.
Proper formatting of the content is required as lot white spaces appear in some areas and cluttered display appears in another area.
Name and logo of the company should appear on each page which will be clickable and directed to the homepage.
Some shapes has been vertically added which has to be removed and content should be added in the empty area of page.
Work-flow and navigation
Navigation structure used in this website is very poor. It is essential to arrange the navigation menu in the proper order. To give the proper navigational look to the website here are some suggestion for navigation control.
The main navigation items which are placed at the bottom of the pages should be moved on the top left corner.
Two other tabs should be added on every page of the website named "About Us" and "Contact Us on the top. User should access these two tabs from any page.
Clickable list of contain should be placed on left vertically aligned.
Breadcrumb navigation should be added to website. It will help user to know that where he is exactly.
New Zealand chess supplies Ltd website has very long scrolling pages. Even after having long scrolling pages, it has provided the facility to jump to particular location. It does not have horizontal scrolling. It indicate that everything is fine regarding to the paging except some suggestions given below
It would be better if long scrolling pages are placed by paging structure
If we click on the "Welcome to our website" link on the homepage, it will navigate user to the sitemap which seems improper. It will be better to remove this link.
Empty area of the page on the right side should be utilized to fill the content of the website.
New Zealand chess supplies Ltd website has not proper headings and labels. To give proper headings to the pages below are some suggestions
Headings of the pages should be bold and with large font. We need to re-arrange the heading levels. Hyperlinks used at the bottom of the page can be used as headings for the respective pages.
Category levels of the headings are in the correct HTML order.
Individual page tittles should be identified by its font and colors. It should be descriptive and unique. No matter if it is repeated.
Bullets and numbering should be there for list of items.
Proper tables and frames should be inserted for formatting of data on pages.
Unnecessary 'Notes' and generic instructions should be removed. Notes like
"Note: All transactions through this website are via SSL (secure socket layer certificate) To place an order on-line click on the Order link at the bottom ofÂ each section category". And generic instructions like "Click for illustration where indicated".
Hyperlinks and Data
This website has much more hyperlinks but still those are not arranged properly. User may get confused while going through the links. In order to improve usability of the website, below are some recommendations for the hyperlinks
In the website there are some texts which look like hyperlink, but it is actually not link should be removed.
There are some hyperlinks which directed to images, some information should be embedded with the images which will give broad idea to the user about the product.
Some more hyperlinks should be added to website in order to connect to the home page and important content. No matter if those were repeated.
"Email" hyperlink should be removed as it is not necessary.
Text on the "Chess Book" page is not looking like hyperlinks but those are links. Those links need to be edited and proper naming should be given to links.
Length of the hyperlinks on the chess book page should be removed.
There is no image hyperlink in the website. Some images linked to its details should be included in the website.
At some points in the website, font used is lower than 12. It should be at least 12 in size. User hardly likes to use the font size less than 12.
Font size and colors needs to be changed as per the importance of the content.
Texts which are not hyperlinks should not be underlined. Underlined text in the website need to be removed
There should be list of most attractive product named as "Our feature product".
"Order form" of the website has not added screen based controls. It is not indicated that which field is required and which is optional.
Checkbox needs to be added to accept terms and condition of the "Order form".
"Order form" need to be reconstructed as some field are single lined. It should be multiline.
We can add some more links named "FAQ", "Customer Services" and "Product review". It will help customer before purchasing the product.
GUI and Multimedia
Graphical user interface and multimedia decorates the website. It is very good idea to insert some multimedia items in the website. In case of this website there are no single multimedia items seen over there. Below are the some recommendations which would be better to improve usability of the website.
Some pictures of the featured products should be added on the page so that user can able to analyze the product.
Some of the video of the product demo should be added to website. It will help user to analyze how product works.
Photos of the company buildings and other office locations with area map should be added to the "Contact Us" tab.
There should be some advertisements for any discount which will attract the customer.
Simple background image should be added to individual web pages.
Generally each website provides search facility. In case of the New Zealand chess supplies Ltd website, it is not there. There should be only some recommendations for the search which are listed below
"Search box" should be provided on each page of the website.
If possible advance search options will be better on the homepage by which user can refine their according to the product or prize.
"Search box" should be on the visible area of the page means it should be on the fold of page.
These are the some recommendation for this website to improve usability.