IMK: Perancangan Tampilan

 

Salah satu kriteria dari antarmuka yang baik adalah tampilannya yang menarik dan mudah dipahami oleh pengguna. Seorang perancang tampilan haruslah memiliki jiwa seni yang memadai dan mengerti selera pengguna secara umum agar dapat menciptakan tampilan yang menarik.

Bagi perancang antarmuka,hal yang sangat penting untuk ia perhatikan adalah bahwa ia sebaiknya mendokumentasikan semua pekerjaan yang ia lakukan. Dengan dokumentasi yang baik, ia dapat mengubah rancangannya apabila menurut ia terdapat rancangan yang tidak mudah diimplementasikan atau rancangan tersebut mengalami perubahan disesuaikan dengan usulan dari pengguna atau karena alasan lain.

A.    Dokumentasi Rancangan

Dokumentasi rancangan dapat dilakukan dengan beberapa cara:

1)     Membuat sketsa pada kertas

2)     Menggunakan menuliskan piranti prototype GUI

3)     Menuliskan textual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain

4)     Menggunakan piranti bantu yang disebut CASE (Computer Aided Software Engineering)

B.    Cara Pendekatan

1)     Program aplikasi untuk keperluan khusus

Cara pendekatan yang dilakukan untuk program ini adalah dengan user-centered design approach, yaitu perancangan antarmuka yang melibatkan pengguna.  Pelibatan pengguna disini tidak diartikan bahwa pengguna harus ikut memikirkan bagaimana implementasinya nanti, tetapi pengguna diajak untuk aktif berpendapat ketika perancang antarmuka sedang menggambar “wajah” antarmuka. Dengan kata lain, perancang dan pengguna duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan pengguna. Pengguna menyampaikan keinginannya, sementara perancang menggambar keinginan pengguna tersebut sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diingnkan oleh pengguna, serta kerumitan implementasinya. Dengan cara seperti ini, pengguna seolah-olah sudah mempunyai gambaran nyata tentang antarmuka yang nanti akan mereka gunakan.

Contoh program: aplikasi untuk inventory Gudang, pengelola data akademis mahasiswa, pelayanan reservasi hotel, dan program-program yang serupa.

2)     Program aplikasi untuk banyak pengguna

Kunci penting dalam pembuatan antarmuka untuk banyak pengguna ini adalah dengan melakukan customization, sehingga pengguna dapat menggunakan program aplikasi yang memiliki tampilan sesuai dengan keinginan masing-masing.

Contoh program: Microsoft windows 94

 

C.    Prinsip Perancangan

Deborah J. Mayhew dengan General Principles of UI Design menjelaskan tentang 17 prinsip yang harus dipahami para perancang system, yaitu:

1.     User compatibility

Kesesuaian tampilan dengan tipikal user.

2.     Product compatibility

Produk yang dihasilkan sesuai.

3.     Task compatibility

Fungsional dari task/tugas yang sesuai dengan tampilannya.

4.     Workflow compatibility

User interface mempermudah alur kerja pengguna.

5.     Consistency

Menu save untuk menyimpan hasil pekerjaan.

6.     Familiarity

Icon yang faimiliar, seperti icon tempat sampah untuk menghapus.

7.     Simplicity

Kompleksitas.

8.     Direct manipulation

Manipulasi langsung.

9.     Control

Control penuh pada user dengan sebaik mungkin dan jangan sampai merusak system.

10.  WYSIWYG

What You See Is What You Get, membuat tampilan yang mirip seperti kehidupan nyata user.

11.  Flexibility

UI tidak hanya menggunakan keyboard dan mouse, melainkan bisa touch screen.

12.  Responsiveness

Respon pada tampilan.

13.  Invisible technology

Tampilkan fungsionalitas, sembunyikan teknologi.

14.  Robustness

Bisa mengakomodir kesalahan user.

15.  Protection

Melindungi user dari kesalahan yang umum dilakukan.

16.  Ease of learning

Mudah dipelajari.

17.  Ease of use

Mudah digunakan.

D.    Tahapan Perancangan

IBM Common User Access (CUA) interface design guide adalah yang pertama kali mendeskripsikan proses perancangan antarmuka secara iterative:

1.     Mengumpulkan atau menganalisa informasi pengguna

Sebelum merancang antarmuka kita harus masalah apa yang ingin pengguna selesaikan dan bagaimana mereka melakukan pekerjaan.

·       Menentukan profil pengguna

·       Melakukan analisa terhadap task-task pengguna

·       Mengumpulkan kebutuhan-kebutuhan pengguna

·       Menganalisa user environment

·       Mencocokan kebutuhan tersebut dengan task

2.     Merancang antarmuka

·       Menjelaskan kegunaan dan tujuan

·       Menetapkan icon objek, views, dan representasi visual

·       Merancang objek dan jendela menu

·       Memperbaiki rancangan visual

3.     Mengembangkan antarmuka

Tujuan dalam membuat prototype adalah untuk mempercepat dan mempermudah dalam memvisualisasikan desain alternatif dan konsep, bukan untuk membangun kode yang akan digunakan sebagai bagian dari produk.

4.     Melakukan validasi terhadap antarmuka

Evaluasi kegunaan adalah bagian penting dari proses pengembangan untuk mengetahui tanggapan pengguna dan memperbaiki kekurangan pada antarmuka yang dibuat.

·       Buat pengguna menguasai antarmuka

·       Kurangi user’s memory load

·       Buat antarmuka yang konsisten

E.     Perancangan Tampilan Berbasis Grafis

Faktor-faktor yang perlu diperhatikan:

1.     Ilusi pada objek-2 yang dapat dimanipulasi

·       Gunakan kumpulan objek yang ada

·       Yakinkan pengguna objek

·       Gunakan mekanisme yang konsisten untuk memanipulasi objek yang akan muncul di layar

2.     Urutan visual & focus pengguna

·       Membuat suatu objek berkedip (posisi kursor)

·       Menggunakan warna untuk objek-2 tertentu (suatu pilihan)

·       Menyajikan suatu animasi yang akan lebih menarik

3.     Structural internal

Reveal code: suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan karakter dari suatu tampilan.

4.     Kosakata grafis yang konsisten dan sesuai

Penggunaan simbol-simbol/icon-icon tertentu

5.     Kesesuaian dengan media

Rancangan tampilan disesuaikan dengan kemampuan dari software dan hardware yang ada.

 

 

 

 

Referensi:

Hardiani, Tikaridha.2022. Perancangan Tampilan. Modul Teori Interaksi Manusia dan Komputer. Yogyakarta. Universitas‘Aisyiyah Yogyakarta.

PERANCANGAN TAMPILAN: Prinsip Perancangan, Komponen Antarmuka, Tahapan Perancangan Antarmuka. Diakses dari: M.Noor T.M. Blog: PERANCANGAN TAMPILAN : Prinsip Perancangan, Komponen Antarmuka, Tahapan Perancangan Antarmuka (mnoortm.blogspot.com)

PERANCANGAN TAMPILAN (INTERAKSI MANUSIA DAN KOMPUTER). Diakses dari: Pelajaran dan Permainan: PERANCANGAN TAMPILAN (INTERAKSI MANUSIA DAN KOMPUTER) (arif-imk.blogspot.com)