A13: Interface design analysis

Ministry of Sound – Download

The Ministry of Sound download website essentially consists of two columns, the left being for the navigation and the right being for the content of the website. The top of the website uses the Ministry of Sound logo, plus the secondary ‘Download’ logo to identify what the website is. The orange accent colour used is used throughout the website to identify parts of the website of significance, such as the navigation button and tabs. This visual cue indicates what can be clicked on.

Other visual cues include the use of an underline when the cursor is hovered over the album name in the main content area. This indicates that this can be clicked, and it also changes the cursor to the hand icon which also helps the user to identify the links.

When the cursor is placed over the top of an album picture, a block appears with information about the album. Although this information is useful, it does take up a lot of space on the screen which can make it difficult to read at lower resolutions. I think that this system could have been altered so that only a brief description of the album appeared, so that it would not interfere with the viewing of the page.

Login information appears under the header at the top end of the page. The use of a grey background differentiates this element of the page, and is positioned in an area of the page where users spend a lot of their time looking when they initially look at the page. The search box uses a lighter grey background, which provides greater contrast to the black background than the grey used for the login box. As this part of the page will probably be used by a greater number of users, it is emphasised with the greatest contrast.
When accessing one of the ‘Channels’ from the navigation, the site moves to an area where music from different genres is displayed. The header image on the page changes depending on which channel is clicked. This visual clue indicates which genre the user has accessed, while keeping the navigation of the rest of the site the same. This continuation of the layout and colour scheme aims not to alienate the user, regardless of which genre they are looking at.
In conclusion, this website is simple to use due to its consistency of colour and layout, and uses the small but significant differences such as the header images to differentiate alternate parts of the website. The key design principle of this site is the predictability – almost every part of the website does what it is expected to do, with the possible exception of the album roll over description.

Mbop
The Mbop Megastore website’s most prominent feature on first appearance is the ‘Featured Releases’ section in the centre of the page. This is highlighted with a graphical image border, which houses the album covers of the featured albums. This is the densest use of colour on the page, and draws the viewer’s eye in this direction.
On the left of the page the search box appears at the top of the left column. This is interesting because the navigation is secondary to the search box, as it is positioned below it. This could be because many users simply do a search instead of using the navigation features of the page. Due to the high amount of content on the website, this would make much more sense rather than going through endless pages searching for the right album.

The top sellers section appears immediately below the navigation. I think that the pictures of the album covers are too small, and many of the song titles or album names are cut off because they do not fit into the box. The images look badly optimised and pixelated and I question weather an album could be easily identified from an image so small.A scroll box at the bottom of the left column contains information about the website. I think that this information is far too long, and could be condensed down into a more succinct section. Having to scroll through the box is also difficult, especially when using the mouse wheel which does not always pick up the scroll bar for this section of the site.

In the central section of the site, a range of albums from different categories is displayed into a series of blocks. The text under the album names on this part of the site change to purple when the cursor is placed over them. This visual clue indicates a link, but I think that the colour is not strong enough, and that additional emphasis with an underline or highlight would have made it more obvious.

The right hand column features the login box, which uses the grey colour to emphasise itself, much in the same way the Featured Releases and search sections do. This is done to differentiate them from the other parts of the site. This is a familiar place for login and basket information to be stored, as it is only required as a reference and is not the main focus of the page.
The only animated icons on the website are the roll over colour changes which occur on the logo in the top left corner, the ’Go to Checkout’ button and the buttons in the footer. These again highlight in purple, to indicate that they are interactive. This is again also signified with the appearance of the hand icon.

Nokia Music store

The top banner of the website contains the name of the store, sign in section as well as a search box. Within a relatively small amount of space the website displays all of the main controls for accessing content on the website. The search boxes assume that the viewer understands what they are for – they do not specifically say that this is what they do. This may because the web savvy target audience understands what input boxes at this part of the page are for. The use of a small image instead of the traditional ‘Search’ button may also confuse some users.

Below the header, there is a large Flash based section, which contains a number of vertical tabs to view different features of the website. A simple animation moves across the page to reveal the next slide. I found it difficult to read the vertical text, as it not very legible to see on a screen when it is rotated 90 degrees.

Graphical icons are used throughout the website, and the “Learn to” box acts as a key to explain these. This is given the prime location at the top of the left column, with the text description using an underline when hovered over with the cursor.
Overall this website is substantially more graphical than the other websites, but this does effect how the interface works. If the cursor is left over an album picture a box appears with graphical buttons for buying or trying the music. This box does take a couple of seconds to load, which can make the website feel clunky. I believe that using text instead of pictures may have allowed them to create a system similar to the Ministry of Sound website, and it would also have loaded quicker.
Overall the majority of the site is easy to use. I do think however that less experienced users would find it hard to understand how to navigate the Flash banner, as the vertical buttons are not easy to read. Personally, I think this could have been made simpler with the use of XHTML/CSS, and it would have been quicker to load. Understanding what page you are looking at is simple, as there is a sub heading which uses a darker grey to attract attention.

The colour Orange is used to on smaller buttons, and this colour stands out from the pale grey and white background colours. All of the buttons indicate some form of interactivity, such as purchasing or previewing tracks. This continued use of a colour to activate certain types of content allows the user to see where they can access key controls. This in effect makes it easier for people to buy music, as many of the orange buttons are for the ‘buy’ function.

Itunes Store

The front of the Itunes store essentially consists of 3 columns. The left contains navigation to the genres, the centre is where the body of content is displayed, and the right is where top songs and albums are displayed. The top of the page is dominated with adverts, which change while the viewer is using the page.

On first impression the page looks cluttered, as the size of the text used in the columns is all the same size. A simple underline is used when the cursor is placed over the navigation elements, to indicate which links are clickable. I found that when looking for other mediums, such as TV programs and podcasts, that the navigation elements for these were not entirely obvious. I have the feeling that the Itunes store has been added to over a number of years, and has outgrown the amount of content that it could comfortable hold.

The search box for the Itunes store is located in the itunes interface in the top right of the page. I can remember that when I first used the itunes store that I was unaware of this search feature. I believe this is because it is placed so far away from the main body of content, and I believe that users expect that search bars will be in the centre of the screen, or in the top right area of the header.

Much of the login information is held in the program, rather than in the interface. I have found it difficult to find how to log into the site when buying product from the website, as there is no indication of where the user can log in. As other websites have areas where the user can see their basket and login information, users coming to the Itunes site may not understand how these features are used.

The general look of the page is simple and consistent. The headers are highlighted by using a dark background colour with a white font. This visual device is used throughout the page to inform users of which content block contains what information. There is, however, no logo for Itunes on the front page. I believe this visual device has been removed because it is contained within a program, but if the store was simply a website it would be added to give a greater feeling of identity.

In conclusion I feel that the front page of Itunes is too cluttered, and has grown beyond what the website can hold. Despite the colour scheme and typography creating a consistent look, the function of the page has been compromised by it being placed into the Itunes program rather than being used as a website in it’s own right. I think that my own design will remove a lot of the content, and condense down the information viewable on the main page. Integrating the search into the main page will also aid in the usability of the site, much in the same way that YouTube has a search as a prominent feature of the website.

Sound in interface design – Windows XP

Windows XP uses a variety of sounds for different actions which the user conducts. For example, when the user empties the recycle bin, a sound of scrunching paper is played. This is reinforced with the image changing from a full waste paper bin to an empty waste paper bin. This feedback cycle is repeated with other functions, such as beeping noises when devices are plugged into the computer, or when files are moved around within the operating system.

On the web, sounds are not usually part of the user interface. This could be due to a number of factors. Firstly, there are no standard sounds which all computers have installed on them which could be used. This means that the user would have to download sounds when they are used, which would increase the amount of data which would have to be transferred. Secondly, the more commonplace sounds are the less effective they are. Constant use of different sounds would become confusing, and the visual and audible feedback process would be damaged.