Good content is sometimes not enough, the users must reach it so they can see it's good!

Collapsible panels vs. Tabs

Posted: May 18th, 2009 | Author: | Filed under: Patterns, VS | Tags: , , | No Comments »

Both of these patterns are used for the same thing: squeezing a lot of content into a limited area of a (web) page. Although they can save a lot of space, the content you insert using them is limited to an amount by the size of the area you’re filling. Which is better? The one which suits your needs, let’s take them one by one:

TABS:

Tabs are one of the patterns known by about everyone. Designed well, they don’t make any problems to the user. The first use of tabs (I think) was the paper folders filing systems used in cabinets.

yui_tabs

Advantages:
- very familiar to users
- easy to use
- the height of the tabs area can be unlimited

yahoo_home

Disadvantages:
- tabs don’t work with long tab names
- they don’t do well in tight spaces either
- 2 tab bars is not an option so you are limited to a relatively small number of tabs

COLLAPSIBLE PANELS:

collapsible_dojo

A little tricky to use for beginner users, but still quite intuitive and sort of familiar (used in desktop applications and operating systems). Make sure they have a “collapsible hint” like “+/-” or a down arrow like this:

vista_collapse

Advantages:
- work well long names (as long as the width of the area)
- you can open two at the same time (if they are build that way and you afford the space)
- work well in tight spaces

adobe_collapse

Disadvantages:
- height consuming
- less obvious than tabs
- they look silly if used on full width
- it’s easier to mess their design and get a usability fail


Links vs. buttons

Posted: April 26th, 2009 | Author: | Filed under: Good practices, VS | Tags: , , , | 3 Comments »

When dealing with webpages, some usability experts say we should use links when the user is gonna get on a different page and buttons when the user makes an action.

Link to another page »   vs.  

I don’t really care. I don’t care because users don’t care.

Let’s get things a little further, what’s a button? Does it have to have borders? Different color?

Is a icon followed by a link really a link or a button? I see those things like buttons, others see it like “fancy links” or “descriptive links” or “visual links”.

One thing i agree with, though: forms should have “hard to miss” primary action button, you cannot put a link there mainly because it will not be a “primary action”, there are other links on a page so the weight of a “submit link” won’t be so different.