Understanding HCI

Cognitive Walkthrough

Cognitive Walkthrough Example

Creating and linking a hotspot in dreamweaver

  1. insert an image - simple & intuitive 'Insert > Image'
  2. or, drag image from site files - less intuitive but may be easier to use
  3. Select the image - simple to select, but users need to know that images properties only appear in the properties window when the image is selected.
  4. Select the appropriate hot-spot icon in the image properties window - simple to select, but users need to understand that choosing the polygon hotspot is more memory intensive, and that circle and rectangle are better choices. Is there a need for polygon hotspot given this problem?
  5. Draw a hotspot around the link area - may be difficult to draw hotspot to correct size. Can we allow resizing after drawing? Or have a remove hotspot button?
  6. Type URL into the properties window link text-box - simple to do, but users need to know that hotspot properties only appear in the properties window when the hotspot is selected. Useers need to understand that the hotspot link window is different to the image link window
  7. or, use the folder icon to browse for a file - is folder icon a suitable metaphor for browse?
  8. or, use the crosshair to select a file from the site files - is crosshair a suitable icon for 'link'? Files window must be open for this method.