Visual User Interface Framework: Implementing Page Structure

The Design Problem

You are designing a website or a multi-window system; in order to help simplify the user experience, the superficial design and methods of navigation must be consistent across all the different sections of the user interface.

The Solution

When you are dealing with a complex user interface it is essential to implement a visual framework, as the user should be able to apply knowledge of how the website or system appears and behaves from page to page or window to window.

Why choose a visual framework?

Consistent design is essential to the user experience; if superficial aspects of the design and/or methods of interaction change when the user arrives at a new page or window, they must learn new layouts and new representations for the same actions, which is needlessly time-consuming and cognitively burdensome.

Colors, fonts, layouts, and styles might seem like simple aspects of your design, but they all provide useful information to the user as they move through the different contents of a web or system design. A quick glance at the top of a webpage can be enough to determine where you are and the various navigation points on a site. However, if items are in different points across the pages of a website or windows in a system, the user is instantly thrown off; disorienting them and forcing them to relocate the user interface elements of current interest.

Furthermore, changes in the user interface arrest the user’s attention; if every new page greets the user with a new style, layout, etc their eyes will be drawn to these unnecessary superficial changes, rather than directing the user to the most meaningful part of the display (i.e. the contents). Therefore, a consistent visual framework directs the user’s attention and helps them filter out the rest of the user interface.

Aside from assisting the user, strong visual frameworks help designers establish a clear ‘look’, which helps separate your brand from all others.

Implementing Visual Frameworks

• Decide on the superficial aspects of your display. Which colors/fonts/writing style will you use? Which user interface design patterns will be present across all pages/windows? Where will your navigation options go? Will you use borders, margins or other simple design elements to separate content?
• Include ‘You Are Here’ signposts, such as titles, company logos, tabs, and navigation bars.
• Place all of the elements in their ideal location (i.e. according to convention and findings from usability tests) across all the different pages.
• The stylistic elements of the design should now be in place and the available space for contents now apparent. Ensure the contents appear prominent on each page; if they do not then adjustments need to be made to make them stand out from the rest of the display.

Potential Problems

If there is an unhelpful element in your design a consistent visual framework will multiply the problem by however many pages or windows there are in the user interface. For example, if you have chosen colors that clash in the display, they will cause problems for the user no matter what page or window they are on. Therefore, the consistent bad design could be just as problematic as an inconsistent user interface. For this reason, you must ensure the superficial design supports the user experience overall, as well as focussing on the individual elements that comprise the user experience.

About Author

Manoj kumar