Restaurant Website

advertisement
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
Download