Graphic iView

Example | Use | Functions | Look

Example

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

 

Use

A graphic iView displays a graphic. 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 turns 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; these buttons may reside in the same row as the table-related buttons.
    • If there exists a related MidiApp, a button in this group should allow the users to call the MidiApp.
  • If there is an emphasized button, it is the left-most button of the respective button group (image-related or iView-related). There must not be more than one emphasized button.

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...

 

top top

Source:  SAP iView Guidelines for Java