user interface design (uid) - lambang.files.wordpress.com · informasi dalam bentuk teks bersifat...

24
USER INTERFACE DESIGN (UID) Tujuan dari UID adalah merancang interface yang efektif untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai dengan kebutuhan penggunanya. Pengguna sering menilai sistem dari user interfacenya, bukan dari fungsinya. Jika desain user interfacenya yang buruk, maka itu sering menjadi alasan untuk tidak menggunakan software. Selain itu interface yang buruk menyebabkan pengguna membuat kesalahan fatal. Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI memberikan keuntungan seperti:

Upload: vunguyet

Post on 06-Mar-2019

230 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

USER INTERFACE DESIGN (UID)

Tujuan dari UID adalah merancang interface yang efektifuntuk sistem perangkat lunak. Efektif artinya siapdigunakan, dan hasilnya sesuai dengan kebutuhanpenggunanya. Pengguna sering menilai sistem dari user interfacenya, bukan dari fungsinya. Jika desain user interfacenya yang buruk, maka itu sering menjadi alasan untuk tidakmenggunakan software. Selain itu interface yang burukmenyebabkan pengguna membuat kesalahan fatal.Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI memberikankeuntungan seperti:

Page 2: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

1. mudah dipelajari oleh pengguna yang memilikipengalaman dalam menggunakan komputer cukupminim

2. berpindah dari satu layar ke layar yang lain tanpakehilangan informasi dimungkinkan

3. akses penuh pada layar dengan segera untuk beberapamacam tugas/keperluan

Beberapa karakteristik dari GUI dan penjelasannya dapatdilihat pada Tabel 1.

Page 3: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Tabel 1: Karakteristik dari GUI

Page 4: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Gambar 1 menggambarkan proses yang dilakukan dalammelakukan desain user interface. Proses perulangan yang terjadi menjelaskan bahwa proses-proses tersebutdilakukan hingga menghasilkan desain yang diinginkanoleh pengguna.Desain harus bersifat user-centered, artinya penggunasangat terlibat dalam proses desain. Karena itu adaproses evaluasi yang dilakukan oleh pengguna terhadaphasil desain.

Page 5: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Prinsip prinsip dalam merancang user interface

Berikut ini prinsip-prinsip UID:User familiarity / Mudah dikenali : gunakan istilah, konsep dan kebiasaan user bukan komputer (misal: sistem perkantoran gunakan istilah letters, documents, folders bukan directories, file, identifiers. -- jenisdocument open officeConsistency/ selalu begitu : Konsisten dalam operasi danistilah di seluruh sistem sehingga tidak membingungkan. -- layout menu di open office mirip dgn layout menu diMS office.Minimal surprise / Tidak buat kaget user : Operasi bisadiduga prosesnya berdasarkan perintah yang disediakan.

Page 6: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Recoverability/pemulihan : Recoverability ada duamacam: Confirmation of destructive action (konfirmasiterhadap aksi yang merusak) dan ketersediaan fasilitaspembatalan (undo)User guidance/ bantuan : Sistem manual online, menu help, caption pada icon khusus tersediaUser diversity/keberagaman : Fasilitas interaksi untuktipe user yang berbeda disediakan. Misalnya ukuranhuruf bisa diperbesar

Page 7: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

User Interaction (Interaksi pengguna)

Perancang sistem menghadapi dua masalah penting yaitu:Bagaimana informasi dari user bisa disediakan untuksistem komputer misalnya pada saat input dataBagaimana informasi dari sistem komputer ditampilkanuntuk user hasil dari pemrosesan data

User interface yang baik harus menyatukan interaksipengguna (user interaction) dan penyajian informasi(information presentation).

Page 8: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Ada 5 tipe utama interaksi untuk user interaction:

1. Direct manipulationpengoperasian secara langsung: interaksi langsungdengan objek pada layar. Misalnya delete file denganmemasukkannya ke trash. Contoh: Video games.

Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehinggakesalahan terdeteksi dan diperbaiki dengan cepatKekurangan : Interface tipe ini rumit dan memerlukanbanyak fasilitas pada sistem komputer, cocok untukpenggambaran secara visual untuk satu operasi atauobjek

Page 9: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

2. Menu selectionpilihan berbentuk menu: Memilih perintah dari daftaryang disediakan. Misalnya saat click kanan dan memilihaksi yang dikehendaki.Kelebihan : User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah.Kekurangan :Tidak ada logika AND atau OR. Perlu adastruktur menu jika banyak pilihan. Menu dianggaplambat oleh expert user dibanding command language.

3. Form fill-in pengisian form : Mengisi area-area padaform. Contoh: Stock control.Kelebihan : Masukan data yang sederhana. MudahdipelajariKekurangan : Memerlukan banyak tempat di layar. Harus menyesuaikan dengan form manual dankebiasaan user.

Page 10: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

4. Command language perintah tertulis: Menuliskanperintah yang sudah ditentukan pada program. Contoh: operating system.Kelebihan : Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa diterapkan padaterminal yang murah.Kombinasi perintah bisa dilakukan. Misal copy file dan rename nama file.Kekurangan:Perintah harus dipelajari dan diingat carapenggunaannya, tidak cocok untuk user biasa. Kesalahan pakai perintah sering terjadi. Perlu adasistem pemulihan kesalahan. Kemampuan mengetikperlu.

Page 11: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

5. Natural languageperintah dengan bahasa alami: Gunakan bahasa alamiuntuk mendapatkan hasil. Contoh: search engine diInternet.Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya katakunci yang kita tentukan untuk dicari oleh search engine. Ada kebebasan menggunakan kata-kata.Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan maka akan memerlukan banyakpengetikan.

Page 12: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Penyajian Informasi (Information Presentation)

Sistem yang interaktif pasti menyediakan cara untukmenyajikan informasi untuk pengguna. Penyajian informasibisa berupa penyajian langsung dari input yang diberikan(seperti teks pada word processing) atau disajikan dengangrafik.Beberapa faktor berikut adalah hal yang perlu diperhatikansebelum menentukan bentuk penyajian informasi:

Apakah pengguna perlu informasi dengan ketepatantinggi atau data yang saling berhubungan?

Seberapa cepat nilai informasi berubah? Harus adaindikasi perubahan seketika?

Page 13: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Apakah pengguna harus memberi respon padaperubahan?Apakah pengguna perlu melakukan perubahan padainformasi yang disajikan?Apakah informasi berupa teks atau numerik? Nilairelatif perlu atau tidak?

Informasi bisa bersifat statis atau dinamis ketikadisajikan, masing-masing baik dengan karakteristikyang berbeda dan kebutuhan yang berbeda pula:

Page 14: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

1. Static information:Ditentukan saat awal sesi. Tidak berubah selama sesiberjalan.Bisa berupa informasi numeris atau teks Chart di MS-ExcelDisajikan dengan jenis huruf khusus yang mudahdibaca atau diberi highlight dengan warna tertentuseperti pada Gambar 4 atau menggunakan icon yang mewakili

2. Dynamic information:Perubahan terjadi selama sesi berlangsung danperubahan harus dikomunikasikan/ditunjukkan ke userBisa berupa informasi numeris atau teks. Contoh : Defragmentation, scanning virus, download

Page 15: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Informasi dalam bentuk teks bersifat tepat dan berubahsecara lambat sedangkan informasi dengangambar/grafik mampu menjelaskan hubungan antargambar, data bisa berubah dengan cepat. Seperti padaGambar 2, informasi yang sama disajikan dengan duacara yang berbeda. Jika yang dibutuhkan adalahhubungan antar data pada bulanbulan tersebut, makainformasi dengan grafik memberikan informasi tentanghubungan tersebut lebih cepat dari pada informasi yang disajikan dengan teks dan numerik. Informasi dengannumerik dapat juga disajikan dengan cara digital atauanalog dengan karakteristik sebagai berikut:

Page 16: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

1. Digital presentationa. Singkat hanya perlu sedikit tempat pada layarb. Ketepatan nilai ditunjukkan

2. Analogue presentationa. Nilai terlihat sambil lalub. Untuk menunjukkan nilai relatifc. Mudah melihat data nilai yang berbeda

Page 17: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Nilai-nilai relatif misalnya seperti pada Gambar 3. Selainnilai yang disajikan relatif, informasinya bersifat dinamis, karena berubah saat sesi berjalan. Untuk nilai digital kitabiasanya gunakan untuk menunjukkan jam pada jam sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak terjadi secara cepat.

Page 18: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan
Page 19: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Penggunaan Warna pada desain Interface

Warna menambah dimensi ekstra pada suatu interface dan membantu user memahami struktur yang kompleks

Bisa dipakai untuk mewarnai-terang (higlight) hal-halkhusus

Kesalahan umum dalam penggunaan warna padadesain UI:

• Menggunakan warna untuk mengkomunikasikan arti--merah bisa jadi peringatan atau ada kesalahan

• Terlalu banyak gunakan macam warna

Page 20: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Dalam menggunakan warna pada desain interface adabeberapa petunjuk yang dapat diikuti seperti berikut ini:

1. Hindari penggunaan terlalu banyak warna2. Gunakan kode warna untuk mendukung operasi3. Pengguna bisa kendalikan warna untuk kode4. Desain monochrome kemudian tambahkan warna5. Gunakan warna kode secara konsisten6. Hindari pasangan warna yang tidak cocok/norak7. Gunakan warna untuk menunjukkan perubahan status

Page 21: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

User SupportUser guidance meliputi semua fasilitas sistem untukmendukung user termasuk on-line help, error messages, user manual. User guidance perlu disatukan dengan UI untuk bantu user saat membutuhkan informasi tentangsistem atau saat ada kesalahan. Help System dan sistemmessage (pesan kesalahan) adalah bentuk dari user guidance.Error Messages sangat penting, karena error message yang buruk cenderung ditolak oleh user dan error message sebaiknya berpedoman pada faktor-faktor pada Tabel 2.

Page 22: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan
Page 23: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan
Page 24: USER INTERFACE DESIGN (UID) - lambang.files.wordpress.com · Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan

Pesan kesalahan pada Gambar 5 ada dua macam: berorientasi pada sistem dan berorientasi pada pengguna. Pada pesan yang berorientasi pada sistem, pesanmembuat pengguna merasa tidak berdaya karena tidakada jalan keluar yang jelas, bahasa yang digunakanadalah bahasa teknis yang tidak berarti apa-apa. Padapesan yang berorientasi pada pengguna, pesan lebih jelasdan memberikan alternatif jalan keluar. Sekalipuninformasi yang diberikan lebih banyak dan terkesanpenuh, tapi pengguna merasa tertolong.

Diadaptasi dari:1. Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001