Interface Design
2 Rekayasa Perangkat Lunak
Desain Antarmuka (
Interface Design
)
Desain Antaramuka (Interface Design) atau Desain Antarmuka
Pengguna (User Interface Design) atau rekayasa antarmuka pengguna
(User Interface Engineering) adalah desain untuk komputer, peralatan,
mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan
situs web yang berfokus pada pengalaman pengguna (User
Experience) dan interaksi.
Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat
interaksi pengguna sesederhana dan seefisien mungkin, dalam hal
mencapai tujuan pengguna—atau apa yang sering disebut dengan
user-centered design.
5/24/2018
3 Rekayasa Perangkat Lunak
Fokus Desain Antarmuka
1. Desain antarmuka Inter-modular
Dikendalikan oleh aliran data antara modul
Berkaitan erat dengan desain tingkat komponen
2. Desain antarmuka eksternal
Antarmuka antar aplikasi
Antarmuka antar perangkat lunak dan produsen dan / atau konsumen informasi non-manusia
3. Desain antarmuka manusia-komputer
Komunikasi antara manusia dan mesin
Manusia sebagai pengguna memiliki berbagai karakter yang lebih sulit dipelajari.
5/24/2018
Interface Design - RPL 3
4 Rekayasa Perangkat Lunak
Three Golden Rules Dalam Desain Antarmuka
Tiga Aturan Emas dalam desain antarmuka pengguna
1. Tempatkan pengguna sebagai pengendali
Apa yang saya inginkan adalah sebuah sistem yang membaca pikiran saya. Dia tahu apa yang ingin saya lakukan sebelum saya butuhkan dan membuat mudah untuk saya untuk melakukannya
2. Kurangi beban memori pengguna
Semakin banyak user harus mengingat, semakin banyak interaksi kesalahan dengan sistem. Sistem seharusnya mengingat
3. Buat antarmuka yang bersifat konsisten
Interface Design - RPL 4
5 Rekayasa Perangkat Lunak
R1-Tempatkan Pengguna sebagai Pengendali
Mendefinisikan interaksi sehingga tidak memaksa pengguna untuk
melakukan aksi-aksi yang tidak diperlukannya dan tidak dikehendakinya
Sediakan interaksi yang bersifat fleksibel (pilihan interaksi lain) e.g.:
keyboard, mouse, pena digitizer, layar sentuh / suara
Memungkinkan interaksi pengguna yang dapat diinterupsi atau
dibatalkan
Sembunyikan hal-hal internal yang bersifat sangat teknis dari
pengguna
Rancang interaksi langsung dengan objek-objek yang
tampak di layar monitor pengguna (WYSIWYG)
5/24/2018
6 Rekayasa Perangkat Lunak
R2-Kurangi Beban Memori Pengguna
Kurangi short-term memory pengguna (menyediakan
ikon visual)
Memberi default (pilihan "reset“)
Mendefinisikan tombol pempercepat (shortcut) yang
intuitif. (Alt+P untuk printer)
Tampilan visual antarmuka pengguna harus didasarkan
pada metafora dunia nyata yang familiar (informasi buku bank, layout mesin)
Tampilan informasi dalam bentuk progresif
(informasi umum dilanjutkan dengan detail)
5/24/2018
7 Rekayasa Perangkat Lunak
R3-Antarmuka yang Konsisten
Memungkinkan pengguna untuk mengetahui hal yang
sedang dilakukan dalam konteks yang bermakna
Memelihara konsistensi antar sejumlah aplikasi yang
serupa
Jika model interaktif sebelumnya dibuat
berdasarkan harapan pengguna, jangan membuat perubahan apa pun kecuali ada alasan yang kuat
5/24/2018
8 Rekayasa Perangkat Lunak
Eight Golden Rules of Interface Design
1. Upayakan agar konsistensi.
Urutan tindakan yang konsisten harus diperlukan dalam situasi yang serupa; terminologi identik harus digunakan dalam petunjuk, menu, dan layar bantuan; dan perintah yang konsisten harus digunakan di seluruh.
2. Memungkinkan pengguna yang sering menggunakan pintasan.
Karena frekuensi penggunaan meningkat, demikian pula keinginan pengguna untuk mengurangi jumlah interaksi dan untuk meningkatkan laju interaksi. Singkatan, tombol fungsi, perintah tersembunyi, dan
fasilitas makro sangat membantu pengguna ahli.
=> 3.
9 Rekayasa Perangkat Lunak
Eight Golden Rules of Interface Design
3. Menawarkan umpan balik informatif.
Untuk setiap tindakan operator, harus ada umpan balik sistem. Untuk tindakan yang sering dan kecil, responsnya bisa
sederhana, sedangkan untuk tindakan yang jarang dan besar, responsnya harus lebih substansial.
4. Desain dialog untuk menghasilkan penutupan.
Urutan tindakan harus diatur dalam kelompok-kelompok dengan awal, tengah, dan akhir. Umpan balik informatif pada
penyelesaian sekelompok tindakan memberi operator kepuasan pencapaian, rasa lega, sinyal untuk menjatuhkan rencana dan pilihan kontijensi dari pikiran mereka, dan indikasi bahwa cara yang jelas untuk mempersiapkan kelompok berikutnya tindakan.
=> 5.
10 Rekayasa Perangkat Lunak
Eight Golden Rules of Interface Design
5. Tawarkan penanganan kesalahan sederhana.
Sebisa mungkin, rancang sistem agar pengguna tidak dapat
membuat kesalahan serius. Jika kesalahan dibuat, sistem harus dapat mendeteksi kesalahan dan menawarkan mekanisme yang sederhana dan mudah dipahami untuk menangani kesalahan.
6. Memungkinkan pembalikan aksi yang mudah.
Fitur ini mengurangi kecemasan, karena pengguna tahu bahwa kesalahan dapat diurungkan; dengan demikian mendorong
eksplorasi pilihan yang tidak dikenal. Unit reversibilitas dapat berupa satu tindakan, entri data, atau grup tindakan lengkap..
=> 7.
11 Rekayasa Perangkat Lunak
Eight Golden Rules of Interface Design
7. Mendukung lokus kontrol internal.
Operator berpengalaman sangat menginginkan pengertian bahwa mereka bertanggung jawab atas sistem dan bahwa sistem menanggapi tindakan mereka. Rancang sistem untuk membuat pengguna menjadi pemrakarsa tindakan daripada responden.
8. Kurangi beban memori jangka pendek.
Keterbatasan pemrosesan informasi manusia dalam memori jangka pendek menuntut agar tampilan tetap sederhana, beberapa tampilan halaman dikonsolidasikan, frekuensi
gerakan-jendela dikurangi, dan waktu pelatihan yang cukup diberikan untuk kode, mnemonik, dan urutan tindakan.
12 Rekayasa Perangkat Lunak
Model Antarmuka Pengguna
Empat model yang berbeda memainkan peranan saat suatu antarmuka pengguna dianalisis dan dirancang:
1) Pengguna menentukan Model Pengguna
2) SW engineer membuat Model Desain/Perancangan
3) End-user membangun Model Mental atau Persepsi Sistem
4) Pengembang membuat Model Implementasi
5/24/2018
13 Rekayasa Perangkat Lunak
1)-Model Pengguna
Model Pengguna dibuat untuk mendapatkan profil para
pengguna akhir sistem (end user)
Pengguna dapat dikelompokkan sebagai berikut:
Pengguna Pemula
Pengguna berpengetahuan yang tidak terlalu sering menggunakan sistem
Pengguna berpengetahuan yang sering menggunakan sistem
5/24/2018
Interface Design - RPL 13
14 Rekayasa Perangkat Lunak
2)-Model Desain
Model desain dari seluruh sistem menggabungkan data,
arsitektur, antarmuka, dan representasi prosedural dari perangkat lunak.
5/24/2018
15 Rekayasa Perangkat Lunak
3)-Model Mental
Model Mental (Perspeksi Sistem) adalah gambaran sistem
yang ada di kepala para pengguna akhir
Tingkat ketepatan deskripsi sangat bergantung pada
profil-profil pengguna seperti dibahas sebelumnya
5/24/2018
16 Rekayasa Perangkat Lunak
4)-Model Implementasi
Model Implementasi pada dasarnya menggabungkan
manifestasi-manifestasi yang tampak dari luar sistem
berbasis komputer, digabungkan dengan
informasi-informasi pendukung lainnya (buku-buku, video, dll)
yang mendiskripsikan sintak-sintak dan semantik
antarmuka pengguna
Saat model implementasi dan model mental pengguna
sesuai, para pengguna secara umum akan
merasa nyaman dengan perangkat lunak dan dapat
menggunakannya secara efektif
5/24/2018
17 Rekayasa Perangkat Lunak
Analisis dan Perancangan Antarmuka Pengguna
Proses analisa dan perancangan Interface bersifat Iteratif
dan dapat direpresentasikan dengan model Spiral
Analisa & Perancangan Interface mencakup 4 aktifitas
kerangka kerja:
• User, Task & Environment Analysis (Analisis Antarmuka)
• Interface Design (Perancangan Antarmuka)
• Implementation (Konstruksi Antarmuka)
• Interface Validation (Validasi Antarmuka)
5/24/2018
18 Rekayasa Perangkat Lunak
Proses Perancangan Antarmuka
5/24/2018
19 Rekayasa Perangkat Lunak
Analisis Antarmuka
Orang-orang (para pengguna akhir) yang akan berinteraksi
dengan sistem melalui antarmuka pengguna yang dimilikinya
Pekerjaan-pekerjaan yang harus dilakukan oleh para
pengguna akhir
Isi yang harus dipresentasikan sebagai bagian dari suatu
antarmuka pengguna
Lingkungan tempat pekerjaan-pekerjaan akan dikerjakan
5/24/2018
20 Rekayasa Perangkat Lunak
Desain Antarmuka
Sasaran dari desain antarmuka pada dasarnya adalah untuk
mendefinisikan sejumlah objek antarmuka pengguna dan
aksi-aksi/tindakan (serta representasinya pada layar) yang
memungkinkan pengguna untuk melakukan semua pekerjaan yang
telah didefinisikan
5/24/2018
21 Rekayasa Perangkat Lunak
Implementasi
Konstruksi Antarmuka biasanya dimulai dengan pembuatan
prototipe-prototipe yang memungkinkan penggunaan
skenario untuk dievaluasi
5/24/2018
22 Rekayasa Perangkat Lunak
Validasi Antarmuka
Validasi berfokus pada:
• Kemampuan antarmuka pengguna untuk mengimplementasikan
setiap pekerjaan pengguna secara benar
• Tingkat kemudahan penggunaan antarmuka pengguna
• Penerimaan pengguna pada suatu antarmuka sebagai alat yang
bermanfaat dalam pekerjaan-pekerjaan mereka
5/24/2018
23 Rekayasa Perangkat Lunak
Example – The Main Window
5/24/2018
24 Rekayasa Perangkat Lunak
Example: Entry Form, table, etc
Label Field Table / Query Validation Explanation
5/24/2018
25 Rekayasa Perangkat Lunak
Detail Design
ID_Object Type Name Description
FieldBox1 FieldBox Dipenuhi
dengan string yang muncul di layar.
Diisi dengan penjelasan tentang reaksi sistem, misalnya, apa layar terbuka, di mana tautan berjalan. Ketika datang ke kode yang cukup rumit, lihat algoritma yang
dijelaskan di atas.
Button1 Button OK Ketika diklik, akan memungkinkan prosesnya AlgoXXX.
RTF1 RTF Box Konten teks disimpan di File xxx
5/24/2018
26 Rekayasa Perangkat Lunak
Screen Design
5/24/2018
27 Rekayasa Perangkat Lunak
5/24/2018
28 Rekayasa Perangkat Lunak
http://mashable.com/2012/06/07/mockup-tools/ Beberapa Tools yang dapat
digunakan untuk desain antar muka (screen)
Tools for Screen Design (Mockup Design)
5/24/2018
32 Rekayasa Perangkat Lunak