Senin, 02 Juni 2014

Multimedia Design for World Wide Web


Information Design

Concepts about structuring information today stem largely from the organization of printed books and periodicals and the library indexing and catalog systems that developed around printed information. The interface standards of books in the English-speaking world are well established and widely agreed-upon, and detailed instructions for creating books may be found in such publications standards manuals as The Chicago Manual of Style. Every feature of the printed book, from the contents page to the index, has evolved over centuries, and readers of early books faced some of the same organizational problems that users of hypermedia documents confront today. Johannes Gutenberg’s Bible of 1456 is often cited as the first mass-produced book, yet even after the explosive growth of publishing that followed Gutenberg’s invention of printing with movable type, more than a century passed before page numbering, indexes, tables of contents, and even title pages became expected and necessary features of books. Web documents are undergoing a similar—albeit faster—evolution and standardization.

Although networked interactive hypermedia documents pose novel challenges to information designers, most of the guidance needed to design, create, assemble, edit, and organize multiple forms of media does not differ radically from current practice in print media. Most web documents can be designed to conform to The Chicago Manual of Style conventions for editorial style and text organization. Much of what an organization needs to know about creating clear, comprehensive, and consistent internal publishing standards is already available in such general publishing style guides as the Franklin Covey Style Guide for Business and Technical Communication and The Gregg Reference Manual. Don’t get so lost in the novelty of web pages that basic standards of editorial consistency, business communications, and graphic design are tossed aside.

Freestanding pages

Web pages differ from books and other documents in one crucial respect: hypertext links allow users to experience a single web page separate from its context. For this reason web pages need to be more independent than pages in a book. For example, the headers and footers of web pages should be more informative and elaborate than those on printed pages. It would be absurd to repeat the copyright information, author, and date of a book at the bottom of every printed page, but individual web pages often need to provide such information because a single web page may be the only part of a site that some users will see. This problem of making documents freestanding is not unique to web pages. Journals, magazines, and most newspapers repeat the date, volume number, and issue number at the top or bottom of each printed page because they know that readers often rip out articles or photocopy pages and will need that information to be able to trace the source of the material.

Given the difficulties inherent in creating web sites that are both easy to use and full of complex content, the best design strategy is to apply a few fundamental document design principles consistently in every web page you create. The basic elements of a document aren’t complicated and have almost nothing to do with Internet technology. It’s like a high school journalism class: who, what, when, and where.

Who


Who is speaking? This question is so basic, and the information is so often taken for granted, that authors frequently overlook the most fundamental piece of information a reader needs to assess the provenance of a web document. Whether the page originates from an individual author or an institution, always tell the reader who created it and what institution you are associated with. The flood of web sites that propagated incorrect or intentionally misleading material in the 2004 American presidential election offers a vivid example of how “information” of no known origin and of dubious authenticity can quickly cloud legitimate inquiry and discussion.

What


All documents need clear titles to capture the user’s attention, but for several reasons peculiar to the web, this basic editorial element is especially crucial. The page title and major headings are also crucial for search engine visibility. The page title element is the most important determinant of keyword relevance for search engines, so craft your titles carefully if you want users to find your content.

When


Timeliness is an important element in evaluating the worth of a document. We take information about the age of most paper documents for granted: newspapers, magazines, and virtually all office correspondence are dated. Date every web page, and change the date whenever the document is updated. This is especially important in long or complex online documents that are updated regularly but may not look different enough to signal a change in content to occasional readers. Corporate information, personnel manuals, product information, and other technical documents delivered as web pages should always carry version numbers or revision dates. Remember that many readers prefer to print long documents from the web. If you don’t include revision dates, your audience may not be able to tell whether the version they have in hand is current.

Where


The web is an odd “place” that has huge informational dimensions but few explicit cues to the place of origin of a document. Click on a web link, and you could be connected to a web server in Sydney, Chicago, or Rome—anywhere, in fact, with an Internet connection. Unless you are well versed in parsing urls, it can be hard to tell where a page originates. This is the World Wide Web, after all, and the question of where a document comes from is sometimes inseparable from whom the document comes from. Always tell the user where you are from, with (if relevant) your corporate or institutional affiliations.

Incorporating the “home” url within the page footer is an easy way to maintain the connection to where a page originated. Once the user has saved the page as a text file or printed the page onto paper, this connection may be lost. Although newer versions of the most common web browsers allow users to include the url automatically in anything they print, many people never take advantage of this optional feature. Too many of us have stacks of printed web pages with no easy way of locating the web sites where they originated.

Summary: Information design guidelines

Every web page needs:
  • An informative title (which also becomes the text of any bookmark to the page)
  • The creator’s identity (author or institution)
  • A creation or revision date
  • A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
  • At least one link to a local home page or menu page, in a consistent location on all pages
  • The home page url
Most web pages should also incorporate these additional elements:
  • An organization logo or name near the upper left corner, with a link back to your home page
  • Navigation links to other major sections of your site
  • At least one heading to identify and clarify the page content
  • Mailing address and contact information or a link to this information
  • Alternate (“alt”) text identifying any graphics on the page
Include these basic information elements and you will have traveled 90 percent of the way toward providing your users with an understandable web user interface.

Web Multimedia Strategies

Simply because we can stream hours of video out over the web doesn’t mean that we should. The value of having the text of Paradise Lost online is not in making it available for reading—most people prefer to read the work in print. We digitize texts in order to use the strengths of computing, such as searching and linking, to enhance our understanding of the material. This holds true for multimedia, too: we need to consider how best to use the computer and not simply translate video and audio content to the computer screen. The key to successful web multimedia is to tailor your content for web delivery.

Audio


Digital audio is an extremely efficient way to deliver information. Consider a training video on measuring and weighing chemical compounds. Which track—audio or video—would be the most important in conveying information? In the soundtrack a narrator explains the procedure, and in the video track someone is measuring and weighing compounds. Which track would you remove if necessary? Which could stand alone? The audio track. Consider enhancing your presentation with an audio component. Audio can be captured and optimized fairly easily, and it compresses well.
When recording original audio, take the time to do it right. Low-frequency background noises, such as the hum of a ventilation system, will be inseparable from your audio track; no amount of tweaking will eliminate it. Remember, too, that the downsampling and compression you will have to perform to make your audio web deliverable will emphasize any flaws in your recording.

Slide shows


Slide shows are another method for delivering multimedia on the web. In a slide show, you synchronize audio with still images. Through this approach you provide information via audio and add visual emphasis with still images. As an example, to present the training video mentioned above as a slide show, you would use video editing software to synchronize the narration with still images of the weighing and measuring procedure. Still images compress much more efficiently than video, and because slide shows do not require smooth motion, the movie frame rate can be low. This in turn means that you can devote more data to image quality and size.

Video


Video is the most challenging multimedia content to deliver via the web. Part of the reason is sheer size: one second of uncompressed, full-quality video requires approximately 27 megabytes of disk storage space. The amount of scaling and compression required to turn this quantity of data into something that can be used on a network is significant, sometimes rendering the material useless. Whenever possible, tailor your video content for the web.
  • Shoot original video. That way you can take steps to create video that will compress efficiently and still look good at low resolution and frame rates.
  • Shoot close-ups. Wide shots have too much detail to make sense at low resolution.
  • Shoot against a simple monochromatic background whenever possible. This will make small video images easier to understand and will increase the efficiency of compression.
  • Use a tripod to minimize camera movement. A camera locked in one position will minimize the differences between frames and greatly improve video compression.
  • Avoid zooming and panning. These can make low frame-rate movies confusing to view and interpret and can also cause them to compress poorly.
  • When editing your video, favor hard cuts between shots. Use the transitional effects offered by video editing software sparingly. Dissolves, elaborate wipes, or the “Ken Burns” effect of panning across still images will not compress efficiently and may not play smoothly on the web in larger display sizes.
  • If you are digitizing material that was originally recorded for video or film, choose your material carefully. Look for clips that contain minimal motion and lack essential but small details. Motion and detail are the most obvious shortcomings of low-resolution video.

Animation


When used solely as an attention-getting device, the value of web animation is questionable. If you place animation alongside primary content, you will simply disrupt your users’ concentration and keep them from the objective of your site. If you require users to sit through your Flash intro every time they visit your site, you are effectively turning them away at the door.
That said, there is a place for the purposeful use of animation on the web. A simple animation on a web site’s main home page can add the right amount of visual interest to invite users to explore your materials (fig. 12.2). There, the essential content is typically a menu of links, so the threat of distraction is less than it would be on an internal content page. Animation is also useful in illustrating concepts or procedures, or changes over time. Always provide accessible controls for starting and stopping the animation.
Three screens showing various parts of an animation from the 'nothingbutnets.net' web site.
Figure 12.2 — A well-targeted animation is a powerful inducement to stay on a site and hear the message.

Text alternates


The best way to ensure that your multimedia materials are accessible is to provide alternate versions designed to accommodate different users. QuickTime reference movies provide a good illustration of the concept of alternates. When creating web video using QuickTime, it is customary to create several versions of a movie, each tuned to a different connection speed through varying levels of quality and compression, and link those versions using a reference movie. Then, when a user requests the movie via a web page, QuickTime sends the version that the user’s network connection can best accommodate. This approach supports divisions in technology resources, but alternate views also benefit those who are excluded from multimedia for other reasons. By providing alternate views of your multimedia content, your information becomes accessible to people who cannot appreciate it in its native format.

Text is the most widely accessible content. For low-vision users, text can be magnified. Blind users can have text read by special software or rendered by a Braille reader. For those with technology limitations, text loads quickly and can be viewed on nongraphical browsers. Another strength of text over media content is that it can be read and indexed by search engines and translated into other languages. The best alternate for multimedia content is the written word.

For instance, if you are providing video content on your site, the simplest alternate to include is a text transcript of the audio track for hearing-impaired users. The same text transcript is useful for indexing with search engines and enabling video search. An even better approach would be to use the text as captions synchronized with the video (fig. 12.3). To address the needs of visually impaired users, you could also include a text description of the video track, either as a separate audio track or as text. Or simplify the materials by reducing the video track to a series of still images synchronized with the audio for users with reduced vision or cognitive difficulties.
A NASA web page with a video playing, showing the captions of the dialog appearing in the lower part of the video screen.
Figure 12.3 — Captions are a way to supply equivalent text for the spoken audio elements of your site.
At a minimum, you can use basic html to provide information about multimedia content. For example, you can use the alt attribute to include a short description of the animation in your applet or animated gif html code. Because almost all browsing devices can handle text, if you include this basic descriptive text, users who have their web pages read to them will at least be able to understand the function of the visual content.


Tidak ada komentar:

Posting Komentar