Introduction to Human-Computer Interaction [06-21253 ...rjh/courses/IntroductionToHCI/... ·...

Introduction to Human-Computer Interaction

[06-21253]

Group 23

A Project to Design a Truly User Focused Media Player

Group Members: Callum Potter (CXP407)

Chris Black (CVB400) Will Downs (WED413)

Ian Shields (IXS416

i

Contents Abstract ..................................................................................................................................................................................... ii

Section 1 – Outline ..................................................................................................................................................................... 1

Section 2 – Literature Review .................................................................................................................................................... 1

Section 3 – Review of Existing Systems...................................................................................................................................... 4

3A – Spotify .......................................................................................................................................................................... 4

3B – Beatport ........................................................................................................................................................................ 6

3C – Windows Media Player ................................................................................................................................................. 8

3D – Netflix ......................................................................................................................................................................... 11

3E – iTunes.......................................................................................................................................................................... 14

3F – Twitch ......................................................................................................................................................................... 17

3G – VLC Media Player ....................................................................................................................................................... 18

3H – Winamp ...................................................................................................................................................................... 20

Section 4 – Developing the Personas ....................................................................................................................................... 24

Introduction ........................................................................................................................................................................ 24

Low Computer Literacy User .............................................................................................................................................. 25

Average User ...................................................................................................................................................................... 26

Advanced User .................................................................................................................................................................... 27

Section 5 – First Generation Prototypes .................................................................................................................................. 28

5A – Prototype 1 – Basic Player .......................................................................................................................................... 28

Rational for Prototype 1: ............................................................................................................................................... 28

Evaluation of Prototype 1: ............................................................................................................................................ 28

5B – Prototype 2 – Integrated Family Player ...................................................................................................................... 29

Rationale for Prototype 2: ............................................................................................................................................. 29


5C – Advanced Requirements Player .................................................................................................................................. 31

Rationale for Prototype 3: ............................................................................................................................................. 31


Conclusion to 1st

Gen Prototypes: ...................................................................................................................................... 32

Section 6 – Second Generation Prototype ............................................................................................................................... 33

Introduction ........................................................................................................................................................................ 33

6A – Evaluation of Design Tools.......................................................................................................................................... 33

Process .......................................................................................................................................................................... 33

Possible Packages .......................................................................................................................................................... 33

Microsoft PowerPoint Prototyping Toolkit.................................................................................................................... 33

6B – Detailed Prototype Demonstration & Analysis ........................................................................................................... 34

Basic Player Window ..................................................................................................................................................... 34

Library View Window .................................................................................................................................................... 35

Library View Window with Waveform .......................................................................................................................... 36

CD Player View .............................................................................................................................................................. 37

Settings Menu Pull Down .............................................................................................................................................. 38

6C – User Heuristics ............................................................................................................................................................ 39

6D – User Testing ................................................................................................................................................................ 40

ii

User Testing Rationale .................................................................................................................................................. 40

Results from user Reports ............................................................................................................................................. 41

6E – Cognitive Walkthrough ............................................................................................................................................... 42

Section 7 – Summary & Conclusions ........................................................................................................................................ 45

Bibliography ............................................................................................................................................................................. 46

Abstract There are numerous examples of media players within the market but it is debatable that very few that try to effectively establish a compromise between all different classes of users. This project consists of a review of existing media players and literature in order to establish key concepts and ideas for the design. Three first generation prototypes are then designed and reviewed using three personas representing a wide scope of the target market. A second generation high level prototype is then developed based on the feedback from the first generation prototypes, and is then evaluated using a cognitive walkthrough, user testing and heuristics discussion, followed by a summary and conclusion on the whole project. The project concludes that the final media player designed was fit for purpose and the main objective of designing a media player suitable for a wide range of users was achieved. In achieving this however, the media player failed to specialise in any particular area and it is likely that existing media players better suit the needs of individual users.

1

Section 1 – Outline In the modern day and age, media players have become an essential part of everyday life for many people. In recent times many new media players have been developed with varying purposes and aimed at various audiences. Liikanen et al (2012) state that consuming music through interactive devices has a great cultural, social and commercial significance. It is thus of considerable importance when designing a media player that the user requirements are met and that the experience is enjoyable. Whether there exists a truly user friendly media player that captures a wide spectrum of the consumer market is subject to great deliberation. Competition is fierce amongst the likes of Apple and Microsoft, whilst newer competitors including Spotify have added another dimension to the market. The following section will look in depth at modern interface and media player design, drawing upon relevant literature to provide a critical analysis of the current climate.

Section 2 – Literature Review One of the key elements for any software system is its usability. (Chang, 2001) defines usability as one of the most important characteristics of overall software quality, and that specifically it is the capability of the software product to be understood, learned, used and attractive to the user when used under specified conditions. In terms of usability and design, Galitz (2007) highlights several widely accepted points related to effective design that should be considered:

Symbols are recognized faster and more accurately than text

Graphical attributes of icons, such as shape and colour are very useful for classifying objects elements or text by a common property

Visual or spatial representation of information has been found to be easier to retain and manipulate, leading to faster and easier problem solving

Increased simplicity results in casual users finding it easier to retain operational concepts

Graphical representations of objects are thought to be more natural and closer to innate human capabilities

Predictable system responses can speed up the learning process for users

Having easily reversible actions can help users to build self confidence in using systems by giving them more control

Users have less anxiety when using the software if it easy to control and comprehend

Graphical direct manipulation systems are more appealing and entertaining to users The International Organisation for Standardisation (ISO) have the definition of usability as "The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use” (ISO.org). Jacob Neilson (2012) describes usability as a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. He defines usability as having five quality components:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can

2

they re-establish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Usability is of such great importance because if a media player is difficult to use, customers will simply leave and use a different one instead. Neilson highlights the key quality attributes needed, such as utility, which refers to the design's functionality. Usability and utility are equally important and together determine whether something is useful. It matters little that something is easy if it's not what you want. It's also no good if the system can hypothetically do what you want, but you can't make it happen because the user interface is too difficult. Neilson’s usability guidelines for design include visibility of system status, match between system & the real world, user control & freedom, consistency & standards, error prevention, recognition rather than recall, flexibility & efficiency of use, aesthetic & minimalist design and help & documentation. Schneiderman (2009) has put forward "Eight Golden Rules of Interface Design" as a guide to good interaction design. Shneiderman proposed this collection of principles that are derived heuristically from experience and applicable in most interactive systems after being properly refined, extended, and interpreted: 1. Strive for consistency. 2. Cater to universal usability. 3. Offer informative feedback. 4. Design dialogs to yield closure. 5. Prevent errors. 6. Permit easy reversal of actions. 7. Support internal locus of control. 8. Reduce short-term memory load. When considering the realm of media players, gaining commercial advantage is critical, with the market place being extremely competitive. (Arthur, 2012) highlights the long standing competition between Microsoft, Apple and Google, creators of Windows Media Player, iTunes and Google Play respectively; which represent three of the most popular media players currently on the market, stating that the companies have fought a long standing battle for control over varying parts of the digital landscape. (Arthur, 2012) continues to highlight that whilst some believe that the momentum of human intentions means that the user will always get the correct outcome, others think that factors such as where we buy and play our digital music represent significant milestones that will shape the future of the digital world. (Liikkanen et al, 2012) highlights a huge interest and demand for media players backed by statistics on digital music sales, video streaming and illegal sharing, meaning that there is an incredible amount of data about sales, interaction and usage. Despite this significant amount of data and demand (Liikkanen et al, 2012) continues that music interaction within HCI is substantially under researched, and that little is known about the technology used by many people around the world. The use of menu's within the realm of media players if very common as they provide numerous uses and advantages. (Kendall & Kendall, 2010) cites numerous advantages to using menus in user focused interfaces. Firstly, the user does not need to know the software in detail itself as the menu presents options from which they can choose. In addition to this, menus are not hardware dependent, which means that they can be accessed and controlled through keyboard, mouse, touchscreen and even voice. (Kendall & Kendall, 2010) continues to highlight another key advantage

3

of using menus relevant to the project design in that they can easily be hidden until the user needs them, and can also be nested within other menus as a method of leading a user through options. It is also important to consider that for more experienced users, menus may not be the desired choice:

“Experienced users may be irritated by nested menus. They may prefer to use a single-line command entry to speed things up. Other users might use the shortcut abbreviations or key combinations” Kendall & Kendall, 2010

It may therefore be necessary to implement keyboard shortcuts or find another solution for the more experiences users who may not want to cycle through several menu's to access the one function that they know they need.

4

Section 3 – Review of Existing Systems

3A – Spotify Spotify was launched in October 2008. The program was written in the C++ programming language, and acts as an online streaming music player. The software has had relatively little competition since its launch in the form of dedicated streaming services, however with the emergence of Google Music, Deezer and Napster among others, this situation has now changed. Spotify still dominates the online streaming market however and has an unrivalled back catalogue of over 20 million songs. The software offers a range of unique and innovative features which will be discussed. The software is available on both Desktop and Mobile, and has specific features for each platform, as well as extra features for subscribers to its premium service. The table below shows the difference in its features:

Fig 1 – Spotify Feature Comparison

Mobile Free: The free version of Spotify for mobile users allows searching for and listening to playlists, discovery of new music, sharing created music and playlists and use of Spotify’s Radio Feature. Users can play any playlist, album or artist, provided that they remain in Shuffle mode. Limitations are that there are advertisements between tracks, unable to play HD audio, no offline capability and only five track skips permitted per hour. Desktop & Tablet Free: Very much the same as the Mobile Free version, however users can play any track they like without being in shuffle mode. Otherwise the same limitations also apply. Premium: The premium services costs £9.99 per month. Premium users have the added benefits of no advertisements, unlimited track skipping, offline playability across all devices and HD audio. Key Features: Browse/ Playlists: One of Spotify’s key defining features. Users are able to browse through thousands of playlists created by others, listening to them as they choose. This feature is highly popular as it enables users who do not want to download their own songs and create their own playlists to tune in and listen to other playlists out there. A key element to the popularity of this feature is that Spotify make it very easy to find the music that

5

the user is looking for. From clicking on the Browse button, users are then shown a screen offering them access to Top Lists, Genres & Moods, New Releases, News and Discover. Any one of these options allows access to a range of additional options. From selecting Genres & Moods, users are then presented with a vast range of options covering all genres of music, as well as some very unique options such as Mood, Party, Workout, Focus, Dinner, Chill, Romance and even Sleep. Selecting one of these options will then open up a new window containing 15 playlists offering songs to suit the selected occasion.

Fig 2 – Genre & Moods menu

One limitation of the feature is that for people with a very refined and acute taste in music, they may find it difficult to find the sort of music that they are looking for, as Spotify is based around popularity. Spotify’s playlists play an essential role in its use and its popularity. The playlists with the most followers are those that are presented when specific options are selected in browse mode. Users are also able to create and post their own playlists online to share their musical selection and taste with the world. Rating: 8/10 Radio: Spotify’s Radio feature is similar to Playlists – it does not serve as a traditional service for pre-recorded podcasts or radio shows, but enables users to subscribe to or create their own ‘radio stations’. Selecting a Radio Station will then start playing a sequence of tracks associated with that radio station. The main difference between the Radio and Playlists feature is that users cannot see the next track or indeed a list of the tracks to choose from when in Radio mode. Follow/Social: Follow allows the user to follow artists, friends and other Spotify users. It is similar in this respect to social networking sites such as Facebook and Twitter, and adds a social aspect to the experience, with friends being able to listen to each other’s playlists. Once an Artist is followed, users can then select that Artist from the Artist tab and access all of their Spotify content. Spotify allows users to actually link their Spotify account with their Facebook account. By doing this users are able to see what their friends are listening to and even send tracks and albums to their

6

friends. This link between music and social networking has undoubtedly proved to be highly popular with millions of Spotify users. Rating: 7/10 Layout/Usability: Spotify’s layout is quite similar to many media players on the market, and will seem familiar when opened by users who have never seen its interface before. On the left hand side of the screen there is a side panel which lists the various options such as Browse, Radio, Follow etc. As well as the user created playlists with its own dedicated scroll bar. It is also worth noting that Spotify enables users to import their existing iTunes playlists straight into Spotify and keeps them in exactly the same order, making the transition between the two very easy for users. Across the top of the screen there are the usual options of File, Edit, View, Playback and Help. The actual media player is across the bottom of the screen. It has a minimalistic design with play/pause, skip forwards and skip backwards buttons, as well as a track bar with a moving cursor showing how much of the track has been played and allowing users to move to specific parts of the track. Finally users have the option of shuffle and repeat on the right hand side of the track bar. The track that is currently playing is displayed in the bottom left hand corner with a large image of the track artwork appearing and a + option enabling the user to add it to a playlist should they desire. Lastly is Spotify’s Search function. The function in itself is not bad in the sense that it works – enter the artist and track you are looking for, hit enter and it will usually find it, however, the feature lacks depth in that users are unable to search by genre or year.

Fig 3 – Spotify’s main home screen and standard layout view

3B – Beatport Beatport - http://www.beatport.com/ Beatport is not a dedicated media player as such. It is a website that acts as an online music store and music player specialising in electronic and dance music. It originally opened in 2004 and has grown in popularity over the years. Users are able to listen to 2 minute segments of tracks using the built in media player, and then have the option of purchasing them through the website. Any tracks purchased through the site are completely free of digital rights management (DRM) and can be downloaded, burned or put on any device any number of times after purchase. The site has become immensely popular with users, in part due to the sheer volume of tracks available and the fact that many of the tracks available are not available on other popular programs such as Spotify and iTunes due to their obscure and underground nature.

http://www.beatport.com/

7

Key Features: Media Player: The media player is embedded in the website and is only accessible through visiting the website. The player itself appears at the top of the screen on a bar. It features the standard Play/Pause, Skip Forwards and Skip Backwards on the left hand side, next to a picture of the album artwork and useful information on the track, name, artist, version, release date, duration, music label and genre. On the right hand side of the media player bar is a very useful image of the waveform of the track being played. Users can skip to any part of the waveform by clicking. This is very useful, particularly in relation to electronic and dance music, as users can easily see the make-up of the track and can skip straight to the main part, as many tracks within this genre have a specific layout and waveform that is easily recognizable to a trained eye. There is then a buy option next to the waveform bar, and a useful key command drop down menu, which if opened provides a useful mapping of keyboard functions to control the player and even buy tracks without using a mouse our touchpad. Users also have the option of queuing tracks to play in a row or playing a whole list of tracks from a given chart or list on the website.

Fig 4 – Media Player and Waveform Bar

Rating: 7/10 Music: The ease of access and locating specific tracks and charts is essential. The website achieves this through its layout and organization. From the homepage, users can select genres which opens up a drop down menu containing 23 sub genres of electronic music. Selecting the desired genre will then take the user through to the homepage of that specific genre. Each homepage contains featured new releases, artist charts with the genre, staff picks, and a chart containing the top 10 current most popular tracks within the genre, which can be expanded to display the top 100 current most popular tracks. Every track whether it’s a staff pick or on the current top 10, can be played easily just by clicking on the play button next to it. The artist charts are a selection of between 10-20 tracks chosen by a popular artist, often named after one of their own tracks as a method of promoting it. This feature is very useful as it provides a way of accessing and discovering tracks that are not featured within the top 100.

Fig 5 – Beatport standard page layout

Rating: 8/10

8

Sounds: Users can access this section of the site through a bar at the top of the screen on each page of the site. The section acts much in the same way as the music section, however instead of providing tracks to download, it provides royalty free samples, loops, sound effects and patches that can be previewed and purchased for use by artists making their own productions. Like the music section of the website, users can filter by genre and have Top 10 lists, editor’s picks and new releases to browse through. Rating: 8/10

Play: This section of the site is possibly its most unique feature. It features competitions run by the website in collaboration with popular artists in which users are required to remix and produce a new track based on the artist’s original track. Selecting a given competition provides the user with further information on the contest schedule, the track to be remixed and the prizes, which are usually professional audio equipment and a release under the given artists music label. Users can then download the components of the track in order to begin producing their remix by logging in to the site. This feature is highly unique and obviously aimed at a specific user; however this is in keeping with the website itself and is highly popular. Rating: 7/10

DJs: The section features all artists registered on the site, it includes highly popular professional artists as well as completely unknown artists. Users are able to register as an artist, create their own artist profile and share their productions with others through the website, as well as list upcoming events. This aspect of the site adds a social element to the user experience and can be a useful tool for those users who do create productions to gain exposure. Rating: 6/10

Search: Users are prompted to search by Artist, Track or Label on the search bar which remains throughout every page of the site. It predicts what the user is typing and allows the user to select its predictions, however due to the sheer volume of artists; it rarely predicts the correct artist. The function works ok in the sense that users can usually find the artist or label they are looking for, however it is quite difficult to find a given track when searching by its title. Rating: 3/10 Other Features: The website also features a News section, which contains numerous interviews and features within the industry, often geared at promoting specific artists and tracks. There is also a Mixes section which contains Mixes of multiple tracks by artists.

3C – Windows Media Player Windows Media Player is a very common application of media player and comes with every installation of Windows since Windows 3.0 in 1991 (Microsoft, 2011). With this in mind we can safely assume that anyone who has bought a computer and used a copy of the OS within the last 20 years has used this player at least once. At a first glance, the software is very simplistic and offers numerous services to the casual user of a computer. It offers CD ripping and conversion services to those wishing to convert old musical collections to a digital format and then play them accordingly from a computer’s hard drive. This evaluation will cover a few of the features that are considered core to the concept of a music player. Considering these options it appears this software is aimed towards a user who works with their music primarily offline. Any files that can be opened in Windows Media Player can usually be accessed by simply clicking the file within Windows Explorer. These files can be selected in bulk thus playing them in sequence creating a temporary playlist.

9

Figure 1 depicts the expanded view of Windows Media Player (WMP). As you can see the User Interface (UI) is very simplistic and well-designed using plain spaces and clear icons to depict basic functions of the software. More advanced functions are organised in a clear way with intuitive labels. Figure 2 depicts an example of this, where all organisational tools and features are placed within a clear label and icon labelled “Organize”. In this pane, you can see clearly see some of the more advanced but nonetheless often used functions such as “Manage Libraries”, where one can, as the title suggests, manage the available media on the PC that WMP has access to. The search bar makes navigation easier by jumping directly to the file name of your choice to play but only works if you know the filename to begin with.

Shifting perspective to the main pane of the software, six options are shown and are intuitively labelled depending on what media each library contains (See Figure 1). These would change the main plane to contain a list of media pertaining to the library. Figure 3 depicts the change when selecting “Music” in the main pane.

Figure 1: Windows Media Player - Expanded View

Figure 2 - Windows Media Player - Dropdown

10

Figure 3 - Main Pane View - Music Library

In Figure 3, the main pane has changed from the default focus to that pertaining to the music library. Each icon has its own unique design and a clear label indicating which “view” you wish to link to. Selecting any of icons will apply a sorting parameter to the collection of music accessible to the software. For the purpose of this report, the evaluation will take place using “All Music”.

Figure 4 - Music Library: All Music

Figure 4 depicts the music library option and the change enacting upon the main pane. The information portrayed is linked to each music file. This information is unnecessary and can detract from the usability of the software. There is, however, a much more basic view for users who want a simple interface to play basic. This can be accessed by selecting the icon placed clearly at the bottom right of the screen. Figure 5 shows this reduced view.

Figure 5 - Windows Media Player - Basic View

The basic view is incredibly simplistic with only a small number of icons depicting the core functions of a media, “Play”, “Pause” and “Volume”. This view lacks of the depth of the Expanded View with no playlists view or customisability nor any information relating the music files. Only the current

11

song shows has displayed information. This view is useful however for those who simply want to play music without it taking up much screen space, such it is unobtrusive in its design. Referring back to the expanded view once more, there are three selections that can add additional functions to the screen labelled “Play”, “Burn” and “Sync”. “Play” brings up a side menu that deals with playlists including a creation option.

Figure 6 - Playlist Side Menu

The playlist screen can be used to sort music into custom orders, rather than by album artist. A user could use this to construct playlists for different uses, for example, a user may wish for an upbeat playlist to work out to but a calm collection of music for when they are relaxing in the bath. This function clearly caters to those who wish to apply music to every part of their lives. This feature links to the “Sync” option. The Sync selection brings up a different side-menu which can be used to transfer a selection of music to a compatible device. Users would use this to move music their pre-arranged music to be played away from their computer. This supports the Playlist function above.

Figure 7 - Sync Side Menu

Rating 7/10

3D – Netflix Netflix is an online video streaming service which operates through a browser based media player. The company itself offers many different services; this report will focus solely on the online on-demand video streaming service. The Netflix online streaming service was derived to offer an alternative to television, for a variety of reasons. The service began as a means to replace the need for DVR or VCR recordings and the

12

interfaced of traditional television. Netflix aims to “Consumers have to navigate through a grid, or use DVRs which add an on-demand layer at the cost of storage and complexity. Finding good things to watch isn't easy or enjoyable. While hugely popular, the linear TV channel model is ripe for replacement.” (Netflix, 2014).

Figure 8 - Netflix Main Screen (www.netflix.com)

Figure 8 shows the main menu presented upon a successful log in into the site. The site presents a clean, simple design with neatly organised, recognisable icons linking to the various shows and products available. The search bar in the top right corner of the screen produces a list of likely matches. There are many different searches that are possible. The most prominent is “name of video/movie” and “actor”. The former produces either, a close or exact match. See Figure 9 for an example of this.

Figure 9 - Netflix Search Screen (www.netflix.com)

Several other features are in place to aid the user in finding new materials. When searching for a product that is not included within the Netflix catalogue, similar titles are shown on the search bar along with other “titles related to”. Figure 10 clearly shows an example of this.

Figure 10 - "Titles Related to" Screen (www.netflix.com)

13

When selecting television seasons, each episode available is linked to one another in-video and will play in sequence when watching the season. This aims to reduce the number of clicks for the user to receive the service they desire. This is non-obstructive user interface which reinforces the quick and easy service that Netflix aims to provide. By hovering over each icon, additional information is provided. By hovering cursor the “Archer” icon in the top left hand corner the information will pop up in clear and intuitively organised format. Figure 11 shows an example of this.

Figure 11 - Additional Information

Figure 12 depicts the in-video player features. The design is minimalist to reduce screen presence but to also offer the key features required to operate the video functions such as Play, Pause, Volume, full screen, and finally an icon to access the related episode series.

Figure 12 - In-Video UI

The episode access button depicted as three rectangles in the bottom left hand side of the screen produces information related to the preceding and succeeding episodes to the on-going video. Figure 13 depicts this information.

Figure 13 - Series Episode Information

This widget is reductionist, simplistic, intuitive and informative whilst reducing screen presence to a bare minimum when being employed by the user. In addition to episode number, episode name, Season number at the top of the overlay it also shows a progress bar to keep track of where in the episode the user has previously watched to. Netflix saves the progress of each video to allow the user to suspend the service a reinitiate with as few obstacles as possible. Rating 6/10

14

3E – iTunes iTunes is the media player provided with all apple products and one of the most used around the world due to the success of apples I-pods and I-phones. On first inspection iTunes can be almost overwhelming to a user as the sheer number of albums visible obscures and interferes with the standard interface as it result in the user not being able to easily see where the menu options etc. are at a glance. However iTunes has numerous benefits to those who use it and these features shall be evaluated further on.

Figure 1: iTunes Store home page

Firstly the integrated iTunes store is very expansive has allows for the online purchasing of a huge variety of media including songs, albums, movies, apps and Television programs. The store is very easy to navigate although finding a specific piece of music may be difficult as sometimes different versions of songs exist. Thankfully a preview feature is in the store that allows you to listen to a small section of the track before you buy it however this is not always enough to tell if it is exactly the right version you want to buy as many of the previews for different versions of a song sound very similar. However the iTunes store is typically only available to apple product users to sync their mobile devices while this is done to encourage people to buy apple products it also means that the service has little to no use for non-apple product users. Figure 1 shows an overview of the Store while Figure 2 shows the different versions issue.

15

Figure 2: Multiple versions of same song in store

The music player is pretty standard but has numerous options including the shuffle feature, repeating a playlist when it ends or repeat playing a song. The interface for the player is very good with all the options displayed in a clear and easy to adjust manner. Outside of these the player allows the library to be sorted by album, artist, song, or by playlist. However the way iTunes displays your library is a huge flaw in the design as it becomes a sprawling mess as the library gets bigger, especially as album view is the default view which leads to an overly confusing interface and a need to organise by playlists in order to find songs without the search function (see figure 3). You can also recover artists and album artwork for music installed from cd however this is reliant and iTunes recognising the song which is not 100% accurate. However you can edit the songs information yourself and add the artwork manually so you are not at the entire mercy of the automatic detection system but it might make things a little more complicated than they needed to be.

Figure 3: iTunes default home page, music player top centre shows all the information needed in a

simple and concise way.

The options menu has a lot of variety but not way to customise the layout of the player other than

16

pre-set options meaning it can force its interface on the user. Also despite the options menu being better than many media players it’s unfortunately hidden away and navigating away from the music to customise the player is significantly more annoying without the menu bar being shown however this feature is disabled by default and when it is shown it does not fit well into the interface due to colour contrast of the background (see Figure 4) as a result. You can also as previously mentioned adjust the information of individual songs or albums by right clicking on them and selecting get info, unfortunately again this is a more advanced feature and is not exactly obvious by the menu titles for many users

. Figure 4: Menu bar near top of page, notice the contrast in colour for the bar that drags attention

away from the media which should be the primary focus.

iTunes can also minimise to a mini-player version (figure 5) which functions reasonably well but has limited usability compared to the larger version which unfortunately begs the question why bother having this feature since you could just minimise the larger player and have full use of the main players functions when you need it especially when the mini player still gets priority taken off it when you change the focus to another tab.

Figure 5: iTunes Mini Player

The iTunes player on the portable devices however is typically much improved from the interface on the computer as it becomes much easier to use with the touch screen and the emphasis on the music makes accessing it much easier on a smaller screen without swamping the user with too much on screen. Also with playlists being changeable on the devices and the music synced with each device being changeable for each different device means that users have a much more enjoyable time using the devices rather than the iTunes system itself. iTunes does support videos however the player for these is very basic covering what you’d expect from a DVD player etc. but nothing more and there is no way to adjust the video’s section by artist

17

as a result if you owned a lot of music videos the video’s tab would be horrific to browse through. Lastly updates can completely change the look of the interface and system meaning it becomes a completely different experience that can frustrate existing users. In conclusion iTunes does a lot of things well typically involving the music player and the way this interacts with apples devices however the cluttered appearance and difficulty to access options menu’s will mean that some users find the software very unenjoyable but will be pressured to use it due to the features it has especially for apple products.

3F – Twitch Twitch is an online streaming service that can store and play videos at a later date in a similar method to YouTube. However twitch has a focus more around the streaming side of the site which is where a person essentially broadcasts their own TV show typically them playing a game. Twitch has a couple of methods that allow for easy usage by a user the first is that popular streams are shown on the front-page of the website (Figure 7)

Figure 7 Twitch Home page

The Twitch browsing experience is also very simple browsing first by category of game being broadcast then by popularity so the shows with more viewers will attract more attention (Figure 8). This is a very useful system as it means that it’s normally easy to find the good shows since they are at the top of the browse menu inside each subsection (Figure 9).

18

Figure 8: Browse menu for twitch.

Figure 9: List of shows inside each category

Overall twitch has a lot of useful feature from email alerts when shows go live to the simple and clear browsing menus however shows can get to the top due to controversy rather than content which is a definite flaw with the system when compared to more traditional browsing set-ups.

3G – VLC Media Player VLC media player supports music and video files on just about every format and is available for Windows, Macintosh, and Linux. If you have trouble playing a media file such as a video or mp3 that you've downloaded from the Internet, the chances are that VLC media player will play it. It'll often succeed where Windows Media Player and WinAmp fail.

19

VLC Player Interface: Main Screen

Figure 1 shows that the interface of the VLC is extremely simple and can be modified to suit your own personal preferences or specific requirements. One of its best features is that it is open-source software that allows you to make modifications without breaking terms of use. Almost all types of media files are supported by VLC and no extra codex downloads are required. It is a portable cross-platform media player and streaming media server that can handle a wide range of formats. It can play media files directly from optical disks, webcams, URL streams and media devices while also allowing you to record from both audio and video sources direct to media files stored on your local PC. It also allows internet radio and podcasting.

VLC can be used to stream podcasts without the need any additional software

You can even use VLC to convert your files, and on top of all the formats and physical media it will play, many streaming protocols and TV capture cards are supported. The main criticisms of VLC Media Player are that the software isn’t as user-friendly as some other media players, and some of the options are over-complicated, especially for novice users.

20

Numerous open menus show that some options may take time to get used to

Although VLC has the ability to handle playlists and bookmarks easily, it falls short of the excellent organizational capabilities of Windows Media Player and iTunes. They present the collection in a far more elegant and organized way on your machine, letting you view by album, performer and media type. VLC is a much more flexible player in terms of file formats, but as a media player it is not as intuitive as iTunes as a media manager.

3H – Winamp Winamp is a media player for Windows, Android, and OS X that is provided free of charge and features music virtualisation, playlists and a media library, supported by a large online community. It comes with thousands of skins and plug-ins while allowing you to import your iTunes library. Winamp also allows you to rip and burn CDs, encode MP3 files, listen to online radio stations and convert files. It can also support 60 file formats and it helps you manage a large number of files with ease.

WinAmp Skin: The Batman, one of over 20,000 now available

21

WinAmp Skin: Hitchhikers Guide to the Galaxy skin

When you launch this music organizing software, you can upload your iTunes library or manually upload files and Winamp will automatically place tagged information into the correct categories on the play deck. The tag includes the artist's name, title, time and album name while you can also view the tag information for your songs. If your files are missing tag information, Winamp will auto-tag the file by searching the internet for data about the particular song.

Winamp Media Library

This music management software is compatible with portable devices of which you can transfer playlists to. It is compatible with the iPod (Original, Shuffle, Nano and Classic) but unfortunately it does not work with the iPod Touch or iPhone. Winamp supports smartphones, Creative MuVo, USB players, P4S-compatible devices and thumb drives. Winamp contains conversion software that allows you to convert files to MP3, WAV, WMA, AAC, FLAC and MP4. The process is extremely quick meaning you can burn and rip CDs at 48x the playback

22

speed. This maximum speed however depends on your computer. You can play a selection, add files to a playlist and copy the contents to your hard drive. Winamp allows you to keep track of, chart and share the history of the songs you've listened to and you can choose online services such as internet radio, podcast directories, Tour Tracker, Winamp Charts, Song of the Day and MetroLyrics with this MP3 software. These options are available during the installation process. You can create playlists in this MP3 software easily by dragging and dropping songs, or you can choose to have Winamp find songs similar to the one you select, just like the Genius bar in iTunes. It does this by coordinating with Gracenote, which is a music and video database, and by then identifying songs on your hard drive that are similar. If you like a visualizer to go along with your songs, this is the media layer for you. Winamp comes with thousands of options, of which you will find one that looks like lava flowing out of a purple sky and another that looks like stars traveling along sound waves.

Visualisation in Winamp

This MP3 software is versatile and sometimes complex, but they have done a tremendous job of making it intuitive. It still takes a little time to learn, but it's easy to pick up. The ability to navigate between songs, playlists, artists, and albums really makes the new Winamp stand out. Where iTunes and Windows Media Player force you to change the entire view to see this information, the new Winamp keeps it all compact and easy to navigate. The interface is sleek and visually pleasing and if you've used other MP3 software, you'll probably feel comfortable with the layout and buttons. The Winamp icons are based on the traditional visuals of an arrow to “Play” and double bars to “Pause”. Within the Winamp main window, the upper half of the main window is separated into two boxes; the left lists all Artists and the right lists Albums. The bottom half contains a list of all tracks. If you click on an artist in the upper left window, albums created by the artist appear in the right window, and all the artist's tracks sit in the larger bottom half, making it easy to navigate. There's also a video player which unlike that of previous versions of Winamp, this one is robust enough to use if you want an all-in-one jukebox app. Your video library is maintained in the same media view as your music and you can play video in the same interface without having to open additional windows or players. Additionally, Winamp has expanded the number of audio and video file types it supports.

23

Winamp video player

The new version features improved support for HE-AAC and aacPlus audio, and AVI and WMV video. Overall, the latest Winamp represents a big jump forward when it comes to video content. The new Winamp comes packed with the features that it has long needed in order to stay in step with more popular media players and has an interface that is quite intuitive. It has made it easy to organize, burn, convert, rip and listen to music and it comes with a large number of skins, visualizers and plug-ins. But overall, the database for this MP3 software is not as extensive as the databases for other music management software.

24

Section 4 – Developing the Personas

Introduction In order to ensure that the software to be designed is as robust and as suitable as possible, three different personas have been created. The three personas have very different needs and user requirements in order to ensure that the software designed as suitable for a wide audience and for the audience which the product is aimed at. The personas that have been utilised are as follows: Elderly Person: Arch (2008) outlines the commonly accepted limitations that often arise during the normal ageing process as:

Vision decline

Hearing loss

Motor skill diminishment

Cognition effects The persona has been created to ensure that the software will accommodate this user group . Middle-Aged Business Man: A frequent user of this system is envisaged to be the everyday working man or woman, who is technically capable, although not necessarily an advanced user, but is somebody who leads a busy life and thus does not have much time to spend dealing with the software system itself. This persona has been designed with the intention of capturing a large portion of the potential market as many people are technically able in terms of general computer usage, but also lead very busy lives. Technically Advanced with Specific Requirements User: This persona was designed with the intention of being completely different from the other two. Consequently the persona catches a specific niche within the market as opposed to a wide segment. The user is a self-employed DJ with specific requirements of the system related to this. It is believed also that this user’s needs would also be shared by a wider group of technically advanced users and fans of particular music, and we hope that through providing features for this user we will also add value to the system as many of the feature may actually be used and liked by other users. The personas will be presented, discussed and then an evaluation of the system from each user’s perspective will be done. Each personas has specific requirements and needs for the system, which are outlined below.

25

Low Computer Literacy User

Description: Eliza is an elderly woman who lives in the UK and now has family living in Australia. She has never used more recent technology and has only recently bought her first computer. She prefers to not use it though as she finds it very difficult and shies away from anything that looks overly technical. Eliza also has poor eyesight and dyslexia therefore can find it difficult reading. She finds it especially difficult to read from screens. Eliza’s recently bought her first computer in order to chat with her grandchildren who now live in Australia using Skype however since buying it her (hi Fi) cd player has broken and she was told by her daughter that she could play her music on her computer. She has very limited computer skills and simply wants to play the music by CD. She is not looking for any fancy features and wants the media player to do most of the sorting for her. In order to meet Eliza’s needs the player must be simplistic as complicated menus will make the player more trouble than its worth for Eliza and must be that way from default as she will not have the ability to find a way to customise the interfaces in order to suit her needs.

Name: Eliza

Age: 72

Priorities: Ease of use

Ability to organise music into

cd’s/albums with as little input from the user as possible.

Should be as close to press play and

leave as possible. Be able to get music off her existing

CDs. Points to avoid: Be complex by default Look overly technical.

Scenarios:

1. Eliza wants to play a physical cd using her computer.

2. Eliza wants to resume a cd from its previous point after having left the cd in but after closing the program/computer.

3. Eliza wants to play a cd/album from her computer without having to put the album/cd in.

26

Average User

Description: Brian is 42 has a long standing career in Forensics so he is familiar with technology but does not like completely new systems and values familiarity. After work, he enjoys cooking for his family whilst listening to music located on the family computer. He does not like his 2 children’s’ music being mixed with his own as it does not fit into his musical preferences. To fix this problem, he is looking for a media player to put on the computer so that he put on playlists as well as just a library. He also wants some form of separation between the libraries so his libraries do not contain all the music of his children. Brian is extremely house proud and naturally is also compulsively tidy and often cleans his desktop on his computer as he does not want it cluttered. He is very particular and wants the layout to suit his needs and be as minimalistic as possible. Brian would like the media player to have multiple accounts to separate his music from his children’s, its interface must also be customisable and must have the ability to make and play playlists. He also would like the ability to add music from CDs into his library so he can put the CDs out of sight.

Name: Brian

Age: 42

Priorities: Ability to have multiple accounts

Customisable interface Playlists Feel similar to other interfaces Points to Avoid: Have the screen look

messy/cluttered

Mix libraries between accounts.

Scenarios

1. He wants separate libraries to his kids and be able to make playlists from his own.

2. He wants to make playlists; one for work; one for casual etc.

3. He wants to password protect his collection so his kids cannot change them or meddle with his preferences.

27

Advanced User

Description: Calvin is a self-employed DJ from Tunbridge Wells. He has worked as a professional DJ for roughly 3 years but has been working with music for the best part of 10. Through his own experimentation of different software packages he has found none fits his needs to play his music in the manner he likes. He travels across the UK performing at music venues and so requires a piece of software simple enough to run off his laptop for his gigs. From his background, he is computer literate and tech savvy and does not struggle with computer related tasks and so requires more advanced features than the average user would require. These features include waveform of tracks, BPM and key of tracks along with the basic metadata associated with his music collection. The interface needs to enable him to easily and quickly sort and filter his tracks, and locate any track that he needs very quickly. He will need to be able to filter tracks by a range of different characteristics including duration, BPM, key and genre.

Name:

Calvin

Age:

29

Priorities: Be able to locate particular tracks/genres

very quickly

Customisable interface

View waveform of tracks Organisation of tracks into playlists

quickly and easily Recognise information at a glance

Scenarios: 1. Calvin is organising his music ahead of a live gig, he is looking to filter tracks by BPM in order to

create a playlist for his performance later

2. Calvin is performing live and would like to locate a track quickly in order to determine it's key, BPM and waveform before importing it into his DJing software

3. 3. Calvin wants to quickly determine the key of a list of new tracks that he has just imported

28

Section 5 – First Generation Prototypes

5A – Prototype 1 – Basic Player

Rational for Prototype 1: Prototype 1 was primarily designed with people with limited computer experience in mind with priorities on the ease of use as well as aiming to make the software very easy to determine what to be done.

Evaluation of Prototype 1:

Pros: Cons:

Simple and basic interface. The interface design was very simple due to being colour coded, having large buttons and being aesthetically pleasing making it easier to navigate.

Easy to comprehend. The prototype shows the artwork in a very simple and straightforward manner, making it very easy to be comprehended by a user.

Easy to Use.

Can be used without taking up a large proportion of the screen.

Has no obvious exit button which makes closing the program difficult.

Lacks clear options or settings menus.

Metadata font too small to be read by individuals with limited eyesight.

Unable to identify if the music being played if from the hard drive or a CD.

Volume control lacks a measure.

Has no shuffle or repeat settings

Can’t store library music.

Full screen mode can make the program look strange.

Album artwork is too large.

Prototype 1 is very good for use by inexperienced users it easily meets the requirements of persona 1's scenarios that details the requirements of an inexperienced user since it’s a simple interface that provides a user friendly interface. However it has no account controls for persona 2 in addition to limited customisation options meaning its very likely that persona 2 would not use this software at all especially since he wants an online library. The lack of a stored library and advanced features also means that none of persona 3's needs/scenarios are met as a result it is very unlikely for him t6o want to use this software.

29

5B – Prototype 2 – Integrated Family Player

Rationale for Prototype 2: Prototype 2 was designed at being usable for users with multiple members of family on the software. Since this often can create issue about what’s on the library with many people not wanting the others songs. As a result this prototype aims to address this issue by having multiple accounts and a separate library for each person. However the prototype is also aimed to be usable by a range of users who have some but not extensive knowledge of computer skills.

30

Evaluation of Prototype 2:

Pros: Cons:

Functions clear with tab system at top of program.

Has a lot of options.

Separate libraries will be appreciated.

Customisable artwork and interface.

Removal of duplicate tracks useful.

Clear and easy access to menus

Password feature is good and has a recovery system.

Password input not clear enough.

Not aesthetically pleasing.

Multiple users can cause confusion.

Very cluttered.

Screen design not consistent between screens.

Multiple artworks on library screen could also be confusing.

Accounts may not be a desirable feature with all users.

No close option.

Colourless.

Lacks feature for advanced users

Lack of clear audio and visual settings.

Feels somewhat clunky like an office file system rather than a music player.

Search bar in a non-intuitive location.

Music controls lacking in other views.

Prototype 2 is very ill suited to inexperienced users since tab system at the top would not be very easy to understand for a new user in addition to this the display could potentially be overwhelming. So while it meets all the scenarios for persona 1 the prototype is not very functional for inexperienced users and therefore is not likely to be used. For persona 2 this prototype is a huge improvement over prototype 1 as it offers separate libraries for him and his children as well as password protection for his library. In addition to this playlists are creatable and can be easily customised to assign specific artworks to playlists etc. so the art suits the user’s wishes. For persona 3 this prototype meets most of the basic requirements but is unable to meet the scenarios as it does not have BPM, waveform or key. However these could be added in so this prototype has potential but would currently not be an option for this type of user.

31

5C – Advanced Requirements Player

Rationale for Prototype 3: Designed to be used by user that are looking to edit and mix music (such as DJ’s) as a result this prototype is not aimed at users with little computer experience but it is hoped it will at least be usable by them.

Evaluation of Prototype 3: Pros: Cons:

Clean design.

Lots of information and given in simple and clear method.

Settings stored well accessed by an intuitive icon.

Has Quick access to the files.

Has waveform for a visual representation of the music.

Notes feature potentially useful.

Has a large track bar.

Play button etc. too small

Columns too small for long metadata.

No clear sorting methods for the music.

Information cramped in.

Music files may be unprotected due to advanced features.

Note tab may not be required.

Very complex, with a large quality of information present but not desired.

Prototype 3 has the potential to see use by persona 1 while it is more complicated than would be ideal the simplistic layout allows the more inexperience user to at least be able to use the software. However it is more suited utilising digital copies of songs than hard copies of the songs. As a result it could be a functional option but not something many users of this type would be willing to continue using on a frequent basis. For persona 2 this prototype is somewhat suitable as it has the ability to make and customise playlists however it lacks independent libraries or a way to password lock a library to prevent other editing it. Lastly for persona 3 this prototype is highly usable as it provides many of the features that would be required by advanced users and fully meets the needs of persona 3 passing all 3 scenarios. Therefore this is likely to be a go to option for persona 3 and other similar user groups.

32

Conclusion to 1st Gen Prototypes: Following the evaluation of the prototypes from each user’s perspective, we have found numerous useful features that will be taken forward, as well as several features that will not, and have developed a strong foundation of fundamental requirements on which to continue the design. Feedback from Prototype 1 was that the simplistic design and ease of use was a key and important feature preferred by all users, however the lack of access to menu’s and common buttons such as exit would need to be included in the second generation prototype. Feedback from Prototype 2 was that the menu (tab) system and access to libraries were a welcomed feature by all, as well as the password locked accounts. Users found that when switching view there was often no music controls displayed, and overall despite the tab system, the design was not aesthetically pleasing and was somewhat awkward with the search bar in an unfamiliar location. With Prototype 3, it was found that the waveform bar was a good feature that may be enjoyed by a wider user group than the specific group it was designed for. The prototype also provided clear access to lots of information which was popular. Some user groups found that the design was overly complex with lots of undesired information, and so this will need to be taken into account going forwards. Key characteristics to be taken forward:

Feature Comments

Basic Interface & Design (Prototype 1) This was like by all users and so is deemed to be an important element to take forwards

Ease of Use (Prototype 1) This was like by all users and so is deemed to be an important element to take forwards

Tab System for Access to Functions (Prototype 2)

This is something that was lacking in prototype 1, and was deemed to provide an effective way of accessing the varying program functions

Password Account System with Separate Libraries (Prototype 2)

This feature was designed with a family in mind however we found that many users would like this feature

Customisable Artwork & Interface (Prototypes 2 & 3)

Being fully customizable is the most effective way to be suitable to all user groups

Waveform Bar (Prototype 3) This is a feature designed for a niche user group, however the feature may in fact be liked by a wide group of users to scroll through tracks

Key Track Information (Prototype 3) Again, track information such as BPM and Key is not part of many media players on the market, however they would be useful characteristics to include

Settings Stored Well Accessed by Intuitive Icon (Prototype 3)

A drop down many from an intuitive icon enables the player to have advanced features and settings whilst keeping a simplistic and easy to user design

33

Section 6 – Second Generation Prototype

Introduction

This section will initially assess the tools through which the prototype will be developed based on the timescale and resources available, before then showcasing the prototype and its design in a detailed analysis with accompanying screenshots and annotations. Following on from this a detailed evaluation will be conducted which will consist of three parts; an introduction to the heuristics that will be taken into account during the evaluation, individual user testing and a cognitive walkthrough, followed by overall conclusions and recommendations.

6A – Evaluation of Design Tools

Process When building the 2nd generation prototype of our media player, we returned to our 1st generation prototype mock-ups. Microsoft Paint was used for the design of our Basic Player prototype because its simplicity, while the Family Integrated and Advanced Requirement prototypes were mainly sketched on paper. We took advice from Kris Jordan’s 10 minute prototyping tips for PowerPoint, and eventually decided to produce our 2nd Generation Prototype on the Microsoft PowerPoint Prototyping Toolkit because of our familiarity with this platform. We reviewed and edited our designs and sketches on paper before reworking them into PowerPoint. This platform allowed us to implement the interactivity required to put the best parts from the Basic, Family Integrated and Advanced Requirement players together.

Possible Packages There is a large variety of tools available online for creating low fidelity prototypes including Balsamiq Mockups, Invision app, Mockup Builder and HotGloo. Balsamiq Mockups was recommended as it is quick and easy to use with its drag and drop interface. It has a wide range of predefined buttons and panels which allow complex mockups to be built with minimum fuss. Balsamiq also allows you to quickly sketch page and app layouts using standard drawing tools. Despite the impressive functionality of Balsamiq Mockups, we found its speed to be lacking when working with heavy pictures and the editor began to lag to our frustration. InVison's prototype tool lets you create interactive wireframes, high-fidelity prototypes and it lets you share your work and get instant feedback right on-screen. The InVision app was considered due to its functionality which is comparable to Balsamiq, but unfortunately it was let down by its complicated interface which would have taken us too long to master. The Mockup builder tool efficiently combines everything needed for wireframe and mockup creation with possibilities for online collaboration. It has a similar interface to that of Balsamiq, although we found it to be of a lower quality in standard. HotGloo's run-anywhere web-based software was a good alternative but it only came with a 15-day free trial, after which you need to pay for a subscription in order to continue using the service. This was a worry in case we needed to return to the prototype at a future point to tweak the design.

Microsoft PowerPoint Prototyping Toolkit We found that we could create a surprisingly quick and effective prototype with the Microsoft PowerPoint software program. MS PowerPoint provided the features and tools necessary to correctly model our 2nd generation prototype. The main reasons for using this platform were because of its ease of use and access, speed of use, and low-fidelity. Using a program that was quick and easy to use was essential due to our time restrictions. As a free tool, we were able to master its design functions very quickly. The quality of prototype we were able to create was comparable to other more complicated programs we encountered.

34

6B – Detailed Prototype Demonstration & Analysis

Basic Player Window

Rationale Key features from this screen were drawn from the Basic Player of generation 1. From the evaluation, we determined that a clean design was important for all users to simplify features and support recognition of controls. We felt this was important because wanted users to become familiar with the software as quickly and effortlessly as possible.

An important addition to this design is the exit button which was neglected during prototype 1.

35

Library View Window

Rationale The key feature for this window is the wave form button. We felt this feature was necessary for more advanced users but to aid and simplify lower literate users, we made this a toggle option. More advanced users are capable of turning the feature on and off at will whilst lower literate are able to simply ignore the feature. The window also clearly shows the in-depth information of each song organisation in a table with the fields naming the data.

36

Library View Window with Waveform

Rationale

The rationale behind this addition is to enable an alternative way of navigating the song being played. The advanced user requirement stated that it needed to see the waveform of a song to best enable the user to select the part of song desired. This function would work as a “pop up” overlay and would only be accessed on the music screen. A toggle option would appear within the settings menu to enable this permanently on the screen or whether it should close on software termination. The line cross the waveform would dictate the part of the song being played similar to the time marker beneath it.

37

CD Player View

Rationale

This screen is designed to play music directly off the CD and provide the relevant information pertaining to each track. The artwork and metadata for the album is displayed on the left hand side to save on screen space and to reduce clutter. This enables less advanced users to simply ignore the feature if required, but allow more advanced users access to the data. A burn option is provided to allow users to save music from the CD to the computer. This would bring up a separate menu. The CD icon in the top right is inverted to show the button is depressed. Simply clicking this button again would return the user to the basic CD player.

38

Settings Menu Pull Down

Rationale The setting menu was conceived to remove screen clutter from the main screen. This pull down menu will overlay the rest of the player and close when the cursor leaves its boundaries. The tick besides the waveform is the toggle previously discussed. As other settings are introduced they are added to the settings menu accordingly. Other background settings would be filed under “preferences” and would open up a separate menu. Similar behaviour will occur upon clicking “Account Settings” and “import music”.

39

6C – User Heuristics “Heuristic evaluation is an informal method of usability analysis where a number of evaluators are presented with an interface design and asked to comment on it.” Nielsen & Molich (1990)

One of the main methods for evaluating the 2nd Generation Prototype will be a heuristic approach. Evaluating user interfaces and software through a heuristic approach offers numerous benefits. One of these as outlined by Jeffries & Desurvire (1992) is that heuristic testing offers a highly cost effective option in comparison to other methods.

Nielsen (1995) states that, in general heuristic evaluation is difficult when there is only one, or a very small number of users, because an individual user will often not spot all of the problems within a system. Thus, by increasing the number of users conducting the heuristic evaluation, it is possible to significantly increase the effectiveness of the evaluation and to outline as many problems as possible. In light of this there will be numerous users testing the 2nd Generation Prototype.

The U.S. Department of Health and Human Services (2014) outline numerous advantages and limitations to a heuristic approach which apply directly to the project, which are outlined briefly in the table below:

Advantages Limitations

It can provide some quick and relatively inexpensive feedback to designers.

It requires knowledge and experience to apply the heuristics effectively.

You can obtain feedback early in the design process.

Trained usability experts are sometimes hard to find and can be expensive.

Assigning the correct heuristic can help suggest the best corrective measures to designers.

You should use multiple experts and aggregate their results.

You can use it together with other usability testing methodologies.

The evaluation may identify more minor issues and fewer major issues.

You can conduct usability testing to further examine potential issues.

Heuristics have been designed and listed by many, however one of the most well-known are those of Nielson (1994). Looking at these, it is apparent that several link directly to the project:

Match between system and the real world: The system should avoid jargon and use language familiar to all users. This links in with all of our user groups but in particular with elderly people.

User control and freedom: Users may accidentally access a part of the system they do not wish to, and consequently need the ability to navigate easily back to the previous screen they were on, or to exit the screen they are currently on without having to go through an extended dialogue or difficulty.

Recognition rather than recall: By making as many options as possible visible to the user, the user’s memory load is minimised. Basic features and functions should be clearly visible, and all features should be easily retrievable.

Aesthetic and minimalist design: This was outlined within the evaluation of the 1st Generation Prototypes and is a key element outlined by Nielson. Unwanted information competes with needed information and makes the experience difficult for the user.

Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

40

The evaluation of the 2nd generation prototypes will use a heuristic approach, ensuring that a wide

number of users are involved so as to ensure that as many problems as possible are identified. The

evaluation will aim to identify problems and ensure that Nielson’s heuristics are considered during the

evaluation process in order to ensure that the system is as well designed and user centred as is

possible.

6D – User Testing

User Testing Rationale As highlighted in the user heuristic section, Nielson highlighted that around 5 different examiners were necessary to capture the most critical design faults in a cost effective and time efficient manner. Consequently, we have collected 5 user test reports and evaluated how efficacious the program is. The purpose of the evaluation was explained to the user with set tasks to complete after which a questionnaire was handed out with structured questions on to evaluate the software and the task. The marking criteria are as such:

User 1 – Lisa – Elderly Task: Play a CD.

User 2 – John – Middle-Aged Task: Add Song to Library and play

User 3 – Mary – Middle Aged Task: Rip from a CD

Tasks Mark

Q1 How easy did you find the task? 1 – easy, 10 – hard

Q2 How quickly did the task take you? 1 – short time, 10 –long time

Q3 How often did you struggle to find the next step? 1 – not often, 10 – very often

Q4 How well did the program perform the task? 1 – poorly, 10 – very well

Q5 How clear was the User Interface Design? 1 – not clear 10 – Very Clear

O Overall Thoughts 1 – Poor , 10 – Very Good

Tasks Mark

How easy did you find the task? 6

How quickly did the task take you? 5

How often did you struggle to find the next step? 7

How well did the program perform the task? 5

How clear was the User Interface Design? 4

Overall Thoughts 6

Tasks






Overall Thoughts 6

Tasks




41

User 4 – Paul - Teenager Task: Navigate song using waveform

User 5 – Niko – International Student Task: Create Playlist

Results from user Reports Taking the average of the results provided by the user evaluation we can take the average and see what the ratings are for each provided question. These are displayed in Table 1.

Table 1 – Average Results from User Reports

The results averaged out at 4.8 on Q1, 5.2 on Q2, 5.2 on Q3, 4.8 on Q4, 6.2 on Q5 with an overall grading of 5.8. Considering the small set of participants these figures may not be statistically significant within the likeability and usability of the software however it does give a rough outline towards where the general consensus could go.

0

1

2

3

4

5

6

7

8

9

10

Q1 Q2 Q3 Q4 Q5 Overall

Results for User Test and Evaluations



Overall Thoughts 5

Tasks






Overall Thoughts 7

Tasks






Overall Thoughts 5

42

6E – Cognitive Walkthrough

Cognitive walkthrough’s are task-centred and therefore focus on the thought process of the user as he

or she perform the necessary sequence of actions necessary to use important functions on an interface.

Lewis & Reiman (1994) describe it as “a formalised way of imagining people’s thoughts and actions

as they use an interface for the first time.” It is particularly useful for questioning assumptions about

what the users will be thinking, identifying controls that may be missing or hard to find, and taking

note of feedback on the inadequacies of an interface. Its purpose is to focus most clearly on problems

that users will have when they use an interface for the first time without training beforehand. It is

most effective if designers can properly create a mental picture of the environment of use. It should

not be used as a technique for evaluating the system over time (e.g., how quickly a user moves from

beginner to intermediate).

The assumed behaviour of two of our previously discussed personas will constitute the backgrounds

for the user taking part in the cognitive walkthrough. There will be a description of the tasks the user

is to perform on the system and a complete written list of actions needed to complete the task with our

media player. Their assumed behaviour for these different tasks will be compared to the intended way

to use the system. Their actions will be matched to the criteria for using the system. Each step in the

action sequence will try to answer the following four questions:

1/ Is the effect of the action the same as the user’s goal at that point?

2/ Will users see that the action is available?

3/ Once users have found the correct action, will they know it is the one they need?

4/ After the action is taken, will users understand the feedback they get?

Task 1 - Playing an album on the media player.

Goal - Our elderly woman, Eliza, simply wants to play her favourite song from an album from her

physical cd collection. This is the first time she has used the media player to play a cd on her

computer.

1. Turn on computer

2. Click on Media Player 3. Place cd into her computer

4. Enter CD Player View

5. Find her cd uploaded in the collection

6. Click on her favourite song

7. Play her song

8. Eject cd from media player

Entering the System - actions 1, 2, 3 & 4.

After turning her computer on, Eliza clicks on the Media Player symbol on her desktop. After it

launches she takes her favourite cd from her collection and puts it into her computer, just like how her

daughter showed her to. She waits for the cd to launch. Eliza has poor eyesight and dyslexia so finds it

difficult to read whats on the screen. She is not exactly sure what symbol to select, so presses the

Library View symbol first as it is the first symbol on the left with a musical symbol on it. After failing

to see her album in this view, she eventually clicks on the symbol with the compact disc which takes

her to CD Player View where she sees that her album is waiting for her to play.

Finding Her Favourite Song - actions 5, 6 & 7

43

Eliza looks down the track listing to find her favourite song on the album. She clicks the mouse arrow

on the line containing the details of the track and the row lights up. She presses the large play button

at the bottom of the screen that is also light up and is delighted to hear her favourite song. The name

of her favourite song is also displayed on the left hand side and the bottom of the screen.

Leaving the Media Player - action 8

After hearing her favourite song, Eliza ejects her cd from the computer using the keyboard. She does

not save the album on her computer as she was not prompted. She does not yet know that there is a

button that opens a menu that allows her to burn and save her cd’s onto the media player collection on

the computer. This means that she will have to go through the process again, of physically inserting

the cd into her computer to hear her favourite song. Someone will have to show her how to save

albums onto the media player. She will be disappointed that she has to go through this process again

as her daughter told her that it would be saved to the media player automatically.

Action Number Criteria 1 Criteria 2 Criteria 3 Criteria 4 Outcome

1 yes yes yes yes success



4 no yes yes yes fail




8 yes yes yes no fail

Task 2 – Library and waveform feature

1) Open up a playlist

2) Filter tracks by BPM

3) Find a song

4) Open the waveform

5) Navigate along the track using the waveform

6) Make some notes about the song.

7) Play from that point.

Calvin initially requires a small amount of time to find how to get onto the library tab however he

eventually managed to do this and then very quickly managed to open up a playlist. So our initial

screen can cause some issues for a new user however with regular use these issues become much rarer

as familiarity with the software increased. Calvin found it very easy to search by BPM as clicking on

the BPM value sorts by the highest first and he found this easily thanks to the intuitive system.

Selecting a song was also easy for Calvin and he was able to display the waveform with some small

time investment to find the button however the amount of time take was not overly troublesome. He

was also able to navigate along the track using the waveform with relative ease however the system

could be better as it takes up some of the song information area. Calvin also found that the notes were

frustrating as the section was small and not very suitable to large sections of notes. Lastly getting the

song to play from a selected point was also easy and intuitive.

44

Action Number Criteria 1 Criteria 2 Criteria 3 Criteria 4 Outcome


2 yes no yes yes fail



5 yes no yes yes fail



45

Section 7 – Summary & Conclusions Throughout the lifetime of this project we have created a conceptual design for a generalised music player. We initially went and studied available packages within the market to see what popular features are available with the intent of routing out the key functions between the main users of each one. It was our intention, with the first generation prototypes, to create possible solutions that fit the requirements of our selected user scenarios. Through the analysis of these prototypes, we found that through focus upon one particular persona, we would exclude the others. Furthermore, we attempted to find the compromise between each of the personae to create our second generation prototype. This prototype was created to be a possible package solution for a simplistic player that could address the requirements of each persona without excluding others. We feel through this second generation prototype we found a possible foundation to build upon in the future. Before this prototype can go through to the final stages of development there are several problems identified that must be rectified. There is a concern highlighted through the cognitive mapping and user testing that the software in question, whilst conceived by the developers to be as simplistic as possible, several design decisions would need to be made to improve the structure and design of software. This hopefully would increase the simplicity of the software and reduce difficulty in users making use of the software. The user tested tasks provided unspectacular results but gave a rough outline to how well received the software could be. We must consider that it could be the quality of the prototype that has lowered the score but certain lessons can be learned from the outcome. From the cognitive mapping, we concluded that whilst the software does perform some basic tasks required by the users, the learning curve time is too long but it to be of any credible use. During the mapping stage, several users failed on initial recognition of the tasks allotted. This is further supported by the user test scores which gave ~5.2 for both Q2 and Q3. This could be improved by the inclusion of tutorial software or prompts that would instruct the user but could be toggled off at first use. The overall design of the software was to increase ease of access to all users. As a result, it performs all the basic tasks amicably but furthermore it does not excel in any area. There are no elements to this software that would prompt a change from existing packages. Certain features within the software as a concept are sought after from specific groups but without other features or specific orientation, there is no reason for them to use this software. It appears through our efforts to create software that suits everyone; we have unwittingly created a package that appeals to no one. An aspect that can be further developed is the user interface design. Many users found it easy to recognise traditional music navigation functions. This would indicate that the design we used for the package could be further developer into a substantial improvement in the market for music players but only with the inclusion of more features and with the aforementioned, requirement to focus on one particular group of users. In conclusion, we believe our work whilst useful in the specification of music players does not create an apt solution for a mass appeal package. The concepts within our work are useful in the creation of specialised packages but further study of features would be required to complete the necessary work. The interface needs to be refined; the number of features needs to be increased with the existing features expanded to properly fulfil the design criteria. With these advancements, we believe a respectable software package could be created that fits the requirements of a small number of users but not one that can fulfil everyone’s needs.

46

Bibliography ISO.org Nielsen, J. (1994a) Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. (Boston, MA, April 24-28), 152-158. Nielsen, J. (1994b) Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY. Schneiderman, B (2009).Designing the User Interface: International Version: Strategies for Effective Human-Computer Interaction Pearson, New York, NY. Shneiderman, B. and Plaisant, C. (2010) Designing the User Interface: Strategies for Effective Human-Computer Interaction: Fifth Edition, Addison-Wesley Publ. Co., Reading, MA. Galitz., O., W., (2007) The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. John Wiley & Sons; 3rd Edition Arthur, C (2012) Digital Wars: Apple, Google, Microsoft and the Battle for the Internet, Kogan Page, UK Lassi Liikkanen, Christopher Amos, Sally Jo Cunningham, J. Stephen Downie, David McDonald (2012) Music interaction research in HCI: let's get the band back together. Proceeding CHI EA '12 CHI '12 Extended Abstracts on Human Factors in Computing Systems Pages 1119-1122, New York USA Chang, S., K., (2001) Handbook of Software Engineering & Knowledge Engineering: Fundamentals, World Scientific. Kendall, E., K., Kendall, E., J., (2010) Systems Analysis and Design, Pearson Education, UK Microsoft. (2011). Windows Version History. Available: http://support.microsoft.com/kb/32905. Last accessed 18th Oct 2014. Netflix. (2014). Netflix Long Term View. Available: http://ir.netflix.com/long-term-view.cfm. Last accessed 19th Oct 2014. Alan Dix, Janet E. Finlay, Gregory D Abowd, Russell Beale. (2003). Interfaction Design Basics: 5.4 User Focus. In: 3rd Edition Human-Computer Interaction . : Prentice Hall. 197-201. Alan Dix, Janet E. Finlay, Gregory D Abowd, Russell Beale. (2003). Chapter 3: The Interaction - 3.4.1 Arrangement of controls and displays. In: Human-Computer Interaction . : Prentice Hall.. 132. Arch, A (2008) Web Accessibility for Older Users: A Literature Review. WC3. URL http://www.w3.org/TR/wai-age-literature/#what . Date Last Accessed: 08/12/2014. U.S. Department of Health and Human Services (2014) Heuristic Evaluations and Expert Reviews. U.S. Department of Health and Human Services. URL: http://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html . Date Last Accessed: 08/12/2014 Nielsen, J (1995) How to Conduct a Heuristic Evaluation. NN Group. URL: http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ . Date Last Accessed 08/12/2014.

http://www.w3.org/TR/wai-age-literature/#what

http://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html


http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

47

Jeffires, R, Desurvire, H (1992) Usability testing vs. heuristic evaluation: was there a contest? ACM SIGCHI Bulletin. New York, USA, Volume 24 Issue 4, Oct. 1992 Pages 39 – 41 Nielsen, J, Molich, R (1990) Heuristic Evaluation of User Interfaces. CHI '90 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. New Tork, USA, 249-256

U.S. Department of Health and Human Services (2014) Heuristic Evaluations and Expert Reviews. U.S. Department of Health and Human Services. URL: http://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html . Date Last Accessed: 08/12/2014 Nielsen, J (1995) How to Conduct a Heuristic Evaluation. NN Group. URL: http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ . Date Last Accessed 08/12/2014. Jeffires, R, Desurvire, H (1992) Usability testing vs. heuristic evaluation: was there a contest? ACM SIGCHI Bulletin. New York, USA, Volume 24 Issue 4, Oct. 1992 Pages 39 – 41 Nielsen, J, Molich, R (1990) Heuristic Evaluation of User Interfaces. CHI '90 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. New Tork, USA, 249-256 Nielsen, J., Enhancing the explanatory power of usability heuristics, CHI'94 Conference Proceedings, (1994). Nielsen, J., Enhancing the explanatory power of usability heuristics, CHI'94 Conference Proceedings, (1994). http://www.techradar.com/reviews/pc-mac/software/utilities/other-software/spotify-526289/review http://www.pcadvisor.co.uk/reviews/audio/3528222/spotify-vs-google-music-review/ http://windows.microsoft.com/en-GB/windows7/products/features/paint http://www.krisjordan.com/2008/09/07/10-minute-mock- prototyping-tips-for-powerpoint/ http://www.balsamiq.com/products/mockups/manifesto http://www.invisionapp.com http://mockupbuilder.com/About https://www.hotgloo.com/signup



http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

Introduction to Human-Computer Interaction [06-21253 ...rjh/courses/IntroductionToHCI/... ·...

Documents

Transcript of Introduction to Human-Computer Interaction [06-21253 ...rjh/courses/IntroductionToHCI/... ·...