Sainsbury New Vertical Navigation Horizontal Fisheye Menu Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

This section will discuss the design and implementation of the system that was used as a prototype. The section begins with the aim of designing this prototype. Throughout this paper, this prototype will be referred to as Sainsbury new website while the proper Sainsbury's website will be referred to as Sainsbury live website.

In this research therefore, alternative navigation structures that can be designed into a Web site were explored. This research considers usability of the system feature from the perspective of user performance, as well as the user's subjective perceptions.

A prototype (Sainsbury new website) was therefore designed that had a different navigation to the Sainsbury's live website navigation. Even though the navigation systems in the two systems were different, the site contents were the same both in Sainsbury new and Sainsbury live websites. A brief description of each navigation approach is given in later in this chapter.

A navigation menu might consist of several menu buttons, depending on the type of menu and the amount of information. The menu's visual layout, content organisation, and graphic design elements are all important aspects that must be considered during the design. The website users might not read the entire menu word for word, the design of the menu therefore should help them to accomplish their goals whether they are simply browsing or searching for a specific item.

Organising of the contents:

It was important that the user can tell if what he is looking for is available in the website without visiting all the pages. Usually a quick scan over on the home page will give the user an idea of its contents. One of the most basic issues involves the amount of information that should be present on the screen at one time. Too much text or information on the screen at the same time hinders the user's ability to scan and process the information. A cluttered screen will require the user to take more time to find the desired target. The information can be arranged in several screens linked with the menu items on the page. Additional screens imply additional steps necessary to reach the user's goal. This also may have a cognitive effect on the user's performance. This ides of substituting between the amount of information on a screen and the number of screens is especially applicable to a hierarchical menu. It then becomes important to consider substitution between depth and breadth, which deserves some discussion.

As navigating complex website can be complicated, we developed a website with navigation that will be easy to use. From the literature we have seen that when users know where they are on the website, they do not feel lost and therefore have the confidence to complete their tasks. To reduce the chances of getting lost, the navigation for Sainsbury new website was designed to look different from that of Sainsbury live website. The navigation menu is permanently left aligned and any child menu will open below the parent and that it will be indented to the right. The indentation and link colour will help to show the current location on the website and therefore avoiding having website users lost (figure below).

In developing Sainsbury website, we built the website from scratch taking advantage of available plug-ins. These extensions used for this website include;

Serber Cart for the database available at

The Camp26 Fish Eye Menu available at,com_remository/Itemid,7/func,fileinfo/id,8

A JavaScript slideshow that allows us to quickly and easily display a selection of images and transition between them. This is available at

The differences between the two websites:

General navigation layout:

Sainsbury live website has a horizontal linear navigation menu while Sainsbury new has a vertical linear navigation menu with a horizontal fisheye menu.

Sainsbury live horizontal navigation

C:\Users\Ken\Pictures\Sainsbury's\New Folder\new home.jpg

Sainsbury new vertical navigation and horizontal fisheye menu


When designing a menu, consistency should be practiced wherever possible. Grammatical consistency among titles and items can prevent the user unnecessary confusion. Shneiderman (1986), gave guidelines for phrasing items as the use consistent and familiar wording, making alternatives distinct from each other, and being concise. When designing the menu frame, it is also very important to be consistent in the placement of text between frames. A study by Teitelbaum and Granda (1983) showed that varying the position of information such as titles caused the user's thinking time to almost double. There was consistence as both Sainsbury live and Sainsbury live used familiar wording, they made alternative menus distinct from each other and were distinct.


In the field of cognitive psychology, Treisman and Gelade (1980) conducted studies that showed that searching for a target distinguished by a conjunction of features (e.g., colour and shape) demanded attention, whereas a search for a target distinguished by one feature (e.g., colour) could be done pre-attentively. Pre- attentive processing means that the time it takes to pick out these targets remains constant even if the size of the data set increases.

Both Sainsbury live and Sainsbury new websites provide the breadcrump which is helpful to the users to help tell their location and how they got there. Sainsbury new website maintains one simple background colour for all visited links which adds to the users' ability to know where they are on the website. Sainsbury live website does not maintain one colour for visited links.

Pointing or Hovering on the Links

For Sainsbury live website, when a user points at the horizontal navigation, they get a pull down menu from which they select further categories (Figure). This is different with Sainsbury new where when hovering on the menu link, the button changes colour as the figure below shows. The main categories in Sainsbury live website are on horizontal navigation while in Sainsbury new website they are on vertical navigation layout. For the fisheye menu items, the activation region for an item constitutes the target. All respondents were informed of the fact that their target was not necessarily the text below the icon, but the region containing the text target item. This was true for the link buttons in the subsequent pages that had clickable icon and texts. This was clearly understood by all participants.

C:\Users\Ken\Pictures\Sainsbury's\New Folder\pulldown menu.jpg

Fig showing a pull down menu in Sainsbury live

Fig Hovering over the fisheye menu expands the icon size in Sainsbury new website

C:\Users\Ken\Pictures\Sainsbury's\New Folder\hoover new.jpg

Fig showing active menu and mouse hovering on Technology in Sainsbury new website

Vertical linear navigation (Sainsbury new)

Horizontal linear navigation (Sainsbury live)

Completing task 1:

In Sainsbury live website, completing task means the user has to turn 6 pages to arrive at the product, where as Sainsbury new has lessened this to only 4 pages to the product as this increases the users' pleasure. Figures below;

C:\Users\Ken\Pictures\Sainsbury's\New Folder\live task1.jpg

Figure: it takes 6 clicks to locate whole milk in Sainsbury live

Figure: It takes 4 clicks to locate whole milk in Sainsbury live

Completing Task 2

It takes the user to turn only three pages to get to the product both in Sainsbury live and Sainsbury new websites.

Figure: 3 pages to the iPod Shuffle in Sainsbury live website

Figure: 3 pages to the iPod Shuffle in Sainsbury new website

Completing Task 3

The users turn 2 pages to arrive at the scooter in both Sainsbury live and Sainsbury new. However the requirement is that they have to use the horizontal navigation first. We expected that the fisheye menu for Sainsbury new would make the icons easy and quicker to click compared to the buttons in Sainsbury live website.

Completing task 4:

The correct answer to this task is that you have to pay by credit card. In both Sainsbury live and Sainsbury new websites, it takes a 2 page turns to get to it. This information is not in italics or bold in Sainsbury live but is bold in Sainsbury new. Therefore might be easier to locate in Sainsbury new website.

Completing Task 5:

The iPod shuffle is 2 GB capacity and iPod Nano Graphite is 8GB. Respondents are supposed to get the difference between the two, which is 6GB.

Keep the contents clear and simple:

In our design, it is important to attract the customers with an eye catching design, but are also aware that it is the contents that will make them to return to the website again. The navigation menu content was made easy to scan.