CCSIF Website Content Analysis and Usability Evaluation

Transcription

1 Proximity Inc. Daniel Chen Proximity Inc. Phone Bloor Street West, 29th Floor, Toronto, ON M4W 3R6 CCSIF Website Content Analysis and Usability Evaluation By Daniel Chen

2 Section 1 Background The motivation and preparation leading to this report. Motivation The current Colorectal Cancer Screening Initiative Foundation has an important message to convey to its audience, yet it can only do so if the website is a success. By success we mean that the website is both engaging and easy to use, measurable by higher awareness and higher web traffic. How this report was prepared Personal Introduction to Information Architecture My current role at the interactive arm of BBDO (Proximity) is Information Architect. When I usually describe my job to someone, I take the analogy of an architect that works with buildings. If you were building a modest sized say, square foot, house, then perhaps it would suffice to lay out the floor plan together with the rest of the family at the kitchen table. However, if you were to scale the building up, on the order of square feet, then perhaps an architect could be very helpful in creating an optimal layout that met the needs of everyone in that building. Similarly, as an information architect I am concerned with the physical layout of website, how the information is arranged, labelled or categorized (information architecture), and how to make the website as easy to use as possible for its target users. Readings in Web Usability To perform the task of evaluating the CCSIF website, I relied upon a set of tools known as heuristics first popularized by web usability expert Jacob Nielsen. To put it simply, heuristics are guidelines or recommendations towards effective web design, and have often been established through experiments with users to improve usability. I have listed a set of recommended books that are excellent resources for web usability, and I have used as a source of heuristics to produce this report. Recommended books n n Krug, Steve. Don t Make Me Think: A Common Sense Approach to Web Usability. Nielsen, Jakob & Tahir, Marie. Homepage Usability: 50 Websites Decontsructed.

3 System Specifications Before we begin the report, I would like to note the system specifications that were used to evaluate the website. The website was tested in both Mozilla Firefox and Internet Explorer which covers approximately 90% of browser share. The webpage was also viewed at 1024x768 which is considered the most popular screen resolution. Table 1: Worldwide Browser Market Share (Source: IE7 IE6 IE5 Firefox Mozilla Safari Opera February 16.4% 39.8% 2.5% 31.2% 1.4% 1.7% 1.5% January 13.4% 42.3% 3.0% 31.0% 1.5% 1.7% 1.5% 2

4 Section 2 Overall Recommendations Analysis of the CCSIF website design, content and navigation Design The overall design of the CCSIF website was aesthetically minimalist with the use of orange, blue and white as the main color scheme. However, to make a true impact there may need to be some adjustments to the color such that there is bolder visual statement across the website. Often, white text on an orange or light blue background appeared faded out and difficult to read. To increase visual contrast between text and background, I would suggest increasing the saturation on the background color across the website. This is especially important on the site s banner Colorectal Cancer Screening Initiative Foundation that appears on every page, which establishes the site s identity and needs to visually grab users who just landed on the site. Content Content Writing The writing overall is grammatically sound with minimal jargon, however it needs to establish a style that matches the smart, cheeky, optimistic tone in the CCSIF ad campaigns. The current matter of fact style is very similar to previous campaigns and websites, so there is an opportunity here for CCSIF to provide unique content style that grabs the casual user browsing the site. The overall goal in creating compelling unique content is to express to users why they should stay at the CCSIF website over the many other colorectal sites out there. A good place to start, is establishing a terrific tagline for the website that establishes what the site is about, and hints at why it is unique. A tagline appears on the site banner, under the title of the website, and it is important because it appears across every page of the website. Users often land on a page without knowing what the website is about, the tagline appears immediately in an expected place (top-left), establishing the site s content. This is especially important for many users who do not land on the home page, but land n an interior page without any context of where they are in the site. Figure 1 Sample Tagline for CCSIF 3

5 Content Organization The way in which content is organized throughout the site, and the way in which is laid out on the page has a direct effect on how easy it is to digest. The overall goal of organizing content is to make it scanable so users can easily find the information they are looking for as well as avoid information they are not interested in. In organizing content, we must consider who is visiting the site and for what purpose. Site Architecture In terms of the site architecture, the following sections currently exist and appear in the global navigation: Home Screening Links Campaigns FAQs About CCSIF Donate! Contact us Figure: Sections listed in global navigation When examining the home and screening pages, it became apparent that there was much too much information incoherent on both pages. By incoherent I mean that the pieces of information were not related with one another, and did not fit inside each section. In particular I would say that there is a lot of information that should be removed from the Home and Screening section, and should fit under a separate section called What is Colorectal Cancer? instead. This section is very important for complete newbies to the CRC space, which is why it should definitely be clearly established on its own. The section links can remain, however calling a section links is like calling a chapter words in a book, it adds no value or meaning. A better title would be Resources. Campaigns could be jargon to the average user, and so that section might better be called Media. Also, Screening includes Prevention so mention the two, Screening & Prevention. FAQs remains fine, however if it could be classified into the other sections it could be more useful. 4

6 Content Layout About CCSIF is fine, however I would suggest absorbing the Contact Us section into this section. I would also suggest just using About Us as it is slightly more recognizable then CCSIF. What CCSIF is can be established in the content of the About Us section. As a note, the home section should not appear on the home page as it is redundant, it should only on pages other than home so that users can navigate home. The website needs to establish a consistent set of content lay out conventions that draw users into the content, and the user can use to browse and scan for information. As an example, consider the use of font size, font type, and bold type face, to distinguish section or subsection headings in this report. Also consider the rational use of space to break apart ideas into paragraphs, or group similar ideas together. The CCSIF site needs to have a consistent convention for laying out information, because it currently is found to be inconsistent in various parts which will be discussed in the next chapter. Navigation Global Navigation Breadcrumbs The global navigation, also known as the main navigation, can be found horizontally at the top of a website under the site banner or on some sites vertically oriented on the left. It is one of the more important site elements, since it is found on every page of the site and the user depends on it to navigate the site. Usually, the main sections of the site appear on the main navigation. As well, any high priority tasks may appear as well (although they may be visually distinguished from the other sections). In terms of the CCSIF site, this means that following the changes outlined above, there should be an additional What is CRC? section and the Contact us label should be deleted. The home button should not appear on the homepage, however it should appear elsewhere. Another navigational feature that can help users not get lost in the website is a breadcrumb so named after the Hansel and Gretel tale where a trail of breadcrumbs was left to find one way s back to the start. A breadcrumb is an excellent way finding tool and can be usually found at the top-left of the site. For example, if a user were in the How to Get Screened section of Screening then the breadcrumb would read as follows: Home > Screening > How to Get Screened The breadcrumb would be an excellent addition to the CCSIF site on every page, since there is currently no way for the user to know exactly where they are in the site relative to all the other information. 5

7 Alt or Title Tags To improve navigation of the site, consider the use of Alt or Title tags (found in the html). When used properly, these tags provide a little descriptive tool tip at the bottom right corner of the cursor whenever the user hovers over an image or link. This is valuable for users exploring the site, to see what s behind the door without having to click open the page. This rollover behavior would be useful throughout the site, however it would be especially useful to have alt tags at the very top for the global navigation so users can explore the sections without opening them. Currently, there is a tool tip, however it is obscure and not very helpful. Another benefit of the alt or title tag is that it can be read by machine readers making it accessible to the visually impaired. 6

8 Section 3 Homepage Recommendations Analysis of the CCSIF Homepage design, content and navigation Design Of all the web pages on a website, the homepage is probably the most important. It is through the homepage that users decide whether or not the rest of the website is worthy of being read. It is also the starting point which users often return to, when they are feeling lost in the site and want to begin navigating again. 1 To grab the attention of users, the homepage needs to have a dynamic visual impression. In an analogy to the magazine world, the homepage is like the cover and should let the user know what the content is about and entice the user to want to read more. The current website homepage does not accomplish this effectively, as it overwhelms the user with text and few graphics to draw them in. It would be wise to use a central graphic in the centre of the page to draw the user in and explain the site.. The image of the butt with an asterisk may be the best, which also ties in well with the ad campaign

9 The overall look of the homepage also needs to be distinctive from the rest of the pages in the site, so users know they are on the homepage and not lost in a sections. I would suggest in addition to a feature image, to have better graphics on the right hand side as well. Content Content Writing 1 There is too much content on this page, and so most users won t bother reading it at all. Just as a magazine cover does not cover it s front page with all the information in the site, the homepage needs to convey to the user to convey what the site is about and what benefits users can expect from browsing through the site without going into excessive details. Most of the writing in this section is overly long and redundant. Throughout the user is thinking, Get to the point. At the core of this page, there are just two sections which I think should be emphasized in the first paragraph as a Welcome blurb to the homepage. Colorectal Cancer (CRC) is the second most deadly form of cancer among men and women, second to lung cancer. But if detected early, it is highly treatable and need not become deadly. In the vast majority of cases it is preventable, not inevitable. Lost at the bottom of the page, this critical blurb about the website, which should move to the top: This website provides information and links to help you learn more about CRC and CRC screening. You can also learn about the Colorectal Cancer Screening Initiative Foundation (CCSIF) and our founder and guiding light, Mariellen Black. This summary allows the user to know immediately what site they are on at the beginning of the page. All the extra content that we just cut out, where should that go? We can find some more appropriate places to put them through a better content layout. Much of the blurbs about how embarrassing it is to have CRC and getting screened is not necessary for the home page, but it is good content that fits better into the sections (in screening for example). As a last note about writing style, it s not wise to use! marks in writing as it appears amateur and so users will not take this content seriously. Although it s ok to be cheeky, you still want to maintain professional credibility over such a serious subject as one s health. 8

10 Content Layout Following the welcome blurb, which would read something like this. Note, I underlined and bolded the first term to make it a link to the What is CRC? section: Colorectal Cancer (CRC) is the second most deadly form of cancer among men and women, second to lung cancer. But if detected early, it is highly treatable and need not become deadly. In the vast majority of cases it is preventable, not inevitable. This website provides information to help you learn more about CRC and CRC screening. You can also learn about the Colorectal Cancer Screening Initiative Foundation (CCSIF) and our founder and guiding light, Mariellen Black. Note, the sentence Colrectal Cancer (CRC) is the second could be moved into the What is CRC section to streamline the welcome blurb further. The next step is to take all that extra information on the page, much of which belongs in other sections and compress them into a few clear entry points into the website. Entry points here, are similar to the approach we often seen in tabloid magazines like People. A headline, small blurb, followed by: See page 29 for full story. The following is an example, however it s up to you how to implement it. What is CRC? What is Colorectal cancer and what are the common signs? [Learn More] How do I get Screened? How does screening work? Where can I get it done? [Learn More] How do I Prevent CRC? What is Colorectal cancer and what are the common signs? [Learn More] If you notice in my examples, I bold and underline links to internal pages of the site.the use of bolding on the current page however is confusing in terms of laying out the sections in the page. I would advise re-examining what visual hierarchy is being established here. Other than saying Don t die of embarrassment twice, it also doesn t make sense to bold the bottom statement as it is not an important heading or unique term or link. 9

11 Navigation The navigation could be more consistently enforced throughout the page, by making it clear through bold and underline that a given term is a link. Consistency of how navigation elements appear should be used throughout the page. Features or Self Promotions 2 3 On the right hand column of the page, is what is known as the Features or Self Promotions section where you can attract the user to specific things in the site you would like to prominently feature. One of the problems with this section is the inconsistent use of the blue bar, it appears in View Our Campaigns and the promotions below it, but it does not appear on the Bottoms Up Party. I would suggest formatting the Bottoms Up Party in the same way, and use View Our Events as the blue bar title. I would suggest using photo for the item Download our cheeky brochure (cover of the brochure perhaps, or a pdf symbols). I would suggest eliminating the CRC common signs as this is covered in the main section and redundant. Lastly, of all the self-promotions the Make a Donation badge should go at the very top of the right hand column. It is not just the most important promotion, but it also is a very important task that users are looking for. If someone is wanting to donate money to you, it should be as easy to find as possible. The bottom right is known to be one of the worst places on a page to highlight something. I would also suggest changing the color of Make a Donation to make it more visually distinctive. 10

12 Section 4 Screening Page Recommendations Analysis of the CCSIF Screening page design, content and navigation Design Color wise, this page illustrates how some change in the color could be higher contrast and improve the usability site. As it stands this page lacks any visual appeal, it is mainly just a long blurb of text. I would recommend using more images in this section

13 Content Content writing An important point I would make when one begins reading this page there is no sense that I m in the Screening section. The topic and word screening is hardly mentioned at all in this first page, which is very confusing for the screening landing page. The focus of content in this page should be about Screening and possibly prevention. Right now there s no clear focus, and much of the content that describes CRC should belong in its own section on what CRC is. Also, there needs to be less redundancy in the content of this page compared with the rest of the site. In the current site, the Screening section repeats information that is on the homepage. Aside from the redundancy, the content needs to also have a better flow from section to section in this site. It feels like things have been copied and pasted together, and it s unclear where the sections begin and end, and the use of bold type or heading font seems make things worse by not follow a clear convention. Rather than bolding important terms or links or headings, it seems that the writer is just bolding the first few words of every sentence, which is very confusing to read. 4 I would avoid bolding unless there s an explicit purpose. Also, to improve the content, I would try reading it out loud and seeing where it is possible to form links between paragraphs and create more of a flow. As it stands, the user is just jumping from one concept to another. Content Layout The most notable thing to improve the layout would be to re-write the content so that it is a more coherent body of writing, and eliminate redundancy and repetition within the page and compared to the site. After that is done, the formatting can be done so that the content is divided into clear sections and subsections. Navigation Secondary Navigation 5 The current site has secondary navigation that is placed in the right column. As a matter of convention, I think this is somewhat confusing since the secondary navigation is usually placed on the left side. By doing this, we separate the content into the more recognizable 3 column format, the first column for navigation, the second for content and the third for promotions. The next point about the navigation is that it does not look too much like a navigation at all, perhaps a label such as Screening above it would let people know it s associated with the screening section and not just link to somewhere else. Since there are no visual cues in the current site, users can easily get lost in understanding where those column links lead (Of course, the bread crumb mentioned earlier would help resolve this). Also to improve usability when using the secondary navigation, alt or title tags can be used to create tooltips which the user can use for more insight into the given links without having to click onto them. 12

14 Section 5 Resources ( Links ) Page Recommendations Analysis of the CCSIF Resources page design, content and navigation Design The design on this page is straightforward, there is no need for an especially artistic treatment of a functional page. The only suggestion is to use vivid pictures for each link instead of just text links to other resources to make it more scannable. Content Content writing This section should be renamed Resources. Links is obviously redundant, and unnecessary. Also by just listing a bunch of links there is no value added for the user of this website. The user does not need someone to give them a very long list of links. However, if someone helped to categorize these links into different categories then it would be very useful to the user. For example, some categories may be Canadian Resources, Governmental Information, Advocacy Groups etc. would help the user find what they are looking for. Another advantage of categorizing is that it reduces the length of necessary description text. Another question to ask in this page is, are all these links necessary? Perhaps a shorter, focused, more relevant list of links to the target would be useful. Navigation The navigation for this section would best be served by a system similar to the Campaigns section. All the category headings at the top which would link to the category section located later below in the page. 13

15 Section 6 Campaigns Page Recommendations Analysis of the CCSIF campaigns page design, content and navigation Design Of all the pages, the campaign page should be the one with the most images to click on. The visual design, with its text layout, however hides much of the excellent multimedia content that it has to offer. To improve this page I would suggest taking screen captures of any video, and screenshots of brochures to allow users a chance for a sneak peak the content. Content Content writing Some additional writing to describe the video would be helpful, but keeping it to a minimum is fine considering that the focus of the content is the videos themselves. 14