IVAN SOTO

In the last couple of weeks I've been trying to get some inspiration for upcoming web projects I've been working on. Finding a simple and clean way to add tons of information into a Web app is not an easy task, so I've been doing a lot of prototyping and mockups.

I could be writing about thousands of elements but I will try to focus on a few for now: Remove things that we don't use that often. Tables that need to have a lot of information; and the use of icons: when and how.

Removing unnecessary elements

Some sites try to stay clean by removing unnecessary elements, or by fading things that are not that important.

A good example is removing the login box from the design when you are not logged in, something that was really common before (specially in forums) but it became a trend to have a dedicated login page and remove the login box from the menu bar. While this requires an extra click and page load, it gives the login box a proper place to be instead of trying to fit it into the navigation design.

Skype's website has a clean top bar, and pretty much all the stuff you need in the main navigation: Features, Get Skype (download), etc. And for the top bar, it's your account stuff, Buy Credits, Sign In and Join.

Now, on this next website they tried to make it cleaner, and while the website looks nice, I think they missed the point. You don't want to click the menu link to access the main menu, it just doesn't make sense.

At www.xhtmlproduction.com they decided to hide the main bar, so when you want to visit different sections you have
to pull down the menu by clicking and then click on the item. This website already has a clean layout,
I wonder why they thought that could be a good idea.

Tables

For me this could be one of the hardest things to design and put together. When you have tons of data, the first thing I think is using tables. They are handy, and when they are correctly styled and used, can achieve amazing results. But getting there is not easy as we tend to build an Excel table with buttons, not using any of the cool CSS features.

Before even starting with a table, ask yourself the following: 

• Do I need a table? Let's say you have to show this week's entries, which are usually around 5 to 10, then you don't have to build a table, just build a list and play around with the elements. You can end up with an amazing 3-lined list item, that is more intuitive and friendly to use.
• Am I listing or tabulating data? Again, if you want to list things, then you may not need a table.

While looking for ideas to implement in one of my apps I ran into tmbeta.dotnetwise.com. It's a pretty common layout: Top bar, secondary bar, tables, pagination, some cheesy gradients and rounded borders.

The layout looks busy, full of data that I bet it can be re-organized and I'm sure we don't even need all that data in one page.

DotNet wise Task Management app.

There are many things I would change here:

• View and delete icons in each row. Have a hover-over box maybe. 37 Signal's Basecamp did a really good job by having controls come up when you hover over the list item, but they are actually outside.
• Almost every code in the Number row starts with the same (DNW0000...). Why not hide part of it and just show the last characters? You can always show the rest when hovering the element.
• Dates can be shown in a more friendly way for sure: Time ago or even removing the year since you know you are looking at this year (you can show the year only when it changes).
• Add button seems to be big enough that it's an important part of this page, yet it's somewhat hidden so its not really intuitive.

Now, let's see a good approach:

Pulse has a lot of data here, but it looks nice and organized. You can expand things, and it has inline forms. Checkboxes show up only on the actual items, not the totals.

Pulseapp.com make a good use of row colors, separations, table headers and it fades totals so it makes the app easier to read. 

Using icons: when and how?

Another thing I've been looking at is the use of icons. Sometimes I see interfaces that use so many icons that it defeats the purpose. Let's not forget that an icon is a graphical representation of an idea or concept when used in an app.

By looking at the previous example of the DotNet wise Web app we can clearly tell that the "remove" icon is overused, and it's also an X symbol. It makes for sense (to me at least) to put a negative symbol for removing stuff, just like we use a plus sign when adding things. The X to me works more as a "Cancel" or "Stop" concept.

Plesk is known to have one of the most annoying to use interfaces, full of icons and trying to mimic an OS layout. I remember using Plesk 8 with an XP theme. I think Plesk 9 now has a Vista look.

We don't need an icon for each section that we have. Not to mention that some icons doesn't even make sense: Languages has a spell check icon, IP addresses has a PCI card, Notifications has a chat bubble, etc. 

Finding inspiration when building Web apps interfaces is hard. While we have a plethora of CSS gallery sites showing flashy and trendy sites, I find hard to find good Web apps galleries that show and compare UI layouts for organizing data and forms. If you have any source of inspiration on this matter, please drop a comment.

Further reading:

Realism in UI Design - http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

A day of user interface design - http://www.burning.me/2010/08/a-day-of-user-interface-design/

Showcase of Web Apps - http://www.webdesignerdepot.com/2010/02/showcase-of-great-web-app-interfaces/