1. Multimedia for the Web: Creating Digital Excitement Design and the User Interface

2. Chapter 3 2 Multimedia for the Web Understand Design Guidelines: Appearance Understand Design Guidelines: Interactivity Chapter Concepts

3. Chapter 3 3 Multimedia for the Web Use basic standards of design Designs should be cohesive and functional Key is planning phase Design must be user-centered, not designer-centered Focus on user wants and needs Introduction

4. Chapter 3 4 Multimedia for the Web Design strategy should be solid; simple, easily understood, easy to use Web site should be intuitive Users should know where they are and where they can go Home page indicates what is contained in site and how to navigate Introduction

5. Chapter 3 5 Multimedia for the Web Principles based on design guidelines: target audience, content, type of Web site Two broad categories of design guidelines: –Appearance –Interactivity Introduction

6. Chapter 3 6 Multimedia for the Web Superb visual design and high editorial standards inspire confidence Design guidelines related to overall appearance of Web site include: –Metaphor –Consistency –Template –Content (continued on next slide ) Understand Design Guidelines: Appearance

7. Chapter 3 7 Multimedia for the Web Design guidelines (continued) –Balanced layout –Movement –Color scheme –Independence –Functionality –Unity Understand Design Guidelines: Appearance

8. Chapter 3 8 Multimedia for the Web Metaphor: figurative representation that links content of site to established mental model –E-commerce metaphor is electronic shopping cart Metaphors must be concrete, obvious Metaphor

9. Chapter 3 9 Multimedia for the Web Consistent with Web site’s content Metaphors must be appropriate; otherwise, they mislead and confuse user Metaphor should reinforce the message, appeal to target audience without detracting from content Metaphor

10. Chapter 3 10 Multimedia for the Web Consistency is an essential component of Web site Applies to both appearance and navigation scheme Navigation bar remains consistent from one page to the next Consistency

11. Chapter 3 11 Multimedia for the Web Consistency

12. Chapter 3 12 Multimedia for the Web Precise layout indicating where various elements will appear on the Web page Dictate positions of various elements –Graphics, Heading, Menu, Text, Navigation bar Template

13. Chapter 3 13 Multimedia for the Web Templates can aid the design process in several ways Provide consistency Shorten development time Prevent “object shift” –Templates that utilize grids can prevents objects from shifting Template

14. Chapter 3 14 Multimedia for the Web Template

15. Chapter 3 15 Multimedia for the Web All multimedia elements (text, graphics, animation, sound, and video) should complement content, not be the focus Major consideration in designing site is determining: –What content –How many levels users must navigate Content

16. Chapter 3 16 Multimedia for the Web Less text is usually better Excess content requires more levels More levels add to confusion and frustration for user Reduce levels by providing hyperlinks (also called links) Content

17. Chapter 3 17 Multimedia for the Web Make sure content always accessible Users do not read a Web page; they scan it, looking for keywords/links First-time visitors to a Web site generally spend less than 60 seconds on the Web page Content

18. Chapter 3 18 Multimedia for the Web Web site must capture visitor’s interest Text still the primary element used to convey information; text must be readable Always test your color and background combinations Content

19. Chapter 3 19 Multimedia for the Web Content

20. Chapter 3 20 Multimedia for the Web Replace parts of original Web page with new content Give users frame of reference, allow user to return quickly to previously viewed page Allow designers to keep text on each page to a minimum Links or Hyperlinks

21. Chapter 3 21 Multimedia for the Web Balance in Web page design refers to the distribution of optical weight in the layout Optical weight is the ability of an element to attract the user’s eye Each element has optical weight as determined by its nature and size Balanced layout

22. Chapter 3 22 Multimedia for the Web Nature of an element refers to its shape, color, brightness, type Balance determined by the weight of the elements and their position on the Web page Three types of balance: –symmetrical balance, asymmetrical balance, no balance Balanced layout

23. Chapter 3 23 Multimedia for the Web Balanced layout

24. Chapter 3 24 Multimedia for the Web Symmetrical balance: arranging elements as mirrored images on both sides of a center line Symmetrical design is static Suggests order and formality Appropriate to highlight corporate image of conservative organizations Symmetrical balance

25. Chapter 3 25 Multimedia for the Web Asymmetrical balance: arranging non- identical elements on both sides of a center line Asymmetrical design is dynamic; suggests diversity and informality Might be appropriate for entertainment Web sites for a feeling of movement and discovery Asymmetrical Balance

26. Chapter 3 26 Multimedia for the Web Do not forget white space; the blank areas on a page where text and other elements are not found Blank space does not have to be white Users like space between elements White Space

27. Chapter 3 27 Multimedia for the Web White Space

28. Chapter 3 28 Multimedia for the Web Relates to how the user’s eye moves through the elements on the page Optical center; a point somewhat above the physical center of the page As designers for a global community, critical to include visual clues such as arrows that help direct the viewers’ movement on the page Movement

29. Chapter 3 29 Multimedia for the Web To have user work through content in more structured way: –Control where user starts on page –Use lines or objects that point the user in a certain direction –Use color gradients that go from light shade to dark shade (continued next slide) Movement

30. Chapter 3 30 Multimedia for the Web (continued from last slide) –Have people or animals look in the direction the user should look –Emphasize an element; make it a different shape or color, surround it with white space, use a different font or type style, create borders, or use different backgrounds for selected objects Movement

31. Chapter 3 31 Multimedia for the Web Powerful communication tool Wrong colors may communicate the wrong message Color evokes emotion and associations Adding color changes the look of pages without adding to file size Color scheme

32. Chapter 3 32 Multimedia for the Web Color scheme

33. Chapter 3 33 Multimedia for the Web Increase visual appeal Improve readability Color signals changes in context Fewer colors create a cleaner, more tasteful look Design with a monochromatic color scheme Color scheme

34. Chapter 3 34 Multimedia for the Web Easier to work with dark objects on light backgrounds Web authoring programs include pre-set color schemes Themes contain color schemes, and consist of unified design elements for bullets, fonts, images Color scheme

35. Chapter 3 35 Multimedia for the Web Keep site fresh and functional Internal and external links must be maintained Web pages need to be more freestanding than pages in print Single Web page may be only page viewed by user Independent and Functional

36. Chapter 3 36 Multimedia for the Web Independent and Functional

37. Chapter 3 37 Multimedia for the Web For consistency, include basic information on each page: –Contact information –Last modified date –Copyright notice –Link to home page –A Frequently Asked Questions page can be helpful Independent and Functional

38. Chapter 3 38 Multimedia for the Web Two types of Unity: –Intra-page unity: how the various page elements relate –Inter-page unity: interactive design that users encounter as they navigate from one Web page to another Unified Piece

39. Chapter 3 39 Multimedia for the Web Maintain consistency in shapes, colors, text styles, themes In games or entertainment sites, unified design may be too dull Users appreciate common metaphor, color scheme, navigation method from page to page Unified Piece

40. Chapter 3 40 Multimedia for the Web Developers must design the site’s interactivity Interactive design must be user- centered: –If sound is played, user should be able to adjust volume –User to decide to play a video or download a plug-in Understand Design Guidelines: Interactivity

41. Chapter 3 41 Multimedia for the Web User interface is crucial When designing the user interface, you are establishing the foundation of the Web site Interface gives users direct control over the Web site Metaphors, images, and concepts The User Interface

42. Chapter 3 42 Multimedia for the Web Impossible to fully separate design from function in interactive sites Users expect function and sophistication from all interfaces Navigational structure should be transparent to user The User Interface

43. Chapter 3 43 Multimedia for the Web The User Interface

44. Chapter 3 44 Multimedia for the Web Users must know where they are within overall structure of the site Users want quick and easy access to content of site Should be easy to return to home page or other major pages Optimize User Access and Control

45. Chapter 3 45 Multimedia for the Web Users will not tolerate delay Research shows threshold of frustration for any computer-related task is about 10 seconds To improve download time, optimize graphics and use thumbnails Quick to Load

46. Chapter 3 46 Multimedia for the Web Broadband connections and improved compression and streaming have made multimedia possible on Web, but download speed is still a major issue in Web page design Keep page size smaller than 100k Quick to Load

47. Chapter 3 47 Multimedia for the Web Link Effectively

48. Chapter 3 48 Multimedia for the Web Users favor menus with minimum of five to nine links Users favor a few Web pages with lots of choices Additional links through hot spots, mouseovers Link Effectively

49. Chapter 3 49 Multimedia for the Web Goal is to provide users with the information they want: – Fewest number of steps – Shortest amount of time – Using least amount of screen real estate Link Effectively

50. Chapter 3 50 Multimedia for the Web Web based on cross-linking or cross-referencing By establishing a clearly identified page of external links, users will not unknowingly leave your site Open external links in separate browser window Link Effectively

51. Chapter 3 51 Multimedia for the Web Contextual clues for user include: –Familiar and intuitive icons –A common color scheme –Consistent method of navigation –Graphic similarity Consistent approach to layout reinforces user’s sense of context Sense of Context

52. Chapter 3 52 Multimedia for the Web Avoid long introductions of automatically scrolling text, narration, music, credits Provide a way to skip or escape introductory elements Provide way for user to control the playing of animations, sound, video Provide Choices and Escapes

53. Chapter 3 53 Multimedia for the Web Give users an opportunity to establish an ongoing relationship with company or organization Users need to be able to communicate with company or organization online Opportunity for Feedback

54. Chapter 3 54 Multimedia for the Web Opportunity for Feedback

55. Chapter 3 55 Multimedia for the Web Many people have disabilities that prevent them from taking advantage of media elements Many visually impaired individuals use a text-based Web browser –For them to take advantage of your content, include alternative text Equal Access

56. Chapter 3 56 Multimedia for the Web There are laws in place that require Web sites that receive federal funding to be accessible by people with disabilities Check government Web sites or www.w3.org to stay current on these laws Equal Access

57. Chapter 3 57 Multimedia for the Web Introduction Understand Design Guidelines: Appearance Metaphor Consistency Template Content Summary

58. Chapter 3 58 Multimedia for the Web Links or Hyperlinks Balanced layout Symmetrical balance Asymmetrical Balance White Space Movement Color scheme Summary

59. Chapter 3 59 Multimedia for the Web Independent and Functional Unified Piece Understand Design Guidelines: Interactivity The User Interface Optimize User Access and Control Summary

60. Chapter 3 60 Multimedia for the Web Quick to Load Link Effectively Sense of Context Provide Choices and Escapes Opportunity for Feedback Equal Access Summary