ProductLifecycle and Design Methods

1
Product-Lifecycle and Design Methods

• Bab 3

2
Software Lifecycle
Sequential Phase Model
O p e r a t i n g a n d
M a i n t a i n i n g
Preliminary Study
Analysis of Requirements
System Design
Implementation
System Testing
3
Software Lifecycle

• Special features of the development of multimedia
  applications
• Interdisciplinarity of the developer groups
  (computer specialist, psychologist, graphic arts
  designer, media specialist).
• Consideration of creative, artistic, aesthetical,
  psychological, ergonomic and didactic aspects in
  beside pure programming technical or engineering
  activities in the development process.
• Relevance of creative demands in addition to the
  functional demands on the software to be
  developed.
• Creating and processing of media objects to be
  used (animation, video, sound, ...).

4
Software Lifecycle

• Milestones in the development of multimedia
  applications
• Analysis
• Conceptual Design
• Structural Design
• Visual Design
• Media Production
• Implementation
• System Testing
• Support and Maintenance

5
Milestones of Multimedia Applications

• 1. Analysis
• selection of themes and content
• brainstorming
• purification of - goals (what should be
  achieved), - needs (is there any need? are there
  similar products?) and - expectations
• specification of application context
• definition of resources (which and how many
  people)
• preliminary cost calculation
• market analysis
• value of benefit (what is the added value to
  similar products?)
• analysis of efficiency
• lay out the system specification of product
  requirements

6
Milestones of Multimedia Applications
1. Analysis

• Content of a system specification of product
  requirements
• description of system functions
• description of interfaces
• description of restrictions
• description of operating conditions
• description of reaction to undesired events

7
Milestones of Multimedia Applications

• 2. Conceptual Design
• Definition of target audience.
• Who is my target audience and where is it
  located?
• Which systems does my target group use?
• How is the data used and how fast shall the
  access be?
• Are aspects of data security to be taken into
  account?
• Identification of themes, contents and goals of
  communication.
• Which messages, services, contents and dialogues
  shall be offered?
• Which Information should be presented?
• How and should the information be presented and
  which media should be used?
• Definition of theme-weighting (deepness,
  broadness) under consideration of the target
  audience.

8
Milestones of Multimedia Applications

• 2. Conceptual Design
• Target Group
• Surferinspire, hold, only intern links
• Novice Casual Userclear, simple structure, not
  much scrolling
• Experts Continuous Userfast, exact access,
  search engine, clear structure
• Internationalityseveral languages, no slang, no
  country specific expressions

Example An insurances page should be patterned
respectable, a shopping centers one varied and
multicoloured. Study pages should be didactically
(bertujuan mengajar) well shaped concerning
themes and performances.
9
Milestones of Multimedia Applications

• 3. Structural Design
• Defining ideas, contents and conventions, that
  should be implemented into the software.
• Defining priorities of information.
• Defining kind of presentation.
• Each page should content a recognizable and
  comprehensive information or message.
• Avoid overloading of pages (neither unilaterally
  with text nor with images).
• Design flowcharts about the sequence of pages
  and the distribution of information.
• Can the information be mediated (perantara) via
  the formatted interface?
• Defining communications- and interaction-technique
  s.
• Development of Storyboard.

10
Milestones of Multimedia Applications

• Structural Design ? Didactical Concept
• active acquiring vs. passive presenting
• group work possible?
• usage configurable?
• adapting to the learning speed of the learner

11
Milestones of Multimedia Applications

• Structural Design ? Organization
• Entrancefast, motivating, awake expectations
• Centreclear organized content, free options
• Exitexit should animate to stay or to come back
  respectively suggest cooperation

12
Milestones of Multimedia Applications
Structural Design Important Only the user
decides whether, how, when and in which scope it
might continue!

• Production Structure Form of Navigation
• possibility of open, non-linear structures
• decisive for application purpose
• Plausibility (diterima akal) of functionality
• intuitive understanding of orientation
• conditioning of the user
• the form of navigation should fit to the context
• The goal is to provide an ideal, target group
  oriented, content transfer through suitable
  navigation.

13
Milestones of Multimedia Applications
Structural Design ? Navigation Typical Basic
Structure
Graph with two Base ElementsNodes represent
the elemental, information carrying units. Links
connect the nodes with each other, to establish
logical, content based contexts between them.
14
Milestones of Multimedia Applications
Structural Design ? Navigation Linear Structure
General Features Sequential connection between
the single information nodes (on each other
following).

• Advantages
• Easily understood structure (because similar to
  the book).
• Suitable for the establishment of a sequence of
  information nodes in the sense of the so-called
  guided tours or path.

• Disadvantages
• Missing overview, above all in larger projects.
• Information on total structure remain concealed
  tersembunyi (structural nearsightedness).
• Nodes can only be opened after each other from
  the starting point to the end (no leaps possible).

15
Milestones of Multimedia Applications
Structural Design ? Navigation Hierarchical
Structure

• General Features
• Hierarchical arrangement is based on the
  summarizing from nodes to groups and subgroups
  (chapter / lower chapter).

• Advantages
• Easily understood.
• Good overview of the offered information.
• Flexible access on the contents.

• Disadvantages
• Requiring under circumstances more complex
  functions to the visualization (recursive
  algorithms for the representation of tree
  structures).
• Badly realizable in pure HTML.

16
Milestones of Multimedia Applications
Structural Design ? Navigation Grid Structure

• General Features
• Sequential sequences with several parallel paths.
  Each sequence shows the same amount of nodes.

• Advantages
• Single subjects can be placed equally next to one
  another (e.g. tables).

• Disadvantages
• High demands on the author and/or the
  presentation material.
• If there are gaps, mental room model can be
  destroyed.
• As in linear paths, no leaps are possible.

17
Milestones of Multimedia Applications
Structural Design ? Navigation Open,
Network-like, non-linear Structure
General Features The desired information are
freely retrievable.

• Advantages
• Large navigation freedom.
• Flexibly usable.

• Disadvantages
• Unstructured
• High-dimensional, danger of the disorientation
  (lost in Hyperspace).
• Often confusing for the beginner.

18
Milestones of Multimedia Applications
Structural Design ? Synchronisation

• Synchronization Demands
• Hard synchronization demands exact temporal
  connection between two information units.
• Soft time demands
• Lips synchronization (Audio data up to 80 ms
  before or behind the video data)
• Video-text-synchronization (subtitle)
• Audio-picture/text-synchronization (music
  accompanied descriptions)
• Pointer-commentary-synchronization (conference
  uses)
• Soft synchronization is media and contents
  dependent  
• Soft synchronization is relative (very good - bad)

19
Milestones of Multimedia Applications
Structural Design ? Storyboard

• A Storyboard should
• describe the contents and types of media
  universally,
• inform about the links between the single
  screens,
• make guidelines equally understandable for
  designer and programmers,
• assist for the estimation of the work-effort,
  e.g. for video- and audio-productions.

20
Milestones of Multimedia Applications
Structural Design ? Storyboard
Example I Flowchart of a homepage-structure.
21
Milestones of Multimedia Applications
Structural Design ? Storyboard
Example II Multimedia CD-ROM for presenting the
lecture Introduction to Multimedia-Technology"
22
Milestones of Multimedia Applications
Structural Design ? Storyboard
Example III Homepage of the CSCE degree course
23
Milestones of Multimedia Applications
Structural Design ? Storyboard
Scene Intro Introduction which automatically
starts when running the system
File intro.avi Size max. 8 MB Duration lt 1
min Rate 12 fps Format 240 x 180
Example IV Opening sequence of a video from a
multimedia CD-ROM
fade in audio and video
logo slides from the bottom into the scene
scene change new scene slides in from the left
24
Milestones of Multimedia Applications

• 4. Visual Design
• Follow basic ergonomic rules.
• Homogenous, user-centric layout.
• Perform the pages clearly arranged with headlines
  and figures.
• Expressive Titles.
• Not overloading single pages, neither with text
  nor with images this causes long loading periods
  and forces the user to long-time scrolling.
• Use a unified style with unified elements
  (navigation, headlines, typography, underlines,
  ...).
• Definition of standard elements (navigation,
  headlines, typography, underlines, ...).

25
Milestones of Multimedia Applications

• 4. Visual Design
• Possibly use metaphors as guidelines (virtual
  city, book or fantasy-world).
• Use metaphor in Look and Feel, helps the
  intuitive utilization.
• The pages should have a personal touch they are
  the publishers figurehead.
• Insert corporate identities (all pages should be
  accurately identifiable as connected with you).
• Pay attention to standard browser independence
• Address different senses, design using
  multimedia.
• Cause enthusiasm (minat).

26
Milestones of Multimedia Applications

• 4. Visual Design
• Provide short but precise information.
• Do not overcharge due to missing information (do
  not require ones own knowledge as given).
• Repeat the important information on several
  sides.
• Set priorities of information the important
  above.
• Above summary, below detail information.
• Determine logical information units organization
  and structure of the documents increase use
  immensely.
• Everywhere access on main page.
• Possibilities of feedback and communication.

27
Milestones of Multimedia Applications

• 4. Visual Design  
• Balance between visual effects and supply of
  information.
• No or little scrolling.
• Not multicoloured but in colour.
• Saturated colours only for important elements.
• Page header are loaded first and are always to be
  seen and constant.
• One can retain only about seven information units
  in the short.term memory.
• About five hierarchy level for each seven
  elements.
• Typography
• Contrast important for the readability.
• Use emphasis (fat, italic) only with aim.
• Short lines (no scrolling to the side).

28
Milestones of Multimedia Applications
4. Visual Design Example Screen Areas
29
Milestones of Multimedia Applications
4. Visual Design
Example Homepage of an course for an
introductory to multimedia
30
Milestones of Multimedia Applications

• 5. Media Production
• Production Phase I (Media Development)
• material inquiry
• graphic, screen-layout
• computer-animations
• video- and audio-production
• post-production of videos (cut, effects),
  sounding
• Production Phase II (Media Integration)
• digitalization or conversion of
  multimedia-sources in specific data-formats
• programming of the interaction-structure
• implementation of the different media

31
Milestones of Multimedia Applications

• 6. Implementation
• define programming language
• select development tools
• prototypical implementation of pages and/or
  functions (just for inspection, in how far
  perceptions are fulfilled and functions are
  realizable)
• technical transformation
• platform independence or specific platform
• templates for extension

32
Milestones of Multimedia Applications

• 7. System Testing
• Definition Testing is the process of running a
  program with the purpose of finding errors.

33
Milestones of Multimedia Applications

• 7. System Testing
• Content based Tests
• Functional Tests
• Integration Tests

34
Milestones of Multimedia Applications
7. System Testing

• Exemplary test-protocol for multimedia
  applications
• computer configuration
• errors while installing respectively loading the
  applications
• remarks about speed, loading times
  ,synchronization
• validation of video- and audio-quality
• validation of navigation
• errors, abnormal system ends
• unexpected states or program jumps
• problems when ending applications

35
Milestones of Multimedia Applications

• 8. Support and Maintenance
• editorial extension
• establishing of a feed back system
• evaluation of the system
• adapting to the needs of the users and
  application of new technologies
• re-designing of single modules
• implementation of new and additional information
• erasing of old information