Interface Design

Perancangan Antarmuka

• Elemen-elemen perancangan
antarmuka untuk perangkat lunak
menjelaskan Bagaimana arus
informasi masuk dan keluar dari
sistem, dan bagaimana arus
informasi tersebut
berkomunikasi diantara
komponen yang didefinisikan
sebagai bagian dari arsitektur.
* SEPA 8 ed, Roger S. Pressman
th

10/29/2024 Interface Design - RPL - NH@2016 2

 Fokus Perancangan
Antarmuka
• Desain antarmuka Inter-modular
– Dikendalikan oleh aliran data antara modul
– Berkaitan erat dengan desain tingkat komponen
• Desain antarmuka eksternal
– Antarmuka antar aplikasi
– Antarmuka antar perangkat lunak dan produsen
dan / atau konsumen informasi non-manusia
• Desain antarmuka manusia-komputer
– Komunikasi antara manusia dan mesin
– Manusia sebagai pengguna memiliki berbagai
karakter yang lebih sulit dipelajari.
* SEPA 8th ed, Roger S. Pressman

10/29/2024 Interface Design - RPL - NH@2016 3

 3 Aturan Emas
• 3 aturan emas Theo Mandel [Man97]
dalam perancangan 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 Interface
10/29/2024 kesalahan dengan sistem. Sistem
Design - RPL - NH@2016 4
 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
10/29/2024 Interface Design - RPL - NH@2016 5
tampak di layar monitor pengguna (WYSIWYG)
 Kurangi Beban Memori
Pengguna
• Kurangi short-term memory pengguna
(menyediakan ikon visual)
• Memberi default (pilihan "reset“)
• Mendefinisikan tombol pemercepat
(shortcut) yang intuitif. (Alt+P untuk
printer)
• Tampilan visual antarmuka pengguna harus
didasarkan pada metafora dunia nyata
yang familiar (informasi buku bank, layout
mesin)
• 10/29/2024
Tampilan informasi dalam bentuk progresif6
Interface Design - RPL - NH@2016
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
10/29/2024 Interface Design - RPL - NH@2016 7
Model Antarmuka Pengguna

• Empat model yang berbeda

memainkan peranan saat suatu
antarmuka pengguna dianalisis dan
dirancangan:
– Pengguna menentukan Model Pengguna
– SW engineer membuat Model
Perancangan
– End-user membangun Model Mental
atau Persepsi Sistem
– Pengembang membuat Model
10/29/2024 Interface Design - RPL - NH@2016 8
Implementasi
 Model Pengguna
• Model Pengguna dibuat untuk
mendapatkan profil para pengguna
akhir sistem (end user)
• Pengguna dapat dikelompokkan
sebagai berikut [Shn04]:
– Pengguna Pemula
– Pengguna berpengetahuan yang tidak
terlalu sering menggunakan sistem
– Pengguna berpengetahuan yang sering
menggunakan sistem
* SEPA 8th ed, Roger S. Pressman
10/29/2024 Interface Design - RPL - NH@2016 9
 Model Desain

• Model desain dari seluruh sistem

menggabungkan data, arsitektur,
antarmuka, dan representasi
prosedural dari perangkat lunak.

10/29/2024 Interface Design - RPL - NH@2016 10

 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

10/29/2024 Interface Design - RPL - NH@2016 11

 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
10/29/2024 Interface Design - RPL - NH@2016 12
 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
10/29/2024
(Validasi Antarmuka)
Interface Design - RPL - NH@2016 13
 Proses Perancangan
Antarmuka

10/29/2024 Interface Design - RPL - NH@2016 14

 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-
10/29/2024 Interface Design - RPL - NH@2016 15
 Perancangan Antarmuka

• Sasaran dari perancangan

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
10/29/2024 Interface Design - RPL - NH@2016 16
 Implementasi

• Konstruksi Antarmuka biasanya

dimuai dengan pembuatan prototipe-
prototipe yang memungkinkan
penggunaan skenario untuk
dievaluasi

10/29/2024 Interface Design - RPL - NH@2016 17

 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
10/29/2024 Interface Design - RPL - NH@2016 18
 Example – The Main
Window

10/29/2024 Interface Design - RPL - NH@2016 19

 Example: Entry Form,
table, etc

Label Field Table / Query Validation Explanation

10/29/2024 Interface Design - RPL - NH@2016 20

 Detail Design
ID_Object Type Name Description
FieldBox1 FieldBox Filled with Filled with an explanation of the
strings that system reaction, for example, what
appear on- the screen opens, where the link
screen goes. When it comes to a code which
is quite complicated, refer to the
algorithm described above.
Button1 Button OK When clicked, will enable the process
AlgoXXX.
RTF1 RTF Box Text contents stored on File xxx

10/29/2024 Interface Design - RPL - NH@2016 21

 Screen Design

10/29/2024 Interface Design - RPL - NH@2016 22

10/29/2024 Interface Design - RPL - NH@2016 23
 Tools for Screen Design
([Link]

10/29/2024 Interface Design - RPL - NH@2016 24

10/29/2024 Interface Design - RPL - NH@2016 25
 TERIMA KASIH

10/29/2024 Interface Design - RPL - NH@2016 26