THL Toolbox > Developers' Zone > Application Interface Issues > Interface - Editing Interface Design
Editing Interface Design in THL
Introduction
THL is committed to building online editing facilities for its various repositories, so that scholar-participants can submit and revise their content in THL over the Web. Unfortunately, editing interfaces are often left to developers, who may be superb with their programming, but have little sense of how to design an attractive, efficient, and easy to use interface for editors. Because these interfaces are hidden from public view, they often receive insufficient attention. We are trying at THL to follow consistent principles in our editing interfaces so that editors can get used to one tool, and be able to easily adjust to other tools.
Design Principles
The first principle is that when you create a new resource, you should generally first have a relatively modest screen where you fill in a key component, or set of components, and then hit a CREATE button, which creates the item and then takes you to a Global Editing Form.
The second principle is to have Global Editing Form that gives you access to all the various components of a full resource. When editing extant resources, the system takes you straight to this Global Editing Form with no intermediary. The Global Editing Form should show as much data as possible about each component, so that an editor can determine if they need to edit or add information from glancing over that page, rather than having to drill down through links just to see what is there. It should also provide direct links to view, delete or edit this information right on this page, using the labels View, Edit, and X in that order.
The third principle - above all else – is to streamline the process and minimize the number of screens that an editor has to click through to do their work. The less clicks, the better.
Never force someone to update one piece of information just to see another bit of associated information. Let them get at the latter directly without the intermediary. We do not see a value in forced “sequences” of editing pages, since an editor will want to choose for themselves what they want to edit.
One way to organize components is to uses light gray boxes within an overall white page to render the editing controls for the various components of an entry. White space is left between the boxes to make them more distinct. Then to the upper left is a small darker gray box that has the label for this component – General Information, Names, Feature Types, etc. I think it could save space to just have that label be a small tab that inserts itself into the white space between components.
- See in PLACE DICTIONARY
If the information in a given component lends itself to this format, present it in a table format with Edit, View and X functions to the left, and then labeled columns organizing the data for each value.
Show CITATIONS or SOURCE information up front as much as possible.
One challenge is once you start editing a given component, you leave the Global Universal Editing Form. One solution to this, as seen in the Place Dictionary, is to maintain a top bar of info to the left has breadcrumbs that show with the path of your editing, with “>” dividing each section, so that you can easily retreat back to a previous stage/page. Thus, for example, Features > F363 > names > Lhasa.
- See in PLACE DICTIONARY.
An alternative to the breadcrumbs could be use of lightbox popups so that you never leave the global editing page, and instead use popups to deal with further details issues.
On the right of this breadcrumbs bar, you can have a drop down list of various items that can be controlled by there, such as account administration, changing controlled vocabulary, etc.
We have used tabbed interfaces, with each tab representing a given component. A nice aspect of this is it can be used to eliminate the need to ever go to any second page, since you can include all editing facilities necessary right within that single page, including the use of AJAX-style slideouts.
- See in old AV database where the cataloging record is divided into 4-5 tabs.
- See in the FATHOM social networking application where a roster entry is divided into 4-5 tabs.
- That might be a good thing to try in the PLACE DICTIONARY
It is also good to use graphic icons in an editing interface, and we are trying to standardize a set.
Examples
Place Dictionary: this still in the process of being streamlined. But the “names” section is close to functional. The other sections will be revised in accordance with it – they mostly suffer from not offering editing controls and information up front, and requiring extra clicks to get to them.
Tibetan Dictionary: this is currently offline but soon to be back. It is an extremely complex application. At present its interface is not streamlined. It suffers from too many clicks, from drop down menus that drop off the page, editing spaces that expand but are hard to see on the page, and other issues.
MMS for Images and AV: It firstly uses a single universal form, but there is a lot of secondary spaces you link to for editing. In that sense it is like the
Place Dictionary. It doesn’t really fully use the page space, so in this regards it can better utilize its space. There is an initial top section of things you can change immediately by typing in the boxes or choosing from a drop down list, but then at the bottom of that section is an UPDATE button that must be clicked or all is lost. Then below that is a list of other categories which show the current data, and then offer links to “add” additional items, “manage” the issue in question, or by clicking directly on any current value, you can delete or modify it. Each section then has a “back to catalog record” link which takes you back to the Universal Editing Page.
- I think this could use more graphics and less text links. Thus rather than all of these “add subjects”, “add location”, etc, perhaps it could use a big PLUS sign; instead of the “manage descrptions”, “manage captions”, etc. perhaps it could use a big PENCIL sign to signify editing/managing.
- “Back to Catalog record perhaps could have some ICON for it too
- For something like Captions and Descriptions, it could offer X and Edit buttons up front rather than force you to go through an intermediary page.
- this could benefit from adding breadcrumbs at top
Scout Portal Toolkit for bibliographical records: for catalog record editing, it has a single long form that includes free text entry, drop down lists, and going off to new pages for controlled vocabulary that is dynamic.
Old AV Database: this uses a fairly nice tabbed interface for the cataloging record editing.
Fathom for Social Networking Roster entries: this uses a fairly nice tabbed interface for the cataloging record editing.
