perancangan antarmuka bagian ii: mendefinisikan user task ......tentang objek dan aksi yang...

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

Upload: others

Post on 07-Mar-2020

73 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 2: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 3: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 4: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Siapa USER itu?

•Individual

•Group

•Operator

•Administrator

Page 5: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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.

Page 6: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 7: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 8: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 9: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 10: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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.

Page 11: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Hierarchical Task Analysis

Save a file

Select File,Save As

Choosewhere tosave to

Enter file name Select OK

Page 12: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 13: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 14: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Bagian-Bagian dalam User Task

Define User Tasks

Users Class

Bussiness Process

Task Models

Task Scenario

User Object Model

Define User Task

bagian-bagian

Page 15: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 16: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 17: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 18: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 19: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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)

Page 20: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 21: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 22: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 23: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 24: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Contoh Studi Kasus

Define User Task

case study – SI Perpustakaan IT Telkom

diagram dekomposisi tugas

Mencari Informasi

Pustaka

Page 25: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 26: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 27: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 28: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

User Object

Model User Object

bagian-bagian

Model User Objects

Users Classs

Task Models, Task Scenario

User Object Models

Glossary

Data Model

Page 29: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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 ?

Page 30: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 31: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 32: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

User Object

Model User Object

bagian-bagian

user object model

» notasi

Page 33: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

User Object

Model User Object

bagian-bagian

user object model

» notasi

Page 34: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 35: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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 ?

Page 36: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

User Object

Model User Objectlangkah-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

Page 37: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 38: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 39: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Contoh Corporate Guidelines

Page 40: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 41: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Contoh Style Guide

Page 42: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Contoh Lain Application Style Guide

Page 43: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

Tugas Besar_Tahap II

Kerjakan secara berkelompok sesuai dengan kelompokyang sudah dibentuk sebelumnya.

Lanjutkan Laporan Kelompok kalian dengan mendefinisikan user task dan style guide dari sisteminformasi/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 diagram

standards for menus and push buttons (e.g. naming, appearance, sequence, behavior)

standards for use of keyboard keys, graphics, tables and diagrams

Dikumpulkan dalam format PDF dan di-submit ke email: [email protected] paling lambat Hari Senin, 21 Mei 2018 jam 23:59, Subjek: [IMK] TugasBesar II_Nama Ketua Kelompok

Page 44: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh:

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

Page 45: Perancangan Antarmuka Bagian II: Mendefinisikan User Task ......tentang objek dan aksi yang dibutuhkan dalam task tersebut ... perusahaan yang terkait dengan sistem perusahaan » contoh: