Image
Usage | Types | Design-relevant Attributes | Related Controls
|
The image control displays a bitmap GIF or JPEG format. The width and height of the image can be specified. |
| Figure 1: Example of an image
in an iView. The image appears only after the user makes a selection via the shuffler placed above the image. |
|
Figure 2: Example of an image with a row of image-related function buttons
Top
Usage
The image control displays a bitmap in GIF or JPEG format. The width and height of the image can be specified.
Photographs, graphics, charts and diagrams, maps, sketches, animated graphics and video (movies) may be used in the portal. If used properly, they carry great amounts of information, which would take up much more time and screen-space, if they were explained in words.
Note: Although icons are also images, they are not allowed in iViews, except for displaying status information. That is, there are no function icons on buttons or tabs. For more information on status icons in the portal, see the SAP Reference Lists in the SAP Design Guild.
Interacting with Images
- If graphics and data can be selected from several sets, or if the amount of data has to be reduced, place a filter or shuffler above the image. (See figure 1, above)
- Place buttons for image-related functionality and status information (e.g. zoom factor) below the image and left align them. (See figure 2, above)
- Place buttons related to the whole iView in the lower left corner; these buttons may reside in the same row as the table-related buttons.
- If there is an emphasized button, it is the leftmost button of the respective button group (image-related or iView-related). There must not be more than one emphasized button in an iView.
Legend
Always provide an appropriate legend. Place legends or other text below the image or to its right, depending on the format of the image and the iView or page layout.
Tips for Using Images
- Align graphics so that their main contents points towards the text, not away from it.
- Crop graphics to the relevant section; make them as small as possible
and avoid irrelevant and distracting elements.
Example: Do not show a US map if you want to illustrate data in Michigan - use a Michigan map instead. - Use high quality graphics.
Example: Do not draw graphics by yourself, involve graphic designers. - Care for the correct format of images:
JPEG for photos and images with many colors and gradations.
GIF for images with flat-colored areas and bold lines, like diagrams or cartoon, and images with (less than) 256 colors. Typically, screen dumps work better in GIF format.
Sharp-edged graphics work well as transparent GIF, on any background. Using transparent GIF format for round, smooth forms and large-sized text, as used in many logos, may cause problems if you don't know what color their background will be.
Types
Charts
Figure 3: A horizontal bar chart table; for exact comparisons, the values have been added to the chart.
See Chart for details and Recommendations
for Charts and Graphics in the SAP Design Guild for thorough
information on the usage of charts.
Animated Graphics, Video, or Movie
Figure 4: Animation can explain procedures or be just fun to watch...
Note: The image control currently supports only animated GIFs.
Sketches
Figure 5: A sketch may be effective for fast communication
or serve as a preliminary version of a diagram
Design-relevant Attributes
You can set the height (height) and width (width) of an image, also the tooltip text (tooltip), which is displayed as the mouse cursor passes over the image, or as the mouse button is pressed but not released.
For details see page Control API for Image.
Usage - Height and Width
Note: Do not scale images in the browser by changing the values for height and width. This results in poor image quality.
Related Controls