Step9 Effective Feedback, Guidance, and Assistance

Step10 Internationalization and Accessibility

|
1. Provide Effective Feedback
2. Guidance and Assistance
3. Internationalization
4. Accessibility
Effective Feedback,
Guidance, and Assistance
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

• Feedback topics are discussed :
Acceptable response times.

Dealing with time delays.

Blinking for attention.

The use of sound.

 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Response Times
• The Fact Findings :
o Waktu respons optimal tergantung pada task
o Tingkat kepuasan dari waktu respon =~ ekspektasi user
o Ketidakpuasan dengan waktu respon =~ ketidakpastian dalam delay
o Orang akan mengubah kebiasaan kerja agar sesuai dengan waktu respons
o Delay yang konstan lebih disukai daripada delay yang berubah ubah
o Waktu respons yang sangat cepat atau lambat dapat menyebabkan gejala stres
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

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
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Fun Fact

http://brandperfect.org/
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Tools for
Measurement
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

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

9
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

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.
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Dealing with Time Delays
• Waits over 1 minute:
• Sajikan perkiraan lama waktu menunggu.
• Menampilkan indikator loading, persen pesan lengkap, atau pesan waktu
berlalu.
• Long, invisible operations:
• Ketika operasi yang tidak terlihat oleh pengguna telah selesai, berikan
notifikasi bahwa itu selesai.
• Sebuah pesan atau notifikasi berupa suara.
• Progress indicator:
• Sebuah persegi panjang yang telihat kosong di awal namun terisi begitu
sebuah operasi sedang berlangsung.
• Isi bar secara dinamis.
• Isi dengan warna atau warna abu-abu.
• Isi dari kiri ke kanan atau bawah ke atas
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

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
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Blinking for Attention
• Menarik perhatian dengan memasang
indikator saat aplikasi tidak aktif tetapi harus
menampilkan pesan kepada pengguna.
• Untuk memberikan indikasi pesan tambahan,
berikan juga sinyal suara (satu atau dua bip).
• Tampilkan pesan
 Step9 Effective Feedback, Guidance, and Assistance

| Provide Effective Feedback

Use of Sound
• Selalu gunakan bersama dengan indikasi visual.
• Gunakan tidak lebih dari enam nada berbeda.
• Jangan gunakan: Jingle atau lagu atau sinyal keras.
• Gunakan nada secara konsisten.
• Berikan frekuensi sinyal antara 500 dan 1.000 Hz.
• Izinkan pengguna untuk menyesuaikan volume atau mematikan suara sama
sekali.
• Uji suara dengan pengguna selama periode uji coba yang diperpanjang.
• Gunakan suara yang tidak berlebihan
 Step9 Effective Feedback, Guidance, and Assistance

| 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”
 Step9 Effective Feedback, Guidance, and Assistance

| Guidance and Assistance

Eror karena Hasil operasi

kesalahan tidak
pengguna memenuhi
ekspektasi

17
 Step9 Effective Feedback, Guidance, and Assistance

| Guidance and Assistance

Penyebab eror Koreksi dan

difokuskan rekomendasi
terhadap salah
ketik oleh
pengguna
 Step9 Effective Feedback, Guidance, and Assistance

| Guidance and Assistance

Problem Management

• Disable inapplicable Detection

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

Prevention
Correction

19
 Step9 Effective Feedback, Guidance, and Assistance

| Guidance and Assistance

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?
Internationalization
and Accessibility
 Step10 Internationalization & Accessibility

| Internationalization
• Saat ini Internet dan pasar untuk perangkat lunak bersifat global. Mereka
melintasi batas budaya dan bahasa yang tak ada habisnya, masing-masing
dengan kebutuhan, konvensi, adat istiadat, dan definisi penerimaan sendiri.
• Pemahaman dan recall dapat ditingkatkan ketika informasi yang disajikan
sesuai dengan budaya (Spyridakis dan Fukuoka, 2002).
• Untuk membuat suatu produk dapat diterima di seluruh dunia, itu harus
diinternasionalkan. Suatu sistem juga harus dirancang agar dapat digunakan
oleh sejumlah orang yang hampir tidak terbatas, agar dapat diakses oleh siapa
saja yang ingin menggunakannya. Konsep desain yang digunakan untuk
mencapai tujuan ini disebut internasionalisasi dan aksesibilitas.
 Step10 Internationalization & Accessibility

Today’s
| Topics
Internationalization

• Localization
International • Cultural considerations
considerations • Writing text
• Using images and symbols

Accessibility • Types of disabilities

considerations • Designing for accessibility
 Step10 Internationalization & Accessibility

| Internationalization
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.
 Step10 Internationalization & Accessibility

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

| Internationalization
Images and Symbols
1. Adhere to local cultural and social norms
2. Use internationally accepted symbols
3. Develop generic images
4. 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
5. Review proposed graphical images
early in the design cycle
 Step10 Internationalization & Accessibility

| Internationalization
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
 Step10 Internationalization & Accessibility

| Internationalization
Cultural Color Associations
 Step10 Internationalization & Accessibility

| Internationalization
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
 Step10 Internationalization & Accessibility

| 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.
 Step10 Internationalization & Accessibility

| Accessibility
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.
 Step10 Internationalization & Accessibility

| Accessibility
Visual Disabilities
1. Kompatibel dengan screen-review re utilities dan screen-enlargement utilities
2. Screen components:
• Sertakan judul layar dan jendela yang bermakna.
• Berikan teks atau label terkait untuk semua kontrol, objek, ikon, dan grafik.
3. Include graphical menu choices.
• Berikan ringkasan tekstual untuk setiap grafik statistik.
• Izinkan untuk skalabilitas elemen layar.
• Mendukung pengaturan sistem untuk kontras tinggi untuk semua kontrol antarmuka
pengguna dan konten area klien.
4. Saat pengaturan kontras tinggi dibuat, sembunyikan gambar apa pun di belakang teks untuk
menjaga keterbacaan informasi layar.
5. Hindari menampilkan atau menyembunyikan informasi
berdasarkan pergerakan pointer, kecuali jika itu
bagian dari antarmuka standar (cth: ToolTips).
 Step10 Internationalization & Accessibility

| Accessibility
Visual Disabilities ..
1. Keyboard:
1) Provide a complete keyboard interface.
2) Provide a logical order of screen navigation.
2. Color:
1) Use color as an enhancing design characteristic.
2) 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
3) Use tools to verify what colors will look like
when seen by color-deficient people
 Step10 Internationalization & Accessibility

| Accessibility
Hearing Disabilities

1. Provide captions or transcripts of important audio content.

2. Provide an option to display a visual cue for all audio alerts.
3. Provide an option to adjust the volume.
4. Use audio as an enhancing design characteristic.
5. Provide a spell-check or grammar-check utility.
 Step10 Internationalization & Accessibility

| Accessibility
Physical Movement Disabilities
1. Provide voice-input systems
2. Provide a complete and simple
keyboard interface
3. Provide a simple mouse interface
4. Provide on-screen keyboards
5. Provide keyboard filters
 Step10 Internationalization & Accessibility

| Accessibility
Cognitive Disabilities
1. Mengizinkan modifikasi dan penyederhanaan
antarmuka.
2. Batasi penggunaan antarmuka berbasis waktu.
• Jangan tampilkan secara singkat feedback atau pesan
penting dan kemudian secara otomatis hilang.
• Berikan opsi untuk mengizinkan pengguna menyesuaikan
lama waktu timeout.
 Step10 Internationalization & Accessibility

Seizure
| Disorders
Accessibility
Seizure disorders
• Gunakan elemen yang tidak berkedip atau berkedip dengan kecepatan
antara rentang frekuensi 2 Hz dan 55 Hz.
• Minimalkan area layar yang sedang berkedip.
• Hindari berkedip yang memiliki tingkat kontras yang tinggi.
• Berikan opsi untuk memungkinkan pengguna memperlambat atau
menonaktifkan flashing layar.
| User Flow
| User Flow
Instruksi
1. Baca referensi berikut:
• https://medium.com/insightdesign/user-journey-dan-user-flow-apa-bedanya-6b07f9c684
• https://medium.com/insightdesign/series-proses-pembuatan-ui-bagian-3-user-flow-
a8f5938b7c15
2. Diskusikan bersama tim bagaimana user journey, dokumentasikan
3. Buat user flow dari user journey yang anda pilih
4. Dokumentasikan di logbook dengan bantuan sticky notes

Bacaan menarik lainnya : https://medium.com/insightdesign

 Contoh
Gunakan sticky notes
User Journey
User flow

1 _______________
2 _______________
3 _______________
4 _______________
-n
#6 Human Computer Interaction

Thank you