KEY principles of multimedia design - PowerPoint PPT Presentation

About This Presentation
Title:

KEY principles of multimedia design

Description:

NEWSPAPER to provide in a web environment 'all the news that's fit to print' ... There is no 'pure' information, entertainment or task-oriented content thus, ... – PowerPoint PPT presentation

Number of Views:76
Avg rating:3.0/5.0
Slides: 43
Provided by: sma47
Category:

less

Transcript and Presenter's Notes

Title: KEY principles of multimedia design


1
KEY principles of multimedia design
  • Sorin A. Matei
  • Various classes

2
PRINCIPLE 1 FORM FOLLOWS FUNCTION (CONTENT), NOT
THE OTHER WAY AROUND
  • Creating multimedia content
  • More than writing code or displaying pictures
  • Your are trying to convey a specific type of
    information or to help the user accomplish a
    specific mission
  • IN THE EASIEST AND MOST INTUITIVE manner possible
  • The form of your content should facilitate this
    process, it cannot be a goal by itself
  • The cool factor is important but only if
    subordinated to your main mission

3
PRINCIPLE 2 DISCOVER AND DEFINE THE FUNCTION OF
YOUR MULTIMEDIA PRODUCT
  • What do you want to accomplish with this content?
  • Possible types of content
  • Informational
  • Entertainment
  • Task-oriented (perform a service, sell a product,
    etc)
  • For each type of content there should be a
    specific mission
  • ON-LINE CONTENT
  • NEWSPAPER to provide in a web environment all
    the news thats fit to print
  • E-comerce/Corporate to sell products and create
    identity
  • GAMES, MOVIES To transport you to a make-belief
    world
  • There is no pure information, entertainment or
    task-oriented content thus, multiple missions,
    but they are usually organized into a hierarchy
  • Define the content in a user-centric manner
  • Function and mission should be defined not in the
    abstract, but in view of satisfying an expected
    viewer/user
  • Who is going to be my typical user?

4
PRINCIPLE 3 LESS IS MORE
  • Offer on the front-page gateways for each major
    type of user, organized around a common theme
  • For most real world and corporate content
    products missions are multiple and users diverse
  • DO NOT confound this with offering a smorgasbord
    of information
  • Organize the content around a single, clear
    information path with possible jump-off points
  • How do they stack up?
  • SONY.com, TOSHIBA.com, TIMEWARNER.com,
    DISNEY.com, NASA.gov, www.publius.org

5
PRINCIPLE 4 ORGANIZE CONTENT HIERARCHICALLY
  • Draft pre-design lists of elements that your
    imagined typical user will need on the content
    platform
  • Organize the lists (information clumping)
  • Hierarchically
  • By class (type)
  • Alphabetically
  • Chronologically

6
PRINCIPLE 5 SUBVERT HIERARCHY
  • Do not get bogged down in very intricate
    hierarchical/nested pages
  • Give access to as many elements on your content
    as possible
  • MOST IMPORTANT Display or link most important
    information right from the beginning
  • HAVE THE USER IN YOUR MIND ALL THE TIME

7
PRINCIPLE 6 DEGRADE GRACEFULLY
  • You never have complete control over the way in
    which the viewer will see your content
  • Stuff gets ported, translated, repurposed
  • Construct content around a simple and sturdy
    basic structure, use simple protocols and widely
    accepted content formats.
  • Familiarity and usability of a format takes
    precedence over cool factors, unless the
    technology you are proposing is truly
    revolutionary

8
PRINCIPLE 7 A PICTURE IS WORTH A THOUSAND WORDS
A MOVING IMAGE EVEN MORE
  • PROVIDED
  • The picture is good, appropriate for the context
    and does not get in the way
  • The movie is short, well edited and conveys a
    message
  • Images are complemented by text, music, sound, to
    make the experience complete

9
PRINCIPLE 8 USE CONVENTIONS AND STICK TO THEM
  • Use conventional colors for different sections
  • Use icons and clip-art consistently
  • Be conservative use pre-existing metaphors, do
    not invent new ones unless they are very, very,
    very compelling
  • For navigation
  • Links and buttons that go to links should look
    like navigation devices
  • Label everything clearly and in plain English
    (abstain from cute nicknames)
  • Use icons with caution

10
PRINCIPLE 9 PLACE THE content IN SPACE AND TIME
  • Include on interface, especially in informational
    contents
  • When was the content created
  • What geographic or spatial area it is related to
  • Location and contact modalities for all people,
    organizations, etc. mentioned in the content that
    you think would benefit from being contacted

11
PRINCIPLE 10 USE SOUNDBITES AND KEYWORDS
  • Stuff the text with the words you would like the
    people to remember and nothing more
  • Use words in the text people might use in a
    search on Google

12
PRINCIPLE 11
  • NEVER MATCH COLORS ON YOUR content THAT YOU WOULD
    NOT MATCH IN YOUR CLOTHING
  • Avoid clashing colors / use complementary colors
  • Use a limited color palette for each interface
  • For interfaces with a lot of text that is meant
    to be read in more than a few seconds use black
    text on white background
  • Link the body of the text off the main screen
  • Use a colors to mark section and level in the
    section
  • Use red like animals do, as a sign of
    attractiveness or danger
  • Use black for stylish, high contrast contents, do
    not use for regular, text rich contents

13
The planning process
  • Some of the information you need for defining the
    content is obvious, some is not
  • Before starting on creating the content you have
    to spell out everything you need to know yourself
    about the subject the content refers to
  • This will help you formulate the mission of the
    content, its audience, its functionality and scope

14
1st Ungraded exercise
  • Analyze the Sony.com website using the following
    question list
  • Does form follow function?
  • Is the function of the website clearly presented?
  • Does it apply the less is more principle
    effectively
  • Does it organize content hierarchically?
  • Does it subvert hierarchy, when necessary?
  • Can the content be transported to simpler devices
  • Does it use pictures effectively?
  • Does it use easily recognizable conventions?
  • Does it place content in space and time?
  • Does it use effective wording?
  • Does the color scheme look good?
  • Write up your answers in a paragraph format
    explaining how the site meets these requirements.
  • The exercise is due next week, on January 20th.
    Although not graded, the exercise is mandatory.
    Failing to turn it in will result in a 50 point
    deduction from the class score.

15
Pre-design Interview
  • You need to ask your client (or yourself) a
    number of clear and direct questions that will
    determine
  • Why do you want to create the content?
  • What should it do?
  • Who should it address?
  • What is to be done to accomplish that?
  • By whom and by what due date?
  • NOTE Ask many probing questions, try to find out
    all that you need to find out from the client.

16
Strategic planning document
  • Distills the information found in the Pre-design
    interview,
  • This is your contract with the client, in which
    you specify what is to be done
  • Deals with two types of issues
  • General
  • Specific
  • Mission statement (general, broad goals)
  • What does this type of content want to accomplish
    in the grand scheme of things?
  • Who is it going to address?
  • Objectives (specific, concrete aims)
  • What does the content want to accomplish
    concretely, in deliverable terms?
  • Implementation
  • What are the deliverables?
  • Actions
  • What is to be done to produce the deliverables?

17
Content Map
  • A simple diagram, depicting the pages (sections)
    and the relationships between them

Mental Maps content map
18
Storyboard
  • Rough diagrams of each main page or master pages
    to be used on the content
  • Organized in a stack
  • Leaf through the pages as if you were navigating
    through the content

19
USABILITY PRINCIPLES
  • DONT MAKE ME THINK
  • When you look at an interface everything should
    be self-evident
  • People should be able to navigate a webpage or
    GUI (graphic user interface) without being
    conscious of their decisions
  • The process should be natural
  • Thinking is the process of figuring out the
    meaning of various page elements
  • Its a bad thing and you should stay away from it

20
Why thinking is bad
  • If people start thinking
  • They lose track of what they came to the page for
    OR
  • They get bored OR
  • Confused AND
  • WILL MOVE ON
  • Remember everything is to be understood in one
    glance
  • On the web competition is just a click away

21
How do people use multimedia content?
  • When confronted by an interface, people act on
    impulse
  • People are impatient they are not willing to
    spend more time at an interface than they need to
  • How much time are they willing to spend?
  • Very little!

22
Interfaces and the art of scanning
  • People go to a webpage with a very specific goal
    (need) in mind and they expect to satisfy that
    need (goal) right awayinstant gratification
  • They get easily frustrated if the page does not
    serve them that ONE thing they are looking for
  • This thing should be available at a glance, with
    minimum reading and reasoning

23
The navigation process
  • SCAN
  • SATISFICE
  • MUDDLE THROUGH

24
Fact of life 1 We dont read computer screens.
We scan them.
  • Reasons Its a habit
  • We never read everything, thats how we deal with
    most printed materials other than textbooks (or
    especially with those!)
  • Reading stuff off screens is hard
  • We advance through visual hops anchored by hot
    spots (graphics)
  • People go to a webpage looking for something that
    resembles (no matter how remotely) what you are
    looking for and IS CLICKABLE Page 21, 2nd figure

25
Fact of life 2 People do not make optimal
choices, they satisfice
  • People do not reason about the best choice
  • They choose the first reasonable option
  • Reasons hurry, no penalty for being wrong, no
    benefit from being right, guessing is more fun

26
Fact of life 3 People dont figure out how
things work. They muddle through
  • People use a lot (and wrongheaded) guesswork
  • They forge ahead and learn how to use a device or
    content through trial and error

27
What is the web experience closest to?
  • Rank the following experiences according to their
    similarity to the web surfing experience
  • Reading a newspaper
  • Glancing at a billboard by the side of the
    highway at 60 mph
  • Surfing through TV channels
  • Reading a book
  • Playing a game

28
All of them but mostly
  • A billboard

29
COROLLARY
  • Everything should be made available to us in a
    snap and should be brainless

30
Layout principles
  • MAKE A STRONG, ONE GLANCE IMPRESSION
  • Just like in a billboard, the viewer should
    understand with one look what is going on
  • FIRST THINGS FIRST
  • Rule of newspaper headlines the more important
    something is, the more prominent
  • Use bold and distinctive fonts but do not break
    the unity of the content
  • ORGANIZE THINGS HIERARCHICALLY
  • Things related logically should be related
    visually
  • Things that are subordinated to other things
    should be nested visually in them
  • Good organization reduces the thinking process

31
Gaming/computing conventions
  • On the web web, just like in other computing
    experiences, we use conventions
  • These should be self-evident and in general use
  • They include layout, buttons, search engines,
    forms, etc
  • They are part of users repository of learned
    behaviors
  • Chinese language test of convention use (page 35)
    your page should still be usable, even if
    translated into Chinese, just by knowing what the
    content is about
  • E.g. try to use the Chinese interface of yahoo to
    check your email

32
What all well-behaved interfaces should look like
  • All webpages should include
  • Clearly defined areas
  • Header (content ID and name), text, navigation
    areas (General and local), indicators of location
    (if necessary)
  • Hyperlinks that are obviously so
  • They should all be invitingly clickable
  • Search boxes that are simple and prominent (if
    necessary)
  • NOTE KISS-keep it simple stupid

33
To make sure that everything is OK apply the
TRUNK TEST
  • From Krug, page 87
  • Imagine that youve been blindfolded and locked
    in the trunk of a car, then driven around and
    dumped on the stoop of a webpage deep in the
    bowels of the Internet. If the page is well
    designed you should be able to answer these
    questions without hesitation
  • What kind of content is this? (content ID)
  • What page I am on? (Page name)
  • What are the major sections of this content?
    (Sections)
  • What are my options at this level? (Local
    navigation)
  • Where am I in the scheme of things? (You are
    here indicators)
  • How can I search?

34
Organizing your interface
  • Header
  • Conveys the main idea of the content is an
    ideogram (like a Chinese character)
  • Establishes content identity (content ID)
  • Needs a title and a TAGLINE
  • the title of the content should be metaphorical
    and easy to remember
  • the tagline should be descriptive, it explains
    what the content is all about
  • The tagline can be complemented by a first, clear
    to understand paragraph on the page, but it
    should not replace it

35
Page essentials continued-Text
  • Eliminate needless words
  • Text should be treated as if it were optional
    the user should be able to use the content even
    if a mysterious virus erases all the text
  • Text is a bonus feature on the main pages, it
    adds (a little bit) of depth to the content
  • Text is, however, important on informational
    contents
  • Text should be easy to read and broken down into
    small paragraphs
  • All text should be broken down into columns, no
    column should be larger than 400 pixels
  • Use headers and subheaders generously but not
    frivolously
  • DO NOT insert hyperlinks in the text except for
    blogging, where this has become a convention in
    and by itself
  • (its like someone is shooting a pistol next to
    your ear when you are reading the newspaper)
  • Do not make headers into links UNLESS the header
    is followed by very little text
  • Create small links on the side
  • Blend text with pictures (break down monotony)
  • Long bodies of texts (articles, etc.) should be
    available in a print-ready format (preferably
    pdf)make sure text width fits on printed page

36
First important principle of writing text for
multimedia
  • Write your copy BEFORE starting to design the
    page
  • Content should drive form
  • Write in short bursts, soundbite-like
  • Everything (or most everything) should be
    memorable

37
Second important principle of writing text for
multimedia
  • Stuff your page with keywords and phrases likely
    to appear in search engine searches
  • Search engines parse your content for keywords,
    which will be matched with your content when
    queries are sent to the search engine

38
Third important principle of writing text for
multimedia
  • Happy talk must die
  • Space on the screen is precious because a users
    attention is short
  • Do not waste space with needless happy talk
  • Get to the point and stick with it
  • Dont carry an idea for more than a few sentences
  • Instructions must die
  • If you feel like you need to explain your users
    what they should do with the navigation or
    graphic elements on the interface, this is a sign
    that your design sucks
  • Instructions should be limited to a few words
    (see page 48)
  • Technical instructions (downloading, etc) are,
    however, useful

39
Navigation bars and tools as maps
  • Embed where pages are in their design
  • Navigation bars are essential for orienting the
    visitor in space
  • When well designed, they tell you where you are
  • To serve as navigation aides bars should
  • Look like navigation devices (follow conventions)
  • Should be located where they are expected to be
    located (across the top or on the left side of
    the page)
  • Be immediately intuitive buttons or obvious
    links
  • Should run throughout the contentexcept for
    entry page and forms
  • They should highlight where the user is right now
  • An alternative version is that of breadcrumbs
    (display the path to the page e.g. Yahoo
    directory)Always put them at the top

40
Navigation bars
  • They should be comprehensive and not include too
    many hierarchical levels (1 or max 2)
  • Combine a main navigation bar with a secondary,
    section specific, navigation bar that appears
    only in pages specific to a section
  • Use simple image maps and tabs, most resilient
    and easy to recognize
  • They should always have a home button (better,
    yet, link the header to the homepage throughout
    the content)

41
Navigation
  • Lets analyze some contents
  • Krug example Productopia page 126
  • Read the text, look at the screenshots and
    summarize the conclusion of the analysis in a few
    bullet points

42
Productopia today
  • Go to the productopia content today
  • What do you notice?
  • What happened to the content?
Write a Comment
User Comments (0)
About PowerShow.com