Assignment 1: Website Evaluation

LI 843 Web Design & Development 1 Spring 2014 Susan Brinkman

OVERVIEW I chose the John F. Kennedy Presidential Library and Museum website for evaluation. After considering numerous options, I went with a site that is closely aligned to what I would like to emulate in my own work in both function and design. The purpose of the John F. Kennedy Presidential Library and Museum website is three folddirect visitors to information about the library, such as visiting and exhibitions, provide access to researchers to information about the collection and holdings, and to engage educators in utilizing site information within the classroom curriculum. USABILITY
Findability; Color and Font; Speed; Wayfinding and Searching

Findability I will start usability with Krugs thoughts on simplicity, If you cant make something selfevident, you at least need to make it self-explanatory. (pg. 18) The site home page is selfexplanatory with a top-down navigation. The pull-down menus are self-explanatory. However, there is quite a lot of text on the home page and some but not all of the links in the pull-down are also listed within the frames below. That made me wonder, Does this Historic Speeches link take me to the same place as the drop-down Historic Speeches link? It did and thus that gave me some measure of confidence the entire site would work in a reliable way. But, too much text on the homepage. Color and Font The color scheme (red, white, blue) was simple and even the photos in the carousel slide show at the top of the page were consistent with the overall design palette. The colors were used to direct visitors to links and were self-evident. The font choice was readable and the site allowed for zoom just fine. Speed The site speed was fine. I tested page loading on the ESU network, my home AT&T Uverse network, the Emporia Public Library network, and my Verizon 4G connection for mobile devices. All tests were similar and speedy. This included testing the video, 1960 Democratic National Convention 15 July 1960 from the Historic Speeches menu. While the video took a bit longer to load on the iPhone than the PC, it played well on all devices. Wayfinding and Searching The history of this term, coined in 1960, to describe how humans traverse their built environments is the perfect concept descriptor when thinking about how we navigate our virtual environments. (Lynch & Horton 4 Interface Design) Lynch and Horton explain wayfinding as having four core components: Orientation, Route Decisions, Mental Mapping, and Closure. I tried this out on the site by trying to find

Assignment 1: Website Evaluation

LI 843 Web Design & Development 2 Spring 2014 Susan Brinkman

something I had not yet seen while evaluating the pages for other criteria. I chose the personal correspondence and letters of Jackie Kennedy following the assassination. I was never successful finding the information. Although, I did know where I was (orientation) on the site at all times. I was able to find the advanced search capabilities under the research pull-down. However, I was not quite adept enough to put in the correct terms as my results were so numerous and seemly not at all related to my search criteria that I simply gave up.

Partial screen shot from search for Jackie Kennedy Papers

The search did show me the remarkable depth of the site and it was truly impossible to do any mental mapping once the enormity of the site became apparent. Ironically, I was able to do a simple Google search for Jacqueline Kennedy Papers and found the first hit to be a press release from 2012 on the site announcing the opening of Mrs. Kennedy-Onasis papers. I can only say, the papers are there, I know they are there, I cant find them.

Assignment 1: Website Evaluation

LI 843 Web Design & Development 3 Spring 2014 Susan Brinkman

Partial screen shot showing same search on Google

ACCESSIBILITY

Responsive Design; Screen Reader; Alt Text

Responsive Design The website did not perform well using the Responsivator test site. Pages were truncated at each resolution size. However, this would appear to be a flaw with the Responsivator not recognizing the mobile interfaces for the site. When browsing with an iPhone 4s and an iPad Mini (screen shot in table below) the site worked well on both devices and had a welldesigned mobile interface.

Sample from Responsivator

Screen Reader The screen reader program, Web Anywhere, was difficult to use as an evaluation tool. It did not run well on a Mac as a number of the key commands were PC specific. I was able to scroll through the homepage with the reader and could navigate to sign up for a newsletter but this was after much time and effort and experimenting with shortcut keys. Additionally, I did not hear the screen reader give any alternative text for the images on the page tested. I suspect that it might be best to invest in a high quality screen reader for testing websites.

Assignment 1: Website Evaluation

LI 843 Web Design & Development 4 Spring 2014 Susan Brinkman

Alt Text I could not locate the alt text for the images within the code elements (see table screenshot below). However, I am certain the site is correctly using the image text identification as a text description pops up when hovering over with the mouse. According to Robbins, Every img element must also contain an alt attribute that is used to provide a brief description of the image(pg 126). I tried clicking on several options in the source codes including the <div> but still found nothing that included <img src= >. IDENTITY
Logo and Tagline; Homepage;

Logo and Tagline The identity, as defined by use of a logo and tagline, for this is site is very clear and simple. The color palette along with the consistent use of the Goudy Old Style font creates a visual identity that clearly allows the visitor to know she is still on the or within the confines of the site, regardless of where she navigates. I used What The Font to assist with type style identification. Homepage The homepage structure when using a non-mobile device is built around a set of frames. There is a carousel of slides just below the header and pull-down navigation. Then using the rule of thirds, the lower two-thirds of the screen is divided into a frame of 2/3rds and a frame of 1/3 for content. The two-thirds on the left are large links to pages that can also be found using the pull-down menus. The right 1/3 is more dynamic information including news and events. I would suspect a regular visitor to the website would often look to the right for new information on this site. While not specific to design, this photo site has a nice visual example about the Golden Ratio and visual organization of space. NAVIGATION
Breadcrumbs; Site Search

Breadcrumbs The site utilizes breadcrumb navigation. It worked well regardless how deep I went into the site.

Sample breadcrumb screen shot

Assignment 1: Website Evaluation

LI 843 Web Design & Development 5 Spring 2014 Susan Brinkman

Site Search Site searching was difficult. While the home page has a well-designed search box with all the requisite items such as self-evident button, text label, and magnifying glass icon, the actual results were not what I wanted with my search terms. [Please see comments and results listed under Wayfinding and Searching] CONTENT
Visual Hierarchy; Conventions and Comparisons

Visual Hierarchy As noted earlier, the rule of thirds is applied as a gird to the home page. However second and third level pages in the history tab reduce the size of the header and increase the main body for text to about of the screen, leaving the other quarter, usually on the right side for either more dynamic information or photos. The visual arrangement of content, however, varies dependent upon which pull-down tab from the top navigation is viewed. For example, the Events and Awards page utilizes an entirely different visual hierarchy, which includes the viewer scanning among photos rather than skimming topic text as, was the case in the JFK in History section. The entire site works very well, however, due to the fidelity to other graphic elements color scheme, font choice, and site navigation on top. Conventions and Comparisons Lynch and Horton point out in their Web Style Guide 3rd Edition that the Internet has been around for eighteen years and now has a history from which certain conventions can be established. Navigation is chief among these conventions and the JFK site is no exception. I had little difficulty with the site other than the research chunk. The top tab and left side navigation are known elements to web users. Additionally, the site performed well on a variety of devices and with a multiple sources of Internet delivery such as Ethernet and wireless. The developers of the site could have utilized more usability testing with regard to the research pages. I think the home page, as well could use less text and without the confusing topic links, which are the same (but not all) links as in the drop-down top menus. Finally, I decided to take a look at the site compared to that of another presidential library web presence. I chose the William J. Clinton Presidential Library. I found that the conventions of navigation were nearly the same. However, the Clinton site was not as crowded visually on the homepage and the research sections were much easier to navigate. Clearly the audience for the JFK site is expected to have a higher level of sophistication when conducting research. I did a similar search, to the Jackie Kennedy Papers, looking for the Clinton FLOTUS papers and found complete and helpful lists of archived items within the holdings.

Assignment 1: Website Evaluation

LI 843 Web Design & Development 6 Spring 2014 Susan Brinkman

Screen shot for comparison of FLOTUS research pages

Table 1 Assessment Area(s) John F. Kennedy Presidential Library and Museum Screen shots

Site Name Site URL

This screen shot is from my 15 MacBook Pro www.jfklibrary.org

Assignment 1: Website Evaluation

LI 843 Web Design & Development 7 Spring 2014 Susan Brinkman

The website demonstrates responsive web design/development. In addition to working fine on the iPad Mini, the site displayed well on an iPhone (shot not This Screen Shot is from an iPad Mini included)

Usability The site was difficult to navigate with Web Anywhere. I am sure the Alt Text was in place. However, I could not locate it while inspecting elements. But hovering over the photos did show a description of the image except in the slide carousel on the homepage. The site logotype is simple without heavy graphic elements but with fidelity to the Goudy Old Style font. No tag lines are used.

This screen shot is from an iPhone 4s

Accessibility

Screen shot with hover over photo and inspect elements activated on screen

Identity

Assignment 1: Website Evaluation

LI 843 Web Design & Development 8 Spring 2014 Susan Brinkman

The homepage uses a rule of thirds or the Golden Ratio for dividing information into frames.

Navigation The content is organized in a visual hierarchy but it is remarkably complex. A unique feature of content organization, wayfinding, and navigation is the arrival of a drop-down menu (see samples to the right) when on the tertiary level of the Kennedy in History pages.

Screen shot of Golden Ratio with Photoshop guides added in red

Content REFERENCES Ilchenko, E. (n.d.). Golden Section and Photography. Golden Section and Rule of Thirds (Golden Mean, Golden Ratio, Golden Spiral, Golden Proportion, Golden Triangles). Retrieved February 8, 2014, from http://photoinf.com/Golden_Mean/Eugene_Ilchenko/GoldenSection.html

Assignment 1: Website Evaluation

LI 843 Web Design & Development 9 Spring 2014 Susan Brinkman

Introduction to web accessibility. (n.d.). WebAIM:. Retrieved February 06, 2014, from http://webaim.org/intro/ John F. Kennedy Library and Museum. (n.d.). John F. Kennedy Presidential Library & Museum. Retrieved February 01, 2014, from http://www.jfklibrary.org/ Krug, S. (2013). Don't make me think!: A common sense approach to Web usability. Berkley, CA: New Riders. Lynch, P. J., & Horton, S. (2009, January 15). Web Style Guide, 3rd Edition. Web Style Guide. Retrieved February 8, 2014, from http://webstyleguide.com/ Polacek, J. (n.d.). Responsivator. Responsivator. Retrieved February 02, 2014, from http://johnpolacek.github.io/Responsivator/ Robbins, J. N. (2012). Learning web design: A beginner's guide to HTML, CSS, Javascript, and web graphics. Sebastopol, CA: O'Reilly. WebAnywhere. (n.d.). : A Screen Reader On the Go. Retrieved January 31, 2014, from http://webanywhere.cs.washington.edu/ WhatTheFont. (n.d.). ! MyFonts. Retrieved February 8, 2014, from http://www.myfonts.com/WhatTheFont/ William J Clinton. (n.d.). Home. Retrieved February 9, 2014, from http://www.clintonlibrary.gov/