Semantic Classification of Multimedia Layout Guidelines

This document represents information about some layout guidelines. The FL notation is used.

The following representations have been loaded into the WebKB-2 knowledge base. Statements are in the courier font. They are enclosed within the XHTML marks <KR> and </KR> to permit WebKB-2 to distinguish them from regular text.   To browse from one of the categories below, copy-paste its identifier (term with '#' inside) into the following textbox or use the provided hyperlinks. Then, use the search options at the end of each displayed page.
   

Reminder: statements of the form "CONCEPT1 subtype: CONCEPT2 CONCEPT3" should be read:
"CONCEPT1 has for subtype CONCEPT2 and CONCEPT3" (in other words, any instance of CONCEPT1 is also an instance of CONCEPT2 and CONCEPT3). For relations other than "subtype" and "supertype", "CONCEPT1 RELATION1: CONCEPT2 CONCEPT3, RELATION2: CONCEPT4;" should be read: "any CONCEPT1 may have for RELATION1 one or many CONCEPT2" and "any CONCEPT1 may have for RELATION1 one or many CONCEPT3" and "any CONCEPT1 may have for RELATION2 one or many CONCEPT4".

Table of contents


Tasks

 designing_the_layout_of_multimedia_documents 
   subtask: making_information_clear
            using_an_attractive_presentation
            using_a_consistent_presentation
            making_the_interface_provide_good_feedback
            copying_from_existing_documents (s2603498);

Making information clear

 making_information_clear
   subtask: using_a_legible_presentation
            using_a_simple_presentation_and_language
            using_a_structured_presentation
            using_precise_information,
   #rationale: "the presented information should be clear 
                (legible, simple, structured and precise)";

Using a legible presentation

 using_a_legible_presentation
   subtask: using_a_legible_presentation_for_textual_elements
            using_redundancy_on_multiple_media_channels;
 
   using_a_legible_presentation_for_textual_elements
     subtask: using_the_right_size_or_font_for_textual_elements
              limiting_line_length_with_smaller_screen_resolution_in_mind
              "setting text flush left / unjustified"
              "using a mix of upper and lower-case letters to promote legibility"
              "avoiding using hyphens to split words at the end of a line"
              "using wider margins to increase white space for readability online" (s2589336)
              "using darker or brighter contrast in small areas" (s2589336);
 
     using_the_right_size_or_font_for_textual_elements
       subtask: "using and big enough fonts"
                "using size 18-36 point size for headings"
                "using text sizes larger than 12-point for body text"
                "using serif for body text and san-serif for titles and headlines"
                "using fonts that are available for all operating systems" (s2590366);
 
     limiting_line_length_with_smaller_screen_resolution_in_mind
       subtask: "limiting line length to 40-60 characters"
                "limiting line length to about 11 words per line" (s2589336);
 
   using_redundancy_on_multiple_media_channels
     advantage: "redundancy offered by multiple channels (e.g Sound, Text and Video) improves
                 understanding since more of the information provided is understood" (s2599720)
                "if redundancy is designed congruently, the flow of the differing channels of
                 the multimedia product is enhanced" (s2603635);

Using a simple presentation and language

 using_a_simple_presentation_and_language
   subtask: be_sparing_with_textual_elements
            be_sparing_with_graphical_elements
            using_a_simple_language;
 
   be_sparing_with_textual_elements
     subtask: "using only two attributes on any one screen (e.g. 2 different variables
               of style, weight, slant and proportion) heightens readability and
               recognition through familiarity and consistency";
 
   be_sparing_with_graphical_elements
     subtask: "using only graphics that are relevant to the task"(s2603678),
     purpose: "superfluous graphics can interfere with understanding" (s2603412)
              "faster loading and rendering, easier to scan and to navigate around the website" (s2603498)
              "pages should load within no more than thirty seconds, 
               including all graphical elements" (s2589336);
 
   using_a_simple_language 
     subtask: "stay away from negative statements if possible; avoid double negatives entirely" (s2590366)
              "making sure correct grammer and spelling are used" (s2603457)
              avoiding_slang     avoiding_technical_term;
 
       avoiding_slang
        #rationale: "unless for a purpose, country-specific language should be avoided,
                     as foreign readers may not understand" (s2603457);

Using a structured presentation

 using_a_structured_presentation 
   purpose: "improving cognitive recall by providing order and common characteristics"
            "providing logical positions for pieces of information and hence helping 
             to locate them, gather them, compare them and check for their completeness
             and consistency"
            "allowing to focus on small chunks since they are easier to memorise and exploit",
   subtask: dividing_information_into_digestible_chunks
            "keeping paragraphs four to eight lines long" (s2589336)
            "using headlines, bullets, pull quotes and sidebars" (s2592913)
            "using contrasting colors to separate groups" (s2603678);
 
     dividing_information_into_digestible_chunks
       subtask: using_spaces_between_chunks_of_information;
 
       using_spaces_between_chunks_of_information
         subtype: "separating paragraphs by a blank line",
         purpose: "structure allows the reader to find information easily" (s2603678);

Using an attractive and balanced presentation

 using_an_attractive_presentation
   subtask: designing_so_as_not_to_shock_the_user (s2603457)
            capturing_and_retaining_attention_on_a_document;
 
   designing_so_as_not_to_shock_the_user
     subtask: "using backgrounds that don't clash/conflict with font colours" (s2603457);
 
   capturing_and_retaining_attention_on_a_document
     subtask: creating_focus_on_the_relevant_document_elements
              creating_balance_on_a_document
              "using contrast to stimulate attention on the page"
              "using heading in larger fonts to gain attention" (s2603678)
              "using contrasting colors and graphics" (s2603678)
              "using graphics to focus attention" (s2603678),
     purpose: "good contrast draws the eye to different sections of the piece" (s2603678);
 
     creating_focus_on_the_relevant_document_elements
       subtask: "using large bold display type and/or graphics to create focus"
                "using elements with visual weight for focus BUT without overdoing it"
                "putting items of focus at the top of the page, the area first seen
                 by the user, to get their attention"
                "using space to separate the element so it is not clustered" (s2603457);
 
     creating_balance_on_a_document
       subtask: using_a_structured_presentation  //already detailed above 
                "weighting elements (size, density, page position)"
                "using tables for more precise placement of elements"
                 "good contrast is needed for balance and organization" (s2603678)
                 "visual entry points is needed for balance and organization" (s2603678),
       subtype: creating_symmetrical_balance_on_a_document
                creating_asymmetrical_balance_on_a_document;
 
       creating_symmetrical_balance_on_a_document
         purpose: "providing a conservative, safe atmosphere",
         annotation: "formal balance is symmetrical, with the items on one side of the screen being
                      similar in shape, size and color to the items on the other side of the screen;
                      formal balance is usually much easier to design" (s2603412);
 
       creating_asymmetrical_balance_on_a_document
         purpose: "providing intense/dynamic compositions",
         annotation: "informal balance is usually asymmetrical, with several smaller items on one 
                      side being balanced by a large item on the other side, or smaller items being
                      placed further away from the center of the screen than larger items" (s2603412) 
                     "one darker item may need to be balanced by several lighter items" (s2603412);

Using a consistent presentation

 using_a_consistent_presentation
   #rationale: "a consistent approach aids navigation - readers can adapt and
                predict the location of information and navigation controls"
               "inconsistency increases cognitive overhead by forcing the user to spend extra time
                figuring out how to navigate or where to find the information they require" (s2603621),
   subtask: establishing_a_framework_to_use_throughout_the_pages_of_a_Web_site
            grouping_objects_with_similar_functions_together_in_one_spot (s2594561)
            using_proximity_to_connect_elements_visually
            using_a_style_of_presentation_from_one_section_of_a_sequence_to_the_other (s2603621)
            using_a_consistency_of_command/action_throughout_a_project (s2603678)
            "using a grid (a skeletal understructure, needed for cohesiveness)";
 
   establishing_a_framework_to_use_throughout_the_pages_of_a_Web_site
     subtask: using_a_graphic_theme
              "align type and graphics on a page and in relation to each other" (s2589336),
     method: "using Cascading Style Sheets (CSS) to help with consistency/unity";
//   purpose: "giving all pages a common look and feel" (s2589336);
 
   using_proximity_to_connect_elements_visually
     definition: "putting related elements close together, for example graphics and
                  labels/titles, headings and sub-headings, company name and logo",
     annotation: "the Gestalt visual principle of proximity states that the eye and mind
                  see objects as belonging together if they are near each other in space";     
 
   using_a_style_of_presentation_from_one_section_of_a_sequence_to_the_other 
     object: "orientation information, navigation devices, user input, feedback,
              operating instructions" (s2590366)
             "terminology, voice, names of commands and manner of evoking them" (s2603621)
             "navigation graphics or text, colors and fonts" (s2603678);

Making the interface provide good feedback

 making_the_interface_provide_good_feedback
   subtask: making_the_interface_provide_good_feedback_for_every_user_action,
   purpose: "usability is increased by providing meaningful feedback to the user to show that
             an action has been completed, was unable to complete, or has errored" (s2603621);



Further Argumentations

 "the maximum amount of information should be presented in the minimum amount of space"
   argument: "this reduces scrolling or browsing and hence quickens information retrieval"
             "this is what most commercial Web sites do",
   objection: "this goes against clarity (as in 'simple', 'structured and 'precise')",
   exclusion: "the presented information should be clear (simple, structured and precise)";
 
 "the presented information should be clear (simple, structured and precise)"
   specialization: "the presented information should be simple"
                   "the presented information should be structured"
                   "the presented information should be precise",
   argument: "clarity helps understanding";
 
   "the presented information should be simple"
     specialization: "the presented information should not have superfluous texts/graphics/sounds/..."
                     "technical terms should be avoided"
                     "overabundance of fonts or colors should be avoided";
 
   "the presented information should be structured"
     specialization: "sections, tables, lists, hierarchies and other structures 
                      should be used as much as possible",
     argument: "structure eases information understanding/memorising and helps
                manual/automatic information retrieval/re-use";
 
   "the presented information should be precise"
     specialization: "the presented information should be as precise as possible",
     argument: "precision helps understanding";
 
     "the presented information should be as precise as possible"
       specialization: "the most precise terms/structures/notations (hence the 
                        most technical ones) should be used";
 
       "the most precise terms/structures/notations (hence the most technical ones) 
        should be used"
         objection: "technical terms/structures/notations are difficult to 
                     understand by non-specialists"
                    "even research articles often use informal formats (e.g.,
                     English paragraphs) instead of using more precise and 
                     structured format (e.g. the FL format)";
 
         "technical terms/structures/notations are difficult to understand by
          non-specialists"
           objection: "technical terms/structures/notations are needed for precision
                       and a genuine understanding (this is why they were invented)"
                      "technical terms/structures/notations can be learned"
                      "statements using non technical terms/structures/notations can 
                       be related by specialization relations to statements using
                       technical terms/structures/notations for easing learning
                       and understanding";
 
         "even research articles often use informal formats (e.g., English paragraphs)
          paragraphs) instead of using more precise and structured format (e.g. the 
          FL format)"
           objection: "this is true but the consequence is that it is hard to 
                       retrieve and compare all the ideas or techniques that are 
                       related to any particular problem and hence to assess their
                       originality and value";