EasyHyperbar Navigation Control - A hyperbar, only easier (in Silverlight)

  • [アーティクル]

In this Tutorial

· Analysis of the usability of the typical Hyperbar Control

· Silverlight sample with source code for a better control (in my opinion)

There are two important traits of a navigation control: usability and looks.

Usability of the control can determine if a person will be using your application in the long term or even short term.

Looks determine if the users will even try using the control or not. Good looking control may be the difference between someone clicking on your web page or closing it.

An easy to use control:

· Is unobtrusive

· Is self-explainable

· Does not need special knowledge or skills to operate (e.g. “pixel hunting” skills)

Why the EasyHyperbar control?

The usual Hyperbars look cool, but generally lack the above 3 usability features:

· Unobtrusive – the typical Hyperbar control expands on both sides, which shifts the attention to those sides, even when people hover in the middle of the control (may be OK after long use, but can be irritating at first)

· Self-explainability – the typical Hyperbar control contains only icons. Although it looks better, icons don’t always clearly identify the item they are associated with and they may not be universally recognizable (while text in general is). Consider the icons for Blog and Source Code pages of a website: without text can you be sure that everyone will understand where the icons point to?

· Special knowledge/skills – The positions of the icons in a typical Hyperbar control shift as the mouse hovers over them. This is counter-intuitive for people that used to click on icons that never move.

The EasyHyperbar control addresses the above 3 issues (arguably compromising a little on “cools”):

· Does not expand on the sides, while still keeping “hyperbarish” look by enlarging controls next to the mouse

· Contains text below the icons and description above the icons

· The icons don’t shift on mouse over, making it easier to click on

Try it out:

See how it is built

Download source code

Comments