• Created by Unknown User (dmiao@mit.edu), last modified by Unknown User (pipian@mit.edu) on Mar 10, 2013 19:52

Overview of Design

This is a design that focuses on safety while striving for reasonable efficiency.

  • 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.

A detailed example of the main KaJaM! interface

The KaJaM! interface when editing an album

Storyboard

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 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

Analysis

Learnability

This design builds off the learnability aspects of Design 1 from Sketch Set 2 by:

  • 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.

  • 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 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.

Safety

The design is relatively safe.

  • 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 least safe aspects of the design relate to:

  • The compact nature of each download in the left-hand list (it's possible to select the incorrect album)
  • No labels