Styles for Texts, Lists, and Links (Preliminary)
Text Styles and their Uses | Lists | Visual Design of Links
Easy Web Transactions may contain considerably more text information than typical R/3 applications. Like in books, these texts should be presented differently according to their function for the users: Headers should stand out for fast scanning, body text should be easily readable and efficient, and additional information should be presented unobtrusively. Such a differentiation enables users to get a fast overview of the screen, and to separate important information from the less important one.
This page proposes styles for structuring text-based information on screens and lists their uses.
Text Styles and their Uses
The following text styles are proposed for use in IACs. These style will be predefined in the accompanying CSS style sheet for IACs. They can be used as class declarations inside HTML tags. They can also be implemented manually, if the SAP style sheets are not available.
Note: The styles below, their names and attributes are preliminary!
|
Style Name (preliminary) |
Look |
Attributes |
Usage |
|---|---|---|---|
|
heading1 |
Large Heading |
font-family:arial,sans-serif |
Use it for main headings in larger text areas |
|
heading2 |
Group Heading |
font-family:arial,sans-serif |
Group heading, i.e. headings for groups that do not use group boxes |
|
heading3 |
Subgroup Heading |
font-family:arial,sans-serif |
Heading for subgroups within group boxes or lists |
|
text |
This is normal text |
font-family:arial,sans-serif |
Standard text, e.g. for field labels, instructions etc. |
|
small |
This is small text |
font-family:arial,sans-serif |
Small text for legends, explanations, small field labels above i/o fields |
|
bold |
bold text |
font-family:arial,sans-serif |
Use bold within text for emphasizing words. |
|
italic |
italic text |
font-family:arial,sans-serif |
Use italic within text for references. |
Lists
Lists can be a viable alternative to tables. Use lists whenever you want to present a list of items in an unobtrusive way, where reading is the primary usage and where there is - apart from hyperlinks - no interaction on the list elements.
Lists have the following characteristics:
- List items are read-only
- List items may contain links
- Lists do not scroll like tables
- Lists consist of one column only; for multiple columns include the lists in an HTML table with one row and several columns (2-3)
- Lists may be ordered (numbers) or unordered (bullets)
- Lists may be nested; do not use more than 2-3 levels
Examples
|
Ordered List |
|
Unordered List |
||
|
|
These style will be predefined in the accompanying CSS style sheet for IACs. They can be used as class declarations inside the UL and OL HTML tags. They can also be implemented manually, if the SAP style sheets are not available.
Visual Design of Links
The visual attributes for hyperlinks are predefined in the CSS style sheet for IACs. Currently links are not underlined, but show a hovering effect with underlining when the mouse is moved over the link.
Source: SAP Interaction Design Guide for Internet Application Components