Multimedia Design Guidelines MMP

Transcription

1 Multimedia Design Guidelines MMP Metaphor A metaphor is a figurative representation that links the content of your website to an established mental model. Using metaphors in your website allows the users to understand the elements on the webpages easier by relating to their familiar objects or concepts. A good example of metaphor used in many websites is the shopping cart: Figure 1: Shopping cart in Amazon.com Figure 2: Shopping cart in B&H Photo Video A well selected metaphor should be concrete and obvious, and preferably with an icon for instant recognition. The selected metaphor must be appropriate, otherwise it might mislead users. The eventual goal of a metaphor is to reinforce the message and appeal to the target audience without detracting from the content and navigability of the website. Consistency Both the appearance of each webpage and the navigation scheme of the whole website should be consistent. A consistent website allows the target audiences to use it efficiently without confusion. For example, if you use a three-column layout in some of your webpages, the same layout should be applied to other webpages too unless you have a compelling reason not to do so. Also, if you place the navigation bar at the top in some webpages, you d better use the same navigation bar at the same place in the rest of your webpage. See Figure 3 for example. Template A template is a precise layout indicating where various elements will appear on the webpage. For example, you can define where to place website banner, the page title, the navigation bar, the main text, and so on. You can also define the page background, font sizes/styles, and so on with a template.

2 Figure 4: Dreamweaver template (Class 5 exercise) Figure 3: Consistent appearance and navigation in Apple.com

3 By using templates in your project, you receive the benefits of providing consistency throughout the website, shorten the development time, and prevent object shift (e.g. when the same object in your website is slightly shifted even for only 1 pixel, it causes a noticeable and disconcerting jump when the user switches back and forth among webapges). We discussed two ways in MMP 100 in using templates to keep consistency. The first way is to use Dreamweaver templates, and the second way is to use cascading style sheets (CSS). It is possible to combine these two ways to make your work extremely efficient and flexible. Contents The contents are the King of your website. In most cases, people visit your website because they are interested in the contents of your website. The media (texts, pictures, sounds, videos) and the design of your website should complement the contents of the site, not to replace them, unless the purpose of your website is to entertain or showcase artworks. There are a few principles to follow when you design the contents on the webpages: Don t put too much content on a single webpage because it will overwhelm the users. Web users generally do not read a webpage, instead, they simply scan it. If your webpage clusters tons of information on it, the user will most likely navigate away. If you have a lot of information to present, separate them into different webpages that are hyperlinked with each other. Organize the contents on the webpage so that a webpage only talks about one thing at a time. Make your content easy to read on the webpage. Generally speaking, your page background cannot be too complicated, and the texts should stand out from the background. Figure 5: The content is not readable because the texts don t stand out from the complex background

4 Balanced Layout Geographically balance the distribution of texts, images, buttons, videos, and animations in a webpage. Don t cluster a lot of content in certain parts of the webpage while leaving other parts blank. To achieve a balanced layout in the webpage, you can place elements of the same type symmetrically by mirroring the elements horizontally or vertically on both sides of a center line (Figure 6). You can also arrange nonidentical elements on both sides of a center line to achieve an asymmetrical balance (Figure 7). Figure 6: Symmetrical balance Figure 7: Asymmetrical balance Movement Web users eyes usually are drawn to particular locations on a webpage instead of the whole screen. And their eye focus moves while they are reading. Therefore you need to consider the movement of the users eyes when you arrange the elements in the webpage.

5 Generally speaking, web users in the western culture tend to read a webpage from the upper left, and gradually shift the focus toward the lower right. Contents at the top and on the left tend to receive more attention from users. Therefore, it s important for web developers to consider this tendency especially if the purpose of the website is for education and training. For example, by placing the headline, leading question, or other eye-catching elements on the top left can attract attention from the user and make them start reading your webpage. You can also place further instructions, extended readings, etc. on the right and on the bottom, so that when the user continues reading the webpage they will learn further information. Unified Piece Finally, the website must be presented as a unified piece. A web designer must be concerned about two types of unity: intra-page unity and inter-page unity. Intra-page unity refers to the integrity of various elements on the same webpage. As previously mentioned, contents of a webpage should be well organized so that a single webpage is focused on one topic. Do not put irrelevant topics in the same webpage as it is very confusing. Inter-page unity requires related webpages to be organized in the same section or level. Usually inter-page unity is achieved by using multi-level navigations. For example, the first-level navigation of a website divides all webpages into different categories. And the second-level navigation associates webpages of the same category together (Figure 8). Figure 8: Two-level navigation creates inter-page unity It is important that any element in a webpage must not be irrelevant to the topic of the webpage, and any webpage in a website must not be irrelevant to the purpose of the website. If an element or a webpage is irrelevant, one would rather discard the element or the webpage to make sure the whole website is a unified piece. This handout is created based on Multimedia For the Web Revealed (Deluxe Education Edition) by Calleen Coorough and Jim Shuman; published by Thompson Course Technology, Usage is limited to BMCC MMP-100 course: Introduction to Multimedia Zhou Zhou 05/13/2011