Overview of Design
Composite Design 3 This is a web application designed with safety in mind design that focuses on safety while striving for reasonable efficiency. Such a design should assist .
- Motivation: This design focuses on the most critical task of the three identified in GR1 (importing music). The CMJ lists, which are used less often (submitted on the order of once a week) are not a major focus of the design, but may be accessed through a tab interface at the top.
- Design Idea: This design keeps editing separate from uploading by fusing a master-detail design like those used on iPad applications with the pane-based design of Windows 8 applications for the purpose of selecting editable components in a modal interface ("Metro"-style)
- Scope: Since importing and reporting are the most important tasks of a music director, these tasks have been emphasized for the purposes of this interface.
- *Pro: *By emphasizing safety, more error-prone users who might be less computer-savvy
...
- will be able to be sure that they will not import data with incorrect data. The compromise in using a master-detail design should add efficiency for high-volume music directors to get their job done without much fuss.
- Con: Aspects of the interface (including the questions asked and modal nature of most of the detail view) may be less efficient than would be ideal for high-volume music directors.
An overview of the entire interface is shown here, details regarding each component will be explained in the storyboard below Unlike the other designs, this design has been designed without a focus on playback, instead focusing on the editing and uploading portions of the task, since these are common tasks for both music directors and elves.
| |
A detailed example of the main KaJaM! interface | The KaJaM! interface when editing an album |
...
Sketch | Explanation |
|---|---|
| Lana sits down to upload some releases |
| She opens up her e-mail to view some digital downloads |
| She opens up the KaJaM! interface |
| And drags and drops the link from her e-mail to the interface |
| It automatically starts to download |
| She continues to drag and drop links for upload... |
| And will be prompted if the file is password protected |
| When she's done uploading, she looks over what's been loaded for each album |
| Interested the an album, she plays a track from it |
| If it's got correct data, she clicks "YES" (It's okay) |
| And the album is loaded and saved and disappears from the list |
| When she finds the error on Starmarker's album, she clicks "NO" (It's not okay) |
| And is given options to change the release |
| She selects "Track Names" and |
| And is given a list of the names to edit |
| She edits the names and clicks "Done" |
| And is returned to the "What's Wrong?" screen, where she clicks "Nothing," as everything is now correct |
| Since everything has been corrected, she clicks "YES" when asked again whether the album is now okay |
| Running out of time to do more work, she leaves the remaining albums to be handled by Adam (he will see them when he logs in) |
| Hurrying to submit her CMJ lists, she opens the CMJ submission for in another window |
| And switches to the charts tab in KaJaM! |
| She clicks the RPM genre tab and uses the top plays listed there to populate CMJ |
| Her job done, she logs off, content in the knowledge that more digital media has been catalogued than ever before |
...
This design builds off the learnability aspects of Design 1 from Sketch Set 2 by again allowing :
- Allowing the entire window to act as a drag-and-drop interface for URLs and files at any time
...
- Using external consistency with other interfaces
...
- Featuring reactive buttons that highlight when the mouse is over them
...
- (avoiding issues caused by users who are unfamiliar with the Windows 8 pane-style interface, used here for the "editor/What's Wrong?" view of an album
...
- )
- Making the editor a proper mode rather than an alternate path
...
- to improve internal consistency
Efficiency
The design is reasonably efficient. Since the entire page is a drag-and-drop area, the
- The region in which to drop a link or file is
...
- the size of the window, making steering much less of a concern when dragging and dropping links from Lana's e-mail
...
- Links may be dropped like files
...
- . This consistency of the
...
- two actions demands no interaction with a text box, nor does it require two different methods of interaction
...
- .
- The "YES" box for approving albums is made visible in a consistent location in the album view
Unlike , as lengthy track-listings are truncated and allowed to scroll separately from the bottom comments and "YES/NO" fields. Unlike Design 1 of Sketch Set 2, however, some efficiency of editing was sacrificed in favor of improved safety and learnability by making the "editor" a mode activated by the "NO" button rather than a set of hidden widgets.
...
The design is relatively safe. Making
- Making the entire screen drag-and-drop reduces the chances that a user will fail to drop the file for uploading (as would be the case if only a part of the screen was active)
...
- Unifying the drag-and-drop action across both links and files
...
- prevents errors caused by lapses where a link is dragged and dropped instead of copied and pasted into a form
- Should information be required, the design may be made safe by preventing submission and highlighting missing fields
- Users may easily see and edit fields with a decreased possibility that users will incorrectly edit something they did not mean to thanks to the pane interface for editing
The fields. The least safe aspects of the design relate to the :
- The compact nature of each download in the left-hand list (it's possible to select the incorrect album
...
- )
...