-
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.IDwi Januarita AK, S.T., M.Kom
* Koordinator MK
-
Review
Proses Perancangan Antarmuka
Prototype UI
UI design
Evaluate UI
Design UI
Requirements
Analysis
Define User
Tasks
Define Style
Guide
Model User
Object
Usability requirementsUser Classes
Define users
and Usability
Requirements
System
Analysis
System
Design
Implementation & testing
-
Tujuan
“Merancang tampilan grafis antarmuka/inteface
aplikasi untuk pengguna”
Design GUI
User Object Model
Application Style Guide
GUI Design
Task & Scenario
-
User Interface
• Merancang sebuah interface untuk pengguna adalah hal sangatpenting dalam mengembangkan sebuah sistem informasi. Untukmerancang interface harus memperhatikan faktor psikologis sertakeindahan 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.
Penambahan
Data Pustaka
3.3.
Penyuntingan
Data Pustaka
3.2.
Penghapusan
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
tujuanmeneliti feasibility rancangan antarmuka
memberi umpan balik atas validitas model tugas, model pengguna, dan corak antarmuka
Prototype GUI
Usability Requirement
GUI Design
GUI Prototype
Task Scenario
Design Feedback
-
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
Evaluate GUI
GUI Prototyping GUI Design
Usability Requirement
Evaluation Report
Usablity 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 (kalauperlu) 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