This chapter deals with setting out the design of Student.Manchester.  As in what will go into it and how that will be presented to the world.  How the design is implemented is dealt with in the next chapter.

1 Content.

For a web site to attract visitors it needs something to draw them to it: Content.  If there is nothing of interest at the site then few people will visit and no one will return.  Drawing from the results of the survey (Chapter 3), a list of subjects to cover was devised.

Information to be displayed for most subjects will be in the form of; the Address, Phone/Fax number, opening times and a description, with the location displayed on a map, unless otherwise stated.

The list of subjects is as follows;

•  Bars: Details about the bars, pubs and café bars in Manchester.  A bar has been defined as a place that serves alcohol for the best part of the day, whether or not it is open late.
• Clubs: Defined as places that open about 9pm, stay open till 2am or longer and play music.
• Eats: The various restaurants and snack bars scattered around the centre of Manchester where affordable food is available.
• Shops: A selection of the interesting shops in the city centre.
•   Accommodation: A guide to the areas in which a student is most likely to choose to live.  With a clickable map of the main areas linked to descriptions from the Student Housing Guide (Anonymous(h3) 1998) and a noticeboard for students to place accommodation ads. 
•   Cinemas: The main cinema's with links to their web sites (where available) and details of what's showing (via www.scoot.co.uk).
• Travel: Help with getting into, out of and around Manchester.  With interactive maps of the centre and down to Fallowfield, links to sites such as Railtrack (train timetables), road route planning sites and airlines.
•   Around Town: A guide to the interesting places around Manchester, such as the Lake District, the Peak District, North Wales and the Yorkshire Dales.
•   Search the Web: To be used as a jumping off point to the rest of the web. Contains links to news, weather and Yellow pages for Manchester (via Yahoo) and links to the Excite and Yahoo search engines.

From the user’s standpoint the hierarchy of the site will look something like this:

 
 NB Due to time constraints not all sections could be finished and some not even started, but the basic framework is there so that Student.Manchester can be fully populated at a later date.

2 Conceptual Design.

“The heart of design is communication: defining a problem and creating a solution that balances pure information with an aesthetic that gives the message voice” (Veen 1998).

Almost immediately after the first graphical browsers were released, a division appeared between what has been called the ‘structuralists,’ who advocated structure over design and the ‘presentationalists,’ who advocated design over structure.   HTML was designed specifically as a semantic markup language, with few layout capabilities. The underlying philosophy was that content could be marked with descriptions; this is a headline, this is a quoted passage, etc.  Then any machine in the world could interpret those tags in an appropriate way, leading to the universality of the web as a way to distribute content.

But then the web got really popular…

One way to formulate a design philosophy is to think of web sites as lining up on a continuum between a library and gallery.  A library's sole intent is to take inquisitive people to the information they are seeking with as little effort as possible.  A gallery offers similar amounts of information, but through a much more experiential path (Vreen 1998).

For example: imagine if the Yahoo web site were structured like the game Myst, in which the thousands of site listings were hidden behind layers of mystery, requiring exploration to find them. This might be interesting as an exercise in alternative information display, but rather annoying when the user needs to find a site such as ‘slap a spice girl’ quickly.

Good design is much more than decoration, just as well-written code will take a confusing hierarchy of data and guide an audience through layers of information to the nuggets it needs, so will a good design.  The co-ordination of the two is invisible to the user when done well and painfully obvious when not.  The latest cutting-edge browser features may give pages a highly specified look, but at what cost?  Does it matter that only seventy percent (or less) of the audience will see the version intended?  How does the designer know who can see what?  All these factors have to be designed for.

The best place to begin is by matching features with information: design must always match content.  For browsers that can’t cope alternatives must be used, such as JavaScript to divert browsers to pages specifically designed for them, the use of ALT tags for those that surf with images off etc.

To make the user interface as intuitive to use as possible will help with the users progress through a computer system, to this end Nielson (1994) developed a set of ten Usability Heuristics, which were updated by Instone (1997) for use in web design.  A selection of the most important criteria is presented below:

Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Make sure each page is branded and indicates which section it belongs to.  Links to other pages should be clearly marked.

Match between system and the real world: The system should speak the users'  language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

On the web, it is important to be aware that users will probably be coming from diverse backgrounds.

User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue.

Many of the "emergency exits" are provided by the browser, but there is still plenty of room to support user control and freedom.  A "home" button on every page is a simple way to let users feel in control.

Consistency and standards: Users should not have to wonder whether different words, situations or actions mean the same thing.  Follow platform conventions.

Within the site, use wording in the content and buttons consistently.  A site should fit in with the rest of the Web to some degree.  Underlining words (using the <U> tag) will cause confusion: as an underlined word or phrase is commonly associated with a link.

Recognition rather than recall: Make objects, actions, and options visible.  The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

For the web, this heuristic is closely related to system status.  If users can recognise where they are by looking at the current page, without having to recall their path from the home page, they are less likely to get lost.  Good labels and descriptive links are also crucial for recognition.

Aesthetic and minimalist design: Dialogues should not contain information, which is irrelevant or rarely needed.  Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Extraneous information on a page is a distraction and a slow-down.  Rarely needed information should be accessible via a link so that the details are there when needed but do not interfere much with the more relevant content.  Make sure content is written for the web and not just a repackaged brochure. 

Help and documentation: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Some of the more basic sites will not need much documentation, if any. But as soon as anything complicated is added some form of help will be needed.  Users should feel like assistance is never too far away.

“Metaphor can be a powerful tool for communicating complex ideas and generating enthusiasm.  By suggesting relationships or by mapping the familiar onto the new, metaphor can be used to explain, excite and persuade.  In 1992 vice-presidential candidate Al Gore popularised the term Information Superhighway.  This mapped the familiar and respected metaphor of the highway structure of the USA onto the new and unfamiliar concept of the national (sic) information infrastructure” (Rosenfeld and Morville 1998).

For the web, three types of metaphor can be applied:

• Organisational Metaphors: Deals in familiarity with an organisation’s physical structure.  This has more to do with established organisations that already have structures (departments) familiar to the average user.  Such as the Business, Science Fiction and Travel departments in a bookstore.
• Functional Metaphors: Makes a connection between the tasks that are performed in traditional environments and those in new environments.  For example browse the shelves, search the catalogue or ask the librarian for help in a library.
• Visual Metaphors: Leverage familiar graphic elements such as images, icons and colours to create a connection to the new.  For example the use of an envelope to indicate an email address.

By providing familiar structures these will help the user to navigate in a more meaningful way.

Armed with this information
 an initial design was sketched out to act as a blueprint (Fig. 2-1).

From this sketch the site blueprint and the design of the main interface were developed.

3 Navigation Systems.

Getting lost is often a bad thing.  It is associated with confusion, frustration, anger, and fear.  In response to this danger, navigation tools have been developed to prevent people from getting lost.  From breadcrumbs to compass, maps, street signs, and global positioning systems, people have demonstrated great ingenuity in the design and use of navigation tools.  They are used to chart courses, determine positions and to find the way back.  They provide a sense of context and comfort, as new places are explored (Rosenfeld and Morville 1998).

On the web, navigation is rarely a life or death issue.  However, getting lost in a large web site can be confusing and frustrating.  While a well-designed hierar­chical organisation scheme will reduce the likelihood that users will become lost, a complementary navigation system is often needed to provide context and to allow for greater flexibility of movement within the site.  Navigation systems can be designed to support associative learning by featuring resources that are related to the content currently being displayed.  For example, a page that describes a product may include links to related products and services.

The constant challenge of navigation system design is to balance flexibility of movement with the danger of overwhelming the user with too many options.  Navigation systems can be composed of a variety of elements:

• Standard Hypertext Links: The most common and familiar navigation structure on the web is the Hypertext link.  The standard format is for it to be in a different colour (use the same colour for links throughout the site to maintain consistency) than the main text and underlined.  As the cursor moves over the link it changes from an arrow to a hand with a finger pointing.  There is very little room for customisation with text links.
• Rollovers: Here the link is represented by a graphical element that changes to another graphic as the mouse moves over and back again as the mouse moves away: in the more advanced browsers another graphic can be used when the mouse is clicked on the element.  This allows the designer to provide additional contextual information;

  For users familiar with standard applications such as Microsoft Word, the convention is for the use of buttons that change state (appear depressed) when clicked on.

  To reinforce an iconic metaphor or provide more information.  For example a link to a help section may take the form of the commonly accepted question mark symbol, but to provide positive feedback as to its meaning it could change to a graphic with the word ‘help.’ Another one may be used to indicate that a section is not yet available or provide more information about the link’s destination (Fig.3-1).

To hide away additional links that would otherwise clutter the screen.

• Drop down menus.  Serves to ‘tuck away’ additional links and so reduce screen clutter.  As this does not make use of graphical images it reduces download time of page (Fig. 3-2).

• Imagemap: A graphic, such as a map, that when clicked in certain places opens documents related to the position clicked on.

• Tables of contents: A simple list of the sites content: either listed alphabetically or by subject area.  Some sort of overview of the site should always be provided, either by this or a Site Map.

• Site Map: A graphical representation of the web site, usually in the form of an imagemap but may be composed of a set of graphical links (Fig.3-3).

4 The Use Interface.

4.1 Typography.

The typefaces commonly seen in print have been designed to be typeset digitally and printed on paper, but as more people read more type on computer screens, it becomes painfully obvious that they're reading a type designed in another era for another medium.  That's why type on screen can look unpleasant and is often painful to read (Will-Harris(2) 1996).  In the past, every time a new typesetting or printing medium appeared, designers created typefaces to take advantage of it:

The Serif typeface has small finishing strokes at the ends of the main character stems (Fig.’s 4.1-1 & 4.1-2).  It was originally used to tidy up the rough appearance of letters chiselled into stone and has also played a functional role in handset type by bracing the thin strokes on lead characters to keep them from breaking under the tremendous force of the old-style printing presses (Rabb 1990).

The Sans-Serif (Fig. 4.1-3) typeface is composed of letters without extra terminating strokes, is usually designed with little or no contrast between vertical and horizontal stroke widths and somewhat bolder or heavier than serif typefaces.

On the printed page, serif fonts are traditionally used for body text because the serifs are said to help guide the reader’s eye along the line of text.  Sans serif, on the other hand, are used for headlines and bold statements.  The computer world of standard 72-dpi (dots per inch) monitor resolution is not the same as the print world (Vaughan 1989).

Designing for a computer screen has its own set of problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, and the problems multiply.  The only relatively widespread typefaces specifically designed for the web are Verdana and Georgia, both designed by Microsoft, freely available, but not as widespread on the Unix or Macintosh platforms.

HTML allows the designer to specify fonts or at least a preferred font to be rendered by a
browser using the tag <FONT FACE>.

This is beset by two major problems:

1. The user could have their own preferred font set up to override those set out in the tag.

2. The chosen fonts may not be available (installed) on the user’s computer.

Due to these limitations many people use graphics for headlines.  These can be created in Photoshop, Fireworks or any other graphics package, saved as GIF files, will generally look better than the indigenous type and give a lot more scope for individuality.  Though they take longer to download, there is the possibility that the user has switched off, or can't display, graphics.  So it is especially important to make use of the <ALT> tag for graphics that contain text so that the headline message is not lost altogether.

Two Sans Serif fonts, Bajoran and Nasalisation, were used two construct the main headings (Fig. 4.1-5) in Student.Manchester.  These were chosen mainly for aesthetic reasons, in that they seemed to fit in, they were modern typefaces, familiar but not easily identifiable.  They were both obtained from one of the many font archives on the web (Crankstore Freefont Archive 1998).  Bajoran is more familiar as the typeface used in the Star Trek films and Nasalisation, as the name implies is more commonly associated with NASA (National Aeronautics and Space Administration).

Even though fonts can be defined in HTML using the <FONT> tag, the two fonts mentioned are not installed as standard and would therefore not necessarily be rendered correctly on any other computer. 

The following headings have been constructed in Fireworks, which allows the use of a number of effects to make the headings more striking (Fig. 4.1-5).  The <ALT> tag has been used as an alternative for when graphics have been turned off.

As, obviously, this can’t be done for every bit of text (it would slow download times considerably) so the <FONT FACE> tag has been used to define a set of preferred fonts (Fig. 4.1-4) for the main body text, these are Arial, Helvetica and Sans Serif (in that order).

Due to the fact that different browsers will display font size differently a graphical representation of the main navigation bar has been created for the site.  It is made up of a number of images of the same height and width, held together in table (Fig. 4.1-6).

Textual feedback is provided by the use of rollovers.
4.2 Iconography.

Pictures were the first form of written communication when human beings wrote their experiences on cave walls thousands of years ago.  Some of the earliest languages used pictographs (hieroglyphs) to represent words (Ancient Egyptian) as do some languages in use in the modern world still do, such as Mandarin Chinese.  From these beginnings the graphical image has stayed as an important method of communicating information.  Thus when designing an interface the use of graphics can be a useful aid in navigation.  Remember the phrase;

“A picture is worth a thousand words.”

Though it may be cliché, it is also true.  People who can’t read understand the meaning of these images (Fig. 4.2-1):

Images as icons (or pictograms) can be used to represent information in much the same way as text.  Icons represent something more abstract than what they actually show.  Even if they show only a concrete object (e.g. a horse crossing a road) this serves as a representative for an abstract group of objects (not only this horse, but all horses cross here).  The meaning is either very obvious to everybody or has to be learned (Strothotte and Strothotte 1997).

Meaning should be well defined, but context-sensitive so that it can be replaced by words.  Only if a whole group of people associate the same pre-defined meaning with a picture can it be classified as an icon.  Over the years a small number of icons have become familiar to web users (Fig. 4.2-2).

To understand an icon, it must first of all be recognisable.  Recognition comes from matching the visual symbol with a memory, or experience stored in the brain.  If the symbol is poorly represented because of inept draughtsmanship or if its significance is beyond the viewer's experience, then recognition fails.  It can also fail even if the representation is good and the viewer knows what it is, if it is presented out of its usual context (Gillespie 1998).

Thus icons are useful if:

• They contribute to a consistent, attractive graphical identity.
• They are familiar and easy for the user to find on a page (if drawn from concepts conventionally understood and are used consistently).

For the web icons are fine for representing key concepts, but should not be overdone.  It is also advisable for some form of textual label to accompany them (Rosenfeld and Morville 1998).

The icons designed for Student.Manchester (Fig. 4.2-3) combine the familiarity of the established icons with the underlying theme of the site.

Each icon used is combined with a text version to explain its meaning, by means of JavaScript code that enables images to be swapped when the mouse passes over them.  This aids contextual meaning.

4.3 Presentation Systems.

To enable the design to be effectively presented to the user it needs to be easy to use, achieve visual balance and be pleasing to the eye.  It was decided that the main criteria for the design would be:

• The site’s title should always be visible.
• The search option should always be visible.
• The main navigation should always be visible.
• The help and home options should always be available.

To enable this a number of presentational options were considered;

1. The use of tables to construct a rigid display, to keep onscreen text to a minimum to try to prevent scrolling.  This method is used in Virtual Manchester (see Chapter 2).

2.Split the interface into separate frames.

3.Use a ‘floating window’ to control content in the main window.

Option 1 usually requires scrolling at some point and all the elements would scroll off the page. In order to best fulfil the criteria this leaves options 2 and 3.  Option 3 is the most striking, but may be hampered by unfamiliarity to the majority of web users.  It is also worth noting that this style is conspicuous by its absence, though it remains a useful idea and may be incorporated at a later date.

This leaves option 2, frames, which fulfils all the stated criteria.  Generally frames are much maligned on the web, this is mainly due to bad design.  Though there are a number of valid points (after Nielsen 1996):

• Individual documents cannot be bookmarked: This is mostly down to browser deficiency.  Why was the facility not brought in with the first browser able to display frames?  The aim of the design will be that, at most, a document will be 3 clicks away from the main screen.

• Framesets forever to load: This is mainly due to the number of requests to the server that the browser must make.  For example a frameset containing four frames involves the initial call plus four more, making five calls in total.  So, yes, they do take a bit longer, but this can be minimised with good design and once the main frames are in place the only one that changes will be the main one, which will be constantly surrounded by a familiar border.

Frames' navigation bars take up too much screen space: This isn’t really the case, as any type of navigation bar will take up area however they are implemented.

A rough design was sketched out on paper (Fig. 4.3-4) and from this the frame layouts were developed (Fig.’s 4.3-5 & 4.3-6).>

Once the first (main or home) screen is loaded, the contents of MENU and TITLE will not change, only the contents of MAIN.  All but a few external links will cause new windows to be spawned, as will activating Help, Site Info, Copyright or Search.  The new window concept allows additional information to be opened without interfering the ‘flow’ of the main document.  This allows new windows to be positioned to the side of the main (on larger monitor sizes) and enables accessory information to be viewed with the main source (Fig. 4.3-7).

The design of the site will take into account monitor resolutions 800x600 and display correctly on this size greater.  Even though there are lower specifications (e.g. 640x480), they generally not being used to view web (they inadequate for job). also has be a point when designer stops calculating very lowest specification as it hamper design.  An alternative version with fewer features constructed less capable browsers computers.

5 Information Architecture.

How is the web site made up?  What pages are linked together?  What are the components of each page?  The site as the user would perceive it is described in section 1 with a visual representation, the site map (Fig. 5-1a & 5-1b).  How the site is broken down into its individual components is described here.

During the transition from conceptual design to production, the focus shifts from external to internal.  Rather than designing high-level architectural concepts of the outward appearance of the site, it is now to time to communicate detailed organisation, labelling and navigation concepts.  This shift is similar to that in the traditional world of architecture and construction. The archi­tect may work closely with the client to make big picture decisions about the layout of rooms and location of windows.  However, decisions regarding the size of nails or routing of the plumbing typically do not involve the client.  Often neither sufficient time nor interest justifies close client involvement in these minutiae.

Detailed architecture blueprints serve a very practical purpose.  They must map out the entire site so that others can build upon the work started.  The blueprints must present the complete information hierarchy from the main page to the destination pages.  They must also detail the labelling and navigation systems to be implemented in each area of the site.