Perancangan Antarmuka Bagian III Design UI Interaksi Manusia

Perancangan Antarmuka Bagian III: Design UI Interaksi Manusia Komputer [IF 6222502] 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 Define users and Usability Requirements Analysis User Classes System Analysis Define User Tasks Usability requirements Model User Object Define Style Guide Design UI Prototype UI System Design Implementation & testing Evaluate UI UI design

Tujuan “Merancang tampilan grafis antarmuka/inteface aplikasi untuk pengguna” Application Style Guide Task & Scenario Design GUI Design User Object Model

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

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. 2. Penghapusan Data Pustaka 3. 3. Penyuntingan 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 GUI tujuan meneliti feasibility rancangan antarmuka memberi umpan balik atas validitas model tugas, model pengguna, dan corak antarmuka GUI Design Feedback Task Scenario Usability Requirement Prototype 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 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 Requirement GUI Prototyping GUI Design Evaluate GUI 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 (kalau perlu) corak antarmuka aplikasi

Teknik 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