Info Sys - Applied Multimedia - Design

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.

Linear

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

Hierarchical

• 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

Web

• 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

Composite/Hybrid

• 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

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"

Backtracking

• 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

History

• 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

Bookmarks

• 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

Breadcrumbs

• 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

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

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

Requires users to type in commands

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

ADVANTAGES

• 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)

DISADVANTAGES

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

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

There are different types of menu:

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

ADVANTAGES

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

DISADVANTAGES

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

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

ADVANTAGES

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

DISADVANTAGES

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

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)

ADVANTAGES

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

DISADVANTAGES

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

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

CONSISTENCY

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

DIFFERING USER ABILITY LEVELS

Differences in experience between users need to be considered

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

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

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'

A 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

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

Kerning

• 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

Anti-aliasing

• 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

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

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

Colour

• 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

Dithering

• 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

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

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.

Adv:

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

Dis:

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

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

Adv:

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

Dis:

• 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

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

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

Adv:

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

Dis:

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

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

Adv:

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

Dis:

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

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