Interaksi manusia dan komputer

human-computer interraction

Chapter 1 : Introduction
Murein miksa mardhia
• murein.miksa@tif.uad.ac.id
TUGAS PERTEMUAN 1
TUJUAN : MENGAMATI PENGALAMAN PENGGUNA TERHADAP ANTARMUKA APLIKASI
• 1. Buat grup kecil dengan tim 2-3 orang.

• 2. pilih 2 aplikasi yang mempunyai jenis goal yang sama (contoh: aplikasi email, aplikasi e-commerce, portal berita, aplikasi
chat, aplikasi photo editor, document editor, aplikasi transportasi, aplikasi source code editor, dsb). Note: tidak boleh
ada 2 tim atau lebih yang mengerjakan objek yang sama.

• 3. lakukan observasi terhadap 2 aplikasi tersebut. Berikan tugas yang sama lalu catat langkah-langkah yang dilakukan (klik
tombol apa saja, pergi ke halaman apa, dsb), beserta respon yang ditunjukkan sistem.
• - Lakukan perbandingan mengenai aplikasi mana yang lebih baik dari segi:
• - fungsionalitas (bekerja atau tidak)
• - kemudahan akses/navigasi
• - kenyamanan pengguna (eye movement, penggunaan warna dan ukuran huruf, peletakan menu dan paragraf)
• - Selama task dijalankan, jangan lupa untuk mencatat perbandingan waktunya.

• 4. Laporkan eksperimen anda dalam 1 lembar kertas.

• 5. Isi laporan :

• - ((pendahuluan))deskripsi singkat mengenai aplikasi apa yang anda amati, misalnya kapan berdirinya, bagaimana tingkat popularitas dan jumlah penggunanya di Indonesia, dsb.(disertai sumber referensi dari internet)

• - ((hasil eksperimen))hasil observasi di no. (3)

Aplikasi yang sudah dipakai
• Shopee dan lazada
• Instagram dan path
• Tiket.com
• Gojek dan grab
• Shopee dan blibli
• Amazon dan Alibaba
• Traveloka dan pegipegi
• Detikcom dan CNNindo
• Tokopedia dan bukalapak
• Google dan bing
• Itunes dan joox
• Musicolet, joox dan spotify
• Whatsapp dan messenger
• Whatsapp dan telegram
Apa tujuan kita memasang aplikasi?
Karena ada GOAL yang hendak dicapai

Chat
dengan Membeli
teman Buku

Goal Ngatur
Beli
Tiket Keuangan
Pesawat

User
Goal tercapai jika User
mengerjakan beberapa task (tugas)

Goal

Payment
Sign up/in

Order
Checkout

Browse/Search

User
Semakin sedikit dan singkat task
yang dikerjakan, semakin baik.

Goal

User
Task dikerjakan melalui antarmuka yang
dipasang pada piranti/teknologi

Goal

User
 Antarmuka harus didesain dengan baik

Jenis
Interaksi &
antarmuka Goal

kognitif
emosional

Model
konseptual

Interaction style

User (persona) © Ardiansyah 2017

Desain antarmuka harus dievaluasi

Goal

Simple Easy
Efisien

Success rate
Enjoyable
User Fun
Kuliah IMK itu…

Manusia Evaluasi/Pengukuran

Desain
 Interaksi Manusia & Komputer

1. Pengantar IMK & Desain Interaksi

Ardiansyah
ardiansyah@tif.uad.ac.id
http://ardiansyah.tif.uad.ac.id

©2015-2016 Ardiansyah – Universitas Ahmad Dahlan

Agenda
1. Pengantar IMK & Desain Interaksi

2. Memahami User

3. Memahami Teknologi

4. Style Interaksi

5.

6.

7.
Capaian Pembelajaran
• Memahami sejarah disiplin ilmu IMK
• Memahami pengertian:
• Interaksi Manusia dan Komputer,
• Desain Interaksi,
• Antarmuka Pengguna (user interface/UI) dan
• Pengalaman Pengguna (user experience/UX)
• Memahami konsep dasar UX
• Memahami pentingnya UX dalam bisnis
• Mampu menjelaskan elemen-elemen UX
• Membedakan antara UX dan UI
Garis Besar Materi
1. Apa itu IMK?
2. Mengapa Belajar IMK?
3. Karir di bidang IMK
4. Sejarah IMK
5. Desain Interaksi
6. Antarmuka Pengguna
7. Pengalaman Pengguna
Sejarah IMK
▪ Manusia
▪ 1940an Komputer
▪ 1980an Interaksi
▪ Apa yang terjadi antara 1940-1980an?
▪ ENIAC (1940), UNIVAC (1950), JCL-System/360 (1960), Unix PDP-11 (1970)
▪ Interaksi belum menjadi pertimbangan para engineer yang merancang dan
membangun serta memprogram komputer.
▪ Interaksi mulai dipikirkan setelah 1980an.
▪ Komputer tidak hanya harus powerful tetapi juga mesti usable.
Sejarah IMK
▪ IMK meminjam bidang lain yang telah lama yaitu human factors atau
ergonomi
▪ Human factor (HF) merupakan bidang sains dan teknik
▪ HF concern terhadap kapabilitas, limitasi dan performa, terhadap
rancangan sistem yang efisien, aman, nyaman dan bisa dinikmati oleh
manusia yang menggunakannya.
▪ HF juga merupakan seni tentang bagaimana para praktisi bisa
mengaplikasikan cara-cara kreatif untuk meningkatkan keterampilan
perancangan sebuah sistem
Sketchpad (1962)
Mouse (1963)
Xerox Star (1981)
Card, Moran,
Newell (1983)
Macintosh
(1983)
Alasan & Tujuan Pengguna Menggunakan Komputer

• Menemukan sesuatu
• Mempelajari sesuatu
• Melakukan transaksi
• Mengendalikan atau memantau sesuatu
• Membuat sesuatu
• Berkomunikasi dengan orang lain
• Memproteksi sesuatu
• Untuk hiburan
Definisi HCI
• Interaksi Manusia Komputer (HCI) adalah disiplin ilmu yang
terkait dengan desain, evaluasi dan implementasi sistem
komputer interaktif untuk digunakan manusia beserta
studi/kajian fenomena besar yang ada di sekitarnya. (Hewett
et al, 1992 p 5)
• IMK menekankan pentingnya antarmuka yang baik dan
hubungan desain antarmuka untuk interaksi manusia dengan
komputer yang efektif
Definisi Desain Interaksi
• Mendesain produk-produk interaktif untuk
membantu manusia berkomunikasi dan
berinteraksi dalam kehidupan sehari-hari dan
pekerjaan mereka
• Istilah “Desain Interaksi” pertama kali dicetuskan oleh
Bill Moggridge, pembuat laptop pertama di dunia
Sasaran/Tujuan HCI
• Menghasilkan sistem yang usable dan safe serta sistem yang
berjalan secara fungsional
• Ringkasnya:
• Untuk mengembangkan atau meng-improve dari sisi safety, utility,
keefektifan, efisiensi dan usability sistem
• Sistem: perangkat keras, perangkat lunak, environment
• Usability merupakan konsep inti HCI yang berfokus pada
pembuatan sistem agar mudah dipelajari dan mudah digunakan.
Antarmuka Pengguna/User Interface (UI)
• Menghasilkan antarmuka yang mudah (self explanatory), efisien dan
ramah pengguna (user friendly) sehingga penggunan sistem bisa
mencapai tujuannya.
• Lebih menekankan pada tampilan visual yang langsung bisa
dilihat/dirasakan oleh pengguna
Pengalaman Pengguna/User Experience (UX)
• UX adalah pusat dari aktifitas desain interaksi
• Bagaimana produk bereaksi/berjalan dan digunakan oleh
pengguna di dunia nyata.
• Setiap produk yang digunakan oleh manusia pasti memiliki UX.
• UX adalah tentang apa/bagaimana yang dirasakan pengguna
terhadap produk. Ini meliputi kenikmatan serta kepuasan ketika
menggunakan, melihat, memegang, membuka/menutup produk
• Termasuk juga kesan menyeluruh terkait seberapa enak/bagus
produk digunakan.
Platform Desain
• Desktop
• Web
• Mobile
• Kiosks
• TV
• Otomotif
• Appliance
• Audible
User Experience (UX)
• Aspek
• Usability, fungsionalitas, estetika, konten, look and feel,
sensual & emotional appeal
• Wide reaching aspects: fun, health, social capital, cultural
identity
 UX Bagus = Bisnis Bagus

• Jika kesan pertama jelek, maka pengguna tidak akan kembali

• Bahkan UX Anda bagus, tapi kompetitor lebih bagus, maka mereka
tetap beralih ke kompetitor
• Fitur dan fungsi memang penting, tetapi UX memiliki efek lebih besar
terhadap loyalitas pelanggan/pengguna
• Teknologi canggih dan brand yang kuat tidak cukup membuat
pelanggan/pengguna kita kembali dalam waktu singkat
• Sisi bisnis juga ingin tahu seberapa besar ROI (return on investment)
yang dihasilkan
UX Bagus = Bisnis Bagus
• ROI (Return on Invesments): setiap rupiah yang
dikeluarkan, berapa rupiah hasil/nilai yang didapatkan
• Selain dalam bentuk nominal uang, ROI bisa juga
diekspresikan dalam bentuk nilai lain, yang intinya
terwujud dalam bentuk nilai yang bermanfaat bagi
perusahaan
• Umumnya menggunakan tingkat konversi (conversion
rate) sebagai hasil pengukuran dari keefektifan UX yang
dihasilkan
• Kualitas UX adalah faktor kunci pendukung keberhasilan
tingkat konversi
• Bahkan peningkatan konversi yang kecil pun dapat
berdampak pada pertumbuhan pendapatan bisnis secara
signifikan
 36 ÷ 3 =
pengunjung mendaftar

8.33%
Tingkat konversi
Apa Bedanya?
• Traveloka
• Tiket.com
• Tokopedia
• Bukalapak
• Lazada
• BliBli
• OLX
UX ≠ UI
UX ≠ UI
Mengapa HCI Menarik?
Terwujudnya Produk Hebat!
Facebook pun berevolusi
SISTEM ATM BANK UAD
Studi Kasus
1. STRATEGI
1. STRATEGI – Permintaan Pengembangan
Sistem
Elemen Deskripsi Contoh
Sponsor Orang yang Anggota departeman/bagian keuangan
Proyek menginisiasi/memulai Wakil Presiden bidang Marketing
project, sekaligus sebagai Manajer IT
orang utama di dalam Steering Committee
proyek ini di sisi bisnis CIO
CEO
Business Terkait alasan bisnis Meningkatkan penjualan
Need mengapa menginisiai Meningkatkan pangsa pasar
proyek pengembangan Meningkatkan akses informasi
software Meningkatkan layanan pelanggan
Mengurangi cacat produk
Mempersingkat proses supply acquisition
Business Kapabilitas bisnis yang Menyediakan akses informasi secara daring
Requirements akan terdapat pada Menangkap informasi demografi pelanggan
software Mampu melakukan pencarian produk
Menghasilkan laporan manajemen
Memberikan dukungan ke user yang online
1. STRATEGI – Permintaan Pengembangan
Sistem
Elemen Deskripsi Contoh
Business Benefit yang akan 3% peningkatan penjualan
Value diciptakan software % peningkatan pangsa pasar
kepada organisasi 10% pengurangan biaya operasional
$200,000 penghematan biaya dari
pengurangan ongkos pengadaan pasokan
$150,000 penghematan dari penghilangan
sistem yg sekarang
Special Issues Isu-isu yang relevan Batas akhir yang ditetapkan pemerintah yaitu
or Constraints terkait implementasi tgl 30 Mei
sistem yang perlu Sistem harus selesai sebelum libur
diketahui oleh approval Lebaran/Natal
committee Kejelasan yang diperlukan oleh anggota tim
proyek yang bekerja dengan keamanan rahasia
data tingkat tinggi

Pengguna Siapa saja pengguna Pengguna Portal adalah seluruh mahasiswa,

sistem dosen dan staf di UAD.
Apa saja kebutuhan Pengguna ATM adalah seluruh nasabah yang
Kebutuhan Bisnis
• Pola: “JIKA DIBANGUN, MAKA AKAN [MANFAAT]”
• These business requirements help define the overall
goals of the system and help clarify the contributions it
will make to the organization’s success
• Contoh:
• Jika sistem dibangun, maka akan “meningkatkan market
share”, “mempercepat proses pemesanan”, “mengurangi
biaya layanan konsumen”, “Lower inventory spoilage”,
“Improve responsiveness to customer service requests”,
“Provide account access to mobile customers.”
• When the systems development project is complete,
success will be measured by evaluating whether the
stated business requirements have actually been
achieved
Kebutuhan Pengguna
• Requirements are written from the perspective of
business
• Focus on what the system needs to do in order to
satisfy business user needs
• A good starting place is to concentrate on what the
user actually needs to accomplish with the system in
order to fulfill a needed job or task
• These user requirements describe tasks that the users
perform as an integral part of the business’ operations,
such as: “Schedule a client appointment”; “Place a new
customer order”; “Re-order inventory”; “Determine
available credit”; and “Look up account balances.”
• Use cases are tools used to clarify the steps involved in
performing these user tasks.
Requirements

Business describe what the business

Requirements needs
User requirements what the users need to do
Functional what the software should do
requirements
Nonfunctional characteristics the system
requirements should have
System requirements How the system should be
built
2. CAKUPAN
Kebutuhan Fungsional
• By understanding what the user needs to do in
terms of tasks to perform, the analyst can then
determine ways in which the new system can
support the users’ needs.
• A functional requirement relates directly to a
process the system has to perform as a part of
supporting a user task and/or information it needs
to provide as the user is performing a task.
• Functional requirements as “the product
capabilities, or things that a product must do for its
users
• Functional requirements begin to define how the
system will support the user in completing a task
Kebutuhan Fungsional
• Contoh:
• User Req: “Schedule a client appointment.”
• The functional requirements associated with that
task include: “Determine client availability,” “Find
available openings matching client availability,”
“Select desired appointment,” “Record
appointment,” and “Confirm appointment.”
3. STRUKTUR
4. KERANGKA
5. TAMPILAN
Elemen-Elemen Pemakaian (Use)
• Agar bisa mendesain antarmuka, pertama-tama kita harus memahami
tentang pemakaiannya terlebih dahulu
• Tipe pengguna (user)
• Actor
• User Role
• User Profile
• User Persona
Tujuan Pengguna
• Sebagai pengguna jika saya mencapai tujuan dengan menggunakan
aplikasi/antarmuka ini, maka saya beranggapan bahwa saya sudah
berhasil.
• Temukanlah tujuan yang bisa memotivasi penggunaan piranti lunak
Konteks Penggunaan
• Di mana dan kapan saya akan berada pada saat sedang mencoba
mencapai tujuan ini?
• Aktivitas-aktivitas apa yang perlu saya lakukan untuk mencapai tujuan
ini?
Pemodelan Pemakaian
• Model Workflow
• Use Case
• Model User Task
• Skenario Pengguna (user scenario)
• Use Story
User Task
• Perancang UI lebih sering menggunakan “User Task” untuk
mendeskripsikan apa yang mesti dilakukan pengguna
• Task memiliki tujuan/objektif yang mesti dicapai
• Task bisa didekomposisi menjadi task-task kecil
• Activity digunakan untuk mendeskripsikan goal yang lebih luas
• Contoh:
• Membaca email (task)
• Mengelola email (activity)
 activity
task

task task task task

User Story
• Sebagai seorang [user mana]
• Saya ingin [melakukan apa (task)]
• Sehingga saya dapat [mencapai tujuan/goal yang diinginkan]
Contoh:
• Sebagai seorang customer bank CBA
• Saya ingin mengecek saldo rekening saya
• Sehingga saya dapat mengetahui saldo rekening saya saat ini.
Software Product

User Story
Tools

Tasks

Goals
Use Case
• Use Case/Task Case merupakan cara mudah untuk
mendeskripsikan penggunaan sistem/tool
• Use Case fokus pada interaksi antara pengguna
dengan sistem
• Hindai pendeskripsian apa yang khusus pengguna
lakukan dengan cara berfokus pada
maksud/tujuan/intention si pengguna
• Menentukan tanggungjawab sistem berdasar pada
goal/tujuan pengguna dan harapannya.
User Intention System
Responsibility
Step one
System response
Step two
System response
Contoh kasus ATM: Penarikan Uang
Pelanggan Bank Sistem ATM Bank CBA
Tampil Daftar Menu
Pilih Penarikan
Tampil daftar jumlah
penarikan
Pilih salah satu jumlah
penarikan
Mengeluarkan uang
Mengambil uang
Menampilkan saldo akhir,
Logout
Referensi
• Mackenzie, S. I. (2013). Human-Computer Interaction: An Empirical
Research Perspective. Morgan Kaufman.