Balancing Function and Fashion (Human Computer Interaction)

Error Messages

Informasi yang ditampilkan ketika kondisi yang tak terduga terjadi.Mengungkapkan pesan atau peringatan error merupakan hal yang penting, terutama ketika pesan tersebut berhadapan dengan pemula

Kenapa "Error Messages" harus dibuat?

• Membuat pesan error jelas terlihat
• Mengurangi pekerjaan yang diperlukan untuk mengatasi masalah
• Mendidik pengguna sepanjang penggunaan

  Guidelines Error Message :

1. Explicit -> Harus eksis atau ada
2. Human-readable -> disampaikan dengan yang bisa dibaca orang-orang daripada tulisan "error type 2 has occured"
3. Polite -> kata yang tidak menyalahkan user seperti kata-kata yang mengatakan mereka bodoh
4. Precise -> deskripsi masalah dengan tepat bukan dengan pesan yang tidak jelas "syntax error" yang tidak tahu kode berapa
5. Constructive advice -> error messages menampilkan cara masalah diselesaikan daripada hanya pesan "out of stock"

Yang harus dihindarkan dalam pembuatan pesan error :

• Nada angkuh yang seperti mengutuk user
• Pesan yang terlalu generik (WHAT? atau SYNTAX ERROR)
• Pesan yang terlalu tidak jelas (FAC RJCT 044040404)

 

Non Anthropomorphic Design

• Penting untuk mengklarifikasi perbedaan antara manusia dengan komputer
• anthropomorphic interface dapat mengakibatkan keresahan dan penurunan performa
• anthropomorphic interface dapat mengalihkan perhatian pengguna

Panduan penggunaan non-anthropomorphic design

• Jangan menggunakan kata 'saya' saat komputer merespon aksi dari user. Gunakan kata 'kamu' untuk menuntun user atau hanya tampilkan fakta.
• Salah : saya akan memulai kursus saat kamu menekan tombol START
• Benar : Kamu bisa memulai kursus dengan menekan tombol START
• Benar : Untuk memulai kursus, tekan tombol START

• Berhati-hati dalam merepresentasikan komputer sebagai manusia

 

 

Web Design

10 Kesalahan dalam mendesain web

1. Fitur search yang buruk
2. File PDF untuk membaca online
3. Tidak megubah warna text link sebagai tanda link pernah dikunjungi
4. Text tidak scannable
5. Ukuran font yang tidak dapat diubah
6. Judul halaman yang sulit dicari dengan fitur search
7. Apapun yang tampak seperti iklan
8. Melanggar konvensi desain
9. Membuka window yang baru pada browser
10. Tidak menjawab pertanyaan user

 

 

Display Design

Hal-hal yang perlu diperhatikan dalam mendesain sebuah tampilan menurut Mullet dan Sano :

•  Elegance and Simplicity
• Scale, Contrast and Proportion
• Organization and Visual Structure
• Module and Program
• Image and Representation
• Style

Hal lainnya 

• Tampilan terstruktur lebih baik dibandingkan tampilan naratif 
• Penggunaan label, pengelompokan informasi, penggunaan indentasi, numering dan mengeliminasi karakter yang tidak diperlukan dapat meningkatkan kinerja. 
• Tampilan yang padat dan sederhana meningkatkan kinerja expert user. 
• Konten halaman hanya berisi hal-hal yang relevan.
• Lokasi, struktur, terminologi, dan urutan tampilan dalam sistem harus konsisten.
  
  
  
  

 

Window Design

Coordinating Multiple Windows

Designer dapat memasuki generasi baru dalam pengaturan window dengan mengembangkan window yang saling berkoordinasi dengan user, dimana window tersebut berubah berdasarkan pada tindakan yang dilakukan user.

Koordinasi yang penting : 

• Synchronized scrolling
• Hierarchial browsing
• Opening/closing of dependent window
• Saving/opening of window state

Image Browsing

Desain browser gambar harus diatur dengan tugas dari user, dimana dapat diklasifikasikan sebagai berikut :

• Image generation
• Open-ended exploration
• Diagnostics
• Navigation
• Monitoring

Personal Role Management

Design yang berpusat pada peran menekankan pada tugas user dibandingkan aplikasi dan dokumen.

Hal-hal yang penting dalam personal role management:

- Vision statement

- Set of people

- Task hierarchy

- Schedule

- Set of documents

Requirement untuk personal role management meliputi:

- Dukungan pada unified framework

- Dukungan pada visual dan spatial layout yang mendukung pekerjaan user

- Dukungan pada multi window

- Dukungan pada akses informasi yang mudah

- Dukungan untuk berganti role secara mudah

Color

Warna menarik bagi pemakai dan dapat meningkatkan kinerja, namun dapat disalah gunakan

Manfaat Warna

 

• Menyejukkan atau merangsang mata
• Memberi aksen pada tampilan yang tidak menarik
• Memungkinkan pembedaan yang halus pada tampilan yang kompleks
• Menekankan organisasi logis informasi
• Menarik perhatian kepada peringatan
• Menimbulkan reaksi emosional yang kuat berupa sukacita, kegembiraan, ketakutan, atau kemarahan

Bahaya dalam penggunaan warna

• Pemasangan warna dapat membuat masalah

• Fidelitas warna dapat menurun pada hardware yang berbeda

• Pencetakan atau konversi ke media lain dapat bermasalah

Warna - Guidelines
 

1. Gunakan warna secara konservatif

2. Batasi jumlah warna yang digunakan

3. Kenali kekuatan warna sebagai teknik pengkodean untuk mempercepat atau memperlambat tugas

4. Pastikan bahwa color coding mendukung tugas

5. Tampilkan color coding dengan usaha pemakai yang minimal

6. Tempatkan color coding di bawah kendali pemakai

7. Rancang untuk monokrom dulu

8. Pikirkan kebutuhan user yang memiliki color-deficiency

9. Gunakan warna untuk membantu pemformatan

10. Gunakan color coding yang konsisten

11. Perhatikan ekspektasi umum tentang kode warna

12. Hati - hati terhadap pencampuran warna

13. Gunakan perubahan warna untuk menunjukkan perubahan status

14. Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi