Project Summary

Here is a list of links that point to posts that reflect the UCD process and are relevant to our project:

• Introduction
• Brainstorming
• Initial Brainstorming
• What is technology?
• More Brainstorming
• What is useful?
• Generating Ideas
• Bright Ideas!
• Evolutionary Computer Operating Environment
• Interactive Shopping Trolley
• Robot Nanny
• Case Articles
  • Fisher Price's Musical Finger Paint
  • Nintendo Wii
• Project Genesis
• Persona Development
• Persona Specification
• Bob Todd
• Joyce & Winston Barrington
• Dillon Mills
• Margaret Baxter
• Task Analysis
  • The Supermarket
  • Task analysis of food shopping
• Use Cases
• Scenerio Development
• Scenario: Bob Todd "I don't know what's good for me!"
• Scenario: Joyce Barrington "My bags are too heavy"
• Scenario: Margaret Baxter "I’ll see you when you get there, if you ever get there"
• Key Design Considerations
• Design considerations for older people
• Design Considerations: Disabled Users
• Creative Design
• Output Device: VR Goggles
• User Support: Use of Video
• Input Device: Speech Recognition
• Output device: Projector/TV
• Prototype Design
• Prototype Design: Initial Sketch
• Prototype Design: Physical Interface
• Prototype Design: Navigating the Virtual Supermarket
• Prototype Design: Screens
• Interactive Prototype
• Evaluation
• Prototype Review - Persona Interview
• Prototype Review: Persona Interview - Margaret Baxter
• Cognitive Walkthrough with Dillon Mills
• Prototype Redesign
• Product Re-Deisgn: Margaret Baxter Evaluation
• Product Re-Design - Description
• Interactive Prototype: Redesign!
• Re-Evaluation
• Product Re-Evaluation: The Barringtons
• Final Conclusion

Group members
Alex Dixon (Lex)
James Howe (Jimbo)
James Robertson (Robbo)
Roger Toor
Sealan Cronin

Conclusion

Our initial project was very large and ambitious, involving several significant aspects including:

• A physical device
• Finding products and navigation around a supermarket-like environment
• Providing user support (tutorials, product comparison, recipes etc).
  

A key challenge emerged; finding a balance between all the features our users would want in this integrated experience and the time we would have to implement them. Therefore, some features were not implemented in the initial prototype, and some were not implemented fully, but sufficient enough for the purpose of illustration.

The redesign improved on many aspects, integrating speech commands to allow quick navigation as well as speeding up performing common tasks such as purchasing eggs and bread.

Evaluating against online/real life shopping
Throughout we have had to consider that the technology would be challenging current conventions and practices, changing the habits of shoppers. Therefore it was important to give significant consideration to what problems were with current methods (for the elderly) and how we could improve on them.

Our technology breaks down the barriers elderly people would have to real-life shopping (feeling tired, not being able to carry everything home etc). However, these challenges were already removed by something already in existence; online shopping.

But current methods of purchasing groceries online are limited in their usability, the arrangement of products is list based and users are often forced to recall rather than recognise. Contrasting with this, our project utilised distributed cognition and recognition by using the same layout as a real super market. Furthermore, we attempted to break down barriers to using technology by making it as simple and intuitive as possible, utilising Terry Wogan in video tutorials, allowing speech input to quickly navigate to products and limiting the number of controls.

But even still, some users enjoyed the social aspect of shopping which is missing from our project, perhaps a good addition would be allowing users to shop together and communicate remotely. Furthermore, shopping through a virtual environment on screen was different and strange to the users, this is something that will always be a problem with new technologies, all we can do is limit it as much as possible and we feel that we have been successful in that respect.

Re-Design Evaluation: Margaret Baxter Interview

After the new designs had been added to the system based. Margaret was asked to use the system again to try out the new features.

Modifying shopping basket once item has been added.

Margaret very much likes the new system of being able to edit the shopping list. She did have to learn to this new system but once she got the hang of it she found it very simple and a great improvement on the previous design. She found the ‘Undo’ button simple to use and liked the idea of being able to make a mistake without and awkward consequences.

Directly comparing products before selection

Margaret thoughts that this new design was a good idea but would be more of an advanced feature that she was unlikely to use on a day to day basis. She found comparing products fairly straight forward, again she had to learn how to do it before hand as this is a technique that would be unfamiliar to many of the proposed users. She thought this option would be very useful for people with food allergies and people who had dietary requirements and would benefit from directly comparing different products information.

Confusion of whereabouts in store

This new feature was Margaret’s favourite. She really like being able to see whereabouts she was in the supermarket and which direction she was facing. If she ever was a little unsure of where the next product might be she simply had a quick look at the map, orientated herself and carried on with her shop. She found the signs very useful as well, making the whole shopping experience far easier and useful.

Re-Design Evaluation: Joyce Barrington Interview

Having modified our original prototype extensively, it is time to evaluate the final product. Whilst feedback about unchanged features has already been obtained from the personas, we must now find out what they think of the new changes in place.

• Using trolley handle as a scrolling device - "Using a pre-made shopping list was made much easier with this feature added. It took a while to get used but eventually I could use the trolley device effectively. The movement around the supermarket felt natural and laid back."

• Speech Recognition - "It felt very strange talking to the screen, and the system often mistook what I said. This was probably down my Jamaican accent. It was really helpful for quick browsing of products though, meaning I could jump to items much quicker, something that was too slow in the original system."

• Re-designed trolley control - "With the original system I found sometimes pushing the buttons while aisle browsing resulted in the trolley lurching out of direction. The range of movement was possibly to wide. The new clicking joystick feels much more comfortable to use, and although it requires slightly more effort to push forwards, it means the trolley is always pointing the direction you want it to."

• Shopping List Feature - "The shopping list feature is still hard to set up, however since it remember my favourite items from my last test, it was easy to jump quickly to products I knew I wanted. The speech recognition helped slightly in adding new items to the list, but in general it is quicker to use a pen and paper like I would in a normal supermarket. "
  

• Product Browsing - "Although some of the naturalness of shopping was taken away by breaking shelves into categories, it was much easier to understand. The old system was as confusing as shopping in a real supermarket because there were so many products to choose from. Now however, it is easy to browse past items you don't want without having to look in detail."

• Undo Feature - "The fact that I can now 'undo' my mistakes makes a lot of difference, in that I feel much more confident that if I do something wrong, I can easily go back and not have any problems."

• Device Height - "Having tried the trolley handle device in both an armchair and while sat at a table, I can tell you that the height adjusting is an excellent feature. The old system made my arms tired because it was at an uncomfortable height. Now however, I can choose the comfiest layout before starting my shop, meaning I can take my time and relax more, something I don't feel I can do in a real supermarket.
  

Interactive Prototype: Redesign!

Here it is again!

http://studentweb.cs.bham.ac.uk/~ug56sxc/prototype3.ppt

Product Re-Design: Joyce Barrington Evauluation

From evaluating our product using the personas, we have found a number of features that need to be added or improved. The following changed to the design have been deduced from the Barringtons' test of the system:

• The button system - The Barringtons concluded that the four button system was easy to use, but sometimes too restrictive. The basic colour coding concept will remain in place, however it will be complimented with the use of some extra user inputs. Firstly a scrolling input needs to be added to the physical device. The personas found that navigating screens that had multiple options could be slow and confusing. Adding a scroll function means they can navigate menus and shopping lists much easier. To keep the number of possible user inputs to a minimum, the trolley handle will also be used as scrolling device. Pulling the handle towards the user will result in scrolling down any list, and vice versa.
  

• Speech Recognition - The second new user input will be the use of speech recognition. The reason for this is to offer the user a much wider range of flexibility whilst using the system. With the accuracy of such technology rapidly improving, the system should provide a faster and more rewarding than found in the prototype. The speech recognition will be used in situations where it would other take a number of button pushes to achieve. For example, commands such as "Go to aisle 5" or "Look at bread" will result in quicker browsing and easier product location.

• Handle Interaction - Having found that pushing the buttons on the device could cause minor involuntary trolley movement, we need to redesign the joystick style of movement that controls the trolley. Instead of a pilot's style control, the handle will now just click forward and back at a limited distance. This also means the user can feel when the device has been pushed forwards enough to push the trolley forwards, providing a greater level of confidence to the user.

• Shopping List Feature - The Barringtons commented that although the shopping list system was effective once compiled, actually preparing the shopping list took longer than desired. With the limited number of inputs available, they found it hard to add or delete things from the list. It can be conceded that using the traditional pen and paper method was still probably the most effective system available. However for regular shoppers, knowing their common items is essential in compiling an effective shopping list, therefore users will be able to add any product as a favourite item, meaning it will appear on their shopping list every time they use the system. The user will be able to jump straight to the items on future shopping sessions.

• Product Browsing - Having found the shelf browsing system reasonably easy to understand, Joyce felt the sheer number of products on offer was sometimes overwhelming. The way the products are displayed therefore needs to be clarified. When the user is browsing down an aisle, the products available in the section will be visible using information 'boards' above the aisle, as found in a real supermarket. The products will not all be visible, rather classified by type and in easy to understand sections. Expanding these sections further will then offer further options such as viewing nutritional information. Although this process can make selecting a single product involve a number of button presses, we feel it is better design to relieve the user of information overload while shopping. This is combined with the fact that items can be added quickly from the 'favourites' shopping list.

• Undo Feature - The Barringtons identified a problem that we had not considered, adding an undo facility. They found that if accidentally adding a product to the basket, it was hard to quickly remove it. Similarly if mistakingly clicking the checkout button mid-browsing, they would have to navigate all the way back to where they were shopping. It is therefore essential to add an 'Undo' facility as found in most modern applications to ensure that any errors can be quickly resolved.

• Device Height - Joyce Barrington noted that when using the trolley handle device from a table top position, the handle bar was too high to result in comfortable and natural. It is therefore essential to make the device fully adjustable so it can be used by anybody, and in a number of locations (i.e. armchair or table-top).
  

Product Re-Design: Margaret Baxter Evaluation

After evaluating the system with Margaret is it clear that there are areas of the system which need to be modified in order to improve it.

These are the mains areas Margaret pointed out as being of concern:

Modifying shopping basket once item has been added.

Margaret became particularly frustrated when she realised that she had added the wrong item to her shopping basket and found that she could not easily remove the item without going through a series of screens. This process needs to be change otherwise the system will be very difficult for the average user.
To solve this problem, every time a modification is made to the basket, an ‘Undo’ button will become available so that the user can immediately reverse the operation.
As well as the undo button, the method for navigating the shopping list needs to be improved. When the shopping list menu is open, the user will now be able to scroll up and down the list using forward and backwards movements on the trolley control allowing easy selection. There will be 2 new buttons to go with this. A ‘Remove’ button and ‘Compare’ button. The ‘Remove’ button will delete the selected item from the list. The new ‘Undo’ button will appear after this operation as well in case of a mistake. The ‘Compare’ button will take the user to the ‘Product Selection’ screen where the user will be able to see the products details and compare them to other related products.

Directly comparing products before selection

When Margaret was browsing through the ‘Product Selection’ area of the system she found that when she was viewing the product information she would like to have the option of comparing the product to similar products at the same time. At present she finds she has to remember the information of a particular product, go back to the selection screen and choose another product to compare. Many people would have problems remembering facts about each product, comparing more than one product would be even worse and almost impossible.
The solution here is, when the user is in the ‘Expanded Information’ to add a button which create a list of similar products. The user can then use the controls to highlight the product he wishes to compare the selected product to and then view the details side by side. If he wishes to compare to another product again he just repeats this process and another selected item will be displayed next to the open projects. If the user wants to exit these comparisons he will just press the ‘Back’ button which will return the originally selected products information page.

Confusion of whereabouts in store

At certain time, particularly when mid way down an aisle, Margaret found that she couldn’t remember whereabouts she was in the shop compared to the other aisles and products. This problem lead to her being unsure which way to turn at the end of some aisle, she knew where she wanted to go, she just wasn’t sure which direction the next item on her list was in.
The solution her is to introduce a popup map and signs to the system. The popup map will toggle on and off and displayed the whereabouts of the user at a given time as an arrow which will depict the direction the user is facing. All of the aisles will be labelled so the user will know which way to go to get to the aisle he wishes to visit. As far as signs are concerned, when the user reaches the end of an aisle, signs will appear on the screen saying which aisles are to the left and right of the user. The aisles will be listed in order based on how far away the user is from them. The nearest aisle being at the top of the list. As well as this, when the user is at the top of an aisle, signs will tell the user what is down that aisle.

Cognitive Walkthrough with Dillon Mills

To evaluate our prototype, I sat down with Dillon Mills (after reading Think Like A Persona) to perform a cognitive walkthrough. This will help us understand any usability issues with the steps needed to complete a given task.

The task in this case is to buy the basics – bread, milk and eggs. The following steps Dillon wants to take are:

1. Find the relevant section of the supermarket (bakery, dairy products, etc.)
2. Make an informed and comfortable decision about a product to purchase.
3. Buy further items in this particular section or navigate to another section of interest.
4. On completing the task, purchase and receive the goods.

The steps needed in the prototype to complete this task are:

1. Turn on the device (by pressing any button)
2. Watch a introduction given by Terry Wogan
3. Confirm with the system whether they know how to use the system or not.
4. Either watch the tutorial by pressing the ‘Play’ button on the next screen or be presented with the main menu for the system.
5. Indicate that Dillon wants to perform a new shop.
6. Navigate to a section of the supermarket by pressing the coloured button which corresponds to the desired area (for example, the bakery)
7. Push the handles on the device forward to navigate towards the desired group of products (loafed bread)
8. Select the product they want by browsing through the products
9. Make a selection by pressing ‘buy’, or viewing more info by pressing ‘info’.
10. Navigate back to the shop layout and repeat the process for each section.
11. Purchase the products by pressing the buy. (not implemented yet)

I found that it would be extremely tedious to go through each of these stages and perform a detailed evaluation of their usability. However, I have picked one to demonstrate the thought process involved:

Step 9: Making a selection by pressing buy.

Will the users be trying to produce whatever effect the action has?

By pressing the ‘buy’ button, the user will change the state of the shopping cart – adding the product currently focused. Although the word 'buy' itself does not directly indicate ‘adding to a cart’, Dillon had no problem making this distinction.

Will users be able to notice that the correct action is available?

When a system is focused upon on product, the option to ‘buy’ in the form of a butto will always be available.

Once users find the correct action at the interface, will they know that it is the right one for the effect they are trying to produce?

Since there are only five options, there is a one in five chance that Dillon will make a mistake. When focusing on a product, there are no similar functions which the ‘buy’ button represents. It is fairly clear to Dillon that ‘buy’ involves purchasing and the other buttons have no relation to this task.

After the action is taken, will users understand the feedback they get?
Dillon was given no feedback that the item was added to the shopping cart. This confused him slightly as everything suddenly disappeared - and he was presented with the store menu. The only indication that an item was added as it has now appeared in the ‘shopping cart’ list.

Prototype Review: Persona Interview - Margaret Baxter

Visibility of system status

Margaret is not used to having information bombarded at her on a computer screen and liked the fact that the display was simple and clear. She found the colours used and components easy to distinguish between.

Match between system and the real world

Margaret was able to identify the supermarket arrangement and navigate it as she would normally. She had a good idea of which area of the supermarket a product would be located. She browsing fairly straight forward once she had gotten used to the control system. Margaret was able to estimate where a required product was on the shelves by looking at the different isles and the types of foods in a certain area, much the same as when browsing in real life.

User control and freedom

In a few instances Margaret found herself selecting the wrong button and arriving at the wrong screen. In every case Margaret used the back button and found herself back at the previous screen which she could always see anyway due to the previous screen always being greyed out and the new layer displayed over the top. She admitted that without the back button she would have been stuck on several occasions.
Margaret found she was free to move around the supermarket at will and was not restricted. In one occasion she found herself stuck in a corner but by using intuition and the natural operation of the controls managed to easily free herself.

Consistency and standards

As the system is more visually orientated there is little written text. Margaret found that always understood although there was one occasion where the items she was about to purchase were referred to as her shopping cart which threw her a little as she was unaware of the term.
Compared to any computer system that Margaret has previously used, this was very different so the standards that she was used to for existing programs did not apply.

Error prevention

As mentioned before the instances where Margaret went to the wrong page, she always had the back button to rely on which got her out of the problem.
Margaret found that due to the simplicity of the system she didn’t often make mistakes as there were few instances where a mistake was possible.
One of the main problems she found is that if she accidentally added the wrong item to her basket, it was immediately clear how to undo this error and it took Margaret a while to sort out the problem. She did say that if she was by herself that she would have been unsure how to resolve the problem and would either have spent a long time running round in circles or have just given up all together.

Recognition rather than recall

Margaret very much liked the fact that in every screen, it was clear what task each button performed. By the end on the session she was looking at the text on the button far less and just recognising that the colours of the buttons performed operations that she was expecting.
Margaret did point out that often when she was half way down an isle she forgot where about in the isle she was and sometimes couldn’t work out where another isle would be in relation to her current position.
Margaret found when using the main menu that she did not know the difference between new shop and old shop and which she should use and what situation she should use them in.

Flexibility and efficiency of use

Margaret found that the system was flexible in that she was able to roam the supermarket freely and go where she wanted without bounds which she thoroughly enjoyed.
She didn't find the buttons flexible as there is only certain amount of operation that can be performed with 4 buttons at a given time but this adds to the efficiency as only relevant options are ever shown or required. This leads to the simplicity which she enjoyed.

Aesthetic and minimalist design

Margaret found the design of the layout very simple. She thought that menus only had few options at a time and she was never to overwhelmed with information. If she found that there were to many slide menu’s, for example if the shopping list and information list were both open, that she could close them easily, creating more space for her navigation.

Margaret liked the fact that when she first selected an item on the shelf, when the ‘Product Selection’ screen appeared, she was given a brief summary of each information field rather than all of the information at once.

Help users recognize, diagnose, and recover from errors

During the use of the system Margaret did not receive any error messages. She rather like this fact as she felt that she was using the system properly. The fact of the matter is that there are very few instances where an error message is actually displayed due to the design and flow of the screens.

Help and documentation

Margaret found the help videos useful and found that they taught her how to use the system perfectly fine. She did however have trouble finding information when she reached a specific problem. She found that she had to watch a whole video hoping that the issue would be covered. If it was not then she had to keep trying until she found it.
Margaret like the idea of the video help but would prefer more written information to be available to back it up.

Prototype Review - Persona Interview - Joyce and Winston

Now all aspects of the prototype product are complete, it is time to review the system using the personas previously made. We conducted a mock interview with the Barringtons to see how they rated the system compared to the ways they normally conduct their shopping. To make the interview more structured and relevant, it will be split into ten sections to represent Nielsen's 10 Usability Heuristics.

1. Aesthetic and Minimalist Design - Joyce liked the fact that the menu system was basic and natural to use, especially combing the on screen display with the coloured screen buttons. In terms of aesthetics the couple thought supermarket looked very authentic and were impressed by the graphical features.

2. Match with Real World - Although hard to get used to, the couple eventually found the use of the trolley handle device good enough to enjoy the shopping experience. Winston noted that it was frustrating shopping as a couple because together you can only look at and buy one thing at once. They agreed the system was a lot less tiring than shopping in a supermarket.

3. User Control and Freedom - The Barringtons enjoyed the freedom of browsing offered by the system, agreeing that it was a realistic shopping experience. Joyce made the point that she found it hard to quickly buy an item she knew she wanted. For example when wanting to purchase a loaf of bread, she hard to go the bread aisle, select the type of bread, choose and brand, then confirm her choice. Joyce was frustrated about how much time it took to get many essential products. Winston recommended that an undo feature was incorporated into the system, to concur with his brief experience of Internet Explorer's 'back' and 'undo' facilities.

4. Recognition over Recall - Since this was the first time that either had used the system, and that neither Joyce nor Winston have very much experience with technology, recall of system functions and features is not relevant. However Joyce thought the menu system was very intuitive and self-explanatory, each option being clearly displayed.

5. Flexibility and Efficiency - Joyce was impressed by the recipe suggestions and level of nutritional information that the system offered. She found it navigating products easier as the test went further, liking the trolley display and list options. In terms of efficiency, Winston commented that sometimes product selection was slightly too laborious to keep him interested in doing a long shop. Joyce agreed that sometimes there were too many products to choose from, although for some products she appreciated the range available.

6. Error Prevention - The couple agreed that the number of errors they encountered was fairly low. However, Joyce mentioned that when she accidentally pressed a wrong button and added an incorrect item to her trolley, it was a tricky task to get the erroneous item out again. Winston liked the fact that the video tutorials showed him how to perform basic shopping tasks.

7. Recognize, Diagnose and Recover from Errors - Joyce confirmed that the only errors to occur in the system were from incorrect button presses. These were sometimes hard to recover, and the couple got confused a number of times during their first use of the system.

8. Help and Documentation - Joyce also enjoyed the video tutorials on the system, but felt that more assistance could have been at hand whilst mid-browsing. Winston commented that the absence of no keyboard meant directly searching for a specific type of help was too hard.

9. Visibility of System Status - The couple thought the visual representation of the shopping trolley was extremely good, commenting that it made the shopping experience more realistic and enjoyable. Joyce liked the fact the she could see a running total of her trolley contents throughout the shop. She also like the shopping list feature, however she commented that it was hard to set up the shopping list using the four button system. Winston stated it would probably be quicker to use a pen and paper!

10. Consistency and Standards - The couple agreed that the colour coded screen button system was consistent throughout, although stifling at times. They agreed the system's intuitive interaction was realistic, although hard to get used to. They thought the standard of graphics were excellent, and that the video tutorials made them much more confident in browsing freely.

http://www.useit.com/papers/heuristic/heuristic_list.html

Interactive Prototype

Here it is!

http://studentweb.cs.bham.ac.uk/~ug56sxc/prototype2.ppt

Functionality:

• Allows a user to access the system.
• Watch an opening introduction by Terry Wogan.
• Start a new shop.
• Navigate to the 'Process Food' section
• Investigate the baked beans catergory.
• Examine a tin of baked beans in more detail.
• Add the tin to the shopping cart.

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.

Prototype Design: Navigating the Virtual Supermarket

One of the key design issues surrounding this idea is concerned with how the user will navigate around the virtual world. It has been decided to use a physical device in the shape of a shopping trolley handle as an interface to the virtual world. However, it is important to discuss the nature of how the customer will actually view the products.

One of the most influential factors we considered during brainstorming was to beware of information overload, a problem that many elderly shoppers have to overcome.

The picture above is a bad example of the type of layout we want the supermarket to have, with lots of crowded products which would be hard to browse. One feature in this example that certainly would be found in our virtual world is the information boards above the aisles. These are found in every supermarket, and allow for more familiarity and ease of browsing.

The that most likely way that our customers will browse the shelves will be to have very basic groups shown when viewed from any mid to long distance. For example if the pushed the trolley left to look at the shelf they would see a view similar to the picture below:

In this example, the products are far too dense and unclear. In our supermarket, the more the user turns the trolley towards the shelf, the more detailed the products will become. From a distance a whole section of products could be shown by a single picture, I.e. a tin of baked beans. When zoomed fully in to the beans section, the user could then browse all the individual products. Selecting these products could bring up an information section display nutritional values, allergy advice and RDA recommendations.

The key things to bear in mind when designing this section of the project are to avoid overloading the customer with information, and making navigation feel natural whilst still mainting a familiar shopping experience.

All images taken from http://www.cse.cuhk.edu.hk/~hanqiu/task/prevWork/2002/Supermarket/supermarket.wrl (virtual reality world)

Prototype Design: Physical Interface

Overview
The next step in prototype design is to extend the 'shopping trolley handle' idea. Obtaining a good design for the physical device is crucial in providing the user with a natural and enjoyable shopping experience. There are a number of things to consider when designing this kind of hardware:
For example, one very common condition that the elderly suffer from is arthritis, meaning movement of joints such as the wrists and fingers can be very painful. This provides a reasonable obstacle when design hardware for the elderly that relies mostly on physical input.
It is therefore essential that the trolley handle relies on movement that will not cause elderly users any potential pain. The trolley handle device will therefore encompass two types of movement; forward/back and left/right. Below is an illustration of how the device will look:

Movement
The two types of movement will come from different parts of the device; the trolley handle swivels from the center point, similar to the movement of the handlebars on a bike. The actual distance the handle can turn left or right will be restricted to ensure minimal fatigue or stress for the user. The forward and backwards movement is controlled by a pivot at the base of the device. As with the left and right commands, the range the handle can be pushed will be limited.

Commands
The device will include four colour coded buttons, mounted onto the handlebar section. Inside each button is a LCD screen that will display the function of that button. These functions will also be display on the output screen (i.e. headset or projector) to ensure the user knows exactly what each button does.
Location
It is important to consider where the user will actually use the system. With elderly users, it is likely that the product could be used in a number of different situations. For example for some elderly users might want to use the system while sat at a table, and others may prefer sitting in a comfortable armchair. For this reason, the base of the device is designed to be compatible with most situations. The wide base means that it could be placed on a table top, either with sucker pads or adhesive strips. The central pole however means that the base could also be placed under the user's legs while sitting down, using the weight of the person's legs to hold it steady. This will result in a much more relaxing posture while shopping, as well as offering the user flexibility as to how and where they do their virtual shopping.

Prototype Design: Initial Sketch

Here is a scan of a prototype that the group has been discussing.

The top left section deals with the main aisle view that the user will see when they navigate around the virtual supermarket, the top right is the view of a shelving unit so they can browse variations on individual products. On the bottom level we have the trolley bar handle interface device on the left that is the main control of the system, and the ring to act as a virtual hand to allow selection of items in the virtual world is on the right. Finally on the bottom at the middle is a sample of the information that might be shown when a product is selected for closer inspection on the shelf view.

The prototype is a preliminary ideas sketch which we all discussed in a group session with other ideas for prototypes.The idea is that we all bring our ideas into a melting pot and then we pick the best most concrete ones and put them into the core functionality of a group prototype that we are now working on.

Once we put together the group prototype, we will then give this to our persona's for evaluation and testing. The feedback we get from them will help us to refine the prototype and redesign parts that need it. It will also help us to know what features need to be added to flesh out the product to a more complete phase. Finally the testing should give us more insight into our persona's so they may be also developed too, to aid us further.

Here is another sketch brought to the group meeting:

This design is based on having a projector to show the virtual world, and a remote control style pointing device with a laser pointer built in to deal with navigation and selection in the system.

Output device: Projector/TV

We've been having second thoughts about the VR helmet...

After group discussions where we explored the personas in more depth, we thought that perhaps the helmets would be dogged with preconceptions of being difficult to use simply because they're unfamiliar and a piece of technology. The video from a lecture of a couple attempting to use a web cam made it clear that technology can seem a scary and difficult thing for many people.

Since we're bringing the experience home and trying to make it feel as natural as possible, it's important to make best use of any current conventions to limit the learning curve.

Other options
Rather than assuming VR helmets will be cheap and lightweight in the future, let's assume that projectors and huge TV's will be!

The key advantage to these forms of output are that they're not as invasive as a helmet, a user watching a screen/projection can feel at ease that they can walk away at any time rather than feeling trapped/claustrophobic.

The method of interaction is familiar as most households have access to a television and would have experienced projections at least while going to the cinema.

From more practical points of view, it would allow the user roam freely around the house if they wanted to go to the kitchen to see if they need to buy some ketchup, or perhaps go to the bathroom, in addition couples would find it easier to shop together.

And if all that wasn't enough, we considered that some people may feel insecure when fully immersed in a virtual environment, they may be concerned their house is being broken into or that something may be burning in the kitchen.

Drawbacks
TV : Not large enough to make them feel like they're actually in the supermarket, this would affect the method of interaction, limiting how much information is displayed on screen, but that may be a blessing in disguise.

Projector: A practical problem is that they would need an empty wall or projector screen, not really a HCI problem but it does limit the usefulness of the technology. In addition we'd have to consider how large the projection would be when designing and considering what information to display (font size, buttons, layout etc).

Input Device: Speech Recognition

I've just purchased a new mobile phone, namely the Nokia E65. I have always wanted to keep an up to date phone, with modern features. I can remember around 5 years ago I had mobile that had voice dialling. It was reasonably poor, allowing only 10 names to be stored with voice tags, with each tag having to be saved by the user first. After taking time to attempt to match the sound just spoken with the one saved would invariably return an error.

Upon closer inspection of my new phone, I found the speech recognition feature when accidentally pressing one of the smaller buttons on the side. It presented the message "speak now", so I said the name of a friend in the room. The phone then proceeded to call that friends phone. Amazed, I looked up the information regarding speech recognition in the handbook. The software allows me to say the name of anybody in my phone book, and call the corresponding number with around a 80-90% accuracy. It can also be used to open other features on the phone such as Blue-tooth and conference calling. The thing that surprised me the most about this capability is that it is speaker independent. This means not only can it process anybodies voice, it also requires no 'training' or previous input.

This got me thinking about how this kind of technology could be used in our product. If this software is capable of recognizing any kind of name in a phonebook, why shouldn't we use it in our virtual shopping experience. At the very least, even just simple commands could be used, for example "show shopping list" or "go to checkout". At a more advanced level, it could be used to specify individual products, for example "show all brown bread".

Since the technology already seems reasonably advanced and already in use, it would seem to be a good design decision to include some kind of voice recognition. The underlying concept of our product is to make a familiar and accessible shopping experience, and technology like this would surely benefit elderly users.

User Support: Use of Video

It is generally accepted that a good design heuristic is that a user should be able to recognise, rather than recall how to operate something. The ability within elderly people to recall information is typically limited, thus enforcing the importance of following this heuristic. Therefore, a design goal should be to ensure that no prior knowledge should be needed to use the system. However, it is difficult for a user to adopt something they have no understanding of. How a user is given instructions and taught new information should be considered carefully.

Snippets of video will be used in the initial prototype to convey important information to the user. For example, if the user has completely forgotten how to use the system, they can watch a tutorial with a familiar face giving instructions. The use of video gives a warmer feel to the system and television is certainly something that our personas are use to. However, these video sequences cannot be too engaging or lengthy as we do not what to bestow too much information on the user; only instructions relevant to the interaction the user wants to make will be presented.

Output Device: VR Goggles

Since we are bringing the shopping experience home, the form of interaction is very important. We felt that we should make use of current conventions by making the experience feel as similar as possible to being in a real supermarket, but without the drawbacks of traveling, lifting heavy shopping, being confused by choices etc.

In a real supermarket the user benefits from distributed cognition, whereby an individual is constantly bombarded by information about products and choices, enabling them to go shopping without a list because the environment triggers off memories for them. For this reason and the purposes of using established mental models, the system will heavily make use of a visual representation similar to a real store - unlike online shopping, which is list based.


The visual output
To this end, we decided a virtual reality (VR) helmet would be a good choice, providing an immersing environment.


However, our personas generally may feel that VR helmets in their current form are large and cumbersome. Using one requires carefully placing it on the head and tightening straps, some users may also find it heavy. Being unfamiliar with such devices and technology in general, the audience may find it intruding and scary.


Our (re-)design

Equipped with some knowledge of our audience, we set out to improve the design to be more user friendly. Our prototype (above) was more compact, lightweight and less intruding. It was designed to appear similar to sunglasses in design and feel, making the audience feel more comfortable and hence more likely to explore.

We made assumptions that such a technology would be possible in the future, be wireless and cheap to purchase. Other aspects of our prototype will be discussed in subsequent posts.

Scenario: Margaret Baxter "I’ll see you when you get there, if you ever get there"

Margaret wakes up today, the same as any other day. She has a few aches and pains but today is a fairly good day compared on the whole. It’s Saturday and the time has come to Margaret to do the weekly shop again. As she feels fine she doesn’t have any second thoughts, she gets ready and starts her 10 minute walk to the bus stop.

So far everything’s going well for Margaret. She catches the bus and gets to the super market in good time.

When Margaret arrives at the store she finds that it is very busy indeed as it is a bank holiday coming up. This does not worry her to much at first and she continues on.
She now goes to fetch a trolley and to her dismay realises that she does have the right change for a push trolley. Never mind she thinks, making do with basket instead which is still big enough as she has only to buy food for herself.

Half way round the shopping trip, Margaret’s basket is starting to fill up. With this extra strain she starts to get unforeseen pains in her joints. She slows down and continues on.

As the shop goes on Margaret’s pains grow slowly worse until it gets to the point when she’s had enough and heads for the checkouts. Due to the amount of people who have fled to the supermarket this day, Margaret is left waiting for an extra 10 minutes which does nothing but worsen her situation, she is not looking forward to the rattley bus at all.

She eventually reaches the bus stop in a fair amount of pain. As she expects the bus journey is very uncomfortable, every time the bus hits a bump in the road or turns a corner to sharply pain shoots through her body.

At the end of Margaret’s journey she is in to much pain to walk the 10 mintues home with her shopping. Luckily a passing neighbour notices her sitting at the bus stop and asks if she wished to have a lift back home much to her appreciation.

Design Considerations: Disabled Users

As our product is aimed at an elderly market, it is likely that many of the proposed users of the system will have a disability in one form or another. For this reason it is important to base our design around any disabilities that they may have.

Visually Disabled Users
Visually disabled users ranging from colour blind to fully blind have problems with images that do not provide a text description of what they show. Without a text description a user who can't see an image has no way of knowing what it is or what it represents.
These users also have problems understanding sites that are not logically built when "viewed" using a non-visual browser such as a screen reader. A screen reader is a Web Browser that reads Web sites out loud so as to make them accessible to visually disabled users. Often a Web site that looks nice visually will be a complete mess when it is listened to through a screen reader.

Hearing Disabilities
In a similar way to visually disabled users not having any way of understanding an image, users with hearing disabilities have no way of understanding information that is communicated with sound, unless an alternative is provided that does not use sound, such as a text description or an image.

Physical Disabilities
If you are not physically disabled, have you tried using a Web site without your mouse? Unless you were lucky with the site you chose then you probably found it very difficult. Physically disabled users are often incapable of using a mouse. Unless these users needs are taken into account when creating Web site navigation and input methods physically disabled users will sometimes find a Web site completely inaccessible.

Cognitive and Neurological Disabilities
Web sites can be complex, and finding the information we want can be difficult for the most able of us. This is not helped by sites that use an overly complex design, navigation that works differently on different pages (inconsistent) and distracting repetitive animation. All of these problems are compounded for users with Cognitive and Neurological Disabilities and this makes some sites completely inaccessible for them.

The following need to be taken into account when designing our system.

Text Equivalent: Always provide a text equivalent to any information you present with graphics, videos, applets, etc. Use the text to describe the content and/or function, not merely to describe the graphic. If you include a chart that illustrates how company sales rose 300% in only a year, use that descriptive text in your ALT tag ('Sales Up 300% in FY2000!') instead of merely labelling it 'sales chart graphic.'

Alternate Navigation: Always provide a text links somewhere on your page if you rely mainly on image maps for site navigation.

Colour: Don't use colour as a primary means to impart information. If you display sale items in red text, try to group them together under a text section header that says: "Sale-Priced Items!" Choose colours and colour combinations carefully too: as many as 1 in 12 white males have some sort of colour blindness.

Buttons: Clearly labelled buttons as well as a description of the destination. Be particularly careful with this if you're using an image as an important link. A graphic of a shopping cart should clearly indicate that it links to the shopping cart page: 'View the contents of your shopping cart' and not merely 'Shopping Cart.'

Information taken from:
http://www.miswebdesign.com/resources/articles/accessibility-intro.html
http://www.netmechanic.com/news/vol3/design_no17.htm

Design considerations for older people

After reading an article about a study into usability for older audiences, we decided it would be best to have the following considerations when designing the visual part of our prototype:

• High contrast in colours
• No scrollbars
• Allow them to make writing bigger
• Make it obvious that they have clicked on a button (i.e. fade/change colour)

The general principles involve making transitions between states of the system obvious and intuitive as possible. Other ways in which good usability could be achieved include:

• Being very clear on what functions are available and their purpose
• Making the user feel aware of the purpose of their context and its position in the system as a whole to make navigation simple
• Making use of established mental models (such as having a items organised on shelves, unlike current methods of online shopping)
• Simplicity through a limited set of controls with obvious functions
• Allowing users to recognise as much as possible, rather than recall (using images of products for example)
  

These will be in addition to more general design heuristics, some of which were discussed in previous posts.

Scenario: Joyce Barrington "My bags are too heavy"

Joyce Barrington is having the family over for sunday roast, here's the scenario!
It is Friday afternoon and Joyce needs to prepare for Sunday's family dinner.
She takes the bus to the supermarket.
She browses around the supermarket choosing food and drink, putting them in her trolley.
Joyce takes her selections to the checkout feeling tired after having walked and pushed the trolley for over an hour.
An assisstant helps her to pack her shopping bags.
Joyce pays for her shopping and leaves the supermarket.
She carries the bags to the bus-stop.
She gets the bus back to near her house, and walks the rest of the distance, now very tired from carrying so many heavy bags.
She gets home and has a rest before unpacking the shopping.

However with our proposed system, the shopping process will be completely different. Fatigue from pushing around a supermarket trolley will not be an issue, since the user will be able to select any products from the comfort of their own armchair. Similarly, the system will rely on home delivery to get the shopping to the user.

Counting Calories

The government white paper Choosing Health sets out plans to ensure companies adopt a consistent and clear standard for presenting nutritional information on foods. They argue that people need to understand what’s inside the product they’re purchasing in order to make better food choices regarding health.

The Food Agency Standard have put forward their recommendation for a consistent approach to front of pack labelling that will provide ‘at a glance’ information on labels about the nutritional content of foods. It seems their signposting idea of ‘traffic light labelling’ has been widely adopted in most major supermarkets as much research suggests that it’s the best aid for consumers to pick the healthy option:

However, some of the UK’s biggest food firms have introduced their own standard for signposting and argue that GDA is clearer and much more useful to the consumer. This evidently causes conflict with the government’s proposal to standardise food packaging and thus resulting in multiple signposting for consumers to make decisions with.

How on earth do elderly people feel about this? What nutritional information is important to them?

We mentioned before that avoiding information overload was an important design consideration when designing for elderly people. Bob who recently had a stroke needs to ensure he enjoys food which keeps his blood-pressure low, so it’s important that the information is put across. Therefore, our design should enable the viewing of nutritional information in a form which elderly people prefer and understand so they can make well-informed decisions upon.

Reading
Food colour coding 'best option', BBC, Link
Food firms 'go own way on labels', BBC, Link
Choosing Health: White Paper, Department of Health, Link

Scenario: Bob Todd "I don't know what's good for me!"

Since Bob had a stroke, he's been told by his doctor to take life at a slower pace as well as take care with what he eats. The doctor made a diet plan for him, but since his wife passed away he's found that taking care of himself is more difficult with everyday tasks such as cleaning and cooking seeming challenging.

When it comes to food shopping he's bemused by the vast array of choices, and all the people rushing back and forth past him are annoying. He feels somewhat out of place in this strange environment. When looking at the shelves to pick even a can of beans, he gets confused, not knowing what all the variations mean or how one compared with another in terms of value, quality, health and taste but being used to having people do things for him and coming from a high managerial position, he's gained a sense of pride and stubbornness.

After walking around the long and tiresome supermarket (whose layout he finds highly illogical) and "wasting time" trying to decide what brand is good, what GI means and whether protein is a good or bad thing, he gets frustrated and just buys the usual food his doctor advised him against, choosing brands he recognises from what his wife used to buy. Often he'll pick anything that’s easy to make, because he wouldn't know where to start with cooking.

In addition to all this, the stroke affected his memory, but being a well organised man - he makes a list of everything he needs. However, while browsing aisles he forgets what he's bought and has to repeatedly check through the goods in his trolley, if something isn’t there he'll backtrack, eventually find the aisle and recall that he chose not to pick up the item, which results in him feeling more frustrated and tired.

Transporting the shopping home isn’t that much trouble since he has a car, he does have difficulty in loading and unloading everything (although he'd never admit it). The main issues for Bob are:

• Not knowing what to choose (what's healthy, quality, brand etc)
• Remembering what he's bought and needs to get
• Finding his way around the supermarket to quickly get what he wants
• Feeling discouraged to try new things or cook as he dosnt have access to the information

Use Cases

From our initial idea, personas and fact-finding mission, we elicited key use cases that our technology should provide to satisfy our target users:

• To add a product to the shopping basket
• To view and keep a record of the products in the shopping basket
• To remove a product from the shopping basket
• To limit amount spent on shopping using a budget
• To check out and purchase the contents of a shopping basket
• To show offers & discounts on products in the supermarket
• To navigate through a supermarket
• To view details about a particular product
• To browse through products in the supermarket
• To enable/disable a shopping assistant
• To compare products
• To search for a particular product
• To generate recipes based on the contents of the shopping basket
• To view and experience the quality of a product
• To pack shopping after purchase
• To invoke the home delivery of shopping

Next, we will develop key scenarios. They will help us identify what aspects of the task our technology will add benefit the most.

Task analysis of food shopping

Before we begin investigating our personas any further or developing use cases for the shopping trolley idea, it is important to understand how the task of food shopping is currently done. In order to do this we produced a task analysis (TA), doing so has given us many insights into problems with the current methods for our audience - which you'll see on this blog soon.


The top level of the TA is composed of six main tasks:
(click on the images for a larger version)



1. Consider choices (of what to purchase):
2. Go to supermarket
3. Select foods
4. Take to checkout
We felt this was pretty obvious and not worth elaborating further.

5. Purchase

6. Transport home

The Supermarket

Grocery shopping has become a task we all must do. It may be a weekly shop or for party preparations; our reason behind shopping and when we decide to do it varies. However, all our different goals and convenience needs seem to be satisfied by supermarkets in their current form. Or are they? What about Bob? What’s his typical supermarket experience like?

I managed to find the layout of my local supermarket back at home:

This layout is typical of most Sainsbury’s stores. Foods are grouped in specific areas and positioned based upon how the store can get their goods onto the shelves. For example, although bread is a basic and frequently bought product, its position is furthest from the entrance where the bakery is located. It could also be positioned in this way to intentionally draw attention away from the shopper’s main goal and towards other products, generating impulse buys.

Supermarkets deliver a variety of products in a reasonably compact way. This is to ensure they meet the needs of as many shoppers as possible. However, this results in a large number of aisles and possibly a large number of products which are irrelevant to that particular shop. Elderly people, like Bob may not be agile enough to dodge through and navigate these cramped aisles at busy times. Also, the large array of products may confuse and therefore create frustration during the whole shopping experience.

With these two points considered, it could be suggested that the organisation of Bob’s goals in a supermarket is not user-centric but rather organised based on the operation and marketing directive of the supermarket itself. There is compromise between what the user needs and what the supermarket wants. It is mainly based on the constraints of the technology supermarkets use to deliver their products to customers and the objective to capture as many of these customers as possible to remain competitive.

Persona: Margaret Baxter

Overview

Margaret Baxter is a 69 year old retired vet. She lives by herself in a small bungalow in the middle of a small village near Oxford. Margaret has been married but lost her husband to a heart attack 10 years ago and has lived by herself ever since.

Household & Leisure Activities

Margaret has always and very much enjoys being active. Within the last few months however, her arthritis has worsened and she now finds that she is unable to do many of the tasks she previously could.

Whereas before Margaret would take part in a fitness exercise class for over 70’s 3 times a week, now she can only go at most once depending on how much pain she is in.

Margaret is a keen bowls player. Up until a few months ago she was a key part to the Thame bowls team and played weekly matches against other teams from all over the country. She has now had to give up playing in matches as she cannot rely on being fit enough. She does still however play socially when she can with her friends.

Margaret enjoys shopping at her local shops for fruit, vegetables and meat. She is friendly with the shop keepers and makes an effort twice a week to visit them. The local shops are a short bus journey away from her house but the bus stop is 10 minutes walk away from her bungalow. Margaret cannot visit the large supermarkets anymore as she cannot drive and she finds the long journey on the bus along with carrying all of her bags to much to handle.

Goals, Fears & Aspirations

As Margaret has lived by herself for so long, she has learnt to cope very well by herself. She can still perform day to day activities and look after herself and the house.

Her recent deterioration in health is a worry to her . Margaret does not get pain all of the time and on good days she is able to be fairly active. On a bad day however she often finds it very difficult to get out of bed and most of the day is spent not doing much at all as she experiences great pain when she moves. Margaret fears that if she continues to get worse that she will not be able to look after herself properly.

Margaret’s main objectives on a day to day basis are to look after her health and makes sure she stays active. She doesn’t like staying at home and makes an effort to get out every day to visit friends or go for walks.

Computer Skills

Margaret has been taking computer lessons at a local college for over a year now. Before she started the course she had never used a computer before. She has learnt simple tasks such as sending email and writing letters which she really enjoys. She now likes to keep in contact with friends and family over the internet. Margaret has never used any form of internet shopping to date. She is aware of it but does not feel confident enough yet in her computing abilities. She does plan to explore this area once she has built up enough courage. Despite her skills being very limited, she is still a keen learner.

Persona: Dillon Mills

Overview
Dillon is 81 and lives with wife, Felicity (27) in a nicer part of Worcester. He was a soldier in WW2 where he fought many victorious battles in the British Army. When the war was over, he moved swiftly into the police force, rising to high positions of power and enjoying a generally successful career. He recently had a stroke, which has caused him to be house ridden.

Day in the Life
09:00 – awakes up. Dillon enjoys a warm breakfast in bed, cooked by his loving wife.
09:30 – reads what we can of the morning paper, only after managing to grab it off his Jack Russell Terrier.
10:00 – watches his favourite daily politics show on the box.
12:00 - takes a relaxing snooze as his wife hits the shops in the town centre.
12:30 - wakes. Logs onto his computer to have a casual surf.

Experience with Technology
Dillon loves using the Internet. He can perform a ‘Google’ search, send and read email, chat to his old war buddies via instant messenger and bid for gifts for his wife on eBay. He enjoys it because he feels as if he is still in control without getting out of his chair.

Experience with Online Shopping
Dillon uses online shopping very often. Dillon pops to the kitchen and writes down a list of all the things he needs/wants. He logs into Tesco’s website, pops in the items into the search box and off he goes. However, Dillon often gets frustrated when he is given too many choices in his search result. For example, he searches simply ‘bread’, but the results return a list of exotic foods (containing the word) which he has no interest in! Another thing he is unhappy about it white writing on coloured background; he can’t seem to read it!

Dillon doesn’t like spending too much time on the site because he thinks it costs him money! Hates scroll bars; completely confuses him! And is often confused by adverts, because he thinks the computer is actually telling him to do it, for example “click here!”