Main Page

From Multimedia

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

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




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

Making information clear

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

Using a legible presentation

  subtask: using_a_legible_presentation_for_textual_elements (pm)
           using_redundancy_on_multiple_media_channels (pm);
           "Proper use of white space"(s2176973);

    subtask: using_the_right_size_or_font_for_textual_elements
             "setting text flush left / unjustified" (pm)
             "using a mix of upper and lower-case letters to promote legibility" (pm)
             "avoiding using hyphens to split words at the end of a line" (pm)
             "using wider margins to increase white space for readability online" (s2589336)
             "using darker or brighter contrast in small areas" (s2589336)
             "do not centre text, always left align" (s2589220);
             "try to use dark text (eg. Black) on light backgrounds (eg. White), and vice versa" (s2555373)
             "using a meaningful naming convention that accuratly describes its function" (s2590085)

      subtask: "using and big enough fonts" (pm)
               "using size 18-36 point size for headings" (pm)
               "using text sizes larger than 12-point for body text" (pm)
               "using serif for body text and san-serif for titles and headlines" (pm)
               "using fonts that are available for all operating systems" (s2590366)
               "make sure it is more foregrounded from other font" (s2589220);

      subtask: "limiting line length to 40-60 characters" (pm)
               "limiting line length to about 11 words per line" (pm);

    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

  subtask: be_sparing_with_textual_elements (pm)
           be_sparing_with_graphical_elements (pm)
           using_a_simple_language (pm);
           "using small images eg gif, jpeg" (s2589220)

    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" (pm);

    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" (2603498)
             "pages should load within no more than thirty seconds, 
              including all graphical elements" (s2589336);

    subtask: "stay away from negative statements if possible; avoid double negatives entirely" (s2590366)
             "making sure correct grammer and spelling are used" (s2603457)
             "use short sentences so that the message is understood and digested easily" (s2555373)
             "using too many connecting words such as 'and' and 'or' can lose the attention of the reader" (s2555373)
   argument: "avoid using too many complicated words. just because you understand them, doesn't mean everyone else can" (s2555373)
             avoiding_slang (pm)     avoiding_technical_term (pm)
             using_correct_language (pm);

       rationale: "unless for a purpose, country-specific language should be avoided,
                   as foreign readers may not understand" (s2603457)
                  "the page seems unprofessional" (s2589220)
                  "generally makes it difficut to understand" (s2590528);
        subtask: using_correct_spelling (s2587712)
                 using_easy_flowing_words (s2587712);

Using a structured presentation

  purpose: "improving cognitive recall by providing order and common characteristics" (pm)
           "providing logical positions for pieces of information and hence helping 
            to locate them, gather them, compare them and check for their completeness
            and consistency" (pm)
           "allowing to focus on small chunks since they are easier to memorise and exploit" (pm),
  subtask: dividing_information_into_digestible_chunks (pm)
           "keeping paragraphs four to eight lines long" (s2589336)
           "using headlines, bullets, pull quotes and sidebars" (s2592913)
           "using contrasting colors to separate groups" (s2603678);
           "providing different screen areas for separate chunks i.e. colums or boxes of text"(s2590528)
           "ensuring paragraphs are used and indents are made at the start of each paragraph" (s2555373)
           "using headers and footers" (s2587712);
      subtask: using_spaces_between_chunks_of_information (pm);
        subtype: "separating paragraphs by a blank line",
        purpose: "structure allows the reader to find information easily" (s2603678);
                 "distinctly seperates chunks of info as to subject so it is easier for the user to read"(s2590528)

Using precise information

Using an attractive and balanced presentation

  subtask: designing_so_as_not_to_shock_the_user (s2603457)
           capturing_and_retaining_attention_on_a_document (pm);
           "dont use to many colours other wise they will clash, causing dislike" (s2589220)

    subtask: "using backgrounds that don't clash/conflict with font colours" (s2603457);

    subtask: creating_focus_on_the_relevant_document_elements (pm)
             creating_balance_on_a_document (pm)
             "using contrast to stimulate attention on the page" (pm)
             "using heading in larger fonts to gain attention" (s2603678)
             "using contrasting colors and graphics" (s2603678)
             "using graphics to focus attention" (s2603678),
             "using page lines and colors to draw the eye to relevent elements" (s2590528)
    purpose: "good contrast draws the eye to different sections of the piece" (s2603678);

      subtask: "using large bold display type and/or graphics to create focus" (pm)
               "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" (pm)
               "using space to separate the element so it is not clustered" (s2603457);

      subtask: using_a_structured_presentation (pm)  //already detailed above 
               "weighting elements (size, density, page position)" (pm)
               "using tables for more precise placement of elements" (pm)
                "good contrast is needed for balance and organization" (s2603678)
                "visual entry points is needed for balance and organization"(s2603678),
               "create visual and color harmony with complementing colors"(s2590528)
      subtype: creating_symmetrical_balance_on_a_document (pm)
               creating_asymmetrical_balance_on_a_document (pm);

        purpose: "providing a conservative, safe atmosphere" (pm),
        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);

        purpose: "providing intense/dynamic compositions" (pm),
        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);
                    "this makes the page easy to read and makes the user feel comfortable" (s2589220)

Using a consistent presentation

  rationale: "a consistent approach aids navigation - readers can adapt and
              predict the location of information and navigation controls" (pm)
             "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)
              "use same colours thoroughout a page so it seems consistent and seems as one" (s2589220)
  subtask: establishing_a_framework_to_use_throughout_the_pages_of_a_Web_site (pm)
           grouping_objects_with_similar_functions_together_in_one_spot (s2594561)
           using_proximity_to_connect_elements_visually (pm)
           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)" (pm);

    subtask: using_a_graphic_theme (pm)
             "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" (pm),
    purpose: "giving all pages a common look and feel" (s2589336);

    definition: "putting related elements close together, for example graphics and
                 labels/titles, headings and sub-headings, company name and logo" (pm),
    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" (pm);     

    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

  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);
           "Good feedback lets the user know of the accumplishment so they are likely to want to keep using" (s2590528)



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" (pm)
            "this is what most commercial Web sites do" (pm),
  objection: "this goes against clarity (as in 'simple', 'structured and 'precise')" (pm)
  exclusion: "the presented information should be clear (simple, structured and precise)" (pm);

"the presented information should be clear (simple, structured and precise)"
  specialization: "the presented information should be simple" (pm)
                  "the presented information should be structured" (pm)
                  "the presented information should be precise" (pm),
  argument: "clarity helps understanding" (pm);


  "the presented information should be simple"
    specialization: "the presented information should not have superfluous texts/graphics/sounds/..." (pm)
                    "overabundance of fonts or colors should be avoided" (pm)
                    "user interface should be as simple as possible" (pm);
                    "do not cram everything into small spaces, it makes the document to busy" (s2589220)

    "user interface should be as simple as possible"
      specialization: "all unnecessary controls, features or information should be removed"(s2603678)
      argument: "users can be more effective and concentrate on their task"(s2603678);


  "the presented information should be structured"
    specialization: "sections, tables, lists, hierarchies and other structures 
                     should be used as much as possible" (pm),
    argument: "structuring information makes it easier for the user to follow and is more appealing" (s2588365)
              "structure eases information understanding/memorising and helps
               manual/automatic information retrieval/re-use" (pm);


  "the presented information should be precise"
    specialization: "the presented information should be as precise as possible" (pm),
    argument: "precision helps understanding" (pm);
              "precision helps to eliminate confusion"(s2588365)

    "the presented information should be as precise as possible"
      specialization: "the most precise terms/structures/notations (hence the 
                       most technical ones) should be used" (pm);

      "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" (pm)
                   "even research articles often use informal formats (e.g.,
                    English paragraphs) instead of using more precise and 
                    structured format (e.g. the FL format)" (pm);

        "technical terms/structures/notations are difficult to understand by
          objection: "technical terms/structures/notations are needed for precision
                      and a genuine understanding (this is why they were invented)" (pm)
                     "technical terms/structures/notations can be learned" (pm)
                     "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" (pm);

        "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" (pm);



Do not delete this link to the Original page.

Terms of use