Document Sample
Multimedia Powered By Docstoc
					School of Computer Science &
           Information Technology

     G6DPMM - Lecture 9

    Media Design I – Text & Images
The Importance of Text
   Historical movement away from text
       Operating Systems
       Hypertext / Hypermedia
       The Web
       PDAs & Phones
   Ease of use
       Open standard (mostly) – ASCII/Unicode:
       Easy to generate (technically)
       Portable
       Easy to maintain / edit
       Readily computer manipulable
   Near universal accessibility
The Future of Text
   Technologically
       Other media will eventually become as easy to
        manipulate as text


   The written word
     Important for artistic, cultural, educational reasons
     Books / Newspapers have not been replaced by TV!
The Consumption of Information
   The advent of “browsing” behaviour
       Compare information consumption with pre-IT times:
       Shorter sessions
       More integrated into other activities.
   The changing nature of reading
     The reading of non linear content is not always linear
     Some reading is not even forwards!
     Why?
     Design does need to reflect this widely observed “fact”
Advertising Text & Multimedia
   Many parallels between writing for advertising
    and writing for multimedia
       “Screen-full” of text cf posters etc.
       Competition for readers attention
 Ideas borrowed from advertising theory
 GAS Analysis
     Goals
     Audience
     Scope
   Why do you want to say it?
   Readers goals
    (Why are they reading the material?)
       Obtaining information
       Entertainment
       Communicating
       Obtaining something physical
   Writers goals
    (Why are you writing the material?)
       Services (e.g. education)
       Communicating ideas (e.g. philosophical / political / religious)
       Branding / advertising
       Creativity / art
 Who do you want to say it to?
 “Know your user”
       Stereotyping – defining the user group
       Cultural / socio-economic / educational etc.
       Technological experience
            Access / effective use of interface / effective extraction of knowledge
   Adaptation
     Traditional products often individually crafted
     Less common with mass-production – including multimedia
     Adaptive and personalised systems are starting to become
 What are you going to say?
 Determine boundaries
       Depth & structure of knowledge
       Small enough to be feasible
       Large enough to achieve the goals
   Choosing a logic
     Reader must appreciate the scope and content as
      quickly as possible
     Possible models – narrative / argument / vision
Text on Screen
   Text on screen is less “readable” than text on
       Hardware limitations – will eventually change, but
        not for the foreseeable future.
       Information retention / fatigue / cognitive load
   Text should thus be “scannable”
       Quick skim-reading should give an accurate overview
       Informed decisions can then be made as to whether it
        is worth the effort of reading
Scannable Text
   Inverse Pyramid Structure
            Title  Summary  Overview  Article
       Executive Summary / Press Release
                             The slide that deals with methods to facilitate rapid
   Front Loading            information extraction from text is entitled Scanable Text.

                             Scannable Text. This slide deals with methods to facilitate
   Short paragraphs         rapid information extraction from text.
       Split up large tracts of text – more so than for print
   Headings
       Use short headings liberally – one per concept
   Avoid superlatives and “promotional” writing
   Avoid superfluous description
Length of Text
   Keep it short!
       Readers will not read long tracts on screen
       As short as possible, but long enough to say what has to be said.
       Concise – often takes many rewrites.
   Keep length consistent
       “Natural” breaks may lead to wildly varying sizes of text.
       Add artificial breaks if necessary to maintain rough consistency
   Scrolling issues
       Avoid scrolling if internal reference is necessary (e.g. between related
       Scrolling is often essential, but very easy to overuse
   Structuring long text
       Use liberal headings & subheadings
       Consider layout / numbering
       Easy with material written for hypermedia, but hard with legacy material
Consistency of Text
   Tone of voice
       Formal vs. Casual
       Vocabulary, idiom, slang etc.
       Aim for a specific effect, but don’t overdo it!
   Level of knowledge
       Write for a specific user “model”
       Don’t patronise or confuse
   Grammatical Consistency
       Be careful with pronouns (e.g. I, you, they, we)
       Especially important with instructions
   Names in a hypertext
       e.g. “Home” “Start” “Introduction” “Index Page”
   Capitalisation in titles and headings
Linking From Text
   Useful techniques
                           Vanevar Bush’s seminal article
         Gather links together in one part of the screen on using technology to make
                       Vanevar small number ofmore [As We May Think] on Think.
              Only suitable forhuman knowledge articleaccessible is As We May using
                                a Bush’s seminal links
        Link from a carefully worded part of the text
                      technology to make human knowledge more accessible was
                       published in 1945.
              Only suitable if appropriate wording is in the text [Click Here for “As We May
                                 Vanevar Bush’s seminal article
        Include the link in brackets on using technology to make human knowledge
        Provide instructions more accessible was published in 1945.
             Patronising if instructions are obvious
   Do not litter the text with links!
   Provide information about:
        Local or remote link
        Size of media (i.e. subjective speed of link)
        Media type (especially sound or movie)
        Content of link (i.e. relevance
Readability of Text
   Screen vs Print
     Reading from screen is more tiring than from paper
     Retention is lower
     Consider if text on screen is appropriate
     Guidelines for readability are different!

   Legibility of fonts
     Choose an appropriate font for the size
     Generally – san-serif for titles & serif for body text
     Do not gratuitously mix fonts
     Use fairly large fonts on screen (typically 12-18pt)
   Other legibility issues
     Use white-space
     Left align with ragged right margin
     High colour contrast between text and background
     Generally use dark text on a light background

   Serif fonts
    e.g. Times Roman – use for main bodies of text

    e.g. Helvetica / Arial – use for titles

    e.g. Courier / Typewriter – use as necessary
    (e.g. tables of data / code listings etc.)

    Use with extreme caution for effect
Highlighting Text
   Highlighted Text
       Bold, coloured or a different font
       Can be very effective
       Use extremely sparingly
       Never EVER use blinking text!
   Disabled
       If text is inappropriate (e.g. a disabled link) “grey” it
       Reduce contrast so that it is deliberately less legible
   Selected
       If a part of text is especially active (e.g. one of a
        series of options selected), dynamically highlight it.
Screen Positioning
 Hierarchy (i.e. importance) is implied by the
  position on the page.
 Top is intuitively more important than bottom
 Western text is read:
       Left to right
       Top to bottom
   Hence the assumption of importance
       NB language dependence
Screen Positioning
 Hierarchy (i.e. importance) is implied by the
        Most Important
  position on the page.
 Top is intuitively more important than bottom
               1                       2
 Western text is read:
       Left to right
       Top to bottom
   Hence the assumption of importance
               3                       4
       NB Language dependence

                                 Least Important
Layout Grids
   Users “move” through the system
       Sequnce of screens
   Components should not seem to “move” around
       Most important with interactive elements
        (e.g. navigation buttons)
       Standard “Layout Grid” assigning areas of screen to
        specific functionality can be useful
   Sometimes there is conflict between the layout
    grid and functional (or aesthetic) design
       Lesser of evils!
Text & Graphics
   Pictures are a powerful cognitive aid
   Ideally pictures and text support and compliment each other
       Pictures may illustrate the text
       Text may explain pictures (e.g. labels or captions)
   Remember the “cost” of images
       Cognitive overhead
       Data budget
       Hard cash! (i.e. copyright fees)
   Images must be appropriate
       They should be a part of the message
       They should be high enough quality to do their job
       Avoid cognitive overload (easy with too many images)
        – “busy” interface.
Images as Symbols - Icons
   Images can sometimes be used in place of text – icons
   Visual symbol of underlying abstracted features – they
    represent meaning
   Advantages
       Fast to select
       Often most effective as a supplement to text rather than a replacement
       Language independent
   Disadvantages
       Usually very expensive
            Quality artwork is always expensive
            Many images are required (e.g. different sizes and states)
            Cheap clip-art icons are usually low quality and always clichéd.
       Contextual and cultural issues
Designing Icons
   Abstraction and Visualisation
       What is the essence of the concept?
       How can this be represented visually?
   Physical objects are generally easy
       e.g. cat, aeroplane, telephone
   Invisible / intangible items are harder
       e.g. air, alcohol
   Abstract concepts can be very hard
       e.g. search, save, weight
   Sometimes, but not always, conventions are available
   Icons should be intuitive
Designing Icons (cont.)
   Anachronistic symbols
       Modern devices/artefacts are often not easily distinguishable
       Obsolete versions are often instantly recognisable
            e.g. bellows cameras, steam trains etc.
   Familiar symbols in a foreign context
       Roadsigns are a common example
   Powerful images make good icons
       Elemental images – e.g. fire, water, sun, moon etc.
       Human figures – e.g. people, heads, hands, babies etc.
   Arrows
       Extremely powerful – usually they are the strongest “cognitive
        draw” on screen.
       Handle with care!
Icon Sets
   Icons should not be designed in isolation
       Icon sets
   Consistent in terms of:
       Colour
       Style
       Weight
       Metaphor
   Commercial icon sets are available
       Fairly cheap (typically hundreds of pounds)
       Risk of cliché
   Avoid free icon sets
       Rarely of high quality or consistency
       If they are, then cliché is inevitable

Shared By: