Perancangan Antarmuka Bagian III:

Design UI

Interaksi Manusia Komputer [IF6222502]

Tim Dosen:
Fahrudin Mukti Wibowo, S.Kom., M.Eng*
Yudha Saintika, S.T., M.T.I
Dwi Januarita AK, S.T., M.Kom

* Koordinator MK
 Review
Proses Perancangan Antarmuka
Requirements Define users
Analysis and Usability
Requirements

User Classes Usability requirements

System Define User Model User Define Style

Analysis Tasks Object Guide

Design UI

Prototype UI

Evaluate UI
System
Design
UI design

Implementation & testing

 Tujuan

“Merancang tampilan grafis antarmuka/inteface

aplikasi untuk pengguna”

Application Task & User Object

Style Guide Scenario Model

Design GUI

GUI Design
 User Interface
• Merancang sebuah interface untuk pengguna adalah hal sangat
penting dalam mengembangkan sebuah sistem informasi. Untuk
merancang interface harus memperhatikan faktor psikologis serta
keindahan sehingga hasilnya mampu menarik perhatian pengguna
Form Skematik dari Suatu Interface
Form Skematik dari Suatu Dialog
 Proses Desain Antar Muka
• Menggunakan Use Case Specification/Scenario
Perancangan Antarmuka Berdasarkan Use Case Spec
Perancangan Antarmuka Berdasarkan Use Case Spec
 Proses Desain Antar Muka

• Menggunakan Struktur Tugas

Desain struktur antarmuka
mendefinisikan komponen
dasar dari antarmuka dan
bagaimana mereka bekerja
sama untuk menyediakan
fungsionalitas untuk pengguna.
 Contoh Tugas/Task

Manipulasi
Data Pustaka

3.1. 3.2. 3.3.

Penambahan Penghapusan Penyuntingan
Data Pustaka Data Pustaka Data Pustaka
Contoh Prototype Task Manipulasi Data Pustaka
 Prinsip Desain Antarmuka bagi Pengguna
Setiap elemen harus bermakna bagi pengguna dan bertujuan untuk
membantu pengguna dalam melakukan task.
- Minimalkan noise (informasi yang tidak berguna).
- Maksimalkan signal (informasi yang berguna).
Prinsip: too little is inefficient, too much is confusing.

Konsisten
- Sesuai dengan pengalaman, ekspektasi, konvensi, dan budaya
pengguna.
- Terapkan konsistensi internal dalam aplikasi.
Contoh beberapa message dialog
 Prinsip Desain Antarmuka bagi Pengguna
Sediakan titik awal yang jelas
- Mulai dari sudut kiri atas layar, mengalir searah jarum jam.
- Fokuskan perhatian pengguna pada bagian terpenting di
layar/halaman.

Bagi informasi ke dalam unit-unit yang logis, bermakna dan dapat

dipahami
- Berdasarkan keterkaitan antar data/informasi.
- Informasi yang perlu dibandingkan harus tampak bersamaan.
Contoh Starting Point
 Prinsip Desain Antarmuka bagi Pengguna
Navigasi dan Aliran
- Letakkan elemen/kontrol yang paling penting/paling sering
digunakan di kiri atas.
- Terapkan aliran atas-ke-bawah, kiri-ke-kanan
- Arahkan perhatian pada items yang kritis  penting  pendukung
 pelengkap

Gunakan Grafik untuk:

- Membandingkan data
- Menyajikan data dinamis
- Analisis statistik
- Ilustrasi proporsi
 Panduan Desain Halaman Web
• Penuhi ekspektasi pengguna tentang isi, organisasi, dan navigasi
• Desain sesuai dengan kemampuan dan keterbatasan pengguna
• Tampilan visual harus aktraktif dan konsisten
• Pastikan isi diperbarui secara rutin
• Desain untuk berbagai platform dan layar.
• Minimalkan panjang halaman.
• Halaman utama
- Menjelaskan tujuan situs
- Batasi dalam satu layar
- Dapat dakses dari halaman lainnya
 Prototyping
Prototyping GUI
tujuan
meneliti feasibility rancangan antarmuka
memberi umpan balik atas validitas model tugas,
model pengguna, dan corak antarmuka

GUI Task
Design Scenario
Usability
Design Requirement
Feedback
Prototype GUI

GUI
Prototype
 Prototyping
• Definisi Prototype
• Proses membangun model dari suatu sistem.
• Bentuk awal (contoh) atau standar ukuran dari sebuah objek.
• Salah satu metode pengembangan perangkat lunak.
 Langkah-Langkah Pembuatan Prototipe
• Permintaan bermula dari kebutuhan user.
• Bangunlah sistem prototipe untuk menemukan kebutuhan awal yang
diminta.
• Biarkan user menggunakan prototipe. Analis haris memberikan
pelatihan, membantu dan dan duduk bersama-sama dengan user,
khususnya untuk petama kali.
• Implementasikan saran-saran perubahan.
• Ulangi langkah ketiga sampai user merasa puas.
• Merancang dan membangun suatu sistem akhir seperti sebelumnya.
 Evaluate GUI
Tujuan
mengukur tingkat pencapaian kualitas (usabilty
requirement)
mengidentifikasi masalah-masalah usabilty
requirement

Usability GUI Prototyping

Requirement GUI Design

Evaluate
GUI

Evaluation Usablity
Report Problems
 Teknik Evaluasi

Bagian-bagian
evaluation report
» dokumen yang berisi evaluasi atas:
pengukuran tingkat pencapaian kualitas
daftar permasalahan usability requirement
dampak permasalahan usability requirement
terhadap operasional bisnis
rekomendasi pengubahan design dan (kalau
perlu) corak antarmuka aplikasi
 Teknik Evaluasi
 Evaluasi oleh pakar IMK
» meminta bantuan pakar IMK (pihak luar) untuk
mengevaluasi dan mengidentifikasi permasalahan
usability requirement
 Observasi langsung terhadap pengguna
» pengguna diuji coba menggunakan aplikasi
yang dibuat
» untuk melihat bagaimana pengguna mengerjakan
tugas, kesalahan-kesalahan yang mungkin
dilakukan, waktu yang dibutuhkan untuk
mengerjakan skenario tugas, dll
» untuk mendapatkan data kualitatif maupun
kuantitatif atas usability requirements
» sebaiknya dilakukan di ruang khusus yang
bebas intervensi (gangguan) orang lain
 Teknik Evaluasi
Survei terhadap pengguna
» survei dengan wawancara terstruktur atau
kuesioner terhadap pengguna yang telah mencoba
aplikasi
» untuk mendapatkan data-data kuantitatif atas
usability requirements
» wawancara terstruktur lebih efektif daripada
kuesioner
 Referensi

• Buku
– Dix, Alan; Finlay, Janet; Abowd, Gregory; Beale,
Russell; 1998; Human-Computer Interaction;
Prentice Hall
– Preece, Jenny; Rogers, Yvonne; Sharp, Helen;
Benyon, David; Holland, Simon; Carey, Tom; 1998;
Human-Computer Interaction; Addison Wesley