PERANCANGAN ANTARMUKA

DESIGN
INTERFACE
Pendahuluan


Antarmuka pengguna
(User
Interface)
:
bagian
sistem
komputer
yang
memungkinkan
manusia
berinteraksi
dengan komputer.
Perancangan
antarmuka : proses
penggambaran
bagaimana
sebuah
bagian
sistem
dibentuk.
Interaksi Manusia dan
Komputer
Prinsip User Interface (1)
 Dalam
perancangan antarmuka, ada
beberapa
prinsip
yang
harus
diperhatikan (Deborah, 1992) :
1.
2.
3.
4.
5.
6.
7.
Kompatibilitas Pengguna
Kompatibilitas Produk
Kompatibilitas Transisi Antar Tugas
Konsistensi
Kebiasaan
Kesederhanaan
Manipulasi Langsung
Prinsip User Interface (2)
8.
9.
10.
11.
12.
13.
14.
Kontrol
Efektivitas (tepat dalam penggunaan)
Efisien dalam penggunaan
Keamanan dalam penggunaan
Kesesuaian Fungsi
Mudah dipelajari
Mudah diingat
1. Kompatibilitas Pengguna
2. Kompatibilitas Produk
 Memungkinkan
adanya perubahan
antarmuka agar sistem menjadi
lebih “kompatibel” bagi pengguna.
3. Kompatibilitas Transisi Antar
Tugas
 Sistem
harus dapat digunakan
untuk memudahkan pengguna
dalam melakukan tugasnya 
fungsi-fungsi
dalam
antarmuka
disesuaikan dengan kebutuhan
pengguna.
4. Konsistensi
 Membantu
pengguna untuk dapat
menganalogikan
dan
memprediksi
sesuatu yang sebelumnya belum pernah
dilakukan.
5. Kebiasaan
 Konsep,
terminologi, dan pengaturan
antarmuka harus yang dapat dipahami
oleh pengguna dengan baik
agar
pengguna
tidak
bingung
saat
berinteraksi.
6. Kesederhanaan
 Merancang
antarmuka dengan bentuk
yang sederhana, tanpa mengurangi
fungsionalitas dari sistem/produk yang
dibangun.
7. Manipulasi Langsung (1)



Merupakan gaya/ragam dialog dimana aksi
yang dilakukan pengguna dapat langsung
terlihat pada tampilan objek yang tampak
pada layar monitor.
Manipulasi langsung biasanya menyertakan
alat penunjuk, seperti : mouse, trackball, layar
sentuh, dan menggunakan grafik dalam
menampilkan objek dan aksinya.
Contoh penerapan manipulasi langsung :
- Pada games  cth : Solitaire
- Pada program spreadsheet  cth : Ms.Excel
7. Manipulasi Langsung (2)
 Karakteristik
yang harus diperhatikan dalam
manipulasi langsung adalah : Bahwa meskipun
pada layar tampilan banyak sekali objek yg
dapat dioperasikan, tapi pada
satu saat
pengguna hanya “berkuasa penuh” pada
sebuah objek yang ada disana.
 Manipulasi langsung jg dpt diterapkan pada
bidang yg lebih luas dan serius :
- Kontrol proses industri  pembangkitan
dan penyaluran listrik dan industri makanan
berskala besar.
- Editor Teks konsep WYSIWYG (what you see
is what you get)
- Simulator  simulator penerbangan
8. Kontrol
 Sistem
selalu dibawah kontrol pengguna
 Antarmuka harus mempunyai sarana yang
memungkinkan pengguna untuk dapat
menentukan :
- dimana sebelumnya pengguna berada
- dimana pengguna berada sekarang
- kemana pengguna dapat pergi
- apakah pekerjaan yg sudah dilakukan dapat
dibatalkan.
9. Efektivitas (Tepat dalam
Penggunaan)
 Apakah
sistem yang dibangun dapat
membuat pengguna:
- mudah untuk mempelajarinya
- efisien dalam melakukan pekerjaan
- dapat mengakses informasi yang
diperlukan, dsb.
10. Efisien Dalam Penggunaan
 Apakah
sistem menyediakan fasilitas
yang memudahkan pengguna dalam
mengerjakan tugasnya.
11. Keamanan Dalam
Penggunaan
 Untuk
melindungi pengguna dalam
menghadapi
kondisi
yang
tidak
diinginkan.
 Salahsatu cara pengamanan, dengan
membuat pesan dari aktivitas yang
dilakukan pengguna.
12. Kesesuaian Fungsi
 Fungsi-fungsi
yang disediakan sistem harus
sesuai dengan definisi sistem tersebut.
 Contoh :
- Aplikasi pengolah kata, brarti aplikasi
tersebut harus menyediakan seluruh
fasilitas
yang
dibutuhkan
dalam
pengolahan kata, seperti pembuatan
dokumen baru, sampai ke penyimpanan
dokumen, dll.
13. Mudah Dalam
Mempelajari
 Sistem
yang mudah digunakan adalah
sistem yang mudah dipelajari dan mudah
diingat.
 Perancang harus mengetahui karakteristik
pengguna, termasuk kemampuan dan
keahlian pengguna sistem yang akan
dibangun.
14. Mudah Diingat
 Mudah
diingat
bagaimana
cara
menggunakannya, sehingga perancang
juga perlu memperhatikan bagaimana
desain/rancangan sistem yang akan
dibangun agar mudah dipelajari oleh
pengguna, sehingga menjadi mudah
diingat.
Hal-hal Yang Harus Diperhatikan
Dalam Merancang Antarmuka
 Apa
keinginan dan harapan orang?
 Apa
batasan dan kemampuan
fisiknya?
 Bagaimana sistem penerimaan dan
pemrosesan
informasi
mereka
bekerja?
 Apa yang dianggap menarik dan
menyenangkan?
 Bagimana karakteristik dan batasan
teknik dari hardware dan software
komputernya?
Dokumentasi Rancangan
a)
b)
c)
d)
Membuat sketsa pada kertas
Menggunakan peranti prototipe
GUI
Menulis tekstual yang menjelaskan
tentang
kaitan
antara
satu
jendela dengan jendela yang lain
Menggunakan peranti bantu yg
disebut CASE (Computer-Aided
Software Engineering).
Kategori Program Aplikasi


Program aplikasi untuk keperluan khusus (special
purpose software)
- pengguna yang akan memanfaatkan aplikasi
tersebut
dapat
diperkirakan,
sehingga
memudahkan dalam merancang antarmuka.
Program aplikasi yang akan digunakan untuk
banyak pengguna (general purpose software)
atau public software.
- penggunanya mempunyai tingkat kepandaian
dan karakteristik beragam, sehingga perlu
adanya “customization” agar pengguna dapat
menggunakan aplikasi sesuai dengan selera
masing-masing.
Cara Pendekatan (1)
1.
User-Centered Design Approach
- digunakan pada program aplikasi untuk
keperluan khusus.
- perancangan antarmuka melibatkan
pengguna  pengguna aktif berpendapat
ketika
perancang
sedang
membuat
antarmuka  pengguna seolah-olah sudah
mempunyai gambaran nyata tentang
antarmuka sistem yang akan mereka
gunakan.
Cara Pendekatan (2)
2.
User Design Approach
- pengguna sendiri yang merancang
antarmuka yang diinginkan.
Komponen Antarmuka Pengguna
1.
2.
3.
4.
Model pengguna; memungkinkan user
untuk mengembangkan pemahaman
yang mendasar tentang apa yang
dikerjakan oleh program, bahkan oleh user
yang sama sekali tidak mengetahui
teknologi komputer
Bahasa perintah; sedapat mungkin
menggunakan bahasa alami
Umpanbalik; kemampuan sebuah
program yang membantu user untuk
mengoperasikan program itu sendiri
Tampilan informasi; digunakan untuk
menunjukkan status informasi atau
program ketika user melakukan suatu
tindakan
Urutan Perancangan Dialog (1)
1.
2.
3.
Pemilihan ragam dialog, dipengaruhi
oleh karakteristik populasi pengguna,
tipe dialog yang diperlukan, dan
kendala teknologi yang ada untuk
mengimplementasikan ragam dialog
tersebut.
Perancangan struktur dialog; melakukan
analisis tugas dan menentukan model
pengguna dari tugas tersebut
Perancangan format pesan; tata letak
tampilan, keterangan tektual secara
terinci, dan efisiensi inputing data harus
mendapat perhatian lebih
Urutan Perancangan Dialog
(2)
4.
Perancangan penanganan kesalahan;
untuk menghindari adanya kesalahan yang
timbul, maka adanya kondisi yang disebut
abnormal termination, yaitu eksekusi
program berhenti karena terjadi kesalahan.
Bentuk penanganan kesalahan :
 Validasi pemasukan data
 Proteksi pengguna
 Pemulihan dari kesalahan
 Penampilan pesan salah yang tepat dan
sesuai dengan kesalahan yangterjadi
pada waktu itu.
Urutan Perancangan Dialog
(3)
5. Perancangan struktur data
Setelah semua aspek antarmua
dipertimbangkan, anda harus menentukan
struktur data yang dapat digunakan untuk
menyajikan dan mendukung fungsional
komponen-komponen antarmuka yang
diperlukan. Struktur data ini harus dipetakan
langsung ke dalam model pengguna yang
telah dibuat.
Hal ini perlu ditekankan agar keinginan
pengguna dan model sistem yang telah
dirancang saling mempunyai kecocokan
satu sama lain.
PERANCANGAN TAMPILAN
BERBASIS TEKS
6 Faktor Agar Tata Letak Tampilan
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
 Dengan
antarmuka berbasis grafis berbagai
kemudahan dalam hal pengontrolan format
tampilan dapat dikerjakan dengan lebih mudah
dan fleksibilitas tampilan dapat semakin dirasakan
oleh perancang tampilan maupun
penggunanya.
 Disisi lain, kita harus memperhatikan beberapa
kendala dalam penerapan antarmuka berbasis
grafis, antara lain : waktu tanggap, kecepatan
tampilan, lebar tampilan, dan tipe tampilan
5 Faktor Penting pada
Perancangan Interface Berbasis
Grafis





Ilusi pada obyek-obyek yang dapat
dimanipulasi, mis: gambar disket, printer, dll
Urutan visual dan fokus pengguna, mis: tanda
kedip untuk posisi kursor, penggunaan warna
yang berbeda
Struktur internal; berguna untuk menunjukkan
bahwa obyek yang sedang dihadapi dapat
dimodifikasi sesuai dengan keinginan user
Kosakata grafis yang konsisten dan sesuai,
mis: gambar disket, printer, dll
Kesesuaian dengan media/informasi yang
akan disampaikan
1. Ilusi pada objek-objek yang dapat
dimanipulasi.
Perancangan antarmuka berbasis grafis
harus melibatkan tiga komponen :
- Kumpulan Objek
- Penampilan objek-objek
- Mekanisme yang konsisten
2. Urutan visual dan Fokus
pengguna
 Antar
muka grafis dapat digunakanuntuk
menarik perhatian pengguna antara lain
dengan membuat objek yang berkedip,
menggunakan warna tertentu, serta
menyajikan suatu animasi yang akan
lebih menarik perhatian pengguna
3. Struktur Internal
 Pada
pengolahan kata kita sering menulis
beberapa kata yang berbeda dengan
kata-kata yang lain, misalnya ada
sekelompok kata yang ditebalkan,
dimiringkan atau diberi garis bawah.
 Pada antarmuka berbasis grafis, khusunya
pada objek-objek yang dapat dimanipulasi,
perancang juga harus memberikan struktur
internal (reveral structure) dalam bentuk
yang berbeda dengan yang digunakan
pada dokumen tekstual, untuk memberi
tahu pengguna sejauh mana pengguna
dapat mengubah atau memanipulasi objek
4. Kosa kata grafis yang konsisten
dan sesuai
Pada program aplikasi yang berbeda,
penggunaan simbol biasanya disesuaikan
dengan kreatifitas perancangnya.
5. Kesesuaian dengan pengguna
 Karakteristik
dari layar tampilan yang
digunakan akan mempunyai
pengaruh yang besar terhadap
keindahan “wajah” antarmuka yang
akan ditampilkan.
 Dengan semakinnya 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.
Penanganan Kesalahan




Validasi pemasukan data, mis: jika user harus
memasukkan bilangan positif, namun dia
memasukkan data negatif atau nol, maka harus
ada mekanisme untuk mengulang pemasukan
data tersebut
Proteksi user; program memberi peringatan
ketika user melakukan suatu tindakan secara
tidak sengaja, mis: penghapusan berkas
Pemulihan dari kesalahan: tersedianya
mekanisme untuk membatalkan tindakan yang
baru saja dilakukan
Penampilan pesan salah yang tepat dan sesuai
dengan kesalahan yang terjadi pada waktu itu
Kesalahan dibagi 2, yaitu :
 Kesalahan
pada saat implementasi
program yaitu kesalahan sintaks yang
secara langsung akan dideteksi oleh
kompiler (compile-time error), terjadi pada
saat program sedang dikompilasi.
 Kesalahan Logika ketika program sedang
dijalankan, terjadi pada saat program
dijalanka(run-time error atau fatal error).
Kesalahan ini akan mengakibatkan
terhentinya program secara abnormal.