26
Text for Web Pages

Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Embed Size (px)

Citation preview

Page 1: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

Page 2: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and title writing.

Page 3: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• Words• Minimize the use of words that provides

attention to the Web.• Generally, avoid using words that are specific to

the Web. • A few Web-specific terms are “This Web site,”

“Click here,” and “Follow this link.”

Page 4: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• Error Messages• Provide helpful error messages for:• — Incomplete or incorrect entered data.• — Requests for documents that do not exist or

cannot be found.• Display a message on the page to which it

related.• Present them in a visually noticeable manner.

Page 5: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• Instructions• Do not use phrasing.• Explain where “Up” leads too.• Display them in a browser-independent manner.• Minimize “Click here” , “Select this link”

instructions.

Page 6: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages• Text• Web page text must be properly written for the medium.• A common characteristic of the best Web sites is they

contain text highly contrasting with its background. • Overall, the best combination is black text on a white

background.• Use a style reflecting the needs of the site users.• Links:• — Minimize within-text links.• — Place them at the beginning or end of paragraphs of

text.

Page 7: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• Links• Links must be:• — Descriptive.• — Differentiable.• Integrate embedded links smoothly into the text.• Make only a few words the active link.• Do not spread links over two lines.• Standalone links should not exceed one sentence

in length.

Page 8: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages

• Page Title• Title possesses meaningful keywords.• Whose first word is its most important

descriptor.• That makes sense• Different from other page titles.• Is written in mixed case using the headline style.• Do not highlight keywords.

Page 9: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Text for Web Pages• Headings and Headlines• Create meaningful headings and headlines that quickly

communicate the content of what to follows.• Make the first word an important information-carrying one.• Skip leading articles (the and a).• Create meaningful subheadings to break up large blocks of

text.• Their wording must provide a strong to the content they

relate to. • Headings should be descriptive and straightforward. • Clever, funny headlines should be avoided.• A study has found that users prefer straightforward headlines

Page 10: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback

Page 11: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback

• All user actions must be reacted to in some way. • The following feedback • Dealing with time delays.• Blinking for attention.• The use of sound.

Page 12: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback

• Providing the Proper Feedback• To be effective, feedback to the user for an

action must occur within certain time limits.• Excessive delays can be annoying, interrupt

concentration, and cause the productivity.

Page 13: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback• Dealing with Time Delays• Button click acknowledgement:• Acknowledge all button clicks by visual or aural feedback within one-tenth of

a second.• If an operation takes 10 seconds or less to complete, present a “busy” signal

until the operation is complete.• Display, for example, an animated hourglass pointer.• If an operation takes longer than 10 seconds to complete, display:• A rolling barber’s pole or other large animated object.• Additionally, a progress indicator, percent complete message, or elapsed time

message.• If an operation is very time-consuming:• Consider breaking the operation into subtasks and providing progress

indicators for each subtask.• Allow users to start a new activity while waiting.

Page 14: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback• Blinking for Attention• Attract attention by flashing an indicator when an

application is running• To provide an additional message indication, also

provide an auditory signal (one or two beeps).• Very useful if:• The window or icon is hidden.• The user’s attention is frequently directed away

from the screen.

Page 15: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Effective Feedback• Use of Sound• Always use in conjunction with a visual indication.• Use no more than six different tones.• ■ Do not use:• — Jingles or tunes.• — Loud signals.• Provide unique but similar tones for similar situations.• Provide signal frequencies between 500 and 1,000 Hz.• Allow the user to adjust the volume or turn the sound

off altogether.

Page 16: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance

Page 17: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance

• The guidance and assistance, including:• Preventing errors and problem management.• The types of guidance and assistance to provide.• Instructions or prompting.• A Help facility.• Contextual Help.• Task-oriented Help.• Reference Help.• Wizards.• Hints or tips.

Page 18: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Preventing Errors• People will make errors even using the most well designed system.• When errors occur they must be properly managed. • Errors can be classified as slips or mistakes. • A slip is automatic behavior gone awry.• One’s hands navigate the keyboard improperly and the wrong key is

accidentally pressed.• Slips can be reduced through proper application of human factors in design

(for example, by providing adequate separation between elements to be selected).

• A mistake results from forming a wrong model or goal and then acting on it. • A mistake may not be easily detected because the action may be proper for

the perceived goal—it is the goal that is wrong.• Mistakes can be reduced, however, by eliminating ambiguity from design.

Page 19: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Instructions or Prompting• Instructional or prompting information is placed within the body

of a screen. • It may take the form of messages or other advice, such as the

values to be keyed into a field.• Prompting is provided to assist a person in providing what is

necessary to complete a screen.• Inexperienced users find prompting a valuable aid in learning a

system. • Experienced users, however, often find prompting undesirable. • It slows them down, then adds “noise” to the screen, and may

reduce the amount of working information that can be displayed at one time.

Page 20: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Help Facility• The most common form of online documentation

is the Help system. • The overall objective of a Help facility is to assist

people in remembering what to do. • Its benefits include improving the usability of a

system, and accommodating user differences that may exist (novice versus expert).

• Typical methods of invoking Help include: through a typed command, by pressing a Help

Page 21: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Contextual Help• Contextual Help provides information within the context of a task

being performed, or about a specific object being operated upon. • Common kinds of contextual Help include Help command

buttons, status bar messages, and ToolTips. • Microsoft Windows has also introduced what is called the What’s

This? Command.• — To provide an overview of, summary assistance for, or

explanatory information about the purpose or contents of a window being displayed.

• ■ Design guidelines:• — Present the Help in a secondary window or dialog box.

Page 22: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Task-Oriented Help• — A primary window typically accessed through

the Help Topics browser.• — Includes a set of command buttons at the top• • A button to display the Help Topics browser

dialog box.• • A Back button to return to the previous topic.• • Buttons that provide access to other functions

such as Copy or Print.

Page 23: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Reference Help• — An online reference book.• — Typically accessed through a: • • Command in a Help drop-down menu.• • Toolbar button.• ■ Purpose:• — To present reference Help information, either:• • Reference oriented.• • User guide oriented.• ■ Design guidelines:• — Provide a consistent presentation style, following all previously presented• guidelines.• — Include a combination of contextual Help, and task-oriented Help, as necessary.• — Include text, graphics, animation, video, and audio effects, as necessary.• — Make displayed toolbar buttons contextual to the topic being viewed.

Page 24: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Wizards• — A series of presentation pages displayed in a secondary window.• — Include:• • Controls to collect input.• • Navigation command buttons.• — Typically accessed through:• • Toolbar buttons.• • Icons.• ■ Purpose:• — To perform a complex series of steps.• — To perform a task that requires making several critical decisions.• — To enter critical data and for use when the cost of errors is high.• — The necessary knowledge or experience to perform a task is lacking.• ■ Design guidelines:• — Provide a greater number of simple screens with fewer choices, rather than a smaller number

of more complex screens with too many options or too much text.• • A graphic on the left side to establish a reference point or theme.• • A welcoming paragraph on the right side to explain what the wizard

Page 25: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance• Hints or Tips• — A command button labeled Hints or Tips.• ■ Purpose:• — To provide a few important contextual, but specific,

items of information related to a displayed screen.• ■ Design guidelines:• — Provide guidance on only two or three important

points.• — Locate the button near where its guidance applies.• — Write concisely and to the point.

Page 26: Text for Web Pages. The Text provide a set of guidelines for several Web topics, including, word usage, error message presentation, text, heading, and

Guidance and Assistance