Task 2: Understanding the principles of interactive media design

Good vs. Bad

Looking at two websites in the category of Art Colleges, exploring an example of good and bad design.

First, looking at an example of bad design I have chosen the Yale University School of Art website.

Screen Shot 2016-05-31 at 11.39.04

Focusing on the appearance first we can see that the site uses less than half the page size to show its content, leaving a lot of empty space. This would not be such an issue if the content was centred rather than aligned left. The choice of background differs on each page but each follow the same style of being an image repeated. This creates a cluttered appearance and can distract from the content, especially on the pages where the background image is animated, for example on the page displayed below.

Screen Shot 2016-05-31 at 11.45.46.png

Moving on to discuss the colours used in the website, they pages do tend to use the same set of colours for the content but it does not always seem to be used for the same elements across the pages.

We can see in the above screenshots the pages for Faculty & Staff, and Students. One uses a green background for its text whereas the other a blue. Both pages contain similar information; a list of people with links to their profile, but using a different colour scheme can make it seem like it is different content. There is a lack of uniformity to the colours used.

Generally, the text across the site is legible. There are however some examples where it is difficult due to the design, an example below.

Screen Shot 2016-05-31 at 11.52.54

The majority of the text on the site is within containers with distinct borders and solid background which is necessary to maintain legibility against the differing backgrounds. The example above is not within a container, instead each word has a white background closely surrounding it. This, along with the selected background for the page, which itself has a white background, makes it hard to distinguish the words easily.

Screen Shot 2016-05-31 at 11.58.59

The navigation for the site is generally easy to understand. There is a menu on the left of all the pages which maintains it styling and position throughout. The menu however is rather simple; black text on a white background, and depending on the page it can be hard to see. The organisation of the links is somewhat unusual for a website. Generally the pages are organised in order of importance, with the “Home” link at the top. For this site the links are arranged alphabetically except for the final two, the last one being “Home”. This goes against the conventions in web design and can frustrate users when it isn’t arranged as they would expect.

The amount of content on the pages varies, and some feel like they have too much. Including a submenu for certain pages would improve navigation, as currently the user needs to scroll a lot to find the content they require. Additionally, much of the content is contained in small scrollable text boxes. An example is below

Screen Shot 2016-05-31 at 12.07.48.png

Scrolling within a page which scrolls can cause issues for users if they don’t have their cursor over the area they desire to scroll. For example, if the user scrolls on the page shown above, when they arrive at the content shown above they will begin to scroll that box rather than the page if the cursor is over it.

As a whole, the site is easy to navigate and what the pages relate to is clear. Finding certain content can be hard due to certain pages containing too much.

Now to look at an example of a good website. I have chosen the Camberwell College of Arts site.

Screen Shot 2016-05-31 at 12.16.29.png

This site has a much cleaner appearance than the Yale site discussed previously.Looking at the “Home” page first, each section is clearly defined.

Screen Shot 2016-05-31 at 12.25.49

The use of dividers between sections as well as clear titles makes it easy for the user to identify that there are distinct sections being presented. The different sections on the home page link to various different areas of the site, though not all of the pages shown in the navigation menu. Instead it seems that they demonstrate the information that a new visitor to the site would be most interested in. If the user wishes to navigate elsewhere on the site it can be achieved through the navigation menu, which remains at the top of the page when scrolling, allowing easy access to the navigation for the users.

Screen Shot 2016-05-31 at 12.29.00.png

The layout of the site is generally uniform, the exceptions being the homepage and the “News” page. The homepage is a full-width page, by utilising the entire screen space it immerses the user and captures them in the site. The rest of the pages follow the same structure (other than the “News” page which will be discussed later), the main navigation bar at the top, the content arranged vertically and a submenu on the left.

Screen Shot 2016-05-31 at 12.46.11.png

Keeping the same layout for majority of the site greatly improves the user experience as they can understand how to navigate quickly. Additionally, maintaining the same colour scheme adds to this point, in the case of the Camberwell site a simple monochromatic colour scheme is used.

Screen Shot 2016-05-31 at 12.34.54

The above screenshot demonstrates how the submenu is structured, in this example it is for the “People’ page. We can see how it allows the user to easily navigate between the different sections of the “People” pages and easily get back to the previous section they were in.

The other page than the Homepage which differs in layout is the “News” page, which in fact links to the Camberwell Blog. The fact that it is based on a blog structure would explain why it differs in layout to the main site as it is built from a different base.

An issue with the news page is it is not connected to the main Camberwell site, meaning navigating back to the site requires either using the browser’s back button, and if you have gone deeper into the news section would require more clicks, or to navigate back to the University of Arts London homepage and then finding your way to the Camberwell site from there.

Screen Shot 2016-05-31 at 13.48.35

The content is organised chronologically, which each article categorised. The page allows you to filter by category or search for an article. Each article is clearly defined from the next due to being contained within an independent box. The page does maintain the general colour scheme for the site.

Audiences

Looking at two websites that both deal with the same category, Music, and how they target different audiences. The examples chosen are Radio 1 and Classic FM.

First looking at the website for Radio 1.

Screen Shot 2016-06-14 at 00.20.15

The design for the site has a lot of focus on the visual appearance. Utilising large image tileboards to deliver its content.

Screen Shot 2016-06-14 at 00.24.22.png

The general design of the site is very simple and clean and easy to comprehend. The tiled nature is reminiscent of popular social media platforms such as pinterest or instagram, clearly an attempt to remain up to date, which reflects the majority of the music played on the station as well as appealing to the generally young audience.

The site breaks up the content into clear sections, allowing the user to find new and popular content quickly or find their favourite DJ easily.

Comparing this to the site for Classic FM we can see a major difference in design.

Screen Shot 2016-06-14 at 00.29.24.png

The Classic FM site appears much more cluttered than that of Radio 1, a mix of text, widgets and images across the page. The page feels too small for all the content and it can be hard to pinpoint quickly the section you want. The layout has similarities to that of a newspaper, perhaps a reflection of the typical age of the audience.

Unlike the page for Radio 1, the Classic FM page offers more than just links to the music and broadcasts from the station but also provides links to related articles.

Screen Shot 2016-06-14 at 00.34.22.png
The site offers more than just the content of the broadcast but also news and content desirable to the audience.

Navigation Design

Primary Menus

These are the top level menus on websites, usually including the main sections of the site. image001Primary menus should appear on all sites as they are necessary for basic navigation, they are simple to understand and allow the user to easily jump between sections.

Secondary Menus

These are a level down from the Primary Menu, and provide a menu of the main sections of one of the top level main sections. image003Secondary menus are suitable when the top level links open up more specific options, such as in this example, Sport goes into the different types of sport and allows users to navigate around the subsection they are in.

Tertiary Menu

Like the Secondary, these are a level down from their previous level, providing links to even more specific pages. Tertiary menus are suitable when there are many sections and subsections of pages. image005.pngLike in the example above, e-commerce sites often feature tertiary menus. They allow users to jump straight to a deeper level of the site quickly, bypassing the previous levels. Although some sites may have a 3rd level to their sections, a tertiary menu may not be entirely suitable as the user may miss out on necessary context by jumping straight in to a section.

Mega Menus

These are vast menus which included large amounts of links and can often be overwhelming. Often used in e-commerce sites, allowing the user to view the many different sections available. image007These are suitable when the page has many sections but the user only needs access to a specific one, allowing them to jump straight to it quicker, much like tertiary menus.

Visual Cues

There are many different visual cues to aid a user in navigating a site. Highlighting areas of the site that can be interacted with. A common example is when text changes colour on a mouse hover.
image023
Generally this indicates the text contains a hyperlink and will lead them to another page. Buttons are another example often used, giving a distinct area to click and sometimes changing appearance, be it colour or style, on a mouse hover to further identify itself as an area of interaction.

Calls to Action are another often used visual cue, most commonly used to link to a sign up page for a site. Generally a clearly defined area on the page that explicitly states what it wants the user to do.
image029.png
Rollover images are another visual cue. These are when an image interacts with a mouse hover and changes in appearance. The example below demonstrates how it is used in an online shop to indicate that the item can be bought by clicking on the image.

Icons and Buttons are common visual cues, the benefit of icons are they allow the user to make a quick connection to what will happen based on its visual appearance. Common uses are for social media sharing or redirects to appstores.

Screen Shot 2016-12-06 at 10.16.44.png

Technology

Looking at the genre of film websites and the specific example of the Cabin in the Woods site and the different technologies employed.

Upon loading the site, a video for the films trailer appears over the page.

Screen Shot 2016-06-14 at 10.38.59.png

Often when people visit the site for a film the trailer is a key piece of content they are looking for, by automatically opening it over the page the user doesn’t even need to look for it.

Upon the trailer ending the main site is visible. There is an audible low rumble in the background, this use of sound enhances the overall atmosphere of the film, that is of a horror movie.

Also evident is the use of animation. There are two examples of it present.First is the review line which fade in and out showing all the different reviews for the film. By using animation to scroll through it the user can see all the content without having to move around the site.

Screen Shot 2016-06-14 at 10.41.33Screen Shot 2016-06-14 at 10.41.22

The second example of animation on the page is that of the image of the house. Numerous aspects of the image are animated, and although it doesn’t add any functionality to the site it engages the user. A moving image will captivate the viewer for longer compared to a still as the watch to see how it changes.

The page also employs a slideshow gallery, utilising the entire screen space.

Screen Shot 2016-06-14 at 10.53.55.png

The user can either scroll through the images at their own pace or allow the site to move through them at regular intervals.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s