Interaksi Manusia Komputer [IF6222502] 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.I Dwi Januarita AK, S.T., M.Kom * Koordinator MK

Define users and Usability Requirements Implementation & testing Review Proses Perancangan Antarmuka Prototype UI UI design Evaluate UI Design UI Requirements Analysis Define User Tasks Define Style Guide Model User Object Usability requirements User Classes Define users and Usability Requirements System Design Implementation & testing

Tujuan “Merancang tampilan grafis antarmuka/interface aplikasi untuk pengguna” 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 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 Feasibilty : kelayakan

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 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