Tidwell Course Notes Page 142 Chapter 9 Making It Look Good While style over substance is usually not a successful approach when designing an interface usability studies indicate that paying attention to an interfaces aesthetics can significantly impact the success of a software pac ID: 546539
Download Presentation The PPT/PDF document "CS 275" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 275
Tidwell Course Notes
Page 142
Chapter 9: Making It Look Good
While “style over substance” is usually not a successful approach when designing an interface, usability studies indicate that paying attention to an interface’s aesthetics can significantly impact the success of a software package.Slide2
CS 275
Tidwell Course Notes
Page 143
Same Content, Different Styles
Set up in 2001 as a means for web designers to share design ideas, CSS Zen Garden allows graphic artists to use the same HTML file and attach their own Cascading Style Sheet, providing an array of styles to review.Slide3
CS 275
Tidwell Course Notes
Page 144
The Tristimulus Theory of Color
The thin layer of nerve cells at the back of the eye is called the retina
.
The light sensor cells on the retina that detect illumination are called
rods
.
The section of the retina that reacts to color is called the
fovea
.
Located within the fovea are highly sensitive light sensor cells called
cones
.
The
Tristimulus
Theory of Color
hypothesizes that each cone is sensitive to red, green, or blue light, and that all colors are essentially combinations of R,G, and B.Slide4
CS 275
Tidwell Course Notes
Page 145
Color Sensitivity
The visible spectrum of light, illustrated at right, ranges from about 400 to 700 nanometers in the electromagnetic energy spectrum.
Empirical studies have indicated that the cones in the eye have different levels of sensitivity to different colors, indicating that the eye’s response to pure blue light is much less strong than its response to pure red or green light.
The RGB phosphors used in cathode ray tubes do not exactly produce “pure” shades of red, green, and blue, as indicated in the figure above, showing the eye’s response to the excited pixel colors.Slide5
CS 275
Tidwell Course Notes
Page 146
The RGB Cube
One common way to specify colors to be displayed on an interface is the RGB cube, in which every color is a linear combination of red, green, and blueSlide6
CS 275
Tidwell Course Notes
Page 147
Color Display Technologies
Several display technologies have been developed to accommodate the RGB model.
In cathode ray tube (CRT) displays, focused electron guns shoot charged beams at a screen coated with triads of red, green, and blue phosphors.
The intensity of the beam determines how bright each pixel’s triad becomes, resulting in a particular RGB color for that pixel.
In a liquid crystal display (LCD), each pixel has three transistors that apply a charge to an associated liquid crystal substance behind colored RGB filters.
The intensity of each transistors charge determines how much light the liquid crystal allows to pass through, resulting in a particular RGB color for that pixel.
A plasma screen is a network of RGB phosphors mounted between two thin layers of glass.
A small electric pulse for each pixel excites the gases hovering over the phosphors, changing them to a plasma state, from which they react with the phosphors to produce CRT-like light. Slide7
CS 275
Tidwell Course Notes
Page 148
The HSV Cone
An alternative way to represent color is via HSV coordinates, using hue (i.e., pure color, represented by the angle around the central axis to the cone),
saturation
(i.e., level of purity, represented by the radial distance from the axis), and
value
(i.e., lightness, represented by the distance up the central axis).
This model has the intuitive appeal of the artist’s tint, shade, and tone model:
pure pigments are (i,1,1).
tints: adding white pigment is equivalent to decreasing S at constant V
shades: adding black pigment is equivalent to decreasing V at constant S
tones: decreasing S and VSlide8
CS 275
Tidwell Course Notes
Page 149
HSV Separation
The picture at right illustrates the HSV distinction.
Setting saturation and value to constants, observe the variation in hue.
Setting hue and value to constants, observe the variation in saturation.
Setting hue and saturation to constants, observe the variation in value.Slide9
CS 275
Tidwell Course Notes
Page 150
Interface Colors
With the advent of advanced hardware and software technologies, it’s easy to set up interfaces with a variety of colors.
Does the choice of colors make a difference?Slide10
CS 275
Tidwell Course Notes
Page 151
Color: Warm Vs. Cool
Yellows, oranges, and reds are warm colors, giving a sense of excitement and passion.
Blues, purples, and greens are cool colors, giving a sense of calm and comfort.Slide11
CS 275
Tidwell Course Notes
Page 152
Color: Light Vs. Dark Backgrounds
Light backgrounds afford a somewhat friendlier mood.
Dark backgrounds seem more serious, perhaps even foreboding.Slide12
CS 275
Tidwell Course Notes
Page 153
Color: High Vs. Low Contrast
A low contrast between foreground and background colors provides a sense of relaxation and weakness.
A high contrast between foreground and background colors provides a sense of confidence and strength.Slide13
CS 275
Tidwell Course Notes
Page 154
Color: Saturated Vs. Unsaturated
Saturated color combinations tend to cause excessive eyestrain.
Unsaturated color combinations tend to produce blander, less eye-catching results.Slide14
CS 275
Tidwell Course Notes
Page 155
Typefaces
The typeface used in an interface helps to determine the readability of the interface, as well as its overall “voice”.
Serif fonts (like that at left) are often hard to read for small fonts due to the small pixel size in displays; sans-serif fonts (like that at right) tend to work better.
Proportional fonts are easier on the eye, but monospace fonts lend themselves to lining up into nice, neat columns.
Font Metrics:
Baseline: imaginary horizontal line on which characters rest
Descent: distance between the baseline and the lowest descending glyph in a typeface
Ascent: distance between the baseline and the top of the glyph that reaches farthest from the baselineSlide15
CS 275
Tidwell Course Notes
Page 156
Boldface & Italics
While using boldface or italics traditionally lends emphasis to certain text, italicized text tends to be less readable on a display screen.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.Slide16
CS 275
Tidwell Course Notes
Page 157
Stylized Fonts
Ornamental typefaces, while certainly adding “personality” to an interface, frequently do so at the expense of readability.Slide17
CS 275
Tidwell Course Notes
Page 158
Space
A major design decision involves the determination of how best to utilize the available space on an interface.
Too much whitespace can be wasteful, in this case at the expense of readable font sizes.
Crowding the interface contents tends to increase visual tension.
The challenge is to balance airy openness with effective display utilization.Slide18
CS 275
Tidwell Course Notes
Page 159
Desktop Vs. Web
There are several differences between designing an interface for the desktop and designing an interface for the Web.
Web Advantages
Familiar look-and-feel
Simple to update
Heavy processing performed by server instead of end station
Web Disadvantages
HTML limitations (e.g., no absolute positioning, no input masking)
Browser-dependent appearance
Desktop Advantages
Direct interaction with hardware (helpful in real-time applications like games and CAD/CAM)
Updates data only instead of updating entire display
Desktop Disadvantages
Reinstallation required with new workstations
Third-party development tools make standardization difficultSlide19
CS 275
Tidwell Course Notes
Page 160
Pattern #88: Deep Background
To make the contents of a display more eye-catching, use a background that appears to recede into the distance.
Example: Microsoft visual Studio
2008
employs a layered look to provide a sense of relative prominence.
The title section is darkly shaded with a faint design directed away from the overall center of the display.
The main canvas background possesses a dark-to-light color gradient that provides a sense of depth.
The internal panes are brightly colored with a subtle shadow effect behind them, making them focal points. Slide20
CS 275
Tidwell Course Notes
Page 161
Pattern #89: Few Hues, Many Values
To avoid clutter and visual confusion, limit the interface to one or two different hues.
Example: When inserting an organizational chart into a Microsoft Word document or Microsoft PowerPoint presentation, the default color scheme utilizes the blue-hued pattern on the left, rather than the more distinctive, but potentially misleading, color scheme on the right. Slide21
CS 275
Tidwell Course Notes
Page 162
Pattern #90: Corner Treatments
Provide an interface a more distinctive look by using a unified pattern of curves or diagonals in place of standard right angles.
Example: Apache Software Foundation’s Eclipse SDK uses a curved corner/circular button motif that accentuates its main logo shape. Slide22
CS 275
Tidwell Course Notes
Page 163
Pattern #91: Borders That Echo Fonts
Use the same style for significant lines and borders within an interface as for one of the interface’s major fonts.
Example: Microsoft’s AutoRoute uses thick pastel-colored lines to draw routes on a map, which is similar to the thick, pastel-colored font used to describe those routes. Slide23
CS 275
Tidwell Course Notes
Page 164
Pattern #92: Hairlines
To add a level of sophistication, use pixel-wide lines to separate sections of an interface.
Example: Symantec’s Norton SystemWorks separates list items with tapering horizontal hairlines, making the design somewhat more distinctive than it would be if that region of the display were merely filled with whitespace. Slide24
CS 275
Tidwell Course Notes
Page 165
Pattern #93: Contrasting Font Weights
To separate two types of textual information on a display, use two different fonts, distinguished by boldness, italicization, or color.
Example: When viewing a modified document in Microsoft Word, a user may examine the details of the modifications via the View Markup command, which highlights the changes in red. Slide25
CS 275
Tidwell Course Notes
Page 166
Pattern #94: Skins
Permit the users of an application to have as much flexibility as possible in customizing the look-and-feel of the interface.
Example: Microsoft Media Player allows the user to select a “skin” to be used as a display platform for music and video clips.
Example: In Microsoft Solitaire, users may select from a variety of card back styles.