DP Code - Page Interface Nomenclature

This page is an attempt to establish a common nomenclature for talking about various interfaces that involve either a page image, a page text, or both. The idea is that this gives us a shared vocabulary when developing the new proofreading interface or other page interfaces as well as making changes, and getting bug reports, about existing interfaces. Much of this will be new terminology that I hope to retrofit into the DP code.

None of this terminology will end up visible in the UI itself, this is all for design, development, and the code.

Page Interface

A "page interface" is an umbrella term to describe any UI page that shows a page image, a page text, or both. Some examples of page interfaces are:

• Proofreading interface
• Page Browser
• WordCheck context interface

Panes

A pane is an abstract building block within a page interface that allows the contents to be scrolled independently of the other content on the page. In HTML4 terms, individual frames within a frameset would be panes. In HTML5 these would be implemented in CSS with divs. Panes may or may not be resizable depending on the UI.

Image Pane

An image pane shows the page image.

Text Pane

A text pane shows the page text. The text may be editable, or read-only, depending on the interface.

Control Pane

A control pane provides a way for the user to manipulate the contents of one or more other panes.

Examples:

• Toolbox in the proofreading interfaces
• Upper pane of the Display image interface

A control pane should not be confused with a control panel. A panel is an area within a pane that can be used to manipulate content within the pane, but does not scroll independently and cannot be resized.

Examples with Screenshots

Proofreading Interface

Page Browser

Page Browser

Page Browser is an instance of a page interface. This is new terminology to wrap around the view-only page interface, and is used in three places:

• To display images, with the user option of also showing text, when accessed from the link to the image in a project's Page Detail page
• To display images and text for mentors' use when composing feedback
• To display images to Project Managers in various locations in the WordCheck interface, allowing them to view context for words that have been suggested for inclusion in projects' Good Words Lists

These functions used to be three separate tools, but have been combined into one that can be used for all three functions, with different settings.

Character Picker

The character picker is the widget inside the Proofreading Toolbox that allows the user to view and insert characters into the page text. We've been inconsistent with the verbiage on this and I want to clear that up.

Picker Set

A picker set is a collection of characters within a character suite that are presented to the user. These are shown as 1 or 2 rows of characters in the character picker.

Picker Set Menu

Each picker set has a character used to identify and select the picker set, this is the picker set menu character. These characters are shown in the picker set menu as a row at the top of the character picker.

Picker

A picker is a UX widget that, when clicked, will insert a character into the page text at the cursor.