Still working on a detailed functional design for a content management scheduling system. Having torn my hair out trying to find some pre-built components to barstardise I resorted to designing it all from scratch.

Often when designing a user interface one may turn to Powerpoint for wireframes, Visio for flow and logic diagrams or even HTML to mock up a simple prototype. I decided to shun all these options in favour of flash…

Initially it seemed like a fairly bad idea since things like drag & drop, frame control and scrolling windows are all a little complicated thanks to ActionScript 3.0’s attempts at being a proper programming language. Luckily I soon brought my Flash 5 skills into the 21st century as I juggled event listeners, mouse events and sophisticated function calls.

The tool basically allowed an editor to select spots on a page, then choose an item from a pool of content, schedule it and then edit or modify their settings as and when necessary. To start with I allowed the user to drag content directly from the pool onto the page. This was very usable, but tricky to do technically without heavy customisation on some JS frameworks such as MooTools or Scriptaculous. In the end I settled for a simple overlay system to let users select spots and content.

Within a day I had a reasonably complete interface (with a bit of smoke and mirrors) and I was able to review the design with stakeholders before moving onto the next iteration. The core look and feel as even overhauled twice before settling on a workable arrangement.

Once done I will add in an example since I think it’s useful to see what can be done in a day even by someone with limited experience with flash and actionscript (still managed to rack up nearly 500 lines of code somehow)l. Ideally in projects with experienced flash integrators, a design mock-up like this could be turned into the finished product thus saving valuable development time.

If I get a chance I will update with a list of tutorials for all the components I used to get the crucial bits and pieces in place.

Busy Busy Schedule

A good usable interface is the holy Grail of all good web applications. Sites like Google and Flickr amongst others have excellently designed sites with good use of the latest JS and AJAX technologies. For mere mortals the only option to achieve similar levels of usability is to use the various JS frameworks and toolkits such as Scriptaculous, MooTools or Dojo.

Going one step further it would be useful to make use of tried and tested components built using these frameworks for integration into the site. Examples of these include calendars, drop-down navigation and forms. This way the only task is to integrate the components with the back-end system and customize to meet all the requirements.

Today I was looking for a scheduling component. Basically a calendar but with the ability to have multiple instances for each module on a page and the ability to drag items onto the calendar and resize for various time periods. Unfortunately it doesn’t appear that anything even close exists. There are plenty of calendars but not any that would meet these requirements.

I am going to do some more investigation and see if something can be built. There seems to be a number of Flex resources that might be suitable and I will try and get them working. Integrating a Flex application could be much more tricky. It is going to be a long 3 weeks ahead of me.

UPDATE
I investigated all methods and given the simplicity of the requirements it would just take too long to integrate any of the components available. The Flex example (pictured) certainly holds the most hope for this sort of things. Lets hope some developers push forward the development and add in some additional features. Then it might be worth integrating it into some real systems.