Web design usability

In web design Usability is one of the most important considerations for a website, yet it is often overlooked when the focus is placed on other issues, such as a state of the art design or the requirements for effective search engine optimisation.

Usability is about putting the needs of the user first. It is measured by the quality of a user’s experience on a website - how simple can the site be used, from navigating around, knowing where you are and where to go next, understanding the content and what to do, plus if it’s an e-commerce site, how easy is the checkout process to understand and complete.

Planning and designing a website needs to achieve a balance between all of its potentially conflicting requirements, from being attractive and inviting to look at, to making the content encourage repeat usage, to having a high usability rating and to enable search engines to rank it well. There may need to be a trade-off between some of these factors, but ultimately the balance needs to be achieved so that the site performs its main objective as best as possible – which is usually to sell!

How to improve the usability of your website

If you already have a site which isn’t working as well as you would like, you may need to review the overall user experience to understand why, such as:
 

Look at your traffic statistics to see what clues can be found, such as with page usage and departure points Compare your website with competitors in your market and score each site’s performance across a range of key factors Conduct user surveys, which can range from online analysis tools to more in-depth focus groups.

How EPNET web designers can help

Having worked with many different websites across various market sectors, we can help by managing the design process of your website, including the ‘requirements elicitation’, which helps to identify your user expectations so that the resulting website will achieve them as efficiently as possible.
 

We will work with you to agree the main objectives of your website and how to meet the needs of your users We work with our website designers to produce graphical diagrams or descriptive case studies to visualize the site We can prepare navigational flowcharts, sample site maps or diagrams to simplify the e-commerce processes as simply as possible We can identify and implement the best methods of undertaking user reviews or analysis of your website to highlight potential problem areas – and then take action to resolve them We will also add the element of common sense to your website design, using an external customer perspective which can sometimes get overlooked in the desire to achieve an award-winning website!

Much has been said about the design process of websites, such as establishing the proper mood or "feel" to create user interest or even excitement with the site. This is a very important concern, but ultimately users tend to be far more satisfied and stay with websites that are designed for their use in mind (see Tedeschi, 1999). Considering this, three core principles concerning interface design are presented: 1) Keep the interface simple - To quote Mies van der Rohe, "less is more." Organize the interface by reducing un-needed visual elements as much as possible. That is, remove all unnecessary visual "noise." This will make the important objects that are there stand out even more. Moreover, as Edward Tufte stated, "it is not how much space there is, but rather how it is used. It is not how much information there is, but rather how effectively it is organized" (Tufte, 1990, p. 50). The use of open space is generally more effective in organizing and grouping information than using imposed, artificial structures such as visually nested frames or bars. It is also more aesthetically pleasing. In fact, we found empirical support for the notion that the proper use of open space can increase satisfaction with a website (Bernard, Chaparro, & Thomasson, 2000). 2) Make action-objects visible - According to Donald Norman, a design should a) make it easy to determine what actions are possible at any moment, b) make things visible, including the conceptual model of the system, the alternative actions, and the results of actions, and c) make it easy to evaluate the current state of the system. On a web interface, one of the chief mechanisms to do this is the proper use of perceived affordances (Norman, 1988). An affordance refers to the "properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used" (p. 9). Affordance provides us with clues as to the operations of things. More importantly for interfaces, however, are the perceived affordances which provide visual feedback that advertise affordances. For example, a link button may be perceived to afford clicking because of its '3-D' or 'raised' appearance. Consequently, it is often helpful to give link buttons the physical appearance of a button, or any object that affords clicking, in order for them to be seen as a button to be clicked (Norman, 1988). Thus, it is important to make navigation buttons look like they should be clicked as well as follow the convention of underlining links when they are text-based links. Conversely, non-navigation objects should not look like they could be clicked in order not to 'trick' the user into thinking they are links. Generally, buttons serve as primary object for initiating actions, such as submitting or confirming information. Buttons also can act as the primary link for movement to other web pages, usually within the same website. When this occurs, text-based links often serve as a less important, secondary or supplemental link for the buttons. Normally, however, text-based links are the primary link to other internal web pages. Moreover, physical appearance of objects such as icons can significantly affect navigational performance. For example, Rogers (1987) found that icons with abstract but simple symbols that represented concrete objects resulted in the fewest number of errors and requests for help. In addition, Byrne (1993) found that large and simple icons outperformed complex ones by a significant margin. Byrne suggests that icons need to be simple, large, and easy to discriminate in order to be effective. Complex icons tend to clutter the screen with unnecessary information. Moreover, Norman (1985) suggests that icons are best used to represent graphic tools and objects. Verbal labels, such as "to save" are best for formal commands (for a checklist on designing effective icons, see Horton, 1997). 3) Balance and unify the interface - Balance and unity has always been a key component in good design. Humans on a preconscious level seek structure in the things they see. If there is no intentional structure, we will impose our own. Seeking the appropriate balance among things, as well as unifying those things that are related will generate structures that are not only pleasing to the eye, but will make the interface more understandable (see Mullet & Sano, 1995, for an excellent discussion on design and visual interfaces). Empirical studies have supported this claim by finding that the position within a plane (as well as size and contrast) to be one of the most perceptually important variables in visual search tasks (Cleveland, 1985). One of the fundamental concepts of balance is the notion of the Golden Section. The Golden Section is a ratio of a rectangle in which the smaller side to the larger is the same as that of the larger to the sum of both -which is a ratio of approximately 0.618 to 1.000 or a standard 8.5 x 11 page. Examples of the Golden Section are almost ubiquitous in art as well as in nature (from the Parthenon to a nautilus shell). A web page that structures its graphical layout according to this ratio will look more appealing and will have a greater impact than other ratios, such as a ratio of 1 to 1. Also, when placing several objects on a web page, one should take into account the "visual mass" of these objects (its size and presence). For example, ideally the placement of objects should be positioned in the same way as you would balance solid objects on a fulcrum. That is, a larger object should be placed closer to the center of the screen to offset the smaller object(s). This will create an equilibrium between the objects, and will be more appealing.

If you would like to review or revise the usability of your website, contact us now for more information and find out how we can add value to your website development.