Prototype Design: Screens

Overview

The screens deal with what the user actually sees when he or she uses the shopping trolley system. They consist of two main parts, Navigation and Product selection.
The navigation side deals with walking around and browsing the super market shelves. The user will be able to walk along any isle he wishes and be able to browse the products on the shelves. When the user comes to an item he wishes to purchase, he can either purchase the item with one click or choose to view more information about the item. This is when the user is taken to the Product Selection screen.

One of the main points to consider is that the general user will not be an experienced computer user so will not be familiar with standard commands and protocol. They may not be fast learners and will not be used to dealing with lots of information at once.. For this reason the following decisions have been taken.
Through the general use of the system the buttons will maintain the same uses where possible to avoid confusion to the user. Screen changes have been kept at a minimum so that the user does not get lost in the system. As an alternative the previous screen is greyed over and the new screen is placed on top. There is always a ‘Back’ button so the user can go back a level at any time if a mistake is made.
Another way to make the system less confusing is to use toggle menus that slide in from the side of the screen and slide out again when the user has finished with it using the same button. The idea of this is to stop the screen from becoming cluttered.
When the user is in the Product Selection screen he can only see at most 9 related products to again stop the screen from becoming cluttered.
The time and date along with the total cost of the shopping trolley are always displayed at the top of the screen so the user does not loose track of time or end up spending far more than expected on the shopping.

Navigation Screen

(interact with the flash above!)

The products on the shelves will be well spaced out. When a product is selected, it will glow so that the user knows which item he is looking at. Once an item has been selected the user can either choose to expand the information or buy the product straight away using the appropriate buttons. If he is not sure whether or not the item is on the list, the list can be displayed at will. If the user chooses to expand the product information, this will take the user to the Product Selection screen described below.
A buy button is always available to the user so that he does not have to always go into the information screens if he does not want to, useful if in a hurry or if the user knows what he wants to buy and does not require any additional information. When the user exits the Product Selection screen he will return to the same place that he left so that he can carry on the shop.

Product Selection Screen

(interact with the flash above!)

When the customer enters this screen, the selected product is centred and he is presented with the 8 similar products that would be next to the selected item on the shelves. Selecting an item now will bring up information summaries along side so that the user can view a brief of the information provided for the product.
The first information is now glowing meaning that it is selected. The user can change the selected information panel by selecting the ‘Change Panel’ button. This will scroll through the panels until the user decides to stop at one. If he misses the panel he is after, the just keeps pressing the button until it come round again. Once the correct panel is selected, the user can view further information by using the ‘Select’ button. This simple selection technique means that it is difficult to for the user to make a mistake. If the user does enter the wrong panel, there is a ‘Back’ button present which will revert back to the previous level. If the user decides to buy the item at any time he simply selects the buy button which will ask for confirmation. The green button relates to yes and red button for no. If the user accepts, the item will be added to the shopping basket and the user will be taken back to the shopping trolley. If the user does not want the product, he simply selects the ‘Back’ button which will also return him to the shopping trolley where he can continue with his shop.