Signing Up/ Logging In

The login screen is simple and has an obvious signup container, along with a login area.

Creating/Selecting a Project

The dashboard lists saved projects and allows users to easily access them.  The green button allows the user to start a new project - a dialog will pop up asking for the name of the new project.

Selecting a Stage

This is the main interface - the area where the user will make all of the edits to the formations.

Heuristic Evaluation:  The original computer prototype forced users to choose a stage before having access to any other function, so it was very limiting.  The current model flashes a tool-tip as soon as the project is first open, suggesting the user to select a stage first.  Another option was to have a default stage, and users would have to explore and find out they can change the default.

Editing Formation Name

When the user hovers over the current formation name (indicated in green), the tip to click and change the name pops up.  However, it was not intuitive to users to hover over that label.

Heuristic Evaluation:  The way to change the formation name was not learnable, so we added the tool-tip and editing icon that pop up when the user hovers over the label.

User Testing:  Each of the users we tested tried to double-click on the title under "Formations" (indicated in red) to change it.  This was not an implemented function.  

Other options:

• When clicking save, allow users to change the formation name if they have not already done so.
• When creating a new formation, force them to give the formation a name.

Adding Dancers/Props

Paper Prototyping:  During the paper prototype, users had to click through multiple dialogs to add dancers and props.  For the computer prototype, we put it all together onto one dialog.

Heuristic Evaluation:  It was suggested to have a drag and drop system, but we went with the current model because it was efficient to add multiple dancers at once.

Changing Dancer Name

In the "Add Dancers" pop-up, there is a tip under the dancer preview (indicated in green).  Users would have to read the tip in order to know the default names are editable.

Heuristic Evaluation:  There was no way to know that double-clicking a dancer allowed you to give it a name.  By giving each dancer a default name, we made it apparent that text in the shape is an attribute.  The tip in the pop-up clarified how to edit it.

Other options:

1. During presentations, we were also given the suggestion to allow the user to enter multiple names in the "Add Dancers" prompt, and these names will be used instead of the default "Dancer".

Moving a Dancer

In this model, we highlight the dancer/prop that is being moved.  

Heuristic Evaluation:  Users did not like that shapes change size to indicate they are being moved.  It was not externally consistent with any other program.  This attribute confused the user as to the shape's actual size and made it difficult to arrange dancers because sizes were skewed while moving.  Highlighting worked much better.

Selecting Multiple Items

The select tool was added to the toolbar, to make rearranging dancers more efficient.

User Testing:  However, there were some more features related to selecting that the users expected:

1. Users wanted to be able to drag and highlight multiple items, as well as use keyboard shortcuts (like ctrl).  The current click-and-select is inconsistent with other programs and is inefficient.
2. Users wanted to be able to change the sizes of the selected items simultaneously.

Resizing Items

Heuristic Evaluation:  At first it is not apparent that items can be resized.  But when trying to move them, sometimes the user would accidentally resize it.  To fix both of these issues, we added the resize toggle button in the toolbar.  This showed users that things were resizable and gave them the control to turn it on and off (for safety issues).

Tool Bar on Top

Tabs on Top

Arranging Dancers

Paper Prototyping:  Users almost always overlooked this feature because it was hidden amongst other tabs.  To fix this, we put these under the "Tasks" header, to show that it is an action.

Heuristic Evaluation:  In earlier prototypes, users chose the arrangement through radio buttons, and it was difficult to picture how the dancers would end up.  Now they can select based on these image icons, which is consistent with the Stage and Prop dialogs.  Also, it was not apparent that you can select specific dancers to be moved/which dancers were going to be arranged, leading to safety issues.

User Testing:  We emphasized the select tool to push users towards learning that specific dancers/props can be arranged.

Changing Project Name

Saving a Formation

Heuristic Evaluation:  There was no feedback that the formation had been saved successfully, so now a label slides in (animation).  It's green and has a checkmark, giving it a positive connotation.  It also disappears after 5 seconds, to de-clutter the toolbar, while giving the user enough time to read it.

Other options:

• This label can also be used for other feedback/indicators, after any major event.

Creating a New Formation

Deleting a Formation

Undo/Redo Functionalities

Renaming a formation

The first impression of each user tested was that double clicking on a formation listed in the formation panel would allow them to rename the formation. This is not permitted as we thought that it would allow users to misclick and click away from whatever their current formation is.

Moderate

Solution: Implement the double click as a way to rename the formation, in addition to the current implementation of allowing a click on the name at the top. We could also make it more obvious to the user that they could rename the formation through the current means.

Formation Selecting

When selecting the default arranging of dancers, the expected behaviour of the user is that they will be able to move all of the dancers at once as if they are selected, so they would essentially be moving the whole formation. This was not implemented.

Moderate

Solution: Implement selection such that an arrange with no one selected will select all.

Select Tool

Prompt to confirm select is not apparent to the user at first glance, as they will try to move the selected items without confirming the total selection.

Moderate

Solution: make the prompt more obvious by changing location to a more central location on the screen, for example the top left or top right. Or make the contrast greater, by changing the color with respect to the stage.

Select Tool

Having a multiple select box would be helpful. To maintain consistency with other programs like powerpoint, having a click and drag box such that you will be able to select multiple dancers at once without individually clicking them all does a lot for efficiency

Major

Solution: Implement a box with the selectable jquery class

More select Tool Issues

Select to arrange was unclear on first try, but on second try the user was able to figure out how to select in order to arrange only a couple of dancers, and not all of them.

Minor

Solution: link arrange and select together, allow the user to select some or all before prompting for a arranged formation, or move the select button to be clearer. Overall it would decrease the efficiency of the formations minimally by adding an extra prompt.

Rename Project/Formation

One user could not tell the difference between a project name and a formation name. Renaming the project name, which is under the Project Settings tab,
could be confused with changing the formation name.

Minor

Solution: make the abstraction of formation and project clearer, don’t make this setting editable in a tab connected to the stage formation edit.

Offstage

The area for offstage is a bit unclear, and there might not be enough room to hold more than 10 dancers in each area of the offstage.

Cosmetic

Solution: make an offstage “drawer” on each side, such that you can stick dancers in each drawer and hide them, accessing them only as needed.

Resize Ability

When selecting multiple dancers, you could also allow resize, as well as move, delete, and arrange

Minor

Solution: Another feature that is expected that we could implement.

Notes Box

Clicking on the text in the Notes box does not allow the user to edit the box, clicking anywhere else will prompt text.

Major

Solution: make the text as well as the whole box clickable, so the user can edit the text box.