Skip to content

Modes and Colours

Can use Photoshop to change mode of image i.e. how each pixel is represented.

Predominant mode is RGB. Pixels represented by varying degree of intensity of red, green & blue.

Performed via Image -> Mode.



Changing physical size of image may require changing size or resolution.

Resolution – number of pixels per inch square.

If resolution of image does not match resolution of device displaying it, image resolution must change.

If image does not fit destination space in current resolution then image needs to be resized.

Downsampling – keeping size image size, reducing number of pixels – pixels look bigger.

Upsampling – keeping size, having bigger image attained by adding more pixels.

Upsampling and downsampling known as resampling.

In Photoshop, Image > Image Size.


Photoshop is the leading app for image editing, not easy to use though.

Key tasks include:

  • Removing a colour cast (i.e. the unnatural predominance of a single colour).
  • Removing unwanted background objects.
  • Superimposing text on a picture.
  • Giving a 3-D bevelled appearance to text objects.
  • Creating a collage from a mixture of images.
  • Increasing the contrast.
  • Changing the resolution of images.

Can deal with different file formats including OS specific such as PICT (Mac) and BMP (Windows).

Can use a scanner to import graphics into app.

Can import text/graphics from PDF docs once they have been rasterised.

Story Boards

Good practise to create story board for each page in website.

Common though to create single story board for pages with same functionality or in same category.

Example of information collected by story board template:

  • Screen Name and Classification used for archiving.
  • Other useful information is recorded.
  • Notes pane can contain draft graphic representation of page.
  • Additional notes could contain navigation, usability or accessibility issues/information for later use.

Example of a completed story board template from Smoky Valley Middle School.

Example of completed story board template.

Example of completed story board template.

Further template samples are available from

The story board IS NOT a screenshot, it should be produced in the design phase – it should be possible to see the transition from story board to webpage.

Navigation Basics

Navigation chart – shows way around website.

Can be one chart or split for different navigation levels.

Four main types of navigation:

  1. Linear
  2. Non-linear
  3. Hierarchical
  4. Composite, or Complex

Good principles:

  • No more than seven (plus/minus two) nav buttons
  • “3 clicks convention” – user never more than three click from main page
  • Keep it simple
  • Label buttons or use text navigation
  • Consistency – nav in same place on each page
  • Use colour or headings/sub-headings to assist user in where they are within system

User Testing

Three to five testers using system, explaining their decisions out loud.

Observer records observations without offering help.

Testers should be representative of target audience.

Identify trends in user behaviour during use of system to spot problems.

System can be prototype or existing system, either way it needs to be operational.

Ten Usability Heuristics

Web Usability: Usability Inspections

Ten Usability Heuristics

Ten general principles for user interface design – more rules of thumb than specific usability guidelines, hence “heuristic”.

  1. Visibility of system status – the system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  2. Match between system and the real world – the system should speak the users’ language, with words, phrases and concepts familiar to the user rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
  3. User control and freedom – users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
  4. Consistency and standards – users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
  5. Error prevention – even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  6. Recognition rather than recall – minimise the user’s memory load by making objects, actions and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  7. Flexibility and efficiency of use – accelerators (unseen by the novice user) may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
  8. Aesthetic and minimalist design – dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
  9. Help users recognise, diagnose and recover from errors – error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  10. Help and documentation – even though it is better if the system can be used without documentation, it may be necessary to provide help and support. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Checklist based on above by Deniese Pierotti.

Advantage: Heuristic evaluation can be performed early in concept/design phase, prior to build & implementation.

Disadvantage: Does not provide design solutions, just identifies issues. Does not identify positive design aspects.