Web Based Portal Dashboard - the age old button vs link

Question

I'm very aware and in agreement with the buttons for actions and links for navigation practice but I have come stuck on this design.

It is an internal company portal, and this is the dashboard for Sponsorship. So this page basically shows you the six features of the Sponsorship section. Technically none of these are actions they all just link to a page of data which you can review or then perform actions on.

Questions

• Do you think this is an appropriate design (to use button styled links) for a Dashboard?

• If you disagree with the button-style navigation, how best should I go forward with making these links?

Answer 1

I wouldn't worry about this too much. "Buttons for actions and links for navigation" is a good guideline but not an unbreakable rule. In fact, based on your wireframe, I'm not sure I'd refer to those as "buttons" at all since they include a heading, description and, in the case of "Approve a Listing" and "Review New Sponsors", a counter of pending items.

One thing you might want to be careful of is the wording. Perhaps avoid labels that imply an immediate action will be performed. You might consider adding ellipses to the end of the headings as a clue that additional actions/information are needed before the action is performed (that is an established convention after all).

Answer 2

Why do you think the buttons:actions::link:navigation should not apply?

• Do you want a larger target area to aim the mouse for? If so, make it look like links (e.g., underline title text), but make the entire dashboard “tile” around the “link” sensitive to activation. It can “light up” on mouseover to tell the user they’re close enough to the link.

• Do you like the aesthetics of buttons better? If so, create a different design that is equally pleasing. For example, merely showing the tiles without rounded corners may be enough to “de-button-ize” them. Maybe try a paper or index card imagery to reinforce the metaphor that user is navigating to a different page. Be imaginative.

In converting the dashboard to links, you should drop the verbs from the labels. Being a link implies the user can view, review, download, edit, and more. For example, you can simply say "Sponsorship Statistics" rather than "View Reports: Reports and Statistics for Sponsorship." If you find you can't drop the verb without making it vague or confusing, then maybe it should be a button; add an ellipsis at the end of the caption if it navigates to a dialog exclusively for performing the stated action. For example "Add a Child..." sounds to me like an action that gets a button.

Answer 3

Unless your dashboard has animated drill downs, animated accordion or a drop down using which I can change the metrics/measurement unit of the report, I wouldn't expect user to bring the mouse anyway near the dashboard. First two can be handled with simple and appropriate icons like chevron, while last one can be handled by capturing the change event of drop down. I don't subscribe to thumb rules in UI designs, but normally I won't put any button or navigation link on my dashboard design. As much as possible, try to make your dashboard look static (though keep refreshing itself) without inviting any click or other event.