fgdgdfgdf符合法规和法规和土壤突然图腾
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&pr
oduct=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 (
Figure 5). 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].
