Teamwork 4.0 GUI and jQuery mbComponents
Lets take a look at the real world!
How do mbComponents work in the real world applications?
Teamwork is an example… an exhaustive example!
When we decided to develop Teamwork we were not even sure which was the best development environment to adopt; we knew that the application should have been web based (it was at the beginning of 2002) and we started developing it in asp.
We had no idea what making a software product means, we had no real experience about GUI usability or how dark the web developer jungle would be (and still is) with all the differences between browser’ behaviors, CSS interpretation, different events models.
The first interface model was thought flash based (actionScript + xml) but, fortunately, we suddenly changed idea; those kinds of interfaces can work just on simple and monothematic applications!
Finally we made the best choice!! A java application based on the Hibernate framework, integrated with Lucene; it’s cross platform, cross DB, …etc.
Everything goes on!
Before jQuery (4 or 5 years ago) we already had components like orderable table line to set order factors, droppable portlets to customize application pages, drop down tree menu, a tree visualizer, etc. Almost all that we have now… but developer with great pain and what a heavy code! That was when I started hating IE and it’s bizarre, unsupportable behaviors! (But this is another story.)
Lets talk about Now!
Teamwork is a rich, full featured, complex web based software for managing projects. At a certain point we had the feeling that this complexity was damaging the usability of the application! It wasn’t just a feel… it was the truth!
For example: once installed, Teamwork 3 presents you an empty page…!!! An Empty Page!!! It was almost impossible to start any project because you wouldn’t know how to do that (you had do give a look at ALL the video tutorials to start the complex work)! To store the first project you had to know everything about the security model in Teamwork just because nothing was preset, than you had to set an Area, than a resource… and nothing was explained directly!
Teamwork 4 …
So we start a hard work on usability.
First of all “the look&feel“:
- more affordable containers (mb)Containers
- icons that explain the functionality
- bigger font size and more explicit descriptions with tooltip (mb)Tooltip
- a ribbonbar that brings clearly which possible actions the users can perform (mb)Ribbonbar soonly!
- … and so on
We really beleave that “more is more”,
but that is true just if this “more” is easy to get!
So we start working on accessibility.
First of all, once the user logs in for the first time in Teamwork 4, the most configurations are preset so that she can start immediately her work; she’s introduced to each application’s functionality by a clear, well explained interface with few boxes containing grouped links; it’s really easy to start!
And It’s really easy to use too!
We transformed the homepage so that the most commons actions like inserting work logs or to-dos, accessing most used information, alerts, assignments and so on are just at one click distance. Than we introduce the possibility to personalize the homepage so that everyone can view immediately what he really needs.
The feel of the user interface is now something more than just a data entry form! It’s proactive, suggesting the user what is going on and trying to keep the information in a smart way, performing a massive use of ajax to store changes, modify views, manage lists, etc. that increase dramatically performance and gives a smooth approach to usability!
It’s quite unbelievable how just working on simplifying procedures and “smartifying” responses, transform a complex framework into an easy to use, affordable tool!
It also increases my enthusiasm on developing useful components for experiencing the web!
go to mbComponents: http://www.open-lab.com/mb.ideas/index.html