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 Requirements Analysis Define users and Usability Requirements User Classes System Analysis Define User Tasks Usability requirements Model User Object Define Style Guide Design UI Prototype UI Evaluate UI System Design Implementation & testing UI design
Tujuan “Merancang tampilan grafis antarmuka/interface aplikasi untuk 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 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.
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
Prototyping • Proses membangun model dari suatu sistem. • Bentuk awal (contoh) atau standar ukuran dari sebuah objek. • Salah satu metode pengembangan perangkat lunak.
Prototyping þPrototyping GUI tujuan Ämelihat feasibility rancangan antarmuka Ämemberi umpan balik atas validitas model tugas, model pengguna, dan corak antarmuka
Langkah-Langkah Pembuatan Prototipe • Permintaan bermula dari kebutuhan user. • Bangun sistem prototipe untuk menemukan kebutuhan awal yang diminta. • Biarkan user menggunakan prototipe. Analis harus memberikan pelatihan, membantu dan duduk bersama-sama dengan user, khususnya untuk pertama 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
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
Tugas Besar Tahap III • Lanjutkan Laporan Kelompok kalian dengan mendesain UI berdasarkan masing-masing task dan style guide yang sudah didefinisikan! • Presentasi Tugas Besar (I-III) dilaksanakan pada pertemuan selanjutnya
- Slides: 28