The Essential Guide to UI Design
.pdf
260Part 2: The User Interface Design Process
■■Prose text.
——Use Rapid Serial Visual Presentation (RSVP) for presenting prose text.
•There are no performance or preference differences between 10and 3-line displays.
•Use 20-point text presented at speeds of about 250 words per minute.
■■Other guidelines.
——Use choice selection, not typing.
——Provide consistency.
——Provide stability.
——Provide feedback.
——Be forgiving.
——Provide obvious clickable graphics.
Prose text. Bernard et al. (2001e) studied Rapid Serial Visual Presentation for reading prose text on small displays and found RSVP yielded an acceptable level of reading performance. They also found no performance or preference differences between 10-line and 3-line presentations. Russell et al. (2001) found the optimum was 20-point type presented at speeds of 250 words per minute.
Other guidelines. Weiss (2002) recommends the following. Use choice selection instead of typing whenever possible. Keying text on a small device can be difficult. Provide consistency in terminology within and between applications. While consistency between desktop applications and small screens is desirable, occasional abbreviations may be necessary on the small screens. Maintain abbreviation consistency throughout, however. Provide stability. If a connectivity problem occurs, enable a person to pick up where he or she left off. Previously entered information should not have to be reentered. Provide feedback regarding what the application is doing, perhaps through an assigned information key. Be forgiving and tolerant of user errors. Also provide an undo function. Finally, provide obvious clickable graphics. Use high-contrast images for clickable graphics. Non-clickable graphics should be subdued.
Weblogs
Weblogs are a type of Web site. Therefore the guidelines scattered throughout this book should be followed. Some important Weblog guidelines follow. This discussion is based mostly on Nielsen’s (2005f) top ten Weblog design mistakes.
■■Provide an author biography.
■■Provide an author photo.
■■Provide for easy scanning.
■■Provide meaningful links.
■■Link to past important content.
■■Categorize postings.
■■Publish regularly.
Step 3: Principles of Good Interface and Screen Design 261
■■Avoid mixing topics.
■■Remember you leave an audit trail.
Author biography. A writing that is signed has more credence, and is more trustworthy than one that is anonymous. Readers want to know something about the author, including credentials, experiences, and reasons for the comments.
Author photo. A photo offers a more personable impression of the author. It enhances credibility and connects the virtual and physical worlds. People relate more easily to someone they have seen. It also makes the author recognizable.
Easy scanning. Like all Web sites, headlines, important points, and text should be easily scannable. An article’s objective must be quickly understandable. If not, the entire posting may not even be read. Headlines should be descriptive of the content for representation in search engines, news feeds, and other external environments.
Meaningful links. Write link text to indicate (or include in its immediately surrounding text) where the link leads and what will be found at the destination. People generally do not like voyaging to the unknown.
Past important content. Highlight the most important past postings and link directly to them. Otherwise they may never be found. Also link to past postings in the newer postings to provide background and context. Never assume the reader has been there since the beginning.
Categorize postings. Categorize postings by topics so people can easily get a list of all postings on a particular topic. Be conservative in posting to categories, ensuring that all postings are relevant to that particular topic.
Publish regularly. Provide a regular publishing schedule so readers can anticipate when and how often updates will occur. Without a regular schedule, readers may be lost.
Avoid mixing topics. Focus your content on a topic. People often visit to read an entry that interests them. If their topic of interest appears only sporadically among a wide range of other topics, they are unlikely to return because of the effort that must be expended.
Audit trail. Postings may last forever, leaving a long audit trail. Think twice before posting something that might eventually come back to haunt you. Never, unintentionally, burn any bridges.
Statistical Graphics
A statistical graphic is data presented in a graphical format. A well-designed statistical graphic, also referred to as a chart or graph, consists of complex ideas communicated with clarity, precision, and efficiency. It gives its viewer the greatest number of ideas, in the shortest time, and in the smallest space, and with least possible clutter. It will also induce the viewer to think of substance, not techniques or methodology. It will provide coherence to large amounts of information by tying them together in a meaningful way, and it will encourage data comparisons of its different pieces by the eye. In general, a statistical graphic should possess the following qualities:
262Part 2: The User Interface Design Process
■■The objective and use of the graph should be obvious and apparent.
■■The graph type should be recognizable.
■■The graph type should help users understand the data more easily.
■■The data should be formatted and presented correctly.
■■The data should be formatted and presented for the using audience.
■■The graph should avoid distortions by telling the truth about the data.
Much of this material on statistical graphics is based upon Tufte (1983), Smith and Mosier (1986), and Fowler and Stanwick (1995 and 2004).
Use of Statistical Graphics
■Graphs are used for
—Simple comparisons of data.
—Presentation of changes over time.
—Statistical analysis.
—Illustration of proportions.
■Reserve for material that is rich, complex, or difficult.
—Less than or equal to 3 numbers — use a sentence.
—For 4 to 20 numbers — use a table.
—More than 20 numbers — use a graph.
A few data sets may be compared using bar charts while changes over time can be shown using line graphs. Statistical analysis can be accomplished using histograms and scatterplots. Proportional graphs illustrate differences in size number, or value while not requiring a scale. Graph types include surface charts and pie charts.
Statistical graphics should be reserved for large sets of data with real variability. The power of graphics should not be wasted on simple linear changes or situations in which one or two numbers would summarize the result better. Tufte (1983) says that tables usually outperform graphics on small data sets of 20 or fewer numbers, or when data sets are noncomparative or highly labeled. Tables are also better if the data must be studied or very specific information must be retrieved (Coll et al., 1994). Wainer (1997) suggests that for 3 or less numbers a sentence is the best descriptor; for 4 to 20 numbers use a table; and for more than 20 numbers use a graph.
Components of a Statistical Graphic
Most statistical graphics have at least two axes, two scales, an area to present the data, a title, and sometimes a legend or key, as illustrated in Figure 3.71. Pie charts are the exception to this general rule. Guidelines for graph components include the following.
Step 3: Principles of Good Interface and Screen Design 263
Figure 3.71: Components of a statistical graphic.
Data Presentation
■Emphasize the data.
■Minimize the nondata elements.
■Minimize redundant data.
■Show data variation, not design variation.
■Provide the proper context for data interpretation.
■Restrict the number of information-carrying dimensions depicted to the number of data dimensions being illustrated.
■Employ data in multiple ways, whenever possible.
■Maximize data density.
■Employ simple data-coding schemes.
■Avoid unnecessary embellishment of
—Grids.
—Vibration.
—Ornamentation.
■Fill the graph’s available area with data.
The most important part of a graphics display, as with an alphanumeric display, is the data itself.
Emphasize the data, minimize the nondata elements. A person’s attention should be drawn to the measured quantities. The largest share of the graphic’s “ink” should present data. Nondata elements — such as elaborate grid lines, gratuitous decoration, and extensive, detailed, and wordy labels — draw attention to themselves and mask the data. So, nondata elements should be minimized, or eliminated entirely.
Redundant data. Information that depicts the same value over and over should also be minimized or eliminated. Redundancy, on occasion, can be useful, however. It may aid in providing context and order, facilitating comparisons, and creating an aesthetic balance. Use redundancy only if necessary.
264 Part 2: The User Interface Design Process
Data variation. Show data variation, not design variation. Each part of a graphic generates visual expectations about its other parts. The expectancies created in one part should be fulfilled in other parts so the viewer does not confuse changes in design with changes in data. Scales should move in regular intervals; proportions should be consistent for all design elements. If the viewer confuses changes in design with changes in data, ambiguity and deception result.
Proper context. Provide the proper context for data interpretation. Graphics often lie by omission. Data for making comparisons or establishing trends must always be included to provide a proper reference point. “Thin” data must be viewed with suspicion. The graphic in Figure 3.72, for example, might have a number of possible interpretations, as illustrated in Figure 3.73. All important questions must be foreseen and answered by the graphic.
Figure 3.72: A change between 1992 and 1993 without proper context for interpretation.
Figure 3.73: Changes between 1992 and 1993 with proper contexts for interpretation.
Step 3: Principles of Good Interface and Screen Design 265
Restrict information-carrying dimensions. Restrict the number of informationcarrying dimensions depicted to the number of data dimensions being illustrated. Displaying one-dimensional data in a multidimensional format is perceptually ambiguous. With multidimensional data, changes in the physical area of the surface of the graphic do not produce an appropriate proportional change in the perceived area. Examples of multidimensional formats used to display onedimensional data would be different-sized human bodies to indicate populations or different-sized automobiles to indicate the number of cars. Often the impression on the viewer is that the change is actually much greater than it really is. This problem can be avoided if the number of information-carrying dimensions on the graphic is restricted to the number of data dimensions being illustrated.
Employ data in multiple ways. Whenever possible, employ data in multiple ways. Parts of a graph can be designed to serve more than one purpose. A piece of data may at the same time convey information and also perform a design function usually left to a nondata element. Some examples are
■■A grid to aid readability of a bar chart, instead of being inscribed on the graphic background, may be positioned within the bars themselves, as illustrated in Figure 3.74.
■■The size of what is being measured can be conveyed through the size of the graphical element, the intensity through color or level of shading.
Graphics can be designed to have multiple viewing depths. The top level provides an overall view, each succeeding level an ever-increasing closer view. They may be also designed to have different viewing angles or lines of sight.
The danger in employing data in multiple ways is that it can generate a graphical puzzle. A sign of a puzzle is that the graphic, instead of being interpreted visually, must be interpreted verbally. Symptoms of a puzzle are frequent references to a legend to interpret what is presented and extensive memorization of design rules before one can comprehend what is presented. By contrast, a welldesigned multiple-function graphic permits a quick and implicit transition of the visual to the verbal.
Figure 3.74: A piece of data (line in the bars) performing a nondata function.
266 Part 2: The User Interface Design Process
Maximize data density. In graphics, more is better than less—the greater amount of information displayed, the larger the number of visual comparisons that can be made, improving comprehension. This is true because the eye can detect large amounts of information in a small space. Simple things belong in a table or in the text.
Data density of a graphic can be maximized in two ways: enlarging the data matrix or shrinking the graphic. Enlarging the data matrix involves displaying as much information as possible. If the graphic becomes overcrowded, techniques such as averaging, clustering, smoothing, or providing summaries can reduce the number of elements to be displayed. Shrinking the graphic means reducing it in size, but screen resolution may impose limitations on how much shrinking can be performed.
If visual differentiation in the types of data being displayed is necessary, use simple coding methods in the areas being depicted. Elaborate schemes or patterns can be eye-straining and can actually impede the flow of information from the graphic to the viewer. Some possible coding alternatives include
■■Varying shades or densities.
■■Labeling with words.
■■Varying colors.
Avoid unnecessary embellishment. All pieces of a graphic must tell the viewer something new. An unnecessary embellishment is “chartjunk.” It does not add anything new to the graphic’s meaning. It is decoration or noise that hinders assimilation of the message being communicated. Nondata elements and redundant data are forms of chartjunk. Three other kinds are vibration, heavy grids, and ornamentation.
A grid carries no information, contributes noise, and focuses attention away from the data. An excessively heavy grid can even mask the data. Grids should be suppressed or eliminated so they do not compete with the data. When a grid serves as an aid in reading or extrapolating, it should, of course, be included. Its tendency to overwhelm can be reduced by constructing it with delicate lines or muted colors and placing it behind the data.
The eye is never absolutely still; it produces continuous slight tremors that aid visual acuity. The result is that, when small patterns, lines, boxes, or dots are viewed, they shimmer or vibrate. This vibration can be distracting; examples are illustrated in Figure 3.75. Although eye-catching, vibrations can also strain the eye. Simple data-coding schemes, such as using shades of color, are much more effective.
When the graphic is overwhelmed by decoration, it is very ineffective. Ornamentation can take many forms: extensive use of color when it is not necessary; creating multidimensional graphics when single dimensional will do; pointless use of vibrating patterns; or forcing data into a graphic when a table
Step 3: Principles of Good Interface and Screen Design 267
would work much better. Ornamentation is more effective as a piece of art hanging on a wall. It is a symptom of “See what I can do with my computer” rather than an effort to provide the user with the data in the most comprehensible way possible. The best graphic display is the simplest graphic display.
Fill the display area. For ease of interpretation and efficiency, the graphic’s data should fill up the entire display area within the axes. If it does not, the scale or the graphic is too large.
Figure 3.75: Examples of patterns creating vibrations.
268 Part 2: The User Interface Design Process
Axes
■Values on an axis should increase as they move away from the origin.
■Use the horizontal axis (X) to show time or cause of an event (the independent variable).
■Use the vertical axis (Y) to show a caused effect (the dependent variable).
■Provide additional axes when appropriate. For example, to show
—Two scales for the same data.
—Two or more related graphs within the same area and frame.
■Assure the area enclosed by the axes is the proper size for the displayed data.
Values on an axis should increase as they move away from the origin point. If the numeric values displayed are positive, the origin point will be the lower-left point of the graphic. If the data includes negative values and the axes must extend in both directions from the zero point, position the origin in the center of the graph.
Use the horizontal axis (X) to show time or cause of an event (the independent variable). Use the vertical axis (Y) to show a caused effect (the dependent variable). When the X-axis plots time intervals, the labeled points should represent the end of each time interval. The X-axis may also be called the abscissa or category axis, the Y-axis the ordinal or value axis. If the graphic possesses three dimensions, the third axis is called the Z- axis, reflecting the graph’s plane. The axes can be reversed, especially for bar graphs.
Additional axes can also be displayed, if appropriate. For example, temperature in Celsius can be displayed in a top X-axis, temperature in Fahrenheit in a bottom X-axis. Speeds or distances in kilometers and miles can be displayed simultaneously in a similar manner. Putting two datasets with a close relationship within the same frame is also possible. The Y-axes may be used to show the different but related scales.
The area enclosed by the axes should be of the proper size for the data. It should not be too large or too small.
Scales and Scaling
■Place ticks to marks scales on the outside edge of each axis.
■Employ a linear scale.
■Mark scales at standard or customary intervals.
■Create relatively square grid cells.
■Start a numeric scale at zero (0).
■Keep the number of digits in a scale to a minimum.
■For scales containing decimals, put zeros in front of the decimal.
■If data points are on the zero (0) line, offset the scale.
■Display only a single scale on each axis.
■For large data matrices, consider displaying duplicate axes.
■Provide aids for scale interpretation.
■Provide scaling consistency across two or more related graphics.
■Clearly label each axis in a left-to-right reading orientation.
Step 3: Principles of Good Interface and Screen Design 269
A scale is a set of measurement points or markers. There are three major types of scales: category, quantitative, and sequence. A category scale, also called qualitative or nominal, consists of an unordered or unsequenced series of words or numbers. A quantitative scale, also referred to as value, interval, numeric, or amount, consists of sequential numbers with uniform spacing. A sequence scale consists of words or numbers in a customary and standard order, such as the months of the year.
Scaling is the positioning of data in relation to these points or markers. Choose an appropriate scale for both graph axes. If the scale is too expanded, the effect may be exaggerated, if too small, the effect may be underreported. Standard scaling practices are these:
Tick marks. Place ticks to mark scales on the outside edge of each axis. Placing them outside will prevent a tick from interfering with data located near the axis.
Linear scale. Employ a linear scale. Most people are more familiar with linear scales than with logarithmic or other nonlinear scales. These latter kinds are often interpreted inaccurately. If necessary or desirable, two X or Y scales can be used, one displaying a linear scale, the other a logarithmic scale.
Scale markings. Mark scales at standard or customary intervals to aid comprehension. Familiar standard intervals are 1, 2, 5, 10, and multiples of 10. Familiar customary intervals include the days of the week and the months of the year. Construct scales with tick marks at these intervals. To aid visual comprehension, it may be necessary to provide intermediate marks as well. Intermediate marks should be consistent with the scale intervals shown.
Grid cells. Create squarish grid cells by using the same distance between ticks on both axes. Distorting the axes will distort the data as well.
Start a numeric scale at zero. Using zero as the starting point on a scale aids visual comparisons because zero is an expected starting point. If a zero point is omitted because of the nature of the data, this omission should be clearly indicated in the graphic.
Minimization of scale digits. Keep the number of digits in a scale to a minimum. Smaller numbers aid understanding. Round off all numbers to two digits or less.
Scales containing decimals. Place zeros in front of decimal numbers so the decimal point is not missed.
Data points on zero line. If a substantial number of data points are on the zero (0) line, offset the scale to enhance readability. Otherwise, they may not be seen.
Single scale on each axis. Display only a single scale on each axis. Avoid multiple scales associated with a single axis. For all but the most experienced people, multiple scales can be confusing and can lead to interpretation errors. Meanings can also be greatly distorted. If multiscale graphs must be used, permit the user to select any data curve individually and have the computer highlight its corresponding scale.
Duplicate axes for large matrices. For large data matrices, consider displaying duplicate axes. The readability of large data matrices is improved if the X-axis scale appears at the top as well as the bottom of the graph, and the Y-axis scale at the right as well as the left side.