Perancangan

Antarmuka Pengguna
FATHURAHMA, ST

Perancangan Antarmuka
Membuat perancangan interaktif untuk
mendukung pengguna dalam pekerjaan dan
kehidupan sehari-hari mereka
Perancangan ruang untuk komunikasi
manusia dan interaksi

Mengapa?
Kebutuhan antarmuka yang baik
Pembeli adalah raja

Faktanya

Prinsip Antarmuka
Keberagaman
Pencegahan eror

Aturan Perancangan

Konsistensi
Memungkinkan penggunaan shortcuts
Feedback yang informatif
Rancangan dialog yang terarah
Pencegahan dan penanganan eror
Kemudahan reversal of action
Support internal locus of control
Mengurangi isi short term memory

Tujuannya: Kebergunaan
Kebergunaan adalah mengukur kualitas
pengalaman pengguna ketika berinteraksi
dengan sistem website, software
aplikasi, teknologi mobile, atau perangkat
pengguna lainnya yang dioperasikan

Komponen Antarmuka

Kecenderungan dalam
Antarmuka

Pelaku Antarmuka

Model Siklus Hidup

Menunjukkan bagaimana aktifitas yang
berelasi satu sama lain
Model siklus hidup terdiri dari:
Tools manajemen
Penyederhanaan versi realitas

Model Siklus Hidup

Contoh model siklus hidup:
Berdasarkan Rancang bangun software >>
waterfall, spiral, star, microsoft
Berdasarkan IMK >> rancang bangun
kebergunaan

Model Perancangan Interaksi

Sederhana

Waterfall Model
Analisa
Kebutuhan
Perancangan

Pengodean

Pengujian

Perawatan

Spirall Model

Star Model

Penting!!
Antarmuka = komunikasi
Komunikasi Satu Arah

Penting!!
Antarmuka Pengguna = Jalur 2 Arah

Bagaimana berkomunikasi dengan

pengguna anda

Membangun Komunikasi 2 Arah

Intruksi yang jelas

Membangun
Tiap aksi ada reaksi

Membangun
Hindari Ambiguitas

WYSIWYG
Menampilkan
sesuatu apa adanya
Awal 90an pengolah
kata WYSIWYG
menjadi standar
Contoh: Ms Word,
Lotus WordPro,
Corels Word Perfect

Keuntungan WYSIWYG
Tampilan teks layar penuh
Tampilan dokumen = hasil cetak
Bentuk-bentuk kursor mengindikasikan
proses yang jelas
Pengendalian kursor jelas dan alamiah
Ikon berlabel untuk aksi cepat
Feedback yang cepat
Penyediaan fungsi pembalik (undo)

Ikon
Citra, gambar atau simbol yang
merepresentasikan suatu konsep

Petunjuk Pembuatan
Tampilkan aksi dengan cara yang mudah dikenali
Batasi penggunaan ikon yang berbeda
Buatlah ikon yang lebih mencolok daripada latar
belakang
Ikon 3D dapat menarik perhatian, namun bisa juga
mengganggu
Pastikan ikon yang dipilih terlihat dengan jelas
ketika dikelilingi oleh ikon-ikon yang tidak terpilih
Buatlah setiap ikon berbeda

Petunjuk
Pastikan keselarasan dari setiap ikon
sebagai bagian dari keluarga ikon
Rancanglah animasi pergerakan
Tambahkan informasi detail, misal dengan
bayangan, ketebalan, warna atau animasi
Eksplorasi penggunaan kombinasi dari
beberapa ikon untuk membuat aksi baru

Tingkatan Perancangan Ikon

Leksik: tanda yang dibangkitkan mesin
bentuk piksel, warna, kecerlangan, kedap
kedip
Sintaktik: kemunculan dan perpindahan
garis, pola, bagian moduler, ukuran,
bentuk

Tingkatan
Semantik: represntasi objek kongkrit vs
abstrak, bagian vs keseluruhan
Pragmatik: dapat dibaca, digunakan,
diidentifikasi, diingat, dan dinikmati
Dinamik: respon ketika diklik
highlighting, dragging, atau
pengkombinasian

Pedoman untuk Tampilan Data

Konsistensi untuk semua aspek
Format yang sudah dikenal
Mengurangi memori jangka pendek
pengguna