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

(1)

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

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

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 Analysis System Design

(4)

Siapa USER itu?

•Individual

•Group

•Operator

(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

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

save to

(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 Tasks Users Class Bussiness Process Task Models Task Scenario User Object Model



_{Define User Task}

(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

(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

(18)

Langkah Pendefinisian User Task



_{Define User Task}

→langkah-langkah

identifikasi tugas-tugas

pilih skenario tugas

gambarkan model tugas

identifikasi sub-sub tugas yang

(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

(23)

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}

(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

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

(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

Model User Objects

Users Classs

Task Models, Task Scenario User Object Models Glossary Data Model

(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

(30)

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}

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

(32)

User Object



_{Model User Object}

→bagian-bagian

user object model

(33)

User Object



_{Model User Object}

→bagian-bagian

user object model

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

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

(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

keadaan-keadaan dinamis

» memeriksa kemungkinan aksi memberikan hasil yang invalid / tidak sah

(37)

Style Guide



_{Define Style Guide}

→tujuan

menentukan standar corak/style

dari user interface

memilih corak/style yang meningkatkan

usability secara tepat bagi pengguna

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

(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.}