MULTIMEDIA DEVELOPMENT LIFECYCLE (MDL) Week 2 P420 - 1 CMLA Multimedia Presentation for Public Relations Swiss German University Indonesia

Multimedia Development Lifecycle (MDL) • Multimedia Development Life Cycle:

Define > Plan > Implement > Construct > Evaluate

• Define : •  Client’s needs assessment : state the purpose •  Identify Target Audience : audience assessment •  Goals, objective, activities

• Planning : •  Develop specification •  Develop design strategy •  Create wireframe

Multimedia Development Lifecycle (MDL) •  Determine organizational structure •  Design navigation and user interface •  Select appropriate authoring medium and delivery system •  Task, deliverables, milestones •  Set definitive timelines for full production process

•  Implement : •  Proposal sign-off •  Getting resource from client •  Ensuring relevant personnel are available

Multimedia Development Lifecycle (MDL) • Construct :

•  Create the multimedia elements and add the content •  Authoring interaction •  Preparing adjunct materials (user manuals) •  Integrating media and code •  Technical testing and subsequent alterations •  Alpha, beta, release candidate one (RC1)/release candidate 2 (RC2) and

gold/master release production phases •  Focus group and user testing and subsequent alterations •  End user training •  Handover presentation and demonstration

Multimedia Development Lifecycle (MDL) • Evaluate :

•  Complete Usability/User Testing Report •  Complete Effectiveness and Impact Report •  Complete Extension Report •  Undertake Evaluation as per the strategy previously outlined •  Undertake developer only evaluation

DESIGNING MULTIMEDIA P420 - 1 CMLA Multimedia Presentation for Public Relations Week 2 Lecturing

Interface Design • Human interface

•  Made for people •  Is where a real person meets with interactive system •  How does your system work with people •  How do people work with your system

• Simple design is good design • People like nice surroundings • Design should communicate, not just dazzle

Interface Design • Object should visually mimic their function • Consistency is key • Stability is key • User should be in control

Susan Kare

Standard Interface Elements • Cursors

•  Arrows, I-bars, drag handles, magnifying glass

Standard Interface Elements • Buttons

•  Single-state, multi-state, reverting, non-reverting

Standard Interface Elements • Hyperlinks

•  External and internal, with or without feedback

• User Input fields •  Text boxes, check boxes, radio buttons

• Scroll Bars

User Initiated Reactions • Cursor Changes

•  Tool changes, context related changes

• Button States •  Rollover, rollout, pressed, unpressed

• Keyboard Input •  Copy-paste, arrow keys

• Disjointed Rollovers •  Rolling over one object which changes the content of appearance of

another

Authoring Vs. The Web • Standard HTML pages share common interface elements,

which have limited styling capabilities •  Flash and shockwave pages are virtually limitless in their

capabilities for custom interface design • Authored interactive design can be Web Pages, CD-ROM,

Games, Desktop Applications

Standard Interface

Non-Standard Interface

Non-Standard Interface

CD-Rom Interface

Standard Vs. Non-Standard • Standard elements have the benefit of wide distribution –

you can assume many people will have used similar widgets before, but also presents a constrain designer

• Non-standard or custom elements have the benefit of

design freedom, but can become confusing for non-savy users

Standard Vs. Non-Standard • General rule: “Keep the principles of standard interface elements in mind when designing elements from scratch in director and flash”

CD-Rom Vs. The Web Contra : •  Limited lifespan of authored content • High production and distribution cost • Constrained to traditional Software Development Lifecycle

(SDLC) • Cross-platform development can be pain in the neck

CD-Rom Vs. The Web Pro : • No bandwidth issues; can be used to distribute large files

like high quality DVD, Video, Games • Best of both worlds; can be used to access online data

and content • Access to local file system •  Tangible product

Desktop Application

Design Style

• Symmetry

• Emphasis

• Contrast

Design Style

• Balance

• High Contrast

• Emphasis

Design Style

• Pattern Rhythm

• Emphasis

• Proportion

Page Types • Splash Page • Homepage, Main Page • Content Page, Information Page • Search Page • User Input • Archive Page, Listing Page • Sitemap •  Interactive

Splash Page

Homepage or Main Page

Content or Information Page

Search Page

User Input Page

Common Layout Terms • Body

•  Main content, text, images

• Header •  Logo, illustration, page or company name

•  Footer •  Copyright and privacy information

• Menu •  Simple, drop-down, expanding

• Sidebar •  Related information, metadata, links, feeds

Common Layout Terms • Breadcrumbs

•  Link trails to show navigation progress

• Pull Quotes •  Highlighted, indented sentence or paragraph of interest

•  Forms •  Data entry elements, such as log in fields, search fields, email subscription

fields

Body

Header

Sidebar

Breadcrumb

Pull Quotes

SITE MAPS, NAVIGATION AND FLOWCHART

What are site maps for? • Graphical overview of the page structure of a site

• Show how pages link together •  Linear •  Hierarchial •  Cobweb

Linear navigation

Hierarchical navigation

Cobweb navigation

Site map example

What are navigational flowchart? • Graphical representation of the user experience •  Set of icons used to describe the way the user interacts with the site

• Also describe back-end processing •  Form validation •  Database lookups •  Downloads

Thank You Leoni Rahmawati 2011