Anda di halaman 1dari 33

Interface Design

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.

2
Interface Design - RPL
4/2/2019 2
Rekayasa Perangkat Lunak
Fokus Desain Antarmuka
* SEPA 8th ed, Roger S. Pressman
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.

3
Interface Design - RPL
4/2/2019 3
Rekayasa Perangkat Lunak
Three Golden Rules Dalam Desain Antarmuka

(Theo Mandel, 97)


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

4
Interface Design - RPL 4
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
Interface Design - RPL
4/2/2019 5
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)

6
Interface Design - RPL
4/2/2019 6
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

7
Interface Design - RPL
4/2/2019 7
Rekayasa Perangkat Lunak
Eight Golden Rules of Interface Design
[Shneiderman]

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.

1#4
Rekayasa Perangkat Lunak 8
Eight Golden Rules of Interface Design
[Shneiderman]

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.
2#4
Rekayasa Perangkat Lunak 9
Eight Golden Rules of Interface Design
[Shneiderman]

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..

3#4

Rekayasa Perangkat Lunak 10


Eight Golden Rules of Interface Design
[Shneiderman]

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.
4#4

Rekayasa Perangkat Lunak 11


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

12
Interface Design - RPL
4/2/2019 12
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

* SEPA 8th ed, Roger S. Pressman


13
Interface Design - RPL
4/2/2019 13
Rekayasa Perangkat Lunak
2)-Model Desain

 Model desain dari seluruh sistem menggabungkan data,


arsitektur, antarmuka, dan representasi prosedural dari
perangkat lunak.

14
Interface Design - RPL
4/2/2019 14
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

15
Interface Design - RPL
4/2/2019 15
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

16
Interface Design - RPL
4/2/2019 16
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)

17
Interface Design - RPL
4/2/2019 17
Rekayasa Perangkat Lunak
Proses Perancangan Antarmuka

18
Interface Design - RPL
4/2/2019 18
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

19
Interface Design - RPL
4/2/2019 19
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

20
Interface Design - RPL
4/2/2019 20
Rekayasa Perangkat Lunak
Implementasi

 Konstruksi Antarmuka biasanya dimulai dengan pembuatan


prototipe-prototipe yang memungkinkan penggunaan
skenario untuk dievaluasi

21
Interface Design - RPL
4/2/2019 21
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

22
Interface Design - RPL
4/2/2019 22
Rekayasa Perangkat Lunak
Example – The Main Window

23
Interface Design - RPL
4/2/2019 23
Rekayasa Perangkat Lunak
Example: Entry Form, table, etc

Label Field Table / Query Validation Explanation

24
Interface Design - RPL
4/2/2019 24
Rekayasa Perangkat Lunak
Detail Design

ID_Object Type Name Description


FieldBox1 FieldBox Dipenuhi Diisi dengan penjelasan tentang
dengan string reaksi sistem, misalnya, apa layar
yang muncul di terbuka, di mana tautan berjalan.
layar. 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

25
Interface Design - RPL
4/2/2019 25
Rekayasa Perangkat Lunak
Screen Design

26
Interface Design - RPL
4/2/2019 26
Rekayasa Perangkat Lunak
27
Interface Design - RPL
4/2/2019 27
Rekayasa Perangkat Lunak
Tools for Screen Design (Mockup Design)

Beberapa Tools yang dapat


digunakan untuk desain antar
muka (screen)

http://mashable.com/2012/06/07/mockup-tools/

28
Interface Design - RPL
4/2/2019 28
Rekayasa Perangkat Lunak
Rekayasa Perangkat Lunak 29
Rekayasa Perangkat Lunak 30
Rekayasa Perangkat Lunak 31
Rekayasa Perangkat Lunak 32
MENCARI UI/UX TOOLS TERBAIK

1. Mashable.com
2. Medium.theuxblog.com
3. Creative.bloq.com
4. Blog.prototypr.io

Rekayasa Perangkat Lunak 33