Desain Antarmuka

(User Interface Design)

Citra Wiguna, S.Kom., M.Kom

 Capaian Pembelajaran
• Membuat Desain Interface sistem dengan
benar
 Materi
• Definisi desain antarmuka
• Prinsip dasar desain antarmuka
• Desain input
• Desain Output
 Desain Antarmuka (1)
• Desain antarmuka adalah proses mendefinisikan
bagaimana sistem akan berinteraksi dengan
entitas eksternal (misalnya : pelanggan,
pemasok, sistem lain)

• Mendefinisikan cara di mana pengguna akan

berinteraksi dengan sistem (bagaimana
memberikan input dan mendapat output serta
bagaimana sistem menerima dan menjalankan
perintah)
Desain Antarmuka (2)
Desain Antarmuka (3)
Desain Antarmuka (4)
 User Interface Problems
• Terlalu banyak menggunakan istilah komputer
• Desain yang tidak jelas
• Tidak mampu membedakan antara tindakan
pilihan (“apa yang harus saya lakukan
selanjutnya”)
• Pendekatan pemecahan masalah yang tidak
konsisten
• Ketidakkonsistenan desain
 Prinsip Desain Antarmuka (1)
Dari buku General Principles Of UI Design yang ditulis
oleh Deborah J. Mayhew, ada 17 prinsip umum desain
antarmuka.

1. User Compatibility (Kompatibilitas Pengguna)

2. Product Compatibility (Kompatibilitas Produk)
3. Task Compatibility
4. Work Flow Compatibility
 Prinsip Desain Antarmuka (2)
5. Consistency
6. Familiarity
7. Simplicity
8. Direct Manipulation
9. Control
10.WYSIWYG (What You See Is What You Get)
11.Flexibility
12.Responsiveness
 Prinsip Desain Antarmuka (3)
13. Invisible Technology
14. Robustness
15. Protection
16. Ease of Learning
17. Ease of Use
1. User Compatibility (1)
 1. User Compatibility (2)
• Yaitu kesesuaian tampilan dengan tipikal dari
user, karena berbeda user bisa jadi kebutuhan
tampilannya berbeda.
• Misalnya, jika aplikasi diperuntukkan bagi
anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
 2. Product Compatibility
Produk aplikasi yang dihasilkan juga harus
sesuai, memiliki tampilan yang sama/serupa,
baik untuk user yang awam maupun ahli.
 3. Task Compatibility
• Fungsional dari task/tugas yang ada harus
sesuai dengan tampilannya.
• Misal untuk pilihan report, orang akan
langsung mengartikan akan ditampilkan
laporan.
 4. Work Flow Compatibility
• Aplikasi bisa dalam satu tampilan untuk
berbagai pekerjaan, dengan pertimbangan
tidak terlalu overload.
 5. Consistency (1)
• Desain harus konsisten
• Contoh : Jika anda menggunakan istilah save
yang berarti simpan, maka gunakan terus
istilah tersebut
5. Consistency (2)
 6. Familiarity
• Faktor kebiasaan, mudah mengenali.
• Icon disket akan lebih familiar jika digunakan
untuk perintah menyimpan.
 7. Simplicity (Sederhana)
Aplikasi harus meringkas segala sesuatu yang
ada menjadi lebih sederhana sekaligus
bermakna
Logo IBM by Paul Rand
 8. Direct Manipulation
Penyajian langsung aktifitas kepada pengguna
(user) sehingga aktifitas akan dikerjakan oleh
komputer ketika pengguna memberikan
instruksi langsung yang ada pada layar
komputer.
Contoh : Untuk mempertebal huruf, cukup
dengan ctrl+B.
 9. Control
Berikan kontrol penuh pada user, tipikal user
biasanya tidak mau terlalu banyak aturan
10. WYSIWYG (What You See Is What You Get)

• Adanya korespondensi satu ke satu antara

informasi di layar dengan informasi di printed-
output atau file.
• Buatlah tampilan mirip seperti kehidupan
nyata user dan pastikan fungsionalitas yang
ada berjalan sesuai tujuan.
• Contoh : mengetik huruf A yang keluaran di
layar adalah huruf A dan kemudian jika di Print
ya Hasilnya juga Huruf A
 11. Flexibility
• Tool/alat yang dapat digunakan user dan
jangan hanya terpaku pada keyboard atau
mouse saja.
 12. Responsiveness
• Tampilan yang di buat harus ada responnya.
• Misalnya, tampilan please wait 68%… atau
loading bar, dsb
 13. Invisible Technology
• User tidak penting mengetahui algoritma apa
yang digunakan.
• Contohnya untuk mengurutkan pengguna
tidak perlu mengetahui algoritma yang
digunakan programmer (max sort, bubble
sort, quick sort, dst)
 14. Robustness (Handal)
• Dapat mengakomodir kesalahan user, jangan
menunjukkan eror, apalagi crash.
• Misalnya, pengguna salah menginputkan
format email, dapat diatasi dan diberikan
feedback
 15. Protection
• Melindungi user dari kesalahan yang umum
dilakukan.
• Misalnya, dengan memberikan fitur back atau
undo.
 16. Ease of Learning
• Aplikasi mudah dipelajari bagi user novice
(awam).
• Hal ini akan memberikan motivasi kepada user
tersebut untuk menggunakannya.
 17. Ease of Use
Membuat sistem yang mudah digunakan untuk
segala kategori pengguna (awam atau ahli)
 Challenge!
Carilah 2 aplikasi dimana :
1. Anda sangat menyukai desain antarmukanya
2. Anda sangat tidak suka desain
anatarmukanya
(Sesuaikan dengan 17 prinsip desain antarmuka)
Presentasikan hasil observasi anda!
 Proses Desain Antarmuka (1)
1. Menggunakan User Scenario
 Proses Desain Antarmuka (2)
2. Membuat Struktur desain antarmuka
• Desain struktur antarmuka mendefinisikan
komponen dasar dari antarmuka dan bagaimana
mereka bekerja sama untuk menyediakan
fungsionalitas untuk pengguna.

• Diagram struktur antarmuka

(ISD) digunakan untuk menunjukkan bagaimana
semua layar, bentuk, dan laporan yang digunakan
oleh sistem yang terkait dan bagaimana pengguna
bergerak dari satu ke yang lain
 Proses Desain Antarmuka (3)
3. Membuat Prototype

4. Evaluasi
• Heuristic Evaluation : Membandingkan dengan prinsip dasar
UI
• Walk-through Evaluation : Meeting dengan user
• Usability Testing
 Desain Input (1)
• Tipe Input : text, number, selection box,
listbox, combo box, RFID/barcode scan, dsb.
 Desain Input (2)
• Validasi input : cek format, cek database, dsb
 Desain Output (1) : Prinsip
1. Harus dipahami terlebih dahulu, output
kegunaannya apa
2. Mengatur jumlah informasi yang ditampilkan
(jangan sampai overload karena terlalu
banyak informasi)
3. Menghindari bias (interpretasi ganda)
 Desain Output (2) : Tipe
• Laporan rinci
• Tabel
• Grafik
• Gambar/Media Lainnya
 Team Session
• Buatlah desain/perancangan antarmuka dari
sistem yang akan dikembangkan
• Buatlah dengan terlebih dahulu
mendefinisikan user scenario dari sistem anda
 Referensi
[1] Dennis, Alan., Barbara Halley Wixom and
Roberta M. Roth. 2012. System Analysis and
Design 5th Edition. John Willey and Sons, Inc.
New Jersey
[2] Satzinger, John., Robert Jackson and Stephen
Burd. 2010. System Analysis and Design in
Changing World 5th Edition. Cengange
Learning. Boston.