Website Redesign

19
Arijit Roy

Transcript of Website Redesign

Arijit  Roy  

   

Table Of Contents !Introduction 2 Purpose 2 Executive Summary 2 Heuristic Analysis 3 PACT Analysis 3

People 4 Computer Literacy/Knowledge 4

Cognitive Abilities 4

Physical Abilities 4

Activities 4

Context 5

Technologies 5

Prototype Redesign 5 Homepage 6

Menu 6

Offers 7

Contact Us 7

Participatory design 7 5 Second Test 7

Task List 10

Time Taken for Tasks 10

Issues found in the prototype design 11

Final Redesign 12

Conclusions 13 Bibliography 18

"1USABILITY

Introduction !The website http://www.sevensocial.ie/ is the website for a Irish restaurant which is based in Dublin, Ireland and is meant to sell and promote this restaurant with the help of internet and social media.

!The five second test was done by using https://usabilityhub.com/ , all the answers to the questions were recorded by exporting them in .csv format and analysing them.

!The usability test was done by using camtasia software to recording the screen and audio during the test. The session recorded all the activities of the user on screen from start till the end of the rest, participants tasks completion time, navigational choices, comments and suggestions were also captured during the test session.

!Purpose !Seven-social is a irish restaurant in Dublin,Ireland. This restaurant’s website “sevensocial.ie” has some usability problems and it is not doing a good job in promoting and selling the restaurant.

This website needs to be redesigned by considering all the usability issues and attending to them. since this website’s main purpose is to promote the restaurant so this website also needs to be optimised for promotion on social media and internet.

!Executive Summary !This website redesign task was conducted to determine the problems in the website “sevensocial.ie” and redesign the website.

This study found some problems during heuristics analysis and PACT analysis which were considered during designing the initial prototype design website.

Then a 5-Second test and a usability test was conducted on the prototype design which pointed out some design flaws in the initial design like users were not able to read the fonts properly and couldn't find the map for the restaurant (which was on homepage).These design flaws were corrected in the final redesign.

This document also contains users feedback, time on tasks and screenshots of the website both in desktop and mobile environment.

"2USABILITY

!!Heuristic Analysis !The website “sevensocial.ie” has some problems according to jackob nielsen’s heuristic principals. The following are the major problems found during the heuristic analysis :

!1. The homepage is the first thing user sees when the site is opened, but when the user

navigates away from the homepage it is impossible to return to the first page. the “Home” link is actually the logo of the restaurant on top left corner of the website which is quite hard to figure out because the user doesn’t realise that the logo is the link to homepage. so a separate button should be introduced which says “home” and clearly indicates the user that this is the button that needs to be clicked when the user needs to be back on homepage.

2. There are pages in the website which are still “Under construction” these pages should be removed because if the content is empty that wastes users time and it creates a bad impression on the user.

3. Through the website there is very little use of pictures and symbols. We know that users tend to prefer “recognition rather then recall” (Nielsen,J. 1990). So, the website needs to add more pictures of food and commonly used symbols for things such as a contact us can have a sign of telephone so that it is easy for users to just see the phone and recognise that this is the link needs to be clicked if he/she has to contact the restaurant.

4. As the website’s main purpose is to attract customers the home page must be focused on food and ways to reach the restaurant. This will enable a potential customer to get a quick overview by just looking at the homepage, also “The amount of graphics on webpages should be minimised because of long download times they require”(Nielsen, 1999) since images of different recipes are also used in the background it may create problems to load on mobiles or computers having a slow internet connection.

!!PACT Analysis !A crucial part in redesigning the Seven Social Website is to make its design more user centred. (Benyon, 2005) says that PACT Analysis is very useful for thinking about a design situation of an interactive system. The results of PACT analysis are as following :

!

"3USABILITY

People !People differ from each other in many ways, like form physical appearance to the difference in personality. It is important that the website should be usable to all kind of people. A way to do this is by making sure that the website is usable to all kinds of people ( such as colour blinded, long/short sighted , etc.). The website should be usable to people with different levels of cognitive abilities, and should also be designed for people with all kinds of computer literacy, knowledge and languages.

!Computer Literacy/Knowledge !The computer knowledge of the users accessing the website can be beginner intermediate or expert, so it is required that the website should be usable to all the users. Because the site is based in Dublin so the site will only be accessed when people are considering to dine in a restaurant in Dublin. Thats why it is possible to have users who are not very computer/internet literate.

!Cognitive Abilities !Because people are normally better at seeing things than remembering them this site should be “see and click”. this will also help users of different regions and platform (mobile or computer) to easily interact with the website.

!Physical Abilities !It is important that the website should be accessible to those users who are physically challenged. This website should be able to cater sight impaired users so the text and image should be “Medium” in size so that it is easily understandable to the users having difficulty in seeing small things. The website should also have the ability to be magnified without disturbing its content, Lastly we need to make sure that the colour of the website is not mixing the colours that affects colour blindness.

!Activities !

"4USABILITY

There are many activities designers have to consider, these activities can be complex or simple. These are the main characters of activities that need to be considered:

!• Temporal aspects : This cover how regular or infrequent activities are.

• Cooperation : This is determined by how long the website takes to respond. “People expect a response time of about 100 milliseconds for hand–eye coordination activities and one-second for a cause-effect relationship such as clicking a button and something happening.” (Dix, 2003)

• Complexity : This considers how to complete a complex task step by step to reduce its complexity. “If a task or activity is well defined it can be accomplished with a simple step-by-step design.”(Benyon, 2005 )

• The nature of the content : This emphasises on what font and font size should be used and what colours are good for use in the website

!The main activities users will have available is a map of the SevenSocial. Users will also have ability to find food, timing and tourism information of the nearby places. the search will also allow easy access of information.

!Context !Activities always occur in some context, this section examines two collectively. Thats why it is important to knock that what the physical environment of the website will be. For example the website should support people who might have slow internet or the users who are using mobile devices instead of traditional computers.So, the website must support different resolutions which should support traditional computers widescreen computers as well as mobile and tablet devices.

!Technologies !Tecnologies carry out many operations and consist of lots of data and information. There are many technologies which users can use to access this website. They can use Windows PC’s, Mac’s, Smartphones or Tablets and different platforms like Windows, OSX, Linux, Android or iOS.

!Prototype Redesign !

"5USABILITY

It is clear from Heuristics analysis and PACT that the website requires redesign in order to work seamlessly and look attractive to the user, since it is a business based website it should focus majorly on how to attract users attention. Further more there is no support for following the restaurant on social networking websites as well as this website is not optimised for mobile browsing because text is too small on a mobile device.

Homepage The home page in the current website just gives a brief introduction to the restaurant and awards received. We know that users don’t like to read long texts instead they are attracted more by pictorial representation of the food offered. That is why home page has been redesigned to include pictorial representation of common functions of the website.

Menu The menu page is redesigned to include pictures of all of the food available and is categorised as lunch, brunch, dinner and wine list. Pictorial representation helps user to see what will be available to eat instead of just names of the dishes, as customers of the restaurant may be from different countries and they might not recognise a dish by its name, so it also helps them to recognise the dishes visually.

"6USABILITY

Offers This page is kept simple and easy to use, it has a list of boxes to represent each offer. which is represented by a Title and a small introduction of the offer ( so that users can go through them quickly).

Contact Us This page will contain all the information on how to contact the restaurant, that is phone numbers, email address, blogs, forums and social networking links.

!Participatory design !!5 Second Test !The first impression of the website is very important in business related website. So, The user must remember and recall what the website was about in a very small amount of time. In these scenarios “5 Second Test” is quite helpful. “The homepage needs to communicate the relevant stuff to the user within seconds” (Nielsen, 2002) This lets a designer know that what is wrong with his design and weather his design is able to pull the user’s focus in the right area

!

"7USABILITY

In this redesign the homepage prototype was tested with 9 users, then the users were asked a series of questions about what they recalled after 5 seconds. The homepage is focused to provide a full gist of the restaurant and single click access to most of the important features. The main task of the website is to “Sell Food” therefore users should be focused on food. The test result of the 5 second test is shown below.

!Question 1 : What do you think this page was about?

Answers :

!Question 2: What was the most prominent element on the page?

!Answers :

!!

"8USABILITY

Restaurant

not sure

Ordering food

food service delivery

Recipes

seven social

restaurant

lunch

Places?

food

recipes

I don't know - it was too stylized

the hard to read fonts

Breakfast, Lunch and Dinner.

foods

book a table

dishes

Lunch

Question 3 : What product do you think this company sells?

!Answers :

!Question 4 : Which element on the page did you focus on most?

!Answers :

!As we can see from the above reviews that the 5 seconds test is quite useful in determining weather the initial prototype is usable and does it focuses on the right points.

It is clear from the first questions that users generally get a idea that this website is related to food.

"9USABILITY

fast food

no idea

Food

resturant food

I didn't realize the company sold anything.

prepared foods (lunch/dinner)

menu

food

????

images

too many questions

Skipped

the hard to read fonts

Recipes, Breakfast, Lunch and Dinner.

images

book a table

food

The boxed images

The second question asks the users what the most prominent thing user noticed, 1 user thought that the design was to stylised and one user thought that the font was hard to read rest 7 users recalled that the company is trying to sell food, lunch , breakfast.

In the third question the user was asked that what is this company trying to sell. Except for 2 users rest 7 users recalled that the company was trying to sell food.

Final question was to determine what was the user focussing on the webpage, the answers tell us that the users focused mostly on images and food, though one user had problems with the font again.

So, we can conclude that the users get a general idea that this website is about food and it is trying to reach out to customers who are interested in food, we can also tell that users have some difficulty in reading the fonts, and one user thinks the website is to stylised.

!More about this test can be found here.

!https://usabilityhub.com/tests/bce8090e7038/results/7f71317c15de

!!Task List For the usability test these were the tasks which users needed to do:

!1. Please find how to reach the restaurant

!2. Can you tell me the process of booking a table ?

!3. Can you follow the restaurant on facebook

!4. Please find the dinner and wine list

!5. Can you locate the offers or discounts that are currently available?

!Time Taken for Tasks As we can see that the time taken for the first task is more than the average time taken for other tasks, so we con conclude that, users have problem finding the map for the restaurant which is given on the homepage as “find us”. One of the user also mentioned that the contact

"10USABILITY

information should be there on homepage, this indicates that users have problems finding the restaurant and this design needs to be improved so that users find it easy to find the restaurant.

!

!

!Issues found in the prototype design By conducting the 5 Second Test and the usability test we know that users faced difficulty in finding the restaurant and gave negative feedback on contact details. So we can conclude that the contact us and find us needs improving.

!

"11USABILITY

tasks / user user 1 user 2 Average time

Task 1 37 38 37.5

Task 2 23 14 18.5

Task 3 15 25 20

Task 4 20 32 26

Task 5 22 21 21.5

Task 1 Task 2 Task 3 Task 4 Task 5

1. Contact Us : Users suggested that a phone number should be mentioned on the homepage so that it will be easy to find the contact details for the restaurant.

2. Find Us : One user was not able to find the “find us” on the homepage and second participant took time in finding the contact us on the homepage, so contact us needs to be highlighted and moved above. So that when the homepage is opened the user clearly knows how to contact the restaurant.

3. Fonts : Some users found it difficult to read the current font.

4. Price : some users thought that the price of the food must be included in the “Menu” section.

5. A heading should be added to the website so that users can properly focus and recall what this website was about.

!!Final Redesign !After considering 5 second test and usability test. It can be concluded that the following changes were necessary in the initial prototype.

!1. Contact number : contact number should be added in the homepage.

2. Find Us : “Find Us” should be changed and renamed as “Map”, Map should be changed too.

3. Fonts : Fonts of the homepage should be changed.

4. Price : Price should be added in “Menu” Section.

5. Heading : A proper heading should be added to the website on the homepage.

!The following are the pictures of the final redesigned website.

!!!!!!!!

"12USABILITY

"13USABILITY

"14USABILITY

"15USABILITY

"16USABILITY

Conclusions !In the end it can concluded that the website sevensocial.ie has quite a lot of usability issues as we have conducted Heuristic analysis, PACT analysis, 5-Second Test and Usability Test we know that the website had problems with its homepage and it wasn’t optimised for mobile devices, the website was also missing links to social networking websites (which is important nowadays to promote your business). All these corrections have been done and a prototype of the website has been presented. Shown below is the current website (Left) and redesigned website (Right) on an android device.

!!!

"17USABILITY

Bibliography !• Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications

of the ACM 33, 3 (March), 338-348.

• Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256.

• Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. (Boston, MA, April 24-28), 152-158.

• Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY.

• Benyon, D (2005). Designing Interactive Systems: People, Activities, Contexts, Technologies. : Pearson Education, Inc.. .

• Dix ,A (2003). Human-Computer Interaction. London: Pearson Education.

• Gardner, O. (2009). The 5 Second Rule: Critiquing the Best Websites of 2009. Available: http://unbounce.com/landing-pages/the-5-second-rule-best-sites-of-2009-part-1/. Last accessed 7th Jan 2014.

• Nielsen, J. (1999). Response Time. In: Weiss, S and Eberhardt, J Designing Web Usability. New York: New Riders Publishing. 134.

• Nielsen, J and Tahir, M. (2001). Homepage Design Statistics. In: Weiss, S and Eberhardt, J Homepage Usability 50 Websites deconstructed. USA: New Riders Publishing. 38-39.

"18USABILITY