Usability Evaluation and Recommendations

Usability Evaluation and Recommendations For Sixties Press Poetry pickup IT3210 Web Systems and Technologies John Winko Capella University Introduction This paper ordain designate a weather vaneweb locate redesign for Sixties Press Poetry Magazine regain at http//www. sixtiespress. co. uk. The turn up is owned by Thushari Williams according to Whois and the primary persona of the turn up is curating/collecting/ create various poets work that relates to a 1960s while theme. thither does non appear to be any incarnate backing to the publication or syndication of any sort.After reading through the flyer of obfuscated source code, it is a safe assumption the berth was initi anyy do in an older version of Microsoft Word then saved as a web foliate. Site improvements impart be recommended based off of a blended heuristic matrix found in appendix 1 formed from Search Engine Journal and usereffect. com. tabularise of Contents Introduction2 Table of Contents3 Identity4 Stru cture and layout4 Information computer architecture and key navigation5 Use of visual brokers6 Usability7 Accessibility7 Conclusion8 References9 vermiform appendix 1 Heuristic Usability Questionnaire10 extension 2 Site Navigation and Use topic Scenario14 Identity The web point http//www. sixtiespress. co. uk is for a magazine called Sixties Press Poetry. The position has a logo that is replicated at the top of e precise page except does not convey a clear tag line to indicate the purpose of the situation. A user has to glean the fact the send is a collaboration of assorted authors generating 60s themed song from visiting card items and the embody content on the of import page. There is not a special(prenominal) About Us page anywhere on the site and the yet shock information is in a small section on the bottom left over(p) portion of the homepage.The quarry audience is anyone seeking song with a 60s theme and critical of poesy publishing processes in place in todays society. Additionally, there argon options for purchasing hard-print magazines chosen from a catalog. These facts be not readily observed from the overload of content found on the homepage. The site redesign get out give a more succinct description of the sites purpose on the homepage as well as a drawing tagline. The amount of content on the homepage leave behind be trimmed conquer so that the sites identity and purpose atomic number 18 more readily appargonnt.Structure and layout From a layout standpoint, the overall wrapping of the body of apiece page on the site transmits with the homepage having a wrapped width of 836px while the verse page has a dogged width of 989px. This in compriseency leads to extra whitespace for slightly pages while less or none for other pages based on the users browser resolution and surface. The body content is in any case left aligned so all extra whitespace is shown on the overcompensate which detracts from easier focus on t he central content of pages. All of the pages show the site logo at the top followed by a navigation menu.This is considered wide-cut design and will not be castrated structurally for the site redesign. The homepage uses a 3 column layout while other pages vary from 1 to 3 columns for their layouts. editorials be not distinctive in their content and atomic number 18 structurally disruptive giving the appearance of cramming information into a tighter space. There ar apparent sections within the homepage body to delineate different parts of the site simply no form of clean navigation to identify a relevant section quickly aside from consolidated distorting for each section.Pages are laid out with turn offs using blank separate tags to add together space for formatting. This creates a very different viewing experience crosswise different browsers as each medium has a different delimit of default values for space padding etc. The table widths in like manner vary from page to page and section to section creating different alignments from the fixed position formatting apply. The site redesign will eliminate the table structure 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 astir(predicate) 8 pages branching from the homepage with numerous anchor cogitate utilise to aviate long pages of poetry. The positive content pages are extremely long, to the point the flick scroll becomes its minimize size at 19201080 screen resolution. disposed(p) 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 coherent pattern of cosmos underlined and a hand mouse pointer to indicate that photographing the link is actionable.The actual ordering information for hard print ma gazines is hidden in a catalog link not listed on the of import navigation bar. There are also pages for internal authors that are only accessible from the main page and are not descriptive to being a parade of a specific the respective authors work. The site redesign will apprehend using a more description navigation menu to amend 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 resolved to poetry, the decisions for color and contrast do not follow a veritable(prenominal) 60s theme let alone theming for easier reading. Typically 60s themed colour in include Turquoise, Jade, and Mint Green amongst others (McEvoy, n. d. ), starkly contrasted to the wickedness red on glowering shown on the homepage. The important headings all feature a random color with an XORd play down while the menu has the alike variation of random colorize 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 avoidance.The under-contrasted pages would make viewing the site very catchy for roughone that is color blind The background paper on each page has a subtle 60s them but does not contrast well with the multi-color schoolbook of poetry passages or content in general. The font size and space are decorous but the font face itself detracts from the aesthetics of the pages content. The majority of the staunch schoolbook 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 canful be made to throw overboard 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 & likeness the designer made a picture of their copyright account and it appears they grow its size from the original distorting the image quality. The site redesign will use textual matter in place of images used to accomplish to the same task. The picture of Barry Tebb, one of the authors, requires a deep brown 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 tranquil image kind of. Additionally, the site logo will be linked nowadays to the homepage making navigation easier. There is a text area on the homepage that contains to the mellowedest degree 5 paragraphs of text and requires scrolling in a very specialise window. This will be revised into a more useable text block following the same design pattern as the remain 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 cons olidate 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 cxxx HTML mark 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 run lowover if the image failed to load.There is not a neat 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 crossways the majority of browsers. The site uses a coffee beanScript based get going-out menu to assist navigating titanic pages of poetry but there are numerous compatibility issues that occur. The pop-out menu rests somewhat 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 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 sites identity starting with revising the homepage and including an About Us page to farther expand the sites purpose.HTML and CSS coding standards and practices will be stringently adhered to ensuring compatibility and proper viewing experience across major browsers. References Cumbrowski, C. (2008, Feb 20). 50 Questions to guess 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 shellspace. com http//www. fontspace. com/lorvad/bellbottom-laser McEvoy, D. (n. d. ). Interior bearing 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 confirmation 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. atomic number 18 links tagged with anchor text that provides a clear indication of where they lead? Yes. 2. abstrusi ty 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). give the amount of content on the site it would be more amenable to have a 3 click architecture to more curtly filter and arrange content (by author/by subject). 3.If a slosh 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 change s 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 overly many different areas on the homepage detracting from being concise. The homepage itself has more link than actual content. 9. go with 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 damp from navigational elements? The navigation menu on the home page is stray 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 mul beatdia files? No, on top of alt text being absent, the java applet containing a photo on the main page does not fail safe ly 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 mend 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 altogether cut off from use in Chrome and Firefox. 9. Site has usage not? found/404 page. No. (Requires a server side change so not applicable) Identity 1.Company logo is prominently placed. Yes 2. clear(p) bid 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 60s era poetry and those looking to purchase a copy of the print magazine. 4. Tagline makes political partys 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 seven-fold 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 bon ton information. No specific About Us page listed and had to specifically manage 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 appealing? 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. 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 put one over 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 that 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 curtly of effectively speaking this to the audience. 3. Are bodies of text constrained to