Status Area
Time your website with
WebWait - from the creator of AjaxPatterns.orgFrom Ajax Patterns
There's an archived version of this pattern available, taken from the Ajax Pattern book draft, showing roughly how it appeared before the page became publicly editable.
Evidence: 1/3
Tags: Console Log Status
Contents |
|
In A Blink
DIAGRAM Helpdesk system - tickets in different state
Goal Story
Pam wants to revise the list of project issues. As she begins ticking off those that are now resolved, she notices the status area below update, showing number of issues resolved and number outstanding.
Problem
How can you support information comprehension?
Forces
- The same data can be represented in different ways.
- Users often benefit from redundant summary information.
- Screen real estate is limited - you can't augment each field with its own summary information.
Solution
Include a read-only status area to report on current and past activity. The status area is usually some auto-generated text based on some aspect of system state. The main purpose is to save space, by occupying the same region with information from different sources, by dynamically altering the information according to current context.
Applications include:
- Summarising information about elements the mouse is hovering over.
- Summarising information about the element being edited.
- Summarising information about the overall application state.
- Capturing past events in a log.
- Offering a preview.
Often, there's no server-side processing involved - the browser has enough information to maintain the Status content itself. For example, the browser can easily show a count of selected elements or a log of past data that's been retained. A status Area can be particularly valuable for monitoring the state of dynamic objects. For example, an E-Commerce system can use Periodic Refresh to continuously update the state of an order within the user's profile - "Submitted", "Credit Card Verified", "Stock Available", and so on.
The Status Area is usually a div element, with changes triggered by events such as mouse rollovers and form editing.
Note that this pattern is mostly speculative and based on analogies from conventional desktop systems (where Status Areas are indeed commonplace).
Decisions
How will you size the Status Area? What if it overflows?
The status area is usually a relatively small element, sometimes just one row of text. You need to perform some analysis to determine the worst-case situation, i.e. what's the most content the status area could hold? Then, you need to consider how to handle it. Options include:
- Compressing the text - e.g. by concatenating the message.
- Introducing scrollbars. This is reasonable for a console-like status area which retains a history.
- Dynamically resizing the Status Area (which is not very common).
How will you structure the Status Area?
The Status Area need not be plain-text. It's often useful to keep a common structure, where each position always reflects the same variable. Consider which variables are being maintained and how they relate to each other.
Real-World Examples
BetFair
Betfair includes a Live Form to create new bets (see Real-World Examples in Live Form). A Status Area tracks your total liability, dynamically updated as you change the stake.
Lace Chat
Brett Stimmerman's Lace Chat (http://www.socket7.net/lace/) is an Ajaxian chat application. A Status Area contains a live preview of your message. As you type, a preview of the output, including any markup, is shown.
Refactoring Illustration
The Basic Wiki Demo is refactored here to include a Status Area, in the Status Wiki Demo. While the focus is on a message, there's a status area below maintaining the word count, row count, and character count.
The static HTML has been refactored to include a Status Area, with a table for all the values. This means the script need only set the actual count values, rather than performing any HTML manipulation.
| Message ID | |
| Row Count | |
| Word Count | |
| Character Count |
The CSS stylesheet makes the status initially hidden:
#status {
visibility: hidden;
text-align: center;
}
When the message gains focus, it makes the status visible and calls showStatus() to set its values according to the message's initial state. The Status Area remains until the message is blurred. Also, to update on each change, showStatus is called on keyup.
function onMessageFocus(event) {
...
$("status").style.visibility = "visible";
showStatus(message);
}
function onMessageBlur(event) {
...
$("status").style.visibility = "hidden";
...
}
function onMessageKeyUp(event) {
var message = getMessage(event);
showStatus(message);
}
The showStatus message analyses the message and posts its results to the status table cells.
function showStatus(message) {
$("messageId").innerHTML = message.id;
$("characterCount").innerHTML = message.value.length;
$("rowCount").innerHTML = message.value.split('\n').length + 1;
var messageCopy = message.value.replace("\n", " ");
messageCopy = message.value.replace(/^ */, "");
messageCopy = messageCopy.replace(/ *$/, "");
$("wordCount").innerHTML = messageCopy.match(/^ *$/) ? 0:messageCopy.split(/\s+/g).length;
}
Alternatives
Popup
A Popup is another way to show some auxiliary information without dedicating a permanent space on the page for it. A Status Area is less intrusive, but at the expense of some screen real estate.
Browser Status Line
Most browsers contain a status line at the bottom, which you can access with the window.status object. That's an okay place to include some status information, but there are drawbacks. First, it's a very rudimentary interface with no support for structured content, styling, and animation. Second, users expect to see URLs there as they hover over hyperlinks, and you might be breaking that model. Third, there are cross-browser issues. Firefox, for instance, disables scripting the status line by default, due to security concerns (malicious websites can fake the URL you're heading to).
Related Patterns
Microcontent
A Status Area can be seen as a form of Microcontent.
Periodic Refresh
Where the Status Area shows server-related status, use a Periodic Refresh to keep it up to date.
Visual Metaphor
A time-share property reduces real estate costs in much the same way as Status Area reduces screen real estate resources: both allow the same area to be occupied by different participants at different times.
