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