Design
Navigation Structure
Linear Structure
A linear structure only allows user to navigate in two directions, like a line:
Hierarchical Structure
A hierarchical structure allows users to navigate the website from top to bottom, like a hierarchy:
Multi-Level Structure
A multi-level structure works similar to a hierarchical structure, but users can navigate back up several levels with one click.
The SQA will always use a shaded background to show the pages that are part of the horizontal navigation bar, which are at the top of each page in the site.
The home page is usually included in the navigation bar as well.
Wireframes
A wireframe is a design of each page within the website that identifies the intended layout and shows the horizontal and vertical position of:
Navigation bars
Text elements
Media elements (graphics, audio, video, animation)
Interactive elements
Form inputs
Hyperlinks and navigation section
The parts of this wireframe that look like large envelopes are used to signify images, audio files or videos.
The horizontal lines symbolise text areas. The parts shown in orange/red signify the need for a link.
Sometimes the text areas may include a summary of the text to be included rather than the horizontal lines.
Sometimes wireframes may also include annotations that specify:
background colour
text font
text size
text alignment
text colour
the size of any images e.g 150 x 200 pixels
Multimedia players may also be shown on a wireframe with a play button to indicate where the controls for audio and video should appear.
There are variations in the way that different elements are represented but the key points remain the same.
Low-Fidelity Prototypes
Low fidelity prototypes can be computer generated (with limited or no user interaction) or paper based printouts or sketches.
Low fidelity prototypes are quick to create and help with the early development of alternative designs, which help provoke innovation and improvement.
By using these prototypes, users may feel more comfortable suggesting changes to the design or functionality.
By doing a walkthrough of the prototype, missing or orphan links can be found and these errors can be rectified before the implementation stage begins.