Fall, 2001

Guidelines for More Effective Use of Hypermedia Graphics  
Abdullah Alshehri

     Introduction: Recently, the use of hypermedia, particularly on the Web, has been given more attention. However the use of graphics as an important part of hypermedia has been given less attention. Instructional design has suffered for years from extreme visual deprivation, really ugly stuff. Simple visual solutions can be very effective. However creating “ simple yet effective” anything is always harder than it looks, and very few people are good at it. (Boling, 2000) When looking at instructional sites, most of them have one of the following problems:  

     1. Not enough graphics, or  

     2. too many poorly designed graphics.  

     Art and Design: The designer is not an artist, at least not in the sense that term is commonly understood (Mullet & Darrekk 1995). An artist can create merely for "self-expression," but the job of a designer is a problem solver. Art is valued for its originality and expressiveness and its focus in on individual artifacts crafted through the manual and aesthetic virtuosity of the artist. Design, in contrast, is valued for its fitness to a particular user and task. Whereas art strives to express fundamental ideas and perspective on the human condition, design is convened with finding the representation best suited to the communication of some specific information (Mullet & Darrekk 1995).  

     Form and Function: The well-designed web graphic is a very effective way of communicating on the web. Striking a balance between form and function is very critical issue for a hypermedia graphics designer. The purpose of web graphics is not only to make the site look good but also to convey and support the meaning by the careful use of the graphic elements.  

     Simplicity: A general principle for all user interface design is to go through all of your design elements and remove them one at a time. If the design works as well without a certain design element, kill it (Nielsen 2000). All graphics designers agree that simplicity is the common characteristic of successful and creative graphics. Graphics are very important and useful, however too many graphics confuse the user. Simple graphics help the user understand, remember and use the site more effectively. The web designer should simplify the graphics as much as possible.  

     Understanding the web graphics formats: The two basic types of graphic structures are bitmap graphics and vector graphics. The major difference in composition is that bitmap graphics are composed from a set of numerical values that specify the color and location of individual pixels on a display device, while vector graphics are composed of several lines dictated by mathematical formulas. You can recognize bitmap graphics because they loose their smooth edges when they are enlarged, thus becoming step like in appearance. On the other hand, vector graphics retain their smoothness even if they are enlarged.  

     Bitmap Graphics: A bitmap image is a collection of picture elements, also known as pixels, which appear as small, square dots on the screen. Bitmap graphic formats treat each graphic as a collection of these dots, assigning a specific color to each pixel. When viewed as a whole, the collection of pixels forms an image. Bitmap images are resolution-dependent. This means that when you create a file, you must specify a size and resolution. When you change the resolution, the image becomes degraded if the image is expanded. Therefore, it is important to create the file in the largest format you are likely to need and then let it remain large or reduce it. The image will not degrade if the size is reduced. Bitmap files are typically used for photos, scans, and are created by "paint" programs. If you have worked with computer graphics already, some familiar bitmap formats might be Photoshop (PSD), PICT, BMP, or TIFF. Most of the graphics you see on the Web today are PNG, GIF , or JPEG files, which are bitmap structures. They are predictable and adjustable and ideal for representing realistic images. They can also render some complex effects. Howerver, these bitmap files contain information on every single pixel needed to display an image; they are big, slow and can be discouraging to use online.  

     Vector Graphics: Vector graphics are much smaller than bitmap files. They are images that are made up of groups of lines that are based on mathematical formulas and defined by the location of their end points (Tittel, Price & Stewart, 1997; Weinman, 1999). Those lines may comprise various shapes and paths, which are followed precisely. Vector graphics contain a series of lines and curves that form different shapes through mathematical instruction. This means that a curved shape, such as a circle, which has been created as a vector graphic will display smooth, crisp, precise edges. The smoothness will be limited by the device used for viewing the graphic, but regardless of how much the image is enlarged by zooming or resizing, it will retain its smooth edges. Because vector files describe object relationships in mathematical terms, they can be scaled to any desired size without degradation. Because we do know why a pixel is the color it is, we can predict the resulting colors and also make changes. Victor files tend toward smaller file sizes. Compared to bitmap files, vector files offer a more efficient approach because they describe graphics as lines, shapes and paths. Unfortunately, there is no Web standard format for vector graphics yet, except proprietary formats such as Flash, Live Motion, QuickTime and Adobe Acrobat. There is a format called Scalable Vector Graphics (SVG) which supports vector graphics extensively on the web. Using the propriety software and the SVG makes it fairly easy to use vector graphics on the Web.  

    Neither bitmap nor vector files are suited for all purposes. Both have advantages and disadvantages in certain situations, thus is it important to know the strengths and weaknesses of each type.  

    Creating fast-loading graphics: Graphics can be serious bandwidth hogs, causing delays and frustration for users. Sure, we could start designing "graphics-free" sites (as some people amazingly propose), but that's not much of a solution. A better approach is to understand what can be done to make graphics smaller, faster, and more efficient (Fleming, 1998). There are a number of things you can do to achieve this goal:

     1. Reduce physical size.  

     2. Reduce colors.  

     3. Use the right file format.  

     4. Use image compression tools.  

     5.Add image fixed WIDTH and HEGHT.  

     6.Recycle graphics wherever possible.  

     7.Use Preload.  

     Relative size: Large items will generally draw attention first and will be seen as the more important elements on screen. Headers, for example, are almost always larger than text, which communicates that they have weight and importance. When these clues are not available, sorting through information can be an overwhelming experience for users.  

     Color and contrast: Color and contrast show relationships between items, establish importance, and most importantly draw attention, A highlight color on a page, such as yellow or red, draws the eye because of its difference from the other elements. A high-contrast black element used on a light-colored page has a similar effect" Color is also an excellent way to show a continuing path, since we can interpret color information rapidly and with a high degree of precision (yellow brick roads are as useful in life as in film). Using the full rainbow of colors without meaning or association-a common occurrence on the Web- makes for poor visual hierarchies. Rieber (1994) indicates the following principles of using color:  

1. Limit the use of different color. Exercise simplicity, clarity and consistency. Make sure you have a reason for each color you use, and how to use it.
   
   
2. Use the same colors for all aspects of your projects. Aid the users of your product by consistently using the same color scheme for all documentation.
   
   
3. When you use colors for coding information, use a maximum of 5 +/-2 colors. Human memory for color is even less then the;magical number 7+/-2; accepted for memory and recognize colors, use only 3-7, and make them as distinct and meaningful as possible.
   
   
4. Use extremely bright and saturated colors only for special purposes. Those colors immediately draw attention, and should be used sparingly, and only for the very most important parts of the design.
   
   
5. Use similar colors to denote relationships between elements. Choosing colors that systematically vary in a dimension, such as hue or saturation, can represent relationships, such as chapter and section hierarchies.
   
   
6. Do not use highly saturated, spectrally extreme colors simultaneously. The focus of the eye changes according to the wavelength of the color, and spectrally extreme colors cause frequent refocusing, which may turn in cause visual fatigue and afterimages. Avoid juxtaposing colors such as red and blue or yellow and purple, or use them only in desaturated forms.

Finally, color is very important element in the web graphic design; it could be use as a cosmetic, motivational and attention-gaining element. Whenever you use color, it should be used carefully to ensure that there is positive effect or at least there is no harm affect.

Movement: animation draws our attention, an unfortunate instinctive reaction for anyone faced with a page full of eye-popping animated ads. If every- thing on screen is vying for attention in a Las Vegas-style glitter of color and lights, it becomes difficult to make decisions about information paths or judge relationships among content elements. Placement or position of elements. In English, we're accustomed to reading and writing from left to right and from top to bottom, The way we approach the screen is the same. Items to the left and top of center tend to be noticed first, and are usually considered more important than other items. The famous left-hand navigation panel took off partially because of its natural, comfortable location.  

    Conclusion: The purpose of this paper has been to introduce some principles to help improve the quality and effectiveness of graphics. Graphics should be designed carefully to serve their appropriate function. Graphics should be designed as an integral part of an instructional design, not as an afterthought (Rieber, 1994). Being able to design an effective hypermedia graphics does not require being an artist rather; it involves being aware of some design considerations and principles.  

References

     Adobe. (2000). SVG zone [Online]. Available: http://www.adobe.com/svg/  [October 25, 1999].

     Crowther, D.T. (1997, December). The constructivist zone. Electronic Journal of Science Education, 2(2). [Online].  Available:  http://unr.edu/homepage/jcannon/ejse/ejserv2n2ed.html [1999, October 22].

     Duffy, T.M. and Jonassen, D.H. (1991, May).  Constructivism:  New implications for instructional technology?  Educational Technology, 39(5), 7-12.

     Feng, Y. (1995).  Some thoughts about applying constructivist theories of learning to guide instruction. [Online].  Available:   http://www.coe.uh.edu/insite/elec_pub/html1995/196.htm   .

     Hanley, S.  (1994).  Elizabeth Boling, Interview. Journal of design science. [Online].  Available: http://ignitiondesign.com/journal/boling  .

     Mullet, K & Sano, D.  (1995).  Designing Visual Interface (SCenTRE).  Englewood Cliffs, NJ: Sun Microsystems, Inc.   

    Neilson, J.  (2000. Designing Web usability: The practice of simplicity. Indianapolis, Indiana. New Riders 39(9), 28-33.