Visual design principles for usable interfaces

ing. The individual page or screen is a microcosm of the complete book, site product. The result is a complete codified system of graphic standards, effective for both the reader and the producer. Abstracting creates a system of standards that simplify text organization, create consistent approaches to preprocessing information, and establish a unique customized look for an organization's products. See Fig. 13.14. Other Page Design Techniques White Space. White space (or empty space) is one of the most underutilized tools of design, yet is extremely effective. It can be used to visually open up a page, focus attention, help group like kinds of information, as well as provide a rest for the reader's eye and create the perception of simplicity and ease of use. The Grid. A grid is a system for distribution of visual elements in a clearly intelligible order. Grids, as part of a design system, determine the horizontal placement of columns, and the vertical placement of headlines, text, graphics, and images. This visual organization or grid system is a series of consistent relationships, alignments, and spatial organization. The grid acts as a blueprint of the page that can be used again and again to create additional pages that appear related, but have different information. When the grid system is understood, it forms the basis for consistent application and extension of the design by others who also understand the intention of the system. Every good design has an underlying structure or grid, as a basis to create a consistent look and feel to a program, web site, book, or sets of any of these. One could think of the grid as the visual analogy of the metal beams as a framework of a high-rise buildings. Each floor has the same underlying elements. Such as windows, elevators, plumbing, but depending on the use of each floor, will be built and look very different. The grid is also a tool to improve usability. For example, if a user can anticipate a button to always appear in the same place, or help always available in the same way, this greatly improves the usefulness of the product or program and ultimately its success. Placement all visual elements such as buttons and help are specified on the grid. Field of Vision. Field of vision refers to what a user can see on a page with little or no eye movement; it is the main area where the eye rests to view most of the page. A good design places key elements in the primary field of vision. It should reflect and reinforce the information hierarchy. Size, contrast, grouping, relationships, and movement are tools that create and reinforce field of vision. The user will see first what is visually strongest, not necessarily what is largest or at the top of a page. This is particularly important for online information, because of limitations of page real estate and dense information environment. One can easily experience these concepts, as well as the strength of peripheral vision, when looking at a page that has a banner advertisement or moving graphics. It is virtually impossible to ignore or focus attention on the primary field of vision when there is winking and blinking somewhere else on the page. Superfluous use of visual devices in fact reduces the value of the information by distracting and disturbing the user's desire and ability to focus, read, and understand. Proximity. This concept applies to the placement of visual elements physically close, so they will be understood as related elements. For example, if there were 3 images with captions on a page, it would be more useful to place each caption near the image if explains, though it might be more efficient to place the three captions together in one block of type on the page. The Illusion of Depth. Though the online world exists on a two-dimensional space, various visual techniques can be used to create the illusion of depth, much like the painters of the Italian Renaissance period. Visual cues, such as layering, overlapping, perspective, size, contrast, and color can reinforce visual hierarchy by giving the illusion that one element appears on top of or in front of another. Charts, Diagrams, Graphics, and Icons The goal of any visual device is to provide the fastest, most efficient path to understanding ideas, as well as to make it clearer and more compelling. Useful, effective graphics can act much like visual shorthand, particularly important when the real estate of the page is limited. A good graphic can eliminate the need for text and communicate across cultures. However, a bad graphic that is unclear and must be reinforced by long captions can be worse than none at all. The old cliche, a picture is worth a thousand words, is true only if it is efficient and effective. In stressful situations, people do have the time to read or the ability to focus on lengthy text or complex visuals. Though more difficult to achieve brevity and simplicity in such cases have greater value. People prefer well-designed charts, diagrams, and illustrations that quickly and clearly communicate complex ideas and information such as comparisons or analysis. Studies show that images are retained long after the reader is finished reading. Done correctly, visual images can be used to make the information more memorable and effective. At a minimum, a good illustration or graphic can often improve performance simply because it increases user motivation. Visuals are powerful communications tools. They can be used to: