Multimedia Design & Development Process PDF

CSC441 MULTIMEDIA DESIGN & DEVELOPMENT PROCESS Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Structure & Navigation in Hypermedia Non-linear Time-based Structures Design Problems of the WWW 2 Accessibility Web Design Issues Conservatism & P...

CSC441 MULTIMEDIA DESIGN & DEVELOPMENT PROCESS Compiled by: Ts. Dr. Rashidah Mokhtar CSC441: Multimedia Technology & Applications TOPIC OUTLINE Structure & Navigation in Hypermedia Non-linear Time-based Structures Design Problems of the WWW 2 Accessibility Web Design Issues Conservatism & Progress 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 sequentially, from one frame of information to another. •Users navigate along the branches of a tree structure that is shaped by the natural logic of the content. It is also called linear with branching. –Users navigate freely through the content, unbound by predetermined routes. 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. Hyperlinks A hotspot that connects a viewer to another part of the same document, a different document, or another web site is called a hyperlink. Image maps Larger images that are sectioned into hot areas with associated links are called image maps. Icons Icons are fundamental graphic objects symbolic of an activity or concept. Buttons A graphic image that is a hot spot is called a button. Type: 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/keypoints.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 11 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 16 DESIGN PROBLEM OF THE WWW Traditional print-based design ideas may not work on the Web Small screen may need scrollbars with parts of a page hidden Fonts may be substituted User may change type size Browser may not support CSS properly or at all WHAT TO DO? Fix design – may make matters worse (timing, costing) Reduces all design to level of text-only browser • page will not communicate as effectively as it could with proper design Turn text into GIF to preserve fonts and layout – slow down page loading, leaves users with images disabled with nothing Design for one particular configuration. ACCESSIBILITY 19 ACCESSIBILITY 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 to see, or have impaired vision or defective colour vision Be unable to read or understand what they read very easily Be unable to use a mouse or keyboard, owing to injury or major disability Be unable to hear WEB DESIGN ISSUES 23 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 30 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 teleconferencing, distance learning and business. 31 MEDIA EVOLUTION • https://quod.lib.umich.edu/d /dcbooks/8232214.0001.0 01/1:2/--media-technologyand-society-theories-ofmediaevolution?g=dculture;rgn=div 1;view=fulltext;xc=1 • http://j387mediahistory.wee bly.com/media-historytimeline.html 32 33 Evolution of media timeline EVOLUTION OF SOCIAL MEDIA 34 https://snmexpert.files.wordpress.com/2010/11/social_media_timeline-71.jpg “T H E B ES T WAY TO GET S TA RT ED IS TO QUIT TALK IN G AN D B EGIN D OIN G.” – WALT D IS N EY Thank you