Analysis

Penny High School wants to develop a new website to advertise it’s extra curricular activities ( and study skills groups).

The website will have a multi-level structure, consisting of a home page with a horizontal navigation bar that gives clear links to four main areas (sports, study, music and drama). 

Each of the four main pages will have links to relevant sub-pages. A few of their comments are  shown below:

The functional requirements are the operations that need to be carried out in order for the end user requirements to be met.

• The Home page should provide internal links to the four topic pages (Sport, Music, Study and Drama)

• Individual pages should include news articles, with contact details

• The Sport page should have pictures and information about the school clubs

• The Music page should have details about the relevant choirs and orchestra

• The Study page should have details about study techniques and a quiz

• All pages (except the Home page) should link back to the Home page through use of the navigation bar.

These functional requirements are able to be tested and should be used in the evaluation to assess fitness for purpose.

Just as when designing software when designing a website the structure is crucial. But as opposed to designing data flow within subprograms we will define the navigational structure. This will detail which pages can link to each other and the Hierarchy showing the levels with the site. 

Now that there is a set of established user requirements and the site structure has been designed then the user interface has to be planned.

A wireframe should be created for each page and should include the following elements:

• Navigation Bars

• All text elements on the page

• Any media elements(images, audio clips and video clips)

• Any elements that allow the user to interact with the page (e.g. JavaScript)

• Any form Inputs (with validation criteria)

• Intended position and type of all hyperlinks on the page

Even these low fidelity wireframes (when non specific images and placeholder text are used) can be used as prototypes

• A High Fidelity wireframe is when actual text and images are used. 

There may also be hyperlinking to mimic functionality and navigation, at this point the system could be considered a prototype.

• Hyperlinks are enabled to allow early usability testing and feedback before development has commenced. 

• This can be done using specialist UI software or even presentation software using objects as hyperlink hotspots