|About us||RCL 20||Projects||Colour Selector||Library|
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.
An online tour of OED Online would serve several purposes:
The tour design process is described in detail in this case study. For a quick overview, the main features of the tour are:
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.
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.
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").
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.
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.
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.
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%).
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.
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.
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.
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.
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.
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.
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.
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:
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.
Copyright © Limitless Innovations 2020