Usability Study of Restaurant Websites Fu-Hsuan Chou Instructional Technology University of Texas at Austin Research Project Design and Strategies for New Media Dr. Liu, Min Spring 2006 1 Contents Introduction……………………………………………………………………………3 The Websites…………………………………………………………………………..4 Methodology…………………………………………………………………………..8 Data Collection…...…………………………………………………………………..12 Results……………………………………………………………………..................15 Discussion and Recommendations…………………………………………………...29 Summary and Conclusions…………………………………………………………...32 Reference……………………………………………………………………………..33 Related Links…………………………………………………………………….…...33 2 Introduction The purpose of this research project is to explore the usability of restaurant websites. Restaurant websites are commonly used resources by people who mainly intend to 1) dine out with families or friends in their area, 2) find a place to celebrate a special date, 3) order their food for banquet or party, 4) shop their food for gifts, 5) order their food for delivery. According to these purposes, people who use the websites perform tasks, like finding the nearest location, getting the map, navigating the menu etc. For this research project, I would like to compare the restaurants of different cuisine that might have different approach of usability. Also, I wish to discover how information, interface and interaction design affect each website’s usability. The three participants selected for this project have different majors in university of Texas at Austin. Each one was given certain task to perform on the selected websites. People would benefit from reading this study, especially for web designers who intend to know how to reach the most effective usability based on information, interface and interactive design. 3 The Websites The websites to be studied were chosen on the basis of the following factors: 1. They are chain restaurant which are all over the United States. 2. They serve different kinds of cuisine. 3. They offer multiple services. The three sites selected for the study are: 1. The Cheesecake Factory: http://www.thecheesecakefactory.com/default.asp The Cheesecake Factory not only serves cheesecake but eclectic cuisine. This website provides the services of shop, menu, location and some information about them, like their history, investors and careers. The three main pages are as follows: Shop 4 Menu Location 5 2. Buca di Beppo: http://www.bucadibeppo.com/default.asp Buca di Beppo specializes in immigrant southern Italian food, served family style and is famous for their big-sized pizzas. This website provides the services of food & drink, neighborhood locations, buy Buca stuff and some information about them, like accolades, vibrant opportunities and their corporate site. Besides, they offer the service of requesting a reservation online. 6 3. P.F. Chang’s China Bistro : http://www.pfchangs.com/ P.F. Chang’s China Bistro definitely serves Chinese food as implied by the name, and they also serve wine and desserts. The website provides the services of cuisine, locations and some information about them, like news, their concept, employment, and investor relations. Besides, they also offer the service of gift card. 7 Methodology The Participants The three participants selected to perform the usability tests of these websites were chosen based on their varied backgrounds. I’d like to choose them with different background because it would be more reliable and convincible without bias while conducting the test. Below are the descriptions of their backgrounds and the goals they stated in the interviews I had with them: 1. Gary Chen, 27 Years Old, Major in Architecture Background: Gary is a graduate student who majors in architecture in University of Texas at Austin. He is always so busy in his schoolwork that he can’t often cook by himself. Besides, he likes to eat out and get together with his friends on his free time. Motivation and Needs: Since Gary doesn’t have much free time available and he is good at navigating websites, he usually likes to get to the information he wants in a website as efficiently as possible. He doesn’t like to browse a lot and is quick to get impatient if the website frustrates him. 2. Ruby Ho, 23 Years Old, Major in Pharmacy Background: Ruby is a graduate student who major in pharmacy in University of Texas at Austin. She likes to eat different kinds of delicious cuisine and she is really addicted to it. Motivation and Needs: Ruby is interested in browsing restaurant websites and she would surely collect enough information from the websites beforehand. She is a patient person and don’t like to miss anything she can get. 3. Celest Yeh, 23 Years Old, Major in Advertising Background: Celest is a graduate student who major in advertising in University of Texas at Austin. She spends a lot of time studying and on her free time she likes going to the movies or dining out with her boyfriend. She is very picky about choosing restaurants. Motivation and Needs: Celest likes to try new things, especially the special cuisine or the restaurants she has never been. Sometimes she would get the information about restaurant from her friends and then she would go to the websites to take a look. Although her major is 8 advertising, she is tired of any advertisements in the websites. Once she feels that the website is not designed artistically and the information isn’t displayed clearly enough, she would leave and go to somewhere else instead. The Tasks The tasks given to users in order to perform the site usability tests were developed based on both Neilsen’s Methodology ( Meilsen et al., 2000) as well as the information from preliminary interviews in terms of the users’ general purposes when looking for restaurant information online. This should help give them a sense of participation in the selection of their tasks (Krug, 1999). The introduction of the process was read by the users as follows: “The purpose of the following study is to determine how useful certain websites are for the people who visit them. During this session you will be asked to perform several tasks on the sites as well as to complete a couple of questionnaires. All of the personal information you share with me during this study will remain strictly confidential. Be aware that you have the right to stop this test at any moment or any activity you feel uncomfortable.” During the process of the tasks, the participants were asked to speak out loud as much as possible what their thoughts are, and to let me understand how their thoughts progress and what’s the impressions when particular actions were executed in line with the think aloud protocol in Nielsen’s methodology (Nielsen et al., 2000). The tasks given to each user are as follows. For each site: Task 1 – First impressions: This task was meant to provide a general view of how user’s perceived the websites in a similar way as described in Nielsen’s methodology. Minor adjustments were made to the questions to reflect information that users would typically want to find out from a restaurant website as follows: Task 1 a) At first glance, what do you think this website is about? b) Who do you think is its target audience? c) What products or services do you think the website offers? d) At first glance, do you like the interface of the websites? Are you comfortable with the way they present, like the color and the format? 9 Task 2 – Search for a specific element of information. In this task the users were asked to look for a particular information element by using any of the navigation or search features of the website according to those tasks that a user would typically perform on a site as well as the information the participants provided during the interviews, as shown below: Task 2 For “The Cheesecake Factory” website: a) Find a dessert which is named CHOCOLATE TUXEDO CREAM CHEESECAKE with the picture from the menu. b) Find the location of the restaurant in King of Prussia, Pennsylvania c) Buy a gift card.* d) Buy a cheesecake that you would like to eat.* e) Find the latest news about this restaurant. For “Buca di Beppo” website: a) Find a dish which is named SPICY ARRABBIATA PIZZA from the menu. b) Find the location of the restaurant in Miami, Florida c) Buy a gift card.* d) Find out where you can request a reservation within the site. e) Find out where you can reserve a space for planning an event and menu. f) Find the latest news about this restaurant. For “P.F. Chang’s China Bistro” website: a) Find a dish which is named GINGER CHICKEN AND BROCCOLI b) Find the wine list of LIGHT TO MEDIUM INTENSITY RED WINES from this website. c) Find the location of the restaurant in Los Angeles, California. d) Buy a gift card.* e) Download the flavors of Sichuan menu. f) Find the latest news about this restaurant. *This type of task was stopped when the screen to enter a credit card number was reached. 10 Task 3 – Questionnaire about help, accessibility and special features of the sites. This task was meant to assess how easy it would be for users to recover from an error or to find help getting out of a situation where they would be stuck. The questions are the same for all the three sites as follows: Task 3 a) If you made a mistake during a search, would the site help you to correct it? b) If you had a question about how to use the site, how would you find the answer? 11 Data Collection Pre-Task Questionnaire Each user was given a pre-task questionnaire that was used to determine each user’s level of proficiency using the web and to determine their interests prior to task assignment as shown below: Preliminary Questionnaire This information will be kept strictly confidential. 1. Your age: 16 – 20 21 – 25 26 – 30 31 – 35 36 – 40 41 – 45 46 – 50 over 50 2. Gender: Male Female 3. Occupation: 4. Where do you access the Internet? home work both 5. About how long have you been using the Internet? Daily Weekly Less 6. What do you use the Internet for? (Choose all that apply) Email Shopping Research Other (Please specify)____________________________ 7. How often do you dine out? 8. Do you look for restaurant information online? Yes No Task Execution During the process of task execution, a researcher sat behind the users and took notes of their behavior and actions as they attempted to complete it. If the users would happen to get stuck at a certain point, the researcher would then provide hints and guidance to get them back in track. Also, notes were constantly taken on the comments made by the users as they navigated the site. Post task questionnaire 12 When a task was over by either success or failure of the users, a post-task questionnaire was given to them to rate their overall impressions of the site. The researcher responded any questions they had and they were asked to elaborate any responses they were unsure about. The questionnaire was the same for the three sites as shown below: Overall site usability questionnaire. Please rate your satisfaction with these aspects of the site you have just finished working with by circling the appropriate number. As you evaluate other sites, you may come back and change ratings you have already made for this site. Please rate the site according to the following criteria: Very Unsatisfied <-1 2 3 4 5 6 7 ->Very Satisfied 1. Getting to the right part of the site 1234567 2. Quality of information about restaurant 1234567 3. Ease of reading the text 1234567 4. Site’s search facility (if used) 1234567 5. Appearance of site, including colors and graphics 1234567 6. Speed of pages displaying 1234567 7. Fun, entertainment value 1234567 8. Quality of information about menu and locations 1234567 9. Use of my credit card and personal information 1234567 10. Overall experience 1234567 11. Were all your questions answered? No, none of them Yes, completely 1 2 3 7 13 4 5 6 12. You feel that this site: is only interesting in advertising cares about being useful to me 1 2 3 4 5 6 4 5 6 7 13. How valuable is the information on this site to you? It's gibberish It's very useful. 1 2 3 7 14. How likely are you to return to this site on your own? I’ll probably return No way the next time 1 2 3 4 5 6 7 Testing Facilities The tests were conducted at the Center for Instructional Technologies computer lab after hours in such a way that the setup would not be influenced by distracter factors like other people or noises. The web browsers used for the test were Internet Explorer 6 for Windows. After each test was run, the cache and history of the browser were cleaned up in order to remove any cues memorized on the previous test for future users. 14 Results Any findings of interest resulting from task execution of the three users are discussed below: 1. The Cheesecake Factory: http://www.thecheesecakefactory.com/default.asp Task1: Once entering the main page of this website, the users thought it is about a restaurant which both serve and sell cheesecakes according to the main sections on the right side except Ruby. She thought it also serves other dishes besides cheesecakes by noticing the pictures shown in the middle of the page. The users all thought that their target audiences are who like eat cheesecakes or desserts. Also, they all thought the website offers the services of selling cheesecakes, the information of locations and the menu of their restaurant based on the main sections on the right side in the main page. Gary likes the interface of the website very much because he likes the simple color and format. However, Celest doesn’t like the interface because she prefers fancy designs of website. Plentiful elements can make her explore more. The main page is shown below. 15 Task2: All the users could finish the first part of task 2 easily but Gary tried to see the pictures of other items except the one required by the task. He felt frustrated because the website doesn’t offer all the pictures of the items but only part of them. Ruby spent a lot of time finding the location required by the task because she doesn’t know the exact location of Pennsylvania and she didn’t notice the list on the left side of the page. So she spent a lot of time placing mouse on the right point. Celest tried to do some changes in task 2. She changed the number of cheesecake she planed to buy, but the cart would only show what she changed afterward. It means 16 that the cart only left the 2 cheesecakes and the gift card item was gone. So, she has to put the gift card into her cart again. All the users could find the “What’s New” by clicking the “About Us” button in the main page and then they could click the “What’s New” button on the left list after entering the subpage. Task3: All the users thought the website provides appropriate feedback in most time they made a mistake. In the case, Gary planed to buy the cheesecake from the “Cheesecakes by the Month” when he conducted task2. It showed the information reminding him to choose the arrival date as below when he wanted to skip the step. 17 However, Ruby tried to buy a cheesecake from the “cheesecake” page when she conducted task 2. At first time, she clicked “add to cart” button directly without selecting the size box. But the system didn’t show anything to remind her how to correct it. She noticed that the page didn’t go to next one and felt confused. After she tried several times, she found that she forgot to check the size box. All the users could find the FAQs in the “Shop” page when they conducted task3 as below. 18 Besides, Celest also found the FAQs in the “About Us” page as below. Moreover, Ruby and Celst thought if they couldn’t get the answers they want from the FAQs, they could contact them through the website in the two pages shown below. 19 2. Buca di Beppo: http://www.bucadibeppo.com/default.asp Task1: Once entering the main page of this website, Gary thought it is about food according to a lot of food pictures; Ruby thought it is about a restaurant based on the logo with some words which said “Immigrant Southern Italian Dining”. Celest thought it is about a restaurant according to the tab on the top which is “food& drink!”. The users all thought that their target audiences are who like eat the food they offer. Also, Ruby thought the website offers the services of selling their food according to the tab which is “Buy Buca Stuff”. Ruby likes the interface of the website very much because she thought the website uses some main color, like green and red which are very suitable for their topic. However, Gary and Celest don’t like the color and format of the website because they think it’s not aesthetic and the interface made them uncomfortable. The main page is shown below. 20 Task2: All the users could finish the first part of task 2 easily but Ruby thought it would be better if they could provide the pictures of food and Celest thought the text of the description is so small and unclear that she had to pay more attention on looking for the required dish. All the users could find the required location easily by just clicking where Florida is located on the map. Gary thought it is helpful that it provides a listing of location so that the users can select from the list even though they don’t know the exact location they want to find. 21 Ruby and Celest could buy a gift card easily by clicking the tab of “Buy Buca Stuff” but Gary thought this section should sell food they offer not gift cards so he spent more time to find it. After finishing the step, they all thought it’s strange that it only sell gift card rather than food they offer in the restaurant. Besides, they all didn’t notice that there is another pathway to reach the task which is the button located on 22 the right corner of the page. It also shows the words “Buy Buca Stuff” as below. All the users could find out where they can request a reservation and where they can reserve a space for planning an event and menu within the site. However, Ruby thought these services should be also put in the main tabs on the top or on the left of the page because in the beginning she tried to get the way through the main tabs but she failed. Also, she thought the actual buttons are more like promotions. 23 Task3: All the users could find the ways to solve their problems by clicking “About Us” to get FAQs or clicking “Contact Us” to ask them questions directly. Besides, Ruby noticed that there is a phone number shown on the lower right corner of the page. Users could also contact them by phone. 24 3. P.F. Chang’s China Bistro : http://www.pfchangs.com/ Task1: At first glance, the users all thought the website is about a bistro because of the obvious title. Ruby likes the interface very much because the graphics and the color fit the food they offer very well. But, Gary and Celest don’t like the interface because the ads on the bottom of the page are too apparent and even more apparent than the main contents. Task2: All the users had no problem on find the required dish by clicking the main tab on CUISINE->MENU-> CHICKEN & DUCK. Ruby likes the service most because they offer the pictures and very detailed information. Unfortunately, she thinks it would be better if they offer the price of the food. 25 When they worked on finding the required location, they all thought the function that it would show the name of the state when you put the mouse on it is really useful. It was shown as below. 26 When Celest tried to find where she can download the flavors of Sichuan menu, she got lost in the website. She tried to go back to the main page but she couldn’t find the button she wanted. Finally, she found that the main page button is on the middle left side of the page, not on the usual location as below. The website offers a useful function in the “News” section. When the users tried to find the latest news about the restaurant, they clicked the News tab directly and then they can use the search box to find the news they want to know and also they offer the live webcast. Gary thinks that it provides abundant elements in this part compared to other websites he has seen before. 27 Task3: The users could find the ways to solve their problem when they need by clicking the “FAQ/EMAIL US” tab easily. However, Gary found that there was no warning or reminder to let him know how to correct what he did when he ignored to select the item and just click “continue” button on the process of buying a gift card. 28 Discussion and Recommendations The usability study performed on the three websites yielded important information that would help their designers to make the modifications necessary to improve their overall usability and their users experience in the site. Recommendations are given below for those issues identified by the user tasks as well as their overall perceptions of the sites reflected by the answers given in the post-task questionnaires. 1. The Cheesecake Factory: http://www.thecheesecakefactory.com/default.asp Information Design: First of all, the homepage provides too little information about what the website is about although the interface is simple and neat. The recommendation is to add the concise description as a tagline below, above, or next to the Site ID (the title of the restaurant).(Krug 2000) The website provides a lot of pictures of the food they offer in the menu section but not all of them. The recommendation is to add all of the pictures in the menu so that the users can understand the food they offer more clearly. Interface Design: First of all, the text in the menu appears some programming code and unrecognized words. It is a big flaw that should be corrected. Beside, in the location page, the list of the states on the left side is not obvious enough because the map is too attractive. Users might ignore the list. So if they don’t know the exact location they want to find in the map, they might feel frustrated in trying all the points in the map. The recommendation is to enlarge the column of the list a little bit to make the list more prominent and make the interface more balanced. All in all, the interface of the website makes users feel comfortable. They use consistent color in each main section, keep the interface neat and clean and the graphics are fancy but appropriate. Interactive Design: In general, the website provides appropriate feedback to users. (Norman 2002) However, in some cases, users would be confused if they make a mistake and don’t see any reminders. When a user forget to select the size of cheesecake he/she wants to buy and just click the “add to cart” button, the page wouldn’t go to next page but remain the same and show nothing. The recommendation is to add the reminder as 29 feedback to guide users how to fix the problem. Beside, they provide the box in viewing my cart page for users to change the quantities they want to buy. However, if a user changes the number of the items, the page would update but lose the other items so that the user has to go back and select again. The recommendation is to fix the problem in programming and make each item stay whether any changes happen to the quantity. 2. Buca di Beppo: http://www.bucadibeppo.com/default.asp Information Design: First of all, the homepage concludes so many elements so that the users would be confused in where they should start. The multiple elements presented in this homepage go completely against Krug’s recommendations of keeping a website simple and succinct (Krug 2000). The recommendation is to simplify the information existing in the homepage. Moreover, the website offers plentiful information but didn’t group them well. It is going completely against Krug’s recommendations for grouping. (Krug 2000) The recommendation is to categorize each element, like special offer and new dishes so that the services would be more accessible and users would be easier to get what they want. The service”Buy Buca’s Stuff” only offer gift cards for users to buy. It misleads users that they might sell the food they offer in the restaurant. The recommendation is to change the tab name to “Buy Gift Card” or add some food for users to buy, not only gift cards. Interface Design: First of all, the interface of the homepage is colorful but too cluttered. It goes against Krug’s recommendations for simplicity. (Krug 2000) The pictures of new dishes in the middle of the page occupy too many spaces and useless. On the contrary, the main list was located on the bottom of the page where is unobvious. The recommendation is to reduce the spaces and not leave so much blank, or put the pictures into next page after clicking the name of the dish in the list. Also, the service of reservation should be also available in the main section, not only located as a promotion. Besides, the font of the text is too small to see. It should be enlarged to meet Norman’s principle of visibility. (Norman 2002) 30 Interactive Design: All in all, the website provides good feedback when users need and it also provide some pathway for users to contact them. 3. P.F. Chang’s China Bistro : http://www.pfchangs.com/ Information Design: First of all, the advertisements presented on the bottom of their homepage go completely against Norman’s principle of visibility (Norman 2002) by making the unusable information inside the advertisements much more prominent than the really useful information on the site. Since the contents in the main page are very few, the advertisements can become distracting that they actually work against the purpose of the website itself. The recommendation for this site would be to remove the advertising they have and increase the amount of content. Especially in the home page where the main information about the restaurant should be provided the section that offers any type of relevant information should be enlarged and located in the center of the page rather than only the tile and the graphics. Another flaw in this website is the menu of flavors of Sichuan which was located in the center of the homepage independently. It might make users confused and wonder what it is about when they see the name of the button. The recommendation is to put this section into the subsection of the cuisine in the tab on the top of the page. Well-categorized contents decrease confusion. Besides, the button of “Home Page” is located in the unobvious place. The button has to be very obvious because users often want to go back to the main page when they get lost. The recommendation for this part is to place the button on an more obvious place, like the top of the page, or make the button more prominent, like change the color or enlarge the font. Since the main page icon that also offers the function to link to the homepage is not self-explanation enough that users might not to know the function it offers, it is better to move it to the upper left corner as most websites do. Finally, this website still has to define who their target audience is and what kind of information and services it wants to provide for them (Preece, Rogers and Sharp, 2002). Interface Design: The font of contents and the font of the subsections on the left side require to be enlarged because they are too small and unobvious. Also, the special service, like 31 “Download P.F. Chang’s PDF Menu” makes the interface disorder. It not only makes the interface unbalanced but also not prominent enough. Besides, the varied size and type of the font makes the interface in a clutter. So, these parts go completely against Krug’s recommendations for simplicity (Krug 2000). The recommendation would be to make the icon fancier to announce that it is their special offer or put it on the top of the page which is more apparent instead of on the lower left corner. For the font, the size and the type of the font should be standardized and consistent. Interactive Design: In the process on purchasing gift card, the user couldn’t get the feedback when he/she makes a mistake. For the perspectives in interactive design, it goes against Norman’s recommendations of user feedback (Norman 2002) All in all, this website offers good interactive services, like “contact us” that users can leave a comment or question to them. And it also gives users reminder to guide them how to progress next step. Summary and Conclusions The results of this study showed the importance of simple and neat interface and how important the role it plays in the usability of a website. Friendly design is a crucial factor which affects how useful the website is. Especially for sites that users would feel comfortable about the way they present, the appropriate information they offer, the accessibility of buying the products and contact them. Most important thing is offering the instant feedback whenever the users need. For the sites evaluated in this study, “The Cheesecake Factory” seems to be the one that has the best implementation of the design principles of information, interface and interaction. This is also the only site that includes neat, simple and consistent these good elements in interface design. Also, it is the site where has not annoying advertisement can be found. In conclusion, standing on users’ position to design a website would help designers prevent from having blind spots. Also, providing meaningful, informative and relevant contents should be the goal that every website designer should strive for. 32 Reference Nielsen, J., Snyder, C., Molich, R., and Farrell, S. (2000). Methodology. Nielsen, J. & Tahir, M. (2002). Home Page Usability: 50 Websites Deconstructed. Krug, S. (2002). Don’t Make Me Think! A Common Sense Approach to Web Usability. Norman, D. (2002). The Design of Everyday Things. Preece, Rogers and Sharp (2002). Interaction Design: beyond human-computer interaction. Related Links http://www.thecheesecakefactory.com/default.asp http://www.bucadibeppo.com/ http://www.pfchangs.com/ http://www.austin360.com/ This paper is written by Fu-Hsuan Chou for the course EDC385G Design & Strategies for New Media at the University of Texas - Austin 33