8. Structure and Interface Design

Specific design decisions are discussed and justified.

8.1 Structure
Whilst the core purpose of the site is its collection of images it was decided to offer a range of other resources to provide added value and to encourage as broad a range of users as possible to visit. A total of five main content-holding sections were developed, a sixth provides information about the site. These sections are described below:

• The library. The searchable collection of images for royalty-free download. The library offers a Quick Search, Advanced Search and lightBox.
  
• The lightroom. An interactive gallery of creative photography presented creatively.
  
• The basement. A virtual café in which users can contribute to (or begin) discussions and read and place classified advertisements.
  
• The study. A collection of online articles (and eventually, it is hoped, tutorials) on photographic related topics.
  
• The hub. A comprehensive collection of photographic links of interest to photographers and image users.
  
• The lobby. Information about twinIsles.

In addition to the main sections, help, news and contact pages have also been provided.

The main sections have (mostly) been named according to the metaphor of a building. This has been done to spark the curiosity of the intended target audience and is in keeping with the creative nature of the site. The potential for confusion arising from the naming is reduced by i) the provision of section descriptions on the home page, ii) the use of status bar messages upon menu rollover, and iii) the employment of a scrolling text "reminder" on key pages.

The prototype does not, at present, include a mechanism for online purchasing. It does, however, offer a feature which is analogous to the ubiquitous e-commerce shopping-cart; namely the lightBox. This enables a user to choose a selection of images as they search. These images may then be viewed on a single screen, the lightBox.

The LightBox is implemented by means of a cookie, which stores a string consisting of the concatenation of the identifiers of the currently selected images on the user's computer. The cookie is set to expire 7 days after being written, so if a user returns to the site within 7 days they will be able to retrieve their previously selected lightBox. The lightBox may currently hold up to a maximum of 30 images.

8.2 Visual Design
The aim of the visual design was to create a simple, uncluttered look, which focussed user attention on the content.

The front page contains the site logo in its standard position at the top of the page and a Flash movie previewing some of the images from the collection with 6 buttons linking to the major sections. The buttons consist of the section names in three-dimensional text combined with a textual description of the section's contents. A black background has been used for visual impact. An alternative front page has been provided for users unable to view Flash.

Internal pages have black text on a white background. The site logo appears at the top of every page (except the lightroom). Beneath the logo is the main menu bar. It was decided that the menu would be placed at the top rather than the side of the page in order to maximise the width available for displaying preview images. In the library a secondary menu bar appears below the main menu. On key pages a scrolling text display is used to remind users of the content of each section, on the Quick Search page the scrolling text describes the main categories covered by the stock. A sentence just below the menu bars informs the user which section they are in and summarises its purpose. Arial text has been selected for its clean, modern appearance, its widespread availability on client machines and because it was felt to be more legible on-screen than a serif font.

When selected, the lightroom opens in a new window. Its appearance is completely different from the rest of the site which, given its purpose, was felt to be appropriate. It is anticipated that future lightroom exhibitions will each have a unique appearance. The lightroom is implemented as a Flash movie. No alternative has been provided for non-Flash browsers, however the help section informs users that Flash is required to view the lightroom.

The Quick Search page consists of a search text box, a textual index of major categories and thumbnail images linking directly to the site's major collections. The design serves to provide users with a number of ways of reaching the content as well as informing them of major themes covered.

The Advanced Search page consists of two search text boxes (for subject and location) together with thumbnail's previewing the major collections.

A successful search (i.e. one which returns some results) generates a series of thumbnail images. These are displayed in uniformly sized light grey squares. This simulates the effect of a photographic slide in a mount and also it was found that the light grey provided the best compromise background colour against which to display a wide variety of images.

When a thumbnail image generated by a search is clicked, a larger image is displayed in a new window. This window features only the site logo, the image, a link enabling the image to be added to the user's lightBox (if appropriate), and a close button.

The lightBox may hold and display up to 30 user selected images. The images are presented as thumbnails in grey squares in a similar manner to search results, categories and collections. Clicking on a thumbnail displays a larger image.

The study consists of a list of links pointing to photography related articles (only two are available in the prototype). Articles open in a new window and consist of a site logo at the top of the page, the text of the article and a copyright message and site url at the bottom. The typography consists of black text upon a white background and article text is confined to the central 80% of the page width for ease of printing.

twinIsles features a mailing list facility, which will be used to keep interested visitors informed of developments to the site (the list is administered free of charge by Bravenet Web Services Inc [9]). Forms enabling users to join the mailing list have been positioned at the left hand edge of the lobby and study, and at the bottom of the Quick Search pages.

A certain amount of white space has been deliberately allowed on most pages, firstly to emphasise the simplicity of the design, and secondly with a view to possibly accommodating a limited amount of advertising in the future.

8.3 Navigation
Links to the main sections, the home page, and the help, news and contact pages exist on every internal page within the site (except for the lightroom, which is structured differently and appears in its own window).

The main menu bar, which appears just below the logo, consists of white text on a red background within a table to simulate buttons. The current section is indicated by being shown in reverse form (i.e. red text upon a white background). JavaScript is used to provide a text colour change from white to yellow upon rollover, an explanatory message also appears in the status bar.

The library features a secondary menu (with a green background), from which users may move between the Quick Search, Advanced Search and lightBox, and operates in a similar manner to the main menu.

The mechanics of searching are described below in 9.4. A successful search produces a set of thumbnail images, which may be clicked to display a larger, downloadable image. The clickability of thumbnails is conventional behaviour found throughout the web and is further emphasised to the user by means of the cursor change on rollover. No additional explanation was felt necessary on the results page, however this feature is described in the how to use (help) section.

The lightBox is a sub-section of the library and as such contains the standard main and secondary menus. Links enable the user to manage their lightBox by removing individual images and by emptying the lightBox. The link to empty the lightBox is located at the extreme right of the screen to reduce the likelihood of it being clicked unintentionally.

The basement consists of links to the discussion forum and classified advertisement feature. Both these facilities are provided free of charge by Bravenet Web Services Inc [9]. The discussion forum and advertisement pages both contain links back to twinIsles.

The larger image display page, lightroom and articles from the study all open in new windows.

With the larger image display page this approach was adopted due to the possibility that the user may wish to keep the results page on screen and/or display several large images simultaneously. The only user controls are i) an option to add the image to the user's lightBox, and ii) a button to close the window. The close button is provided to emphasise that this is a new window.

The lightroom contains only two external links, one to the archive of previous lightroom exhibitions (empty at the launch of the prototype), and one to close the window. If by some chance the lightroom has been reached directly from outside of twinIsles the close link takes the user to the twinIsles home page.

Study articles contain a single link, i.e. the site name and url at the bottom of the page. Clicking this link will close the window if it has been opened from the study, otherwise the user will be taken to the twinIsles homepage.