IMK Manual Book

UNIVERSITAS GUNADARMA
PRAKTIKUM INTERAKSI MANUSIA DAN KOMPUTER
MANUAL BOOK
“Perancangan User Interface Aplikasi JakOne Mobile Versi Android Menggunakan Metode
User Centered Design berdasarkan User Experience”
Ahmad Junaedi
50418337
3IA25
Fakultas Teknologi Industri
Teknik Informatika
Ditulis Guna Melengkapi Sebagian Syarat

Praktikum Interaksi Manusia dan Komputer
Universitas Gunadarma
2020
BAB I
Analysis
Pembahasan studi kasus buku ini menggunakan metode User Centered Design (UCD)
dengan model Design Thinking. Studi kasus dilakukan terhadap suatu aplikasi layanan Internet
dan E-Wallet yaitu Tiketia, pelayanan dari Tiketia dalam memudahkan nasabahnya untuk
melakukan transaksi perbankan dan transaksi pembayaran Tiket kapal dan lain lain untuk keperluan
liburan. Materi yang menjadi bahasan dalam buku ini digunakan hanya sebagai bahan ajaran semata
tanpa maksud lain.
Studi kasus pada bab ini membahas mengenai ulasan dari aplikasi Tiketia terbaru, yaitu
versi 1.0. Adapun materi yang akan menjadi bahasan adalah sebagai berikut.
A. Apa itu Tiketia?
Tiketia merupakan Pelopor Keagenan dengan Sistem Reservasi Online terlengkap di
Indonesia, didukung dengan sistem AUTO BOOKING, AUTO ISSUED dan AUTO
DEPOSIT menjadikan sebagai Travel Agen dengan dukungan fitur serba otomatis dan
terlengkap di Indonesia.
B. Latar Belakang
Perkembangan pelayanan perbankan semakin memudahkan nasabahnya dalam melakukan
berbagai transaksi, Dengan didukung fitur terlengkap Tiketia, anda akan merasa nyaman
berbisnis dengan kami. Kami melayani pemesanan:
- Tiket Pesawat Domestik & International

- Tiket KAI (Kereta Api)
- Reservasi Hotel Domestik & International
C. Metode & Model
Penelitian UI/UX yang dilakukan menggunakan metode user centered design (UCD) dimana
yang menjadi fokus utama adalah pengguna (user). Hal-hal yang berhubungan dengan
kepuasan pengguna menjadi target dari penelitian, seperti pengalaman, kenyamanan, dan
kesulitan dalam memakai aplikasi, feedback terhadap tampilan dan pelayanan aplikasi,
keinginan dan ekspetasi pengguna terhadap aplikasi, serta hal-hal lainnya yang memiliki
hubungan.
Berdasarkan metode, maka digunakanlah model design thinking. Model desain yang
memiliki 5 fase ini dinilai mampu memberikan hasil yang baik dengan proses penelitian yang
cukup mudah. Pada fase awal dilakukan proses pemahaman danempati terhadap pengguna,
tentu hal ini sangat relevan dengan metode yang digunakan.
D. Aplikasi saat ini
Pada bagian ini hanya akan berisi review dan pemahaman mengenai arsitekutur informasi
dari aplikasi Tiketia saat ini (sebelum dilakukannya studi kasus). Arsitektur informasi berisi
susunan dari struktur navigasi (sitemap) dengan kondisi pengguna yang telah terdaftar
sehingga menghilangkan aspek registrasi pada aplikasi.
• Arsitektur Informasi
Tiketia memiliki arsitektur informasi yang cukup kompleks, meskipun telah
dihilangkan aspek registrasi pada aplikasi. Hal ini membuat penyajian arsitektur
informasi dibagi ke dalam beberapa bagian.
Level 1 → Level 2
Level 2 → Level 3
Level 3 → Level 4
Level 4 → Level 5
Level 5 → Level 6
Level 6 → Level 7 → Level 8 → Level 9 → Level 10

Berdasarkan arsitektur informasi diatas dapat diketahui bahwa aplikasi Tiketia
memiliki 10 level hierarki. Hal ini menjadi rujukan bagaimana user flow dari
penggunadalam menyelesaikan suatu masalah. Misal, pengguna perlu melakukan
interaksi sebanyak 10 kali jika menggunakan aplikasi untuk keperluan pembayaran
tiket kapal.
(Gambar 1.1).
• Analisis Antarmuka Pengguna (UI)

Berdasarkan pengamatan yang dilakukan terhadap antarmuka pengguna (UI) dari
aplikasi Tiketia versi 1.0, terdapat beberapa prinsip interaksi manusia dan komputer
yang tidak terpenuhi. Berikut hasil analisis yang telah dilakukan.
Gambar 1.2 Analisis Bagian 1
Pada antarmuka pengguna (UI) menu Promo memiliki 2 buah tab (Promo dan
Promo). Hal ini menimbulkan ambiguitas terhadap keduanya dimana Promo dan
promo memiliki isi yang sama dan menurut saya tidak perlu adanya 2 promo
sekaligus.
Pada antarmuka pengguna (UI) menu Utama Bagian Voucher game dan cari tiket
cepat tidak ada di home, menurut saya itu sangat penting dan paling sering
dibutuhkan.
Pada antarmuka pengguna (UI) diatas terdapat menu berupa iklan snack video,
yang dimana itu iklannya tidak sesuai dengan aplikasi tiketia maka dari itu
snackvideo tidak terlalu penting bagi saya.
BAB II
User Requirements
Studi kasus pada bab ini dilakukan dengan tatap muka langsung dengan narasumber (yang
telah ditentukan) dan menjadi tahap lanjutan dari studi kasus pada bab sebelumnya. Hal-hal yang
perlu dipersiapkan pada studi kasus kali ini adalah arsitektur informasi dan hasil analisis antarmuka
pengguna (UI) dari studi kasus sebelumnya, sticky note atau kertas HVS kosong (cord sorting),
print out template-template yang dapat diunduh di bit.ly/templateIMK(persona dan user journey).
Studi kasus pada bab ini dilakukan dengan tatap muka secara langsung oleh narasumberyang
yaitu seorang freelancer sebagai pengguna aplikasi Tiketia yang sudah menggunakan aplikasi
tersebut selama kurang lebih satu tahun. Berikut ini adalah tahapan user requirementsyang berhasil
dirangkum:
A. Interview
Pada tahap ini dilakukan interview atau wawancara dengan pengguna aplikasi Tiketia versi
1.0. Produk yang didapatkan dari tahap ini adalah sebuah persona.Berikut persona yang
didapat dari narasumber yang merupakanseorang freelancer bernama Aurelia Harmudani.
B. Card Sorting
Card sorting pada studi kasus kali ini menggunakan cara close sorting, dimana pengguna
memasukkan kartu ke dalam suatu kelompok yang telah ditentukan dan diberi nama oleh
peneliti. Kartu-kartu berisi menu, fitur, dan lainnya yang diambil dariarsitektur informasi
aplikasi pada studi kasus sebelumnya (Bab 1). Kelompok yang disediakan dalam buku ini
antara lain beranda, transaksi, informasi, dan lainnya.
C. User Journey
Tahap ini merupakan bagian terakhir dari aktivitas user requirments, yaitu membuat map
visualisasi dari proses yang dilalui oleh pengguna untuk mencapai tujuan. Biasanya
ditampilkan dalam serangkaian langkah dimana pengguna berinteraksi dengan aplikasi
sesuai pada posisinya.
Diketahui bahwa pengguna telah menggunakan beberapa fitur pada aplikasi dalam
berinteraksi dengan sistem berdasarkan behaviors pada persona. Seperti diantaranya adalah
memeriksa saldo, melakukan transfer baik sesama Bank DKI maupun dengan bank lain, membayar
merchant dengan scan to pay, membayar tiket kereta, danmembeli pulsa dan paket data. Selain itu,
pada painpoints pengguna menyampaikan kesulitannya dalam menggunakan fitur favorit.
Berdasarkan hal-hal tersebut maka pengguna diminta untuk menceritakan segala macam
aktivitas yang dilakukannya selama berinteraksi dengan aplikasi, baik kesulitan hingga
kepuasannya terhadap aplikasi.
BAB III
User Requirements
Studi kasus pada bab ini dilakukan berdasarkan data yang berhasil dikumpulkan pada
(pengalaman pengguna) user journey yang telah ditentukan dan menjadi tahap lanjutan dari studi
kasus pada pertemuan sebelumnya. Dalam studi kasus ini menjelaskan langkah-langkah dari
proses (alur pengguna) user flow untuk mencari solusi dan menyelesaikan proses kasus tersebut.
Sebelum membuat user flow didapat sitemap baru hasil dari card sorting pada pertemuan
sebelumnya. Sitemap ini dapat digunakan sebagai salah satu faktor penentu solusi dari user flow.
Berikut ini adalah sitemap dari card sorting yang ada di pertemuan sebelumnya:
Berdasarkan gambar di atas merupakan sitemap dari hasil card sorting studi kasus yang berada
dalam pertemuan sebelumnya. Sitemap berikut menjelaskan kartu-kartu yang telah melalui proses
pengelompokan yang dilakukan oleh pengguna. Proses pengelompokan yang dimaksud adalah proses
pengelompokan dari beberapa fitur-fitur yang tersedia pada kartu.
A. User Flow Memeriksa Saldo
Berdasarkan gambar yang diatas pengguna mengakses Tiketia untuk melakukan proses cek
saldo. Pada langkah pertama pengguna memasuki halaman beranda, kemudian dalam
halaman beranda yang didalamnya sudah tersedia menu rekening. Lalu pengguna
memasuki halaman rekening, dan bisa langsung melihat datarekening, dan data aktivitas
rekening. Setelah itu pengguna dapat membagikan data dan aktivitas rekening.
B. User Flow Pembayaran
Berdasarkan gambar yang diatas pengguna mengakses Tiketia untuk melakukan proses
pembayaran. Pada langkah pertama pengguna sudah berada di dalamhalaman beranda,dan
memasukin menu transaksi. Lalu pengguna langsung bisa mengisi formulir tiket yang telah
dipilih. Kemudian akan di konfirmasi.
C. User Flow Pembelian
Berdasarkan gambar yang diatas pengguna mengakses Tiketia untuk melakukan proses pembelian.
Pada langkah pertama pengguna sudah berada di dalam halaman beranda, lalu memasukin menu
transaksi. Lalu pengguna langsung bisa mengisi formulir pulsa yang telah dipilih. Kemudian akan di
konfirmasi.
BAB IV
Wireframe
Studi kasus bab ini adalah membuat wireframe aplikasi yang sesuai dengan ketentuan pada
kompenen https://material.io/ guna memenuhi tujuan dari Interaksi Manusia dan Komputer
(IMK).Wireframe dibangun dengan mempertimbangkan materi-materi yang didapatpada bab 3 atau
bab sebelumnya. Struktur sitemap baru menempatkan Beranda, Transaksi,Informasi, dan Lainnya
berada pada level yang sama atau sejajar, artinya keempatnya dapatsaling mengakses satu sama
lain. Berdasarkan hal tersebut maka dibuatlah wireframe sebagaiberikut yang dapat dikases di
https://www.figma.com/file/CyjtQeJzvuGL3dc9xnTSQQ/IMK?node-id=0%3A1
Kasus 1 (Login)
Kasus 2 (Booking Hotel)
BAB V
Mock Up
Studi kasus bab ini adalah membuat mock up aplikasi yang sesuai dengan ketentuanpada
kompenen https://material.io/ guna memenuhi tujuan dari Interaksi Manusia danKomputer
(IMK).Wireframe dibangun dengan mempertimbangkan materi-materi yang didapatpada bab 3 atau
bab sebelumnya. Struktur sitemap baru menempatkan Beranda, Transaksi,Informasi, dan Lainnya
berada pada level yang sama atau sejajar, artinya keempatnya dapatsaling mengakses satu sama
lain. Berdasarkan hal tersebut maka dibuatlah wireframe sebagaiberikut yang dapat dikases di
https://www.figma.com/file/CyjtQeJzvuGL3dc9xnTSQQ/IMK?node-id=22%3A98
Kasus 1 (Menu Utama)
Kasus 2 (Login)
Kasus 3 (Booking Hotel)

BAB VI
Prototype Clickable
Studi kasus pada bab ini dilakukan berdasarkan dari desain mock up yang telah di buatpada
pertemuan sebelumnya. Dalam studi kasus ini menjelaskan langkah-langkah dari proses
pembuatan prototype aplikasi Tiketia yang telah didesain mengikuti sketsa mock up.Perancang
dapat membuat prototype clikable dengan menggunakan koneksi antar frame. Koneksi yang
dihubungkan antar harus sesuai dengan fungsi ikon atau perintah dalam aplikasi terseut.
Kemudian perancang dapat mendesain prototype menggunakan macam- macam animasi transisi
yang telah tersedia dalam tools Figma agar pengguna dapat mengetahui fungsi perintah yang
sudah diberi koneksi dengan menggunakan animasi. Berikut ini adalah pembuatan prototype
yaitu:
A. Kasus 1 (Menu Utama)
Pada kasus 1 menu yang bisa di klik yaitu sebagai contoh Icon Hotel.
B. Kasus 2 (Login)
Menu yang dapat di klik pada menu login yaitu sebagai contoh Logo tiket kapal dan lain lain seperti gambar di
atas.
C. Kasus 3 (Booking Hotel)

Menu yang dapat di klik pada menu booking hotel yaitu sebagai contoh logo tiket kapal dan lainnnya
seperti yang tertera pada gambar di atas.
BAB VII
Usability Testing
Studi kasus pada bab ini dilakukan dengan menguji coba prototype clickable yang telah
berhasil dibuat pada pertemuan sebelumnya. Uji coba dilakukan dengan menggunakan template
System Usability Scale (SUS) yang dipelopori oleh Brooke pada tahun 1996. Terdapat sepuluh
pertanyaan yang tersedia pada template SUS dengan sistem penilaiannya menggunakan Skala
Likert, yaitu suatu skala psikometrik yang umum digunakan dalam angket dan merupakan skala
yang paling banyak digunakan dalam riset berupa survei. Terdapat 5 pilihan skala yang umum
digunakan dengan format seperti berikut:
1. Sangat tidak setuju

2. Tidak setuju
3. Kurang setuju
4. Setuju
5. Sangat setuju
Berikut hasil usability testing yang dilakukan terhadap tiga responden, yaitu:
1. Asisten Laboratorium Tekbik Informatika yang bertugas (Figa Rizfa)
2. Asisten Laboratorium Tekbik Informatika yang bertugas (Aurellya Harmudani)
3. Asisten Laboratorium Tekbik Informatika yang bertugas (Ryan Arya)
4. Asisten Laboratorium Tekbik Informatika yang bertugas (Muhammad Hilmy Rasyiq)
System Usability Scale-Figa Rizfa
© Digital Equipment Corporation, 1986.

Scale (s)
No Questionnaires Deviation SUS
1 2 3 4 5
1 I think that I would like to use this system X
frequently
5-s 1
(Saya pikir bahwa saya akan ingin lebih
sering menggunakan aplikasi ini)
2 I found the system unnecessarily complex X
(Saya menemukan bahwa aplikasi ini, 5–s 1
tidak harus dibuat serumit ini)
3 I thought the system was easy to use X
(Saya pikir aplikasi mudah untuk s–1 4
digunakan)
4 I think that I would need the support of a X
technical person to be able to use this
system
5–s 1
(Saya pikir bahwa saya akan
membutuhkan bantuan dari orang teknis
untuk dapat menggunakan aplikasi ini)
5 I found the various functions in this X
system were well integrated
5-s 1
(Saya menemukan berbagai fungsi di
aplikasi ini diintegrasikan dengan baik)
6 I thought there was too much X
inconsistency in this system
5–s 3
(Saya pikir ada terlalu banyak
ketidaksesuaian dalam aplikasi ini)
7 I would imagine that most people would X
learn to use this system very quickly
(Saya bayangkan bahwa kebanyakan s–1 4
orang akan mudah untuk mempelajari
aplikasi ini dengan sangat cepat)
8 I found the system very cumbersome to X
use
S-1 4
(Saya menemukan, aplikasi ini sangat
rumit untuk digunakan)
9 I felt very confident using the system X
(Saya merasa sangat percaya diri untuk s–1 3
menggunakan aplikasi ini)
10 I needed to learn a lot of things before I X
could get going with this system
5–s 3
(Saya perlu belajar banyak hal sebelum
saya bisa memulai menggunakan aplikasi)
SUS Total 62.5
Nilai Akhir SUS = SUS Total * 2.5

Grade Nilai Akhir SUS = SUS Total * 2.5
A >81 = * 2.5
B 68 – 80 = 62.5
C 68
D 51 – 67 Grade SUS = D
E <50
System Usability Scale- Aurellya Harmudani

Scale (s)
1 2 3 4 5
frequently
5-s 1
digunakan)
technical person to be able to use this S-1 4
system
5-s 4
5–s 3
use
S-1 4
S-1 4
SUS Total 82.5

A >81 = * 2.5
B 68 – 80 = 82.5
C 68
D 51 – 67 Grade SUS = B
E <50
System Usability Scale- Ryan Arya

Scale (s)
1 2 3 4 5
frequently
5-s 1
digunakan)
system
S-1 2
S-1 4
5–s 3
use
S-1 4
5-1 2
SUS Total 67.5

A >81 = * 2.5
B 68 – 80 = 67.5
C 68
E <50
System Usability Scale- Muhammad Hilmy Rasyiq

Scale (s)
1 2 3 4 5
frequently
5-s 1
digunakan)
system
S-1 2
S-1 1
5–s 3
use
S-1 4
5-1 2
SUS Total 62.5

A >81 = * 2.5
B 68 – 80 = 62.5
C 68
E <50
Berikut hasil usability testing yang dilakukan terhadap 4responden, yaitu :

1. Ryan Arya
2. Figa Rizfa
3. Aurellya Harmudani
4. Muhammad Hilmy Rasyiq
= ( 62.5 + 67.5 + 82.5 + 62.5 )

= 275 / 4
= 68.75
Kesimpulannya
BAB VII
Kesimpulan
Berdasarkan hasil yang didapat dari usability testing terhadap tiga orang responden
maka ditarik kesimpulan bahwa Perancangan User Interface Aplikasi Tiketia Versi Android
Menggunakan Metode User Centered Design berdasarkan User Experience ini telah berhasil dilakukan
dengan rincian 68.75 dengan grade SUS C yang berarti perancangan telah berhasil dan tidak perlu
dilakukan iterasi.

IMK Manual Book

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

IMK Manual Book

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

PRAKTIKUM INTERAKSI MANUSIA DAN KOMPUTER

Ditulis Guna Melengkapi Sebagian Syarat

- Tiket Pesawat Domestik & International

Level 6 → Level 7 → Level 8 → Level 9 → Level 10

• Analisis Antarmuka Pengguna (UI)

A. User Flow Memeriksa Saldo

B. User Flow Pembayaran

C. User Flow Pembelian

Kasus 1 (Menu Utama)

Kasus 3 (Booking Hotel)

C. Kasus 3 (Booking Hotel)

1. Sangat tidak setuju

© Digital Equipment Corporation, 1986.

Nilai Akhir SUS = SUS Total * 2.5

System Usability Scale- Aurellya Harmudani

© Digital Equipment Corporation, 1986.

Nilai Akhir SUS = SUS Total * 2.5

System Usability Scale- Ryan Arya

© Digital Equipment Corporation, 1986.

Nilai Akhir SUS = SUS Total * 2.5

System Usability Scale- Muhammad Hilmy Rasyiq

© Digital Equipment Corporation, 1986.

Nilai Akhir SUS = SUS Total * 2.5

Berikut hasil usability testing yang dilakukan terhadap 4responden, yaitu :

= ( 62.5 + 67.5 + 82.5 + 62.5 )

Anda mungkin juga menyukai