Download Report. - Melagrana Restaurant

Westminster International University in Tashkent
BSc in Economics
2012 - 2013
COURSEWORK 1
To be completed by the student
Student’s ID number
Module name
Module code
Tutor
Individual assignment
Group assignment
Submission deadline
00001734
Introduction to Web Publishing
2UZB409
Rashid Turayev


For Academic Registrar use only
1th April 2013
Contents
Site Plan ............................................................................................................................................................... 2
Audience profile .............................................................................................................................................. 3
Goals and Objectives....................................................................................................................................... 3
Functions and Features................................................................................................................................... 3
Design Strategy ............................................................................................................................................... 4
Accessibility ..................................................................................................................................................... 4
Navigation ....................................................................................................................................................... 5
Evaluation of Competitors Web Sites ................................................................................................................. 5
Evaluation strategy ......................................................................................................................................... 5
Design Evaluation............................................................................................................................................ 6
BIBLIOGRAPHY..................................................................................................................................................... 8
Url: http://melagrana.co.nf/
2
Site Plan
Melagrana is a modern Italian restaurant with high quality of products and services in Uzbekistan.
This report analyzes the website of the Melagrana Restaurent, precisely the accessibility, usability and
design of it. Furthermore, it gives a brief analysis of competitors’ websites.
Audience profile
The website of Melagrana Reastaurant was created for gourmets and lovers of Italian food. The main target
of this website is people between 25 and 50 since young people visit such places rarely, as they are not
financially independent. Majority of people who are above this age in Uzbekistan do not use internet.
However, there are no gender constraints of web users since this website is not oriented on personal
interests, like football or cosmetics.
As the prices of products are relatively high, the audience target of this website is people with high income.
Goals and Objectives
The main purpose of the website is to promote Melagrana in the local market, increase brand recognition
and attract more people. In future this website may be upgraded by adding extra features like online
transactions and trade. In turns it will positively affect the business of Melagrana by increasing sales.
Moreover, e-commerce considerably decreases the costs on advertising and marketing and eases the
completion of tasks like reservation.
Functions and Features
Main function that was added to this website is the forms that enable web users to interact with website
creators. There were included 2 forms: feedback (contact) form and reservation form. Feedback form lets
users send their comments and suggestions to the admins for further improvements of website. Moreover,
it strengthens the interrelation between customers and executives of Melagrana.
Secondly, providing users with necessary information about the company and its products and services is
very crucial for any website (Huang, 2006). Hence the main information about Melagrana and its products
were given in the sections About Us and Cuisine.
According to Huang (2006), it is very important to add multimedia tools to website to the reason that it
attracts people and increases the chances of repeated access to the website.
Finally, it provides users with the recipes of the most delicious foods and to make it easier access to print
function through the JavaScript.
3
Design Strategy
Melagrana’s website was designed through Adobe Dreamweaver CS3 and Swish 2.0 software. The Swish 2.0
was used to create slider to page due to its easy interface and wide range of functions and effects of
changing slides. The image slider placed in the home page to attract people and
The layout was defined though “div” tag instead of using tables. First, it is much easier and do not needs
huge amount of codes to be entered. Consequently the size of the file will be lower, because the more
codes, the more will be the size. In its turn it eases download of website making faster. Moreover, in a large
code there may be many bugs and vice versa. Using div tag makes layout more flexible as it is easier to
change its place, width height of separate element. While in table it needs long code to be entered in order
to change only one part of whole table.
Appearance of website, in general, is calm and elegant. Colors of the website were chosen in a way that
suits the principles of accessibility. They are calming and do not distracts users. It uses rich red, black, white
and light gray. The red color was used because it fits the name of the restaurant, which in English means
“pomegranate”. Vivaldi and Times New Roman fonts used in this website fit elegant background and adds
grace to the overall look of website.
In the Cookbook part, the users are given the recipes of Italian foods and there the java script is used in
order to print the current page. According to Krug (2000), web users tend to prefer click on button rather
than using keyboard shortcuts (ctrl+p) or seeking it on the menu bar.
In the Gallery section jQuery Carousel slider is used to make it attractive to the users. jQuery is relatively
easier than JavaScript for the reason that it uses easy coding language. Moreover, jQuery provides with
ready libraries that must be downloaded and inserted to the catalogue where the main pages are located
and give a proper link to this libraries.
Accessibility
According to accessibility principals, the website should have readable text. In other words, the content of
the page should not distract the eyes of visitors. In order to reach this result several tips were used while
designing this webpage. Firstly, the contrast between the background and the text of page should not
irritate user. Therefore in the website designing process for Melagrana Restaurant, it was decided to use
bright color as a background and black and rich red as the main text colors. Combination of these colors
reduces eye distraction and makes it easy to access the text of the page. Secondly, in order to make the site
accessible for people with weak sight, the bigger font sizes were used in most cases, from 14 pixels up to 22
pixels. Also, it was decided not to overload the pages and leave more free space as overloaded content
4
disturbs the attention and weak sighted people may not be able to use this kind of pages. Most users tend
to not read
Moreover, the sitemap of the website was provided in order to help users with sight problems.
Another principle says that the pictures, videos and other media tools should be visible to user. If they are
not visible, they must at least be readable. Therefore, in design process of this website alternative texts (“alt”
tags) were added to each media. (Design-Ecommerce.com)
Following Design-Ecommerce.com, the content of the page must be understandable to almost all users.
Thus the content of this website was written in simple language and technical wordings were avoided.
However, there are still several aspects that need to be improved. First, some text has small size, especially
those placed on the bottom of each page since people with weak eyesight may not notice them. Also the
content of page must be readable without style sheet and JavaScripts (W3C, 2013). Consequently, content
should be resized and the html file of website must be improved, making accessible without style sheets.
Navigation
Melagrana’s website uses hierarchical navigation style. According to Krug (2000), the navigation should be
located in the same place throughout the website. The users get confused if the navigation changes its place
and they do not want to search it every time, so they may switch to competitors website. Therefore, the
navigation of this website does not varies and keeps the same on each page.
Furthermore, the usability principles state that the page should display where the user is now, so that they
may not be confused and leave the website. Thus this website indicates where the user is located by
changing the color of the section where they are now.
Evaluation of Competitors Web Sites
Evaluation strategy
In order to analyze the strengths and weaknesses of competitors websites the usability checklist have been
used. This method of analysis was used due to is easiness and simplicity. Moreover, it covers most of the
features that the website should have. The analyzed by checking all aspects given in this checklist. At the
end the main indicators were separated from this list and given below.
5
Design Evaluation
First competitor is the website of basilica mediterranean restaurant. Overall website has clear layout, the
content is not overloaded and its easy to find out needed information from page. The major strength of this
website is that it has a low site-load time. Moreover, all images, vidios and other media files have alt tag,
but not all of them are appropriate. The alt tag not always shows the name of the media files, few of them
are meaningless. Moreover, the text-to-background contrast is appropriate and navigation is noticeable and
has short and concise labels. (User Effect, 2009)
However, this website does not provide sitemap. Since the sitemap provides the user with overview of the
website, it enables the users to find necessary information without searching it through the navigation.
Furthermore, the content has small font size, it causes to distracting people’s eye. Finally, the website does
not have site search. (User Effect, 2009)
Second opponent of Melagrana’s website in the internet is www.aristonpark.uz. This website has good
layout and the colors are appropriately chosen. The media files has alternative tags, but all of them are
completely identical. The headings and navigation labels are clear and descriptive, which eases the
understanding of the users. As Krug (2000) argues, web users do not want to think while surfing internet.
Therefore the headings should be clear and understandable.
Nevertheless, there are several weaknesses regarding the usability of the website. this website does not
have site search and the font size is very small. Moreover, the site-upload of this website is very low.
6
7
BIBLIOGRAPHY
Krug, S., (2000). Don’t make me think. USA: New Riders Publishing
Nielsen, J. and Tahir, M., (2002) Homepage usability. USA: New Riders Publiching
User Effect, (2009). 25‐point website usability checklist [online] Available from:
<http://www.usereffect.com/download/checklist.pdf> [Accessed 4 March 2013]
W3C, (2013). Web content accessibility guidelines (WCAG) 2.0 [online] Available from:
<http://www.w3.org/WAI/GL/WCAG20/#keyboard-operation> [Accessed 15 March 2013]
Huang, W., et al., (2006). Categorizing web features and functions to evaluate commercial web sites [online]
Available from:
<http://teaching.mdu.edu.tw/datacos/09610321022A/web%20function%20and%20asessment.pdf>
[Accessed 9 March 2013]
8