Thumbs Up and Thumbs Down

Size: px

Start display at page:

Download "Thumbs Up and Thumbs Down"

Tracy Tyler
5 years ago
Views:

1 Thumbs Up and Thumbs Down INF 385H Digital Media Design Team Project I Amanda Moon, Karina Munguia, Yalin Sun 1. Summary New Zealand Opera has organized a thoughtful and concise information hierarchy within their website that uses three navigation tiers to intuitively guide the user. The aesthetics are inline with the level of sophistication expected from a prestigious opera house, and the taxonomy implemented effortlessly ushers the user through the process of researching an opera, checking the schedule, and purchasing a ticket. At the other end of the spectrum, Signature Flipbooks has no information hierarchy on their website and instead clutters the space of their single webpage with information lacking context, constantly changing un-clickable elements and text, and links that look more like ads. All the while, the unique service they provide is left unclear to the viewer. 2. Thumbs up Website New Zealand Opera According to the Art Council of New Zealand, most patrons of the opera are aged 45-54, college graduates that make 150k and over annually. This is the highest income bracket for any patron of the performing arts. With this information in mind, the New Zealand Opera has constructed a website that caters to an educated upper-class demographic. Three of the main ways in which they accomplish this is 1) through its use of intelligent information hierarchy, 2)

clean and rich aesthetics that reinforce the prestige of this performing art and, 3) through a smart taxonomy that intuitively ushers the user through the site. 2.

2 clean and rich aesthetics that reinforce the prestige of this performing art and, 3) through a smart taxonomy that intuitively ushers the user through the site. 2.1 Hierarchy Upon landing at the website, nzopera.com, the user is presented with a visually stunning image of a woman submerged in water. In the top center of that frame is a global navigation. Under that, NZOpera is in large text. At the bottom center of that same frame there is information on the current opera playing. The global navigation consists of: 2013 Operas, Upcoming Events, Tickets, Support Us, About NZO and Blog (see screenshot 1). Nothing too out of the ordinary there--just clean and concise. Screenshot 1 When the user clicks on the 2013 Operas the navigation gets interesting in a smart and subtle way. The global navigation remains, but under it is now presented two additional rows of

3 navigation. The second row lists all operas for the year and underneath that, a third row offers details on a selected opera including an Introduction, Performance Dates, Tickets and Cast and Crew (see screenshot 2). Screenshot 2 As the user scrolls down, only the third navigation row follows and it is discovered that each tab in the third tier navigation is listed within that single page. In other words, the user could use the third row navigation to jump down to the desired information on that page or to assist them in recognizing what information they were currently viewing since the individual tab becomes highlighted as the user approaches its given field (see screenshot 3). This simplification and ease of use would be appealing to an older audience that might be frustrated by overly designed navigation while at the same time appearing elegant and clean to a younger, more websavvy audience.

4 Screenshot Aesthetics It is reasonable to assume that most patrons of the performing arts would also have a deep appreciation for the visual arts. This assumption is beautifully materialized in the New Zealand Opera s site through its use of font, color, page layout and photography. All four of these design elements work in harmony to exude an editorial, magazine-like style that conveys a level of sophistication and elegance befitting an acclaimed opera house. The font alternates between a sans serif (Futura), which is used for the global navigation and a majority of the content, and a traditional serif font used for titles, which adds a newspaper flare to the site. The layout reinforces the editorial feel with its margins and spacing mirroring what one might see in a highend magazine or design book. The same is true of the photography. All images were clearly taken by a professional photographer and convey a sense of sophistication. There are also some

5 subtle digital effects, like parallax scrolling in the navigation that enhance the aesthetic level of the site. 2.3 Taxonomy The way in which terms are classified and then organized within the site is one of the main elements that facilitates an intuitive experience for the user. Classification is a component of the hierarchy, but because New Zealand Opera s site has such exemplary taxonomy, its taxonomy is listed here as one of the main elements that contributes to the site s success. If a user would like to research a current opera, check the schedule for an upcoming event or purchase a ticket, the actions to complete those functions follow a natural course with no extraneous elements. Further, all such actions are clearly labeled and arranges in a way that makes logical, intuitive sense to the user. Additionally, important information, such as the link to purchase tickets, is listed multiple times to ensure that the most important function of the site is easily accessed. 3. Thumbs down Website The site Signature Flipbooks is a new service offered by Signature Offset, a newspaper and magazine printing company. The purpose of Signature Flipbooks is to host web versions of newspapers and magazines in a flip book format, as though the viewer was reading the physical paper. 3.1 Unclear webpage intent However, this service is not clearly conveyed anywhere on the demo landing page, signatureflip.com (see screenshot 4). Initially, we were not even aware this page was intended to act as a representation of an actual client s landing page for their online paper. It wasn t until we found the brief description of the service on the main website that we realized signatureflip.com

6 wasn t the only or main source of information. The link to the mother site does not appear to be a link, but rather an ad, and does not link to the specific Flipbooks information page, but instead to the main site s homepage. Screenshot Clutter Considering the site is a single page, there are too many elements competing for the viewer s attention, many of which are constantly changing, so the viewer does not know where

7 to look first. The main concern with these elements is that they do not follow the typical design one might see when navigating most websites and consequently are not intuitive. The few clickable images on the site lead to separate pages that show only the recently clicked element. There are shifting blocks of color to the right that appear to be clickable but are not. The design appears thoughtless because some elements, like the video player, are placed into inadequately sized spaces. The most important aspect of the site, the bookshelf, where the client s files will be displayed, is completely lost, despite its size and location on the page. The same bookshelf is replicated at the top of the website, but it links to the page the viewer is currently visiting. In its current format, the image adds unnecessary clutter and is unsuccessful at bringing the viewer s attention to the new feature it is attempting to highlight. 3.3 Lack of Navigation There is no navigation, which is not surprising due to the relatively small amount of information on the landing page. However, there is also no information hierarchy, so when the page loads the viewer isn t sure where to look or read first. The text used in various places clashes with the background, causing it to look grainy and hard to read. There is no context to the information provided on the site so it is unclear what the company is attempting to convey. Ultimately, since this website is supposed to represent a future client s personal site, the company should probably have taken more care with fitting and arranging all the elements in a clean, legible format before releasing it and asking clients to purchase this service. 4. Improvement We used Adobe Photoshop and Axure mockup software to redesign the Signature Flip site. Here is the link to our wire frame: Axure Wire Frame.

Cognitive Walkthrough Evaluation Yale University School of Art

www.campusconnections.us Cognitive Walkthrough Evaluation Yale University School of Art Allison Hall LIS 644 - Usability Theory & Practice Pratt SILS 1 Executive Summary Yale University is one of the most