Top 10 Tips for Kick Awesome Web Application User Interface Design

by Jonathan Longnecker

We’ve done our fair share of web app designs here, but often don’t get to share them for NDA reasons or the simple fact that the developers are still working on them somewhere! No worries, fair reader. For we shall approach these diplomatically as to protect the innocent. Behold, the top 10 list of yore!

1. Text Text Text

Web apps are huge, complicated beasts, even if you try to keep them simple. There are dashboards and login pages and edit profile pages and who knows what else. So do me a favor and keep everything text. Navigation, headers, everything. Because I guarantee you the developers are going to have to setup more pages once you’re done and they shouldn’t have to jump in photoshop to change your cool looking buttons (note, see this post about accessible, good looking buttons) or re-do the entire navigation.

2. Leave the Images at the Door

Did I mention to keep everything text? Even your images? What the heck am I talking about? CSS background images, baby. Look, anything that is part of the design of the page should be a background image. The logo, the icons everything. It’s much easier to change out later and adjust the size as necessary. Plus, you’re adding another layer of accessibility for people who use screen readers or mobile devices that don’t support images at all. Just use an overflow:hidden and text-indent:-1000px to hide the text and let the background image show through.

3. Javascript Effects

With the explosion of javascript libraries, it’s easier than ever for a designer to make our visions reality. But, as Spiderman’s Uncle Ben says, “With great power comes great responsibility.” Don’t add animations unless they’re necessary and intuitive. “It’s really neat” is not a good reason. And don’t let your clients talk you into just because they like the animation either. Remember Flash intros? Yeah they thought that was a good idea, too. Make it useful, people!

4. Javascript Libraries

I’m not going to push any one library (jQuery, cough cough), but keep in mind that your developers may prefer one over the other. Make sure you know beforehand. For example, a project I worked on recently was done in Rails and they say Prototype fits best with it. So I had a bunch of stuff already done in jQuery and they had a bunch of stuff done in Prototype. Oh crap! Thankfully, you can run jQuery in no conflict mode, but I got lucky.

5. Make it Easy on the Developers

I think all of the above kind of culminates in a mindset that says, “How can I build this in a way that is easy for the developers to take my layouts and expand them to make an entire application?” Keeping everything text, making button creation easy, providing CSS styles for common elements like lists, inputs and headers all make this happen. Even go the extra mile. The last project I did had an area that would be customized for each client they signed up. So I grouped all the CSS styles for that into one area so they won’t have to hunt through a massive file each time. Your code has to be as modular as possible.

6. You’re Not Always Right

Yes, we’re kick-awesome designers and UI guys, but we don’t always get it right. The thing I love about what we do can also hinder us. We deal with so many completely different industries that it’s hard to grasp everything on the first go around. Don’t be afraid to rethink what you’ve done. Remember, design is problem solving. If you didn’t solve the problem you didn’t design it well enough in the first place.

If it doesn’t make sense to you then it probably won’t make sense to the user.”

7. The Client Isn’t Always Right

On the flip side, don’t be afraid to question your client’s pre-conceived ideas about how something should work. You may come up with a much more elegant and intuitive solution that makes everyone excited. You have the advantage of having an unbiased, outsider’s view of things. If it doesn’t make sense to you, it probably won’t make sense to the user (this goes for a lot of things, not just web app design).

8. Liquid Layout

This may not apply in every circumstance, but I think it’s best to design a web app with scalability in mind. If you have a sidebar it’s ok to keep it a fixed width, but your main content column should grow and shrink with the browser. If someone is using an application, they should be able to choose how wide or short they want the window to be (to a certain point!).

9. Don’t Be Afraid of Tables!

Yeah I know, I can hear the screams of horror right now. Tables suck, man! But hey, if you’re creating tabular data then it’s ok. It’s even preferable. And with CSS you can make them nice and pretty. Don’t use tables for layout, but if you’re creating an app with data that will be in rows and columns, brush the dust off those tables and see what they can do.

10. Interaction Feedback

That good old :hover tag can be a great asset to let your user know what’s going on. Table row hovers are a great indicator. Same for navigation, buttons and icons. If you do background color changes, make sure there’s plenty of padding around them so it’s easy to hit the link. Or if you’ve got icons with no text explaining them, use something like UniTip to have a description pop up. Feedback like this may seem simple, but I think it has a profound effect in allowing the user to feel comfortable and have a better idea of what’s going on. It helps enforce the idea that the app is to be used, not just looked at.

So there you go, your top 10 list for kick awesome web app design. Go forth and make mad crazy awesome, easy to use, well built web app designs.