Perancangan Antarmuka Bagian II: Mendefinisikan User Task, User Object, dan Style Guide

Transkripsi

1 Perancangan Antarmuka Bagian II: Mendefinisikan User Task, User Object, dan Style Guide 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 Tujuan Mengetahui tahapan-tahapan dalam perancangan antarmuka, khususnya tahap user task, user objects, dan style guide. Memahami tujuan (task goal) yang akan dicapai pengguna, apa yang dilakukan oleh pengguna

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

4 Individual Group Operator Administrator Siapa USER itu?

5 Task Analysis Task Analysis adalah alat bantu yang amat berguna dalam proses awal desain interface dalam interaksi manusia dan komputer. Task Analysis berguna untuk: Menyediakan informasi yang berguna dalam pengambilan keputusan desain. Sebagai dasar untuk mengevaluasi desain dari sistem.

6 Mengapa mempelajari task analysis? Designer memiliki asumsi yg salah terhadap user dan interface Semua user adalah sama Semua user sama dengan saya Karakteristik user tdk pengaruh dgn product Saya dapat mendesain interface yg baik tanpa perlu memahami user

7 Informasi yang didapat melalui task analysis Tujuan-tujuan user dalam melakukan task/tugas Pola/bentuk work flow Hubungan timbal balik antara object & tugas Menggunakan system/aplikasi lain Karakteristik user

8 Task Analysis Methods: Data Gathering Banyak metode task analysis Tidak ada yg 100% memuaskan metode umum Questionnaires and Interviews Observational studies Experimental data collection Unstructured user input

9 Metode Task Analysis Task decomposition: suatu task dipecah menjadi sub-task yang berurutan Knowledge based techniques: menekankan pengetahuan dari user tentang objek dan aksi yang dibutuhkan dalam task tersebut Entity-relation based analysis: berdasarkan objek, penekanan pada identifikasi dari entity, relationship dan kegunaannya

10 Task Decomposition Proses dekomposisi (pemecahan suatu task menjadi beberapa sub-task) ini sering juga disebut sebagai Hierarchical Task Analysis (HTA). Hasil output dari HTA ini adalah suatu hierarki dari task dan sub-task dan juga suatu rancangan urutan (plan) dan syarat dari sub-task sub-task tersebut.

11 Hierarchical Task Analysis Save a file Select File, Save As Choose where save to to Enter file name Select OK

12 Knowledge Based Analysis Knowledge Based Analysis dimulai dengan mengidentifikasikan semua objek dan aksi yang terlibat dalam task, dan kemudian mengembangkan suatu taxonomi dari semuanya. Hal ini mirip dengan taxonomi dari cabang ilmu biologi (klasifikasi hewan/tumbuhan).

13 Entity-relation based analysis Often list attributes, actions of objects Object: pen simple Attribute: color: red writing: on/off Object: Mary actor Actions: M1: make a sketch M2: organize meeting

14 Bagian-Bagian dalam User Task Define User Task bagian-bagian Bussiness Process Users Class Define User Tasks User Object Model Task Models Task Scenario

15 Bagian-Bagian dalam User Task Define User Task bagian-bagian business process» proses-proses bisnis yang terjadi di dalam perusahaan yang terkait dengan sistem perusahaan» contoh: penanganan order, reservasi kamar di hotel, penanganan transfer uang di bank

16 Bagian-Bagian dalam User Task Define User Task bagian-bagian task models» task/tugas adalah aktivitas manusia untuk mencapai suatu tujuan, yang dapat digambarkan dengan langkah-langkah yang jelas dan dapat diturunkan menjadi beberapa level subtask contoh:» melayani transfer uang, melayani pemesanan tiket, dll beberapa pertimbangan:» siapa yang akan melakukan» frekuensi melakukan tugas» waktu yang dibutuhkan untuk melakukan tugas» kekangan (constrain) dalam mengerjakan tugas» frekuensi error yang mungkin timbul

17 Bagian-Bagian dalam User Task Define User Task bagian-bagian task scenario» urutan langkah-langkah pengerjaan tugas contoh:» skenario melayani pemesanan tiket kerta api pilih jenis kereta pilih kelas pilih tanggal pilih nomor bangku dst

18 Langkah Pendefinisian User Task Define User Task langkah-langkah identifikasi tugas-tugas pilih skenario tugas gambarkan model tugas identifikasi sub-sub tugas yang membutuhkan interaksi dengan komputer

19 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom tugas-tugas yang ada» mencari informasi pustaka (dapat dilakukan dengan mencari berdasarkan salah satu atau beberapa kriteria sekaligus yaitu judul, jenis pustaka, pengarang, penerbit, dan tahun terbit)» melayani sirkulasi (peminjaman dan pengembalian) pustaka oleh anggota perpustakaan» memanipulasi data pustaka (menambah data pustaka baru, menghapus data pustaka yang sudah tidak terpakai, dan menyunting data pustaka)

20 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom skenario tugas» mencari informasi pustaka menentukan kriteria pencarian mengisikan data pencarian proses pencarian» pelayanan sirkulasi pustaka tentukan proses mana yang akan dilakukan yaitu peminjaman atau pengembalian pustaka

21 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom skenario tugas» mencari informasi pustaka menentukan kriteria pencarian mengisikan data pencarian proses pencarian» pelayanan sirkulasi pustaka tentukan proses mana yang akan dilakukan yaitu peminjaman atau pengembalian pustaka

22 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom skenario tugas» manipulasi data pustaka tentukan proses mana yang akan dilakukan yaitu penambahan, penghapusan atau penyuntingan data pustaka» penambahan data pustaka menambahkan rekaman baru mengisikan judul pustaka mengisikan jenis pustaka mengisikan pengarang mengisikan penerbit mengisikan tahun terbit mengisikan jumlah eksemplar mengisikan status keberadaan masing-masing eksemplar proses penambahan data baru

23 Define User Task Contoh Studi Kasus case study SI Perpustakaan IT Telkom skenario tugas» penghapusan data pustaka menentukan record data pustaka yang mau dihapus proses penghapusan data pustaka.» penyuntingan data pustaka menentukan rekaman yang akan disunting suntinglah field mana yang perlu disunting proses penyuntingan data

24 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom diagram dekomposisi tugas Mencari Informasi Pustaka

25 Contoh Studi Kasus Define User Task case study SI Perpustakaan IT Telkom diagram dekomposisi tugas Proses Sirkulasi 2.1. Peminjaman Pustaka 2.2. Pengembalian Pustaka

26 Contoh Studi Kasus Define User Task Template case study SI Perpustakaan IT Telkom diagram dekomposisi tugas Manipulasi Data Pustaka 3.1. Penambahan Data Pustaka 3.2. Penghapusan Data Pustaka 3.3. Penyuntingan Data Pustaka

27 User Object Model User Object tujuan memahami dan menentukan konsep pengguna atas sebuah obyek di dalam sistem (mental model) menentukan perilaku objek-objek dalam sistem, dan aksi yang dapat dilakukan oleh pengguna terhadap objek-objek tersebut

28 User Object Model User Object bagian-bagian Task Models, Task Scenario Data Model Users Classs Model User Objects User Object Models Glossary

29 User Object Model User Object bagian-bagian user object model» model objek yang berinteraksi dengan manusia» beberapa pertimbangan: objek tersebut termasuk jenis objek apa? informasi apa yang dapat diperoleh pengguna dari objek tersebut? aksi apa yang dapat dilakukan pengguna terhadap objek tersebut? bagaimana hubungan (relasi) antar objek? apakah objek memiliki sub-objek, dengan atribut tambahan atau khusus?

30 Model User Object bagian-bagian user object model User Object» jenis user object objek sistem bisnis (misalnya : pelanggan, faktur) objek atau piranti sistem komputer (misalnya : printer) kontainer (misalnya : daftar direktori, folder)» karakteristik user object berisi user object lainnya berelasi dengan user object lainnya memiliki atribut dikenai aksi oleh pengguna

31 User Object Model User Object bagian-bagian user object model» user object action aksi yang dapat dilakukan pengguna atas sebuah objek seperti dalam dunia nyata, misalnya membuat, mengkopi, menghapus berkas» user object subtype objek yang mewarisi sifat-sifat turunan dari objek induknya dapat memiliki atribut, aksi, dan relasi yang sama dengan objek induk, dan (opsional) atribut atribut, aksi, dan relasi khusus tambahan

32 User Object Model User Object bagian-bagian user object model» notasi

33 User Object Model User Object bagian-bagian user object model» notasi

34 User Object Model User Object bagian-bagian glossary» daftar alfabetis yang digunakan oleh pengguna untuk menjelaskan keadaan atau perilaku objek sistem» termasuk nama objek, atribut, aksi, relasi, dan lainlain

35 User Object Model User Object langkah-langkah mengenali macam-macam model yang akan digunakan» model untuk administrator atau model untuk operator mengidentifikasi objek» identifikasi objek dari pengguna objek apa yang akan dibuat, dihapus, diperbaharui, dll objek apa yang akan digunakan di dalam tugas-tugas, misalnya objek mana yang akan digunakan sebagai kontainer, tool, masukan, sumber referensi, dll objek tambahan apa yang berguna di dalam sistem?» identifikasi objek dari model tugas objek apa yang akan dibuat dan diperbaharui oleh model tugas? objek apa yang diacu untuk mengerjakan tugas?

36 User Object Model User Object langkah-langkah membuat diagram user object model» menggunakan notasi-notasi standar mendefinisikan atribut-atribut object user» melengkapi diagram object user mendefinisikan aksi terhadap object user» buat matriks aksi periksa perilaku sistem untuk keadaankeadaan dinamis» memeriksa kemungkinan aksi memberikan hasil yang invalid / tidak sah periksa kelengkapan glossary

37 Style Guide Define Style Guide tujuan menentukan standar corak/style dari user interface memilih corak/style yang meningkatkan usability secara tepat bagi pengguna dan tugasnya

38 Define Style Guide hasil application style guide» dokumentasi mengenai standar corak/style dari sebuah aplikasi corporate style guide» dokumentasi mengenai standar corak/style dari sebuah perusahaan untuk setiap aplikasi yang dikembangkan

39 Contoh Corporate Guidelines

40 Define Style Guide hasil application style guide» dokumentasi mengenai standar corak/style dari sebuah aplikasi design principles (e.g. eight golden rules of dialog design) standards for window interaction (opening, closing, navigation), layout and window hierarchy diagram standards for menus and push buttons (e.g. naming, appearance, sequence, behavior) standards for use of keyboard keys, graphics, tables and diagrams dll» corporate style guide application style guide untuk level corporate

41 Contoh Style Guide

42 Contoh Lain Application Style Guide

43 Tugas Besar_Tahap II Kerjakan secara berkelompok sesuai dengan kelompok yang sudah dibentuk sebelumnya. Lanjutkan Laporan Kelompok kalian dengan mendefinisikan user task dan style guide dari sistem informasi/aplikasi yang diusulkan! Identifikasi tugas-tugas Gambarkan skenario masing-masing tugas dalam diagram dekomposisi tugas Definisikan style guide: design principles (e.g. eight golden rules of dialog design) standards for window interaction (opening, closing, navigation), layout and window hierarchy diagram standards for menus and push buttons (e.g. naming, appearance, sequence, behavior) standards for use of keyboard keys, graphics, tables and diagrams

44 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

45