In the world of project management, time tracking, invoicing and other productivity tools, the ability to save time is probably the most important feature. You don't want to be spending hours working your way around some software which is supposed to be helping your business make more money.

Therefore to achieve that the software must have a great user interface which lets you do what need to do (e.g. creating a project and managing a team) intuitively without you even really thinking about it.

A good user interface usually constitutes the following:

• Positioning of elements in places the user expects them
• Good use of color coding
• Speed and fast page loads
• Activity indicators
• Help and tool tips

Lets look at some of those in more detail:

Positioning of Elements

Web designers and programmers (including myself) have often tried to be clever when designing the information architecture (where things go) in web pages. We often fall down the trap of trying to be too creative and thinking 'lets try something totally different' so we design things in such a way that might look cool, but in reality what happens is the user gets lost and has to re-learn how to work their way around your application or website.

There is a good reason why search boxes are often in the top right, and why navigation is tabbed, and why buttons often look the same. It's because the user expects them to be like that.

Users will spend a lot of their time using a Mac or PC and will expect the search to be in the top right with a little magnifying glass, and will expect a button to look a certain shape and change color when they hover over it. Because of these expectations in order to be a good UX designer you need to just go 'with the grain' and do what is expected. This will lead to happy users, and hopefully paying customers.

Color Coding

It's important to use color in your interface. Colors send signals to the user sub-consciously, so therefore you can make use of this with things like buttons and popups.

For example, a Submit or Signup button works well in green because green means "Go" and feels safe. If it was red then users would hesitate before clicking on it because they would feel like they might be deleting something. Orange also tends to work well for a Signup button. A good example of a big, clear, green signup button is on InDinero.

Having a rollover state is good too, and this can be done by either fading the button with opacity or by setting a different rollover color (e.g. a lighter shade or perhaps grey). This indicates to the user that they are over the button and will feel comfortable clicking it. The other option for showing a hover state is to reverse the gradient which emulates the button being pushed in, like on Halogy for example.

If you want to highlight something on a page, for example an important notice then a light yellow background can really make something stand out and draw your users attention. Wufoo make great use of color in their user interface.

Speed!

You need speed to save time! Therefore if your application takes 5 seconds every time someone clicks a button to load a page then that is BAD! If I want to set up a new project then I want to get it all set up within about 10 seconds. If half that time is spent loading the page then I will not bother using that application.

When I built Project Bubble I was thinking about this from day one. For me being able to create a project and add to-dos straight away was an absolutely essential feature for the app. Being a paper and pen guy I had to have something that was as quick (if not quicker) than just getting out my notepad and writing down my to-dos, so this was all taken in to account when designing the UI for Project Bubble.

AJAX page loading, using sprites for icons and images, compressed Javascript files, GZIP encoding of PHP scripts, normalized database and a really solid and fast server provided by a reputable company were all important speed factors when I built Project Bubble. I suggest you do the same.

Activity Indicators.

If you are using AJAX to load pages then you must utilize loading GIFs or your users will not know anything has happened. It's important for your users to see that something is happening and they will be patient as long as they can see a loading image.

I made a transparent loading GIF for this exact purpose, which you can all download if you want. There are others I use as well on Project Bubble such as when changing the status between open and closed projects.

Help and Tool Tips

When guiding your user through the application for the first time you need to let them know what everything does. No matter how well you designed your app there are bound to be things that users just don't understand. I use qTip for pretty much every field that the user comes across in Project Bubble because I want them to know what it does without having loads of text cluttering up the interface.

I also use a jQuery Cookie script to hide welcome messages so that the user doesn't have to see them each time they log in. This means that the help is there if they want it, but otherwise they can just hide it and it will store a cookie. That way you get a clean user interface, but the help is there if they need it.

I'm also not a fan of having massive Help sections with reams and reams of text that people have to read through. Although it's probably a good idea to archive this help somewhere using an app like Kroud (which enables crowd sourced help sections), I still feel that you really need to guide your user there and then as they use your app. Your user will probably be making a decision in their mind about whether they like your app or website in the first 20 minutes of them using it, so if they have to read through massive help sections after 5 minutes then that will likely decrease your conversion rate.

To Summarize

To summarize, building a really easy to use and FAST user interface is absolutely critical to a successful modern web application in my opinion. It will not only keep your users happy but will lead to sales because people will be coming from other apps and websites that don't have a very good user experience, so yours will be an utter delight!

There are some great articles on this, but a couple of good resources on IA and Usability are:

• http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
• http://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/