Unit 34: p2 - usability of websitesAmazon, tesco & nhsUsabilityAmazon

The responsive design of amazon allows for users to view the site on desktops, laptops,

mobile phones and tablets. Responsive design means that the site will change the layout

due to the device, for example if one were to look at the amazon website on an iphone, the

design would change to a mobile version of the amazon website, and a small banner would

appear notifying the user that amazon has a mobile application for ios.

Retention of users through to completionThe success of amazon lies of selling goods via the amazon website, if the website cannot

generate and sales, the website has failed and the business will have failed – if there is no

money coming in from the website, the business will not be able to operate and pay bills,

therefore the retention of users through to completion is of high importance for amazon, as

with any other e-commerce website, as revenue is generated via the sale of goods on the

website.

Nhs

The nhs website homepage shows a lot of links and information to the users of the website

– this makes sure that everyone gets to where they want to go on the nhs website quickly

and with ease. Sections, for example navigation, collapsible widgets and search components

allow for the user to both easily find information on the website, plus customize the page to

their liking.

Search functions allow for an easy to use website – increasing usability. Search allows for

users of the website to input a term, for example “asthma” and then find pages relating to

the topic, asthma.

Usability on the nhs website is very important, as this website is an information hub for the

national health service, topics and information must be readable and valid, as this website is

official and must work 100% in order to properly serve the nation’s healthcare issues,

queries and questions.

Retention of users through to completionThe nhs website does not require sales or revenue to keep the business stable, however the

website still needs to be successful, therefore analytics monitor the nhs website, allowing

for the nhs to see what is a success on the website and what is not, the “bounce rate” or the

rate at which users are on the site for a second and leave, without reading any main

content, will determine how successful the website is upon first glance, where most users

will decide whether or not they are going to read the content, or whether they are going to

try another website.

Tesco

The tesco website homepage shows many navigation links and banners – a sort of portal to

shopping, offering all tesco shops and departments on one page. Topping the page is a

navigation bar with general categories, bellow this is a slider element and bellow that is

another navigation section - offering plenty of choice for customers, also showing all

departments of the tesco website.

The usability of tesco is important as it serves as a shopping experience for tesco customers

– if all the users shopping is done online, the website must work perfectly for the user to be

pleased with the service and to get the shopping done quickly, otherwise the tesco website

has failed its purpose – of making shopping easier for its customers by offering an online

experience.

Retention of users through to completionAlike amazon, retention of users through to completion is an important factor for the tesco website, as this is the sale of shopping and other goods via the website, however this is not all that important for the business as a whole, as if the tesco website sales reduce, there are still physical stores, meaning that if the website were to ‘flop’ – so to speak, the physical store safety net would still be in place for tesco to continue trading.

NavigationAmazon

the navigation of amazon presents the most used links on site to the

user, to ensure that the sections required most often are seen first, also

reducing ‘click count’. However there is a problem with the amazon

navigation, in that it is a dropdown list on the side of the screen – shown

in full when the screen size is large enough, however when the screen is

not large enough, the navigation will not show unless the user hovers over the shop by

department box – consequently users can miss the navigation bar out completely and will

have to find their own route to products and categories.

The navigation bar can also be seen again as responsive design, as the bar hides away when

the users screen is not big enough to see the bar – hence the collapsing the bar.

Topping the amazon website is another navigation section; however this contains the most

common actions for amazon account holders – login links, prime, the basket and a wish list.

This section is larger than the main navigation bar, to ensure that everybody sees it, as this

is part of the main experience of amazon, as it contains the most common sections on the

site for account purposes, plus the shopping basket, complete with dropdown basket to

show the basket quickly – another example of amazons responsive design.

Nhs

The navigation on the nhs website shows 5 section, sections that are the most relevant to

the users of the nhs website – in this case, listed on the navigation section are:

Health a-z

Live well

Care & support

Health news

Services near you

These are the most common sections of the site, and these are most-likely top level pages

or categories, within these are nested pages and media, in which information is contained,

this hierarchical structure allows for users of the website to find sections and topics they

want easily and effectively, as all pages are categorized and tagged, making it easy to find

either via search, or manual categorical navigation.

Tesco

Tesco has 2 main navigation sections on the homepage – allowing users to find sections of

the website easily:

These sections allow users to get to the most important parts of the website easily – helping

with the shopping experience, these sections also expand out into a slider element when

hovered over to show more about the section – for example “tesco direct” shows a section

dedicated to furniture, home ware and electrical goods.

Tesco also has a sub-navigation module, showing subpages in a section:

This allows for users to reduce the number of clicks and find sections easier on the website,

this is also an alternative to searching as it allows for users of the website to browse through

sections and pages in the website, looking for new products that they could buy.

EfficiencyEfficiency is also very important when designing and building a website. Efficiency is

presented in two ways – page speed and limited number of clicks – or how many times he

user has to click on links and hotspots to get where they want to go on the website.

Page speed

Having a past page speed means that the user’s web browser is able to download and

render the webpage quickly and effectively, this means having clean code, in which all html

tags and elements are aligned horizontally in the source code, indented for each new line.

Page speed is also dependant on the number of images on the page, if there’s a lot of

images, there will be more to download, meaning that the speed of the page is reduced.

Limited number of clicks

Limiting the number of clicks allows for users to find a particular section of a website easily

and without clicking on loads of links and hotspots – this can be reduced via search or

category navigation. Adding a search bar to a site will reduce the number of clicks to find a

page on the site – as the user is able to search for a term, for example “digital camera”- in

the case of amazon, instead of working though many menus and navigations – the user is

able to search and find items easily.

Example:

Navigation Search

As you can see in the above screenshot, the

user has to go through menus to find a

category containing the products they want

to look at, this is time consuming and

doesn’t present you with the products you

want instantly.

Search allows for the user to input a term

and find the products they want instantly,

without going through endless menus and

categories.

On the nhs website limiting the number of clicks is also included, with users able to use the

search function to easily find information on the website -

AccuracyAccuracy is key when designing and building websites – especially in websites such as

information sources and ecommerce websites – as the information provided is why the user

comes to the site.

Amazon

In the case of amazon, this could be what encourages the user to buy a product. When it

comes to amazon, accuracy lies in the product descriptions, as these contain specifications

and declarations referring to the product, and amazon take pride in offering the product

seen and described on the website, hence the importance of accuracy.

Accuracy also means a reliable source of information for users, again for amazon – if a user

were looking for specifications of a camera, if they chose amazon to look at the camera –

the specifications must be correct for this to be of any use to the user, otherwise

information is incorrect and the user has been falsely informed on the site.

Nhs

When using the nhs website, information must be accurate, as this is a government run

website, offering health information to the public – information but be correct and valid as

decisions can be made just by using the information on site – therefore mistakes and

‘wrong’ information must not be used on this website, as the public may take advice that is

not correct, leading to differing consequences.

Tesco

The information on the tesco website must also be accurate – specifically in product

descriptions, as this is where users of the website will get information about products they

are buying from the tesco website:

This is where the most important sections of the product pages are – as this contains

information regarding nutritional information and allergy information – hence why accuracy

in this section is key. If this information was wrong, users could be buying products that they

thought they were vegetarian, however if the data was wrong, the product may not be

suitable.

LanguageLanguage is also very important for websites – as the language must be appropriate for the

users of the website, so it’s no use offering up a website in german when you’re on a.co.uk

domain – you’d use british as the main language, the same applies for the complexity of

language used on the website, and the tone used, it must match the purpose and users of

the website.

An example of this is comparing gov.uk and amazon.co.uk, in which amazon uses friendly

language to appeal to its users, however gov.uk keeps all information and language formal,

as this is an important government website, where all information needs to be correct and

all language needs to be formal.

Nhs

Language is very important on the nhs website, as user could be viewing the website with a

different language to british english, in this case – a translate button is available at the top of

the page:

This button does not translate the page into another language, however it does offer links to

websites offering healthcare advice and information in different languages, the following

page is shown upon clicking the translate link:

Beneath these collapsible sections,

links to different health

websites are contained, for

example under “health information

in polish”, shown is the

following list:

The list contains relevant links to sites containing similar information to the nhs website,

however these are in a language that will be understandable to those of the language

section chosen, in this case a person from poland would be able to use “zdrowie.med” to

get healthcare information in polish.

Speed of responseSpeed of response is also an important factor when building websites, as this could deter

users from the website, reducing the potential turnover for the company – as they would be

using existing and potential customers.

Speed of response can be affected by many factors on the website, for example the use of

multi-media and images, this will reduce the page load time as the user has to download

items from the websites server to render them on the users web browser, if there is a lot of

images and multi-media content the page speed will be slowed and response time will be

lowered, meaning that the user will not be able to move around the website quickly and

effectively and the users of the website will spend a lot of time waiting between clicks on

the website.

Speed of response is also affected by server load and server speed, as the server must

‘serve’ all of the websites files to each user of the website who is requesting information, if

the server is unable to keep up with the load, or the number of users the speed of response

will be lowered and users will once again have to wait between clicks and pages on the

website.

Respect for privacyRespect for privacy is very important with websites, as the users data will be stored on

server, especially in the case of amazon, where the users address, phone number and

debit / credit card details are stored on the server in a database – this means that data must

be kept safe and secure.

Amazon

It is important for websites to ensure that they only keep the data they need on users, and

that the user knows that this data is stored about them on the website, again in the amazon

example, the terms and conditions state that there data will be stored on amazon servers –

this is important as the user is giving their consent by signing up for amazon to keep their

data on servers for later use.

Eu legislation is now in place so that websites must ask the user if they would like to receive

cookies or not from the website, this means that the website must present either a pop-up

or a policy at the bottom of each page showing the user this, this is important as it gives the

user control over what data they have stored on their computer for the website.

Nhs

The nhs has a privacy policy, stated at the bottom of the page in the footer - as with

amazon, this details that the nhs website will be using cookies to store information, for

example the order and position of widgets on the homepage, or articles that have been

viewed. This section of the nhs website is surprisingly detailed, with many sections within.

This is a clearly laid out page allowing for users to fully understand the nhs privacy policy.

Tesco

The tesco website shows links to the cookie and privacy policy at the bottom of the website

-

Design of web pagesThe design of web pages is again very important, as this is what the use sees when they

enter the website. Designs must be fit for purpose and they must be easy to read, browse

and fast to load. The design of web pages is key when making a website.

Amazon

Amazons website is clean and well laid out, with all sections visible to users and all

important parts of the page stand out for users to see clearly, an example of this is the

search pagination controls, in which the links are large for users to see clearly:

Shown in the above screenshot, users can see:

1. What page they are currently on

2. The page they will go to next

3. Links to be previous and next page

4. The total number of pages

This is important as users know exactly where they are on search and where they’re going

next, plus how many more pages they have to go through.

Another example of amazons page design is the layout is the product page, which has a

three column layout with each column having different purposes:

Column one Column two Column three

This column is dedicated to

the product pictures, as this

1/3 of the page is where the

user will look first, i which

images of the product are

shown, these are also very

large for the user to see the

product clearly

The middle section of the

website shows the price,

colour and stock levels of the

product, this is also a large

section so that the user

knows where everything is.

The price is pretty much

directly in the middle of the

screen, so that the user can

see the cost of the product

instantly, as is it in the centre

of the page.

The third column is home to

the add to basket buttons, of

which there are many. At the

top there is a normal section,

where users are able to add

the product they are seeing,

usually at the best price,

bellow this however is ‘more

buying choices’ where the

user can pick between

cheaper models and user

items, this is useful to those

who like to shop around.

Nhs

The nhs website has been designed to present users with the most relevant information and

articles, in the quickest time possible – in that articles are clean and search and navigation

functions allow for users to find items on the website quickly.

an example on the nhs website of where the design of the

website contributes to the ease of use of the site is in the

search box; when the user writes out their search term, a

small dropdown list with suggestions appears for the users

to jump to a certain topic quickly, this allows for less time

used trying to find pages, and more reading up on health articles. This feature is also handy

for users that are not able to spell certain complicated medial words, for example – if the

user of the website was searching for “corticosteroids” - a word that many would not be

able to spell with ease, the nhs search box would suggest “corticosteroids” when they start

typing around 4 letters from the start of the word, allowing for users to find topics easier.

Articles & information pages

The information pages show a lot of information for the user, however it is organized –

meaning that the user will not be overwhelmed with information, and finding particular

sections is very easy for users.

Introduction section Tabs Related pages

The introduction section

allows for the users of the

website to see exactly what

the article or condition is

about – in this case, an

animation for asthma,

showing the users of the

website an introduction into

the condition – useful for

those who do not know

anything about a topic, or

those who don’t want to

read large sections of text for

simple and concise

information.

The tabs section allows for

users of the nhs website to

move between overviews,

anecdotes, and other useful

links regarding the current

article or topic, this allows

users of the website to find

out more and explore for

themselves regarding a topic

or condition – this allows

also for users to get a

broader understanding of a

topic.

The related pages section

shows users pages that are

related to a current topic –

this allows for the users of

the website to check related

articles for more

information, examples of this

include “causes, diagnosis,

treatment, and living with” –

in the case of the nhs asthma

pages – this allows again for

users to explore the website

and find out information for

themselves without the main

structure of the article.

The design of this pages allows for users to find out as much information as possible on a

topic –making it a good resource for those looking for medical related topics, the external

and internal related links allow for users to find out more on a subject, and detailed

animations and professional video allow for users of the website to understand more about

a topic, and seeing the information in clear mediums, for example video – enhance the

understanding of a topic, but also allow for users to obtain information faster, as the video

will contain most of the key points from the article.

The design of the article content is somewhat poor in terms of the layout of content –

shown in the example bellow:

From the above image, you can see that the nhs website does not take advantage of the full

screen – the column is cut of half way across the page and this does not look great – this

may increase readability, however there is plenty of room for another column, allowing for

more information to be shown on the page, or to show the information in a condensed

format. From a design point of view, this is a very poor decision – as the site does not look

polished or finished, this simply looks a like a mistake on the nhs website.

Homepage

The nhs homepage is excellent, allowing for users to change the page to their liking –

showing only the most relevant information to them – movable widgets on the screen allow

for users to change and shape the homepage as they wish, again adding a custom feel. The

nhs homepage is shown in the bellow screenshot:

This shows the widgets in a three column layout – with important items ordered by default

at the top of the page, however these can be easily changed – making the homepage

custom for the user, allowing for a personal experience, this feature can be maximized so

that the user can see all the information they want on site first – acting as a hub for health

information – as it stands, the nhs website’s homepage is superb.

Tesco

The tesco website has been designed to appeal to its users and allow for easy browsing of

the tesco website, the header section has been designed to offer links to the tesco social

media pages, and some on-site pages, for example “sign in” and “store locator” – important

links, however these are not large buttons as this would distract from the main content of

the page.

The middle slider section allows for users to see the latest offers on the tesco website, this

slider section shows a few images with deals on the top – showing users of the tesco

website new tesco products, and deals that are currently on the site. This section is large

and will stand out to the user as it is directly in the centre of the page.

The tesco website uses colours that are plain so that the user can be directed to sections of

the website that are more important, for example contrasting the white background to the

green slider image – this makes sure that the user is not distracted looking at different parts

of the page, and instead they are looking at the important content.