2 Management page elements

Except for the main content, all management pages share the same elements.

Descriptions of the navigation bar and heading items at the top of the page.

Common manage front matter — The common items of the top navigation bar and heading for each management page are:

where:
#	Area	Description
a	♿ ☐	Accessibility toggle. Makes links underlined, text non-justified, and the background light grey for the current session only
b	User ID	Identifier for the current user as a jump to their row in the Users page
c	Locale	Current locale, as a link to the Locales section at the bottom of the page if more than one locale. The * indicates the master locale
d	Heading	Indicates the current management page
e	Last page	Name of the last page visited. If the target page is about a specific item, its identifier is displayed. Only on the Work list page for managers and writers. Replaced by `Work list` on other pages as a jump back to the Work list page
f	Domain	Name of the current domain
g	⟳ (refresh)	Jump to the same page while keeping all the state settings, but without triggering any site changes. Typically used to extend the page timeout
h	ℹ (help)	Link to the current page's associated online help page on this site, which will open in another tab or window
i	⌂ (home)	Link to the home page of the main subsite. Leaves management

The ⟳ button is to be used for refreshing management pages, rather than the browser's refresh icon or the F5 key, to maintain the current state of the page. Avoid using the browser's back and forward buttons for the same reason. However, the browser's navigation keys can safely be used to return from pages other than management pages. This is because the session ID has not changed and is still remembered by the browser. It changes after any management action that causes the server to show a page, which is why the ⟳ button is the specified way to refresh a management page.

The Last page jump will return to the specific item last selected on the target page, such as the element being edited on the Article body page. This allows quickly getting back to whatever was being worked on after a 30 minute page timeout, though any unsaved changes will have been lost, so make sure changes are saved before being distracted by something or someone else.

On many pages, there is another navigation bar under the heading that is relevant to the content on the page. For some, it is as simple as links to sections on the page. For pages dedicated to managing an entity like an article or category, the bar will start with a series of jumps for each of the entity's ancestors. Those jumps will go to that ancestor's entry in the Access section in the Work list page, with its child list expanded. In contrast, jumps for entities in the Details section of those pages will go to the page where that entity can be viewed and edited.

Information dense△

Most management pages contain a lot of information, much of it clickable, so some measures are taken to reduce visual clutter.

Jumps versus links△

Links are the normal method of navigating around the internet, but for managing a site, there needs to be some extra hidden information to maintain security and sequencing.

While links can include such extra information in their URLs, doing that may expose some information required to be hidden to third parties. For most operations in the management pages, buttons within forms are used instead of links so that that extra information is not exposed. To distinguish these from normal links, in this documentation they are called jumps.

Jumps contain a special code that changes every time an action changes some information on the server. If a jump is clicked again before the page to replace it has arrived, there may be a code mismatch, resulting in a return to the Log in to the site page. To mitigate against this, after each jump click there is a three second lockout, wherein all jumps clicked on are ignored. Once expired, jumps work as normal. The lockout only applies if javascript is enabled, which is the default in most browsers.

Buttons△

Buttons can occupy a lot of space and the management interface uses a lot of them.

To keep buttons, including jumps, fairly compact and stop them from looking visually overpowering, they are borderless and have a transparent background. However, in some places, critical jumps are made to look like normal buttons with borders so they stand out. In all cases, the text is sans-serif and bolded to make them stand out from plain text.

All checkboxes and radio buttons in Smallsite Design include a label that can also be clicked to change its state or selection in addition to clicking on the button itself.

Minimal text△

For public pages, some verbosity and localisation in the user interface helps visitors be familiar with what is presented, but that does not necessarily work for managing a site.

To minimise space or possible confusion, the measures taken are:

a.IDs are used for articles, categories, subsites and sections, rather than their headings.
b.Locales are identified by their standard ASCII-based ISO codes, except for their selection lists where each locale is fully localised.
c.Symbols are used where space is a premium or needs to be constant across locales.
d.Tables are extensively used to standardise the presentation of information and associated controls.
e.Numeric values are entered using standard ASCII Indo-Arabic numerals, though they are localised for display when practical.

For public pages, most visitors will only be using one locale to view pages. In contrast, managers of multi-locale sites will be having to look at the same key content for entities, like headlines for articles, and some managers may not be able to understand these in all locales. Instead, IDs are used since these will be using the lowercase rendering of their master locale text as it is expected that all users will be able to understand and communicate in the language of the master locale.

Consistency of layout helps users get used to working with information. Tables provide that consistency, supported by their clear labelling. Presentation and editing of values is consistent within those tables as well. When editing, all elements – from an article to a link – use an Element block for their editing, control and status for consistent handling at all levels of an article body's hierarchy.

Symbols△

Symbols are useful for saving space.

Use of symbols has generally been avoided in the public interface of pages because they only work when people are familiar with them, and there is usually more space to play with there. However, different scripts can use vastly different amounts of space, and catering for that in the management interface would make some areas which need to be compact too large. In particular, action and status indicators in the action bars when editing would be excessively bulky and variable in size across locales if not for symbols. A legend is provided at the bottom of pages where they are used, and users will be using them enough to get used to them fairly quickly.

Some common symbols used throughout the management pages are:
#	Symbol	Indicates	Description
a	✎	Edit	When its checkbox is checked, the field text will be available for editing
b	👇	Select	When its checkbox is checked, the list of options is available for selecting from
c	ℹ	Help	When clicked, opens the help page for the element the symbol is next to
d	△	Parent	Link to the parent of the page element

The ✎ and 👇 symbols are used as the labels for checkboxes that when checked, reveal the corresponding field or list to edit or select from.

Confirmation of critical operations△

Some operations create significant changes that cannot be undone, so some extra actions are required to trigger these.

Typically in web usage, such operations use a popup confirmation message box, but these can be in an inconvenient place, especially on a large screen. In Smallsite Design, such operations are presented with a label followed by a checkbox. Clicking the label or the checkbox opens another label and checkbox, and clicking either of these exposes a Confirm button which when clicked triggers the intended operation. This serves as a double-confirmation without occupying much space or movement to activate.

Locales△

Smallsite Design supports multiple locales, so when more than one are used, some extra buttons and links are made available.

If more than one locale, all – even if disabled – are displayed as a row of buttons at the bottom of management pages to allow jumping to the same page but showing the text in the language and script of that locale, and allowing editing of it. The layout will change to accommodate the reading direction conventions for the locale. This is why start and end are used throughout this documentation when describing the relative position of elements, rather than left or right.

When more than one locale, the current locale at the top of the page and the Locales heading for the locale buttons at the bottom of the page cross-link to each other.