Instructional design and programming strategies
Design strategies
We chose to call this site 'OptionKeys'. We believe this title
Provides a detailed outline of all the content covered in this site.
Helps you improve your own access to this site.
Provides design guidelines in a nutshell for quick access, together with links to more detailed information.
We tagged all graphic elements and described them appropriately.
We placed written transcripts next to all audio files.
We used a plain and simple style and defined technical terms in the glossary.
We provided activities which we believe to be accessible to all users.
You can access forms without having to navigate with a mouse. If you are not using a mouse you can get to any form element by pressing the 'alt' key and the underlined letter in that form elements label.
We formatted the pages on this website using CSS and only using tables for tabular data. At all times these tables are written to W3C standards and you are encouraged to experiment with your software to find the best way to negotiate tables.
For 'OptionKeys' we researched information available online and developed some conventions that were appropriate for our site.
We chose shapes, colours and proportions and ordered the information to enhance the invitation to access all information on the site. The horizontal layering of information from the top navigation bar down to the text page enables users to locate themselves in the site at all times.
The primary function of 'OptionKeys' is to be a quick-find, reference-cum-guide book. To that end we chose colours which are not distracting, intrusive, 'loud' or visually confusing. We want you to have a good experience, find the information you're looking for and value the site as a great resource.
We drew the colours from a small palette of subdued tones and a few discreetly used 'loud' colours that help describe the personality of the site. The 'OptionKeys' palette also works on a monochrome screen.
Colour can define a site's personality and that was the primary motivation for the choice of colour in 'OptionKeys'. However, as 'OptionKeys' has only four sections it was feasible to use colour as well as numbers and titles to delineate these sections.
As you become familiar with the site you will recognise where you are faster because of that section's colour or tone. If there were more than four sections it would be difficult to choose memorable colours that were sufficiently different for you to make an association with a section.
We set the 'OptionKeys' text in a sans serif font, as on the screen these fonts appear sharper than serif fonts. We also set the text to a fixed column width, using CSS, making it easier for the eye to travel from line to line. Some browsers do not support this feature of CSS2, notably Internet Explorer.
The font sizes and weights used for the levels of text follow a common convention for printed text, with a few adjustments to make it screen-friendly. For example:
We designed the layout of information on a simple grid allowing the user to navigate the site using a hierarchy of menus. The section menu sits at the top of the page and links down to the subsection menu to the left of the content area. The subsection menu links to the content via a list of content items beneath it.
The content items allow content to render in small chunks of information so that you need only scroll through a maximum of two screen pages.
The hierarchy of menus operates as a site map (the only exception is when you are in the example pages where there is little or no navigation). The intention is that you will always know where you are and how to get to where you want to go.
The site uses 'Skip navigation' links for the ease of those who have to navigate through the site using a keyboard or other non-mouse device. The idea is that the user can skip straight to the main content without having to tab through large amounts of navigation items if they wish.