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
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
- Slides: 31