Info Sys - Applied Multimedia - Design

Information Systems

Scottish Higher

Unit 3A - Applied Multimedia


Let me know where the mistakes are in this and i'll fix them asap... i'm to lazy to do my own proof reading :L

Navigational Structures (Linear & Hierarchical)

MM application screens must be able to move between each other and be linked in a logical manner so the user can manipulate the application.


  • slides are connected logically and can only move forward or backwards
  • popular in basic presentations


  • this groups each part into topics with sub-topics and headings
  • based on content designed according to categories and sub-categories
  • less limiting than linear structure
  • useful for content based websites where a user can move directly to a topic
1 of 27

Navigational Structures (Web & Hybrid)


  • allows users to follow their own information flow in a heuristic pattern
  • unique to each user using the application
  • used widely on the internet but can be applied to any other types of delivery


  • part linear & hierarchical-  useful with lots of topics and sub-topics
  • users can navigate in a free manner but are linked in a hierarchical or linear fashion
  • integrates various aspects of other structures
  • least limiting structure
2 of 27

Complexity of Navigational Structures

When browsing it can be easy to become confused by where you are relative to where you started- this is called being "lost in hyperspace"


  • implemented by a back button on an menu or toolbar
  • without it it is possible to get stuck on a node(page) with no outgoing links
  • it is a useful orientation tool as you can go forward and backwards
  • software will also keep a list of the previous screens the user has visited


  • a complete list of all nodes or links which have been visited
  • each screen is represented once in a history file
  • it only contains recently visited links not older ones
  • easier to understand than backtracking
3 of 27

Complexity of Navigational Structures II


  • list of pages the user has selected to visit fequently
  • can be personal or colaborative
  • they can be annotated and changed by the user and arranged into folders


  • a 'trail' of pages that the user could have follwed to get to the current page
  • they can be placed as small hyperlinks at the top of a page to indicate where you are

Highlighting (nodes/links)

  • includes a sense of location by indicating where the page is graphically
  • by greying over or changing a current selection the user can better understand where they are
  • hyperlinks are usually shown in blue and underlined- they change colour once selected
4 of 27

Complexity of Navigational Structures III

Search Facilities

  • in order to find specific pieces of information a search facility can be used to find relevant information with specific criteria
  • search criteria work according to boolean logic

Primary opeartors are:

    • AND finds narrower results by only including all linked words
    • OR searches at least one term broadening the search
    • NOT excludes results and filetrs out unwanted sub-categories
5 of 27

User Interfaces

The way in which the user and computer interact to exchange information and instructions

The UI should make a program easy to use and understand

There are four types of user interface

  • Command Line Interface
  • Menu-Driven
  • Form-Fill In
  • Graphical User Interface
6 of 27

Command Line Interface (CLI)

Requires users to type in commands

The set of commands used to interact with the computer is called the 'command language'


  • fast for experienced users
  • uses a small amount of memory
  • doesnt need a fast processor
  • commands can be grouped into a batch file (to automate repetitive tasks)


  • difficult to learn
  • needs experienced users
  • error messages can be ambiguous
7 of 27

Menu-Driven Interface

The user interacts with the computer by selecting various options from a menuPrograms may have many menus designed carefully for ease of use

There are different types of menu:

  • scrolling, pull down, pop-up, hierarchical, user defined


  • dont need to memorise commands- all commands are listed
  • menus can be nested together
  • easy to use for beginners


  • some operation/options are not visible
  • options are limited
  • can be time consuming/slow for expert users
  • screen can become 'cluttered'
8 of 27

Form Fill-In Interface

A display of related fields are shown so the user can enter data into the relevant areas

Common on the internet- online shopping

Fields can be optional, required or default


  • simple data entry
  • dont need to remember syntax or commands
  • minimum training required
  • assistance is given- pop up screens, error messages


  • consumes screen space
  • form size can be overwhelming
  • needs validation for typing errors
9 of 27

Graphical User Interface (GUI)

User interacts with the computer by using a pointing device (mouse) which enables manipulation of windows icons and menus- VERY USER FRIENDLY

Gives the user the feeling of physically manipulating items on screen

Most popular form is WIMP (windows icon menu pointer)


  • fast interaction
  • easy retention and learning
  • uses familiar designs


  • difficult to program/implement (depending on application)
  • not all tasks can be represented graphically
  • uses lots of memory
  • needs fast processor
10 of 27

User Interface Design

METAPHORS- representing real life objects ina computer to give a visual expression of its function

Key principles of the HCI:

  • consistency and standards
  • aesthetic and minimalist design
  • help and documentation
  • differing ability levels
  • providing feedback
  • easy correction of errors
  • avoiding information overload
11 of 27

Consistency/Differing User Ability Levels


Can be built up using similar concepts and consistency in colour and method of operation (e.g. in menus)

Terms used in one application should mean the same in another- users should be able to assume consistency- user can transfer skills between applications

It is useful to follow real world conventions and make information appear in a natural and logical order


Differences in experience between users need to be considered

  • enviroment
  • levels of expertise
  • disabled enviroment
  • similarities and differences between individuals- ergonomical considerations
12 of 27

Feedback / Correction of Errors

Providing Useful Feedback

For every action there should be some kind of feedback provided.

Ways to provide feedback:

  • Change of colour (e.g. when a button is clicked)
  • Sounds
  • Dialogue boxes

Easy Correction of Errors

good design helps users avoid making mistakes by giving clear instructions. However users may still enter incorrect data.

Software must always make it easy to correct these errors

13 of 27

Avoiding Information Overload

A good user interface will avoid presenting the user with too much information at once

The user may be come confused or miss important information

Important objectives:

  • avoid multiple windows
  • simplicity is always the goal
  • minimalise 'clutter'
14 of 27

Screen Designs - Storyboards

storyboard consists of sketches of each screen. It will show:

  • each media element on screen
  • buttons or menus the user can interact with
  • information about colours and font sizes
  • transitions
  • links between screens

Outline storyboard:

  • shows the overall structure of the application
  • with no fine detail
15 of 27

Screen Designs - Detailed Storyboard

Detailed storyboard:

  • should show all the elements on the finished product

It should cover:

  • user interactivity
  • audio
  • text
  • video/animation/graphics
  • links and navigation
  • colours

these should be laid out on a design template and the client should be aware of the design incase of any changes.

these can be merged into an elecronic storyboard

16 of 27

Screen Designs - Text Features


  • to improve the visual appearance of grouped characters
  • reduces or increases the spacing in between adjacent letters
  • can be added automatically if font has kernel data embedded


  • aliasing is the undesired jagged edges created by viewing data at a low resolution
  • anti-aliasing smooths curves by changing the colours of pixels around edges to give the impression of straight edges and smooth curves
17 of 27

Screen Designs - Non-standard Fonts

Sometimes a designer wants to use a font which is not supported by all browsers. There are two  ways to overcome the problem of compatibility:

Embedded fonts

  • allows the fonts originally used in the creation of the document to be used by embedding the font into the file
  • this guarantees the text can be viewed in any browser and the original document will not be altered
  • it creates a disadvantage by increasing the file size

Graphical Text

  • small sections of text can be can be transformed into a graphic file that will be guaranteed to be displayed on a screen
  • adv: aesthetic and eye catching, looks good on menu/tool bars
  • dis: accessability problems (hard to read), uses lots of storage space, longer download times
18 of 27

Screen Designs - Colour and Graphics

When creating graphics for a MM application a designer needs to factor in the users' display technology and that it may not display the graphic exactly as intended


  • if colours are displayed on an 8bit display different browsers will remap colours according to their own characteristic palette
  • this causes a problem as it can change the original colour scheme

Web palettes

  • there are only 216 colours that are 'browser safe' and will appear on the majority of browsers and OS the remaining 40 will vary between Macs and PCs
  • this limits the number of colours that the designers can use and ensure they will be displayed as intended
19 of 27

Screen Designs - Colour and Graphics II


  • more than 256 colours are needed to be displayed
  • the designer can use dithering to place different coloured pixels together to give the impression of different colours

Gamma correction

  • to display an image correctly the screen requires overall control of the brightness of the image since they can look bleached out or too dark
  • this is fixed with gamma correction which changes the input voltage signal to the monitor so that the images are displated correctly
  • caused by CRT that do not generate light intensity proportional to the input voltage
  • the value of gamma is approx. 2.5
20 of 27

Progressive Scan (Interlacing)

With a slow internet connection you can see graphics appear gradually.

Using progessive display every second line of pixels is downloaded first so the user sees a rough version of the whole picture

The second set of lines are downloaded which completes the picture

'Progressive display' - JPEG

'Interlacing' - GIF and PNG

21 of 27

Downloading (vs Streaming) Audio

Once the file has been downloaded it can be played in a suitable player. Downloading can be quite slow and you must wait for the entire file to be downloaded.


  • complete file is saved on hard drive
  • can play file as often as required
  • can fast forward and rewind


  • can take a long time to download
  • cannot listen until fully downloaded
22 of 27

(Downloading vs) Streaming Audio

Audio is played in real time as it arrives over the internet

The file is not saved on the computer system so a network connection must be sustained


  • listen to file immediately
  • plays as it downloads
  • plug-ins available


  • requires fast connection
  • some ISPs disconnect after a certain amount of time
  • cant fast forward or rewind
  • some firewalls will disallow connection
  • compression rates can reduce sound quality
23 of 27

Implications of Using Video

If a video is used in a MM application a designer must ensure the user can control the video

controls such as forward, fast forward, rewind, stop, pause & volume controls should be included

video incorporated into a MM application can be

  • created by designer
  • commissioned from a scriptwriter
  • copied from CD-ROM
  • downloaded from internet
24 of 27

Downloading (vs Streaming) Video

after downloading a video from a website you can save it onto a hard disk and play back when desired


  • complete file can be saved on hard drive
  • can be played as often as desired
  • can fast forward and rewind


  • long time to download
  • cannot watch until fully downloaded
  • plug-ins may be required
25 of 27

(Downloading vs) Streaming Video

Requires connecting to a streaming server. A special player is needed to view and play the files. Video can be played and downloaded at the same time


  • play & listen to file immediately
  • play as it downloads
  • less time to view file
  • more use of bandwidth


  • firewalls can prevent streaming
  • compression rates can affect quality
  • requires good network connection
26 of 27

Health Issues (Video Playback)

Flashing sequences in a video or presentation can cause eplilepsy

Photosensitive epilepsy can be triggered by flashing or flickering at a certain frequency

- safe frequency of flashing sequences is on or below 5 hertz

Warnings should be given on any application to alert the user to the danger of flashing sequences

You should:

  • construct a risk assesment of the application
  • make sure the display has control to adjust brightness, etc
  • minimise reflections
27 of 27


No comments have yet been made

Similar Information Systems resources:

See all Information Systems resources »