09-10.step 7 Proper Controls - Step 8 - Clear Text and Messages

Interaksi Manusia dan Komputer
(IMK)
THE USER INTERFACE

(UI)
DESIGN PROCESS
Step 9
Provide Effective
Feedback
and Guidance and
Assistance
1 2/13/2018
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
– Mampu merancang feedback, guidance, dan assistance
dengan efektif .
2 2/13/2018
Provide Effective Feedback
feedback topics are discussed :
Acceptable response times.
Dealing with time delays.
Blinking for attention.
The use of sound.
3 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Response times
The Fact Findings :
The optimum response time is dependent upon the task
Satisfaction with response time is a function of expectations
Dissatisfaction with response time is a function of one’s

uncertainty about delay
People will change work habits to conform to response time
Constant delays are preferable to variable delays
Very fast or slow response times can lead to symptoms of

stress

Web Page Download Times
Test participants rated the response times with the
following results:
– High (Good): Up to 5 seconds
– Average: From 6 to 10 seconds
– Low (Poor): Over 10 seconds
Other studies have found the following:

Longer delay times are tolerated by :
– Novice users, Older users, People not experienced with high
bandwidth connections, New visitors to a site, people performing
important tasks, People performing successful tasks, Better
content
Exceedingly slow sites can lead people to believe that

they made an error
Web Page Download Times
Guideline:
Maximum downloading time should be about 10 seconds.
– Use incremental or progressive image presentation.
Images should be
– Small
– Lean (Low bit depth, resolution, use of fewer colors, and so forth).
– Reusable.
– Contain pixel height and width dimensions in a tag.
Use thumbnail images to preview larger images.

Use simple background images

Dealing with Time Delays
Button click acknowledgement:
– Acknowledge all button clicks by visual or aural feedback within
one-tenth of a second.
Waits of up to 10 seconds:
– 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.

Waits of 10 seconds to 1 minute:
– 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.
Waits over 1 minute:
– Present an estimate of the length of the wait.
– Display a progress indicator, percent complete message, or
elapsed time message.
Long, invisible operations:

– When an operation not visible to the user is completed, present
an acknowledgement that it is completed.
 A message Or An auditory tone.
Progress indicator:
– Along rectangular bar that is initially empty but filled as the
operation proceeds.
 Dynamically fill the bar.
 Fill it with a color or shade of gray.
 Fill it from left to right or bottom to top

Percent complete message: Useful if a progress indicator takes too long to

update
Elapsed time message: A message that shows the amount of elapsed time
Web page downloads

Blinking for Attention
Attract attention by flashing an
indicator when an application is
inactive but must display a message
to the user.
To provide an additional message
indication, also provide an auditory
signal (one or two beeps).
Display the message

Use of Sound
Always use in conjunction with a visual indication.
Use no more than six different tones.
Do not use : Jingles or tunes or Loud signals.
Use tones consistently.
Provide signal frequencies between 500 and 1,000 Hz.
Allow the user to adjust the volume or turn the sound off
altogether.
Test the sounds with users over extended trial periods.
Use sounds sparingly

Guidance and Assistance
Preventing Error
automatic behavior
Slip
gone awry
Error
results from forming
a wrong model or
Mistakes
goal and then acting
on it
Everyone makes mistakes, so every mistake should be fixable

Problem Management
• Disable Detection
inapplicable
choices.
• For conversational • Preserve as much
• Use selection dialogs, validate entries
instead of entry of the user’s work
as close to point of as possible.
controls. entry as possible
• Use aided entry. • At window-level
• At character level. validation, use a
• Accept common • At control level.
misspellings, modeless dialog
whenever • When the transaction is box to display an
possible completed or the error list.
window closed. • Always give a
• Do not obscure item in person something
error. to do when an
error occurs
Prevention
Correction

Providing Guidance and Assistance
Guidance can describe in
– the form of the system’s hard copy,
– online documentation,
– computer-based training,
– instructional or prompting messages, and
– system messages,
Useful guidance and assistance answers the following

questions:
– What is this?
– What does it do?
– How do I make it do it?
– What is its role in the overall scheme of things?

Problems with Documentation
factors contribute to bad design
Time scale
Organizatio Theoretical
nal factors rationale.
Resources

How Users Interact with Documentation
three broad stages through which a reader interacts with documentation :
finding information that is relevant
understanding what the

documentation says
applying that understanding to the

current task to solve the problem

How Users Interact with Documentation
principles :
Help Facility
Instructions or Contextual
Prompting Help
Task-Oriented
Help
Reference Help Hints or Tips
Wizards

Instructions or Prompting
placed within the body of

a screen
Prompting is provided to
assist a person in
providing what is
necessary to complete a
screen
Guidelines for writing
instructions and prompts
are covered in Step 8.
Help Facility
Help Facility Guidelines
Kind:
Training:
Availability:
Structure:
Interaction:
Location:
Content:
Style:
Consistency:
Title:

Contextual Help
Provides information within the context of a task being
performed
Help Command Button
■ Description:
— A command button.
■ Purpose:
— To provide an overview of, summary assistance for, or
explanatory information about the purpose or contents of
a window being displayed.
■ Design guidelines:
–– Present Help in a secondary window or dialog box.

Contextual Help
Status Bar Message
Description:
– An abbreviated, context-sensitive message related to the
screen item with the focus.
– Appears in window’s status bar when the primary mouse
button is pressed over an item (or keyboard focus is
achieved).
Purpose:
– To provide explanatory information about the object with
the focus.

Contextual Help
ToolTip
Description:
– A small pop-up window that appears adjacent to control.
– Presented when the pointer remains over a control a short period of
time.
Purpose:
– Use to display the name of a control when the control has no text
label.
Design guidelines:
– Make application-specific ToolTips consistent with system-supplied
ToolTips.
– Use system color setting for ToolTips above to distinguish them.

Contextual Help
What’s This? Command
Description:
– A command located on the Help drop-down menu on a primary
window.
– A button on the title bar of a secondary window.
– A command on a pop-up menu for a specific object.
– A button on a toolbar.
Purpose:
– Use to provide contextual information about any screen object.
Design guidelines:
– Phrase to answer the question ―What is this?‖
– Indicate the action associated with the item.
– Begin the description with a verb.

Task-Oriented Help
Description:
A primary window typically accessed through the Help Topics browser.
Includes a set of command buttons at the top; Purpose:
To describe the procedural steps for carrying out a task.
Focuses on how to do something.
Design guidelines:
Provide one procedure to complete a task, the simplest and most common.
Provide an explanation of the task’s goals and organizational structure at the

start.
Divide procedural instructions into small steps.
Present each step in the order to be executed.

Reference Help
Description:
An online reference book.
Typically accessed through a

– Command in a Help drop-down menu.
– Toolbar button.
Purpose:
To present reference Help information, either
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,

Wizards
Description:
A series of presentation pages displayed in a secondary
window. — Include : Controls to collect input, Navigation
command buttons.
Typically accessed through
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.
To perform an infrequently accomplished task.

Hints or Tips
Description:
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

Interaksi Manusia dan Komputer
(IMK)
THE USER INTERFACE

(UI)
DESIGN PROCESS
Step 10
Internasionalization
and Accessibility
29 2/13/2018
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
– Mahasiswa/i dapat mampu menerapkan internasionalisasi
dan aksesibilitas dalam desain UI.
30 2/13/2018
Internasionalization
• Today the Internet and the market for software are global. They
cross endless cultural and language boundaries, each with its own
requirements, conventions, customs, and definitions of
acceptability.
• Comprehension and recall can be enhanced when presented

information is culturally appropriate (Spyridakis and Fukuoka,
2002).
• To make a product acceptable worldwide, it must be

internationalized. A system must also be designed to be usable
by an almost unlimited range of people, being accessible
to anyone who desires to use it. The design concepts used to
achieve these goals are called internationalization and
accessibility.

Today’s Topics
• Localization
International • Cultural considerations
considerations • Writing text
• Using images and symbols
Accessibility • Types of disabilities

considerations • Designing for accessibility

Localization
When to do it:
– When the market includes few or no English
speakers.
– When translation is required by law or by
custom.
– When the widest possible market is desired.
When not to do it:

– When the audience already reads English.
When the cost of retrofitting or rewriting

the software is prohibitive.

Cultural Considerations
Hofstede (1980, 1997, 2001) has derived and validated five
independent dimensions along which cultures vary:
1. Power distance is the degree of acceptance of inequality of power
and authority
2. Individualism (vs. collectivism) reflects how well integrated a
person is into the larger group.
3. Masculinity (vs. femininity) is the balance between
assertiveness or toughness and supportiveness or caring.
4. Uncertainty avoidance is the level of discomfort with
unstructured and potentially unpredictable conditions.
5. Long-term orientation (vs. short term) is the trade-off between
long-term reward and immediate recognition.

Indonesia
• PDI(78) a high level of inequality of power and wealth within

the society.
• UAI(48)  more moderated influence of this Dimension within
the Indonesian society. In an effort to minimize or reduce this
level of uncertainty, strict rules, laws, policies, and regulations
are adopted and implemented.
• IDV (14)  the Indonesian society is Collectivist as compared
to Individualist.

Words and Text
• Use very simple English
• Avoid
• Acronyms and abbreviations
• Slang or obscure phrasing
• Local or computer jargon
• A telegraphic/ over friendly writing style
• Culturally specific examples.
• Adhere to local user language idioms and cultural contexts
• Keep the original term for words that cannot be translated
• Allow additional screen space for the translation
• Position icon captions outside of the graphic
• Modify mnemonics for keyboard access
• Adhere to local formats for date, time, money, measurements, addresses, and telephone
numbers

Images and Symbols
• Adhere to local cultural and social norms
• Use internationally accepted symbols
• Develop generic images
• Be particularly careful with

• Religious symbols (crosses and stars)
• The human body
• Women
• Hand gestures
• Flags
• Controversial geographic maps
• The cross and check for check boxes
• Review proposed graphical images early in the design cycle

Color, Sequence, and Functionality
Adhere to local color

connotations and conventions
Provide the proper information
sequence
Provide the proper functionality
Remove all references to
features not supported

Cultural Color Associations
CSG2C3 - INTERAKSI MANUSIA DAN

39 2/13/2018
KOMPUTER
Requirements Determination and
Testing
Establish international
requirements at the beginning of
product development
Establish a relationship within the
target culture
Test the product as if it were new

Accessibility
• Accessibility means a system must be usable by an almost unlimited
range of people
• Design objectives in creating accessibility for users with disabilities are:

• Minimize all barriers that make a system difficult, or impossible, to use.
• Provide compatibility with installed accessibility utilities.
• Types of disabilities:
• Visual  reduced visual acuity to total blindness.
• Hearing  inability to detect certain sounds to total deafness.
• Physical movement  difficulties in, or an inability to, perform certain physical
tasks such as moving a mouse, or accurately striking a single keyboard key.
• Speech or language  difficult to read and write
• Cognitive  memory impairments and perceptual problems.
• Seizure disorders  sensitive to visual flash rates, certain rates triggering
seizures.

Accessibility Design
• Consider accessibility issues during system planning, design, and testing.
• Provide compatibility with installed accessibility utilities.
• Provide a customizable interface.
• Follow standard Windows conventions.
• Use standard Windows controls.
• Assure online forms can be easily completed.

Visual Disabilities
• Ensure compatibility with screen-review utilities and screen-enlargement utilities
• Screen components:
• Include meaningful screen and window titles.
• Provide associated captions or labels for all controls, objects, icons, and graphics.
• Include graphical menu choices.

• Provide a textual summary for each statistical graphic.
• Allow for screen element scalability.
• Support system settings for high contrast for all user interface controls and client area
content.
• When a high contrast setting is established, hide any images drawn behind the text to
maintain screen information legibility.
• Avoid displaying or hiding information based on the movement of the pointer. Exception:
Unless it’s part of the standard interface (example: ToolTips).

Visual Disabilities ..
• Keyboard:
• Provide a complete keyboard interface.
• Provide a logical order of screen navigation.
• Color:
• Use color as an enhancing design characteristic.
• If used, considers
• color combinations
• lightness contrast between foreground and background color
• lightness contrast between colors in the color spectrum (blues and
reds)
• Avoid combining dark colors from the middle of the spectrum with light
colors from either end of the spectrum
• Do not define specific colors
• Use tools to verify what colors will look like when seen by color-deficient
people

Hearing Disabilities
Provide captions or transcripts of important audio

content.
Provide an option to display a visual cue for all

audio alerts.
Provide an option to adjust the volume.
Use audio as an enhancing design characteristic.
Provide a spell-check or grammar-check utility.

Physical Movement Disabilities
Provide voice-input systems
Provide a complete and simple

keyboard interface
Provide a simple mouse interface
Provide on-screen keyboards
Provide keyboard filters

Cognitive Disabilities
Permit modification and simplification
of the interface.
Limit the use of time-based
interfaces.
– Do not briefly display critical feedback or
messages and then automatically remove
them.
– Provide an option to permit the user to
adjust the length of the time-out.

Use elements that do not blink or flicker at rates
Seizure Disorders
between frequency ranges of 2 Hz and 55 Hz.
Minimize the area of the screen that is flashing.
Avoid flashing that has a high level of contrast

between states.
Provide an option to enable users to slow down or

disable screen flashing.

Web Page Accessibility Design
• WWW Consortium Accessibility Guidelines:
1. Provide equivalent alternatives to auditory or visual content
2. Don’t rely on color alone. Image should be understandable
3. Use markup and style sheets and do so properly
4. Clarify natural language usage
5. Create tables that transform gracefully
6. Pages featuring new technologies transform gracefully
7. Ensure user control of time-sensitive content changes
8. Ensure direct accessibility of principles of embedded interfaces
9. Design for device-independence
10. Use interim solutions
11. Use W3C technologies and follow accessibility guidelines
12. Provide context and orientation information
13. Provide clear navigation mechanisms
14. Ensure that documents are clear and simple

Usability for Lower-Literacy People
Prioritize information
Avoid moving or changing text
Streamline the page design
Simplify navigation
Optimize search

Usability for Senior Citizens
• Provide large targets to make • Provide differentiation between
selection easier visited and non-visited links.
• To reduce the number of • Use few colors, and avoid using
selections or clicks, blue and green tones.
• Do not require double-clicks or
pull-down menus • For text to be read or scanned,
use
• Do not have a deep page
hierarchy. • 12 to 14 point sans serif font
(Helvetica, Arial).
• Concentrate important • Black text on a white
information at the top of background, left justification.
pages. • Increased spacing (leading)
between lines.
• Avoid the need to scroll to find
• Sentence style mixed-case letters
information. rather than all capital letters.
• Put most links in a bulleted, • Appropriate large headings in a
14 to 16 point sans serif font.
not tightly clustered, list.
Documentation
Provide documentation on all accessible
features
Provide documentation in alternate

formats
Provide online documentation for people

who have difficulty reading or handling
printed material
Testing
Test all aspects of accessibility as part of the
normal system testing process

09-10.step 7 Proper Controls - Step 8 - Clear Text and Messages

Uploaded by

Copyright:

Available Formats

09-10.step 7 Proper Controls - Step 8 - Clear Text and Messages

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

09-10.step 7 Proper Controls - Step 8 - Clear Text and Messages

Uploaded by

Copyright:

Available Formats

Interaksi Manusia dan Komputer

THE USER INTERFACE

Acceptable response times.

Dealing with time delays.

Blinking for attention.

The use of sound.

3 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Satisfaction with response time is a function of expectations

Dissatisfaction with response time is a function of one’s

People will change work habits to conform to response time

Constant delays are preferable to variable delays

Very fast or slow response times can lead to symptoms of

4 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Other studies have found the following:

Exceedingly slow sites can lead people to believe that

Use thumbnail images to preview larger images.

6 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Display, for example, an animated hourglass pointer.

Long, invisible operations:

8 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Percent complete message: Useful if a progress indicator takes too long to

Web page downloads

9 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

10 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Use no more than six different tones.

Do not use : Jingles or tunes or Loud signals.

Use tones consistently.

Provide signal frequencies between 500 and 1,000 Hz.

Test the sounds with users over extended trial periods.

Use sounds sparingly

11 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Everyone makes mistakes, so every mistake should be fixable

12 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

13 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Useful guidance and assistance answers the following

14 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

15 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

three broad stages through which a reader interacts with documentation :

finding information that is relevant

understanding what the

applying that understanding to the

16 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

Reference Help Hints or Tips

17 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

placed within the body of

19 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

20 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

21 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

22 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

23 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

A primary window typically accessed through the Help Topics browser.

Includes a set of command buttons at the top; Purpose:

To describe the procedural steps for carrying out a task.

Focuses on how to do something.

Provide an explanation of the task’s goals and organizational structure at the

Divide procedural instructions into small steps.

Present each step in the order to be executed.

24 2/13/2018 CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER