rekayasa perangkat lunakdinus.ac.id/repository/docs/ajar/rpl-interface_design.pdf · rekayasa...
TRANSCRIPT
2Rekayasa 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/2018Interface Design - RPL 2
3Rekayasa 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/2018Interface Design - RPL 3
* SEPA 8th ed, Roger S. Pressman
4Rekayasa 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
(Theo Mandel, 97)
5Rekayasa Perangkat Lunak
R1-Tempatkan Pengguna sebagai Pengendali
Mendefinisikan interaksi sehingga tidak memaksa pengguna untukmelakukan aksi-aksi yang tidak diperlukannya dan tidakdikehendakinya
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 daripengguna
Rancang interaksi langsung dengan objek-objek yangtampak di layar monitor pengguna (WYSIWYG)
5/24/2018Interface Design - RPL 5
6Rekayasa Perangkat Lunak
R2-Kurangi Beban Memori Pengguna
Kurangi short-term memory pengguna (menyediakanikon visual)
Memberi default (pilihan "reset“)
Mendefinisikan tombol pempercepat (shortcut) yang intuitif. (Alt+P untuk printer)
Tampilan visual antarmuka pengguna harus didasarkanpada metafora dunia nyata yang familiar (informasibuku bank, layout mesin)
Tampilan informasi dalam bentuk progresif(informasi umum dilanjutkan dengan detail)
5/24/2018Interface Design - RPL 6
7Rekayasa 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/2018Interface Design - RPL 7
8Rekayasa 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.
[Shneiderman]
9Rekayasa 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.
[Shneiderman]
10Rekayasa 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.
[Shneiderman]
11Rekayasa 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.
[Shneiderman]
12Rekayasa 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/2018Interface Design - RPL 12
13Rekayasa 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/2018Interface Design - RPL 13* SEPA 8th ed, Roger S. Pressman
14Rekayasa Perangkat Lunak
2)-Model Desain
Model desain dari seluruh sistem menggabungkan data,
arsitektur, antarmuka, dan representasi prosedural dari
perangkat lunak.
5/24/2018Interface Design - RPL 14
15Rekayasa 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/2018Interface Design - RPL 15
16Rekayasa 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/2018Interface Design - RPL 16
17Rekayasa 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/2018Interface Design - RPL 17
19Rekayasa 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/2018Interface Design - RPL 19
20Rekayasa 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/2018Interface Design - RPL 20
21Rekayasa Perangkat Lunak
Implementasi
Konstruksi Antarmuka biasanya dimulai dengan pembuatan
prototipe-prototipe yang memungkinkan penggunaan
skenario untuk dievaluasi
5/24/2018Interface Design - RPL 21
22Rekayasa 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/2018Interface Design - RPL 22
24Rekayasa Perangkat Lunak
Example: Entry Form, table, etc
Label Field Table / Query Validation Explanation
5/24/2018Interface Design - RPL 24
25Rekayasa 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/2018Interface Design - RPL 25
28Rekayasa 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/2018Interface Design - RPL 28
32Rekayasa Perangkat Lunak
http://mashable.com/2012/06/07/mockup-tools/