Site Design Critique Paper. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc

Size: px

Start display at page:

Download "Site Design Critique Paper. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc"

Ashley Bradford
5 years ago
Views:

1 Site Design Critique Site Design Critique Paper i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc February 20, 2007

2 Site Design Critique - 1 Introduction Universidad Rafael Landívar (URL) is a private institution of higher education in Guatemala. As a former employee and member of the IT department at URL, I decided to review its website that was redesigned from HTML to Flash in To begin, I would like to direct the attention to main page: Figure 1 At first glance, the website looks very attractive and is consistent with most pages within the site. The color scheme combines a set of levels of orange and blue, which provides a good sense of contrast and appealing-ness for most users, especially undergrad students. The images on the website are of acceptable sizes but poor of quality. The website employs two types of links (text and buttons) and four sections of menus. Most recently, two features were added to the website: a search function powered by Google and an administrative access to employees records. Nevertheless, there are some features that can be improved to make the website more effective, friendly, and useful.

Site Design Critique - 2 For this assignment, I will be looking at the design, navigation, information architecture, usability, code quality, and interaction methods.

3 Site Design Critique - 2 For this assignment, I will be looking at the design, navigation, information architecture, usability, code quality, and interaction methods. Design The homepage and section pages of URL use orange and blue colors, relying exaggeratedly on orange, including backgrounds. The site uses three types of links: a) the main one on the right side, which may not be the best example of friendly navigation. For instance, if viewers are in the second level of content (see Figure 2), they will no longer see the main right menu; instead they see a horizontal and running list of links underneath the logo; b) two horizontals, all links in this section open a new window and each page uses a completely different design; and c) one that combines text and image, this section is used for news and events, thus, I would assume that it is one of the most visited sections, however, the actual three pages do not have a title name, instead it remains with default untitled document. Additionally, all text is presented in a small frame (approximately a sixth portion of the screen) and with small fonts. Figure 2

4 Site Design Critique - 3 Navigation The website attempts to maintain the same features that have been present since the HTML version (launched in 1998), including logo, news and events, departments and divisions, branches, special projects, research institutes, and links to the Association of Jesuit Colleges and Universities network. However, with the Flash redesign some features have been rearranged. The logo is still at the top of most pages, except for those that open in a new window. The main element of the homepage is the link to the latest announcement (usually for students deadlines and fees); I find this link as distractive because of the size, effects, and currency. When viewers are in the second level of content (see Figure 2), the information is displayed in three columns: an image on the left, the main description in the middle, and related links on the right. As I previously mentioned in the design section, the space defined for the description section as well as the font-size used are very small and difficult to read. Moreover, if users need to go back to the main page, they have to use the back button of their browser. The bottom of most pages contains the same standard footer -the physical address-; again, the font-size does not help readers. Information Architecture Under the premise that Information Architecture enables people to step logically through a system confident they are getting closer to the information they require, the URL website may not be the best model for that, it is here, where the site has major flaws. Upon opening the site, the viewer is presented with several links but no pull-down menus are available. Though the main links (right side) are well and hierarchically organized, they have neither a MouseOver feature nor a tag which would help viewers select their target link before the final click. Additionally, one of the most significant errors is the lack of content exposure to local browsers and -even worst- to search engines. That is, even when viewers are already looking/reading within the website, they cannot use the find feature of their browser to locate a particular term, not to mention online researchers who only use search engines to find information on the web. At this point, I would assume that the content is mainly aimed for local students and staff;

5 Site Design Critique - 4 therefore the Web-Developer Team has not considered a different approach to enable online discovery. Usability According to the usability definition, a website should keep the balance between business and users goals. In this case, one would argue whether the web-development team has surveyed what users think about the site, probably not. If they did that, they would have a more readable site; so far, it seems they have only thought about one half of usability -the business side-. On the other hand, the site, as part of an institution with a large population, should have a direct link to the directory database. Also, I would like to point out two more abstract usability issues: a) page loading delay, though URL has traditionally claimed that most users access the site using the broadband connection on campus, it should important to think about those viewers with low-speed connection; and b) printing options, because sometimes it is useful to print and read the information on paper; the site should have a print-friendly feature, especially in pages full of text. Code Quality As previously stated, since most of the site code is invisible there is little to comment here. Though it is possible to view the source of some pages (those that open in a new window); these pages are created with Microsoft applications (*.htm). Most of the pages do not comply with HTML standards. In fact, when I used HTML TIDY to validate the code of few pages; the utility reported hundreds of errors more than one thousand warnings. That is another area that deserves critical attention. Interaction Methods Not applicable. Perhaps, the only method of interaction between the site and users is the search box available on the main page. But even this tool, I do not think it has been used as one would expect, because it only works when viewers type in some text in the box-search and click on the magnifying glass icon. As a many users would do, I typed in some text and hit Enter and it came up with an error window.

6 Site Design Critique - 5 Conclusion The website tends to render the users (students) into passive viewers of the content, rather than inviting them to be more engaged in finding information. To change that, I would like to provide a prototype, based upon my findings and some Web Standards. The following is a list of suggestions: 1. Though I understand the reasons behind the color scheme selection, the site is overwhelmed of orange. Therefore, I would use a different tone/color for the background. 2. For navigation, the site should have tags in order to help users with vision difficulties. 3. Reorganize the links into fewer categories and create pull-down menus to save space and enable a just-in-time view and click feature. 4. Add a feature to help users know where they are, so they can go back level by level or the website root. 5. In the second level of content, increase the space available for description, as well as the font size. It also implies to get rid of the images which are of low quality. 6. Make the Search feature more visible and friendly (it could include the institutional directory as well). 7. Help affiliated users access their private account more easily. 8. In the footer section, increase the font size. 9. For sections with more than one page of text enable a print-friendly feature. 10. Set different colors for active and visited hyperlinks. * Each item is shown with its correspondent number in Figures 3 and 4. Additional suggestions At first, switch to HTML/CSS format, later it would be useful to consider DHTML Add an automatic utility to keep track of users profiles (operating system, browser, location, connection speed, keywords, page/s visited, and others). Consider an evaluation version for devices with smaller screen (e.g. mobile). For all pages created in Microsoft applications run an HTML validator to assure quality and interoperability for information discovery.

7 Site Design Critique - 6 Figure 3 Figure 4

EKTRON 101: THE BASICS

EKTRON 101: THE BASICS Table of Contents INTRODUCTION... 2 TERMINOLOGY... 2 WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?... 5 LOGGING IN... 8 Choosing an edit mode... 10 Edit in context mode (easy editing)...