Top Toolbar

A website typically has some frequently used functions which are independent of the content of the current webpage. Examples of independent functions are registering, logging, searching, setting, etc. Thus, those independent functions are applicable across all webpages of a website. Such independence bonds those types of functions together in a group placed in the same location throughout the entire website – in a top toolbar. Hence, the main purpose of a top toolbar is to easily, instantly, and consistently access independent functions.

In addition, a top toolbar may also include helpful shortcuts related to certain functions or webpages that the owners of a website would like to encourage or promote to their visitors. Examples would be sending a message, chatting with a customer support representative, calling a sales representative, review the cart, etc.

Independent functions are primary, while shortcuts are secondary. As a result, their respective visual appearance should reflect their importance status. Finally, a top toolbar may include a logo of the company which reinforces the brand as shown in the example below. The logo should be a hyperlink to the webpage that describes the company.

Due to their independence from the current webpage, independent functions should be presented in pop-up windows as shown below. For instance, while reading a webpage, a visitor may decide to register. The action of registering should not cause the loss of the current webpage. Reading the webpage is indeed the main action, while registering is a temporary interruption because once the registration is completed, the natural course of event is to continue reading the current webpage. Same principle applies to other functions such as logging, searching, and setting. While many advocate against any pop-up, this is a good example where pop-ups are not just necessary but desirable in order to increase usability and enhance user experience.

A pop-up window is appropriate for functions such as registering, logging, searching, and setting because once the function is completed, the current webpage would be readily available without having to click on the back button.