System messages to the user
Interaction with forms on the web is rightly seen as unreliable by the user. There are too many experiences where the system is slow or doesn't react when buttons are clicked due to software errors etc.
Therefore every button or link must have a visible reaction from the system when clicked. This is usually easy. The issue arises mainly when the click sends you to the same page — either because the system couldn't fulfil its task — or because it expects the user to continue his task.
There are fundamentally two ways to provide the visible reaction. To show an intermediate webpage that requires a response from the user, or to show the same page with a message overlaid.
In some situations, such as when displaying error messages, it is useful to render the selection transparent enough so that underlying material can be seen and operated through... A transparent box can fade gradually instead of abruptly, giving you time to notice it... Because you can click through a transparent dialogue box, removing it requires no keystrokes; it is modeless and highly efficient, with an efficiency of 1...
—The Humane Interface, Jef Raskin
The most efficient and least annoying mechanism is the overlaid message. But the perfect solution involves fading transparent messages over background text that is difficult to achieve with HTML. Therefore the interface standard for Eionet is to use a bordered box high up on the page containing the message, but under the page heading. The message must contain the time the message was generated with seconds granularity in order to provide a different visible reaction in case the user clicks again on the same button. Then he can see the seconds change.
Example
The HTML code looks like this:
<div class="system-msg"> Content saved (2007-10-30 12:44:21) </div>
But if the message is used to declare a notice that is not an operation, but has long term validity, the timestamp can be left out.
The Eionet stylesheet has a selector defined called .system-msg.
.system-msg {
border: 2px dashed black;
padding: 0.5em;
margin: 0.5em 2em;
font-weight: bold;
}
It is also possible to use a list if you have more than one message to convey:
- Content updated (2007-10-30 12:44:21)
- Users notified
or an ordered list:
- Users notified
- Request for approval sent
Error messages
There are different grades of messages. The above example describes when things are normal, and the user can safely ignore the message. But there are times when the system can't continue, either due to a system fault or a mistake by the user. These are shown differently:
Since the system can't continue without user interaction to clear the problem, there is no need for a timestamp.
<div class="error-msg"> You have not filled out all mandatory fields </div>
It is also possible to use a list
- The value (foo) entered into field "Age" must be a valid number
- Some other error
Advices
Advice messages are brief instructions to the user about issues concerning the task he's about to undertake. You can start the phrase with "Note:", "Tip:" etc.
The code looks like this:
<div class="advice-msg"> Tip: Enter <em>at least</em> 3 characters in the text field for best results. </div>
For other types of standout see the admonitions page.
