Detailed Design
Here I will take the requirements of the system and will develop them into a design
to be implemented.
Colour Scheme
The colours selected for the site intend to give it a 'natural' feel that reflects
the subject matter – namely Forrest Hills and the environment. As such, a series
of browns were used for page backgrounds and greens were used for menus. Black text
on the light brown background gives the best constrast, while white was used on
the dark green menus.
Once the site is implemented, it will be evaluated for compatibility with colour
blind users, by testing it with an online tool.
Website Layout and Structure
Recalling that the site may experience a wide variety of users with potentially
differing skills; it is important to ensure that the site is easy to navigate.
The pages feature a vertical menu down the left hand side of the page and the same
menu is in a horizontal format at the bottom of each page. On his website,
Neilson looks at the topic 'When Bad Design Becomes the Standard' in which he examines
several website design elements, which while actually bad design, have become de-facto
standards on websites. The element most applicable for the forrest Hills website
is the “Left-Justified Navigation Rail” which was first introduced by CNET in 1996.
Neilson states that there are 2 usability reasons why a right justified navigation
rail would be better:
-
“Fitts' Law dictates that shorter mouse movements are better...”
Therefore it would save time by placing the navigation rail next to the scroll bar,
as these are both frequently used items.
-
“Users always look at the content first when they encounter a new webpage.”
If the content was placed at the left of the window, users could read this before
naturally progressing to the navigation on the right.
However, Neilson concludes that although a navigation rail on the right might improve
a site's usability by 1%, it would cause problems for users because the rail would
not be where they expected.
The menus feature rollover effects which highlight as the mouse moves over them,
giving feedback on where the cursor is. Also, when a page is visited, its link in
the menu is kept highlighted; both of these features give the user important feedback,
a principle based on Neilson's Heuristics.
As a further aid to navigation, a 'breadcrumbs' trail is available at the top of
the page. These will be useful for users who may arrive deep down the navigation
structure. They also inform a user of where in the site they currently are.
Forms
The Forrest Hills website contains two main forms: one for searching the entitlements, the other a contact form. It also contains a small form to enable the users to search
the site.
Neilson suggests a number of guidelines which were taken into account in the design
of these forms:
-
Don't use the reset button.
Neilson's Heuristics suggest that it is important to allow users an 'emergency exit'
out of a situation. The 'reset' button on a form is a websites' way of providing
this function. However, users prefer to use the 'back' button to perform this action.
Not only is the 'reset' button defunct, it can also be dangerous:
- clicking the 'reset' button by accident will erase all the users' work.
- it creates unnecessary clutter on the form and requires the user to decide which
button to click next.
So the reset button should be removed, but the user still requires the ability to
undo or edit their actions.
In the case of text boxes, the text can simply be edited.
Radio buttons and drop down menus should have a default or “Select” state.
- Neilson also suggests that the first field in a form should receive keyboard focus
when the page loads. This allows the user to start typing immediately and saves
a click.
Implementation
The Forrest Hills website was implemented using ASP.NET and displays and functions
correctly in the 3 browsers it was tested in (Internet Explorer, Firefox and Safari).
The site is located at
http://duncanhalley.co.uk/forresthills
Any content or functionality that is not yet complete can be see at
http://duncanhalley.co.uk/forresthills/incomplete.aspx or by trying to use
an incomplete function on the site.