Graphic iView

Example | Use | Functions | Look | Storage | Copyright

Example

Figure 1: A photo may help to recognize colleagues more easily

 

Use

A graphic iView displays a graphical image. This may be a photo, a diagram, or even a sketch. The graphic may also be animated or a video (movie).

The graphic should contain the main message of the iView. Text may accompany and explain this message.

In iViews graphics should not be used just to illustrate textual information.

Note: For more information on graphics see Graphics and Charts; for additional background information see Recommendations for Charts and Graphics in the SAP Design Guild.

Examples

  • Photos: Employees (address book of a company), buildings (for brokers), objects for auctions, archives, museums (e.g. plants, animals, furniture, ...)
  • Diagrams: Floor plans (where can I find my colleagues?), street maps, maps, instructional diagrams
  • Sketches: Sketches can be used for fast communication of ideas between colleagues (picture scrapbook), sketches can serve as "raw" or preliminary diagrams or as replacement for diagrams
  • Animated Graphics: For explaining procedures, for fun applications
  • Decorative Images: Postcards to send to colleagues per e-mail (for birthday greetings or just for fun)
  • Cartoons: For fun applications

 

Functions

For images that are larger than the visible area, provide the following functions. Place the buttons for these functions below the image (see Look).

Zooming

  • Zoom in: Zooms into the image in predefined steps (magnifies centered)
  • Zoom out: Zooms out of the image in predefined steps (shows larger section)

Show the zoom factor!

Changing the Visible Section of an Image

Changing the visible section of an image with scrollbars is cumbersome. Better offer the possibility to move the image section manually by grabbing it with the mouse (the cursor should turn into a hand over the image). Provide a toggle button for turning "grab" mode on and off.

Reset to Default View

If zoom or move functionality is provided, also offer a function Reset to default view.

 

Look

The graphic should comprise the main part of the iView.

Order of Screen Elements

  • A filter or shuffler can be placed above the graphic, if graphics and data can be selected from several sets or if the amount of data has to be reduced.
  • Then follows the graphic.
  • Place legends or other text right to the image or below it, depending on the format of the image.
  • Place pushbuttons for image-related functionality and status information (e.g. zoom factor) below the image and left align them.
  • Place pushbuttons related to the whole iView in the lower left corner. If space is at a premium these buttons may reside in the same row as image-related buttons (see Buttons and figure 2 below for details).
    • If there exists a related Web application (IAC), a button in this group should allow the users to call the application.
  • 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.

Examples

Photo

See example above.

Diagram

Figure 2: A floor plan may be useful in many occasions

Sketch

 

Figure 3: A sketch may be effective for fast communication between colleagues

Animated Graphics, Video, or Movie

Figure 4: Animated GIFs or Flash-Movies can explain procedures or be just fun to watch

 

Storage (preliminary)

Currently, the technical storage of images that appear in iViews is not handled by the portal framework in a well-defined way. Therefore, make sure that images are stored properly and take part in the distribution process of the portal. Otherwise, your iView would appear in the portal without images.

 

Copyright (preliminary)

When using graphics from external sources, make sure that copyright issues are settled. Some sources provide images for free, other sources provide the images for free but require a copyright notice, while most commercial sources require a license fee.

 

top top

Source:  SAP iView Guidelines