Usability Evaluation and Recommendations

Usability Evaluation and Recommendations For Sixties Press Poetry Magazine IT3210 Web Systems and Technologies John Winko genus Capella University Introduction This paper will propose a sack up aim redesign for Sixties Press Poetry Magazine located at http//www. sixtiespress. co. uk. The lay 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 1960s era theme. There does non 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 organise and lay proscribed4 Information c omputer 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 eyeballhade of e real page alone does non arrive at 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 60s themed poetry from computer menu items and the carcass limit on the main page. There is non a specific About Us page anywhere on the site and the only if contact information is in a small region on the bottom left portion of the homepage.The target audience is anyone pursuance poetry with a 60s theme and critical of poetry publishing processes in place in todays society. Additionally, there ar options for purchasing har d-print magazines chosen from a catalog. These facts ar not readily ascertained from the oerload of kernel found on the homepage. The site redesign will ar placidity a more concise description of the sites purpose on the homepage as well as a brief tagline. The tot of center on the homepage will be trimmed down so that the sites identity and purpose ar more readily app arnt.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 largeness 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 users b haggleser resolution and sizing. The body content is also left aligned so all extra whitespace is saluten 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 navigation menu.This is consider ed 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 dissolute 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 notwithstanding no form of clean navigation to identify a relevant section quickly aside from consolidated assumptioning for each section.Pages are laid out with tables using blank dissever tags to add space for formatting. This creates a very different viewing experience across different browsers as each strength 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 utilise. The site redesign will eliminate the table structure for l ayout and use floated elements (divisions) to accomplish a more legato layout. Column structure will follow designs set forth in Appendix 2.Information architecture and site navigation The entire site is broken into nigh 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 rolling wave becomes its minimize size at 19201080 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 unchanging pattern of be underlined and a pass off walk 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 organism 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 original menu and architecture for collective works by author. Use of visual elementsFor a website decided to poetry, the decisions for wring and contrast do not follow a typical 60s theme let alone theming for easier reading. Typically 60s 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 ergodic color with an XORd background while the menu has the same variation of hit-or-miss 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 scheme.The under-contrasted pages would make viewing the site very dif ficult for someone that is color blind The background wallpaper on each page has a baffling 60s 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 enter font such as Bellbottom optical maser (Lorvad, 1991) to be used for adding flare to title headings. Usability Rather than using the html pseudo element © the former made a picture of their copyright statement and it appears they expanded its size from the original distorting the two-baser quality. The site redesign will use text in place of images used to accomplish to the 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 unchanging 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 understanding the purpose of a homepage. Accessibility A W3C validation of the homepage discovered over 1 30 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 different pages since the formatting rules vary between browsers. The site redesign will eliminate the JavaScrip t 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 sites identity starting with revising the homepage and including an About Us page to further expand the sites 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//ww w. 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. shrewdness 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 from 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 plant content (b y author/by subject). 3.If a splash screen or navigation feature is provided in a Java/JavaScript/Flash format, is a text-based substitute 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 abandon 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. . sufficient 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 frequently 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 want 60s era poetry and those looking to purchase a copy of the print magazine. 4. Tagline makes caller-ups 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 a re 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 sites design aesthetically openhearted? No, the color scheme alone makes the site very unappealing. The 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. Ar e 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 lodge in 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 60s 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 readability 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 th at detracts from being succinct but the content only design can be considered informative. 2. Does the copywriting style suit the websites purpose and speak to its target audience?There is an attempt at using vibrant colors resembling 60s design but that attempt falls short of effectively speaking this to the audience. 3. Are bodies of text constrained to