About us RCL 20 Projects Colour Selector Library
Projects
Contracting
Paola Kathuria
Frank Wales
Clients with several projects
the-racehorse.com
BBC
CRASH
Oxford University Press (1997-2005)
Redesign of OED Online
Redesign of OED marketing site
General & technical consultancy
Redesign of OED Online Help
OED Online Tour
OED marketing site
OED Online prototype
@ Limitless Innovations (2000-2003)
Berry Bros. & Rudd
Cardata
One World Telecom
Scott Morrison Photography
Sysao
Gratis & personal projects
Paolability Jewellery
Windsor Half Marathon
Psychology of Programming Interest Group
InetUK Usenet FAQ
Other sites by Paola
@ Limitless (1995-1999)
SilverPlatter Health & Safety Publishing
Institute of Physics Publishing
EU & UK ISP surveys
New Millennium Experience
Moorfields Eye Hospital
totally-essential.com
Cybersport
Ace Records
Embassy of Japan
Reuters Insurance Information Services
Carsource
IBM Global Networks
Barclays Bank BarclayNet
Sainsbury's Wine Direct
@ Zengrange (1984-1990)
HP-41 Emulator for HP-48
Technical services

OED Online Tour ~ Oxford University Press

Paola Kathuria @ Limitless

1999

[Dictionary Tour OED Online, 2000]
OED Online Dictionary Tour, 2000

OED Online is an online subscription service to the 20-volume second edition of Oxford English Dictionary (OED). It also provides access to later Additions, and revised and new entries that are added quarterly.

OUP invited us to help them design and build a tour of OED Online to add to the public OED web site.

Purpose of the OED Online tour

An online tour of OED Online would serve several purposes:

  • a sales tool for potential subscribers
  • a product overview for new subscribers
  • help for librarians who support the service at subscriber institutions
  • information for the media

Features

The tour design process is described in detail in this case study. For a quick overview, the main features of the tour are:

  • Structured as a series of consecutive tours
  • A tour index (of 31 tour steps) is available on every page
  • Visitors can follow the tour in order
  • Visitors can jump to any tour step
  • Works at 640x480 and is better at higher screen resolutions
  • Minimum dithering on 256-colour displays
  • Vistors can hide the tour index
  • Features full-sized screenshots from OED Online
  • Uses frames, but each tour page can be individually bookmarked or referenced
  • Framed pages can be correctly reframed if seen out of context
  • External stylesheet creates a consistent style
  • No plug-ins, non-standard technologies or server-side software needed

Initial research

[Other web-based tours]
One of four web-based tour examples of web services found in 1999

We searched for other web-based tours of web services; surprisingly, very few could be found via search engines. We found four of interest and passed the addresses onto OUP with our comments on the presentation and functionality.

In one, screen-shots were too small to be of any use. Another included previous/next links for linear navigation and a pull-down list to jump to another tour step.

Tour structure

[Sketch of a tour structure]

As a result of this review of other tours, we proposed the idea of a "grand tour" comprising individual tours on specific subjects.

Each tour would consist of a number of "tour steps" covering a specific subject. The next tour step at the end of one tour would be the first step of the next tour. Visitors could read the whole tour in a linear way, by way of a "next" link on each tour page, or they could go to any tour step in any order.

Planning workshop

[Planning: list features and benefits] [Planning: list tasks]
Notes from the planning workshop - listed features & benefits, and user tasks

We spent a day with OUP to discuss and agree tour content. We ran the workshop which started off by making two lists, one of OED Online's features and benefits and the other of specific questions that OED users would want to ask of the material such as: "find quotations in a particular work" (e.g., Faulkner's Hamlet rather than Shakespeare's).

We organised the features and benefits in a way that could be told in a linear story form, and we agreed a principle that the tour would only discuss subjects that could be illustrated with actual examples by use of screenshots.

This resulted in seven individual tours; the content for each of these was sketched out on a large piece of paper, referring to our original lists to make sure that all features, benefits and tasks had been accounted for.

After the workshop, we wrote up and refined the tour structure. The next stage was to agree the headings for each tour and tour step, as well as how the tour was to refer to itself (e.g., "tour step" or "tour stop").

After this, we went through three phases of prototyping: page layout, content and visual design.

Page layout

[Prototype: page layout]
[Prototype: page layout diagram]
Prototype (and diagram) of page layout with draft content

This structure entailed having the tour index available at every web page. As a result of their market research, a requirement from OUP was that OED Online and other site content had to work on 640x480 screen resolutions. This meant that a vertical tour index would use up valuable screen space.

We decided to introduce a feature to hide the index; visitors could click a 'hide' button so that the tour content could occupy more horizontal space. Once hidden, the index would remain hidden until the visitor chose to redisplay it.

It was clear that the tour index had to be vertical. we initially tried the traditional left-hand approach. At 640x480, the index overwhelmed the tour content.

[Tour page with index]
[Tour page w/o index]
Tour step 11 shown with and without the right-hand tour index

We moved it to the right and found that it worked much better. The purpose of the tour index was recognisable by its layout and formatting; we felt that putting it on the right-hand side removed any distraction from the tour content whilst being easy to locate and use when necessary.

By end of this process, we had prototyped five different page layouts.

Content

Once the tour structure was agreed, we wrote the initial draft of the tour text, taking account of where the planning group had said there should be a screenshot from OED Online. OUP made a list of the actual examples to use and we took screenshots from the beta OED Online.

[Tour page with index]
[Tour page with full-sized screenshot (w/index)]
Tour step 11 showing a resized and full-sized screenshot from OED Online

The tour would not work well if the screenshots were only available full-sized; it was obvious that they would initially have to appear as thumbnails. OUP made the great suggestion that when a thumbnail was clicked, that it expand in context of the tour text - that is, a visitor could continue reading rather than have to go "back" to the tour.

The implication of the suggestion was that there would be an additional content web page for every enlarged image that could be shown; clicking on a thumbnail would display the content page with the same text but with the full-sized screenshot in place of the thumbnail. The frames approach meant that only the content frame would have to change which would speed up display.

We experimented with different thumbnail sizes. Because the tour presented a text-based service, the thumbnails were always illegible. A set of thumbnail graphics would increase the tour size. We went for an unconventional approach: rather than have a set of thumbnail graphics, thumbnails were based on the full-sized screenshots and resized in HTML as a percentage width (25%).

[Thumbnail]
What looks like a thumbnail screenshot from OED Online is really the full-sized screenshot reduced in HTML

This meant that the actual thumbnail size depended on the visitor's browser width (and screen resolution). Because the thumbnail was also the full-sized screenshot, thumbnails expanded very quickly. The frames approach meant that the 9K tour index was only downloaded once (and then cached). The full-sized images were around 32K each - it was decided that this was an acceptable download time if most people expanded thumbnails.

Thumbnails were headed by a "shrink" button in the button style used on OED Online. The thumbnail itself was a link to the full-sized screenshot.

[Full-size screenshot extract]
The full-sized screenshot displays immediately

When a thumbnail was clicked, the content frame was updated with a new page in which that particular image was shown full-sized, with the image shown at the top of the page. It was decided to do this in case people didn't realise that the tour text continued below the full-sized screenshot.

The full-sized screenshot was followed by a "shrink" button. Both the button and the full-sized screenshot linked to the page with only thumbnails.

We added a panel at the top of each full-sized screenshot taken from OED Online. It included the brand identity (the OUP logo in the house style) and the site URL (www.oed.com) in case the image was seen out of context.

[Final layout prototype]
The last layout prototype before starting the exploration of colour combinations

At the end of this content phase, near-final text, screenshots and other tour images had been added to the prototype. The next stage was to apply the visual design.

Visual and graphic design

[Colour combination #12 of 15]
[Colour combination #4 of 15]
[Colour combination #5 of 15]
Three of the fifteen colour combinations explored

We approached a graphic designer only after the page layout and content prototype had been completed. Bill Jones, of Jones Design Associates, had worked as a Senior Designer for Denison Design and had worked on the original OED marketing web site in 1998.

[OED colours]

The design brief from OUP was to use their brand colours and to stay recognisably close to the style already used by the OED web site and OED Online. However, there was freedom to explore alternative button styles, such as the use of icons.

The designer was given access to the prototype and came up with three colour combinations. We created a further twelve. The eleventh combination soon became the favourite.

Meanwhile, Jones Design Associates worked on icons and button styles. We described what each button was for and sketched our ideas. We chose or revised the concepts and these were eventually worked up to buttons that could be used on the tour.

Print Tour button development
(graphic design by Jones Design Associates)
[Initial icon ideas for Print Tour]

1) Initial icon concepts

[Revised icon for Print Tour]

2) Worked-up icon of the chosen route

[Final icon for Print Tour (unselected)]

3) Final icon graphic

[Print Tour button (unselected)]
[Print Tour button (selected)]

4) Final buttons (shown here w/o the text label)

Buttons were round and 3D, as they were on the main OED web site and adopted the style of conveying state - "selected" or "unselected" - through colour.

[Icon button: next] [Final button: next]
[Icon button: restart] [Final button: restart]
[Icon button: hide index] [Final button: hide index]
[Icon button: show index] [Final button: show index]
Original iconic buttons (left) and the "classic" buttons (right) that were eventually used in the tour

OUP eventually decided to adopt the button style used in OED Online. However, the tour introduced a new background colour. The tour used a number of screenshots from OED Online - when shown full-sized against the standard background colour, only the image border indicated what was image text and what was tour text.

We used a lighter version of the standard background colour. It isn't from the "web-safe" palette but would never dither because the background colour was set in HTML, not a tile image. If the tour was displayed on a monitor limited to 256 colours, the background would appear white, which was deemed an acceptable compromise.

Construction

[Tour step 13]
Step 13 in the Dictionary Tour, 2000

To try out each colour combination, three tour pages were marked-up (the tour start page, and a tour step with and without the index). Creating the actual tour started with applying the chosen visual design to each tour web page.

To get the prototype to production quality, the HTML was checked and adjusted. Several changes were made because of the use of frames when OUP decided not to include a print version of the tour at launch:

  • Each tour step, both with and without the tour index, had its own frameset web page - that is, one could bookmark any tour step.
  • We devised a naming system to help visitors who may see a content frame unframed. Framed content web pages were given the same filename as their parent (frameset), such as step-11.htm and were placed a directory below. Content pages were put in a directory called "remove-to-reframe".

    If the deframed pages were ever seen out of context, some people may notice and edit the URL. Since the same filename was used for a content framed page and its parent, removing the content directory from the URL would reframe the page to the correct parent.
  • We wrote a program to add page-specific JavaScript to the BODY tag of all the framed pages. If any were seen out of context (unframed) in a JavaScript-enabled browser, they would automatically redisplay framed.
  • Non-content pages include "nofollow" and "noindex" instructions for robots.

The Dictionary Tour was mentioned in many of the first reviews after OED Online was launched in March 2000. Visitor feedback includes the comment that the tour was "excellent, and one of the best uses of frames that I have ever seen." OUP have since updated the tour themselves to reflect new functionality in OED Online.

The tour was later deframed as part of our 2003 redesign of the Oxford English Dictionary web site.