Interface Design: Redesigning Buffy The Vampire Slayer DVD Menu

The interface I have chosen to look at is the reissued DVD boxset of the ‘Buffy The Vampire’ Series, Season Four Disc One. This would be considered a Graphical User Interface. A GUI is described as ‘A piece of software that makes the operating system… more intuitively useable by the use of pictures eg icons for files. (2007 P 159)

On first inspection, (Figure 1. Before.jpg) on the original disc there is very little overall contrast between the light and dark areas. The text is close in colour to the background and hard to read. The font is an off white shade while some of the surrounding background/skin is a shade of yellow. The only thing to significantly differentiate between the two is the outline on the font.

The design of the menu is very basic, with the Buffy character in the middle of the screen and two episode titles to her left and two to her right. There is no indication to which season or disc you are watching. Even the ‘Buffy’ logo is blended into the background behind the Buffy character to the right.

Navigation on this interface is difficult to interpret, even for the well sighted. There is no indication in which order the episodes are in and the indicator icon for choosing episodes is a shade of red and blends with the background so it is also hard to see. It is also very small. Missing from this opening menu also are text options to click for Playing All episodes, Audio Options, Extras or Subtitles.

The actual working structure of the interface is poor. There is an audio/video montage of the Buffy series when the disc is first entered into a player. Once the montage ends and moves to the actual menu, there is nothing more than a basic music audio loop, orchestral and theatrical in style which lasts 27 seconds per loop. This gets quite annoying as the loop is made up of the same two bars of music.

This is the main menu of the DVD but only gives four options. It is only when you click on an option and then click again, do you get other options including Chapter Selection.

The menu design is not consistent with what is used on the DVD cover. On the cover, the colours of the font and background are more contrasting and easier to read. Introducing another font here leaves the viewer open to confusion and does not support the ‘Buffy’ brand. The DVD cover is clear and legible but the DVD menu lacks clarity and the design has no definition and looks flat.

This version of the Buffy series was released after the original series run ended on television and it seems that very little thought went into the design of the menu and it may have been issued to benefit from Buffy’s cult status and popularity.

On the reconstructed interface (Figure 2. After.jpg), the first thing I did was to move the Buffy character to right of the screen. A slight drop shadow effect in Photoshop gives more definition to the Buffy Character and the rule of thirds on how we visually see things comes into play here.

‘The theory is that if you place points of interest in the intersections or along the lines that your photo becomes more balanced and will enable a viewer of the image to interact with it more naturally.’ (Rowse, D 2010)

I then darkened the background and increased the contrast, making this easier to see. In his book, The Visual Story, Bruce Block speaks of contrast and affinity. While shades of grey have a tonal affinity, the easiest shades of grey to see within the grey spectrum are contrasting black and white. ‘Contrast = Greater Visual Intenstity Affinity = Less Visual Intensity’ (2001 Page 10) The colours chosen on the original colour palette may have an affinity but lack in contrast.

Using a ‘Buffied’ font I recreated the Buffy logo and put this in the top left corner of the screen. This continues the brand image of Buffy but also tells the viewer what it is they are watching. It is important to include as many people as possible. By including the name, viewers with no prior Buffy knowledge are not excluded.

Although the target user for every device or interface will be different, according to Jennifer Tidwell ‘The trick is to find out what’s generally true about your users to separate the quirks from the common behavior patterns’ (2005, Page 5)

While Buffy may have a cult status or following appealing to a particular audience, it is important to remember that within a specialized audience you also may have persons with special needs or disabilities and how they interpret the interface could be different. The inclusion of subtitling options and better colour contrast alleviates this problem somewhat.

Using ‘Morpheus’ font, similar to that used on the DVD cover, I created a title for the Season and Disc number. The only place where the disc number was mentioned in the original interface was on the actual disc face, which you wouldn’t see if the disc was in a DVD drive. (Appendix 1)

I also included at the bottom of the screen, secondary menu options. These give audio, subtitling and play all options as well as an extras option. The extras option brings you directly to out takes and behind the scenes footage. In the original interface you have to click three times to get to this.

The original image presumed that you knew in which order the episodes ran even though the selection (cross) icon moves both up and down and sideways. It could have been interpreted that the episodes went from that on top on Buffys’s left, then bottom on her left then those on Buffy’s right. The order the episodes run in is from top left, top right, bottom left, bottom right.

In a Graphical User Interface, icons and images are used instead of type to issue commands, it is therefore important to have an icon that clearly shows its position on the screen. In Fig 1. (Before) the red cross icon is small and blends in with the background. In Fig 2. (After) I have made the icon bigger and it stands out more from its background. It is also more obvious that this is the icon which guides you through the interface.

The redesigned interface also have better movement than the original. On the original image, everything is in the centre of the screen, because all the information is in the centre it leaves no room for the eye to move to other areas as there is only a background to look at. The placement of the episodes around the Buffy character is very square keeping your eye there.

In the redesign the eye automatically goes to the Buffy character on the right but also to the Buffy Logo on the left. It then goes to the Season and Disc information, down through the episode titles to the secondary options at the bottom of the screen, offering a better user experience.

Appendix 1.

The actual font used on the DVD cover is ‘Mason Sans’. The Mason sans font family is available to buy for 73 euro from www.fontshop.com Morpheus is a variation on this font with each letter being slightly wider and more square than Mason Sans.

References:

Abercrombie, N. & Longhurst B. 2007 Dictionary of Media Studies, England, Penguin Books Limited

Block, B. The Visual Story: Seeing the Structure of Film, TV, and New Media, 2001, Boston, MA, USA, Focal Press

Rowse D. Rule of thirds, 2010 [Online]

Available from http://digital-photography-school.com [Accessed 21/03/2010]

Tidwell, J. Designing Interfaces: Patterns for Effective Interaction Design, 2005 Sebastopol, CA, USA, O’Reilly Media

DVD:

Buffy The Vampire Slayer, Season Four, Created by Joss Whedon Directed By Whedon & Others © 1999 Twentieth Century Fox Barcode 5039036018609

Fonts:

Buffied Font [Online] Available from

http://simplythebest.net [Accessed 21/03/2010]

Morpheus Font [Online] Available from

http://www.dafont.com [Accessed 21/03/2010]

Mason Sans [Online] Available from

http://www.fontshop.com [Accessed 21/03/2010]

Figure 1. Before

Before

Buffy The Vampire Slayer DVD menu Screenshot

Figure 2. After

Redesigned Buffy The Vampire Slayer DVD menu

Redesigned Buffy The Vampire Slayer DVD menu

Share...Share on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest0Share on TumblrShare on LinkedIn0Share on Reddit0Share on StumbleUpon0Email this to someone