|About us||RCL 20||Projects||Colour Selector||Library|
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.
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.
We defined these stages for this project according to our systematic methodology that minimises rework and promotes project progress:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
We made a number of small changes on the 'Simple search' form to improve usability.
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.
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:
In the original design, the two links were presented within a sentence.
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.
Advanced search form 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:
Full text results
We made a number of usability improvements to the results pages. We explain these changes after these overview screenshots.
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.
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.
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.
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.
The redesigned OED Online was launched in September 2005.
Copyright © Limitless Innovations 2022