Multimedia Design Guidelines

The following guidelines are for multimedia design in e-learning programs:

• 1. The Graphical User Interface (GUI) design shall not violate the principles of UI design.

  2. Two options of the Graphical User Interface (GUI) shall be created for a customer/ curriculum/ course, as follows:

     1. Classic option, which follows the standard Windows application interface design

     2. Contemporary option, which follows the customer’s branding guidelines and preferences

  3. The GUI shall typically be created for a screen resolution of 1024x768, and its size shall not exceed 1014x657 px. If a vertical scroll is foreseen, the width shall be further reduced by 17 px.

  4. The GUI shall be designed only as a container for the content; the interface shall not be so attractive that it distracts the attention from the content. Deriving GUI colors from the customer’s logo shall be done with caution keeping this principle in mind.

  5. Features and functionalities to be included in the GUI shall be selected only when required, not because they are available. Design is all about simplicity and usability, not just beauty. Wherever possible, the operating system’s features and functionalities shall be incorporated in GUI design. For examples, the Calculator and Notepad features.

  6. The GUI features and functionalities shall be grouped and placed as per gestalt theory and ergonomics.

  7. All the GUI buttons shall have only text, only symbols, or both together. Some buttons with symbols and other buttons with text are not acceptable.

  8. The size of buttons (and other hotspots) and the space between them shall not be less than the width of a mouse-pointer (typically 12 px wide and 21 px high).

  9. Both GUI and page buttons shall have three states: normal, rollover, and click-down. When a button is clicked, and its pop-up displayed, the button shall remain depressed. Only when the pop-up is closed shall the button return to normal state.

  10. The content area of the GUI shall be divided into a grid of 6x6, to enable the following layouts:

• • 1. Equal Portrait (V-50x50), which has three columns of the grid on the left and three columns on the right

    2. Equal Landscape (H-50x50), which has three rows of the grid on the top and three columns on the bottom

    3. Wide Portrait (V-66x33), which has four columns of the grid on the left and two columns on the right

    4. Tall Landscape (H-33x66), which has two columns of the grid on the top and four columns on the bottom

• 11. First-level bullets shall be designed and standardized.

  12. Standardized dummy text and dummy graphics shall be used while designing page presentations, except for instruction text in question pages, which are standardized as follows:

• • 1. Multiple-Choice Single Select (MCSS)—Select an option, and then click Submit.

    2. Multiple-Choice Multiple Select (MCMS)—Select all options that apply, and then click Submit.

    3. Multiple Single-Select (MSS)—Select an option for each statement, and then click Submit.

    4. Drop-Down Matching List (DDML)—Select an option from each drop-down list, and then click Submit.

    5. Text-Entry Matching List (TEML)—Type a numeral in each text box, and then click Submit.

    6. Drag-and-Drop Matching List (DADML)—Drag a numeral on the right to a target on the left, and then click Submit.

• 13. The following page presentations shall be designed at the start of the project:

• • 1. On-screen text (OST) as paragraphs + a hyperlinked bullet list (with single line per list item) + instruction text + displayed content pop-up with Close button + on-screen graphic

    2. OST paragraphs + instruction text + content buttons + Note button + displayed extra-info pop-up with Close button + on-screen graphic

    3. OST paragraphs + instruction text + on-screen graphic with highlighted and labeled hotspots + displayed content pop-up without Close button

    4. OST paragraphs + instruction text + tabs + displayed layer with text and graphic

    5. OST paragraphs + a wide table

    6. Question stem + MCSS instruction text + five options of two lines each + option buttons + Submit button (in the same style as the Note button) + displayed correct feedback; options as an ordered list with letters having enclosing parentheses, not numerals

    7. Question stem + MCMS instruction text + five options of two lines each + check boxes + Submit button + displayed incorrect feedback with green border and/ or background

    8. Question stem + MSS instruction text + five options of two lines each + two columns of option buttons + Submit button + displayed incorrect feedback with red border and/ or background

    9. Question stem + DDML instruction text + five options of two lines each + three-word drop-down list boxes (no selection shown upfront) + Submit button + displayed correct feedback

    10. Question stem + TEML instruction text + five options of two lines each in two columns (first-column options as an ordered list with letters having enclosing parentheses, not numerals; and second-column options as an ordered list with numerals, not letters) + single-value text-entry boxes + Submit button + displayed incorrect feedback

    11. Question stem + DADML instruction text + five options of two lines each in two columns (first-column options as an ordered list with letters having enclosing parentheses, not numerals; and second-column options as an ordered list with numerals, not letters) + drag targets + drag objects + Submit button + displayed correct feedback

• 14. All interactive elements on a page shall preferably be kept to the right.

  15. A course persona (avatar) shall be designed relevant to the curriculum/ course content, and its various poses shall be created as standard graphics to visually represent cover-page text. One semi-standard typographical graphic that can be customized with page-specific text shall be created to visually represent topic-page text that is difficult to visualize.

  16. Typography (for labels, key words, and captions) shall be standardized with the following considerations:

• • 1. Font type to be different from OST font

    2. Font size to be equivalent to OST font

    3. No italicization, underlining, or blinking of text in online reading materials

• 17. The total font types on the GUI and content area, excluding the fonts in the logo, shall not exceed three.

  18. Label leader lines shall be of two contrasting colors, preferably black and white.

  19. Hotspots shall preferably be highlighted with a red outline.

  20. Audio content shall be recommended only when the course is graphics intensive with very minimal on-screen text. The audio content shall always describe and be in synch with the on-screen visual/ animation. In such cases, page-wise audio-transcript shall be provided.

  21. Question pages shall neither have standard graphics nor audio content.

Did you find this resource page useful?

Post your comment here.