Usability Evaluation and Recommendations

Usability Evaluation and Recommendations For Sixties Press Poetry Magazine IT3210 – Web Systems and Technologies John Winko Capella University Introduction This paper will propose a website redesign for Sixties Press Poetry Magazine located at http://www. sixtiespress. co. uk. The site is owned by Thushari Williams according to Whois and the primary purpose of the site is curating/collecting/publishing various poets’ work that relates to a 1960’s era theme. There does not appear to be any corporate backing to the publication or syndication of any sort.After reading through the tirade of obfuscated source code, it is a safe assumption the site was initially done in an older version of Microsoft Word then saved as a webpage. Site improvements will be recommended based off of a blended heuristic matrix found in appendix 1 formed from Search Engine Journal and usereffect. com. Table of Contents Introduction2 Table of Contents3 Identity4 Structure and layout4 Informat ion architecture and site navigation5 Use of visual elements6 Usability7 Accessibility7 Conclusion8 References9 Appendix 1 – Heuristic Usability Questionnaire10Appendix 2 – Site Navigation and Use Case Scenario14 Identity The website http://www. sixtiespress. co. uk is for a magazine called â€Å"Sixties Press Poetry†. The site has a logo that is replicated at the top of every page but does not have a clear tag line to indicate the purpose of the site. A user has to glean the fact the site is a collaboration of different authors generating 60’s themed poetry from menu items and the body content on the main page. There is not a specific â€Å"About Us† page anywhere on the site and the only contact information is in a small section on the bottom left portion of the homepage.The target audience is anyone seeking poetry with a 60’s theme and critical of poetry publishing processes in place in today’s society. Additionally, there are opti ons for purchasing hard-print magazines chosen from a catalog. These facts are not readily ascertained from the overload of content found on the homepage. The site redesign will give a more concise description of the site’s purpose on the homepage as well as a brief tagline. The amount of content on the homepage will be trimmed down so that the site’s identity and purpose are more readily apparent.Structure and layout From a layout standpoint, the overall wrapping of the body of each page on the site changes with the homepage having a wrapped width of 836px while the poetry page has a fixed width of 989px. This inconsistency leads to extra whitespace for some pages while less or none for other pages based on the user’s browser resolution and size. The body content is also left aligned so all extra whitespace is shown on the right which detracts from easier focus on the central content of pages. All of the pages show the site logo at the top followed by a navigat ion menu.This is considered good design and will not be changed structurally for the site redesign. The homepage uses a 3 column layout while other pages vary from 1 to 3 columns for their layouts. Columns are not distinctive in their content and are structurally disruptive giving the appearance of â€Å"cramming† information into a tighter space. There are apparent sections within the homepage body to delineate different parts of the site but no form of clean navigation to identify a relevant section quickly aside from consolidated coloring for each section.Pages are laid out with tables using blank paragraph tags to add space for formatting. This creates a very different viewing experience across different browsers as each medium has a different set of default values for spacing padding etc. The table widths also vary from page to page and section to section creating different alignments from the fixed position formatting used. The site redesign will eliminate the table str ucture for layout and use floated elements (divisions) to accomplish a more fluid layout. Column structure will follow designs set forth in Appendix 2.Information architecture and site navigation The entire site is broken into about 8 pages branching from the homepage with numerous anchor links used to navigate long pages of poetry. The actual content pages are extremely long, to the point the thumb scroll becomes it’s minimize size at 1920Ãâ€"1080 screen resolution. Given the breadth of information on pages such as â€Å"Poetry. hml†, the architecture could be improved by breaking out pages by author and/or subject. Individual hyperlinks do follow a consistent pattern of being underlined and a hand mouse pointer to indicate that clicking the link is actionable.The actual ordering information for hard print magazines is hidden in a catalog link not listed on the main navigation bar. There are also pages for internal authors that are only accessible from the main page and are not descriptive to being a collection of a specific the respective authors work. The site redesign will encompass using a more description navigation menu to better direct the user if they wish to purchase anything the site has to offer as well as a more intuitive menu and architecture for collective works by author. Use of visual elementsFor a website decided to poetry, the decisions for color and contrast do not follow a typical 60’s theme let alone theming for easier reading. Typically 60’s themed colors include Turquoise, Jade, and Mint Green amongst others (McEvoy, n. d. ), starkly contrasted to the dark red on black shown on the homepage. The â€Å"important† headings all have a random color with an â€Å"XOR’d† background while the menu has the same variation of random colors with a pitch black background. Each subsection of content within the body of the homepage is a different color with additional areas having an offset color sche me.The under-contrasted pages would make viewing the site very difficult for someone that is color blind The background wallpaper on each page has a subtle 60’s them but does not contrast well with the multi-color text of poetry passages or content in general. The font size and space are adequate but the font face itself detracts from the aesthetics of the pages’ content. The majority of the block text uses a â€Å"Black Chancery† font face which is not considered web safe and the site would be better suited to use a standard serif font.An exception can be made to allow for an embedded font such as Bellbottom Laser (Lorvad, 1991) to be used for adding flare to title headings. Usability Rather than using the html pseudo element â€Å"©Ã¢â‚¬  the designer made a picture of their copyright statement and it appears they expanded its size from the original distorting the image quality. The site redesign will use text in place of images used to accomplish to th e same task. The picture of Barry Tebb, one of the authors, requires a java applet to run only to have a non-value added effect of water droplets on a grainy photo.The site redesign will remove the unnecessary applet and use a static image instead. Additionally, the site logo will be linked directly to the homepage making navigation easier. There is a text area on the homepage that contains about 5 paragraphs of text and requires scrolling in a very narrow window. This will be revised into a more useable text block following the same design pattern as the rest of the site. With the exception of archives page, text blocks are limited to less than 80 characters per line making reading easier.Although links are properly anchored and are consistent with being underlined, the redesign will consolidate link colors to preserve thematic relevance. The actual number of links on the homepage will be reduced as its current form has more links than descriptive content detracting from understand ing the purpose of a homepage. Accessibility A W3C validation of the homepage discovered over 130 HTML coding errors and all of the styles were made inline without any use of external CSS. (W3C, 2012) None of the images on the site have alt text to failover if the image failed to load.There is not a concise separation between navigation and content within the code as the home used a table row and other pages used paragraphs as the separating entities. By eliminating the table structure of pages, the site redesign will properly code in HTML5/CSS3 ensuring the viewing experience is consistent across the majority of browsers. The site uses a JavaScript based pop-out menu to assist navigating large pages of poetry but there are numerous compatibility issues that occur. The pop-out menu rests about halfway down the screen and overlaps the body content both when expanded and collapsed.The menu bar beneath the logo is in an intuitive place but â€Å"jumps around† when navigating dif ferent pages since the formatting rules vary between browsers. The site redesign will eliminate the JavaScript based pop-out menu and will instead use a floating sub-menu for individual sections. Conclusion The majority of changes to the site will be thematic in nature, updating the color scheme and positioning. Additional changes will be made to improve the site’s identity starting with revising the homepage and including an â€Å"About Us† page to further expand the site’s purpose.HTML and CSS coding standards and practices will be strictly adhered to ensuring compatibility and proper viewing experience across major browsers. References Cumbrowski, C. (2008, Feb 20). 50 Questions to Evaluate the Quality of Your Website. Retrieved Nov 25, 2012, from Search Engine Journal: http://www. searchenginejournal. com/50-questions-to-evaluate-the-quality-of-your-website/6400/ Lorvad. (1991). BellBottom Laser font. Retrieved Nov 25, 2012, from Fontspace. com: http://www. fontspace. com/lorvad/bellbottom-laser McEvoy, D. (n. d. ). Interior Design Retro Style.Retrieved Nov 25, 2012, from All Things Frugal: http://www. allthingsfrugal. com/retro_interior_design. htm Meyers, D. P. (2012, Feb 10). 25-point Website Usability Checklist. Retrieved Nov 25, 2012, from User Effect: http://www. usereffect. com/topic/25-point-website-usability-checklist W3C. (2012, Nov 25). W3C Markup Validation Service. Retrieved Nov 25, 2012, from World Wide Web Consortium (W3C): http://validator. w3. org/check? uri=http%3A%2F%2Fwww. sixtiespress. co. uk%2Findex. htm&charset=%28detect+automatically%29&doctype=Inline&group=0Appendix 1 – Heuristic Usability Questionnaire Navigation 1. Are links labeled with anchor text that provides a clear indication of where they lead? Yes. 2. Depth – what is the maximum number of clicks it takes to reach a page within the depths of the site? All pages are a single click away from the homepage (2 clicks if including anchoring fro m the menu). Given the amount of content on the site it would be more manageable to have a 3 click architecture to more concisely filter and arrange content (by author/by subject). 3.If a splash screen or navigation feature is provided in a Java/JavaScript/Flash format, is a text-based alternative also available? Yes, a JavaScript pop out menu is feature on long pages of poetry and a text version is available at the top of the page. 4. Do clickable items stylistically indicate that they are clickable? Yes, all items that are underlined are linked to some content and the mouse pointer changes to a hand to indicate that the click will be actionable. 5. How intuitive is it to navigate? Are signs obvious or obscured?In a general sense the navigation is intuitive but far from consistent with the layout changes between different pages. The pop-out menu is intuitive in IE but not in other browsers (actual clickable area is not visible). 6. Main navigation is easily identifiable. Mostly yes , however there is a page that contains revenue generation from ordering magazine that is not shown in the navigation bar or easily identifiable. Additionally there are pages that are specific to internal authors that are only accessible from the main page. 7. Navigation labels are clear & concise.Textually relevant yes but thematically difficult to read. 8. Number of buttons/links is reasonable. No, there are links to too many different areas on the homepage detracting from being concise. The homepage itself has more link than actual content. 9. Company logo is linked to home? page. No. 10. Links are consistent & easy to identify. All links are underlined but thematically change very regularly from size and color. An exception exists for the clickable area for each of the links, clicking to high on the text has no effect. Accessibility 1.Is content structurally separate from navigational elements? The navigation menu on the home page is separated from other content by a tag but on subsequent pages is contained in a tag. There is not a concise separation between navigation and content. 2. Is the website cross-browser compatible? No. The layout is achieved using tables and paragraph blanks and the viewing experience was different between Firefox, Chrome and IE. 3. How compliant is the website with W3C coding standards? Valid HTML/CSS? No, a W3C validation resulted in over 130 errors.The pages only contain inline styles with no external or embedded CSS. 4. Are ‘alt’ tags in place on all significant images? No, there are not alt tags used for any images. 5. Are text-based alternatives in place to convey essential information if this is featured within images or multimedia files? No, on top of alt text being absent, the java applet containing a photo on the main page does not fail safely and left as an empty area. 6. Site load? time is reasonable? Yes, there are very few pictures and most pages consist primarily of text in the form of poems/poetry. . Adequate text? to? background contrast? No. The featured articles page has text color very close to the background color while the navigation items are too contrasted in difference. 8. Flash & add? ons are used sparingly. Yes, but the sole java applet add-on used has no specific utility or purpose. The JavaScript pop-out menu does not load correctly across all browsers and is completely cut off from use in Chrome and Firefox. 9. Site has custom not? found/404 page. No. (Requires a server side change so not applicable) Identity 1.Company logo is prominently placed. Yes 2. Clear statement of PURPOSE of the site? Purpose does not become clear within a few seconds without reading much or no text copy at all. Assumptions have to be made from the text in the logo and menu to find out it is a magazine about poetry. 3. Who is the target audience? The site is meant for anyone seeking 60’s era poetry and those looking to purchase a copy of the print magazine. 4. Tagline makes company ’s purpose clear. No tagline present. It is assumed the site is about poetry after reading through the body content. . Home? page is digestible in 5 seconds. No, there are multiple vectors the eyes are drawn to which makes getting an overall view more difficult. There are laundry lists of authors, selected readings and selected sections for each subpage of the site on the homepage. 6. Clear path to company information. No specific â€Å"About Us† page listed and had to specifically perform a WHOIS search to determine true site ownership. The homepage does contain a clause that specifies original copyright remains with respective authors and images were courtesy of Leeds Library. . Clear path to contact information? Not really, there are contact details on the bottom left corner of the homepage but not specifically listed as official site contact. Design 1. Is the site’s design aesthetically appealing? No, the color scheme alone makes the site very unappealing. T he stark contrasts set against the â€Å"swirling† background makes focusing difficult and the left aligned nature draws too much attention to the whitespace left on the right side of the screen. 2. Are the colors used harmonious and logically related?No, colors seem extremely random in nature although they are logically related to sections (one color for each section). 3. Are the color choices visually accessible? No, some parts have color themes that are too starkly contrasted while others are not contrasted enough to allow easier reading. It would be very difficult for someone color blind to absorb a lot of the content. 4. Is the design audience appropriate? Yes, the font size is appropriate for older audiences and those wishing to â€Å"retro† to 60’s content. 5. Font size/spacing is easy to read?Font size and spacing is adequate. 6. Readability and appropriate type face? No, there are multiple different fonts used and the specific fonts do not add to the re adability or theme of the website. The â€Å"Black Chancery† font use predominately for block text is not considering a web safe font. Content 1. Is the website copy succinct but informative? There are continuous sections of poetry that detracts from being â€Å"succinct† but the content only design can be considered informative. 2. Does the copywriting style suit the website’s purpose and ‘speak’ to its target audience?There is an attempt at using vibrant colors resembling 60’s design but that attempt falls short of effectively speaking this to the audience. 3. Are bodies of text constrained to