Digital Creativity 2000, Vol. 11, No. 1, pp.

1733

1462-6268/00/1101-0017$15.00 Swets & Zeitlinger

The integration of theory and practice in teaching designing for the screen
Mary C Dyson and Chomoi Picho-Owiny
The University of Reading, UK
M.C.Dyson@reading.ac.uk

Abstract
Future typographic and graphic designers will need to be able to design for a range of media, both to secure their role and to provide the necessary design expertise in technological environments. This paper proposes an approach to teaching which introduces theoretical issues within a practical design project to encourage the development of general concepts that can be transferred to different technologies. A specific project on designing for the screen is described, which is taught as part of a BA degree in Typography & Graphic Communication. In the context of this project, reasons for introducing theory are proposed, examples of the nature of the theory are given, and the methods used to introduce material are illustrated. A detailed account of one students implementation of this project is used to demonstrate how theoretical issues can provide direction in a design task. However, careful consideration needs to be given to how theory and practice are integrated to encourage students to look beyond the short-term benefits of specific training to the development of more general knowledge. Keywords: analytical method, interfaces, navigation, screen design, teaching approach, theoretical knowledge, typography

1. Introduction
1.1 Context With the rapid increase in web sites over the past few years, there has become an urgent demand for typographic and graphic designers who can work on screen. There is no shortage of people who develop web sites, but the lack of design input to these sites is apparent. The response to this situation is neatly summed up by Darrell Sano, user-interface designer with Netscape. He draws a comparison with the introduction of desktop publishing and the proliferation of quick-start books. The advertisements forgot to mention that various skills are required to design those beautiful pages. (Sano 1996 7) Students of typographic and graphic design are acquiring knowledge and learning skills that enable them to produce not only beautiful but also functional designs. Traditionally the focus has been on designing for print. Some of this teaching material will be applicable to designing for screen, such as general principles (e.g. legibility, consistency of design) and working methods (e.g. project management, the need for familiarity with production constraints). However, other more specific knowledge will need to be acquired to meet the demands of a qualitatively different medium. A designer who has successfully moved from book design to web design suggests that this transition requires an adaptation of skills (Niederst 1996 xi). Practising designers work in this way, gradually acquiring appropriate skills which can be finely tuned to meet the specific demands of the moment.

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

If this approach could be adopted by student designers, they may acquire skills that satisfy the demands of many future employers. Job advertisements for graphic designers or related posts typically specify certain skills. Web design could be taught by introducing HTML or direct manipulation authoring tools, alongside Quark, Illustrator and Photoshop to equip students with the appropriate tools for the job. However, from a pedagogical standpoint, which assumes an academic rather than vocational approach to education, this is unsatisfactory. In practical terms, student designers are less familiar with designing for print than experienced designers. Hence, it will be more difficult for them to adapt their skills. More fundamentally, it is important to introduce students to knowledge that relates specifically to the new medium. Such theoretical knowledge should not be tied to a particular technology, but should instead provide a basis for a more general understanding. Students are in the fortunate position of having time to learn about theoretical concepts and put these into practice. 1.2 Plan of the paper The next section describes a project on Designing for the screen. This was offered as one of four specialisations for third- and fourth-year students as part of the practical unit of the BA degree course in Typography & Graphic Communication at the University of Reading. Sections 3 to 5 introduce the project by describing three areas of theoretical knowledge that were incorporated into the project. Each section starts with reasons why the theory is relevant. This is followed by a brief outline of some of the theoretical areas, to give examples of the nature of the theory that was introduced. Finally, the specific methods used to apply the theory within the project are described. Sections 6 to 9 follow with a detailed description of one implementation of the project. The last section, 10, comments on this particular interpretation of the project and describes possible modifications in the light of student feedback. The objectives of combining theory and practice are compared
18

with the different outcomes, depending on students familiarity with HTML. Finally, the manner in which we impart general knowledge when educating future designers for new challenges is discussed.

2 Outline of the project

2.1 Aims of the project The project was devised to explore issues that need to be addressed when designing for the screen. It was not intended as training in, for example, How to design a web page, as such specific knowledge is soon outdated. A major aim of the project was to develop an understanding of general principles, enabling students to design for a range of platforms. 2.2 Task The task was presented in an outline form, as students were encouraged to write their own specific brief. The general requirement was to write or re-write an educational or informative document for reading from screen, to consider alternative structures and presentations and finally to implement the best solution or solutions. 2.3 Plan of the teaching The teaching that was specific to the project was carried out through presentations (given by both staff and students), group discussions, workshops and individual tutorials. However, some of the theory that was of relevance to the project was part of a lecture course in Electronic Publishing. This link between lectures and projects is typical of the course curriculum. The project was split into two parts, spanning two terms, to avoid too great a concentration of a specialist activity in a single term. The first four-week period1 focused on theoretical approaches and planning and the second either introduced students to HTML or further developed their knowledge of it. Practical hands-on experience was deliberately delayed to encourage a more considered design strategy.

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

3 Description and analysis

3.1 Lack of existing categorisation One of the problems in designing electronic documents2 is the lack of a clear means of describing and classifying the range of possibilities. To date, the only genre that appears to have been empirically identified is personal home pages (Dillon and Gushrowski3). One means of categorising web sites has been proposed by Shneiderman (1997), using the originator, number of pages, goals and success as descriptors. This method does provide a means of imposing some order on the abundance of sites, but design features are not considered. In a practical design project, such features are critical. By introducing methods of analysing existing electronic documents, students are provided with a means of organising their initial research. Identifying characteristics of the documents can help in locating examples of similar items which can then be used to generate ideas or suggest models. 3.2 Analytic evaluation 3.2.1 Metaphors One approach to categorisation that is related to global design features is to use the type of metaphor as the common feature. The use of metaphors is frequently encouraged in the design of electronic documents, using familiarity to aid interaction with unfamiliar objects. However, there are difficulties with this approach. Electronic documents do not necessarily make use of a metaphor. Alternatively, a number of metaphors may be simultaneously employed, one for the general concept (e.g. book) and a different one for interface objects (e.g. video controls). Also, the metaphor may not be identifiable. 3.2.2 Frameworks Metaphors identify global aspects of electronic documents, but do not specify details. A framework can provide a focus and form the basis for a detailed analysis. Developed in a

different context, one such framework identifies and defines characteristics of multimedia, such as the title, content, function, format, output channels and visual and auditory modes (Dyson, Andrews and Leontopoulou 1995). Typographic and graphic features can be added to this, such as: the choice of typeface, type size; the use of space (globally, around headings, interlinear, inter-word and intercharacter); the choice of colours and consistency and appropriateness of use; the choice of illustrations and the relationship between text and illustrations; the use of symbols or icons, where they are positioned and their function. This list could be extended to include dynamic media such as animation, video and sound. This type of analysis is similar to analytic evaluations within the discipline of human computer interaction (HCI). The method can therefore also be used to familiarise students with aspects of usability testing. 3.3 Employing analytical methods Surfing the web was proposed as a possible means of identifying metaphors in use. A general impression can be gained of the type of documents that exist, examples of good and poor designs, and source code can be found. However, this technique almost encourages unfocused viewing. As a group, we examined a number of CD-ROMs and web pages and discussed them in fairly general terms. This initial step was intended to facilitate subsequent individual analyses. A number of issues were raised such as differences between CD-ROMs and web pages, user friendliness, navigation and structure, screen design, the use of audio and video, consistency of design and user interactions. Having identified which features may be relevant to an analysis, students then needed to decide how they could be described. For example, descriptions could be quantitative or qualitative, objective or subjective. Also, students were alerted to the need to consider the representativeness of the sample.
19

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

4 Navigation structures and devices

4.1 Identifying alternatives Electronic documents afford a flexibility in the way in which the content can be organised. For example, alternative organisations are possible within the same document. Content can be accessed by an alphabetic listing, through analogy or metaphor, from general to specific, or from most to least important (adapted from Pfaffenberger 1997). As these students were relatively inexperienced in designing electronic documents, it was felt to be important to identify alternative structures, devices and their features at the outset. Knowledge of the range of options, and factors that may affect the choice of options, should encourage an informed design decision with an underlying rationale. 4.2 Characteristics of organisational structures 4.2.1 Navigation structures Various structures for electronic documents can be defined: linear, hierarchical, network/web. In all these cases, the way in which the content is divided into units, chunks or nodes needs to be carefully considered. This will involve the type, size and interrelationship of chunks (Begoray 1990; Barker 1993). It may be necessary to edit text for display on screen, or even write specifically for the medium. A purely linear structure resembles printed documents (e.g. novels) and restricts navigation to a single route through the material. Such a structure fails to exploit the potential of hypertext, although this may be appropriate in certain circumstances. A hierarchical structure provides alternative navigation routes and Sano (1996) suggests that this is a natural organisation as humans tend to think in terms of hierarchy. In this structure, information needs to be located at appropriate levels. A network structure allows for crossreferencing and imposes less constraint on users navigation. However, the amount of links that
20

are provided should be carefully considered, as confusion and disorientation may otherwise develop. 4.2.2 Factors affecting navigation structure A well designed navigation structure reflects the semantic structure, so that users can build a coherent mental model of the system. In addition to the specific content, other factors that may influence the navigation structure are the: nature of material represented (e.g. catalogue, guided tour); context of use (e.g. private/individual vs. public); type of user (e.g. age, experience); function of the system (e.g. education, entertainment). 4.2.3 Navigation devices Given the organisational structure, navigational devices need to be employed which can be functional (e.g. return to home page) or link to content (Pfaffenberger 1997). Whilst many browsers provide functional aids, there is an argument for combining content and function within the document. This will then serve to reinforce the close relationship between the semantic and navigational structure. 4.3 Illustrating structure A short handout summarised the above issues in the form of a checklist of what to consider when designing an electronic document. It was emphasised that they should be considered as a set of proposals. The material included some explanation of the issues, brief guidelines and examples, presented as pointers towards considered design. This was followed up by a demonstration of selected work of previous students, which aimed to show examples of different structures and uses of navigational devices. Once again, it was felt important to have a

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

direction in looking at this work. This was established by the handout and discussion. The examples focused on the size of information units, the breadth and depth of the hierarchical structures, in relation to their semantic content, and navigation devices. One document was chosen as an example of good design with a simple hierarchical structure, small chunks of information and various navigational devices. Other examples showed (i) a rather confusing network of interconnections,(ii) a better use of interconnections with a clear path, (iii) advantages of providing an overview.

disregarded can be used to illustrate poor layout (Lansdale and Ormerod 1994). 5.2.2 HCI general guidelines Some general principles can be identified, drawn from both theory and practice. These draw attention to the importance of: identifying the knowledge and experience of users; consistency of design; providing the user with flexibility; introducing redundancy and reinforcement; avoiding interfering messages; legibility. 5.2.3 Screen compared with print At the level of graphic elements, paper design guidelines are not entirely transferable to screen (Hartley 1994). Small screen size, colour, the prevalence of landscape format, and limited resolution are some of the factors that may influence legibility. Space or colour may be used to communicate structure on screen, where typographic variants (e.g. italic or bold) may be less perceptually salient. Legibility research has tended to focus on comparisons of reading from screen and paper, and less is known about the effect of typographic variables on screen. However, research is developing in this area and there are findings on some of the conditions for optimal legibility on screen (e.g. Dyson and Kipping 1998). 5.3 Considering design elements The pragmatic approach used with navigational structures was adopted to identify design elements that need to be considered in designing screens. The checklist identified typographic features and possible treatments, such as: layout of the text (relationship between type size, line length and interlinear space); setting style (justified, unjustified); paragraphs (indented, space after); type choice (serif/sanserif, character set,

5 Interface design
5.1 Identifying relevant sources A rich body of knowledge has been accumulated on designing printed documents, from experience and research, but this does not yet exist for electronic documents within the typographic field. Nevertheless, some general principles may be transferable from paper to screen. In addition, details of the characteristics of screen-based media may be acquired through exploring the theory and practice of user interface design. Students designing in a new medium need to make judgements as to what knowledge they can transfer from the familiar print medium, and when and where they must look for different sources. Introductions to relevant theories, practical guidelines, and research findings from various disciplines can provide a basis for such judgements. 5.2 Psychology, HCI and typography 5.2.1 Gestalt psychology A set of laws of perceptual organisation were developed by Gestalt psychologists. Two that are frequently applied to the arrangement of graphic material are the laws of proximity and similarity. These state that elements that are either located near to each other or are similar in nature are likely to be perceived as a group, i.e. related in some way. Instances where such laws have been

21

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

variants); headings (weight and size, surrounding space); graphic effects (areas of colour, backgrounds, reversing out).

title URL general modes colours space text classes type styles

Adobe Systems Incorporated www.adobe.com verbal, pictorial, schematic background: white, foreground: black/red/blue, 8 colours, full colour images, corporate reds evenly distributed on page

6 Results of analysis
Having described the theoretical approach, one students implementation of the project is described, starting with the analysis. 6.1 Description and analysis A selection of existing web sites were analysed (Adobe Systems Inc.4, Department of Typography & Graphic Communication at The University of Reading5, Ray Larabie6). The sample was chosen to represent sites that have connections with the field of design and therefore might produce a better than average electronic document. They were also selected for their contrasting styles of interfaces. Concentrating on the front page of only three documents (Figures 1, 2 and 3) makes an in-depth analysis possible. Changes made to the proposed framework of Dyson et al (1995) separate the interface from the content. The analysis aims to give a full description of a sites front page by recording features as objectively as possible (Table 1). Within these examples, problems were found with how semantic groupings and hierarchies of items are shown on the page. Where semantic groupings are defined by space, items are wrongly grouped. Specifically, items of the same group have more space between them than the space dividing one group from another, as in Adobes site (Figure 1). Where the hierarchy of page items is defined by their position on the page, the order is sometimes difficult to ascertain. With both Adobe and Typography, simple and clear

paragraph, captions, notes paragraph: user sanserif, captions: gif sanserif, note: user sanserif type sizes paragraph: medium, captions: small, note: tiny colours paragraph: black, captions: black, note: black interlinear spacing none (OK) interword spacing none (OK), captions: tight intercharacter spacing none (loose), captions: very tight placement paragraph: middle right, captions: top left & right, note: bottom right picture title, paragraph heading picture title: gif sanserif, paragraph heading: user sanserif bold type sizes picture title: largest on page (25 pixels cap height?) paragraph heading: next largest on page, but medium colours picture title: plum red, paragraph: heading black interlinear spacing picture title: some (+2?), paragraph heading: none (OK) interword spacing picture title: some (loose), paragraph heading: none (OK) intercharacter spacing picture title: tight, paragraph heading: none (loose) Table 1.

headings classes type styles

navigation aids are placed at the top of the page. However, when one set of navigation options is at the top, and a second on the left side, their hierarchical relationship to each other becomes unclear (Typographys site, Figure 2). The links at the top of the page refer to the Department, whereas those on the left refer to the different

22

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

Typographic detailing differs little from the default settings. Adobe and Typography are similar in that neither alters interlinear spacing in the body text. However, Adobe and Larabie alter interlinear spacing in headings. Typeface specification is more varied. Two of the sites, Adobe and Typography, retain the broad distinction between sanserif and serif. In contrast, Adobe specifies a particular sanserif and Larabie specifies two or more distinctive display faces. Type size is wide-ranging with Adobe and Larabie, but limited with Typography. With all of the sites, there is seldom enough range between colours, sizes or typefaces on a page to make a striking impression. 6.2 Applying the results Some of the points arising from this analysis were fed into the design of the projects sites. In terms of semantic groupings of items, a consistent grammar of space is used, whereby smaller amounts of space combine items in a group and larger amounts distinguish one group from another. The placing of items is worked out primarily according to their hierarchical status. Colour schemes are deployed to describe item hierarchy and semantic groupings. Lastly graphic devices such as rules are used to reinforce groupings and hierarchy. In terms of stylistic features, colours are put together to make a strong impression on users. The two extremes of page style Larabies game menu and Typographys book page are both explored. Typographic detailing, such as interlinear space, typeface and size are also varied.

Figure 1. One page of Adobe Systems Incorporated website selected for analysis.

site sections. It could be argued that when there are links at both the top and side, the top more logically refers to the site sections and the left to each sections pages. A place could be found for the department links by having them as part of the home page section. This rearrangement is simpler because it removes the need for the third level of navigation that presently exists. In looking at the style of different sites, it was apparent that features are treated differently according to the nature of the content. With Larabies informal content come striking colours (Figure 3), whereas restrained colours are used to reflect Typographys more formal content. The text on the page differs between, at one extreme, many headings and no body text for Larabie, to the other extreme of few headings and a fair amount of body text for Typography. In terms of visual metaphors, one might be compared to a computer game menu and the other, the page of a book.

7 Development of the project brief

7.1 User considerations The activities of a nationwide youth organisation were chosen as the content of the web site. The main user group is young people between the ages of nine and eighteen, all participants of the projects and events of the youth organisa-

23

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

Figure 2. One page of the Department of Typography & Graphic Communications website selected for analysis.

tion. Stylistically the genre needs to be strongly youth oriented, so users will not get bored or switch off. It is estimated that about sixty percent of users would be the main participants in the events, about thirty percent would be parents and the leaders involved in planning events, and the last ten percent would be newcomers. The site contains information on the activities and events of the organisation and has to cater for casual use or detailed reference. The material ranges from educational and anecdotal information about the childrens camp for nine-year olds, to dates of forthcoming events as reference for youth leaders planning their diaries. 7.2 Content development The original plan was to develop the text from existing word-processed documents about the organisations events and re-purpose them for electronic delivery and public consumption. Upon closer inspection, these electronic documents were found to be wholly lacking in substance. The text was re-written to great benefit: choice and length of words and structure were reconsidered for reading on screen. While retaining a strong message, shorter more descriptive words were chosen with the aim of producing shorter paragraphs (by about sixty percent in some cases). This reduction in the length of texts is based on three considerations. Firstly it is considered important that users spend their paid Internet connection time profitably. Secondly, shorter texts are more likely to be contained within one screen at 640 x 480 pixels. Thirdly, what looks the right length on paper seems too long to read on screen.
24

The only existing images are photographs taken at an annual event. It was decided that these should form little more than a people gallery of those who attended.

8 Navigation structure
8.1 Description of structure Although the original material was substantially modified and developed, the original documents did suggest a particular structure which reflects the nature of the activities in the organisation. There are three main sections and topics within these sections. This seems the most logical way

Figure 3. One page of Ray Larabies website selected for analysis.

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

Figure 4. Map of the projects web site Sourozh youth. White pages can only be reached from the page above, but black pages can be reached from anywhere in the site.

of structuring the material from the point of view of the user who knows how these three events relate to one another. Before coding anything, the structure was worked out on paper with a conceptual site map (Figure 4). This consists of a front page (home), with general topic pages (about, soon, projects, help) and three section pages (youth group, camp, conferences). Each sections topic pages are reached only from their respective section page, e.g. the music topic page can only be reached from the camp section page. However, all section pages and the front page are accessible from anywhere in the site. Within a page, classes of text for different functions were developed. These make a hierarchy of page title, page introduction, headings, main body text, subsidiary note text, which are all to be read in full. Menu lists, text lists and captions to links are all to be scanned, rather than read through. Stylistically the text varies between factual, reportage, story-like and quiz-like.

8.2 Navigation devices Web sites give the user control over their navigation through the content. This control is facilitated partly through the web sites interface, and partly through the browser interface. The web site interface may be totally new to the user and different from the browser. The operating system of the machine which hosts the browser may also introduce even more differences in interface design. One approach to simplifying the users task may therefore be to adopt some of the visual conventions of operating systems. An argument has been made by Lynch that familiarity with the Macintosh or Windows GUI means that you can cope with very complex interactive environments as long as your software stays within basic interface guidelines of the operating system. (Lynch 1994)

25

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

9 Interface designs
Two interface approaches were conceived as alternative methods for navigating around a web site: a verbal and a graphic interface. The verbal approach explores the nature of linearity and continuity with long paragraphs requiring scrolling. These sites rely solely on HTML and do not require an up-to-date browser. The graphic interface aims to minimise verbal elements and explores graphic elements such as windows and icons, exploiting JavaScript and Cascading Style Sheets.

Figure 5. First verbal interface site.

The verbal interface uses: sequence; linking to other content within the same page; scrolling; words instead of icons; text-heavy pages. The linear nature of continuous text is maintained by using a single web page for one topic, minimising the need to split the content across pages. In contrast, the graphic approach to the interface incorporates visual elements of GUIs. This is based on the premise that users are generally familiar with Mac and Windows GUIs. The interface includes: icons and images; floating windows; objects and 3D modelling; pull down menus.

Figure 6. Second verbal interface site.

26

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

Figure 7. Third verbal interface site.

A distinction is made between the interface (graphic) and the content (mainly verbal). The text is divided into discrete units to avoid scrolling and separate pages are linked. Having set up two approaches to the interface, it was difficult to keep strictly within either one or the other. Although each web site design pushes the interface in a certain direction, the designs sometimes borrow an element from the alternative interface approach. Both approaches were interpreted in parallel, and they eventually feed into each other to create a third approach, combining both graphic and verbal elements freely as required. 9.1 Verbal interface web sites The first verbal interface site (Figure 5) employs vertical space as the major visual element for

distinguishing groups of items on the page. Type size, weight and some colour define the hierarchical order of text blocks. Space is proportioned into two columns, with navigation aids in the first column and content in the second. The text in paragraphs is deliberately written in full sentences to emphasise the flowing nature of the text. This site is given minimal treatment so that it can serve as a baseline from which other sites are developed. The second verbal interface site (Figure 6) keeps the same vertical space, but horizontal space is introduced to further distinguish classes of text. This reinforces the hierarchy and defines semantic groups (e.g. heading with text). In effect, this produces a more complex fourcolumn grid where even the link list has a level of hierarchy with section links indented. The bars at the top of the screen aim to emphasise both the site and page titles. Paragraphs are shorter, bullet points are used, and the text is further edited to give quick access to the information. The third verbal interface site (Figure 7) uses vertical and horizontal space in a simple three-column grid. Developing from the previous design, the chunks of different text classes are formalised with rules further dividing the page into sections. A coloured background diffuses the clinical looking white of the last site, while the title bar is also different (as it was considered too graphic). Even though the rules and typographic symbols are generated in HTML, they may also be considered graphic. In general, the rigidity of the page layout (horizontal and vertical spatial relationships) is reminiscent of design for print, such as timetables and newspaper grids. 9.2 Graphic interface web sites The first graphic interface site (Figure 8) is again regarded as a baseline for this approach. Graphic items appear as 3D objects above a background. The overall style of the page is similar to Larabies computer game menu, with striking colour (blue and orange) filling the screen. The
27

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

only text that is part of the interface is the site and page title and the topic heading. Links to site sections on the navigation bar have conventional footnote symbols in place of words. (These symbols were arbitrarily chosen as it was difficult to devise symbols to represent the content.) For this site design, each sections floating items use a different colour, whereas the white element at the top of the page is constant and provides the site-wide navigation. The buttons enable deeper navigation of the section, with plus signs to indicate that there is more about a topic at the end of the link. They are, however, supported by a short verbal description in the browser window status bar, activated when the user moves the mouse over the item. The second graphic interface site (Figure 9) keeps the graphic symbols to enable navigation, here in the form of grey toolbar buttons (found in Word for Windows). When the site button is clicked, a sub menu of buttons is revealed. These are different in nature to the main site section buttons as they provide further information on content. Again the symbols are supported by a short verbal description in the browser window status bar. The content is always displayed in a frame to the right of the window and the text is edited to fit this relatively small space. The user may have to repeatedly follow links to get to some of the content, which is buried at the bottom of the hierarchy. Bands of background colour define semantic groupings and hierarchy, with a separation between content and navigation. The third graphic interface site (Figure 10) has two windows: one in the background and one in the foreground. The image in the background window changes to reflect the nature of each section. The content and navigation facilities are in the foreground window. There are no headings as these are provided by the navigation tools, which are in the form of pull down menus, one for the site and one for the section. A further menu is added in the topic window if the topic needs a further level

of hierarchy. As with the last site, the text is edited or re-written to fit the window. 9.3 Verbal and graphic interface web sites Elements from both interfaces are combined to create a third approach. In both of the combined interface approach sites, it was considered important to keep a lot of text on the page, whilst splitting up the classes of text. The first combined interface site (Figure 11) explores the landscape format of the screen. Scrolling is accepted in a horizontal direction. Navigation facilities are provided by an image on the left, but this does not include access to the sections. The user finds section topics by scrolling. This resembles the method of accessing topics in the first verbal interface site (Figure 5), except scrolling is now horizontal rather than vertical. Additional links on the left of the page,

Figure 8. First graphic interface site.

Figure 9. Second graphic interface site.

28

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

Figure 10. Third graphic interface site.

Figure 11. First combined interface site.

29

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

below the image map, change from page to page and offer less structured access. The second combined interface (Figure 12) takes the idea of floating windows, but makes an attempt to integrate the two windows. A space is left in the background window so that nothing is obscured by the floating window. As with many graphic interface sites, the title is converted to an image to retain the appropriate typeface. The site links are on a vertical button bar with some unstructured links below. The introductory paragraph of the section is the only text content in the background window. This is followed by word links which call up the topic content in the floating window.

10 Discussion
10.1 Implementation of the project 10.1.1 Specific example The outcome of the project described above is a particularly interesting interpretation of the brief as the project explores the limitations and possibilities of different interface features. In adopting two contrasting approaches (verbal vs. graphic) a structure is created for this exploration. The analysis of web sites identifies both specific issues (e.g. use of space to group items) and more general characteristics (e.g. alternative genres: computer game menu vs. book). The web site designs then address the specific issues and determine the appropriateness of the style by considering the known user group. Knowledge of the user group and familiarity with the material also contribute to the development of a logical structure for the content. 10.1.2 Uses of analytical evaluations Given the outcome of the analysis, a less formal approach may have sufficed. However, a detailed classification of specific features is a useful research tool, providing systematic description, that can be recognised as such. Another student in the group included in her project the specific

aim of devising a schema for analysing electronic documents. The characteristics of screen-based information were evaluated to establish which design features should be included in constructing an electronic newspaper. In this particular case, the student chose to emphasise the analytical work in the development of the web site7. In the above example, the focus on the development of analytical techniques was appropriate and well executed. However, such an emphasis may be inappropriate if student designers merely wish to gather background information for a project. Nevertheless, a method seems to be necessary when exploring electronic documents, which are likely to be less familiar than printed artefacts, and multidimensional. The process of systematically analysing the documents may be more important than the outcome, the detailed descriptions. 10.2 General feedback on the project The small group of students who carried out this project were asked for their feedback at the end of the project. There was a general consensus that they would have liked to have had hands-on experience earlier in the project. We discussed the reasoning behind delaying this activity, which is to encourage detailed planning and consideration of alternative solutions. It was generally acknowledged that once students were seated at a computer they would be distracted by their attempts to get to grips with HTML code. Our proposed solution for future projects was therefore to introduce the basics of HTML, with examples, near the beginning of the project but to keep the implementation of their own sites until the second stage. A similar dilemma is described by Crystal Waters when teaching web publishing classes at the San Francisco Digital Media Center8. The students are asked to spend time planning, looking at sites, storyboarding and critiquing ideas before they produce code. However, some students wish to learn code

30

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

standable. Nevertheless, educators are in a position to consider the needs of students in a broader context. The theoretical basis to this practical project was intended to encourage students to understand the context within which they were designing, to view the task from many different angles (e.g. differences between print and screen, metaphors, navigation structures) and to promote a range of alternative solutions. Theory can suggest methods to explore problems, provide what information we have based on current research and experience, and point to other relevant sources. This can compensate for our relative lack of knowledge of designing for screen, compared with print. However, the nature of the relationship between theory and practice is critical. Theoretical issues may be seen as irrelevant if they do not relate specifically to the task at hand. Integrating theory into project discussions and workshops, as well as formal lectures, may alleviate this problem. In addition, timing is also important. 10.3.2 Outcomes Those students who were unfamiliar with web pages and HTML at the beginning of this project had more difficulty in relating theory to practice. This caused problems with, for example, conceptualising their navigation structure. When they started to develop pages this was resolved but these students did not produce such a wide range of alternative solutions as others. Although this may have been due to time wasted trying to grasp the concepts, it is more likely a result of their HTML skills being less developed. The proposed introductory session on HTML should help in this respect. About half the group showed some indication of theoretical issues guiding their design. This was most evident in the presentation and discussion of their design solutions. The project described in detail in this paper is an extreme example of the range of solutions explored and the thinking behind such experi-

Figure 12. Second combined interface site.

immediately and Waters suggests that such people may be driven by advertisements for $60,000-a-year web masters. 10.3 Theory and practice 10.3.1 Objectives There is usually some discrepancy between students perceptions of how they would like to be taught and how teachers feel they should learn. This is particularly noticeable in relation to learning how to use specific software or writing code, as future job prospects may appear to demand such skills. We do seem to be moving in a vocational, rather than academic, direction in many spheres. When this is coupled with the use of computers in virtually all professional graphic design work, the demand from students for software training is under-

31

Dyson & Picho-Owiny

Digital Creativity, Vol. 11, No. 1

mentation. However, other students also systematically developed alternatives, in one case providing a commentary on the reasons for specific decisions (e.g. employing a metaphor, colour coding to aid navigation). The student who developed the analytical part of the project was able to feed this theoretical work into a reasoned rationale for her final design. As mentioned above, not all of the students in the group appeared able to use theoretical knowledge to guide their design. It is hoped that having completed the project and gained an understanding of practical issues, these students would be able to reflect on the theory. An optimistic view would be that they might make use of it in future work. If not, then at least those students who focused on mastering practical skills did not appear to suffer from being exposed to theory. 10.3.3 Specific and general knowledge A major objective in the current work was to avoid reducing the project to training in the design of web pages. The term electronic document was introduced to extend the discussion beyond web pages; CD-ROMs were explored and general principles of screen design discussed. The detailed example of one interpretation of the project, and brief mention of others, suggests that a good understanding of issues surrounding designing for screen could be gained. This approach will not necessarily benefit all students. However, it appears to provide opportunity for those with some initial understanding of the area, to broaden their perspective. A large part of the project made reference to web pages and todays technology. This focus is probably inevitable and appropriate, given the current high profile of the web. However, students should be given a means of expanding this specific knowledge to form more general concepts and principles. This will probably be best achieved by working from both specific examples to general cases and from the

general to the specific. Without general theoretical knowledge of designing for screen, future typographic and graphic designers will require basic skills training for each new developing technology.

References
Barker, P. (1993) Exploring hypermedia. Kogan Page, London. Begoray, J.A. (1990) An introduction to hypermedia issues, systems and application areas. International Journal of Man-Machine Studies 33 121147. Dyson, M.C., Andrews, M. and Leontopoulou, S. (1995) Multimedia in museums: the need for a descriptive framework. Convergence 1(2) 105124. Dyson, M.C. and Kipping, G.J. (1998) Exploring the effect of layout on reading from screen. In Hersch, R.D., Andr, J. and Brown, H. (eds.) Electronic documents, artistic imaging and digital typography. Springer-Verlag, Berlin, pp. 294304. Hartley, J. (1994) Designing instructional text. 3rd ed. Kogan Page, London. Lansdale, M.W. and Ormerod, T.C. (1994) Understanding interfaces: a handbook of human-computer dialogue. Academic Press, London. Lynch, P.J. (1994) The evolving interface of multimedia. Syllabus Magazine 8(3) 4850. Nierderst, J. (1996) Designing for the web. OReilly, Bonn. Pfaffenberger, B. (1997) The elements of hypertext style. AP Professional, Boston. Sano, D. (1996) Designing large-scale web sites: a visual design methodology. Wiley Computer Publishing, New York. Shneiderman, B. (1997) Designing informationabundant web sites: issues and recommendations. International Journal of Human-Computer Studies 47 529.

Notes
1

Although the project spanned two four-week periods, students were engaged in other activities during these periods. Within the project, the product was referred to as

32

The integration of theory and practice

Digital Creativity, Vol. 11, No. 1

an electronic document to promote general issues involved in designing for screen, rather than the specifics of a particular medium (e.g. CD-ROM, web page) or content (e.g. academic writing, publicity). Dillon, A. and Gushrowski, B. Genres and the Web: is the personal home page the first uniquely digital genre? Draft paper for discussion at: http:// www.slis.indiana.edu/adillon/genre.html Accessed on 11 May 1999. Adobe Systems Incorporated, http:// www.adobe.com. Accessed on 25 June 1997. Department of Typography & Graphic Communication, The University of Reading. http:// www.rdg.ac.uk/Typography. Accessed on 6 March 1998. Ray Larabie. http://www.globalserve.net/~rlarabie/ freefont.htm. Accessed on 25 June 1997. This student, Enola Wright, graduated in July 1998 and is now a Web Site Manager for an electronic software distribution company. Crystal Waters, Web concept & design. http:// www.typo.com/wcd/wcdintro.html. Accessed on 15 December 1997.

Mary Dyson is a lecturer in the Department of Typography & Graphic Communication at the University of Reading where she teaches Electronic Publishing. Due to a background in psychology, her teaching emphasises the user, rather than the technology. She has pursued her research interests in pedagogical and human factors aspects of electronic publishing by writing on the relationship between designing and software. She has also conducted empirical research evaluating multimedia and specifically legibility on screen. Chomoi Picho-Owiny obtained a first class BA (Hons) in Typography & Graphic Communication from The University of Reading in July 1999. Within his course he focused on the way web sites should function visually, efficiencies in digital text editing, and software automation for the typographer. Since then he has been with Moon, a small branding and communications consultancy based in London and New York.

33

Copyright of Digital Creativity is the property of Routledge and its content may not be copied or emailed to multiple sites or posted to a listserv without the copyright holder's express written permission. However, users may print, download, or email articles for individual use.