Interaksi Manusia Komputer [IF ]

Presentasi berjudul: "Interaksi Manusia Komputer [IF ]"— Transcript presentasi:

1 Interaksi Manusia Komputer [IF6222502]
Perancangan Antarmuka Bagian III: Design UI Interaksi Manusia Komputer [IF ] 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

2 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

3 Tujuan “Merancang tampilan grafis antarmuka/interface aplikasi untuk pengguna” memperhatikan faktor psikologis serta keindahan sehingga hasilnya mampu menarik perhatian pengguna

4 Form Skematik dari Suatu Interface

5 Form Skematik dari Suatu Dialog

6

7

8 Proses Desain Antar Muka
Menggunakan Use Case Specification/Scenario

9 Perancangan Antarmuka Berdasarkan Use Case Spec

10 Perancangan Antarmuka Berdasarkan Use Case Spec

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

12 Contoh Prototype Task Manipulasi Data Pustaka

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

14 Contoh beberapa message dialog

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

16

17

18 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

19 Prototyping Proses membangun model dari suatu sistem.
Bentuk awal (contoh) atau standar ukuran dari sebuah objek. Salah satu metode pengembangan perangkat lunak.

20 Prototyping Prototyping GUI tujuan
melihat feasibility rancangan antarmuka memberi umpan balik atas validitas model tugas, model pengguna, dan corak antarmuka Feasibilty : kelayakan

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

22 Evaluate GUI Tujuan mengukur tingkat pencapaian kualitas (usabilty requirement) mengidentifikasi masalah-masalah usabilty requirement

23 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

24 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

25 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

26 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

27 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

28