MPV site
WWW-aiheista aineistoa

Matti Vuori

Element of good web page layout and visual style

This small page lists elements of good design for web pages, their layouts and visual design. The list can be used in training and in evaluation of sites and layout prototypes. This list was developed with the goal of developing some tools for layout evaluation - you should always use traditional usability tools for professional user interface evaluation and testing.

Flow

• From top left down
• Directly to the most important message
• To all regions, all items and elements
• To the next step(s), how to continue (e.g. menu)

Structure

• Different elements and their function is clear
• Elements with different function are clearly separated from others (but without distrupting flow)

Form matches function

• The style tells the function and application of the site
• User interface is primarily developed for carrying out the users' tasks, not for artistic expression
• Layout style is familiar
• Layout matches the user's expectations
• Different style is used for different concepts: information system are done differently than games

Prioritization

• It is clear, what parts of the page are most important: what parts contain the content this page is created to communicate
• It is clear what is copy and what are standard page elements (like navigation aids or logo)
• Content is in the main role
• Levels in content are clearly recognizable: main elements and sub items
• Use of hierarchies

Navigation

• The current context in the page hierarchy and in the task
• The role of the current page
• How to move back, how to continue
• What are the choices

Economy

• Just a necessary amount of expression is used to get the point through
• Minimum number of fonts
• Just the right colors

Desirability

• The visual style matches the preferences of the target audience
• Style speaks the language of the culture
• Professionalism of execution
• Use of traditional design principles: color, white space, typography

Performance

• Speed of loading
• Response time of all tasks
• Speed with low speed computers (worst case for the target audience)

Accessibility

• Usability for people with disabilities
• Usability with no graphics
• Reliance on plugins
• Usability with all necessary computer systems; mobile small devices included

Usability of UI elements

• Obviousness of what the elements do
• Consistency with all pages, with other common systems
• Links perceived as links