perancangan antarmuka bagian i: mendefinisikan pengguna...

32
Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna dan Kebutuhan Usability 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: vuongdieu

Post on 17-Mar-2019

303 views

Category:

Documents


14 download

TRANSCRIPT

Page 1: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna dan Kebutuhan

Usability

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 I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Tujuan

→Mengetahui penggolongan perangkat lunak

terkait dengan pengaruhnya terhadap

perancangan antarmuka

→Mengetahui pendekatan-pendekatan dalam

proses perancangan antarmuka

→Mengetahui tahapan-tahapan dalam

perancangan antarmuka, khususnya

mendefinisikan pengguna dan kebutuhan

usability

Page 3: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Overview

→Pengguna (khususnya pemula) biasanya

tertarik untuk mencoba / menggunakan

aplikasi jika antarmukanya menarik

perancang antarmuka harus memiliki

karakteristik:

» mempunyai jiwa seni yang memadai

» mengerti selera pengguna secara umum

» memperhatikan apakah antarmuka yang dirancang

dapat diwujudkan/diimplementasikan oleh pemrogram

dengan piranti yang ada

Page 4: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Kategori S/W Aplikasi→General purpose S/WAplikasi yang sudah umum digunakan oleh

banyak pengguna (public software)

Karakteristik» pengguna umum memiliki karakteristik yang beragam

» pengguna umum dipaksa menggunakan antarmuka ygsama

» fasilitas customization antarmuka dapat memberi nilaiplus

Dibutuhkan penelitian lanjut tentang pola dan

karakterisitik pengguna secara umum

contoh» Word Processing, Spreadsheet, Internet Browser, dll

Page 5: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Kategori S/W Aplikasi→Special Purpose S/WAplikasi yang digunakan untuk

keperluan khusus kepada penggunanya

(dedicated software)

Karakteristik» Pengguna khusus memiliki karakteristik yang dapat

diperkirakan

» Ragam dialog yang digunakan dapat diperkirakan

Contoh» Aplikasi Sistem KRS, Reservasi Hotel, Pemesanan

Tiket Online, dll

Page 6: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Pendekatan dalam Perancangan Antarmuka

→user-centered design

pengguna “duduk bersama” perancang untuk

membuat rancangan antarmuka

pengguna menyampaikan keinginannya, dan

perancang menggambar keinginan pengguna,

sambil menjelaskan untung-ruginya

perancang meminta pendapat pengguna

tentang rancangan yang dibuatnya

» proses ini dilakukan secara iteratif

Page 7: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Pendekatan dalam PerancanganAntarmuka

→user design

pengguna merancang sendiri wajah

antarmuka yang diinginkan

mempercepat implementasi antarmuka

memberatkan pemrogram karena belum

tentu semua keinginan pengguna dapat

diimplementasikan dengan piranti bantu

yang ada

Page 8: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Proses Perancangan Antarmuka

Prototype UI

UI design

Evaluate UI

Design UI

Define users and Usability

Requirements

Define User

TasksDefine Style

Guide

Model User

Object

Usability requirementsUser Classes

Style Guide

User Object Models

Task models

Task scenarios

Usability problems

Usability

requirements

not all activities are needed in each

project

Page 9: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

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 10: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Proses Perancangan Antarmuka→Define Users and Usability Requirements menentukan siapa pengguna dan kebutuhan

Penggunaan sistem

→Model User Tasks membuat abstraksi tugas-tugas yang akan

dikerjakan oleh pengguna

→Model User Objects mendesain objek-objek yang akan digunakan

oleh pengguna

→Define Style Guide menentukan corak antarmuka agar konsisten

bagi pengguna

Page 11: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Proses Perancangan Antarmuka

→Design GUI

membuat rancangan antarmuka

→Prototype GUI

membuat prototipe antarmuka

→Evaluate GUI

mengevaluasi pencapaian kebutuhan

kualitas

Page 12: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→tujuan

identifikasi pengguna sistem

memahami karakterisitik pengguna

menentukan kebutuhan usability sistem

Define Users and Usability Requirement

System Scope, System Requirement

User Roles

User Classes

Usablity Requirement

Page 13: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→bagian-bagian

system scope

» batasan-batasan atau cakupan sistem yang akan

dibuat

system requirements

» kebutuhan-kebutuhan fungsional/non fungsional yang

bersifat kritis bagi sistem

user roles

» Peran-peran pengguna dalam sistem

Page 14: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→bagian-bagian

user class

» kelompok-kelompok pengguna yang beranggota pengguna-

pengguna yang memiliki kemiripan pola dan karakterisitik

» beberapa pertimbangan

tipe pengguna (langsung, tidak langsung, remote, support)

tingkat keharusan pengguna (mandatory, discretionary)

tingkat pendidikan pengguna

tingkat keahlian pengguna (pemula, biasa, ahli)

Tingkat penggunaan sistem (jarang, sering, setiap hari)

Page 15: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements→bagian-bagianusability requirements

» kebutuhan kualitas yang harus dicapai» beberapa pertimbangan

aspek usability mana yang perlu dipenuhi(kemudahan untuk dipelajari, pengunaan ingatan, efektifitas kerja, keluwesan pengguna, kepuasan

pengguna)?bagaimana cara mengukur dan menggunakan alat

apa?apa yang akan diukur (waktu mengerjakan, kemungkinan error dalam menyelesaikan tugas, skor kuesioner ttg aspek kepuasan, dll)?level kinerja yang diharapkan?level kinerja terburuk yang masih dapat ditolerir?level kinerja terbaik yang dapat dicapai?

Page 16: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→langkah-langkah

identifikasi batasan dan kebutuhan sistem

identifikasi kelompok pengguna sistem dan

peran-perannya

kelompokkan pengguna-pengguna ke dalam

kelasnya

identifikasi kebutuhan usability yang bersifat

kritis

» tentukan kriteria dan cara mengukur kinerja

» tentukan level kinerja

Page 17: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

system scope dan requirement

» melayani pencarian informasi pustaka IT TELKOM

(judul pustaka, jenis pustaka, pengarang, penerbit, tahun

terbit, status keberadaaan (ada/atau sedang dipinjam),

dan jumlah eksemplar). Yang termasuk pustaka adalah

buku teks (text book), jurnal ilmiah, majalah ilmiah

populer, laporan penelitian, dan skripsi)

» melayani sirkulasi pustaka (peminjaman dan

pengembalian pustaka) IT TELKOM

» melayani manipulasi data-data pustaka (penambahan,

pengurangan dan penyuntingan data pustaka) IT

TELKOM

Page 18: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

user roles

» yang berhak untuk mencari informasi pustaka adalah

semua pengunjung perpustakaan (mahasiswa, dosen,

karyawan IT TELKOM, pihak lain yang mendapat

rekomendasi dari pihak yang berwenang, misalnya

mahasiswa luar IT TELKOM).

» yang berhak meminjam pustaka adalah semua anggota

perpustakaan IT TELKOM (memiliki kartu anggota

perpustakaan IT TELKOM)

» yang berhak untuk memproses sirkulasi adalah petugas

perpustakaan bagian sirkulasi

» yang berhak memanipulasi data perpustakaan adalah

petugas perpustakaan yang diberi wewenang khusus

Page 19: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

kelompok user

» mahasiswa IT TELKOM

» dosen IT TELKOM

» karyawan IT TELKOM

» pihak luar yang diijinkan pejabat berwenang

» bagian sirkulasi

» petugas yang berhak memanipulasi data

(administrator)

Page 20: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

user class

» Pencari informasi pustaka (mahasiswa, dosen, dan

karyawan IT TELKOM, serta pihak luar yang diijinkan)

» Tipe user: langsung, tingkat pendidikan pengguna:

minimal SMA/sederajat, tingkat penggunaan sistem:

sering menggunakan komputer, tingkat keahlian

pengguna: pemula (biasa menggunakan ms office)

» Bagian sirkulasi

» Administrator

Page 21: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

usability requirements

» learnability

dapat dipelajari dengan mudah sehingga pencari

informasi tidak perlu dilatih terlebih dahulu

menggunakannya, bagian sirkulasi dapatmenggunakannya dengan baik dengan latihanmaksimal 2 kali pertemuan

cara mengukur dengan observasi langsung bagipencari informasi, dan uji coba bagi petugassirkulasi

Page 22: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

usability requirements

» flexibility

sistem informasi dapat memberikan keluwesanbagi pengguna yang akan mencari informasikatalog buku dengan cara memberikan tambahanfitur advance search.

cara mengukur yaitu dengan melakukanobservasi secara langsung terhadap fitur aplikasi.

Page 23: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

usability requirements

» effectiveness

Kecepatan waktu pencarian buku harus tidaklebih dari satu menit.

cara mengukur yaitu dengan pengujian fitursecara langsung menggunakan pagespeed insight

Page 24: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Define Users and Usability Requirements

→case study – SI Perpustakaan IT TELKOM

usability requirements

» attitude

pengguna merasa nyaman menggunakan sistem

informasi perpustakaan tersebut.

cara mengukur dengan membangun kuesioner

untuk mengungkap aspek kepuasan pengguna

Page 25: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Sketsa

25

Page 26: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Sketsa

Page 27: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Implementasi

Page 28: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Implementasi

Page 29: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Summary

→Perancangan antarmuka harus memperhatikan

kategori sistem yang akan dibangun, model

pendekatan yang dipakai dalam perancangan

dan tahap-tahap proses perancangan

antarmuka itu sendiri.

Page 30: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

Tugas Besar Tahap 1

→Kerjakan secara berkelompok sesuaidengan kelompok yang sudah dibentuksebelumnya.

→Definisikan pengguna dan kebutuhanusability dari sistem informasi/aplikasiyang diusulkan!system scope dan requirement

user roles

kelompok user

User class

usability requirements (learnability)

usability requirements (flexibility)

usability requirements (effectiveness)

Page 31: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan

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 32: Perancangan Antarmuka Bagian I: Mendefinisikan Pengguna ...fahrudin.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/70/2018/... · Perancangan Antarmuka Bagian I: ... » kebutuhan-kebutuhan