Date post: | 03-Apr-2018 |
Category: |
Documents |
Upload: | jose-roberto-cardoso |
View: | 223 times |
Download: | 0 times |
of 11
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
1/11
Research-Based Web Design & Usabi l i ty Guidel ines
T
extAppearan
ce
11Text Appearance
There are several issues related to textcharacteristics that can help ensure a Web site communicates eectively
with users:
Use amiliar onts that are at least 12-points;
Use black text on plain, high-contrast backgrounds; and
Use background colors to help users understand the grouping o
related inormation.
Even though it is important to ensure visual consistency, steps should
be taken to emphasize important text. Commonly used headings
should be ormatted consistently, and attention-attracting eatures, such
as animation, should only be used when appropriate.
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
2/11
101
Research-Based Web Design & Usabil i ty Guidelines
Guideline:When users are expected to rapidlyread and understand prose text, use black text on
a plain, high-contrast, non-patterned background.
Comments: Black text on a plain backgroundelicited reliably aster reading perormancethan on a medium-textured background. Whencompared to reading light text on a dark background, people read blacktext on a white background up to thirty-two percent aster. In general, thegreater the contrast between the text and background, the easier the text is
to read.
Sources: Boyntoin and Bush, 1956; Bruce and Green, 1990; Cole and Jenkins,1984; Evans, 1998; Goldsmith, 1987; Gould, et al., 1987a; Gould, et al.,1987b; Jenkins and Cole, 1982; Kosslyn, 1994; Muter and Maurutto, 1991;Muter, 1996; Schar, Ahumada and Hill, 1999; Snyder, et al., 1990; Spencer,Reynolds and Coe, 1977a; Spencer, Reynolds and Coe, 1977b; Treisman,
1990; Williams, 2000.
Example:
101
Te
xtAppearanc
e
11:1 Use Black Text on Plain, High-Contrast Backgrounds
Strength of Evidence:
Relative Importance:
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
3/11
Research-Based Web Design & Usabil i ty Guidelines
Guideline:When users must read a lot oinormation, use lower-case onts and appropriatecapitalization to ensure the astest possible readingspeed.
Comments: Using mixed-case onts or reading prose text means that mostletters will be lowercase, with all letters that should be capitalized being inuppercase. Most users have had considerable experience reading lowercaseletters and are thereore very profcient at it.
Sources: Larson, 2004.
Example:
This block o text is an example o displaying continuous(prose) text using mixed upper- and lowercase letters.Its not difcult to read. This is called sentence case.
THIS BLOCK OF TEXT IS AN EXAMPLE OF DISPLAYINGCONTINUOUS (PROSE) TEXT USING ALL UPPERCASELETTERS. ITS MORE DIFFICULT TO READ. THIS IS NOTCALLED SENTENCE CASE.
11:3 Use Mixed-Case for Prose Text
Strength of Evidence:
Relative Importance:
Guideline: Ensure that the ormat o common itemsis consistent rom one page to another.
Comments: The ormatting convention chosenshould be amiliar to users. For example, telephonenumbers should be consistently punctuated (800-555-1212), and time records might be consistently
punctuated with colons (HH:MM:SS).
Sources:Ahlstrom and Longo, 2001; Engel and Granda, 1975; Mayhew, 1992;Smith and Mosier, 1986; Tute, 1983.
11:2 Format Common Items Consistently
Strength of Evidence:
Relative Importance:
102102
T
extAppearan
ce
See page xxiior detailed descriptions
o the rating scales
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
4/11
Guideline: Ensure visual consistency o Web siteelements within and between Web pages.
Comments: Two studies ound that the numbero errors made using visually inconsistent displays is reliably higher thanwhen using visually consistent displays. Visual consistency includes the sizeand spacing o characters; the colors used or labels, onts and backgrounds;and the locations o labels, text and pictures. Earlier studies ound that tasksperormed on more consistent interaces resulted in (1) a reduction in taskcompletion times; (2) a reduction in errors; (3) an increase in user satisaction;and (4) a reduction in learning time.
However, users tend to rapidly overcome some types o inconsistencies. Forexample, one study ound that the use o dierent-sized widgets (such aspushbuttons, entry felds, or list boxes) does not negatively impact usersperormance or preerences.
Sources:Adamson and Wallace, 1997; Adkisson, 2002; Badre, 2002;Card, Moran and Newell, 1983; Cockburn and Jones, 1996; Eberts andSchneider, 1985; Ehret, 2002; Grudin, 1989; Nielsen, 1999d; Osborn andElliott, 2002; Ozok and Salvendy, 2000; Parush, Nadir and Shtub, 1998;Schneider and Shirin, 1977; Schneider, Dumais and Shirin, 1984; Tullis,
2001.
Example:
11:4 Ensure Visual Consistency
Strength of Evidence:
Relative Importance:
An example of good visual consistency: Location and size of pictures,title bar, and font all contribute to visual consistency.
Headings,Titles
,and
Labels
Li
nks
Headings,Titles
,and
Labels
103
Research-Based Web Design & Usabil i ty Guidelines
Te
xtAppearanc
e
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
5/11
Headings,
T
itles,
and
Labe
ls
104
Research-Based Web Design & Usabil i ty Guidelines
See page xxiior detailed descriptions
o the rating scales
Guideline: Use bold text only when it is importantto draw the users attention to a specifc piece o
inormation.
Comments: In the ollowing example with the Field Identifers bolded on the let,users spent about our times as long looking at the bold Field Identifers than thenon-bold Field Values. In the example on the right, participants spent more timelooking at the bolded Field Values. In addition, the non-bold Field Values elicitedbetter search accuracy rates than did the bold Field Values. In situations like thisexample, it is probably best to not use bold or either feld identifers or feldvalues. In general, bold text should be used sparingly.
Sources: Joseph, Knott and Grier, 2002.
Example:
Field Identifers Field Values Field Identiers Field Values
Previous Bill $33.84 Previous Bill $33.84
Previous Payment $32.75 Previous Payment $32.75
Balance$1.09 Balance
$1.09Current Charges $18.89 Current Charges $18.89
Total Billed $19.98 Total Billed $19.98
Penalty $4.53 Penalty $4.53
Amount Due $24.51 Amount Due $24.51
Field Identiers Field Values
Previous Bill $33.84
Previous Payment $32.75
Balance $1.09
Current Charges $18.89
Total Billed $19.98
Penalty $4.53
Amount Due $24.51
11:5 Use Bold Text Sparingly
Strength of Evidence:
Relative Importance:
T
extAppearan
ce
The bottom example proves easier to read than either of the top two examples.
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
6/11
Headings,Titles
,and
Labels
105
Research-Based Web Design & Usabil i ty Guidelines
Guideline: Use attention-attracting eatures withcaution and only when they are highly relevant.
Comments: Draw attention to specifc parts oa Web page with the appropriate (but limited)use o moving or animated objects, sizedierential between items, images, brightly-colored items, and varying ontcharacteristics.
Not all eatures o a Web site will attract a users attention equally. Theollowing eatures are presented in order o the impact they have on users:
Movement (e.g., animation or reveals) is the most eective attention-
getting item. Research suggests that people cannot stop themselvesrom initially looking at moving items on a page. However, i themovement is not relevant or useul, it may annoy the user. I movementcontinues ater attracting attention, it may distract rom the inormationon the Web site.
Larger objects, particularly images, will draw users attention beoresmaller ones. Users fxate on larger items frst, and or longer periods otime. However, users will tend to skip certain kinds o images that theybelieve to be ads or decoration.
Users look at images or one or two seconds, and then look at theassociated text caption. In many situations, reading a text caption tounderstand the meaning o an image is a last resort. Parts o images ortext that have brighter colors seem to gain ocus frst.
Having some text and graphic itemsin brighter colors, and others indarker colors, helps users determinethe relative importance o elements.Important attention-attracting ontcharacteristics can include all
uppercase, bolding, italics, underlining,and increased ont size.
Sources: Campbell and Maglio, 1999;Evans, 1998; Faraday and Sutclie,1997; Faraday, 2000; Faraday, 2001;Galitz, 2002; Hillstrom and Yantis, 1994;Lewis and Walker, 1989; McConkie andZola, 1982; Nygren and Allard, 1996;
Treisman, 1988; Williams, 2000.
Example:
11:6 Use Attention-Attracting Features when Appropriate
Strength of Evidence:
Relative Importance:Te
xtAppearanc
e
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
7/11
Headings,
T
itles,
and
Labe
ls
106
Research-Based Web Design & Usabil i ty Guidelines
See page xxiior detailed descriptions
o the rating scales
Guideline: Use a amiliar ont to achieve the bestpossible reading speed.
Comments: Research shows no reliable dierencesin reading speed or user preerences or twelve point Times New Roman orGeorgia (seri onts), or Arial, Helvetica, or Verdana (sans seri onts).
Sources: Bernard and Mills, 2000; Bernard, Liao and Mills, 2001a; Bernard, et al.,2002; Bernard, et al., 2001; Boyarski, et al., 1998; Evans, 1998; Tullis, Boynton
and Hersh, 1995; Williams, 2000.
Example: Using unfamiliar fonts may slow reading speeds.
11:7 Use Familiar Fonts
Strength of Evidence:
Relative Importance:
T
extAppearan
ce
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
8/11
Headings,Titles
,and
Labels
107
Research-Based Web Design & Usabil i ty Guidelines
Guideline: Use at least a 12-point ont (e.g.,typeace) on all Web pages.
Comments: Research has shown that onts smaller than 12 points elicitslower reading perormance rom users. For users over age 65, it may bebetter to use at least ourteen-point onts. Never use less than nine-point
ont on a Web site.
Traditional paper-based ont sizes do not translate well to Web site design.For instance, Windows Web browsers display type two to three points largerthan the same ont displayed on a Macintosh. User-defned browser settingsmay enlarge or shrink designer-defned ont sizes. Defning text size using
pixels will result in dierently-sized characters depending upon the physicalsize o the monitors pixels and its set resolution, and presents accessibilityissues to those individuals who must speciy large ont settings.
Sources: Bailey, 2001; Bernard and Mills, 2000; Bernard, Liao and Mills,2001a; Bernard, Liao and Mills, 2001b; Bernard, et al., 2002; Ellis andKurniawan, 2000; Galitz, 2002; Ivory and Hearst, 2002; Tinker, 1963; Tullis,2001; Tullis, Boynton and Hersh, 1995.
Example:
11:8 Use at Least 12-Point Font
Strength of Evidence:
Relative Importance:
Te
xtAppearanc
e
Examples of cross-platform text-size differences generated on a variety of
browsers and platforms by using HTML text in a one-cell table with a widthof 100 pixels.
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
9/11
Headings,
T
itles,
and
Labe
ls
108
Research-Based Web Design & Usabil i ty Guidelines
See page xxiior detailed descriptions
o the rating scales
Guideline:When using color-coding on your Website, be sure that the coding scheme can be quickly
and easily understood.
Comments: One study ound that participants were able to answer questionssignifcantly aster when the interace was color-coded, but only wheninormation about the color-coding was provided. When both color-coding andinormation about how to interpret the colors were provided, user perormanceimproved by orty percent. Be sure that the inormation provided does notrequire the user to read and comprehend a lot o text to understand it.
Sources:Resnick and Fares, 2004; Wu and Yuan, 2003.
Example:
11:9 Color-Coding and Instructions
Strength of Evidence:
Relative Importance:
T
extAppearan
ce
The key in the
bottom left bringsclarication to thehighlighted sizes
in this Mens
General SizingGuidelines.
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
10/11
Headings,Titles
,and
Labels
109
Research-Based Web Design & Usabil i ty Guidelines
11:10 Emphasize Importance
Guideline: Change the ont characteristics toemphasize the importance o a word or short
phrase.
Comments: Font characteristics that are dierent rom the surrounding textwill dominate those that are routine. Important ont characteristics includebolding, italics, ont style (seri vs. sans seri), ont size (larger is better togain attention), and case (upper vs. lower). When used well, text style candraw attention to important words.
The use o diering ont characteristics has negative consequences aswellreading speed can decrease by almost twenty percent, and thus
should be used sparingly in large blocks o prose. Do not use diering ontcharacteristics to show emphasis or more than one or two words or a shortphrase. Do not use underlining or emphasis because underlined words onthe Web are generally considered to be links.
Sources: Bouma, 1980; Breland and Breland, 1944; DeRouvray and Couper,2002; Evans, 1998; Faraday, 2000; Foster and Coles, 1977; Lichty, 1989;Marcus, 1992; Paterson and Tinker, 1940a; Poulton and Brown, 1968; Rehe,1979; Spool, et al., 1997; Tinker and Paterson, 1928; Tinker, 1955; Tinker,
1963; Vartabedian, 1971; Williams, 2000.
Example: Limited use of bolding effectively emphasizes important topic categories.
Strength of Evidence:
Relative Importance:
Te
xtAppearanc
e
7/29/2019 o Papel Da Tecnologia Da Informacao Nas Organizacoes
11/11
Headings,
T
itles,
and
Labe
ls
110
Research-Based Web Design & Usabil i ty Guidelines
See page xxiior detailed descriptions
o the rating scales
Guideline: Do not use two (or more) dierentways to highlight the same inormation on
one page.
Comments: One study ound that participants were able to complete tasks asterwhen the interace contained either color-coding or a orm o ranking, but notboth. The presence o both seemed to present too much inormation, andreduced the perormance advantage by about hal.
Sources: Bandos and Resnick, 2004; Resnick and Fares, 2004.
Example:
11:11 Highlighting Information
Strength of Evidence:
Relative Importance:
T
extAppearan
ce
Which model has the smallest trunk? Users were able to complete thefocused tasks faster when the diagram contained either color-codingor ranking, but not both. It seems that the presence of both identierspresented too much information and users had trouble indentifying theinformation they needed.