Marvel Internet Group blog

At this stage of development, all the designs we had on paper were rough sketches and ideas in our heads. So it was now time for me to step in and create digital mock-ups that turned these ideas into a functional interface.

The first step was to create a simple template for JustRosters to make user interaction as easy as possible. I created the design using Photoshop, and then converted to a HTML template using my favourite scripting program, Notepad++. We kept the template very minimalist to maximise screen real estate for the major functionality, including the main roster interface.

We also decided to have all user ‘action’ forms displayed in a toolbar on the right side, which is shown at all times. The forms are added to the toolbar using the javascript library jQuery. We used the side action bar for a number reasons:

1. The user never has to navigate away from the page they are currently on to perform related actions.
2. The roster interface is never covered by a pop-up when a action needs to be made.

jQuery was used a lot throughout the interface for a number of different functions and effects, from adding the input forms to the toolbar, to styling the tables and forms. I use it because it is very easy to use and lightweight, and it achieved its functionality automagically without adding extra markup to the HTML.

The next step was to turn each of the sketches into functional pages, this is where we ran into our first major hurdle. The main page of the roster interface needs to display a calendar that shows the dates of the roster period along the top row, and the staff members of the roster listed down the left column. It sounds simple until you start testing with a 2 week roster featuring 50 staff…. in a small screen. We needed the grid to scroll but it was important to keep the top row (dates) and left row (staff) in view at all time. After about 4hours of Google searches we found no real solutions (but hundreds of people looking for one). After a lot of playing around with this, we got it working!!! When we get some time we will release the code snippeits.

From here on it was all smooth sailing. The rough sketches were transformed into an easy to use interface.

After 96hours working on the mock-ups (40hours spent on the roster view alone), they are finally complete. Now it is time for Paul to step in and code the guts of the application, turning it from a puppet to the real thing. I will have bigger rant about the roster view shortly