Labels: On the original site, none of the menu labels are awful, but some could be more descriptive. I had to work out the answers to the following:

Size: px

Start display at page:

Download "Labels: On the original site, none of the menu labels are awful, but some could be more descriptive. I had to work out the answers to the following:"

Lionel Reeves
5 years ago
Views:

1 Jade Anderson Special Problems in Information Architecture Design Critique: 20 February 2007 Introduction: I viewed the critique and redesign of Stitch Austin ( Stitch ) as a personal challenge to maintain the look and feel of a visually beautiful site with myriad problems lurking beneath the surface. User profile: The original Stitch site does a wonderful job appealing to the sensibilities of the site s probable users. It is somewhat eclectic, with trendy color schemes, and pieced-together graphics that create the same homemade feel as the fashion show they re promoting and crafts they re selling. Unfortunately, the trendy look was achieved entirely through Photoshop images pasted into table layouts. The original site can take a few seconds to load, even on a broadband connection, because of the large size of the image files. Labels: On the original site, none of the menu labels are awful, but some could be more descriptive. I had to work out the answers to the following: Q: Does Participate mean go to the show or be in the show? A: It means be in the show but if you click on it, the menu changes to offer the new option of buying tickets to go to the show. Q: What is Austin? A: Things to do in Austin Q: Does Shop mean I can purchase the independent designers clothes and crafts? A: No. I can buy a Stitch T-shirt or poster, aka merchandise. Q: Does Links lead to other pages that have to do with homemade fashion? A: Actually it s a listing of all the designers, stylists, vendors and musicians involved in the event. Having answered these questions, I clarified the ambiguous labels electing Buy Tickets, Buy Booth, Buy Merchandise, Past Photos, Austin to-do, and Contributors.

2 Navigation: On the original site, all the navigation choices reside in the menu at the top of the page. This is confusing because not all of the links relate to the most important information: the Stitch event. I elected to move the links for information about Sponsors (which is tertiary and often included by obligation), Austin, the Stitch Grant, and Contacts to a footer section. This leaves the top menu with only the primary areas of information that will be useful to someone who accesses the site to learn about the Stitch event: how to buy tickets, participate in the show, see photos of past events, read press coverage, and buy Stitch event merchandise. The Stitch Grant link proved to be something of an odd man out as it s not directly related to the show and also not a tools function like Contact or About. But it s still an important concept that the client wants to promote. I chose to provide three different homepage links to the Grant information: one in the footer navigation, one in the News & Updates section, and one in the body of the general information paragraph. Any user who comes to the site specifically to learn about the Stitch Grant should have no trouble finding a link to get to that information. On the original site, the Participate link is only available from the home page. Once it, or any other link is clicked, the option goes away. While this may have been a strategy to remove the option for anyone who doesn t access it right away, I suspect it was not a conscious design decision. Either way, it breaks continuity and I changed it in my redesign. The photo page on the original site is frustrating to look at because it doesn t have a slide show function and clicking on each picture takes you back to the top of the page, where you have to scroll down again to click on another picture. In order to create a you are here feeling for the user, who may otherwise forget which menu item she has clicked, I used CSS to give a visual cue of which screen the user is in. Thus the selected menu item appears in a different shade from the others. The original site also breaks two of Krug s cardinal rules of usability 1 by not using the logo in the upper left to link back to the homepage from all other pages on the site and not having obviously clickable links throughout. Some pages, like the one that lists all the contributors, are really bad. About half the contributors listed are actually links to outside sites but the only way to ascertain which is to look down by the task bar to see if a URL appears. Typeface: The original site uses a mix of serif and san-serif fonts, a mix of uppercase, lowercase and all caps, and a mix of colors. Again, it is useful for creating an eclectic design feel but it is not easy to read. Many of the headlines and call-outs are also generated in image editing software and pasted as gifs without alternate text. I elected to emulate the design of the original site, without sacrificing readability, by using serif headlines with san-serif body text. I also sparingly highlighted important words in an alternate color. I eliminated the random all caps strings in headlines and text. 1 Steve Krug, Don t Make Me Think: A Common Sense Approach to Web Usability

3 Code: Here is where the bulk of this site s problems truly reside. It utilizes a table layout with 20+ clunky gif images claiming about 80 percent of the homepage. This leads to a slow-loading page that can take a few seconds and a static layout that requires horizontal scrolling in smaller screen resolutions. The original menu bar is created through cut and pasted images with a color change coded as a Javascript mouseover effect. More compact CSS could be used to create a very similar effect, which is what I have done in the redesign. The original site makes limited use of CSS altogether, even in cases where it would be easy to incorporate, such as using an image url for the unordered list style. The site is not semantically marked up at all. There is no div information delineating navigation versus content. Lists are not marked up as lists. Headlines are not used at all since they are all gif images. The original site would be very hard to change if the client wanted to do any minor wording changes in any of the gif headlines or if a not-so-savvy person was charged with updating content. I have given the divs descriptive names and marked up lists and headlines appropriately in the redesign. The original site is coded in HTML 4.01 Transitional has 37 errors on the home page and fails 508 validation with Cynthia Says. The redesign validates XHTML 1.0 Transitional and passes 508 validation. There are some wins in the original code, however. There are plenty of good, meaningful metadata keywords associated with the site and the style sheet validates. Conclusion: I wanted to maintain the trendy design and eclectic look and feel of this website because it does a good job appealing to its target audience. My challenge was to utilize CSS to emulate this trendy look, while improving its compliance with web standards, increasing the site s accessibility, and speeding up the loading time. I also wanted to improve the usability of the site through an assessment of the information architecture. I determined there were more appropriate labels that should be used in the menu. The navigational tasks also required a reassessment in order to be grouped together logically and in order of importance. A couple basic IA concerns were remedied: a homepage-linking logo and obviously clickable links were added. I also addressed the glaring accessibility issues by adding alternate text to the few images that remained and creating a link that skips directly to the page s content. I followed Zeldman s advice 2 and made the alt text of the logo Stitch home page on all pages that aren t the home page because this is more meaningful to a non-sighted user than Stitch Logo. 2 Jeffrey Zeldman, Designing With Web Standards

4 Original Design

5 Stitch Redesign

6 Stitch Redesign Continued

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design Due Tuesday, Feb. 9 upload to Blackboard Locate five HTML (not Flash) websites you believe exhibit good web design, usability and accessibility principles. Each website s critique is worth 10 points (50