The Important Characteristics to Make a Good Website (Graduate Research Paper and Evaluation of Three Good Websites and Three Bad website)

Transcription

1 The Important Characteristics to Make a Good Website (Graduate Research Paper and Evaluation of Three Good Websites and Three Bad website) Faisal Ahmed Al-Salebi Course: Web Design and Development ( ) Professor: Mark Reynolds Department of Information Science and Technology Rochester Institute of Technology February, 08,

2 Abstract: The competitiveness between websites makes the designers and websites owners look for the important characteristics that make good websites. As result, if the website had implemented these characteristics well, the website would have had traits. In this research paper, I will discuss the important characteristics to make a good website and the benefit, which will return back as traits in the website from using each characteristic. Key words: The important characteristics to make a good website, characteristics aspects, and website s traits. Introduction: Recently, people have been oriented to use websites for their searching, purchasing or other services that are offered to them. As a result, there are thousands of websites under any one topic. Some of them are very active and have thousands of visitors everyday. Others might have tens or hundreds of visitors per day. The question here is why? We might find when we visit a site for first time, that we stay awhile looking at the site and reading or maybe browsing on the site, so what makes us stay? The great design and page layout, sense of humour such as flash characters, ease to use and understanding are what make us stay. The competitiveness between websites pushes the designer to look for the essential traits to make a great web site. This research paper will break down the most important characteristics to make an attractive website. visual design The fist important characteristic to make a great website is visual design. It should be well designed to get the audience s attention. Visual design characteristics include five aspects which contribute to the enhancement of the websites appearance. These aspects are: page layout, navigation, consistency, embedding pictures or flashes, and using appropriate colors. The first aspect is page layout; the web page should be divided into as many sections as the designer s needs; for example, a good web page has four sections as a minimum. Each section includes specific information such as the header (topic), navigation, text or footer. Also, using the same layout for other pages in the website 2

3 will activate consistency which will be discussed in this research paper. The designer should care about the size of pages (a typical user s screen is 465 pixels wide and 340 pixels high for a 15 monitor) to avoid scrolling in the page because the user wants to see all the information in front of him. It also saves time for the user. A good layout decreases white spaces and allows readers to scan the web page like a map and know intuitively where to go. Daren Jephcote (2009) defines clean and definable layout as the first important considerations in his list. Also, this aspect activates an interactive trait, so a web site with a clean layout attracts visitors or users to stay and browse through the web pages; then, they may put it in their favorites. The second aspect is navigation; web pages should have navigation to move from one page to another in the site, it is like a guide line to the website. It should be easy and understandable for the user. Putting navigation in the same place with every page makes moving very easy. According to David Halim (2009), An easy navigation system gives comfort and convenience to the users to scan all the information. It is one of the ways to communicate with users, so this aspect supports the interactive trait. Also, it should be clear to the user and easy to reach; that supports the responsive trait. In addition, the navigation buttons should have meaning to the user, such as introduction and references, not like page1, page2. The third aspect is consistency; web pages should maintain consistency with all website pages in layout, navigation and content. This goes with common sense and the website will be more useful to users. As Halim, D (2009) says A consistent look and feel throughout the site will give a bolder and stronger impression to the users. Consequently, maintaining consistency is a key as the user browses the website and discovers it. We should remember that a website that changes its navigation methods discourages the users to complete browsing because the website becomes disconcerting to them and causes them to leave the website half way through browsing. As result, the website will lose the interactive trait. Maintaining consistency is very important in the design of the website. The fourth aspect is embedding pictures or flashes. Websites should have some pictures or flashes. This goes with common sense to the user because existing pictures gives the user a big image about what the website has or relates to. From here, the designer should put pictures that are appropriate or have a relation with the website. For example, on car websites, we might see pictures of a car as a logo for the website; from here we know that this website is for cars. Another example is 3

4 companies websites; we see the company logo in the top of page, such as IBM or Bank of America. As a result, the user might stay looking at the website because the existing picture makes the user feel this is the website that he wants, and that supports interactive trait. As embedding has advantages, also, it has disadvantages and we should avoid them to support responsive trait in the website. For example, one of the disadvantages is time of loading pictures or having too many pictures in the site. Always, we should remember that the user doesn t like waiting and he always hurries to move to see other websites. Halim, D. (2009) advises optimizing all images for website display because you don t want to make your customers wait too long, then they get bored. Consequently, pictures should have a small size to download them very quickly. Also, we should avoid putting too many pictures in the website if it doesn t need them or it would be a silly website. The fifth aspect is using appropriate colors. The website should use nice colors to design the backgrounds of the website that are appropriate for its audience. This aspect supports the personalized trait in the website. According to Dianne Cyr, Milena Head, Hector Larios (2010) says that color has the possibility to extract users emotions and behaviours, and how color affects trust or satisfaction of the viewer. For example, some websites have masculine colors because their audience is men, and others may have feminine colors because their audience is women. For that, the designer focuses to choose colors is like a message to determine the website s audience. Also, it supports the contrast trait through matching dark colors with light colors. In addition, it helps to design attractive websites to its users and that supports the interactive trait. To sum up, visual design is the first important characteristic to make a good website. It includes five aspects to help to build the website. These aspects are page layout, navigation, consistency, embedding pictures or flashes, and using appropriate colors. From these aspects, a well designed website shows responsive, personalized, and contrast traits to its audience. Readability The second important character to make a great website is readability. The designer should make the website readable for users. Readable websites give a quick impact to make the user decide to stay or leave. Readability characteristics depend on three aspects which contribute to make the website more readable and understandable. 4

5 The first aspect is font size. Using appropriate font size for contents or topics is very essential to communicate with users or visitors. When the designer uses different font sizes to make topics very clear to the user, it is like talking to the user or giving the important information in the website to a user. As a result, font size activates interactive trait in the website, so font size is one of the important method to make the website readable. The second aspect is font family. There are many kinds of fonts; but some of them are not good to use because they do not implement clearly when they are used on web pages, and the designer should be aware of that. James Alina (2009) advises choosing simple fonts that can be easily read by users. Using the appropriate font family makes the text easy to read. It is a great way to communicate with users. In addition, using the appropriate font family might be a way to emphasize the information; that helps visitor to scan the website quickly and find the important information the website has, so the font family activates the interactive trait in the website too. The third aspect is font color. The designer should choose an appropriate color with a background color. For example, black text on a white background is the easiest to read. When the designer uses multiple colors, it is usually to divide the information to the user, or highlight important information to the visitor. It is a great way to communicate with visitors and make websites readable. As a result, font color activates the interactive trait and contrast trait in the website, too. To sum up, readability is the second important characteristic to make a good website. It includes three aspects that contribute to building a great website. These aspects are font size, font family and font color. From these aspects, readability activates interactive trait. Content The third important characteristic to make a great website is content. The website should have content, and that is the aim of building it. Also, the content should make sense to users, so the content should have related to purpose of creating website. Conny L. young (2009) says You should make the information related to what you sell on your website, he explains how the important content drives the marketing of the product. The more valuable content a website has makes the website more essential and attractive to users. Content characteristics depend on six aspects. 5

6 The first aspect is original content. The website should be rich in contents and texts; it should not be just links to other sites. However, Google and Yahoo work well because they are searching websites. Also, the designer should remember that the visitor or user always wants to find all the information in one place; this supports responsive trait in a website. Don t make the visitor jump from one website to another, or he will leave the site from the first click on the link. Then, the website will lose its interactive trait. In addition, content determines its audience and that supports the personalized trait. The second aspect is credible content. The user is paying attention to the quality of information that website has, especially, if the website has timely information such as news websites or education websites. Young, C. L. (2009) says Sites that offer new information that is accurate and useful are more credible, so when users read articles from websites, they expect to find information about the writer and published date. This aspect supports the responsive trait and the personalized trait in the web site, so the website should have credible information on the writer and time or refer to the original resource. The third aspect is the grammar and structure of a websites text. The website should have a great structure to show its information via it. Also, texts should be written well. These are very important for users because they expect to read grammatically correct information. This aspect activates the interactive trait if written content satisfies the user s desire of reading. In addition, the responsive trait might be shown through strong vocabulary that the website contains. The fourth aspect is breaking the text content into paragraphs. Users always get bored and leave the website when they see a huge chunk of information. The website should break its writing content into paragraphs to give the user a chance to scan all the information in a short time. Then, the user will return to read more details about a certain subject. If the website is able to catch the user s attention from the first look, the interactive trait is activated in the website. The fifth aspect is clean content. This means the content should not have alien symbols between letters such as (&, ^,?!,, #, ~). If the website has some of these symbols, the first impact that comes to a user is that this is not a professional website or is a weak website, and then he will decide to leave. As a result, that affects the responsive and interactive traits in the website. 6

7 The sixth aspect is the search engine. The website should have its own search engine. In other words, the search engine is able to find specific information in the same page or in the website itself, not look on other websites. It helps users to find what they are looking for, and that supports interactive traits. Also, it saves users time, and that supports the responsive trait. To sum up, content is the third important characteristic to make a good website. It includes six aspects that contribute to build a great website. These aspects, which the website should have, are original content, credible content, grammar and structure of content, breaking the text content into paragraphs, clean content and search engine. From these aspects, content activates personalized, responsive and interactive trait in the website. These three characteristics with their aspects contribute to make a good website. Also, they give the website traits for catching users attention. These traits are: personalize, responsive, interactive, and contrast. Personalization The first trait is personalization. Creating personalization to the website will create and grow its audience. The website should be specific in talking to its audience, such as men, women, designers, students. Also, it should give them a personal service. For example, tourist websites always create and give offers to their users. The characteristics that contribute to activate this trait are to design the website via page layout and background colors, and content via credible content. Responsiveness The second trait is responsiveness. The website should be responsive about its information. People get scared easily online, so existing responsive trait earns users trust. Then, the users feel comfortable in dealing with the website and they will use it again and again, for example, buying tickets from a certain flight website, even though the sale price might be higher because they have earned the users trust. The characteristics that contribute to activate this trait are design website and content. Interactivity The third trait is interactivity. According to Halim, D (2009), a good interaction invites the visitor or users to return to the site. The question, what makes the users come back to a website? Generally, they will come back for a few reasons; teach them, make them laugh, show them something new, and they will come back more. The website must be interactive with its audience or it would be ignored from 7

8 the users. The characteristics that contribute to activate this trait are readability and content. Contrast The fourth trait is contrast. The website should have a great contrast for background color against text color. Sometimes, contrast is out of balance, so contrast between pictures and text is a balance between pictures and text in layout. The characteristics that contribute to activate this trait are design website via appropriate color and readability. To sum up, there are fourth traits which are personalizing, responsive, interactive, and contrast. Each trait is supported or activated by some good website characters via their aspects. Then, the website has these traits as a result to implement these characters. To conclude, there are three important characteristics to make a good website. These characteristics activate four traits on the website which are personalization, responsiveness, interactivity, and contrast. The first characteristic is visual design. This characteristic depends on five aspects, which are page layout, navigation, consistency, embedding pictures or flashes, and using appropriate colors. From these aspects, visual design activates responsive, personalized, and contrast traits. The second characteristic is readability. This characteristic depends on three aspects, which are font size, font family and font color. From these aspects, readability activates interactive trait. The third characteristic is content. This characteristic depends on six aspects, which are original content, credible content, grammar and structure of content, breaking the text content into paragraphs, clean content and search engine. From these aspects, content activates the personalize, responsive, and interactive traits in the website. To further clarify, let us put these characteristics in a schedule, and declare how they would support or activate these traits (see table1). Then, this schedule will be rubric evaluation to evaluate websites. Let explore this rubric using six websites. Experiment Procedure: As we know, each website should have all of these aspects or should be implemented by them. The rubric explains that each aspect has affects on some traits. 8

9 To evaluate each aspect, we should ask questions. The first question is does the aspect exist? If the answer is no, the evaluation will be Zero (0). If the answer is yes, there is another question. Does the aspect support the website strongly? If the answer yes, not sure (normal), or no, the evaluation will be (2), (1), or (0) respectively. According to this rubric, this paper will evaluate six websites: three are good websites and three bad websites. Result Good Websites: Goldenappleten website ( The Goldenappleten s evaluation score is 93.7 % (see Table 2). The website has a good visual design. It has a good layout, and that supports interactive trait. Users are able to move from page to page easily because it has a good navigation, and that supports responsive and interactive trait. Downloading pictures does not take time during browsing. The background color, welcoming message, and picture give an impact to the user that the website has a relationship with education, specifically, the teaching excellence network. Also, there is consistency between pages in navigation and colors, and that is what users like. About readability characteristics, the website uses appropriate font size, font family, and font color. As a result, the website has interactive and contrast traits. About content characteristics, the website has a mix between texts and links, but there are a lot of links and that might take away some points in the evaluation because users do not like to jump from page to page a lot. The information is credible by date, and that supports responsive trait. Also, users are able to contact with website. Furthermore, the website has a search engine, the content is very clean, and the website distributes its information into paragraphs. Overall, Goldenappleten website meets the important characteristics aspects. Practical Family Living website ( The Practical Family Living s evaluation score is 91.6 % (see Table 3). The website has a good visual design. It has a good layout, and that supports interactive trait. Users are able to move from page to page easily through a good navigation, and that supports responsive and interactive traits. Even though, the downloading of pages takes time during browsing, there is consistency between pages in navigation and colors, and that is what makes users complete browsing. The background color and pictures give the impact to the user that the website has a relationship about family s relationship. About readability characteristics, the website uses appropriate font size, font family, and font color. As a 9

10 result, the website has interactive and contrast traits. About content characteristics, the website has a mix between texts and links. In addition, there is a page that explains the website s purpose and the users can find it easily in navigation. The information about contact us supports credible aspects. Overall, Practical Family Living website meets the important characteristics aspects. Commongoodradio website ( The Commongoodradio s evaluation score is 87.5 % (see Table 4). The website has a good visual design. It has a good layout, and that supports its interactive trait. Users are able to move from page to page easily because it has a good navigation, and that supports its responsive and interactive traits. There is consistency between pages in navigation and colors, and that is what users like. Even though, the picture takes a few minutes more to be downloaded, the background color and pictures give the impact to the user that the website has a relationship with kids. About readability characteristics, the website uses appropriate font size, font family, and font color. As a result, the website has interactive and contrast traits. About content characteristics, the website has original content to explain the website s purpose. The information is credible because you find references, such as names and addresses. Also, users are able to contact with website. Even though, the website misses search engine, the content is very clean, and the website distributes its information into paragraphs. Overall, commongoodradio website meets the important characters aspects. Bad website: Dokimos website ( The dokimos evaluation score is 18.7% (see Table 5). Using the rubric, the website ignored most of the characteristics aspects. It puts all the content in the centre, so there is no page layout. The navigation is not clear and unreadable because of the colors that are used. Furthermore, there is no consistency in the website; if a user goes to another page, he will be surprised at the other background colors and he has to look for the navigation. About embedded pictures, there are some pictures, but they do not imply to the website s purpose. The pictures are a white bird and black cat, the website s purpose is religion, so there is no relationship. For these reasons, the website does not have a good visual design. Readability characteristics, the website uses many different font sizes and font family, but no appropriate font colors are used with backgrounds. As result, it is missing readability characteristics and that causes loosing contrast trait in the website. About content, the website has content to explain the purpose of the 10

11 website, but it is not credible by time, dates or author. The information is clean from the writing side; however, they are not in clean paragraphs to allow user to scan the information easily. Also, there is no search engine to help the user to search within the website. As result, the website misses content s aspects, and that causes losing support responsive and interactive traits in the website. Videosoniclab website ( The Videosoniclab s evaluation score is 27 % (see Table 6). From the rubric, the website has a nice layout on the website. It has a nice navigation, but the online store buttons opens a new browser with no deference of navigation, and this not a good way to implement a good navigation. Because of the deference `of navigation, the website misses the consistency on the website. About embedded pictures, the pictures are very heavy to load and that causes missing responsive and interactive traits in the website. The colors are acceptable, and they are fair to support the personalize, interactive and contrast trait. About readability, the website uses different font sizes, but it is not enough to improve readability characteristics in some pages, such as Services page. Font family is fogy or dizzy in home page; and that doesn t improve readability and causes losing interactive and contrast traits in the website. About content characteristics, the website does not have original text content; there are just links and pictures, so the user will not get the purpose of the existing website. Also, because the website does not have original text content, it is not able to activate credible grammar into paragraphs aspects. As a result, the website does not support the essential traits which are the personalize, responsive and interactive traits. Havenworks website ( The havenworks evaluation score is 33.3% (see table 7). From the rubric, the website ignores content s aspects, and that takes the score down. The website does not have original content or real texts. Also, there are a lot of links through its content. As result, the user gets lost when visiting this web site. As the website does not have original content; it causes a loss of the credible aspect and grammar and structure aspect. Furthermore, the aspects of visual design are ignored, too. However, the website has page layout, but the navigation was uneasy to reach or understand. There are a lot of navigations, and that causes loosing the users because there is no consistency. About embedding pictures, it does not score any number, because the enormous amount of pictures takes time to be downloaded. The aspects of readability work good. Users are able to see the font, but the crowding in the website prevents the user from reading well. 11

12 To conclude, the rubrics evaluation exported six websites. The results defined three good websites and three bad website. The three good websites, which were Goldenappleten, Practical Family Living, and Commongoodradio, have implemented the important characteristics and their aspects successfully. As result, they were evaluated as good websites. Also, these websites have traits which are the personalize, responsive, interactive and contrast traits. In contrast, the other three websites, which were Dokimos, Videosoniclab, and Havenworks, have not implemented the important aspects of characteristics. As a result, they were evaluated as bad websites. From this experiment, the designer becomes aware about the important characteristics and their aspects to make a good web site, and the benefits that can come from a website when using these traits. 12

13 References ( APA Style Citation): Jephcote, D. (2009, July 22). What Makes a Good Website. Retrieved January 31, 2010, from Halim, D. (2009, October 28). What Makes a Great Website. Retrieved January 31, 2010, from Website&id= Cyr, D., Head, M., & Larios, H. (2010, January). Colour appeal in website design within and across cultures: A multi-method evaluation. Duluth, MN: Academic Press, Inc. Alina, J. (2009, October 5). How to Design an Attractive Website Layout. Retrieved February 6, 2010, from Attractive-Website-Layout&id= Young, C. L. (2009, January 13). Eight Benefits of Content Driven Marketing. Retrieved February 6, 2010, from 13

14 TABLES: Table1: Rubric s evaluation Character Aspect Score Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout Navigation Consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 2/2 14/14 26/26 4/4 48/48 = 100 % Good websites: Table2: Goldenappleten s evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout navigation consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 3/4 13/14 25/26 4/4 45/48 = 93.7 % 14

15 Table3: Practical Family Living s evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout navigation consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 4/4 12/14 23/26 4/4 44/48 = 91.6 % Table4: Commongoodradio s evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout navigation consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 4/4 11/14 23/26 4/4 42/48 = 87.5 % 15

16 Bad websites: Table5: Dokimos evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout navigation consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 1/4 3/14 5/26 0/4 9/48 = 18.7 % Table6: Videosoniclab s evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout navigation consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 2/4 2/14 7/26 2/4 13/48 = 27 % 16

17 Table7: Havenworks evaluation ( Score Character Aspect Bad - Normal-Good Personalize responsive interactive contrast (0) (1) (2) Visual Design page layout Navigation Consistency Embed pic/flsh appropriate colors Readability font size font family font color Content original content credible content grammar and structure into paragraphs clean content search engine TOTAL 2/4 1/14 9/26 4/4 16/48 = 33.3 % 17

18 Print screen of websites: Good Websites: 1-Goldenappleten s pictures: ( 2- Practical Family Living s pictures: ( 3- Commongoodradio s pictures: ( 18

19 Bad websites: 4- Dokimos pictures: ( 5- Videosoniclab s pictures: ( 6- Havenworks pictures: ( 19