Introduction
is IT Still Valid?
One of the questions developers asked in Portal is "Are the old usability guidelines still valid?" The simple answer is "yes". A more detailed answer would be "yes, in principle".
Basic Usability
Now let's come to some basic usability issues, such as the
o distribution of attention
o flow of control
o and dependencies between parts of a page, for example, between different MiniApps.
Attention
Caring for the user's attention is more important in portals. Portal or Web pages often look like newspaper pages with many different types of information competing for the user's attention. Often we want something to stand out of the surrounding elements because it is an important key word or an urgent message. On Web pages, bold font may be used for emphasizing text elements; this helps readers to scan the page faster (see, for example, the bold word "attention" in this paragraph). Italic font, for comparison, does not stand out and is hard to read on computer screens.
For simple portals, the basic distribution of attention found in the SAP R/3 Style Guide still applies, that is, the upper left corner gets most of the attention, and the lower right least. See also that two thirds of the attention go to left left half of a page or screen.
|
Figure: Basic distribution of attention
Many portals, especially those designed for larger screens, have a layout, where the work area is accompanied by narrow areas for indices, navigation links, news, or the like; Figure below shows some of the possible layout variants: ( 2 Column LayOut)
I | W |
Figure : Portal layout variants: Index (I) to the left of the work area (W) (left)
For these more complex layouts, the work area still gets most of the attention, but the areas to the left and/or right also get some, probably the one to the left more than the one to the right.
|
Figure: 3 –Column LayOut - Distribution of attention for portals with "triptych" layout; within the work area we find the basic distribution with the most attention falling into the upper left corner
The border areas might even get less attention on large screens, where users focus the center of the screen, while the areas to the left and right are already in the peripheral vision.
There have been some quarrels with respect to, whether it is better to place the index to the left or to the right on a "diptych", that is, on a page with two main areas. Some people claim that an index to the left would disturb their reading. On the other hand, we are used to columnar reading from, newspapers and magazines. Also, on large screens this problem should be less severe because people cannot pay attention to the whole screen, anyway. To sum up, only a few Websites place the index to the right of the work area.
Finally, let me mention that reading is easier, if the text lines are not to wide. It is better to have two columns 40 character wide each than one wide column with 80 character. Carried over to MiniApps this means that narrow MiniApps are easier to read and understand than wide ones. Especially, MiniApps containing much text should not be too wide. There are, of course, exceptions to this rule, such as MiniApps which have to display wide tables or diagrams.
Scrolling - Availability: The "What You See is What You Get" User Myth
Scrolling was a matter of hot debates for a couple of years, after Jakob Nielsen claimed that users do not scroll. Finally, even he realized that there are some users that do scroll. Of course, he was right in drawing our attention to the potential problem of information that can only be made visible through scrolling. Again and again, users do not find information because they do not scroll or do not consider to scroll. Cognitive psychology offers the "availability" heuristic as an explanation: People regard only that information, which is directly available to them - that is, which is on the current screen, or at the focus of their attention. So, we have to acknowledge that much information is not attended to by the users, even though it is on the screen; this is especially true for text information. So, many users seem to have a different interpretation of the WYSIWYG (What you see is what you get) principle: they believe that they get only what they see.
Flow of Control
Flow of control is important in two respects: (1) for the efficiency in performing a task, (2) for the transparency and understandability of a screen or page. Flow of control means that the focus of activity moves across a screen or page while the user performs a certain task.
There are natural ways how control should flow - if the flow is reversed, people are puzzled and may even have problems with performing a task at all. What people regard as a natural flow of control, depends on their cultural background. For most time the "natural" flow is from left to right and from top to bottom - just like reading.
Yes From left to right (in reading direction) From top to bottom See the arrows for recommended flow between two areas | No From right to left (opposite to the reading direction) From bottom to top Zigzag: to and fro, up and down See the red and blue paths for not recommended flows from start to goal |
Figure : Basic rules for flow of control
Dependencies
Dependencies between screen areas are closely related to the flow of control. Here are essentially the same basic rules in effect: We expect, that dependencies are from left to right and from top to bottom. With dependencies, I refer to cause-effect relations, not to movements of the focus of activity. For example, you select an item in an overview list and expect that its details will be displayed below the list, not above it.
Yes | No |
Figure : Basic rules for dependencies
Layout
It is important to take care of the layout issues, too. These are closely related to the attention and flow of control/dependencies issues already mentioned. In essence, the layout should take care of:
- Where users put most of their attention
- How the page elements, such as MiniApps, are arranged on a page so that they obey the rules for flow of control and dependencies
- The page size and scrolling problems
No comments:
Post a Comment