Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
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.