Interaksi Manusia dan Komputer

(IMK)
Tim Dosen IMK

KK SIDE
THE USER INTERFACE (UI)
DESIGN PROCESS
Step - 8
Clear Text and Messages

Step - 9
Provide Effective Feedback
and Guidance and Assistance

1 11/30/2021
 Interaksi Manusia dan Komputer
(IMK)
Tim Dosen IMK

KK SIDE
THE USER INTERFACE (UI)
DESIGN PROCESS
Step - 8
Clear Text and Messages

2 11/30/2021
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
 Mahasiswa/i mampu merancang teks dan pesan yang tepat
dan sesuai dengan prinsip UI

3 11/30/2021
Outline (Step 8)
Panduan dalam penulisan teks dan pesan
 General :
– The concept of readability.
– Choosing the proper words.
– Writing sentences and messages.
– Kinds of messages.
– Presenting and writing text.
– Window title, conventions, and sequence control guidance

 Web Spesific Guidelines :

– Presenting and writing page text.
– Writing links and headings.
– Writing instructions and error messages

4 11/30/2021
Outline (Step 8)
Contoh penulisan teks
Feedback
Guidance & Assitance
Contoh kasus feedback
Contoh kasus Guidance dan Assistance

5 11/30/2021
Outline (Step 9)
Feedback
Guidance & Assistance
Contoh kasus Feedback
Contoh kasus Guidance & Assistance

6 11/30/2021
 Panduan dalam penulisan teks dan
pesan

7 11/30/2021
Readability
The degree to which prose can be understood, based upon the complexity
of its words and sentences

Some formula to measure readability :

– the Automated Readability Index
– the Gunning-Fog Index and
– the Dale-Chall-Flesch Reading Ease
– Flesch-Kincaid Grade Level

Most reading formulas include only two factors:

– The number of syllables or (letters) in a word
– The number of words in a sentence
8 11/30/202
1
Factors Influence Readability

word
word length sentence length
commonality

Information
number of
organization,
syllables in a
layout and
sentence
formatting

9 11/30/202
1
Readability Guidelines

Write at a readability level below

the reading skill level of the
intended audience.

Apply all the other principles for

clear writing and text presentation

10 11/30/202
1
 Choosing The Proper Words
• Jargon, words, or terms
Do not • Abbreviations or acronyms

use • Word contractions, suffixes, and

prefixes

• Short, familiar words.

• Standard alphabetic characters.
• Complete words.
• Positive terms.
• Simple action words; avoid noun
Use strings.
• The “more” dimension when
comparing.
• Consistent words
• Punctuation for abbreviations,
mnemonics, and acronyms

Do Not
• Stack Words
• Hyphenate words

11 11/30/202
1
Some Words to Forget

12 11/30/202
1
Writing Sentences & Messages
Sentences and messages must be
– Brief and simple.
– Limited to no more than twenty words per sentence.
– Limited to no more than six sentences per paragraph.
– Written at an eighth grade level or less for the general population.
– Directly and immediately usable.
– An affirmative statement.
– In an active voice.
– In the temporal sequence of events
– Structured so that the main topic is near the beginning
– Of parallel construction

13 11/30/202
1
 Writing Sentences & Messages
Sentences and messages must be of the proper
tone:
– Non authoritarian
– Non threatening
– Non anthropomorphic
– Non patronizing
– Non punishing
– Cautious in the use of humor.

14 11/30/202
1
Kinds of Messages
Messages are communications provided
on the screen to the screen viewer

Screen messages categories:

– System Messages
 generated by the system to keep the user
informed of the system’s state and activities
 They are customarily presented within message
boxes
– Instructional Messages
 Sometimes referred to as prompting messages
 Messages that tell the user how to work with, or
complete, the screen displayed
 They may be provided in messages boxes and also
within the screen itself.

15 11/30/202
1
System Messages Types
Status—Provides information concerning the progress of a lengthy operation

Informational—Provides information about the state of the system when it is

not immediately obvious

Warning—Calls attention to a situation that may be undesirable

Critical—Calls attention to conditions that require a user action before the

system can proceed

Question—Asks a question and offers options

16 11/30/202
1
System Messages Example
 Status  Informational

 Question
 Warning

 Critical
17 11/30/2021
Writing Message Box Text
Title bar:
– Clearly identify the source of the message
 The name of the object to which it refers
 The name of the application to which it refers.
– Do not include an indication of message type.
– Use mixed case in the headline style.

Message box:
– Provide a clear and concise description of the condition causing the
message box to be displayed
 Use complete sentences with ending punctuation
 State the problem, its probable cause (if known), and what the user can
do about it
 Avoid contractions & technical jargon

18 11/30/202
1
Writing Message Box Text
 Provide only as much background information as necessary
for the message to be understood
 Show only one message box about the cause of condition in a
single message
 Make the solution an option offered in the message
 Avoid multistep solutions
 Use consistent words and phrasing for similar situations
 Use the word please conservatively
– Do not exceed two or three lines
– Include the relevant icon identifying the type of message
to the left of the text
– Center the message text in window

19 11/30/202
1
Message Box Controls
Command buttons:
– If a message requires no choices to be made but only
acknowledgment
 Include an OK button
– If a message requires a choice to be made, provide a
command button for each option
 Include OK and Cancel buttons only when the user has the
option of continuing or stopping the action
 Include Yes and No buttons when the user must decide how
to continue
 If these choices are too ambiguous, label the command
buttons with the names of specific actions

20 11/30/202
1
Message Box Controls (cont'd)
– If a message allows initiation of an action to correct the
situation described,
 Include a properly labeled button initiating the corrective action
– If a message describes an interrupted process whose state
cannot be restored,
 Provide a Stop button.
– If a message offers an opportunity to cancel a process as
well as to perform or not perform an action
 Provide a Cancel button
– If more details about a message topic must be presented
 Provide a Help button

21 11/30/202
1
Message Box Controls (cont'd)
– Designate the most frequent or least destructive option as
the default
– Display a message box only when the window of an
application is active
– Display only one message box for a specific condition

Close box:
– Enable the title bar Close box only if the message includes
a Cancel button.

22 11/30/202
1
Message Location
 Use the message line for messages that must not
interfere with screen information
 Pop-up windows may be used for all kinds of
messages, if available
 Pop-up windows should always be used for critical
messages.

23 11/30/202
1
Instructional Messages
Provide instructional information at the depth of detail
needed by the user

Locate it at strategic positions on the screen

Display it in a manner that visually differentiates it from

other screen elements

In writing, follow all relevant writing guidelines for words,

sentences, and messages

24 11/30/202
1
 Presenting Text
Display prose text in mixed upper- and lower-case letters.

Fonts:
– Use plain and simple fonts
– Choose a minimum point size of 12 to 14.
– Use proportional fonts

Justification:
– Left-justify
– Do not right-justify
– Do not hyphenate words

Line Length:
– If fast reading is required, use line lengths of about 75-100 characters

25 11/30/202
1
Presenting Text (Cont'd)
 If user preference is important, a length of about 50-60 characters is
acceptable
 Very narrow columns should be avoided

Line endings:
– Coincide with grammatical boundaries

Line spacing:
– Increase line spacing to enhance legibility and readability

Content:
– Use headings to introduce a new topic
– Make first sentences descriptive Separate paragraphs by at least one blank
line
– Start a fresh topic on a new page
– Use lists to present facts
26 11/30/202
1
Presenting Text (Cont'd)
– Emphasize important things by
 Positioning
 Boxes
 Bold typefaces
 Indented margins
– Provide a screen design philosophy consistent with other
parts of the system

27 11/30/202
1
Writing Text
• Use short sentences
• Cut the number of sentences
• Use separate sentences for
Sentences and separate ideas
paragraphs • Keep the paragraphs short
• Restrict a paragraph to only one
idea

• Use the active writing style

• Use the personal writing style
• Write as you talk
Style •
•
Use subjective opinion
Use specific examples
• Read it out loud

28 11/30/202
1
 Window title, Conventions, & Sequence
Control Guidance

Window Title
– All windows must have a title located in a centered
position at the top
 Exception: Windows containing messages
– Clearly and concisely describe the purpose of the window
– Spell it out fully using an uppercase or mixed-case font.
– If title truncation is necessary, truncate it from right to
left.
– If presented above a menu bar, display it with a
background that contrasts with the bar

29 11/30/202
1
Window title, Conventions, & Sequence Control Guidance

Conventions
Establish conventions for referring to
 Individual keyboard keys
 Keys to be pressed at the same time
 Field captions
 Names supplied by users or defined by the
system.
 Commands and actions

30 11/30/202
1
Window title, Conventions, & Sequence Control Guidance

Sequence Control Guidance

– Consider providing a guidance message telling how to
continue at points in the dialog when
 A decision must be made
 A response needs to be made to continue
– Consider indicating what control options exist at points in
the dialog where several alternatives may be available
– Permit these prompts to be turned on or off by the user

31 11/30/202
1
Presenting & Writing Page Text
The most important part of a Web site is its content, a well-
written site is a necessity

Poorly written content has been found to increase user

confusion, increase comprehension errors, increase reading
times, and reduce user satisfaction

Content re-written properly for presentation on a Web site

has been found to reduce the time to perform a task by 80
percent, improve one’s memory of the content by 100
percent, and increase user satisfaction by 37 percent
(Morkes and Nielsen, 1998)

32 11/30/2021
Words & Presentation of Page Text

Words
• Minimize the use of words that call
attention to the Web

Presentation
• Provide text that contrasts highly with
the background

33 11/30/202
1
Writing Page Text
Style:
– Use a style reflecting the needs of the site users
– Write objectively
– Use the inverted pyramid organization
– Be concise, using only about half the number of words of
conventional text
– Each paragraph should
 Be short
 Contain only one main idea

Links:
– Minimize within-text links
– Place them at the beginning or end of paragraphs or sections of text

34 11/30/202
1
Writing Page Text
Scanning:
– Make text scannable by using
 Bulleted listings
 Tables
 Headings and subheadings
 Highlighted and emphasized important issues
 Short paragraphs

International audience:
– Consider internationalization needs

Testing:
– Test for legibility and readability
35 11/30/202
1
Writing Link Labels
Create meaningful labels that use the following:
– Descriptive, differentiable, predictive, and active wording
– Keywords positioned at the beginning
– Content that is concise but long enough to be understood
– Wording that clearly indicates link destination or resulting action
– Link names that match with their destination page

Integrate embedded links smoothly into the text

Ensure that embedded links are descriptive
– Make only a few words the active link
– Do not spread links over two lines

Standalone links should not exceed one sentence in length

Provide glosses or link labels to assist link understanding

36 11/30/2021
Link Titles
Provide link titles that describe
– The name of site the link will lead to (if different from current site).
– The name of subsection the link will lead to (if staying within
current site).
– The kind of information to be found at the destination.
– How the linked information relates to the anchor link and the
current page content.
– How large the linked information is.
– Warnings about possible problems to be encountered at the other
end.

Restrict titles to no more than 60 characters.

37 11/30/202
1
Page Title
Provide a page title
– That possesses meaningful keywords
– Whose first word is its most important descriptor
– That makes sense when viewed completely out of context
– That is different from other page titles
– That is written in mixed case using the headline style

Do not highlight keywords

38 11/30/202
1
Headings and Headlines
Create meaningful headings and headlines that
quickly communicate the content of what 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

39 11/30/202
1
Instructions
Do not use phrasing that indicates a certain page order or
flow
Explain where “Up” leads too
Phrase in a browser-independent manner
Minimize “Click here” instructions
– Say “Select this link”

40 11/30/202
1
Error Messages
Provide helpful and precise error messages for
– Incomplete or incorrectly keyed, entered, or selected data
– Requests for documents that do not exist or cannot be found

Redisplay a message on the page to which it relates

Present them in a visually distinctive and noticeable manner

41 11/30/2021
 Contoh kasus penulisan teks

42 11/30/2021
Instructional Messages

43 11/30/2021
System Messages Example
 Status  Informational

 Question
 Warning

 Critical
44 11/30/2021
Error Messages

45 11/30/2021
Activities
Any text/messages/instructional/title/ etc… on
your Project?
Review and revised your project based on the
“Step 8” guideline!

46 11/30/2021
 Interaksi Manusia dan Komputer
(IMK)
Tim Dosen IMK

KK SIDE
THE USER INTERFACE (UI)
DESIGN PROCESS
Step - 9
Provide Effective Feedback
and Guidance and Assistance

47 11/30/2021
Tujuan
Setelah mengikuti materi ini mahasiswa dapat:
Mampu merancang feedback, guidance, dan
assistance dengan efektif .

48 11/30/2021
Provide Effective Feedback
feedback topics are discussed :

Acceptable response times.

Dealing with time delays.

Blinking for attention.

The use of sound.

49 11/30/202
1
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

50 11/30/202
1
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

51 11/30/202
1
Fun Fact

http://brandperfect.org/

52 11/30/202
1
Tools for
Measurement

53 11/30/202
1
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

54 11/30/202
1
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.

55 11/30/202
1
Dealing with Time Delays
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

56 11/30/202
1
Dealing with Time Delays

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

57 11/30/202
1
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

58 11/30/202
1
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

59 11/30/202
1
 Contoh studi kasus feedback

60 11/30/2021
61 11/30/202
1
 Guidance and Assistance

62 11/30/2021
 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

63 11/30/202
1
 Penyebab Koreksi dan
eror rekomendasi
difokuskan terhadap salah
ketik oleh
pengguna

64 11/30/202
1
Problem Management

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

65 11/30/202
1
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?

66 11/30/202
1
Problems with Documentation
factors contribute to bad design

Time scale

Organizationa Theoretical
l factors rationale.

Resources

67 11/30/202
1
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

68 11/30/202
1
How Users Interact with Documentation

principles :
Help Facility

Instructions or
Contextual Help
Prompting

Task-Oriented
Help

Reference Help Hints or Tips

Wizards

69 11/30/202
1
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.
70 11/30/202
1
Help Facility
Help Facility Guidelines
Kind:
Training:
Availability:
Structure:
Interaction:
Location:
Content:
Style:
Consistency:
Title:
71 11/30/202
1
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.
72 11/30/202
1
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.

73 11/30/202
1
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.

74 11/30/202
1
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.

75 11/30/202
1
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.
76 11/30/202
1
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,
77 11/30/202
1
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.

78 11/30/202
1
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

79 11/30/202
1
80 11/30/202
1
 Contoh studi kasus Guidances &
Assistance

81 11/30/2021
 Eror Hasil
karena operasi
kesalahan tidak
pengguna memenuhi
ekspektasi

82 11/30/202
1
Activity
Review carefully you project,
Is there any feedback, guidance and assistance?

83 11/30/202
1
Project Progress Presentation 1
Prepare Your Paper prototype
Prepare Your storyboard
Prepare You Report
See U in Presentation 

84 11/30/202
1
 THANK YOU
85 11/30/2021