There are many factors to consider in the design of a web-site or web application. Some of these are related to the visual look and feel of the pages - graphics, colours, fonts etc. To get these right you need some knowledge of graphic design and an eye for current design trends. However, a good web design is more than a visually appealing design; the key is how the design helps or hinders the users interactions with the site. A visually stunning design can be very difficult to use while a very plain design can often make things very easy for the user. This chapter examines the problem of building usable web designs.
Principles of Usability
A web application is an interactive experience. Even if the user is only consuming content on a site (as opposed to filling out forms and carrying out activities) they are interacting with the site to find the content they want. Menus, icons, links and even simple text and images are all interactive elements of the page and the design needs to take their usability into account
So what is usability? If a web site is there to do a job, then a usable website is one that makes it easy for the target user to do that job. This can range from simply making sure that text on a site is readable (fonts, colours, backgrounds) to having the right menu structure and a page design that makes the content and purpose of the website clear.
The visual design of a web site is a major part of the overall design and presentation of a web development project. Organisations want a design that is distinctive and appealing, one that fits with their overall branding. It is important to make sure that purely visual design considerations don't over-ride the usability design of the site.
Consistent design on all of the pages of the site helps the user to understand that the site is a whole system and they are navigating around it. If the menu layout changes on different pages or the site design is suddenly quite different, they may conclude they have entered a different site. Consistency is also important between sites - users have certain expectations on how a website will look and behave from their experience with other websites. If you are going to violate these expectations with odd graphical layouts, then you need to be careful that your users are not confused.
The use of graphics in a site design is important and can make the difference between a very plain design and an appealing one. However, the graphics need to support the message and purpose of the site rather than conflicting with them or confusing the user. An example would be a full-page graphic on the home page of a site that obscures the links the user needs to find the content they are after.
The ability to place images in the background of a web page is quite appealing to the novice designer who is new to CSS. Overlaying a recipe on an image of the dish can look cool but it is very easy to end up with an un-readable page. Avoid overlaying text on a busy image background. A similar issue can arise by choosing foreground and background colours that are close together. Generally, the designer needs to ensure that there is sufficient contrast between the text and the background, whether that is a plain colour or an image.
Meeting User Expectations
A user comes to your website with a set of expectations built up over their entire web browsing experience. This will range from simple things like understanding what a link is to the expectation that there will be a search box or a Contact Us page on your site. They will also have expectations relating to the kind of website they are visiting; on a shopping site they will want to see products, prices and a shopping cart; on a news site they want the latest stories to be obvious.
In the early days of the web, links were always coloured blue and turned a darker purple colour if you had visited them. This is a useful cue to the user that a link goes to a page they have seen, even if the text of the link is different. Using CSS it is possible to change the colour of links and to make visited links be just like new links. However, this removes this information from the user interface and so may violate the users expectations. In many cases you don't want to re-colour your links
- for example in your main menu it would look odd to have the menu entries changing colour. However, there is an argument that within the body of the text in your pages, you should maintain this new/visited distinction.
Again on the topic of links, it is common to make page elements other than regular links clickable in a page, either as links or as triggers for actions. One problem with some designs is that these links don't look anything like links to the user and they don't then know that they can click on them. It is common to see designs where users click on all sorts of graphics or text to see if they do what they want. The designer must make it clear what is a link and what is not, if not using the regular conventions, then by establishing some internally consistent convention within the site. If you use graphic elements as buttons instead of the default button widget, then it needs to be clear that it is a button.
While we can read as much as possible about usability design, it is never possible to anticipate all of the issues that will arise when real users try to use our websites. For this reason, testing of websites with target users is an important part of the design and development process. A usability test is a simple task based test run with a group of users taken from the target audience for a new site.
It is possible to run a usability test even before the site has been implemented by using paper mock-ups of the pages that you propose using. However, it is more usual to run a test once a functional version of the site is available.
Tests are task-focussed. A group of users is recruited and given some information about the site that they will be testing. Generally it will be something they might have used in real life. They are then given one or more scenarios that they are asked to complete. For example, on a shop website they might be asked to find a particular product or to choose a product that meets certain requirements. Once they have been given the task, they are then observed as they try to complete it. They will be asked to comment on what they are doing or trying to do as they work through the task. These comments are recorded along with an image of the screen, so that they can be analysed later.
Copyright © 2015, Steve Cassidy, Macquarie University
\ Python Web Programming by Steve Cassidy is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.