Dan Lewis James

Web application design tips & tricks

The great thing about designing web applications is that it is still a relatively new field of design, the constant shift of peoples lives from the desktop to the web should provide work for web application designers for years. When you look at the work of 280 North you realise it will not be long before pretty much everything can be designed and built to work beautifully in the browser. For all those new to the field of designing web apps, or just looking for some good tips and tricks to bear in mind, I have put together a list of what I have learnt over the last few years designing applications like Gazetme, Kwiqq Open and my new application design called Overture (still in development).

Is it a desktop app or web app. 280 slides by 280 North is really, really gorgeous

Make room for user added content

User generated content will always be different from what you plan for, there could be excessively long email addresses, crazy long names or personal descriptions you had mocked up to span over 4 lines going on as long a 4 paragraphs. If you are mocking up in Photoshop or Fireworks it is very difficult to know how different forms of user generated content will behave when added to the application. I have found it much easier to test any of these content areas by being able to add possible content directly into the code and playing around with it in a real world environment. This means, as has been a bit of a theme for me recently and will also feature heavily in this article, it is much much easier to design web apps straight in to the browser.

Even the best wont accommodate crazy email addresses. This shot of Highrise shows how they deal with long user content

Useful & instructive pre-existing content

This is the content that will appear when the user is new to the application. Content that describes how the application works, or suggests actions the user may like to perform to complete a profile, add a friend etc etc. When you first create an application there will be lots of places where there will be no content, firstly you must make sure that these places look good without any content, checking that you design holds if there is nothing in the box you have created and secondly provide users with adequate descriptions of the type of content that may be there once the user has interacted more with the application.

The first screen the user arrives at on the web app Gazetme provides a complete overview of the content that the user can add to build up their live CV. Then once within the application there are information icons the user can use to discover the exact functionality of each section, they are small enough so as not to get in the way of competent users.

37 Signals are masters of web applications with their designs and usability decisions generally (in my humble opinion) being nothing far from perfect. Other designers may not like the visual styles of their designs but in terms of usability when using their apps it is hard to see how you could improve on some of their processes. True to style they also provide decent new user content like this example from Backpack.

Keeping functionality simple

When designing a new feature or section, if you find that it is complicated to work through, and generally makes your head hurt, then it is probably too complicated for end users too and maybe unnecessary. Sometimes you might have a great conceptual idea of how you would like a feature to work but when you start to get it in to code you begin to realise how complicated the background processes are, this experience should act as a warning signal if the feature is complicated for you then it is probably going to end up being too complicated for the user. Try to detach yourself from your idea and decide is the feature you are designing is really necessary, if not then remove it.

Work alone or remotely

One thing I learnt from Jason Fried in this very good talk on web app development is that it ain’t good to work in the same room as others, and is generally a little unnecessary. Working with others in an office can prove more distracting than you may realise, with Skype and IM you will never be far away if you need a question answered or help with a design decision. The key to designing a web application is momentum once you begin a new section of the application there are only a few days or maybe weeks before the momentum will begin to wane, most of the important design decisions need to be made within that time period or the momentum will be lost. Working in an office with others can cause breaks in the momentum that would otherwise not have happened.

Finishing touches

Like any other web design it’s the finishing touches that really make the site stand out from the crowd. Setting a sound typographic bassline can really improve your design and make it easier to add interface elements in to a design without having to fiddle around with padding and margins. Adding in nice rounded corners to distinguish content areas, or the classic 1px drop shadow to give text better definition and also the odd drop shadow to separate one content area from another. All these can be added with CSS3 and need not slow down you application with heavy images.

Screen shot from my new web application project Overture. No background images are used in the design, all the final flourishes are CSS3.

Web applications are better and more appreciated by end users if they are faster. With CSS3 you can use a few lines of code to replace massive amounts of images for round corners or drop shadows, if the end users browser doesn’t support the styles you are using then you just have to make a decision as to whether it infringes on the end users experience. In my opinion if it is just a case of whether the user experiences round corners on buttons or a drop shadow on the content then it’s not worth the speed difference, given that you will be supporting 70% of other users.

Design in the browser

In the most recent application I designed, Photoshop was only used to make certain graphically rich interface elements, everything else was designed and built in the browser. This was the first application I designed in the browser and I hope in the future I get more clients that will allow me to continue with this method of work. It is faster, more accurate and easier to display results to clients in a real world environment.

There is a case for getting something on the page to see how it looks, live with it for a bit and work on it when you have had time to let the design sink in. Sometimes it’s difficult to put something on a page that you are not really happy with but just move beyond that add the HTML to the page and adjust the CSS when you have further ideas about how you would like it to look. It is good to have a general plan for certain interface elements but as long as the HTML is standardized it’s much faster and much easier.