PERANCANGAN ANTARMUKA

PERANCANGAN ANTARMUKA - 2
Pertemuan Keenam
Interaksi Manusia dan Komputer
By : Viska Armalina, ST., M.Eng
Komponen Antarmuka Pengguna
Model Pengguna
2. Bahasa Perintah
3. Umpan Balik
4. Penampilan Informasi
1.
Model Pengguna
 Memungkinkan
seorang
pengguna
untuk
mengembangkan pemahaman mendasar tentang
apa yang dikerjakan oleh program, bahkan oleh
pengguna yang sama sekali tidak mengetahui
teknologi.
 Dapat berupa simulasi tentang keadaan dalam
dunia nyata, sehingga tidak perlu mengembangkan
dari awal.
Bahasa Perintah (Command
Language)
 Merupakan peranti untuk memanipulasi model
yang diinginkan pengguna.
 Idealnya, program komputer mempunyai bahasa
perintah yang alami, sehingga model pengguna
dapat dengan cepat dioperasionalkan.
Umpan Balik
 Kemampuan sebuah program yang membantu
pengguna untuk mengoperasikan program itu
sendiri.
 Umpan balik terutama ditujukan kepada pengguna
yang belum berpengalaman dalam menjalankan
program tersebut.
 Biasanya berbentuk : pesan-pesan penjelasan,
pesan penerimaan perintah, indikasi ada objek
terpilih, penampilan karakter yang diketik lewat
papan ketik.
Tampilan Informasi
 Digunakan untuk menunjukkan status informasi
atau program ketika pengguna melakukan suatu
tindakan.
 Pesan-pesan informasi tersebut harus seefektif
mungkin, sehingga mudah dipahami oleh pengguna.
Perancangan Dialog
Urutan Perancangan Dialog
1.
2.
3.
4.
5.
Pemilihan Ragam Dialog
Perancangan Struktur Dialog
Perancangan Format Pesan
Perancangan Penanganan Kesalahan
Perancangan Struktur Data
1. Pemilihan Ragam Dialog
 Pemilihan ragam dialog dipengaruhi oleh :
- karakteristik populasi pengguna
- tipe dialog yang diperlukan
-kendala
teknologi
yang
ada
untuk
mengimplementasikan ragam dialog tersebut.
 Ragam dialog yang terpilih dapat berupa sebuah
ragam tunggal atau bisa juga sekumpulan ragam
dialog yang saling mendukung satu sama lain.
2. Perancangan Struktur Dialog
 Analisis tugas dan menentukan model pengguna
dari tugas tersebut untuk membentuk struktur
dialog yang sesuai.
 Sebaiknya banyak melibatkan pengguna, sehingga
pengguna dapat langsung mendapat umpan balik
yang berupa diskusi informas maupun prototipe
dari dialog yang nantinya akan dia gunakan.
3. Perancangan Format Pesan
 Yang harus diperhatikan dalam tahap ini :
Tata letak tampilan dan keterangan tekstual
secara terinci
b. Kebutuhan data masukan yang mengharuskan
pengguna untuk memasukkan data ke komputer
juga harus efisien  kurangi pengetikan yang
tidak perlu, maksimalkan penggunaan tombol.
a.
4. Perancangan Penanganan Kesalahan
(1)
 Kesalahan yang sering terjadi :
Pengguna salah memasukkan data
b. Programnya melakukan operasi yang tidak sah
a.

Kondisi Abnormal Termination : eksekusi
program terhenti karena terjadi kesalahan.
4. Perancangan Penanganan Kesalahan
(2)
Bentuk-bentuk penanganan kesalahan yang dapat
dilakukan :
a. Validasi pemasukan data ada pesan untuk
mengulang pemasukan.
b. Proteksi pengguna  program memberi peringatan
ketika pengguna melakukan kesalahan tanpa sengaja.
c. Pemulihan
dari kesalahan  menyediakan
mekanisme untuk membatalkan tindakan yang baru
saja dilakukan.
d. Penampilan pesan salah yang tepat dan sesuai
kesalahan yang terjadi.
5. Perancangan Struktur Data
 Menentukan struktur data yang dapat digunakan
untuk menyajikan dan mendukung fungsionalitas
komponen-komponen antarmuka yang diperlukan.
 Struktur data ini dipetakan langsung ke dalam
model pengguna yang telah dibuat, meskipun
tingkat kerumitan antara satu aplikasi dengan
aplikasi lain berbeda  agar keinginan pengguna
dan model sistem yang dirancang saling cocok satu
sama lain.
Perancangan Tampilan Berbasis
Teks
6 Faktor Agar Tata Letak Tampilan
Berkualitas Tinggi
1.
2.
3.
4.
5.
6.
Urutan Penyajian
Kelonggaran (Spaciousness)
Pengelompokan
Relevansi
Konsistensi
Kesederhanaan
Urutan Penyajian
 Urutan
penyajian disesuaikan dengan model
pengguna yang telah disusun.
 Harus ada kesepakatan antara perancang dengan
calon pengguna tentang urutan tampilan yang akan
digunakan.
Kelonggaran (Spaciousness)
 Penggunaan tabulasi dan spasi dapat memudahkan
pengguna untuk mencari suatu teks yang
diinginkan, meskipun boros tempat kosong pd
layar.
 Teks-teks tertentu ditempatkan di posisi tertentu
dengan harapan dapat langsung memusatkan
perhatian pengguna.
Pengelompokan
 Pengelompokan data yang saling berkaitan untuk
mempermudah penstrukturan
layar tampilan
secara keseluruhan.
 Petunjuk adanya pengelompokan data bisa
menggunakan beberapa karakter khusus.
Relevansi
 Menampilkan
pesan-pesan yang relevan/sesuai
dengan topik yang sedang ditampilkan di layar.
Konsistensi
 Kadang
pengguna dihadapkan pada sejumlah
tampilan yang penuh informasi, sehingga
perancang harus konsisten dalam menggunakan
ruang tampilan yang tersedia.
 Misalnya pada sistem dengan tampilan dialog
berbasis pengisian borang (frame).
Kesederhanaan
 Memberikan kemudahan bagi pengguna dalam
memahami informasi yang ditampilkan.
Perancangan Tampilan Berbasis
Grafis
Kelebihan Perancangan Berbasis
Grafis
 Memudahkan dalam
hal pengontrolan format
tampilan .
 Fleksibilitas tampilan dapat semakin dirasakan oleh
perancang maupun penggunanya.
Kendala Dalam Penerapan Antarmuka
Berbasis Grafis
Waktu tanggap
b. Kecepatan penampilan
c. Tipe tampilan (berorientasi ke tekstual atau
grafis?).
a.
5 Faktor Yang Harus Diperhatikan Dalam
Merancang Antarmuka Berbasis Grafis
1.
2.
3.
4.
5.
Ilusi pada obyek-obyek yang dapat dimanipulasi
Urutan visual dan fokus pengguna
Struktur internal
Kosakata grafis yang konsisten dan sesuai
Kesesuaian dengan media
1. Ilusi Pada Obyek-Obyek Yang Dapat
Dimanipulasi
 Perancangan antarmuka berbasis grafis yang efektif
harus melibatkan tiga komponen:
Pertama, gunakan kumpulan obyek yang
disesuaikan dengan aplikasi yang akan dibuat. Jika
obyek-obyek itu belum ada, kita dapat
mengembangkannya sendiri.
Kedua, penampilan obyek-obyek grafis harus
dilakukan dengan keyakinan bahwa ia akan dengan
mudah dimengerti oleh pengguna.
Ketiga, gunakan mekanisme yang konsisten untuk
memanipulasi obyek yang akan muncul dilayar.
2. Urutan Visual dan Fokus Pengguna
 Antarmuka
dapat digunakan untuk menarik
perhatian pengguna antara lain dengan membuat
suatu obyek berkedip, menggunakan warna
tertentu untuk obyek-obyek tertentu, serta
menyajikan suatu animasi yang akan lebih menarik
perhatian pengguna.
 Namun penggunaan rangsangan visual yang
berlebihan justru akan membuat pengguna bingung
dan merasa tidak nyaman.
3. Struktur Internal (1)
 Pada
pengolah kata kita seringkali menulis
beberapa kata yang berbeda dengan kata-kata yang
lain, misalnya ada sekelompok kata yang
ditebalkan, dimiringkan, atau diberi garis bawah.
 Reveal code, yakni suatu tanda khusus yang
digunakan untuk menunjukkan adanya perbedaan
font style.
 Reveal code tidak akan ikut dicetak, tetapi
digunakan untuk menunjukkan kepada pengguna
antara lain tentang font style yang digunakan, batas
kiri dan batas kanan dari halaman teks, informasi
yang lain.
 Reveal code biasanya berupa suatu karakter khusus.
3. Struktur Internal (2)
 Pada obyek yang dapat dimanipulasi, perancang
juga harus memberikan struktur internal (Reveal
Structure) dalam bentuk yang berbeda dengan yang
digunakan pada dokumen tekstual  gunanya
untuk memberitahu pengguna sampai sejauh mana
pengguna dapat mengubah/memanipulasi obyek
tersebut.
4. Kosakata Grafis Yang Konsisten Dan
Sesuai
 Penggunaan simbol obyek/icon disesuaikan dengan
kreatifitas perancangnya.  Tidak ada standardnya.
 Pada sebuah program aplikasi, hendaknya simbol
yang sama digunakan untuk tujuan yang sama
sehingga pengguna tidak bingung ketika harus
melakukan aktivitas yang diinginkan.
5. Kesesuaian Dengan Media
 Karakteristik khusus dari layar tampilan yang
digunakan akan mempunyai pengaruh yang besar
terhadap keindahan “wajah” antarmuka yang akan
ditampilkan.
 Dengan semakin canggihnya teknologi layar
tampilan pada saat ini, kreatifitas perancang
tampilanlah yang saat ini lebih dituntut untuk
memenuhi permintaan pengguna akan aspek
kenyamanan dan keramahan antarmuka.
Waktu Tanggap (1)
 Keinginan
pengguna  program aplikasinya
memberikan waktu tanggap yang sependekpendeknya.
 Aspek-aspek yang mempengaruhi waktu tanggap :
a. Ragam interaksi yang diinginkan
b. Kefasihan pengguna dalam menjalankan program
aplikasi tersebut.

Waktu tanggap yang berbeda-beda dapat
mempengaruhi konsentrasi pengguna sehingga
mempengaruhi kinerja pengguna.
Waktu Tanggap (2)
 Waktu tanggap yang lama (misalnya lebih dari 14
detik), menyebabkan perhatian pengguna terpecah
ke aktivitas lain, sehingga dia cenderung melakukan
aktivitas lain sampai sistem menyelesaikan apa
yang harus dia kerjakan.
 Contoh : saat mengisi formulir online/registrasi,
memilih menu, memberi perintah, dll.
Penanganan Kesalahan
 Penanganan
kesalahan yang tepat dilakukan
dengan memberikan pesan umpan balik kepada
pengguna akan keadaan eksekusi program saat itu.
 Kesalahan pada program dapat disebabkan oleh
dua hal:
pertama, kesalahan sintaksis yang bisa dideteksi
kompiler biasa disebut compile-time error .
kedua, kesalahan logika ketika program dijalankan
biasa disebut run-time error atau fatal error.
Peranti Bantu Sederhana
 Perancang seharusnya membuat dokumentasi akan






bentuk-bentuk
tampilan
yang
akan
diimplementasikan.
Peranti bantu sederhana yang dapat digunakan
misalnya adalah lembar kerja tampilan/LKT (screen
design work sheet).
Pada LKT, disajikan empat bagian:
1. Nomor lembar kerja
2. Bagian tampilan  sketsa tampilan
3. Bagian navigasi
4. Bagian keterangan