INTERAKSI MANUSIA

& KOMPUTER (IMK)

MODUL PERKULIAHAN

FAKULTAS ILMU KOMPUTER

UPN VETERAN JAKARTA
Gd. Ki Hadjar Dewantara, Kampus UPN Veteran Jakarta, Jl. RS Fatmawati
No.1, Pondok Labu, Cilandak, Jakarta Selatan 12450
 1

DAFTAR ISI
LEMBAR PENGESAHAN ________________________________________ 3
KONTRAK PERKULIAHAN ______________________________________ 4
Teknis Pelaksanaan ___________________________________________________ 4
Tugas & Komponen Penilaian ____________________________________________ 4
Tata Tertib ___________________________________________________________ 4

MODUL 01 – GAMBARAN INTERAKSI MANUSIA & KOMPUTER _________ 5

Apa itu IMK? - Definisi Pragmatis _________________________________________ 5
Desain User Interface (UI Design) _________________________________________ 5
Desain User Experience (UX Design) ______________________________________ 5
Motivasi Mempelajari IMK _______________________________________________ 6

DISKUSI 01 __________________________________________________ 7
MODUL 02 – PRINSIP USABILITY & USER-CENTERED DESIGN (UCD) ___ 8
Apa itu Usability? _____________________________________________________ 8
User Centered Design (UCD) ____________________________________________ 8
Metodologi Design Thinking _____________________________________________ 8

MODUL 03 – FAKTOR MANUSIA & TEORI WARNA __________________ 11

Faktor dalam Kemampuan Manusia ______________________________________ 11
Human’s Vision ______________________________________________________ 12
Teori Warna ________________________________________________________ 13

DISKUSI 02 _________________________________________________ 16
MODUL 04 – RAGAM DIALOG ___________________________________ 17
Jenis-jenis Ragam DIalog ______________________________________________ 17
Direct Manipulation ___________________________________________________ 17

MODUL 05 – WIREFRAMES DAN PROTOTYPING ___________________ 19

Bagaimana Membuat Wireframe? ________________________________________ 19
Metode Prototyping ___________________________________________________ 20

DISKUSI 03 _________________________________________________ 22
MODUL 06 – ANALISIS STAKEHOLDER ___________________________ 23
Soft-system Methodology ______________________________________________ 23
Socio-technical Modeling ______________________________________________ 24
Empathy Map _______________________________________________________ 24
User Persona _______________________________________________________ 25
DISKUSI 04 _________________________________________________ 27
MODUL 07 – PEMODELAN TASK & COGNITIVE ____________________ 28
 2

Hierarchical Task Analysis _____________________________________________ 28

Pemodelan GOMS ___________________________________________________ 29
Keystroke Level Modeling ______________________________________________ 31
DISKUSI 05 _________________________________________________ 32
MODUL 08 – PENGUKURAN USABILITY___________________________ 33
Time-on Task dan Task Completion Rate __________________________________ 33
Usability Metrics _____________________________________________________ 34

CONTOH KUESIONER SUS (Software Usability Scale) _______________ 35

Data Pengguna ______________________________________________________ 35
Petunjuk Pengisian Kuesioner___________________________________________ 35
Keterangan : Skala Pengukuran SUS _____________________________________ 36

PROYEK AKHIR (High-Fidelity Prototype) __________________________ 37

Gambaran Tugas ____________________________________________________ 37
Luaran Proyek _______________________________________________________ 37
Pengumpulan _______________________________________________________ 37
Referensi___________________________________________________________ 37
Poin Penilaian _______________________________________________________ 37

DAFTAR PUSTAKA ___________________________________________ 38

 3

LEMBAR PENGESAHAN

MODUL PERKULIAHAN

INTERAKSI MANUSIA DAN KOMPUTER

PROGRAM STUDI D3 SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER

disusun oleh

Dosen Koordinator

Ika Nurlaili Isnainiyah, S.Kom., M.Sc.

disetujui oleh

Ketua Program Studi Sistem Informasi Program Diploma

Ika Nurlaili Isnainiyah, S.Kom., M.Sc.

 4

KONTRAK PERKULIAHAN

Teknis Pelaksanaan
Perkuliahan dilaksanakan selama 16 kali pertemuan, terdiri atas :
• 14 kali pertemuan tatap muka teori
• 1 kali UTS
• 1 kali UAS

Metode perkuliahan dilaksanakan berdasarkan pendekatan student centered learning yang

dibagi menjadi pengkajian teori, diskusi kelompok, observasi lapangan, design sprint
simulation, quizzes dan project assesment.
Seluruh materi dan tugas dapat diakses melalui e-learning dengan alamat
https://elearning40.upnvj.ac.id.

Tugas & Komponen Penilaian

• 2 tugas latihan individu (20%)
• 2 tugas latihan kelompok (20%)
• UTS (20%)
• UAS dikerjakan dalam kelompok – menghasilkan presentasi high-fidelity-prototype
(40%)

Tata Tertib
• Mahasiswa menghadiri perkuliahan dengan tepat waktu. Keterlambatan lebih dari 15
menit tidak diperkenankan memasuki ruang kelas.
• Wajib terdaftar sebagai peserta kelas pada e-learning.
• Keterlambatan pengumpulan tugas akan mengurangi poin penilaian.
• Mengenakan pakaian yang sopan dan rapi serta bersepatu.
• Berdiskusi dan menyampaikan pendapat dengan menggunakan bahasa yang baik.
• Kehadiran minimum 80%.
 5

MODUL 01 – GAMBARAN INTERAKSI

MANUSIA & KOMPUTER

Tujuan Perkuliahan : Mahasiswa dapat mengetahui perkembangan interaksi manusia dan komputer,
merancang antarmuka yang baik dalam pembuatan program, memahami dan melakukan riset terhadap
pengguna, memahami ruang lingkup dan prinsip interaksi manusia dan komputer dalam berbagai
domain aplikasi.

Apa itu IMK? - Definisi Pragmatis

Interaksi Manusia dan Komputer (IMK) atau Human Computer Interaction adalah

suatu ilmu yang mempelajari bagaimana manusia—dalam hal ini sebagai user atau

pengguna—berinteraksi dengan berbagai jenis komputer. IMK juga mempelajari berbagai

teknik atau pendekatan untuk memahami sejauh mana komputer dapat dimodifikasi dan

dikembangkan untuk mencapai interaksi yang sukses. Bidang ini melibatkan berbagai jenis

machine, interface, aplikasi, prototype dan dalam tingkatan yang lebih tinggi terdapat suatu

bidang Human Robot Interaction (HRI).

Interaksi yang sukses dapat dipenuhi dengan dua hal, yaitu : (1) desain yang baik

dan (2) fungsi yang baik. Kedua hal tersebut dapat dipenuhi dengan mendesain user

interface dan user experience yang baik.

Desain User Interface (UI Design)

UI Design berfokus pada look and feel dari suatu produk, seperti penggunaan fonts,

warna, tata letak dan ruang [1]. UI merupakan hubungan antara pengguna dengan aplikasi

yang harus didesain dengan jelas, mudah dan efisien. UI adalah hasil dari UX yang dibahas

pada sub-bab berikutnya.

Desain User Experience (UX Design)

UX Design merupakan sebuah proses dalam mendesain produk fisik maupun digital

agar bermanfaat (useful), mudah digunakan, serta menyediakan pengalaman yang baik
 6

dalam berinteraksi [2]. UX Design meliputi banyak aspek, diantaranya adalah designing,

branding, research, usability, accessibility dan function.

Secara garis besar, UX meliputi pertanyaan mengapa, apa dan bagaimana suatu

produk digunakan oleh penggunanya seperti diilustrasikan pada gambar 1.

Gambar 1. Ilustrasi penerapan UX pada mesin ATM

Motivasi Mempelajari IMK

IMK membantu memahami mengapa beberapa produk perangkat lunak sangat baik dan

beberapa lainnya jarang atau tidak banyak digunakan. Sebagian diantara produk tersebut

belum memenuhi kaidah UI maupun UX yang baik, serta gagal dalam memenuhi aspek

ergonomis. Hal-hal berikut perlu dihindari agar audience yang dimiliki tidak berpindah pada

produk lainnya.
 7

DISKUSI 01

Konsep dan strategi dalam Interaksi Manusia dan Komputer ( IMK) mencakup
berbagai bidang ilmu (multidisiplin), seperti ilmu komputer, psikologi,
cognitive science , komunikasi, pendidikan, antropologi dan desain. Lakukan
pencarian berkaitan dengan bidang kerja yang berhubungan dengan area ilmu
IMK sebagai berikut.

• UI Designer atau UI Prototyper

• UX Researcher
• UX Writer
• Interaction Designer

Kemampuan apa saja yang perlu dikuasai dalam setiap bidang kerja tersebut? Bagaimana
peran dan penerapan ilmu IMK dalam dunia industri saat ini?

Lakukan pencarian dari berbagai sumber yang relevan dan sampaikan hasil informasi yang
Anda peroleh dalam forum yang tersedia di e-learning!
 8

MODUL 02 – PRINSIP USABILITY & USER-

CENTERED DESIGN (UCD)
Dalam mewujudkan kesuksesan interaksi antara aplikasi dengan penggunanya, dua hal

berikut perlu dipenuhi, yaitu : (1) desain yang baik dan (2) fungsi yang baik. Keduanya

mampu dipenuhi dengan memperhatikan aspek usability pada aplikasi, yang juga berkaitan

dengan kemampuan pengguna, tujuan maupun skenario pengguna. Perlu diterapkan juga

sudut pandang yang berfokus pada penggua atau dikenal sebagai user centered design.

Apa itu Usability?

Usability, berdasarkan ISO 9241-11, adalah sejauh mana sebuah produk dapat

digunakan oleh pengguna tertentu untuk mencapai tujuan tertentu dengan efektif, efisiensi

dan pengguna menjadi puas dalam penggunaan produk [3]. Secara umum pengertian

usability adalah atribut dari kualitas yang digunakan untuk mengevaluasi bagaimana

mudahnya sebuah antar muka digunakan.

User Centered Design (UCD)

User Centered Design (UCD) merupakan filosofi dalam perancangan desain sistem

yang berfokus pada kebutuhan user. UCD adalah bagian dari SDLC (Software

Development Life Cycle) yang lebih berfokus pada kebutuhan pengguna sehingga

diharapkan aplikasi yang akan mengikuti kebutuhan pengguna sehingga pengguna tidak

perlu mengubah perilaku untuk menggunakan aplikasi [4]. Bagaimana UCD dapat

diterapkan dengan baik? Penerapan UCD membutuhkan riset dan pemahaman yang

berfokus terhadap pengguna, percobaan dan iterasi saat pengguna mengalami kegagalan.

Metodologi Design Thinking

Design thinking yang pertama kali diperkenalkan oleh Hasso Plattner, merupakan

salah satu proses strategis yang tidak terlepas dari UCD. Proses design thinking disusun
 9

secara sistematis untuk menyelesaikan masalah melalui produk, layanan atau alat

pembantu lainnya. Dalam prosesnya, dilakukan tahapan pengumpulan informasi,

menggagas ide dan akhirnya menguji produk. Rentetan langkah tersebut merupakan

tahapan berkreasi yang disajikan pada gambar 2.

Gambar 2. Tahapan Design Thinking

Proses berempati terhadap pengguna adalah landasan awal dalam proses design thinking.

Berbagai informasi yang telah dikumpulkan dari tahap empathize selanjutnya dilakukan

analisis lebih lanjut untuk menemukan harapan-harapan (gain point) dan kendala atau

permasalahan (pain point) dari pengguna untuk menetapkan elemen produk dalam fase

define.

Pengembangan ide mulai dilakukan dalam tahapan ideate yang melibatkan beberapa

kegiatan pematangan ide seperti brainstorming, mindmapping dan sketching. Ide tersebut

selanjutnya dikembangkan ke dalam wireframe dan prototype (akan dibahas di modul lain)

dalam fase berikutnya. Prototype yang telah siap akan dilakukan pengujian pada tahapan
 10

test untuk mendapatkan umpan balik. Jika hasil yang diperoleh sudah baik, maka prototype

siap untuk diimplementasikan.

Bagaimana mengambil umpan balik dari penggunaan produk?

Hal tersebut dapat meliputi beberapa jenis pengujian untuk menentukan completion rate

pada produk yang dikembangkan, yaitu :

• A/B Testing

• Usability Testing

• Cognitive Walkthrough
 11

MODUL 03 – FAKTOR MANUSIA & TEORI

WARNA

Faktor dalam Kemampuan Manusia

Dalam proses memahami dan berempati terhadap pengguna, terdapat beberapa

faktor yang perlu dipertimbangkan, yaitu berkaitan dengan (1) knowledge/experience, (2)

karakter psikologis dan (3) karakter fisik. Faktor-faktor tesebut disajikan pada tabel 1-3

berikut [5].

Tabel 1. Faktor Manusia (knowledge/experience)

Tabel 2. Faktor Manusia (karakteristik psikologis)

 12

Tabel 3. Faktor Manusia (karakteristik fisik)

Faktor-faktor manusia sangat dipengaruhi oleh 3 dari 5 panca indera, yaitu indera

penglihatan, indera pendengaran dan indera perasa.

Indera penglihatan merupakan bagian utama yang memproses tampilan dalam UI secara

menyeluruh. Indera pendengaran akan memproses suara yang terdapat dalam aplikasi,

sedangkan indera perasa memungkinkan interaksi langsung dalam penggunaan tombol

dan touchscreen.

Human’s Vision

Penglihatan manusia merupakan bagian yang tidak terpisahkan dalam pengalaman

pengguna terhadap look and feel dari aplikasi. Kemampuan manusia dalam penglihatan

dipengaruhi oleh jumlah cahaya yang diterima oleh mata. Intensitas cahaya akan

berpengaruh terhadap luminance yang seharusnya menghasilkan tingkat kecerahan

(brightness) dari objek yang dilihat.

Melalui penglihatan, manusia melakukan observasi terhadap lingkungan sekitar.

Pergerakan mata manusia terdiri atas dua aktivitas utama : fixations dan saccades [6].

Fixations terjadi ketika melihat suatu titik objek tertentu selama beberapa waktu, secara

umum berkisar antara 200 ms. Saccades merupakan perpindahan yang terjadi pada satu

titik fixation ke titik fixation lainnya. Banyak penelitian IMK yang berkaitan dengan observasi

melalui pergerakan mata. Salah satunya adalah analisis yang dilakukan terhadap

bagaimana pengguna melihat dan membaca konten yang terdapat pada halaman website

untuk menemukan pattern dari keseluruhan viewers.

 13

Gambar 3. Pergerakan mata pengguna pada konten website [6]

Teori Warna

Warna merupakan salah satu bagian pengalaman pengguna yang diperoleh dari

indera penglihatan. Setiap warna dapat menciptakan persepsi dari pengguna. Warna terang

(warm colors) seperti merah dan oranye, umumnya mengisyaratkan suatu keharusan aksi,

peringatan dan perhatian penting. Sebaliknya, warna seperti hijau dan biru ( cool colors)

memberikan informasi, status dan aktivitas yang telah berhasil dilakukan oleh pengguna.

Tabel 4 menunjukkan saran rekomendasi warna yang dapat digunakan untuk foreground

dan background.
 14

Tabel 4. Kombinasi warna foreground/background

Teori kombinasi pewarnaan dapat didasarkan dengan pembentukan kombinasi warna yang

mengambil inspirasi dari lingkungan sekitar. Contohnya pada sebuah aplikasi atau website

yang berkaitan dengan travelling akan melibatkan banyak warna biru. Hal tersebut

didasarkan representasi lingkungan berkaitan dengan warna laut, langit, pegunungan dan

berbagai objek pemandangan lainnya.

Metode lain dalam menerapkan kombinasi warna adalah dengan mengambil referensi

berdasarkan roda warna (color wheel) yang disajikan pada gambar 4. Kombinasi ini dapat

menciptakan kombinasi warna analog, komplementer, triadic dan split complement.

 15

Gambar 4. Roda warna dalam teori warna

 16

DISKUSI 02

Aspek apa saja yang perlu diterapkan dalam pemilihan kombinasi warna pada
sebuah user interface (UI)? Kombinasi warna salah satunya dapat dilakukan
dengan penggalian konteks dengan melakukan observasi pada lingkungan
sekitar.

Tugas Individu : Buatlah perbaikan kombinasi warna terhadap sampel user interface untuk
website bertemakan makanan organik yang terdapat pada e-learning. Anda dapat
menggunakan kombinasi warna berdasarkan konteks, menggunakan kombinasi yang
terdapat pada color wheel atau menggabungkan keduanya.

Tugas dapat dikumpulkan melalui e-learning dan akan dibahas dalam diskusi kelas pada
pertemuan tatap muka ke-4.

Selamat mengerjakan!
 17

MODUL 04 – RAGAM DIALOG

Terjadinya komunikasi antar manusia dan komputer dimungkinkan oleh adanya berbagai

teknik dialog interaktif yang cukup bervariasi, dimulai dari yang sederhana sampai yang

cukup canggih. Gaya interaksi tersebut disebut dengan ragam dialog.

Jenis-jenis Ragam DIalog

Berbagai jenis ragam dialog diciptakan untuk menciptakan lingkungan aplikasi yang

user friendly. Secara umum, terdapat 3 jenis utama dalam ragam dialog[7], yaitu :

• Command-line Dialogue – ragam dialog berikut berada dalam suatu domain yang

disebut bahasa perintah (command language). Ragam dialog ini memerlukan

pelatihan yang lama dan membutuhkan beban ingatan pengguna yang tinggi.

• Natural languange interface – ragam dialog ini memerlukan sebuah sistem

penterjemah (interpreter) yang dapat menterjemahkan suatu kalimat pada dua arah.

Semakin luwes bahasa alami yang dikehendaki oleh pengguna, semakin rumit pula

sistem penterjemah yang harus disiapkan oleh pengembang sistem.

• Direct Manipulation – merupakan ragam dialog dimana aksi yang dilakukan oleh

pengguna dapat langsung terlihat pada obyek yang tampak pada layar monitor.

Ragam dialog ini sering disebut juga dengan ‘point-select interface’ yang

menyertakan obyek dan aksi. Ragam dialog ini akan dibahas pada sub bab

selanjutnya.

Direct Manipulation

Berdasarkan Nielsen Norman Group, direct manipulation (DM) didefnisikan sebagai

sebuah gaya interaksi dimana pengguna langsung merespon suatu obyek menggunakan

tindakan yang dapat dilakukan secara berulang dan memberikan hasil yang langsung

ditampilkan di layar. Ragam dialog ini memungkinkan interaksi yang cepat dan
 18

membutuhkan beban ingatan yang lebih ringan bagi pengguna. DM memerlukan dukungan

dari beberapa devices seperti mouse, trackball atau layar sentuh (touch screen).

Dalam ragam dialog DM, dikenal istilah WIMP yang berarti Window, Icon, Menu dan

Pointer. WIMP memungkinkan interaksi para pengguna tanpa input berupa teks yang

berasal dari keyboard. WIMP memerlukan upaya untuk menciptakan object of interest yang

dapat menjadi ketertarikan atau fokus perhatian pengguna. Dalam perkembangannaya,

WIMP melibatkan berbagai tahapan redesain khususnya berkaitan dengan icon design dari

yang sangat detail menjadi lebih sederhana dan mudah dipahami.

 19

MODUL 05 – WIREFRAMES DAN

PROTOTYPING
Salah satu tahap awal dalam merancang user interface adalah pembuatan wireframe.

Wireframe merupakan kerangka dasar untuk penataan item-item pada suatu interface

sebelum proses desain sesungguhnya dimulai. Wireframe merupakan salah satu tahapan

yang terdapat dalam prototyping.

Bagaimana Membuat Wireframe?

Secara keseluruhan, wireframe hanya terdiri atas garis dan segi empat yang

merepresentasikan tata letak dari elemen-elemen yang terdapat dalam aplikasi. Sebelum

perancangan wireframe dimulai, biasanya terlebih dahulu dibangun storyboard serta

information architecture yang berkaitan dengan informasi apa saja yang terdapat pada

aplikasi (form input, thumbnail, tekas paragraf, gambar atau elemen lainnya). Storyboard

Storyboard adalah visualisasi ide dari jalannya aplikasi yang akan dibangun, sehingga

dapat memberikan gambaran dari aplikasi yang akan dihasilkan atau tepat. Elemen yang

terdapat dalam wireframe diantaranya adalah navigasi dan tata letak (layout) interface

aplikasi.

Gambar 5. Contoh wireframe halaman web

 20

Pembuatan wireframe dapat dilakukan dengan menggunakan sketsa yang dilakukan

secara manual di atas kertas (lihat gambar 5) atau menggunakan stencil dan potongan-

potongan gambar. Cara lain yang dapat dilakukan adalah membuat wireframe dengan

menggunakan aplikasi-aplikasi berikut :

• InVision

• UXPin

• Wireframe.cc

• Balsamiq mockups

Metode Prototyping

Prototyping merupakan proses merancang model dari sebuah aplikasi melalui

proses interaksi yang biasanya digunakan untuk keperluan pengujian berulang sebelum

berlanjut ke tahap pembuatan produk sesungguhnya [2]. Terdapat tiga jenis utama dari

prototype (lihat gambar 6), yaitu :

• Low-fidelity prototype merupakan desain prototype yang tingkat presisinya masih

rendah dan belum benar-benar mendekati produk aslinya. Umumnya jenis prototype

ini dapat direpresentasikan dengan sketsa hingga wireframe.

• Mid-fiidelity prototype merupakan penyempurnaan desain low-fidelity prototype

untuk menuju desain yang lebih sempurna.

• High-fidelity prototype adalah jenis prototype yang memiliki presisi yang tinggi

dengan mockup yang sesuai dengan aplikasi sesungguhnya serta disertai dengan

interaksi.
 21

Gambar 6. Ilustrasi dari Low-fidelity ke High-fidelity prototype

Beberapa aplikasi dapat digunakan dalam merancang high-fidelity prototype dan

banyak digunakan di kalangan praktisi bidang UI/UX. Aplikasi tersebut adalah Adobe

Experience Designer (XD), Figma dan Marvelapp.

 22

DISKUSI 03

Tahapan design sprint dalam pengembangan prototype dapat diterapkan

sebagai proses kolaboratif yang dapat membuahkan banyak ide dan inovasi.
Design Sprint ini dibuat oleh Jake Knapp dari Google Venture pada tahun
2010 dan kini banyak sekali dipakai oleh berbagai perusahaan .

Design sprint adalah suatu metode untuk membangun konsep hingga prototype dalam
waktu 5 hari yang memiliki 5 tahapan yang sangat komunikatif dan interaktif seperti tertera
di atas untuk mengeluarkan semua ide, inspirasi, masalah yang ada, serta solusi yang
kemudian diwujudkan dalam prototype untuk diujikan ke calon pengguna.

Catatan : Simulasi design sprint akan dilakukan secara berkelompok dalam diskusi di kelas
pada pertemuan tatap muka ke-6. Persiapkan diri Anda.
 23

MODUL 06 – ANALISIS STAKEHOLDER

Dalam pendekatan UCD, diperlukan pemahaman secara mendalam terhadap

pengguna sehingga perlu diperhatikan berbagai isu socio-organizational yang berkaitan

dengan lingkungan pengguna. Analisis dilakukan terhadap pengguna atau stakeholder

yang melibatkan empat tingkatan[7], yaitu :

• Primary stakeholder merupakan pengguna utama yang berinteraksi secara langsung

dengan sistem.

• Secondary stakeholder adalah mereka yang hanya sedikit berinteraksi atau memiliki

interaksi secara tidak langsung sebagai penyedia dan penerima data yang

digunakan dalam sistem.

• Tertiary stakeholder merupakan pihak yang secara tidak langsung terlibat dan

bahkan tidak turut menggunakan sistem, namun memiliki faktor kesuksesan yang

dipengaruhi oleh ada atau tidaknya sistem.

• Facilitating stakeholder adalah para tim pengembang sistem yang terdiri dari

researcher, analisis sistem, desainer hingga programmer.

Soft-system Methodology

Soft-system Methodology (SSM) merupakan sebuah metodologi untuk menganalisis

dan melakukan pemodelan sistem yang mengintegrasikan dua pendekatan sistem dari

sudut pandang teknologi (hard) dan manusia (soft). SSM dikembangkan di Inggris oleh

Peter Checkland di University of Lancaster di dalam program penelitian selama sepuluh

tahun dan dipulikasikan pertama kali pada tahun 1981.

SSM memiliki kelebihan untuk menganalisis kondisi yang rumit dan mengetahui

masalah-masalah yang berkaitan dengan perilaku organisasi dan manusia yang sifatnya

tidak menentu. SSM dilakukan dengan tahapan sebagai berikut :

• Analisis terhadap problem situation.

 24

• Formulasi dan presentasi permasalahan dengan rich picture.

• Membuat root definition dari gambaran permasalahan dengan melakukan socio-

technical modeling.

• Membandingkan model dengan kenyataan sebagai bahan membuat perubahan

berupa usulan sistem baru atau peningkatan sistem yang sudah ada.

Socio-technical Modeling

Salah satu teknik analisis yang dapat digunakan dalam pemodelan socio-technical

adalah CATWOE Analysis. CATWOE adalah mnemonik yang membantu mengidentifikasi

dan mengelompokkan semua informasi (manusia, proses, lingkungan, entitas) dari sistem

yang sedang dianalisis untuk merumuskan root definition. Komponen dalam analisis

CATWOE digambarkan pada tabel 5 sebagai berikut.

Tabel 5. Analisis CATWOE

Komponen Deskripsi
C (Client) Pihak yang memperoleh manfaat dengan adanya T.

A (Actors) Pengguna dari sistem atau T yang dilakukan.

T (Transformation) Berupa aktivitas input dan output yang terjadi ketika

sistem diterapkan.

W (Worldview) Konteks yang memberikan gambar situasi ketika T

diterapkan.

O (Owner) Pihak yang memiliki wewenang penuh atas penerapan

T.

E (Environment) Lingkungan dimana T diterapkan.

Empathy Map

Empathy map adalah visualisasi kolaboratif yang digunakan untuk

mengartikulasikan apa yang kita ketahui tentang tipe pengguna tertentu. Fungsi dari

empathy map adalah membantu memvisualisasikan sikap dan perilaku pengguna dan
 25

menyelaraskan pemahaman bersama tentang kebutuhan pengguna sehingga dapat

membantu proses pengambilan keputusan desain. Secara umum, empathy map dibagi

menjadi empat kuadran (Says, Thinks, Do, dan Feels), dengan pengguna atau sebuah

persona di tengah[8]. Peta ini memberikan pandangan sekilas tentang siapa pengguna

secara keseluruhan.

Gambar 7. Contoh visualisasi empathy map [8]

User Persona

Persona pertama kali diperkenalkan oleh Alan Cooper adalah representasi dari

target user yang akan menggunakan aplikasi. Persona berisikan dokumentasi berupa

penjelasan tentang karakteristik user yang digabungkan dengan tujuan, kebutuhan dan
 26

ketertarikannya berdasarkan fakta dan hasil penelitian yang telah dilakukan. Apa saja yang

dapat digambarkan oleh suatu persona?

• Karakteristik pengguna baik fisik, psikologis serta keahliannya (lihat Modul 3).

• Perilaku pengguna saat itu

• Sikap pengguna pada umumnya

• Keinginan atau kebutuhan dari produk yang didesain

• Kesulitan pengguna untuk mengatasi situasi saat itu

• Tujuan pengguna

Sebuah user persona harus mampu menjelaskan hasil observasi user research dan fokus

pada kondisi saat ini (bukan kondisi yang akan terjadi di masa mendatang). Persona (contoh

terdapat pada gambar ) dapat membantu tim desain untuk menetapkan dasar penyusunan

UX.

Gambar 8. Contoh persona untuk aplikasi Architectural Inspiration

 27

DISKUSI 04

Bagaimana menyusun sebuah user persona ? Aspek apa saja yang perlu kita
ketahui dari target pengguna? Dalam kondisi dimana tidak ada sumber sama
sekali untuk melakukan penelitian pengguna, user persona dapat digantikan
dengan proto persona . Persona ini dibuat berdasarkan judgement yang
dilakukan oleh tim didasarkan pada sumber -sumber yang relevan.

Tugas kelompok : Lakukan observasi lapangan kepada pengguna berkaitan dengan ide
prototype aplikasi yang akan Anda bangun bersama dengan tim untuk Proyek Akhir. Buatlah
user persona yang merepresentasikan target pengguna aplikasi tim Anda.

Tugas dapat dikumpulkan melalui e-learning dan akan dipresentasikan dalam diskusi
kelas pada pertemuan tatap muka ke-9.

Selamat mengerjakan!
 28

MODUL 07 – PEMODELAN TASK &

COGNITIVE
Dalam mempermudah proses pembuatan prototype, terdapat sejumlah metode yang

dapat memodelkan pengalaman pengguna atau UX baik secara analitis maupun deskriptif.

Metode pemodelan tersebut adalah task modeling dan cognitive modeling yang ditujukan

untuk menggambarkan apa yang dilakukan sistem dan bagaimana kemampuannya

diterjemahkan ke dalam pengalaman penggunaan sistem.

Hierarchical Task Analysis

Hierarchical Task Analysis (HTA) memberikan pemahaman tentang tugas (task)

yang harus dilakukan pengguna untuk mencapai tujuan tertentu [7]. Tugas dapat

digambarkan secara menyeluruh atau mendetail sesuai dengan fitur yang ada dalam

aplikasi. Gambar 9 memberikan ilustrasi penggambaran HTA untuk fitur ( task) pemesanan

buku pada sebuah website Online Bookstore.

Gambar 9. Contoh HTA pada online bookstore

Pada contoh tersebut, terlihat bahwa task akan dibreakdwon menjadi subtask untuk

menunjukkan langkah-langkah yang perlu dilakukan pengguna ketika melakukan

pemesanan buku. Masing-masing task dan subtask diberikan penomoran yang

menandakan urutan serta dapat diberikan kondisi apabila task adalah opsional atau dapat

dilakukan tanpa memperhatikan urutan (contoh task modeling dengan HTA lebih detail

terdapat pada gambar 10).

 29

Gambar 10. Contoh ilustrasi HTA dalam membuat secangkir teh

Pemodelan GOMS

Pemodelan GOMS yang diperkenalkan oleh Card, Moran dan Newell merupakan

kependekan dari Goal, Operators, Methods and Selection. GOMS merupakan sebuah

struktur pemodelan kognitif yang terdiri dari empat komponen: (1) sekumpulan tujuan, (2)

sekumpulan operator, (3) sekumpulan metode untuk mencapai tujuan, dan (4) sekumpulan

aturan seleksi untuk memilih di antara metode yang ada. Struktur pemodelan GOMS dapat

dibangun dan digunakan untuk memprediksi waktu yang dibutuhkan untuk menyelesaikan

tugas (time-on-task) yang akan dibahas pada Modul 8.

 30

Gambar 11. Contoh pemodelan GOMS

Ilustrasi pemodelan GOMS yang terdapat pada gambar 11 merupakan alur aktivitas

kognitif pengguna dalam memulai sebuah prototype permainan edukasi yang

diperuntukkan untuk pengunjung Taman Mini Indonesia Indah (TMII). Terdapat dua pilihan

(selections) yang dapat dilakukan untuk memulai permainan, yaitu (1) dengan langsung

menekan tombol main pada layar Home; atau (2) memilih dahulu anjungan daerah yang

akan dijelajahi, baru kemudian memulai permainan. Keduanya memiliki langkah-langkah

(operators) yang berbeda satu sama lain. Selections dapat dipertimbangkan dalam proses

pengujian (testing) untuk mengetahui seperti apa pilihan alur yang menjadi preferensi dari

para pengguna untuk mencapai tujuan.

 31

Keystroke Level Modeling

Keystroke Level Model (KLM) merupakan salah satu metode pemodelan kognitif

selain GOMS yang menggambarkan operator-operator tugas pengguna dalam beberapa

kode huruf. KLM digunakan untuk mengetahui estimasi berapa lama waktu yang diperlukan

oleh pengguna dalam menjalankan sebuah task [7]. Operator huruf yang digunakan dalam

pemodelan KLM adalah sebagai berikut.

• K keystroke, berupa penekanan tombol keyboard, termasuk tombol shift dan tombol-

tombol lainnya.

• B berupa penekanan tombol mouse (mouse button)

• P pointing, menggerakkan mouse (atau device lain) ke suatu target lokasi

• H homing, perpindahan tangan dari mouse dan keyboard

• D drawing, menggambar garis dengan menggunakan mouse

• M mental, persiapan pemikiran untuk menyelesaikan suatu aksi fisik

• R system response, yang bisa diabaikan jika user tidak perlu menunggu

penyelesaian dari suatu tugas, seperti dalam mengcopy satu karakter.

Tabel 6. Contoh pemodelan KLM untuk delete file ke trash [9]

 32

DISKUSI 05

Task modeling dan cognitive modeling dapat memberikan pemahaman yang

lebih mendalam terhadap skenario penggunaan aplikasi. Pemodelan
cognitive menggunakan GOMS atau KLM juga dapat digunakan sebagai input
untuk melakukan pengujian pengguna pada tahapan terakhir design thinking .

Tugas Individu : Buatlah pemodelan HTA, GOMS atau KLM (pilih salah satu) sesuai dengan
ide prototype aplikasi yang Anda kembangkan bersama dengan tim untuk Proyek Akhir.
Sertakan skenario yang berkaitan dengan fitur utama dalam pemodelan Anda.

Tugas dapat dikumpulkan melalui e-learning dan akan dibahas dalam diskusi kelas pada
pertemuan tatap muka ke-11.

Selamat mengerjakan!
 33

MODUL 08 – PENGUKURAN USABILITY

Untuk mengetahui sejauh mana sebuah produk dapat digunakan oleh pengguna

untuk mencapai tujuan tertentu dengan efektif, efisiensi serta mengetahui sejauh mana

tingkat kepuasan pengguna dalam penggunaan produk, maka perlu dilakukan pengukuran

usability. Tahapan ini merupakan tahapan paling akhir dalam design thinking. Teknik

pengukuran dapat didasarkan pada pengujian hasil pemodelan kognitif yang telah dibahas

pada Modul 7. Metode lain yang dapat digunakan adalah menerapkan sejumlah skala

pengukuran (metrics) yang telah digunakan secara luas diterapkan dalam domain

pembangunan aplikasi.

Time-on Task dan Task Completion Rate

Time-on-task atau dikenal dengan task completion time merupakan waktu yang

dibutuhkan oleh pengguna dalam menyelesaikan task tertentu yang berhubungan dengan

satu atau lebih fitur dalam aplikasi. Dalam pengujian time-on-task dibutuhkan scenario yang

berisikan task dengan tujuan yang telah ditetapkan. Tabel 7 berikut memberikan gambaran

perbandingan perhitungan time-on-task yang digabungkan dengan pemodelan KLM untuk

menutup suatu Window.

Tabel 7. Contoh pemodelan KLM untuk delete file ke trash [9]

USE-CLOSE-METHOD
USE-CTRL-W-METHOD
P[to menu] 1.1
H[to kbd] 0.40
B[LEFT down] 0.1
M 1.35
M 1.35
K[ctrlW key] 0.28
P[to option] 1.1
B[LEFT up] 0.1
Total 2.03 s Total 3.75 s

Total time-on-task dilakukan dengan menjumlahkan seluruh waktu yang diperlukan

pengguna untuk menyelesaikan tugas. Pengukuran dapat digunakan untuk

membandingkan efisiensi dari beberapa tasks yang diujikan. Hasil pengujian juga memiliki
 34

kaitan yang sangat erat dengan task completion rate—yang menunjukkan jumlah prosentase

pengguna yang dapat menyelesaikan tasks dalam scenario yang diujikan. Task completion

rate sebesar 100% menunjukkan bahwa seluruh pengguna dapat menyelesaikan scenario

yang diberikan dan menggambarkan bahwa fitur yang ada dalam prototype aplikasi dapat

digunakan dengan mudah. Pengujian berulang setelah dilakukan perbaikan fitur juga dapat

dilakukan untuk mencapai peningkatan completion rate. Selain itu, pengukuran juga dapat

dilakukan dengan bantuan online tools seperti Maze.design (https://maze.design).

Usability Metrics

Metode pengukuran usability juga dapat dilakukan dengan melakukan penilaian

menggunakan kuesioner. Metode ini bisa dilakukan setelah pengguna ikut serta dalam

usability testing dan dapat dibarengi dengan proses wawancara. Berikut merupakan

beberapa kuesioner yang banyak diterapkan untuk mengukur usability dari aplikasi :

• SUS (https://cui.unige.ch/isi/icle-wiki/_media/ipm:test-suschapt.pdf)

• CSUQ (https://garyperlman.com/quest/quest.cgi?)

• User Engagement Scale (UES) (http://ceur-ws.org/Vol-1391/66-CR.pdf)

• UEQ versi long maupun short (https://www.ueq-online.org)

• SUMI (http://sumi.uxp.ie/en/index.php)

• SUPR-Q (http://uxpajournal.org/wp-

content/uploads/sites/8/pdf/JUS_Sauro_Feb2015.pdf)

Masing-masing kuesioner tersebut dapat digunakan dengan mencantumkan sumber

referensi yang disertakan pada masing-masing website. Pengukuran yang digunakan

menerapkan skala likert yang berkisar pada 3, 5 atau 7 skala. Berikut disertakan salah satu

contoh kuesioner SUS (Software Usability Scale) yang merupakan skala pengukuran paling

sederhana dan terdiri atas 10 pernyataan bagi pengguna. SUS menerapkan 5 skala likert

yang dimulai dari Sangat Tidak Setuju (1) hingga Sangat Setuju (5)
 35

CONTOH KUESIONER SUS (Software

Usability Scale)

Data Pengguna
• Nama : …………………………………………………………..
• Usia : …………………………………………………………..
• Gender :  Laki-laki  Perempuan * centang () pilihan yang sesuai
• Frekuensi penggunaan aplikasi (opsional) :  setiap hari  lainnya, sebutkan ………….

Petunjuk Pengisian Kuesioner

Perhatikan masing-masing pernyataan yang tersedia dan isilah skala penilaian dengan
tanda centang () sesuai dengan pengalaman yang Anda rasakan dalam menggunakan
aplikasi.

PERNYATAAN (1) (2) (3) (4) (5)

Saya merasa bahwa saya akan menggunakan
    
sistem ini secara sering.
Saya merasa bahwa sistem ini terlalu kompleks
    
Menurut saya, penggunaan sistem ini sangat
    
mudah
Saya merasa membutuhkan dukungan technical
    
person untuk dapat menggunakan sistem ini
Saya merasa seluruh fungsi dalam sistem ini
    
terintegrasi dengan baik
Terlalu banyak inkonsistensi dalam sistem ini
    
Sebagian besar orang akan dapat belajar
    
menggunakan sistem ini dengan cepat
Saya merasa sistem ini sangat merepotkan
    
untuk digunakan
Saya merasa sangat percaya diri dalam
    
menggunakan sistem ini
Saya butuh belajar banyak sebelum dapat
    
menjalankan sistem ini
 36

Keterangan : Skala Pengukuran SUS

• (1) Sangat Tidak Setuju
• (2) Tidak Setuju
• (3) Netral
• (4) Setuju
• (5) Sangat Setuju
 37

PROYEK AKHIR (HIGH-FIDELITY

PROTOTYPE)

Gambaran Tugas
Buatlah sebuah prototype aplikasi (berbasis mobile atau web; pilih salah satu) sesuai
dengan tema yang ada pada e-learning. Aplikasi dapat dikerjakan secara berkelompok yang
beranggotakan 4 orang.

Luaran Proyek
1. Proyek yang dikerjakan akan dipresentasikan pada pertemuan ke-16 (UAS) berupa
penjelasan dalam PPT dan demonstrasi hasil akhir high-fidelity-prototype.

Pengumpulan Poin Penilaian

Masing-masing tim dapat mengumpulkan file
presentasi dan prototype akhir pada tautan
yang tersedia di e-learning maksimal H-1
sebelum tanggal presentasi.
Referensi
Inspirasi berbagai desain dapat Anda temukan
pada https://dribbble.com.
Penilaian proyek akhir meliputi beberapa
kriteria berikut.
• Inovasi dan kebaruan (10%)
• Analisis Target Pengguna (20%)
• Desain Tampilan (40%)
• Skenario Penggunaan (30%)
 38

DAFTAR PUSTAKA
[1] Galitz, Wilbert O., 2007. The Essential Guide to User Interface Design – 3rd ed.
Wiley Publishing, Inc.
[2] Canziba, E., 2018. Hands-On UX Design for Developers: Design, prototype, and
implement compelling user experiences from scratch. Packt Publishing Ltd.
[3] Jokela, T., Iivari, N., Tornberg, V. and Electro, P., 2004. Using the ISO 9241-11
definition of usability in requirements determination: case studies. In Proceedings
of HCI2004: Design for life, the 18th British HCI group annual conference, Leeds
Metropolitan University, UK. Eds. A. Dearden & L. Watts (Vol. 2, pp. 155-156).
[4] Lowdermilk, T., 2013. User-centered design: a developer's guide to building user-
friendly applications. " O'Reilly Media, Inc.".
[5] Mayhew, D.J., 1999, May. The usability engineering lifecycle. In CHI'99 Extended
Abstracts on Human Factors in Computing Systems.
[6] MacKenzie, I.S., 2012. Human-computer interaction: An empirical research
perspective. Newnes.
[7] Dix, A., Dix, A.J., Finlay, J., Abowd, G.D. and Beale, R., 2003. Human-computer
interaction. Pearson Education.
[8] Gibbons, S. 2018. Empathy Mapping: The First Step in Design Thinking . Dikutip
dari https://www.nngroup.com/articles/empathy-mapping/ pada 15 Desember
2018.
[9] Wikipedia. 2019. Keystroke-level Model. Dikutip dari
https://en.wikipedia.org/wiki/Keystroke-level_model pada 4 Oktober 2019.
[10] Santoso, I. 2004. Interaksi Manusia dan Komputer. Andi Offset.