Software Design Document

Portable Media Player

Prepared by: Michelle Chang
CPSC 655
Sep 20, 2007

1. Introduction
1.1. Goals and Requirements
This document addresses the following goals and functional requirements for designing a
simulated portable media player.
 Access audio collection
 Create a custom playlist
 Remove existing playlist
 Play tracks from playlist
 Delete track from playlist
 Add tracks to playlist
 Shuffle playlist
 Browse by artist, title and album
 Repeat track
 Search for track
 Display track information

1.2. Product Scope

This product will be used by individuals who need to manage, store and listen to their
music files on a portable device. The objective is to design a simple, intuitive interface
with limited screen estate for managing music content.

1.3. References
1. IEEE 1016-1998 Recommended Practice for Software Design Descriptions, Software
Engineering Standards Committee of the IEEE Computer Society, USA, 1998.
2. Garton, Colleen; McCulloch, Erika. Fundamentals of Technology Project
Management. MC Press. ISBN: 1583470530.
3. Portable Media Player Requirements Document. URL:
[http://www.csdl.tamu.edu/~mchang/hcsi/mediaPlayer/mediaPlayerRequirements.pdf ]. Last
accessed: Sep 20, 2007.
4. iPod Classic Features Guide. URL: [http://www.apple.com/support/manuals/ipod/].
Last accessed: Sep 16, 2007.
5. iPod 101: What’s on the Menu? URL: [http://docs.info.apple.com/article.html?
artnum=304782]. Last accessed: Sep 15, 2007.
6. Sharp, Helen; Rogers, Yvonne; Preece, Jenny. Interaction Design: Beyond Human-
Computer Interaction. Wiley. ISBN: 0470018666.
7. Creative Zen Vision M Product. URL:
[http://www.creative.com/products/product.asp?
category=213&subcategory=214&product=14331]. Last accessed: Sep 16, 2007.
8. Norman, Donald. The Design of Everyday Things. Currency. ISBN: 0385267746.
9. Creative Zen Vision M PDF Owners Manual User Guide. URL:
[http://www.starbatteries.com/crzenvimowma.html]. Last accessed: Sep 16, 2007.
10. Sony Style Store. URL: [http://www.sonystyle.com]. Last accessed: Sep 16, 2007.
11. Zune. URL: [http://www.zune.net/en-us/support/howto/start/default.htm]. Last
accessed: Sep 21, 2007.

2. Design Overview
2.1. System Overview
This simulated portable media player will be implemented as a Java Applet using a
client/server architecture (Figure 1).

Web Browser
CLIENT

returns
invokes applet MediaPlayer JApplet

WEB SERVER

Figure 1: Client/server architecture

2.2. General Constraints

The player’s display area is limited to 320x240 pixel screen size and 320x240 pixels for
interactive controls [3].

2.3. Discussion of Alternative Designs

The following section describes portable media designs for Apple’s iPod, Creative Zen
Vision M and Sony’s video mp3 player.
2.3.1. iPod Classic
Figure 2 below illustrates the iPod’s button controls.

Figure 2: Apple iPod’s button controls [4]

iPod features its signature click wheel for selecting Menu options (Figure 3) by simply
moving a thumb around the wheel. Not much of an affordance since a 360 degrees
rotation does not map well with one-dimensional up-down motion for a menu list. The
center button is used as a Select option but is not labeled. The remaining button controls
are simple and compact and have intuitive mappings. In particular, the iPod has managed
to provide all its functionality with the use of just five buttons following George Miller’s
7±2 magic number principle for the number of items that can be held in short-term
memory at any time [6].
 Figure 3: iPod’s Menu [5]

iPod offers custom playlists (Figure 3) by allowing any track to be selected with the
Center button and places those tracks in the “On the Go” menu. Users can save this
playlist but cannot edit the playlist afterwards e.g. add songs, remove songs. In addition,
iPod does not afford an easy Repeat button during song playback. Instead, the
Previous/Rewind button must be selected after a song completes.

2.3.2. Creative Zen Vision M

The Creative Zen Vision M video mp3 player has (Figure 4) has a vertical touch pad that
maps exactly with vertical menu lists and provides a more accurate conceptual model for
navigating the menus.

Figure 4: Creative Zen Video mp3 player [7]

However the Previous/Rewind and Next/Fast Forward buttons are barely visible and very
small and are located on the left and right edges of the vertical touch pad respectively.
This design does not correlate well with Fitt’s Law which states that the time to acquire a
target is a function of the distance to and size of the target [8]. Additionally four buttons
are provided where only the Play/Pause button provides affordance. The Options button
is the most cryptic and is used to provide additional options for managing playlists e.g.
add a track to the “Now Playing” folder (which is similar to the iPod’s “On the Go”
folder). In fact, these buttons break the traditional conceptual model for having play, fast
forward and rewind buttons as main focal buttons that I decided not to read the remaining
chapters of this manual [9].

2.3.3. Sony’s A810 Video mp3 player

Figure 5: Sony’s A810 Series [10]

Sony’s player includes play, fast forward, rewind and pause options which closely fit
with the traditional conceptual model for a media player (). Seven buttons are provided
and fit within George Miller’s 7±2 principle. The image icons (instead of menu options)
provide good visibility for all nine options thus preventing the need for scrolling through
menu items. Five of these options provide good mapping with respect to their
functionality: search, music library, video library, photos and playlist. However, the need
for the Back button is unclear.
2.3.4. Zune mp3 player

Figure 6: Zune mp3 player

Zune (Figure 6) is Microsoft’s version which, in addition to features for playing media,
includes a social network for sharing media content with other Zunes in close range. The
interface consists of seven buttons, five of which are invisible with no labels. At first
glance, the black circle looks much like Apple’s signature click wheel (poor affordance)
but instead works by clicking four cardinal points of the wheel (north, east, west and
south) for scrolling through the menus. In addition, the center acts as an OK button. The
remaining two buttons are the play/pause and Back button for accessing previous screens.
The screen size is large compared to the control area and allows a larger viewing area
than the other players which is definitely an asset for viewing personal videos.
3. Class Diagram
4. User Interface Design
This section illustrates the user interface for each use case and elaborates on the
design decisions for the simulated portable media player. Since participants from my
usability study [3] used their media players solely for listening to audio and particularly
music, this interface design focuses mainly on the audio features.
The control area consists of seven buttons (Figure 7). Four are clearly labeled
directional buttons for navigating the menus, the center button for play/pause and select
depending on the context menu, and the two outlier buttons – the left button for accessing
the menu and the right button for repeating a track. This repeat button was exclusively
placed in lieu of a menu feature since participants from this study mainly used their
media players for jogging or exercise and participant #3 wanted a quick and easily
accessible option for repeating a track. The buttons were made to fill the entire control
area so as to take advantage of Fitt’s Law which states that the time to acquire a target is
a function of the distance to and size of the target [6].

Figure 7: Control buttons for simulated media player

All participants desired a need to manage their music content by using playlists to
vary the songs that were played and also for organizing their audio collection. The first
menu screen in this design thus places “Playlists” as the first option on the menu. The
second important feature mentioned by participants was the need to shuffle the same
music playlist each time. Browse and Search were less used features and hence placed as
the remaining two items on the menu. By organizing the menu based on usage, this
design hopes to increase efficiency of use.
The Browse option immediately starts browsing by track title. Views can be easily
changed by clicking on the left and right arrow buttons for browing by artist and album.
Among participants, track title was the most frequently used metadata for locating music.
On the Browse menu, when an album is selected, all songs from that album are played.
Navigating by each track is also available by selecting the arrow buttons to change views.
 By default, the “all” playlist is created by the media player. This playlist contains all
songs stored on the music player. Participant #4 expressed a clear need for shuffling all
music content easily. In addition, participant #3 did not like the inflexibility for changing
playlists on his iPod hence a separate submenu for adding and deleting tracks was
provided. Tracks can be added based on title, artist or album. The Browse option
previously described is the interface used to select these tracks.
Participants can also name their playlists for easy recognition. An alphabet soft
control is used to input text using the four navigation buttons. During playback, songs can
be rated using the Menu button. This selection does not stop track playback.
During track playback, the display shows title, artist and album in that order.
Participants in this study used these three fields mainly to locate music. In addition, the
remaining time for song to complete is shown as well as the track number and rating for
this song.
The Use Case sections to follow describe these interactions in detail with appropriate
screenshots.

4.1. Use Case: Access Audio Collection

1. User selects power on feature.
2. Media player shows first screen with audio content presented in a menu: browse
options and create custom playlists (Figure 8).

Figure 8: Media Player menu

4.2. Use Case: Create a playlist

1. User selects Playlist option from menu.
2. Media player returns sub-menu containing ‘Create playlist’ option (Figure 9).

Figure 9: Playlist menu

3. User selects ‘Create playlist’ option.

4. Media player prompts for name of playlist.
 Figure 10: Entering playlist name

5. User enters name for playlist (Figure 10).

6. Media player displays list of song/track titles.

Figure 11: Selecting tracks for custom playlist

7. User selects song/track titles to add (Figure 11).

8. Media player adds songs to playlist.

4.3. Use Case: Delete playlist

1. User selects Playlist option from menu.
2. Media player returns sub-menu containing ‘Remove playlist’ option (Figure 12).
 Figure 12: Playlist menu

3. User selects ‘Remove playlist’ option.

4. Media player requests confirmation.
5. User confirms Yes/No/Cancel.
6. Media player deletes playlist.

4.4. Use Case: Access songs from custom playlist

1. User selects Playlist option from menu.
2. Media player returns sub-menu containing “Begin playlist’ (Figure 13).
3. User selects ‘Begin playlist’ option.
 Figure 13: Selecting ‘Begin Playlist’ from the Playlist Menu

4. Media player displays all custom playlists (Figure 14).

Figure 14: Displaying custom playlists

5. User selects which playlist.
6. Media player plays each song from playlist.

4.5. Use Case: Delete song from playlist

1. User selects Playlist option from menu.
2. Media player returns sub-menu.
3. User selects ‘Change playlist’ option (Figure 15).

Figure 15: Change Playlist

4. Media player displays all playlists

5. User selects name of playlist to edit
6. Media player shows sub-menu containing ‘Remove track’ option (Figure 16).
 Figure 16: Changing tracks on a playlist

7. User selects ‘Remove track’ option

8. Media player displays all song/track titles for that playlist.
9. User selects track to remove.
10. Media player requests confirmation.
11. User confirms Yes/No/Cancel.
10. Media player confirms track deleted.

4.6. Use Case: Add song to playlist

1. User selects Playlist option from menu.
2. Media player returns sub-menu.
3. User selects ‘Change playlist’ option.
4. Media player displays all playlists.
5. User selects name of playlist to edit.
6. Media player shows sub-menu containing ‘Add track’ option (Figure 17).
 Figure 17: Adding track to playlist

7. User selects ‘Add track’ option.

8. Media player shows all song/track titles from audio collection (Figure 18).

Figure 18: Selecting track title

9. User selects song/track title.

10. Media player adds song to playlist (dialog box shows confirmation).

4.7. Use Case: Shuffle playlist

1. User selects Shuffle option from main menu (Figure 19).

Figure 19: Selecting Shuffle menu option

2. Media player returns all playlists.

3. User selects which playlist to shuffle.
4. Media player shuffles songs randomly and begins playlist.

4.8. Use Case: Browse by artist/author

1. User selects ‘Browse’ option from menu (Figure 20).
 Figure 20: Selecting Browse menu option

2. Media player shows all tracks in alphabetical order.

3. User selects right arrow button.
4. Media player shows all artists (Figure 21).

Figure 21: Browse by Artist

4.9. Use Case: Browse by album
1. User selects ‘Browse’ option from menu.
2. Media player shows all tracks in alphabetical order.
3. User selects right arrow button twice.
4. Media player shows all albums in alphabetical order (Figure 22).

Figure 22: Browse by Album

5. User selects specific albums.

6. Media player shows all songs/tracks from album/book.
7. User selects specific song/track to play.
8. Media player plays song/track selected.

4.10. Use Case: Browse by song/track title

1. User selects ‘Browse’ option from menu.
2. Media player shows all tracks in alphabetical order.
5. User selects specific song/track title.
6. Media player plays song/track selected.

4.11. Use Case: Repeat song/track

1. User selects Repeat button during song/track playback (Figure 23).
2. Media player plays song/track again.
 Figure 23: Repeat button

4.12. Use Case: Search for song/track

1. User selects ‘Search’ option from menu.
2. Media player returns input form.
3. User selects letter to search on.
4. Media player displays all song/title track matches.

4.13. Use Case: Display song/track information

1. User selects song/track to play.
2. Media player displays album/book cover image, album/book name, song/track
number, song/track title, total time for track, community rating (Figure 24).

Figure 24: Display during track playback

4.14. Use Case: Rate song/track

1. During playback, user presses Menu button.
2. Media player returns menu (Figure 25).
 Figure 25: Menu during track playback

3. User selects ‘Rate track’ option.

4. Media player shows rating screen (Figure 26).

Figure 26: Rate track during playback

5. User selects ranking between 1-5 stars using left and right arrow buttons.
6. Media player stores ranking for song/track.