Toolbar Features - II

Accessibility: whether anchored or hidden, a toolbar should be instantly accessible without scrolling regardless of the size or the resolution of the screen. The screenshot below shows how the scrolling occurs in between the top and bottom toolbars which are visible and accessible at all times, and thus enhancing usability. If a user chooses to hide the toolbars, then the top and bottom areas of the screen will be “hot” areas. Upon hovering over a hot area, the corresponding toolbar appears without having to scroll, in which case, the toolbar is instantly accessible even though it is not visible because the user chose to hide it.

If scrolling is required, it occurs in between the top and bottom toolbars making them always visible, and if not visible because the user chose to hide them, then they will be accessible by simply hovering over their respective hot area at the top or the bottom.

Toolbar Features - I

Combining some of the best practices found in all worlds (i.e., desktops, mobile devices, appliances, games, and the web), a toolbar should include some of the following common main features:

􀂃

Draggable.

􀂃

Sizeable.

􀂃

Visual distinction of primary versus secondary functions.

􀂃

Special effects on buttons for all states including enabled, disabled, hovered, clicked, and selected.

􀂃

Selection of the functions to be included and those to be excluded in the toolbar.

􀂃

Selection of the order in which functions ought to appear in the toolbar.

􀂃

Multi-functional and context-driven whenever applicable.

􀂃

Remembrance through cookies and/or login of the display mode, location, size, selection of functions, order of functions, etc.

􀂃

Visibility: anchored (displayed at all times), or hidden (displayed upon hovering).

Bottom Toolbar

A webpage could include either a dynamic content such as a record in a database or static content such as the description of a product shown in text, graphics, illustrations, pictures, audios, or videos.

After completing a form of a dynamic webpage, a user might want to execute functions that are related to dynamic content such as saving, submitting, clearing, resetting, cancelling, adding, or deleting.

Similarly, after reading a static webpage, a visitor might want to execute functions that are related to static content such as referring, sharing, tagging, reviewing, noting, or bookmarking the webpage.

Thus, it makes sense for such functions to be grouped together and placed in a bottom toolbar below the dynamic or static content. The bottom toolbar must be intelligent enough to present the appropriate functions that correspond to the type of content. Thus, the bottom toolbar must be multi-functional and context-driven.

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.

Functional Architecture -II

Considering the number of functions, their features, and their actions, it is easy to see how things can get very complicated resulting into messy, disorganized, unfriendly, and unusable websites. The fundamental principle is to abolish the practice of designing websites based on a page-centric approach introduced by artists and technicians that resulted in chaotic mazes. Instead, we should borrow some discipline and best-practices found in desktop and enterprise applications developed by trained software engineers.

Functional architecture attempts to take a holistic approach that covers the entire website rather than being bogged down by the needs of a particular webpage. A good functional architecture starts by asking what functions are needed, how to group them together based on common properties, where to place them, and how to invoke them.

Desktop and enterprise applications have certain minimum industry standards, some best-practices, and certain software engineering disciplines that required a holistic architecture. This led to the creation of toolbars which offered consistency throughout a particular application, and throughout different applications. For example, the “Save” button in Microsoft Word stays in the same exact location throughout the entire product. Furthermore, the “Save” button, in almost all desktop or enterprise applications, is placed in the same spot. Such consistency increases usability within an application and across applications.

Websites on the other hand have been often created by artists who became technicians who fall short of being disciplined engineers. This led to the creation of websites which are page centric instead of being holistic. Those technicians have been designing websites one page at a time. Buttons appear anywhere. Inconsistency is everywhere – within a website and across websites. The lack of discipline in the entire websphere is mind-boggling. Mind you, other industries such as the auto industry or the electronics industry have adopted certain standards. Similarly, software in general, and the web in particular, should be subject to universal standards for the purpose of increasing usability and enhancing user experience.

Functional Architecture -I

Most websites are still nothing more than online brochures. In the future, websites will become web applications that include the following basic and common functions:

Every function has a set of features and a set of actions. For example, the reviewing function includes features such as rich text formatting, polling, filtering, browsing through reviews using a carousel, etc. Examples of actions in a function would be saving, submitting, cancelling, clearing, resetting, adding, deleting, etc. Furthermore, there are certain authoring actions that are related to objects which could be a block of text, graphics, illustrations, pictures, etc. Examples of authoring actions are cutting, copying, pasting, dragging, dropping, sizing, expanding, collapsing, flipping, panning, rotating, zooming, and highlighting.

Frequency

The frequency by which content is refreshed determines the retention rate of regular visitors. Publishers will have difficulty in maintaining such instant and continuous gratification. That is another reason why it is necessary for publishers to encourage collaboration and corroboration in order to satisfy a huge appetite for information collection and knowledge consumption