Perancangan Antarmuka Bagian II: Mendefinisikan User...

45
Perancangan Antarmuka Bagian II: Mendefinisikan User Task, User Object, dan Style Guide 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

Transcript of Perancangan Antarmuka Bagian II: Mendefinisikan User...

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

Style Guide

Interaksi Manusia Komputer [IF6222502]

Tim Dosen:

Fahrudin Mukti Wibowo, S.Kom., M.Eng*

Yudha Saintika, S.T., M.T.IDwi Januarita AK, S.T., M.Kom

* Koordinator MK

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

Review

Proses Perancangan Antarmuka

Prototype UI

UI design

Evaluate UI

Design UI

Requirements

Analysis

Define User

Tasks

Define Style

Guide

Model User

Object

Usability requirementsUser Classes

Define users

and Usability

Requirements

System

Analysis

System

Design

Implementation & testing

Siapa USER itu?

•Individual

•Group

•Operator

•Administrator

Task Analysis

Task Analysis adalah alat bantu yang amatberguna dalam proses awal desain interfacedalam interaksi manusia dan komputer. TaskAnalysis berguna untuk:

• Menyediakan informasi yang berguna dalampengambilan keputusan desain.

• Sebagai dasar untuk mengevaluasi desain darisistem.

Mengapa mempelajari task analysis?

Designer memiliki asumsi yg salah terhadap user daninterface

• Semua user adalah sama

• Semua user sama dengan saya

• Karakteristik user tdk pengaruh dgn product

• Saya dapat mendesain interface yg baik tanpaperlu memahami user

Informasi yang didapat melalui task analysis

• Tujuan-tujuan user dalam melakukantask/tugas

• Pola/bentuk work flow

• Hubungan timbal balik antara object & tugas

• Menggunakan system/aplikasi lain

• Karakteristik user

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

Metode Task Analysis

• Task decomposition: suatu task dipecahmenjadi sub-task yang berurutan

• Knowledge based techniques:menekankan pengetahuan dari usertentang objek dan aksi yang dibutuhkandalam task tersebut

• Entity-relation based analysis:berdasarkan objek, penekanan padaidentifikasi dari entity, relationship dankegunaannya

Task Decomposition

• Proses dekomposisi (pemecahan suatu task menjadi beberapa sub-task) ini sering jugadisebut sebagai Hierarchical Task Analysis (HTA).

• Hasil output dari HTA ini adalah suatuhierarki dari task dan sub-task dan jugasuatu rancangan urutan (plan) dan syaratdari sub-task sub-task tersebut.

Hierarchical Task Analysis

Save a file

Select File,Save As

Choosewhere tosave to

Enter file name Select OK

Knowledge Based Analysis

Knowledge Based Analysis dimulai denganmengidentifikasikan semua objek dan aksiyang terlibat dalam task, dan kemudianmengembangkan suatu taxonomi darisemuanya. Hal ini mirip dengan taxonomi daricabang ilmu biologi (klasifikasihewan/tumbuhan).

Entity-relation based analysis

• Often list attributes, actions of objects

Object: pen simpleAttribute:

color: redwriting: on/off

Object: Mary actorActions:

M1: make a sketchM2: organize meeting

Bagian-Bagian dalam User Task

Define User Tasks

Users Class

Bussiness Process

Task Models

Task Scenario

User Object Model

Define User Task

→bagian-bagian

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 dihotel, penanganan transfer uang di bank

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

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

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

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)

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 akandilakukan yaitu peminjaman ataupengembalian pustaka

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 akandilakukan yaitu peminjaman ataupengembalian pustaka

Contoh Studi Kasus

Define User Task

→case study – SI Perpustakaan IT Telkomskenario 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

Contoh Studi Kasus

Define User Task

→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

Contoh Studi Kasus

Define User Task

→case study – SI Perpustakaan IT Telkom

diagram dekomposisi tugas

Mencari Informasi

Pustaka

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

Contoh Studi Kasus

Template

Define User Task

→case study – SI Perpustakaan IT Telkom

diagram dekomposisi tugas

Manipulasi

Data Pustaka

3.1.

Penambahan

Data Pustaka

3.3.

Penyuntingan

Data Pustaka

3.2.

Penghapusan

Data Pustaka

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

User Object

Model User Object

→bagian-bagian

Model User Objects

Users Classs

Task Models, Task Scenario

User Object Models

Glossary

Data Model

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 penggunadari objek tersebut ?

aksi apa yang dapat dilakukan penggunaterhadap objek tersebut ?

bagaimana hubungan (relasi) antar objek ?

apakah objek memiliki sub-objek, denganatribut tambahan atau khusus ?

User Object

Model User Object

→bagian-bagian

user object model

» 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

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

User Object

Model User Object

→bagian-bagian

user object model

» notasi

User Object

Model User Object

→bagian-bagian

user object model

» notasi

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

lain

User Object

Model User Object

→langkah-langkahmengenali 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 sebagaikontainer, 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 ?

User Object

Model User Object→langkah-langkahmembuat 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 keadaan-

keadaan dinamis» memeriksa kemungkinan aksi memberikan hasil

yang invalid / tidak sah

periksa kelengkapan glossary

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

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

Contoh Corporate Guidelines

Define Style Guide

→hasilapplication style guide

» dokumentasi mengenai standar corak/style dari sebuahaplikasi

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

Contoh Style Guide

Contoh Lain Application Style Guide

Tugas Besar_Tahap II

→Kerjakan secara berkelompok sesuai dengankelompok yang sudah dibentuk sebelumnya.

→Lanjutkan Laporan Kelompok kalian dengan mendefinisikan user task dan style guide darisistem informasi/aplikasi yang diusulkan!Identifikasi tugas-tugasGambarkan skenario masing-masing tugas

dalam diagram dekomposisi tugasDefinisikan style guide:

design principles (e.g. eight golden rules of dialog design)standards for window interaction (opening,

closing, navigation), layout and window hierarchy diagramstandards for menus and push buttons (e.g.

naming, appearance, sequence, behavior)standards for use of keyboard keys, graphics,

tables and diagrams

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