Using 'Contact Points' for Web Page Design

Pete Faraday and Alistair Sutcliffe

Centre for HCI Design,
City University,
London, EC1 0HB, UK
P.M.Faraday@city.ac.uk

ABSTRACT

The paper explores how 'contact points' or co-references between text and image should be designed in web pages, via guidelines and a web page design tool. INTRODUCTION
Almost all web pages contain text and image, yet little work has addressed how to design such combinations. This paper introduces 'contact points' as a key design issue. These are places in the text where the content needs to be related with the image eg for details of an object's appearance, or how to perform an action. The problems are i) how to provide linking references between text and image; ii) how to ensure the message thread can be followed between text and image media.

GUIDELINES

To investigate how viewers form contact points, we performed a number of eye tracking studies (Faraday & Sutcliffe, 1997). Figure 1 shows a result set for a LaserWriter instructions with two contact points, 'Clean Wires' and 'Not break'. The studies provided evidence for the effect of contact point design techniques : -If a clause of text refers to an image, the contact point should be represented
explicitly in the text. In all cases subjects re-inspected the image after reading the
text, suggesting that the text had provided co-references with the image. -Contact points should be sequenced to avoid overwhelming the reader with labels
and images which refer to later parts of the text.Subjects seemed to process the
text as a whole, then rescan the image. This may cause problems as the contact
points should be resolved in the order given in the text to provide their value. -It is important to provide text and image together in close proximity. This will allow the viewer to easily switch between the text and image.
-The referent in the image should be easy to locate. Subjects tended to fixate highlighted objects, such as those with arrows or zooms.
-Viewing should be self paced. Reading and inspecting the image are serial processes which take time.

Figure 1 Single subject eye track results

Figure 2 Tool screen shot (clockwise - top) : Content, Page, Timeline views TOOL SUPPORT

To meet these needs, a dynamic HTML authoring tool was developed. The tool encourages the designer to break their content up into contact points, relating a part of

CONCLUSIONS
We believe that web pages designed with our tool have several benefits; they : i) make contact points explicit; ii) step the user through each contact point; iii) draw the user's attention to referents in the image; iv) let the user self pace their viewing. We are currently conducting studies to investigate if our pages improve comprehension.

REFERENCES
Faraday, P.M. & Sutcliffe, A.G (1997) Attending to Text and Pictures. Short Paper.
HCI '97, Bristol, UK.