5/24/2018 Perancangan UI
1/45
DESIGN
INTERFACE
5/24/2018 Perancangan UI
2/45
Pendahuluan Antarmuka pengguna
(User Interface) : bagian
sistem komputer yangmemungkinkan manusiaberinteraksi dengankomputer.
Perancangan
antarmuka : prosespenggambaranbagaimana sebuahbagian sistem dibentuk.
Interaksi Manusia danKomputer
5/24/2018 Perancangan UI
3/45
Prinsip User Interface (1)Dalam perancangan antarmuka, ada
beberapa prinsip yang harus
diperhatikan (Deborah, 1992) :1. Kompatibilitas Pengguna
2. Kompatibilitas Produk
3. Kompatibilitas Transisi Antar Tugas
4. Konsistensi
5. Kebiasaan6. Kesederhanaan
7. Manipulasi Langsung
5/24/2018 Perancangan UI
4/45
Prinsip User Interface (2)
8. Kontrol
9. Efektivitas (tepat dalam penggunaan)
10. Efisien dalam penggunaan
11. Keamanan dalam penggunaan
12. Kesesuaian Fungsi
13. Mudah dipelajari14. Mudah diingat
5/24/2018 Perancangan UI
5/45
1. Kompatibilitas Pengguna
5/24/2018 Perancangan UI
6/45
2. Kompatibilitas Produk
Memungkinkan adanya perubahan
antarmuka agar sistem menjadi
lebih kompatibel terhadap
produk.
5/24/2018 Perancangan UI
7/45
3. Kompatibilitas Transisi AntarTugas
Sistem harus dapat digunakan
untuk memudahkan pengguna
dalam melakukan tugasnya
fungsi-fungsi dalam antarmuka
disesuaikan dengan kebutuhan
pengguna.
5/24/2018 Perancangan UI
8/45
4. Konsistensi
Membantu pengguna untuk dapatmenganalogikan dan memprediksi
sesuatu yang sebelumnya belum pernahdilakukan.
5/24/2018 Perancangan UI
9/45
5. Kebiasaan
Konsep, terminologi, dan pengaturanantarmuka harus yang dapat dipahami
oleh pengguna dengan baik agarpengguna tidak bingung saatberinteraksi.
5/24/2018 Perancangan UI
10/45
6. Kesederhanaan
Merancang antarmuka dengan bentukyang sederhana, tanpa mengurangi
fungsionalitas dari sistem/produk yangdibangun.
5/24/2018 Perancangan UI
11/45
7. Manipulasi Langsung (1) Merupakan gaya/ragam dialog dimana aksi
yang dilakukan pengguna dapat langsungterlihat pada tampilan objek yang tampakpada layar monitor.
Manipulasi langsung biasanya menyertakanalat penunjuk, seperti : mouse, trackball, layarsentuh, dan menggunakan grafik dalammenampilkan objek dan aksinya.
Contoh penerapan manipulasi langsung :- Pada gamescth : Solitaire
- Pada programspreadsheetcth : Ms.Excel
5/24/2018 Perancangan UI
12/45
7. Manipulasi Langsung (2) Karakteristik yang harus diperhatikan dalam
manipulasi langsung adalah : Bahwa meskipunpada layar tampilan banyak sekali objek ygdapat dioperasikan, tapi pada satu saatpengguna hanya berkuasa penuh padasebuah objek yang ada disana.
Manipulasi langsung jg dpt diterapkan padabidang yg lebih luas dan serius :
- Kontrol proses industri pembangkitandan penyaluran listrik dan industri makanan
berskala besar.- Editor Teks konsep WYSIWYG (what you seeis what you get)
- Simulatorsimulator penerbangan
5/24/2018 Perancangan UI
13/45
8. Kontrol Sistem selalu dibawah kontrol pengguna
Antarmuka harus mempunyai sarana yangmemungkinkan pengguna untuk dapatmenentukan :
- dimana sebelumnya pengguna berada
- dimana pengguna berada sekarang
- kemana pengguna dapat pergi
- apakah pekerjaan yg sudah dilakukan dapatdibatalkan.
5/24/2018 Perancangan UI
14/45
9. Efektivitas (Tepat dalam
Penggunaan)
Apakah sistem yang dibangun dapatmembuat pengguna:
- mudah untuk mempelajarinya
- efisien dalam melakukan pekerjaan
- dapat mengakses informasi yangdiperlukan, dsb.
5/24/2018 Perancangan UI
15/45
10. Efisien Dalam Penggunaan
Apakah sistem menyediakan fasilitasyang memudahkan pengguna dalam
mengerjakan tugasnya.
5/24/2018 Perancangan UI
16/45
11. Keamanan DalamPenggunaan
Untuk melindungi pengguna dalammenghadapi kondisi yang tidak
diinginkan.
Salahsatu cara pengamanan, denganmembuat pesan dari aktivitas yangdilakukan pengguna.
5/24/2018 Perancangan UI
17/45
12. Kesesuaian Fungsi
Fungsi-fungsi yang disediakan sistem harussesuai dengan definisi sistem tersebut.
Contoh :- Aplikasi pengolah kata, brarti aplikasitersebut harus menyediakan seluruhfasilitas yang dibutuhkan dalampengolahan kata, seperti pembuatandokumen baru, sampai ke penyimpanandokumen, dll.
5/24/2018 Perancangan UI
18/45
13. Mudah Dalam Mempelajari
Sistem yang mudah digunakan adalahsistem yang mudah dipelajari dan mudah
diingat.
Perancang harus mengetahui karakteristikpengguna, termasuk kemampuan dankeahlian pengguna sistem yang akan
dibangun.
5/24/2018 Perancangan UI
19/45
14. Mudah Diingat
Mudah diingat bagaimana caramenggunakannya, sehingga perancang
juga perlu memperhatikan bagaimanadesain/rancangan sistem yang akandibangun agar mudah dipelajari olehpengguna, sehingga menjadi mudah
diingat.
5/24/2018 Perancangan UI
20/45
Hal-hal Yang Harus DiperhatikanDalam Merancang Antarmuka
Apa keinginan dan harapan orang?
Apa batasan dan kemampuan fisiknya?
Bagaimana sistem penerimaan danpemrosesan informasi mereka bekerja?
Apa yang dianggap menarik danmenyenangkan?
Bagimana karakteristik dan batasanteknik dari hardware dan softwarekomputernya?
5/24/2018 Perancangan UI
21/45
Dokumentasi Rancangan
a) Membuat sketsa pada kertas
b) Menggunakan peranti prototipe GUI
c) Menulis tekstual yang menjelaskantentang kaitan antara satu jendeladengan jendela yang lain
d) Menggunakan peranti bantu ygdisebut CASE (Computer-AidedSoftware Engineering).
5/24/2018 Perancangan UI
22/45
Kategori Program Aplikasi Program aplikasi untuk keperluan khusus (special
purpose software)- pengguna yang akan memanfaatkan aplikasi
tersebut dapat diperkirakan, sehinggamemudahkan dalam merancang antarmuka.
Program aplikasi yang akan digunakan untukbanyak pengguna (general purpose software)atau public software.- penggunanya mempunyai tingkat kepandaian
dan karakteristik beragam, sehingga perluadanya customization agar pengguna dapatmenggunakan aplikasi sesuai dengan seleramasing-masing.
5/24/2018 Perancangan UI
23/45
Cara Pendekatan (1)
1. User-Centered Design Approach
- digunakan pada program aplikasi untuk
keperluan khusus.- perancangan antarmuka melibatkanpengguna pengguna aktif berpendapatketika perancang sedang membuatantarmuka pengguna seolah-olah sudah
mempunyai gambaran nyata tentangantarmuka sistem yang akan merekagunakan.
5/24/2018 Perancangan UI
24/45
Cara Pendekatan (2)
2. User Design Approach
- pengguna sendiri yang merancangantarmuka yang diinginkan.
5/24/2018 Perancangan UI
25/45
Komponen Antarmuka Pengguna
1. Model pengguna; memungkinkan useruntuk mengembangkan pemahamanyang mendasar tentang apa yangdikerjakan oleh program, bahkan oleh useryang sama sekali tidak mengetahuiteknologi komputer
2. Bahasa perintah; sedapat mungkinmenggunakan bahasa alami
3. Umpanbalik; kemampuan sebuahprogram yang membantu user untuk
mengoperasikan program itu sendiri4. Tampilan informasi; digunakan untukmenunjukkan status informasi atauprogram ketika user melakukan suatutindakan
5/24/2018 Perancangan UI
26/45
Urutan Perancangan Dialog (1)
1. Pemilihan ragam dialog, dipengaruhioleh karakteristik populasi pengguna,tipe dialog yang diperlukan, dankendala teknologi yang ada untuk
mengimplementasikan ragam dialogtersebut.
2. Perancangan struktur dialog; melakukananalisis tugas dan menentukan modelpengguna dari tugas tersebut
3. Perancangan format pesan; tata letaktampilan, keterangan tektual secaraterinci, dan efisiensi inputing data harusmendapat perhatian lebih
5/24/2018 Perancangan UI
27/45
Urutan Perancangan Dialog(2)
4. Perancangan penanganan kesalahan;untuk menghindari adanya kesalahan yangtimbul, maka adanya kondisi yang disebutabnormal termination, yaitu eksekusiprogram berhenti karena terjadi kesalahan.Bentuk penanganan kesalahan :
Validasi pemasukan data Proteksi pengguna Pemulihan dari kesalahan Penampilan pesan salah yang tepat dan
sesuai dengan kesalahan yangterjadipada waktu itu.
5/24/2018 Perancangan UI
28/45
Urutan Perancangan Dialog(3)
5. Perancangan struktur dataSetelah semua aspek antarmuadipertimbangkan, anda harus menentukanstruktur data yang dapat digunakan untukmenyajikan dan mendukung fungsional
komponen-komponen antarmuka yangdiperlukan. Struktur data ini harus dipetakanlangsung ke dalam model pengguna yang telahdibuat.Hal ini perlu ditekankan agar keinginanpengguna dan model sistem yang telahdirancang saling mempunyai kecocokan satu
sama lain.
5/24/2018 Perancangan UI
29/45
6 Faktor Agar Tata Letak Tampilan Baik
1. Urutan Penyajian
2. Kelonggaran (Spaciousness)
3. Pengelompokan
4. Relevansi
5. Konsistensi6. Kesederhanaan
PERANCANGAN TAMPILAN
BERBASIS TEKS
5/24/2018 Perancangan UI
30/45
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.
5/24/2018 Perancangan UI
31/45
Kelonggaran (Spaciousness)
Penggunaan tabulasi dan spasi dapat
memudahkan pengguna untuk mencari suatu
teks yang diinginkan, meskipun boros tempatkosong pd layar.
Teks-teks tertentu ditempatkan di posisi
tertentu dengan harapan dapat langsung
memusatkan perhatian pengguna.
5/24/2018 Perancangan UI
32/45
Pengelompokan
Pengelompokan data yang saling berkaitan
untuk mempermudah penstrukturan layar
tampilan secara keseluruhan.
Petunjuk adanya pengelompokan data bisa
menggunakan beberapa karakter khusus.
5/24/2018 Perancangan UI
33/45
Relevansi
Menampilkan pesan-pesan yang relevan/sesuai
dengan topik yang sedang ditampilkan di layar.
5/24/2018 Perancangan UI
34/45
Konsistensi
Kadang pengguna dihadapkan pada sejumlah
tampilan yang penuh informasi, sehingga
perancang harus konsisten dalammenggunakan ruang tampilan yang tersedia.
Misalnya pada sistem dengan tampilan dialog
berbasis pengisian borang (frame).
5/24/2018 Perancangan UI
35/45
Kesederhanaan
Memberikan kemudahan bagi pengguna dalam
memahami informasi yang ditampilkan.
5/24/2018 Perancangan UI
36/45
5/24/2018 Perancangan UI
37/45
PERANCANGAN TAMPILAN
BERBASIS GRAFIS Dengan antarmuka berbasis grafis berbagai
kemudahan dalam hal pengontrolan formattampilan dapat dikerjakan dengan lebih mudah
dan fleksibilitas tampilan dapat semakin dirasakanoleh perancang tampilan maupunpenggunanya.
Disisi lain, kita harus memperhatikan beberapa
kendala dalam penerapan antarmuka berbasisgrafis, antara lain : waktu tanggap, kecepatantampilan, lebar tampilan, dan tipe tampilan
5/24/2018 Perancangan UI
38/45
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 warnayang berbeda Struktur internal; berguna untuk menunjukkan
bahwa obyek yang sedang dihadapi dapatdimodifikasi sesuai dengan keinginan user
Kosakata grafis yang konsisten dan sesuai,
mis: gambar disket, printer, dll Kesesuaian dengan media/informasi yang
akan disampaikan
5/24/2018 Perancangan UI
39/45
1. Ilusi pada objek-objek yang dapat
dimanipulasi.
Perancangan antarmuka berbasis grafisharus melibatkan tiga komponen :
- Kumpulan Objek- Penampilan objek-objek
- Mekanisme yang konsisten
5/24/2018 Perancangan UI
40/45
2. Urutan visual dan Fokus pengguna
Antar muka grafis dapat digunakanuntukmenarik perhatian pengguna antara laindengan membuat objek yang berkedip,
menggunakan warna tertentu, sertamenyajikan suatu animasi yang akanlebih menarik perhatian pengguna
5/24/2018 Perancangan UI
41/45
3. Struktur Internal
Pada pengolahan kata kita sering menulisbeberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok katayang ditebalkan, dimiringkan atau diberi garisbawah.
Pada antarmuka berbasis grafis, khusunyapada objek-objek yang dapat dimanipulasi,perancang juga harus memberikan strukturinternal (reveral structure)dalam bentuk yang
berbeda dengan yang digunakan padadokumen tekstual, untuk memberi tahupengguna sejauh mana pengguna dapatmengubah atau memanipulasi objek tersebut.
5/24/2018 Perancangan UI
42/45
4. Kosa kata grafis yang konsisten
dan sesuaiPada program aplikasi yang berbeda,penggunaan simbol biasanya disesuaikandengan kreatifitas perancangnya.
5/24/2018 Perancangan UI
43/45
5. Kesesuaian dengan pengguna
Karakteristik dari layar tampilan yangdigunakan akan mempunyai pengaruhyang besar terhadap keindahan wajahantarmuka yang akan ditampilkan.
Dengan semakinnya canggihnya
teknologi layar tampilan pada saat ini,kreatifitas perancang tampilanlah yangsaat ini lebih dituntut untuk memenuhipermintaan pengguna akan aspekkenyamanan dan keramahanantarmuka.
5/24/2018 Perancangan UI
44/45
Penanganan Kesalahan
Validasi pemasukan data, mis: jika user harusmemasukkan bilangan positif, namun diamemasukkan data negatif atau nol, maka harusada mekanisme untuk mengulang pemasukandata tersebut
Proteksi user; program memberi peringatanketika user melakukan suatu tindakan secaratidak sengaja, mis: penghapusan berkas
Pemulihan dari kesalahan: tersedianyamekanisme untuk membatalkan tindakan yang
baru saja dilakukan Penampilan pesan salah yang tepat dan sesuai
dengan kesalahan yang terjadi pada waktu itu
5/24/2018 Perancangan UI
45/45
Kesalahan dibagi 2, yaitu :
Kesalahan pada saat implementasiprogram yaitu kesalahan sintaks yangsecara langsung akan dideteksi olehkompiler (compile-time error), terjadi pada
saat program sedang dikompilasi.Kesalahan Logika ketika program sedang
dijalankan, terjadi pada saat programdijalanka(run-time error atau fatal error).Kesalahan ini akan mengakibatkan
terhentinya program secara abnormal.
Top Related