capcloud

Brief

To enable administrator users to assign storage resources (physical disks) to organizational units.

First Steps

This is not a complex problem that has never been solved by anyone else before (though there are a few wrinkles that need to be taken care of). So I looked to the available design patterns to see what would work best.

The interface was already in place for selecting an organizational unit in order to configure it. So all I had to worry about was assigning disks to the currently selected organizational unit.

Initial Design

I thought that the way that Google Calendar allows you to add as many alerts as you want to an event could be adapted (copied?) for assigning disks to organizational units.



The thing that makes assigning disks different is that each disk belongs to a file server. So first you have to select a file server and then select the disks (any or all of them).

So I decided to go with something that worked a bit like Google Calendar’s alert-adding interface, but where each row could be in one of two modes—add/edit mode and view mode. The user would be able to click the row (or an explicit link) to edit a row in-place.

This screencast shows what I came up with (prototype created in Axure RP while trialling that application):

The Implementation

The implementation was quite similar to my design, except that the Save and Cancel buttons were directly below the file server drop-down, and did not move down when the disk radio buttons appeared.

The fonts and alignment were also a bit off but these are easily fixed. This screencast shows the implemented version.

Fixing Things

I understood that putting the Save and Cancel buttons below the row was a bit of an afterthought on my part (maybe a result of my initial design not having these buttons). The implementation compounded this problem.

I realized that it would make much more sense to put the buttons to the right of the other controls (thus providing a straight line for the user to follow from left to right to complete the sub-task).

I created a new wireframe and showed it to the developers (see the quick ‘n dirty screencasts below).

This will be implemented when time allows.

With Save and Cancel buttons

Without Save and Cancel buttons