Desinging for the Screen

7/31/2019 Desinging for the Screen

1/18

Digital Creativity2000, Vol. 11, No. 1, pp. 1733

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

The integration of theory andpractice in teaching designing

for the screenMary C Dyson and Chomoi Picho-Owiny

The University of Reading, UK

[email protected]

Abstract

Future typographic and graphic designers will need

to be able to design for a range of media, both tosecure their role and to provide the necessary de-sign expertise in technological environments. Thispaper proposes an approach to teaching which in-troduces theoretical issues within a practical designproject to encourage the development of generalconcepts that can be transferred to different tech-nologies. A specific project on designing for thescreen is described, which is taught as part of a BAdegree in Typography & Graphic Communication.In the context of this project, reasons for introduc-ing theory are proposed, examples of the nature of

the theory are given, and the methods used to in-troduce material are illustrated. A detailed accountof one students implementation of this project isused to demonstrate how theoretical issues canprovide direction in a design task. However, carefulconsideration needs to be given to how theory andpractice are integrated to encourage students to lookbeyond the short-term benefits of specific trainingto the development of more general knowledge.

Keywords: analytical method, interfaces, naviga-tion, screen design, teaching approach, theoreti-cal knowledge, typography

1. Introduction

1.1 Context

With the rapid increase in web sites over thepast 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 thosebeautiful 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. Tradition-

ally the focus has been on designing for print.

Some of this teaching material will be applicable

to designing for screen, such as general princi-

ples (e.g. legibility, consistency of design) and

working methods (e.g. project management, the

need for familiarity with production con-

straints). However, other more specific knowl-edge 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.


2/18

DigitalCreativity,Vol.11,No.1

Dyson & Picho-Owiny

1 8

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, along-

side Quark,Illustratorand Photoshop to equip

students with the appropriate tools for the job.

However, from a pedagogical standpoint,

which assumes an academic rather than voca-

tional approach to education, this is unsatisfac-

tory. In practical terms, student designers are less

familiar with designing for print than experi-

enced designers. Hence, it will be more difficult

for them to adapt their skills. More fundamen-

tally, 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 theoreti-

cal concepts and put these into practice.

1.2 Plan of the paperThe next section describes a project on Design-

ing 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 describ-

ing 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 implementa-

tion of the project. The last section, 10, com-

ments 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

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 projectThe 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 under-

standing of general principles, enabling students

to design for a range of platforms.

2.2 TaskThe 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 consideralternative 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, work-

shops 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 andprojects 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. Practi-

cal hands-on experience was deliberately delayed

to encourage a more considered design strategy.


3/18

1 9

The integration of theory and practice

3 Description and analysis

3.1 Lack of existing categorisationOne of the problems in designing electronic

documents2 is the lack of a clear means of

describing and classifying the range of possibili-

ties. 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 asdescriptors. 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 init ial

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 evaluation3.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 neces-

sarily 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 inter-

character); 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 possiblemeans 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.


4/18


Dyson & Picho-Owiny

2 0

4 Navigation structures and devices

4.1 Identifying alternativesElectronic 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 inexpe-rienced 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. Inall 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 specifi-

cally for the medium.

A purely linear structure resembles

printed documents (e.g. novels) and restricts

navigation to a single route through the mate-

rial. Such a structure fails to exploit the poten-

tial of hypertext, although this may be appropri-

ate in certain circumstances.

A hierarchical structure provides alterna-

tive 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 cross-

referencing and imposes less constraint on users

navigation. However, the amount of links that

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. cata-

logue, 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, naviga-

tional devices need to be employed which can

be functional (e.g. return to home page) orlink 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 structureA 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 consid-

ered 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 demonstra-

tion 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


5/18

2 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) advan-

tages of providing an overview.

5 Interface design

5.1 Identifying relevant sourcesA rich body of knowledge has been accumulated

on designing printed documents, from experi-

ence 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 addi-

tion, details of the characteristics of screen-basedmedia 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 typography5.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

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, wheretypographic 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 typo-

graphic 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 navigationalstructures 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,


6/18


7/18

2 3


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.

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 Typogra-

phy. 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 resultsSome of the points arising from this analysis

were fed into the design of the projects sites. In

terms of semantic groupings of items, a consist-

ent 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 outprimarily 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 rein-

force 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.

7 Development of the project brief

7.1 User considerationsThe activities of a nationwide youth organisa-

tion 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-

Figure 1.

One page of

Adobe Systems

Incorporated

website

selected for

analysis.


8/18


Dyson & Picho-Owiny

2 4

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 ofusers 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 informa-

tion about the childrens camp for nine-year

olds, to dates of forthcoming events as reference

for youth leaders planning their diaries.

7.2 Content developmentThe 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 struc-

ture 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.

The only existing images are photo-

graphs 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 structureAlthough 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.

Figure 2. One page of the

Department of Typography &

Graphic Communications

website selected for analysis.


9/18

2 5


of structuring the material from the point ofview 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. How-

ever, all section pages and the front page areaccessible from anywhere in the site.

Within a page, classes of text for differ-

ent 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 devicesWeb 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. Anargument has been made by Lynch that familiar-

ity 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)

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 i n

the site.


10/18


Dyson & Picho-Owiny

2 6

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 andCascading Style Sheets.

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 5. First verbal interface site.

Figure 6.

Second

verbal

interface

site.


11/18

2 7


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 direc-tion, 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 four-

column 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 (horizon-

tal and vertical spatial relationships) is reminis-cent of design for print, such as timetables and

newspaper grids.

9.2 Graphic interface web sitesThe 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

Figure 7.

Third verbal

interface

site.


12/18


Dyson & Picho-Owiny

2 8

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 conven-

tional 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 naviga-

tion, 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 aresupported 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 rela-

tively small space. The user may have to repeat-

edly 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 backgroundand one in the foreground. The image in the

background window changes to reflect the

nature of each section. The content and naviga-

tion 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 tocreate a third approach. In both of the com-

bined 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 access-

ing 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.


13/18

2 9


Figure 10.

Third graphic

interface

site.

Figure 11.

First combined

interface site.


14/18


Dyson & Picho-Owiny

3 0

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. Inadopting two contrasting approaches (verbal vs.

graphic) a structure is created for this explora-

tion.

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. Knowl-

edge of the user group and familiarity with the

material also contribute to the development of alogical 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 construct-

ing 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 multidimen-

sional. The process of systematically analysing

the documents may be more important than the

outcome, the detailed descriptions.

10.2 General feedback on the projectThe small group of students who carried out

this project were asked for their feedback at theend of the project. There was a general consen-

sus 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 projectbut 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


15/18

3 1


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 shouldlearn. 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-

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. Theoreti-

cal 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 skillsbeing less developed. The proposed int roductory

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 presenta-

tion 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.


16/18


17/18

3 3


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).

3 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.4 Adobe Systems Incorporated, http://

www.adobe.com. Accessed on 25 June 1997.5 Department of Typography & Graphic Communi-

cation, The University of Reading. http://

www.rdg.ac.uk/Typography. Accessed on 6 March

1998.6 Ray Larabie. http://www.globalserve.net/~rlarabie/

freefont.htm. Accessed on 25 June 1997.7 This student, Enola Wright, graduated in July 1998

and is now a Web Site Manager for an electronic

software distribution company.8 Crystal Waters, Web concept & design. ht tp:/ /

www.typo.com/wcd/wcdintro.html. Accessed on 15December 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 Communica-

tion 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.


18/18

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.

Desinging for the Screen

Documents

Transcript of Desinging for the Screen