Perancangan Tampilan

Pengertian Perancangan Tampilan yaitu salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. Desainer tampilan selain harus mempunyai jiwa seni yang memadai, tapi juga harus mengerti selera pengguna secara umum. 

Hal ini yang perlu disadari oleh seorang perancang tampilan adalah bahwa ia harus bisa meyakinkan proframmer, bahwa apa yang ia bayangkan dapat diwujudkan (diimplementasikan) dengan piranti bantu(tools) yang tersedia.

Jenis Dokumentasi Rancangan Tampilan

Dokumentasi rancangan dapat dikerjakan  atau dilakukan dalam beberapa cara, yaitu:
  1. Membuat sketsa pada kertas
  2. Menggunakan peranti prototype GUI
  3. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain.
  4. Menggunakan peranti bantu yang disebut CASE (Computer-Aided Software Engineering).

Kategori program aplikasi dan pendekatan yang dilakukan

1. Program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software). Biasanya aplikasi ini diperuntukan untuk kebutuhan tertentu, seperti inventori gudang, pengolahan data akademik, reservasi hotel dan lain sebagainya.  Untuk aplikasi ini   ada dua pendekatan yang dilakukan, yaitu:
  • Pendekatan secara user-centered design 
  • Pendekatan user design approach

2. Program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software). Salah satu  kunci penting dalam pembuatan modul antarmuka untuk program-program  aplikasi ini adalah dengan melakukan customization, sehingga pengguna dapat menggunakan program aplikasi dengan wajah antarmuka yang sesuai dengan selera masing-masing pengguna.

Prinsip-Prinsip Perancangan

Prinsip 1 :  Kenali Perbedaan? Dalam hal ini perbedaan berdasarkan jenis-jenis pemakai

1. Novice (first time user) 
Biasanya pemakai belum memiliki konsep tugas dan antar muka dangkal sehingga perancang harus membatasi jumlah pilihan, membuat umpan balik yang inovatif dan membuat manual dan tutorial online yang efektif.

2. Knowledgeable Intermittent users 
Pemakai sudah memiliki konsep tugas yang stabil dan konsep antarmuka luas namun sulit mengingat sintaktik, sehingga perancang dapat membuat struktur menu yang rapi, konsisiten, kejelasan antarmuka yang jelas, serta perlindungan dari bahaya karena eksplorasi fitur.

3. Expert frequent users
Pemakai sudah terbiasa dengan konsep tugas dan antarmuka, selain itu juga cenderung menginginkan pekerjaan cepat selesai, perancang dapat membuat rancangan yang makro, shortcuts, singkatan, dsb.

Prinsip 2 : Gunakan Delapan Aturan Emas Perancangan Antarmuka Pemakai
  1. Berusaha untuk konsisten
  2. Menyediakak usability universal
  3. Memberikan umpan balik yang inofatif
  4. Merancang dialog yang memberikan penutupan (keadaan akhir).
  5. Memberikan pencegahaan kesalahan dan penanganan kesalahan yang sederhana.
  6. Memungkinkan pembalikan aksi yang mudah.
  7. Mendukung pusat kendali internal (internal locuf of control).
  8. Mengurangi beban ingatan jangka pendek.

Prinsip-Prinsip Perancangan

Prinsip 3 : Mencegah Kesalahan

1. Membetulkan perintah
Mengenali kekurangan perintah dan melengkapinya, memberikan pilihan sebagai ganti mengetik serta membatasi pilihan.

2. Melengkapi urutan aksi
Memungkinkan menggabungkan aksi-aksi menjadi suatu aksi baru dengan makro atau sejenisnya serta melakukan aksi-aksi yang tergantung aksi lain secara otomatis.

3. Membetulkan pasangan yang bersesuaian 
Menempatkan tanda pembuka dan penutup dalam suatu aksi dan mengingatkan pemakai bahwa tanda penutup belum dipasang.

Perbedaan antara prinsip dasar dan pedoman dalam perancangan yang lebih informal tidaklah tegas, berikut ini beberapa contoh pedoman yang dapat diterapkan:

1. Pedoman data display ? Tujuan tingkat tinggi data display (Smith and Mosier)
  • Konsistensi tampilan data
  • Asimilasi informasi yang efisien oleh pemakai.
  • Beban ingatan pemakai yang minimal
  • Kompatibilitas tampilan data dengan pemasukan data.
  • Flesibelitas kendali pemakai

2. Pedoman untuk mengarahkan perhatian pengguna (Wickens and Holland, 2000)
  • Intensitas : Gunakan dua tingkatan , dengan penggunaan intensitas tinggi hanya untuk menarik perhatian.
  • Penandaan : Gunakan garis bawah dan lain-lain.
  • Ukuran : Gunakan maksimal 4 ukuran, ukuran yang lebih besar lebih menarik perhatian
  • Pilihan Font : gunakan maksimal 3 jenis fonts.
  • Blingking : Gunakan secara terbatas.
  • Warna : Gunakan maksimal 4 warna standar.
  • Audio : Gunakan nada lembut untuk feedback biasa dan nada keras untuk kondisi darurat.

3. Pedoman data entri : Tujuan tingkat tinggi Data Entry (Smith and Mosier, 1986):
  • Konsistensi transaksi pemasukan data.
  • Aksi pemasukan yang minimal oleh pemakai.
  • Beban ingatan pemakai yang minimal
  • Kompatibilitas pemasukan data dengan tampilan data.
  • Fleksibiltas kendali pemakai.

Urutan Perancangan

Setelah mengetahui beberapa prinsip dan petunjuk perancangan diatas, maka dalam merancang antarmuka juga dapat dikerjakan berdasarkan urutan berikut:
  1. Pemilihan ragam dialog, pilihlah ragam dialog yang menurut pikiran cocok untuk tugas tersebut.
  2. Perancangan struktur dialog, tahap ini adalam melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai
  3. Perancangan format pesan, pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci harus mendapat perhatian lebih

Perancangan penanganan kesalahan ?suatu kesalahan dalam menjalankan suatu aplikasi tidak dapat dihindarkan, hal ini bisa timbul baik kesalahan user maupun kesalahan komputer.  Bentuk-bentuk penanganan kesalahan dapat dilakuakan, diantranya adalah:
  1. Validasi pemasukan data
  2. Proteksi pengguna
  3. Pemuliahan dari kesalahan
  4. Penampilan psan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu.

Perancangan struktur data ? dalam hal ini menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan.

Peranti Bantu Sederhana

Pada pembahasan awal telah dijelaskan bahwa perancangan seharunya membuat dokumentasi dalam pembuatan rancangan antarmuka.  Dalam hali ini peranti bantu yang dapat digunakan adalah sebuah peranti bantu berbentuk lembaran kertas yang tidak perlu disiapkan secara khusus. 

Tetapi dapat menggunakan sebuah kertas kosong. Untuk mempermudah penamaan maka lembaran kertas yang dimaksud diberi nama dengan lembar kerja tampilan (LKT).

LKT pada dasarnya terdri dari empat bagian:
  1. Nomor lembar kerja,
  2. Bagian tampilan : berisi sketsa tampilan yang akan muncul dilayar
  3. Bagian Navigator: bagian ini antara lain menjelaskan kapan tampikan itu akan muncul dan berubah menjadi tampilan lain.
  4. Bagian keterangan : berisi penjelasan singkat tentang atribut tampilan yang dipakai.

Lembar Kerja Tampilan (LKT)
Contoh Lembar Kerja Tampilan (LKT)

Jaringan Semantik Tampilan

Dalam perancangan tampilan harus memungkinkan pengguna dapat berdialog dengan komputer. Maka sebelum merancang antarmuka pemrogram memerlukan navigai pada setiap lembar kerjanya, maka untuk mempermudah programmer untuk menentukan navigasinya maka dibuatlah sebuah bagan yang disebut jaringan semantik tampilan.

Jaringan semantik tampilan terdiri dari dua komponen yaitu nomor tampilan, dalam LKT  disebut nomor lembar kerja, dan transisi yang menyebabkan perpindahan ketampilan yang lain.  Dalam jaringan semantik lembar kerja diberi symbol lingkaran dan transisi diberi symbol anak panah.

Jaringan Semantik Tampilan

Dari gambar 4.2 diatas, diketahui sebuah aplikasi dengan tampilan T1, T2, dan T3. Jika menekan ALT+E maka T1 akan berganti ke T3, sedangkan ketika user menekan Esc maka akan kembali ke T1, user menekan Next pada T1 maka akan masuk ke T2, Jika pada T2 menekan CTRL+S maka akan terjadi looping pada T2, pada T2 terdapat button Next, maka tampilan berpindah ke T3.

Demikian artikel mengenai Perancangan Tampilan, semoga informasi yang diberikan bermanfaat.