Multimedia Design & Development Process PDF

MULTIMEDIA DESIGN & DEVELOPMENT PROCESS Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Structure & Naviga...

MULTIMEDIA DESIGN & DEVELOPMENT PROCESS Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Structure & Navigation in Accessibilit Hypermedia y Non-linear Time-based Web Design Structures Issues Design Problems of the Conservatism & WWW Progress 2  STRUCTURE & NAVIGATION IN HYPERMEDIA 3 STRUCTURE & NAVIGATION IN HYPERMEDIA DESIGNING THE STRUCTURE Navigation – Navigation maps are also known as site maps. – They help organize the content and messages. – Navigation maps provide a hierarchical table of contents and a chart of the logical flow of the interactive interface. – Navigation maps are essentially nonlinear. 5  NAVIGATIONAL STRUCTURES USED IN HYPERMEDIA 4 types of navigation structures Users navigate Users navigate –Users navigate freely sequentially, from one along the branches through the frame of information to of a tree structure that content, unbound by another. is shaped by the predetermined routes. natural logic of the content. It is also called linear with branching. Linear Hierarchical Nonlinear –Users may navigate nonlinearly but are occasionally constrained to linear presentations. Composite LINKS link is a selectable connection from one word, picture, or information object to another. A hotspot that connects a viewer to another part of the Hyperlinks same document, a different document, or another web site is called a hyperlink. Larger images that are sectioned into hot areas with Image maps associated links are called image maps. Type: Icons are fundamental Icons graphic objects symbolic of an activity or concept. A graphic image that is a hot Buttons spot is called a button. BROWSING & SEARCHING Browsing – retrieve information by association Follow links, backtrack Maintain history, bookmarks Searching – retrieve information by content Construct indexes of URLs Search by keyword/description of page URLS Uniform Resource Locators Resource is something that can be accessed by a higher level Internet protocol Often a file, but may be dynamically generated data The way in which data can be accessed is constrained by the protocol used e.g. mailbox, link to google drive URL SYNTAX Protocol : / / domain name / path This is a slight simplification, covering the most common usage e.g. http://www.digitalmultimedia.org/Materials/keypoi nts.html Domain name identifies a host within a hierarchical naming scheme Path is like Unix pathname: segments separated by /s, identify resource in a hierarchy (e.g. file system) Complete specification of the location of a file containing HTML e.g. /Materials/index.html  NON-LINEAR TIME-BASED STRUCTURES 1 1 NON-LINEAR TIME-BASED STRUCTURES Traditional time-based media essentially linear Digital media, linear order can be altered by scripts and in response to input from the user  If script controls playback by computation, but without accepting input (e.g. counts frames), structure is deterministic  To accept user input, there must be some controls provided. LOOPS Simple loop: script attached to final frame sends playback head back to first frame Introduction plus loop: script on final frame sends playback head to some earlier frame (not first) Counted loops: Script counts number of times round the loop, does something different after a certain number of loops (e.g. stop) BRANCHING Common case: set of selections on a menu Menu is a single stopped frame with buttons for each menu selection Script attached to each button causes a jump to the corresponding section when pressed General branching structures built by allowing users to choose from set of alternatives for next page PARALLELISM Flash movie clips are self-contained movies within a movie that can play back in parallel Movie clips can be controlled by scripting Stopped, started, sent to a particular frame,… Permits essentially infinite variations on playback of a finite collection of elements Can respond to user input  DESIGN PROBLEMS OF THE WWW 1 6 DESIGN PROBLEM OF THE WWW Traditional print- Small screen may based design ideas need scrollbars with may not work on parts of a page the Web hidden Fonts may User may change be type size substitute d Browser may not support CSS properly or at all WHAT TO DO? Turn text into GIF to Fix design – may make preserve fonts and layout matters worse (timing, – slow down page costing) loading, leaves users with images disabled with nothing Reduces all design to level of text-only Design for one browser particular page will not communicate configuration. as effectively as it could with proper design  ACCESSIBILI TY 1 9 ACCESSIBILI TY Pages must transform gracefully into a form that can be rendered by assistive technology Eg: text only for screen readers Accept that a Web page may appear differently to different users Ensure that page remains readable and navigable and preferable attractive under all circumstances BARRIERS TO ACCESS Some visitors to any Web site may: Be unable Be unable Be unable to see, or to read or to use a have understan mouse or Be unable impaired d what keyboard, to vision or they read owing to hear defective very injury or colour easily major vision disability  WEB DESIGN ISSUES 2 3 WEB DESIGN ISSUES 1) Structure and Navigation To help people with cognitive disabilities, use headings and sub-heading, bulleted and numbered lists; use one paragraph per idea Provide navigational overview of site to help orient people who easily become confused and to allow assistive technology to isolate navigational elements Make link text meaningful, even in isolation Never use click here links WEB DESIGN ISSUES 2) Colour Roughly 5% of male population unable to distinguish between certain colours (usually red and green); very small number of people cannot see colours at all Old computers, some PDAs only have black and white displays Cannot rely on colour alone to convey information - e.g. if you use colour to identify links, supplement it with some other styling WEB DESIGN ISSUES 3) Animation Rapidly flashing elements can trigger epileptic attacks, so avoid blinking text Movement may be an unwelcome distraction, so always provide a way of turning off animated effects Animated GIFs, JavaScript animation: this can usually be done in the browser Flash: add controls to movie to stop or skip it Users with cognitive difficulties can become confused WEB DESIGN ISSUES 4) Content Most important thing about a Web site is its content Most beautifully designed accessible site will attract no visitors if the content is of no interest to anybody Compelling content can overcome poor design Good design practice can make compelling content more readable, navigable, welcoming USABILITY How easy is it for visitors to find information or use services? Much of the research conducted into usability suffers from poor methodology Small and unrepresentative samples relative to population of Web users Emphasis on task-oriented experimentation GUIDELINES Put the user first Put the user in control Don't provide too much choice Don't make assumptions about users‘ behaviour Use technology judiciously Understand your site's context Keep up with change  CONSERVATISM & PROGRESS 3 0  EVOLUTION OF MULTIMEDIA DESIGN Multimedia is an evolution of technology as well as a convergence which brings together hardware and software. It has been called digital fusion - the merger of digital technologies based on the use of computers. The technologies that are converging are computing, television, printing and telecommunications. Bringing them together results in the whole having greater impact than each individual part and is one of the industry's most significant developments. The convergence of digital technologies and their use will impact the future of 31 teleconferencing, distance learning and MEDIA EVOLUTION https:// quod.lib.umich.edu/d /dcbooks/ 8232214.0001.0 01/1:2/--media- technology- and-society- theories-of- media- evolution? g=dculture;rgn=div 1;view=fulltext;xc=1 http://j387mediahistory. wee bly.com/media-history- 32 timeline.html 3 3 Evolution of media timeline EVOLUTION OF SOCIAL MEDIA 34 https://snmexpert.files.wordpress.com/2010/11/social_media_timeli ne- “THE BEST WAY TO GET STARTED IS TO QUIT Thank TALKING AND BEGIN DOING.” – WALT DISNEY you