10.

Desain Antarmuka
Mata Kuliah : Rekayasa Perangkat Lunak 1
Kode MK : AK - 045226

Apa itu UI?

Desain antarmuka adalah bagian penting dari
proses desain perangkat lunak. Desain
antarmuka pengguna harus menjamin interaksi
antara manusia dan mesin.
UI harus menyediakan operasi dan kontrol dari
mesin yang efektif. Untuk mencapai potensi
penuh, antarmuka pengguna harus dirancang
agar sesuai dengan kemampuan, pengalaman,
dan harapan para penggunanya.

Bab 10. Desain Antarmuka

UI vs UX
UI

fokus kepada bagaimana seluruh tampilan

sebuah produk dilihat dan ditata dari
antarmuka pengguna.
Sedangkan UX fokus bagaimana merasakan
pengalaman dari sebuah produk dilihat dari
antarmuka pengguna.

Bab 10. Desain Antarmuka

Prinsip Dasar UI
Learnability.
User

familiarity
Consistency.
Minimalsurprise
Recoverability.
User guidance
User diversity
Bab 10. Desain Antarmuka

Learnability
Perangkat

lunak ini harus mudah untuk

dipelajari sehingga pengguna dapat dengan
cepat mulai bekerja dengan perangkat lunak.

Bab 10. Desain Antarmuka

User familiarity
Antarmuka

harus didasarkan pada halberorientasi pengguna? Dan konsep

daripada konsep komputer. Sebagai contoh,
sistem kantor harus menggunakan konsepkonsep seperti surat, dokumen, folder dll
daripada direktori, pengidentifikasi file, dll

Bab 10. Desain Antarmuka

Consistency
Sistem

ini harus menampilkan tingkat yang

tepat? Konsistensi. Perintah dan menu harus
memiliki format yang sama, perintah tanda
baca harus serupa, dll

Bab 10. Desain Antarmuka

Minimalsurprise
UI

tidak banyak mengejutkan pengguna.

Artinya Jika perintah beroperasi dengan cara
yang diketahui, pengguna harus dapat
memprediksi output yang dihasilkan.

Bab 10. Desain Antarmuka

Recoverability
Sistem

harus menyediakan beberapa

ketahanan dari kesalahan pengguna dan
memungkinkan pengguna untuk memulihkan
(recover) diri dari kesalahan. Contoh fasilitas
undo, konfirmasi tindakan, dll

Bab 10. Desain Antarmuka

User guidance
Beberapa

petunjuk pengguna seperti sistem

bantuan, on-line manual, dll harus disediakan

Bab 10. Desain Antarmuka

User diversity
Fasilitas

interaksi untuk berbagai jenis

pengguna harus didukung. Sebagai contoh,
beberapa pengguna kesulitan membaca
huruf kecil maka disediakan fasilitas huruf
yang lebih besar.
Antarmuka harus menyediakan mekanisme
interaksi yang sesuai untuk beragam jenis
pengguna dan untuk pengguna dengan
kemampuan yang berbeda
Bab 10. Desain Antarmuka

Topik Penting Dalam UI

Dua masalah harus diatasi dalam desain
sistem interaktif
1.How

should the user interact with the software?

2.How should information from the software be
presented to the user?
Interaksi pengguna dan penyajian informasi dapat
diintegrasikan melalui kerangka kerja yang koheren
seperti metafora antarmuka pengguna
Bab 10. Desain Antarmuka

TheDesignofUser
InteractionModalities
Question-answer
Direct

manipulation
Menu selection
Form fill-in
Command language
Natural language

Bab 10. Desain Antarmuka

Question-answer
Interaksi

pada dasarnya terbatas pada

pertukaran pertanyaan-jawaban tunggal
antara pengguna dan perangkat lunak.
Pengguna mengeluarkan pertanyaan untuk
perangkat lunak, dan perangkat lunak yang
mengembalikan jawaban atas pertanyaan.

Bab 10. Desain Antarmuka

Direct manipulation
Pengguna

berinteraksi langsung dengan

objek pada komputer. Manipulasi langsung
sering kali berisi perangkat penunjuk (seperti
mouse, trackball, atau touchscreen) yang
memanipulasi obyek dan memanggil
tindakan yang menentukan apa yang harus
dilakukan dengan objek itu.

Bab 10. Desain Antarmuka

Menu selection
Pengguna

memilih perintah dari daftar menu

perintah.

Bab 10. Desain Antarmuka

Form fill-in
Pengguna

mengisi Formulir. Kadang-kadang

formulir termasuk menu, dalam hal bentuk ini
memiliki tombol aksi bagi pengguna untuk
melakukan tindakan.

Bab 10. Desain Antarmuka

Command language
Pengguna

mengeluarkan perintah dan

memberikan parameter terkait untuk
mengarahkan software apa yang harus
dilakukan. perintah berupa perintah-perintah
komputer contoh: Terminal Linux, Command
Prompt

Bab 10. Desain Antarmuka

Natural language
Pengguna

mengeluarkan perintah dalam

bahasa alami. Artinya, bahasa alami adalah
front end untuk bahasa perintah dan diurai
dan diterjemahkan ke dalam perintah
software.

Bab 10. Desain Antarmuka

Kelebihan dan Kekurangan

Interaction
style
Direct
manipulation

Main advantages

Main disadvantages

Fast and intuitive

interaction
Easy to learn

Menu
selection

Avoids user error

Little typing
required

Form fill-in

Simple data entry

Easy to learn

May be hard to
implement
Only suitable where
there is a visual
metaphor for tasks
and objects
Slow for experienced
users
Can become complex
if many menu options
Takes up a lot of
screen space

Command
language

Powerful and
flexible

Natural
language

Accessible to
casual users
Easily extended

Hard to learn
Poor error
management
Requires more typing
Natural language
understanding
systems are unreliable
Bab 10. Desain Antarmuka

Application
examples
Video games
CAD systems

Most generalpurpose systems

Stock control,
Personal loan
processing
Operating systems,
Library information
retrieval systems
Timetable systems
WWW information
retrieval systems

Desain Presentasi Informasi

Informasi

Dijalankan pada awal sesi. tidak berubah selama

sesi berlangsung
numerik atau tekstual

Informasi

Statis

Dinamis

Perubahan selama sesi dan perubahan harus

dikomunikasikan kepada pengguna sistem
numerik atau tekstual
Bab 10. Desain Antarmuka

Alternative information
presentations
Jan
2 84 2

Feb
2 85 1

Jan

Feb

Mar
3 16 4

Ap ri l
2 78 9

May
1 27 3

Ju ne
2 83 5

May

Ju ne

4 00 0

3 00 0
2 00 0

1 00 0

Mar

Bab 10. Desain Antarmuka

Ap ri l

Analogue vs. digital

presentation
Digital

presentation

memakan sedikit ruang layar

Nilai yang tepat dapat dikomunikasikan

Analogue

presentation

Lebih mudah untuk mendapatkan kesan

Mungkin untuk menunjukkan nilai relatif
Mudah untuk melihat nilai data yang luar biasa

Bab 10. Desain Antarmuka

Localizationand
Internationalization

Desain antarmuka pengguna sering perlu mempertimbangkan

Internationalization dan Localization, yang berarti software
beradaptasi dengan bahasa yang berbeda, perbedaan regional, dan
persyaratan teknis target pasar.
Internationalization adalah proses mendesain aplikasi software agar
bisa diadaptasi ke berbagai bahasa dan wilayah tanpa perubahan
rekayasa yang masif.
Localization adalah proses mengadaptasi software untuk wilayah
atau bahasa tertentu dengan menambahkan komponen lokalspesifik dan menerjemahkan teks.
Localization dan Internationalization harus mempertimbangkan
faktor-faktor seperti simbol, angka, mata uang, waktu, dan
pengukuran unit.
Bab 10. Desain Antarmuka

UserInterfaceDesignProcess

Bab 10. Desain Antarmuka

TUGAS
Pilih Sebuah Website, dan Analisis website
tersebut berdasarkan prinsip-prinsip Desain
Antarmuka yang telah dipelajari!

Bab 10. Desain Antarmuka

The end

Bab 10. Desain Antarmuka