G 52 HCI PROTOTYPE Josh Probert Yankee A

G 52 HCI - PROTOTYPE Josh Probert – Yankee A Prototype based on Sierra’s SRS

Introduction This prototype has been created through lowtech prototyping methods. Initial ideas consisted of rough sketches and designs. The following prototype will feature low-fi mock-ups of the functionality and design featured in the System Requirements Specification. Each slide will demonstrate functionality and design through images, text and symbols.

Logging Into the Software Upon loading the software, the user is presented with a Log In screen. The user will then be required to provide the information they chose at installation. Depending on user settings created by the user, some usernames may be given restricted access to certain files. These would be files not suitable for certain age ranges. The log in system also prevents unauthorised access to the downloading of music.

First Screen upon Login Once Log In is completed, the user is taken to the main interface the software operates from. If this is the first time the user has loaded the program, there will be no files, playlists or downloads shown. As you can see the Interface is separated into various regions. There is a Menu Bar which contains File, Edit, etc. The Side Windows located on the left contain Search, Downloads, Playlists and Devices. The Main Window contains Search Results, Library and Devices and is located in the centre of the screen. Finally, the Interaction Bar is located at the bottom of the interface and contains the progress bar and various buttons such as play and stop. The prototype will reference these regions by their highlighted names.

Organisation of Music Files The software is designed to allow all sorts of functionalities to be carried out upon music files. However, music must first be imported into the software. This can be done through downloading files, or importing files. Systems that already have music on a hard drive may import a library of music files to the software’s library. Files may be imported from all sorts of devices, from portable media players to home pc’s.

Connecting a Devices side window, located on the left side bar. Once a device is connected to the System, it is automatically recognised by the software. The software then accesses the devices properties and file system to inform the user of such attributes as device name, remaining space and music contained. The software has a side window (pictured left) which lists all devices connected to the System. It also allows devices to be removed quickly. The purpose of this window is to allow users to be given up to date information about devices properties.

Music on a Device Once a Device is connected, its contents are displayed in the centre Devices window (Right). From here an user can view, delete, copy and edit the music contained on the device. The window provides scrolling buttons. Importing tracks from the relevant device is achieved through selecting Distribute from the menu bar.

Importing from a Device OR AND Through selecting a device via either of the methods to the left, a user can then select Distribute (below left). The relevant files are then imported to the Software’s library. However, duplicate tracks are not imported. Once completed, the new tracks will be available in the Library window (above right). A popup box is displayed while the tracks are copied. However, the software can still be used during this process.

Importing to a Device Importing music to a device is achieved via the Library or Playlist windows. Playlists and multiple tracks can be synchronized to a device once the “Sync to Device” button has been pressed.

Disconnecting a Device Disconnecting a device is as easy as clicking “Remove Devices” in the Devices side window. Once clicked, the window below will appear and prompt the user to select which device(s) to disconnect. The Device will then be removed from all Device windows along with its properties and track listings.

Downloading music A user has the option of downloading new music content from the internet. This is carried out by creating a search from the Search Side Window. It features a predictable text feature that will bring up results close to your input for selection. Prior to any input a user should select Web in the Side Bar to search files online. If a user wished to search his/her library he/she could select Library. Once a track/album is selected, download options will appear in the Search Results Main Window. A user can then choose which track to download from which provider. Details of the track are provided such as cost, rating of provider and provider URL

Payment of Downloads Once a user has searched and found a track he/she wishes to download, payment to obtain the license must be carried out. Once the Download button is clicked in the Search Results Window, a new window is opened to the user (Below). User is then re-directed to the web provider to complete payment and obtain the license. Once the license is recognised by the software, the Download proceeds. A provider website may be opened in the software’s browser, or an external browser as shown above. This is configured by the user in the options.

Download in Progress Once a download has been selected and paid for, it is imported into the Downloads Side Window. Here a user can view the progress of downloads he/she has initiated. A progress bar displays how much of a song has been downloaded along with its name. If a track cannot be completed at the current time, an error message will be displayed on the track’s progress bar. A user may then click on the progress bar to be informed with the error and its solution. Once a download is complete, it is removed from the Downloads Side Window (After a short delay) and the new track will be listed in the Library Main Window. It will have an empty rating and be highlighted as newly downloaded.

Download Errors or Failure When an error occurs with a Download, it is displayed on the download progress bar on the Downloads Side Window. By clicking on the progress bar, a user can then find out what error has occurred and be given a solution to fix that error. As you can see to the left, an example of an error message displays the file name, the error and a solution. The window also displays buttons to close and open further troubleshooting options in a web browser.

The Music Library is located in the main centre window of the software. The user’s whole library of tracks will be located here. Instead, a user may decide to import a playlist to this window. The Library features properties about tracks with a editable user rating for each track. Scroll buttons allow the user to navigate easily. From here, a user can drag and drop tracks into various other windows for synchronization or creation of playlists.

The Music Library Continued The Play button is located on the Interaction Bar (Bottom of Software). A user may select to play a certain track he/she views in the Library. This is done by first selecting the track (Top left image) and then selecting the play button on the Interaction Bar (Middle left image). Once the play button is pressed the audio of the track will sound and the progress bar will display the track’s playing properties. The Progress Bar, located on the Interaction Bar at the bottom of the software.

Creation of Playlists The three images to the left show the creation of a playlist name “Dub step”. Below is how songs are moved onto the playlist from the Main Library. Songs are simply dragged and dropped into the playlist which automatically saves the new data in the playlist.

Playlist Interaction The Playlists window (left) is located in the Side Bar. The image far left shows the standard preliminary interface. However, when a playlist is double clicked on, its contents are then displayed (immediate left image). Users can drag and drop tracks into playlists as shown to the left. Once a track has been dropped into the playlist its is saved.

The Interaction Bar The above image represents the Interaction Bar on the immediate opening of the software. There are five buttons along with a network indicator on the bottom left of the image. A progress bar displays track progress. The image directly above represents the Interaction Bar whilst a track is being played. The play button changes to a pause button and the progress bar displays time elapsed, total time and how far into the track the software is.

The Interaction Bar Cont. The above image displays how the volume control works. A user clicks on the volume button which then displays a slider bar allowing the volume omitted by the software to be lowered (pointer down) or raised (pointer up). The above image also shows the network symbol faded and stating offline. This occurs if a network connection has been disconnected or is not possible. This helps to indicate to the user if he/she can download or access the web via the software.

Features of the Menu Bar The Menu Bar features drop down menus for each category. Most of these functions are ones that have already been discussed and integrated in a more user friendly manner, i. e. With icons and moveable items. File features options to open a track from a directory, close the program and create, save and delete playlists. There also functions to view the software’s properties and work offline. Edit allows a user to delete a track and view its properties. The final prototype will also feature copy and paste features. Synchronization Menu allows synchronization of tracks and playlists to devices. It also allows a user to create a playlist specifically for synchronization. There is also an option to sync the whole library to a device. Distribute allows users to view devices, downloads and find and import music currently on the system.

File As you can see from File, a user can open files or playlists in whatever directory he/she wishes. Creation, deletion and saving of playlists is also available.

Edit Once a track is selected, the user can access this menu option and perform operations such as delete and the configuration of the track’s properties. The image to the left shows us the properties of a selected track. However, the user can change some of these properties by entering text into the various fields and applying the changes by selecting “Apply”.

Synchronization Individual tracks may be synchronized to a device. This is done by selecting the track from the Library or a playlist and selecting Sync Track from the Synchronization Menu. However, Playlists and even the entire Library may be synchronized also. Above shows the steps to both. By simply selecting the menu item “Sync Library”, a user can then follow the top right image and bottom right image to complete the transfer. The bottom left image shows us sync playlist creation.

Distribute Through Distribute, a user can find music (above), view his/her downloads (bottom left) or view Devices (middle left). If a user wishes to locate music on his/her computer they can select “Find Music” which will allow them to initiate a automated search for music files. These files are then added automatically to the user’s Library.

Scrolling As you will notice, various windows and menus will have a scroll bar as shown to the left. This is to allow the navigation through the files of the software. For example once the library of tracks becomes fairly large, the window containing the tracks will need to be scrolled through to find various tracks. A user can use the mouse to click on the grey slider and move it up and down for the desired direction of scrolling. Else, the user can click the boxes located at the top and bottom of the bar.

Tabbing and Web browser The software also features a tabbing function. This is deployed when the user is viewing the web through the software. To the left is an example of the user viewing his/her music with the web browser in the second tab. The image bottom left shows us how a user is able to view websites within the program using the internal browser. A user can view music sites and choose to manually download music to the software if they wish to do so. This is enabled through tabbing as described above.

Highlighting of Features When the user hovers the mouse icon over various features of the software, i. e. Buttons, drop down menu selections, tracks, the item will show to be highlighted some how. There are three examples shown to the left.

Some Features in Action