A Redesign Implementation of Waitron. HCI CA1(ii): A Redesign Implementation of Waitron Kate de Boe Agnew N

Transcription

1 HCI CA1(ii): Kate de Boe Agnew Contents Introduction... 2 Review of the Research... 2 Original Redesign Ideas... 2 Focus Group # Feedback from Focus Group # Redesign # Aesthetic and minimalist design... 5 Match between system and the real world... 6 Recognition rather than recall... 7 Consistency and standards... 8 Visibility of system status... 8 User control and freedom... 9 Flexibility and efficiency of use Helps users recognise, diagnose and recover from errors Error prevention Help and documentation Focus Group # Feedback from Focus Group # Redesign # Focus Group # Feedback from Focus Group # Final Redesign Reflection References Appendices Appendix A Focus Group Questionnaire # Appendix B Focus Group Questionnaire # Appendix C Focus Group #3 Tour of Final Design

2 Introduction According to Lessel, Bohmer, Kroner, and Kruger (2012), a menu s main function is to provide guests with an overview of available dishes and support their decision-making by presenting further information about these (p.524). This definition is no longer only applicable to paper-based menus, and with the growing interest and development of technology in the food industry, it has never been more appropriate. With the development of e-menus more choices and information are now readily available to the customer. This information includes multimedia content, nutritional information, and personalisation of food items (Larson & Story, 2009). But does an interest exist for this outside of the design realm? Review of the Research Although e-menus are not commonly found in the restaurant setting yet, there is strong consumer interest in such options according to the National Restaurant Association (2012) and FastCasual.com (2012). FastCasual.com (2012) reported that 51% of consumers consider it important for restaurants to integrate technology into their ordering capabilities. However, consumers years old are more likely than those over 45 to use these devices. Other trends of 2012/2013 in the restaurant include nutrition, particularly in relation to child nutrition. However, nutritional information is not only being sought in children s meals. Approximately 75% of consumers claim that they are trying to eat healthier food at restaurants, compared to two years ago. Based on these trends and figures, an e-menu would be a perfect solution, and be able to provide much more valuable, and valued, information. Original Redesign Ideas When Waitron was first examined, it appeared to be a well-designed and user-friendly product. Following research on the literature and the examination of e-menus currently live in restaurants, it was concluded that although Waitron was still a well-designed and user-friendly product, it was still lacking in its design and usability in terms of innovativeness and interaction. Originally there were five areas, based on research, that were going to be the main focus for the redesign. These were the layout (based on Ahlstrom et al., 2012), a tutorial development for using the e-menu (again based on Ahlstrom et al., 2012), adding a kitchen live-feed (based on Lessel et al., 2012), adding staff comments to dishes and creating staff profiles to engage the user with the staff (based on Lessel et al., 2012), and incorporating allergy and nutritional information in menu items (based on Larson & Story, 2009). Following the presentation of these original redesign ideas, I was told to focus on the layout aspect of the redesign, which was based on Ahlstrom et al. s (2012) study on image browsing on touchbased mobile devices. They believe that many image browsing interfaces, such as the iphone or ipad, actually offer little support when completing image search tasks. Based on this they created a rotatable globe of images for searching, and using the ipad they completed testing. The results of their user testing showed a 23% reduction in search time, for colour-sorted image collections, without causing more errors, and that 70% of participants preferred the rotating globe over the standard browsing interface, and it was perceived as being more fun. Based on this 2

3 research, my main redesign focus was to attempt to create a similar globe design of the menu and menu items. 3

4 Focus Group #1 The first step in the redesign process is to see and understand what is wrong with the original design, in other words, what are its strengths, its weaknesses, and what is it lacking? To do this, I took the screenshots of the original Waitron design and asked the focus group participants very simple and straightforward questions: what do you think about the design of the page, and is there any information missing? From these questions I was able to gather a variety of answers and get a better sense of what users are looking for in an e-menu. Below are the answers and a summary list of what were important elements I would have to factor in to my initial, and draft, redesign. Feedback from Focus Group #1 To view the focus group #1 questionnaire, see Appendix A Questions #1 #2 #3 What do you think about the design of the menu selection page? Fine but nothing special about it Boring not inviting / no colour Not exciting Is there any information missing? What do you think about the design of the menu items page? Is there any information missing? What do you think about the design of the view order page? Is there any information missing? What do you think about the design of the payment page? Is there any information missing? I understand what it s telling me though Practical boring because it s so straightforward and practical I can t edit anything Nothing special, nothing bad though, what you see is what you get Layout - fine How do I add extras to my food or do messages? What if I don t want onions? Same again, kind of the same throughout not exciting or eye catching Straightforward Good to have the total price at the bottom the whole time Good for old people because it s more obvious No options for extra things What if I want to pay cash? More pzazz needed for the whole thing Summary of findings: - There should be more pzazz in the redesign in terms of colour and layout - Focus group members agreed that it was boring but that it was clear and easy to understand. Therefore it is important for these elements to remain. 4

5 - With the selection of food items, more information and options need to be provided, e.g., options for extra toppings and options for cooking preferences (before the view order stage) - Options to edit orders need to be created in the view order page - Cash option needs to be included in the payment page Redesign #1 Taking into account Nielsen s (1994) Usability Heuristics, I will now discuss the first redesign of Waitron in terms of the ten principles. For the purpose of this redesign I chose to incorporate a theme into the e-menu. Waitron was shown to us as the default version, with the intention that as it is sold to different restaurants, they would be able to add their own themes and elements which would reflect their individual restaurant. For my redesign, instead of focusing on the default version, I thought that it would be more interesting to see the design in action by representing Captain America s, and what their specific e-menu would look like in terms of colour schemes and menu items. Aesthetic and minimalist design In terms of minimalist design, the original version certainly represented this view. The design was kept minimal, with white, black and grey colouring used, and by keeping a clear grid system where information was displayed. By using a landscape orientation in the redesign, it allowed for a lot more space to place information. A minimal design was used through the idea of important information being placed first then secondary and tertiary information being placed within that initial information. For example, the original design placed cooking preferences, price, and review information beside the menu item to maximise information being displayed. In contrast, the new design minimises what is initially 5

6 displayed, showing the user the important information first (i.e., the burger and its price), and giving the user the option to view the important, but not as important, information after by selecting the menu item (i.e., toppings, sauces, nutritional information etc.). This places the user in control (a principle discussed in more detail below) and creates a minimalist design throughout the ordering process. Match between system and the real world Language is an important feature and requires careful consideration on any menu. One must consider all different types of people because there is not one set of people who dine out. It is also important to ensure that information appears in a logical order. In the original design language was appropriate and supported with icons. The home button was represented by a house, a common icon in design, and the call waiter button was represented with an icon displaying a waiter. The view order icon would be a little more difficult to understand if it was not written below, similar to the popular icon. When designing icons one should design them as though there are no words. In other words, users should be able to know what will happen when they press a button without having to look at the text explaining it. Instead of designing my own icons, I decided to combine the idea of a button and text because I thought that this would be more clear to users. By making buttons this gave users the idea that if you press the button you would be brought to its written destination, similar to the real world. I used short and simple language for the buttons, i.e., help, home, view order, and all done. I decided to use all done to make it seem more personable to the user. 6

7 Recognition rather than recall This principle refers to the reduction of the user s memory load. One of the great benefits of the e- menu is the ability to show users their orders in a confirmation page or a view order page. It is important that all information is displayed to the user at this stage to ensure that a food item is not forgotten. In the view order page of the original design the user is shown the item that they have chosen, the price, cooking preferences and the ability to delete it. But what if the user simply wants to edit it, for example, now wants bacon on the cheeseburger? This was not taken into account with this design and it would force the user to have to go searching through the menu once again. In the redesigned version, the user is given more information to view and is given the option to edit the order from the view order page. Information regarding toppings and messages were also included below the specific menu item, so users can make sure that they are not going to receive their nachos with sour cream and jalapenos. This also applies to the user s control in the interface. 7

8 Consistency and standards Consistency and standards were achieved by both designs through colour schemes, navigation systems, and general layout of the interface. Consistency was not something to be improved in the redesign based on the original design. For the redesign it was important to keep standards the same and remain consistent because a specific theme was being implemented. This was achieved using the colour scheme of the Captain America s website, and through the constant use of a grid system during the design. Visibility of system status This visibility of system status refers to the system informing users about what s going on through feedback. A common system status is when a page is loading and an animated clock or spinning circle appears while you are waiting. Other examples include the loading bar so users can see when the loading is almost over. 8

9 For the original design I did not see much of this principle; however with screenshots it is difficult to convey visibility. In the redesign we can see elements of this principle in the extra toppings page and the all done page after users have sent their order to the kitchen. In the extra toppings page toppings that are on the burger have a cross showing users and if they wish to add another topping they select it and a cross will appear in the appropriate box. In the all done page, following users sending their order to the kitchen, a status appears confirming that they have sent their order. User control and freedom User control has been mentioned above in terms of Nielsen s other principles, and now it will be looked at in more detail. User control relates to error prevention also because it allows users to escape their mistakes (e.g., an undo button). In the original design there is no back button on any of the pages, although there is a home button. But what if the user is in the middle of deciding their cooking preference and realises that they have selected the wrong burger? Instead of being able to simply go back, find the burger and select the cooking preferences, the user now has to begin again from the homepage. In contrast, the redesign has a back and home button on every page to ensure the user is in maximum control. 9

10 Furthermore, by placing two escape routes together it allows the user to make a conscience decision of which they would rather happen, get help because they have a question, or go to the homepage because they want to begin again. Flexibility and efficiency of use This is what separates novice and expert users when using interfaces. For the purpose of an e-menu there are no clear shortcuts that can be created, users will either move quickly through the system or not. An element of an accelerator could be the ability to select the all done button at any time during ordering, and then send the order to kitchen immediately without looking at the view order page (perhaps if you order the same thing every time you don t feel need to double check it). 10

11 Helps users recognise, diagnose and recover from errors This refers to error messages. In the original design there were no mention of error messages or messages informing users of what has happened. In the redesign we see messages for the user throughout the ordering process (e.g., slide for more ), on the all done page, and again on the all done page following users sending their orders to the kitchen. Error prevention Similar to the error messages mentioned above, error prevention is part of any carefully designed interface. Error prevention can be most seen in the all done page when users are reminded to view their order before sending it to the kitchen in case they have forgotten something. Another area is again when ordering extra toppings. By having the selection visible to users, and having that information displayed in the view order page, potential areas for error are being carefully thought out. 11

12 Help and documentation Again, this relates to error prevention and helping users avoid errors. A help option is available to users on every page (following the consistency principle also), and information is easy to edit on the view order page. Because the menu items are designed in a way that it is like a step-by-step process, this further aids users and lets them know what step they are on in the ordering process. 12

13 Focus Group #2 Following the second focus group, it became obvious that while certain elements that had been added worked with the system for the users, for example the use of buttons and the general navigation of the interface, other elements had to be modified. Below is a summary list of what worked and what did not work for the users in the e-menu. They are based on the second focus group questionnaire, which asked users to select preferences for layout designs and determine whether information was accurate or missing etc. (see Appendix B). Feedback from Focus Group #2 To view the focus group #2 questionnaire, see Appendix B. Questions #1 #2 #3 Should there be a welcome sign on the homepage? Yes Yes Yes Which slide for more option do you prefer / understand the most? Which layout do you prefer for the display of the menu options? Which layout do you prefer for the homepage buttons? Where do you prefer the logo to stand? Should there be a box around menu options? Why? Do the buttons at the top of the pages make sense to you? Second option clearer First layout clearer than the second layout which may confuse people First layout having the pay now button last makes more sense First option in the centre logo should be main focus / free advertising Yes people are not very bright Yes First option motion appears more fun / gives more depth Second layout nice to see what else is available and where you re going next First layout pay now should be at the end First option in the centre looks like a planet / better composition Yes because people are stupid Yes First option easier to understand First layout easier to understand First layout makes more sense for pay now to be at the end Second option in the bottom right corner looks better No box unnecessary Yes Are there any missing? No No good order No Do you prefer the white of blue background? Why? Blue background shows off the image of the burger better Blue background easier to see / stands out more White background blues clash and you can t see the food as well 13

14 Do you like the way the menu item is presented? Why? Likes to slide/globe element Yes not on plate Yes likes presentation How would you order this burger? Understands button Press on image understands button Understands how to order What do you think about the layout of the burger options? Easy to understand and navigate Easy to navigate and understand Good clear and navigation easy Is it clear and easy to navigate? Is there any extra information you would like to see available? What about side dishes? Price of menu items before going into them Cooking preferences Based on the layout of the extra toppings page, would you understand how to edit your burger? Yes understands Yes straightforward Yes understands How do you feel about the layout and design of this page? Likes it Fun and easy to understand Good design How do you feel about the layout of the view order page? Is there any information missing? Makes sense No (showed comparison to white writing on dark background) harder to read when white stroke is used No Good design clear and likes colour scheme No Are there any improvements that could be made? No No No Is it easy to navigate? Yes Yes Yes If you wanted to pay Understands layout Understands remove Understands layout for you bill, which finished? to avoid button would you confusion select? Which layout of the Second layout the First layout circle First layout more 14

15 payment page do you prefer? Why? circle highlights the options looks out of place obvious Which layout of the payment card page do you prefer? Why? Second layout - clearer Second layout extra fun First layout same reasoning Summary of findings: - A Welcome should be added - Overall first option of slide for more supported however second option will remain for clarity - First layout will remain based on focus group reasoning - Layout of buttons on homepage need to be redone so that pay now is at the end - Although first option of having the logo in the centre was more favourable, the logo will be placed in the bottom right corner to accommodate the menu layout - A box will be placed around menu options so that people are more aware that it is a pressable button/option - The blue background will remain for the menu items based on focus group feedback - Buttons easy to understand and navigate - Before selecting a menu item (e.g., a cheeseburger) the price should be shown before going into its details - When the burger is selected, a cooking preferences option needs to be added - Side dishes will be a part of the main menu options at the beginning - The finished? will be removed from the finished? Pay bill button to avoid confusion - With the payment page, focus group members preferred the first layout but not its corresponding payment-card layout. Therefore, the first layout will be kept for the payment page, and the second layout of the payment-card will be used but slightly redesigned to give a more cohesive look 15

16 Redesign #2 Based on the summary information gathered during the second focus group, it was these elements that were edited and modified. 1. Welcome should be added. Originally I just had the main menu being displayed immediately but after the second focus group I realised that there should be more of an introduction to the menu. Therefore I created a welcoming page with the welcome sign, the logo placed more centrally, and a get started button for people to select so that they knew that they were about to be exposed to the actual e-menu. 2. Overall first option of slide for more supported however second option will remain and replaced with slide for more menu options for clarity. I decided to keep the second slide for more design because I felt that it was more cohesive with the rest of the design of the emenu and looked more sophisticated. I added more text to the original ( slide for more became slide for more menu options ) so that it would be more clear to users how to navigate through the menu and what they should expect by sliding across. 16

17 3. First layout will remain based on focus group reasoning. 4. Layout of buttons on homepage need to be redone so that pay now is at the end. 17

18 5. Although first option of having the logo in the centre was more favourable, the logo will be placed in the bottom right corner to accommodate the menu layout. 6. A box will be placed around menu options so that people are more aware that it is a pressable button/option. This was important because, as stated by the focus group members, people are stupid. Users may not realise that they have to select the starters writing to be brought into the starters section. Therefore it was made to resemble a button. 18

19 7. Before selecting a menu item (e.g., a cheeseburger) the price should be shown before going into its details. Originally I only had the price of individual menu items within the selected item and it was not viewable while sliding through options. After conducting the second focus group this was brought to my attention and I agreed that a price should be placed under every item prior to going into it. 8. When the burger is selected, a cooking preferences option needs to be added. Again, as a result of focus group feedback I was made aware that I had not included an option for users to state their cooking preference. 19

20 9. The finished? will be removed from the finished? Pay bill button to avoid confusion. During the focus group, it was brought to my attention that users my select the finished? Pay bill option by accident, thinking that the finished was in relation to their food selections. By removing the question, the boxes became more clearly unrelated. The pay bill was also changed to pay now for consistency for other buttons. 10. With the payment page, focus group members preferred the first layout but not its corresponding payment-card layout. Therefore, the first layout will be kept for the 20

21 payment page, and the second layout of the payment-card will be used but slightly redesigned to give a more cohesive look. This was more complicated to achieve because the focus group came up with conflicting results about their preference for the payment system. I slightly redesigned the paymentcard page by replacing circles with rectangles and making it look more cohesive. 21

22 Focus Group #3 For the third, and final, focus group, participants were taken on a tour of the final redesign and casually asked to make any comments about the interface. There were no official questions asked, participants were asked to navigate through the design themselves, similar to paper prototyping, and explain their movements and choices (i.e., thinking aloud testing). Feedback from Focus Group #3 To view the focus group #3 tour of final design, see Appendix C. There was not much feedback gathered from participants during this phase of testing. Because questions weren t asked directly, but more in an informal setting while users navigated the system, there were only some quotes that were retained. The following are various quotes gathered during the third focus group: - Things are more straightforward and easier to understand - I like the colours, and the layout, and the font it s fun - It s something new and different that I haven t seen before - Having the price under the menu item is a great improvement - I like the logo in the corner its placement and size - Still a bit flat though needs animations or something Final Redesign Following the final focus group, the redesign of the interface following the second focus group was kept. This can be seen in Appendix C. 22

23 Reflection Time Management After completing this CA I m sad because I feel that there is a lot more I could have done. Looking back I wish I had used a more interactive prototyping tool like Adobe Flash so that I could really display the interactivity I had imagined for this e-menu. Unfortunately my time allocation wasn t on point, I spent too much time on the redesigning of too many pages of the e-menu when really I should have only redone four or five pages. This meant that I didn t have enough time to apply it to a more interactive format. Layout Also in terms of the globe layout I wish I had a more obvious replication of it. I incorporated it with screenshots but now I wish I had made it more obviously like a globe shape, even blocking out each side of the ipad. I did attempt this shape with the text on Adobe Photoshop but it didn t look right so I left it. Focus Groups In terms of focus groups, it was really hard to get people together all at the same time. I relied on my family and close friends for this. In the end I think it was a better fit because I believe that they were very honest with me, and it allowed them to feel more informal so it was more flowing during these group periods. Nielsen s Usability Heuristics Using Nielsen s principles is always interesting especially following design when you can apply it to what you ve created. I do wish I would have searched for another usability designer too though to get a better overall guide. What would I have done differently? Overall, if I had to do this assignment again, I would definitely still choose Waitron as a redesign choice, but I would use Adobe Flash to show my ideas. I think it would have shown my abilities more, and I would be able to show more of the interactivity that is currently only in my head. I would still use the same focus group members and the structure of having three different groups, I think that gave me more purpose with each phase of design and testing, and smaller groups allow for more debate than larger ones, because people aren t as intimidated. 23

24 References Ahlstrom, D., Hudelist, M. A., Schoeffmann, K., & Schaefer, G. (2012). A user study on image browsing on touchscreens. In Proc. of the 20 th ACM international conference on Multimedia Pages, FastCasual.com. (2012). Restaurant consumers increasingly interested in technology. Retrieved from Lessel, P., Bohmer, M, Kroner, A., & Kruger, A. (2012). User requirements and design guidelines for digital restaurant menus. In Proc. of the 7 th Nordic conference on Human-Computer Interaction: Making sense through design, National Restaurant Association. (2012). Technology is top trend for restaurants in Retrieved from Nielsen, J. & Mack, R. L. (1994). Usability inspection methods. New York, NY: Wiley & Sons. 24

25 Appendices Appendix A Focus Group Questionnaire #1 1. What do you think about the design of the menu selection page? Is there any information missing? 25

26 2. What do you think about the design of the menu items page? Is there any information missing? 26

27 3. What do you think about the design of the view order page? Is there any information missing? 27

28 4. What do you think about the design of the payment page? Is there any information missing? 28

29 Appendix B Focus Group Questionnaire #2 1. Should there be a welcome sign on the homepage? 29

30 2. Which slide for more option do you prefer / understand the most? 30

31 3. Which layout do you prefer for the display of the menu options? 31

32 4. Which layout do you prefer for the homepage button? 32

33 5. Where do you prefer the logo to stand? Is the centre of the screen or in the bottom right corner? 33

34 6. Should there be a box around menu options so that people know it is pressable? a. Why? 34

35 7. Do the buttons at the top of the pages make sense to you? a. Are there any missing? 35

36 8. Do you prefer the white of blue background? Why? 9. Do you like the way the menu item is presented? Why? 10. How would you order this burger? 36

37 11. What do you think about the layout of the burger options? a. Is it clear and easy to navigate? b. Is there any extra information you would like to see available? 37

38 12. Based on the layout of the extra toppings page, would you understand how to edit your burger? a. How do you feel about the layout and design of this page? 38

39 13. How do you feel about the layout of the view order page? a. Is there any information missing? b. Are there any improvements that could be made? c. Is it easy to navigate? 39

40 14. If you wanted to pay for you bill, which button would you select? 40

41 15. Which layout of the payment page do you prefer? a. Why? 41

42 16. Which layout of the payment card page do you prefer? a. Why? 42

43 Appendix C Focus Group #3 Tour of Final Design 43

44 44

45 45

46 46

47 47

48 48

49 49