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

Redesign of OED Online ~ Oxford University Press

Paola Kathuria

2005

[Original design]   [New design]
Original design (2000) New design (2005)

Following the success of our 2003 redesign of the public pages at the Oxford English Dictionary (OED) web site, Oxford University Press hired us to apply the design to OED Online.

We were briefed to make only the minimum of mark-up changes to apply the new design, effectively making this a reskinning project for the dictionary. This created an interesting challenge as it meant that we could not add or remove frames, move elements within frames or change the names, positions or sizes of the graphics, except in certain limited cases to improve usability.

We used the same graphic designer we worked with on the public pages redesign. Many of the elements in OED Online did not exist in the public site so we designed them from scratch with the graphic designer. The new design was implemented by HighWire Press using our new graphics, new style sheets, templates and documentation.

Background

The Oxford English Dictionary (OED) is the world's foremost scholary resource on the English language, and chronicles the development of the language from earliest times until the present day; it is much more than just a way to find out the meaning of a word.

Its web-based incarnation, OED Online, was launched in March 2000 and designed by OUP with Denison Design Ltd. It was a framed site made to work with at least Netscape Navigator 3 and Internet Explorer 4 at 640x480 screen resolution. The 'web-safe' palette was used for the colour scheme and graphical buttons; typography was limited to Times Roman and Arial.

As part of our redesign, we created a colourway based on one of the page types in the public site, we updated typography, developed a consistent and coherent button design and made usability improvements.

In addition to design and development expertise, we also provided appropriate analytical and operational support to the project.

Project stages

We defined these stages for this project according to our systematic methodology that minimises rework and promotes project progress:

Design Development
  1. Analyse browser stats (4-page report)
  2. Define design & technical approach
  3. Document public site design
  4. Document OED Online page types
  5. Classify OED Online buttons
  6. Present entry colourways (3)
  7. Button design routes (4)
  8. Present colourways for OED-2 entries
  9. Entrance page design
  10. Create mock-ups for all page types
  1. Create button graphics (120)
  2. Create web pages for each page type (40)
  3. Test web pages on different browsers/platforms
  4. Create HTML templates
  5. Document mark-up changes (57-page manual)
  6. Convert character GIFs (1,000)
  7. Test & retest HighWire's design implementation
  8. Recreate OED Online Help graphics (75)
  9. Recreate OED Online Tour graphics (60)

Preliminary analysis

[Browser stats]
JavaScript use over a holiday: different browsers for home and work

To provide a basis for the design process, we felt it was necessary to understand the technical constraints on OED Online's existing users. To do this, we wrote software to analyse the logs of nearly a million unique visits to OED Online; we also provided the computing environment to crunch through nearly 20 gigabytes of data in a matter of hours.

For example, we found 1,000 visits a week by users of Netscape 4.7. This confirmed the need to accommodate such older browsers rather than exclude them completely from the design. We also discovered that JavaScript use varied significantly over weekends and holidays, suggesting significantly different browsers were being used at home and work.

The results of this analysis complemented the design principles we established with OUP for the project, and helped to drive the design process forward in an informed and rational way.

Online collaboration

[Project wiki]
Project wiki home page

In order to improve communication between the project's geographically dispersed participants, we set up and ran a restricted-access web site for the project that all team members could access and modify for the duration of the project.

Called a wiki, this proved particularly valuable for exchanging information with HighWire, the eventual implementors of the redesign, as they are based on the west coast of the United States, far from us and from OUP.

Handover documentation

[Index of sample pages]
List of marked-up pages

Since we are also programmers, we understood the nature of the changes that HighWire, the site's implementors, would have to make to implement the new design. So we created detailed documentation for the needed revisions, consisting of frame-by-frame lists of changes, additions and deletions to the existing site's mark-up.

We also created fully-marked up versions of pages for all 43 page types and variations, and accompanying downloadable text templates, to make implementing and testing the new design as straightforward as possible.

Example mark-up documentation
[Example mark-up documentation]

Site Generation System

Independently, OUP created templates for the new designs of frameless pages themselves. These include the sign-in pages, error pages, the mail form and institutional usage stats pages.

To create these pages, OUP used the Site Generation System that we created for them in 2003 as part of the public site design and build. This is a web-based software package, written in perl on Unix, that creates the entire public site from XML and plain-text files, according to the complex rules for the structure and appearance of the public site at www.oed.com.


The redesign features many usability and design enhancements; we comment here on just a few.

Dictionary entries

The original design was constrained to 'web-safe' colours; these resulted in strong yellows. The redesign uses softer yellows, and uses different tints to section off areas of the page, such as the side frame from the rest of the entry.

We applied the public site design style of Georgia for the main text, Times Roman for page headings and Verdana for small text. In addition, quotations are a different colour, are indented, and have a softly-tinted background.

Original Redesign
[Original design, entries] [Redesign, entries]

Second Edition set

OED Online is effectively two publications: OED-2, as published in 1989; and the latest versions of entries. OED-2 entries can be searched and browsed separately from the most up-to-date versions. To emphasise the difference, current dictionary entries are in yellows, while OED-2 entries are in blues. OUP wanted to retain the Times Roman font for OED-2 entries, and there is no background tint behind quotations in these version of entries.

Original Redesign
[Original design, OED-2 entries] [Redesign, OED-2 entries]

Entry map

Original Redesign
[Original design, entry map] [Redesign, entry map]

We added soft grey vertical lines to the empty cells in the entry map so that elements within the same column were more strongly grouped visually.

Entry and results navigation

Due to technical constraints on OED Online, one set of button graphics had to work on two colours of pages: yellows and blues. To achieve this, we did not anti-alias the button edges.

In one special case, we made a flat semi-transparent graphic to be used as a label. The page background colour shows through and makes the graphic blend in on both backgrounds. Its flatness makes it distinct from clickable buttons whilst not looking out of place between two raised arrow buttons.

Original Redesign Close-up
[Original design, results navigation] [Redesign, results navigation] [Redesign, button zoom]
 
[Original design, OED-2 results navigation] [Redesign, OED-2 results navigation] [Redesign, OED-2 button zoom]

Footer tabs

The footer is the same yellow colour as the header in the redesign. This allows for lighter buttons in the footer. The redesigned buttons use the same white on red for selected+unclickable tabs. However, it uses the new standard button style for the remaining clickable buttons (blue on dark yellow). Together with the sentence case labels, the buttons now look clear and calm.

Original [Original design, entry tabs]   Redesign [Redesign, entry tabs]

These footer tabs were originally three-state buttons in that there was a greyed-out unclickable version. These appeared on page types on which the buttons could never be clickable. We adopted the design rule that such buttons would never be displayed, rather than always be shown greyed out.

Original [Original design, three-state entry tabs]   Redesign [Redesign, unavailable tabs not shown]

Entry toggles

We kept with the blue and red to denote whether a button was selected in these two-state entry toggles. We created a pushed-in style to distinguish it from unclickable selected tabs.

  Original [Original design, entry toggles]

Redesign [Redesign, entry toggles]

Print version of entries

The 'Print' button on entries displays an unframed page suitable for printing. We improved the header by de-emphasising the copyright notice in the page heading. We also added red lines at the start and end of the entry. These print versions use a single style sheet suitable for both screen and print.

Original Redesign
[Original design, print version of entry] [Redesign, print version of entry]

Top frame buttons

There was some confusion by visitors on whether the 'Lost for words' button in the top frame was associated with the input box. In fact, it displays a random entry.

We explored and presented various options, including using the new submit button style for the 'Find Word' button. The chosen design was to move the 'Lost for Words' button to the left of the input box. In addition, we tinted the 'Find Word' button green on OED-2 pages to denote the change in the scope of the search.

Original  [Original design, top frame buttons]
Redesign [Redesign, top frame buttons]
Redesign
(OED-2)
[Redesign, OED-2 top frame button]

Simple search

Original Redesign
[Original design, Simple search form] [Redesign, Simple search form

We made a number of small changes on the 'Simple search' form to improve usability.

  • We moved down the "for" and "in" labels next to the input fields they are associated with.
  • We added label tags to the radio button labels to make them clickable.
  • We applied a distinct button style to the 'search' form button.
  • We changed the 'Fewer option' and 'More options' toggle graphics to look like HTML links to make them distinct from the search button.
  • We put the search button last (although it is declared first in the HTML so that the visitor can initiate a search by pressing the Return key).

Advanced search form

We made a number of usability improvements to the 'Advanced search' form during the redesign. We explain these changes after these overview screenshots.

Original Redesign
[Original design, advanced search form] [Redesign, advanced search form]

Advanced search form, recent searches

Up to ten recent searches are summarised at the bottom of the 'Advanced search' form. The summary contains links which allow a visitor to:

  • repopulate the relevant form with the search inputs, or
  • rerun the search.

Original design

In the original design, the two links were presented within a sentence.

[Original design, recent searches]

Redesign

We converted the information to a table with column headings in the redesign. The first two 'searches' columns include the search name and the link to repopulate the search form. The last two 'results' columns include the number of results and a link to repeat the search.

[Redesign, recent searches]

Advanced search form buttons

Original Redesign
[Original design, advanced search buttons] [Redesign, advanced search buttons]

We adopted a general design rule that form submit and reset buttons would have their own style. (The 'Find Word' button in the top frame is the exception.) We made the reset button less prominent by making it grey.

Finally, we changed the display order of buttons whilst declaring the 'search' button first in the HTML so that visitors could still press Return to initiate a search.

Advanced search form options panel

We made two improvements to the options panel on the advanced search form:

  • We labelled each sub-panel by putting key words in bold.
  • We added label tags to the radio button and checkbox labels to make them clickable.
Original Redesign
[Original design, advanced search form options] [Redesign, advanced search form options]

Full text results

We made a number of usability improvements to the results pages. We explain these changes after these overview screenshots.

Original Redesign
[Original design, full text results] [Redesign, full text results]

Results header

We introduced a new design rule for the project that all pages will have a page heading (in the darker yellow band). We thought that the word 'Results' alone was clearer than the number of results displayed. We moved these result numbers to the left of the control that determines how many results are displayed per page.

We added a summary of the search above the results table, reworded 'List by' to the more common 'Sort by' and we added column headings to the results table.

Original design

[Original design, results page header]

Redesign

[Redesign, results page header]

Results list tabs

One of the problems with the original button design was that the red and blue buttons were equally prominent. In the redesign, we made the three tab button states - clickable, unclickable and selected - more distinct.

  Original [Original design, results list tabs]

Redesign [Redesign, results list tabs]

Results list navigation

At the bottom of the results pages, there are linear navigation controls when there are more results than are being displayed. In the original design, the previous/next buttons were in the same style as the form submit button ('More beginning at'). We applied the new house style for form submit buttons to it to show the difference in behaviour.

  Original [Original design, results list navigation]

Redesign [Redesign, results list navigation]

Print version of results

The 'Print' button on results lists and entries displays an unframed page suitable for printing. We improved the header by de-emphasising the copyright notice in the page heading. We added column headings in the same style as the non-print pages. We also added red lines at the start and end of the results. These print versions use a single style sheet suitable for both screen and print.

Original Redesign
[Original design, print version of results] [Redesign, print version of results]

The redesigned OED Online was launched in September 2005.