UNIVERSITAS GUNADARMA

PRAKTIKUM INTERAKSI MANUSIA DAN KOMPUTER

MANUAL BOOK
“Perancangan User Interface Aplikasi Safe Community Mobile Versi Android Menggunakan
Metode User Centered Design berdasarkan User Experience”
Ana Marisa

50418678

3IA05

Fakultas Teknologi Industri

Teknik Informatika

Ditulis Guna Melengkapi Sebagian Syarat

Praktikum Interaksi Manusia dan Komputer Universitas

Gunadarma
2019
 BAB I

Analysis

Studi kasus dilakukan terhadap suatu aplikasi layanan kesehatan yaitu Safe
Community, yang merupakan aplikasi pemantauan dan siaga krisis kesehatan di sekitar lokasi
kita berada. Materi yang menjadi bahasan dalam buku ini bertujuan untuk melengkapi
praktikum interaksi manusia dan komputer semata.

Studi kasus pada bab ini membahas mengenai ulasan dari aplikasi Safe Community terbaru,
yaitu versi 0.0.1. Adapun materi yang akan menjadi bahasan adalah sebagai berikut.

A. Apa yang dimaksud dengan Safe Community?

Safe Community adalah aplikasi pemantauan dan siaga krisis kesehatan di sekitar
lokasi anda berada. Adapun fitur yang bisa didapatkan dalam aplikasi ini adalah check
in, lapor kejadian bencana / kejadian krisis kesehatan, dan siaga risiko krisis.

B. Latar Belakang

Dirancangnya Safe Community dilatarbelakangi oleh kesadaran akan perlunya

penanggulangan penderita gawat darurat secara terpadu pada keadaan bencana /
musibah masal dan gawat darurat sehari-hari.
Dilansir dari laman google play, Safe Community tidak cukup diminati karena hanya
diunduh sekitar lebih dari 500 kali. Namun, rating dari aplikasi tersebut cukup bagus
yaitu sebesar 4,0 bintang. Berdasarkan informasi tersebut dapat diartikan bahwa
terdapat banyak user yang merasakan kepuasan dalam menggunakan aplikasi. Oleh
karena itu, dilakukanlah studi kasus terhadap aplikasi Safe Community untuk
menganalisa penelitian UI/UX Metode & Model yang dapat memberikan dampak
positif terhadap pembelajaran kali ini.
Salah satu metode yang digunakan untuk menganalisa aplikasi ini adalah User
Centered Design (UCD), yang menempatkan pengguna aplikasi sebagai pertimbangan
utama dalam menganalisa aplikasi.
C. Aplikasi Saat Ini

Pada bagian ini hanya akan berisi review dan pemahaman mengenai arsitektur
informasi dari aplikasi Safe Community saat ini. Arsitektur informasi berisi susunan
dari struktur navigasi (sitemap) dengan kondisi pengguna yang telah terdaftar
sehingga menghilangkan aspek registrasi pada aplikasi.
 Arsitektur Informasi

Safe Community 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 2  Level 5

Level 2  Level 6

Gambar 1.1 Arsitektur Informasi Aplikasi Saat Ini

 Analisis Antarmuka Pengguna (UI)

Berdasarkan pengamatan yang dilakukan terhadap antarmuka pengguna (UI)

dari aplikasi Safe Community versi 0.0.1, terdapat satu prinsip interaksi
manusia dan komputer yang tidak terpenuhi. Berikut hasil analisis yang telah
dilakukan.

Gambar 1.2 Analisis Bagian 1

Pada antarmuka pengguna (UI), developer harus memperhatikan hal-hal yang

bersifat konsisten pada saat merancang aplikasi. Seperti Interface harus
diseragamkan untuk mempermudah user dalam menjalankan aplikasi. Pada judul
RESIKO BENCANA kita bisa lihat bahwa judul dari menu ini tidak seperti judul
di menu lainnya yang rapih dan konsisten sehingga akan membingungkan user.
 BAB II

User Requirements

Studi kasus pada bab ini dilakukan melalui platform zoom meeting dikarenakan
kondisi yang tidak memungkinkan untuk bertatap muka secara langsung. Narasumber sendiri
adalah seorang mahasiswa sebagai pengguna aplikasi Safe Community yang menggunakan
aplikasi tersebut baru-baru ini.. Hal-hal yang perlu dipersiapkan pada studi kasus kali ini
adalah arsitektur informasi dan hasil analisis antarmuka pengguna (UI) dari studi kasus
sebelumnya, kertas HVS kosong (card sorting), print out template-template yang dapat
diunduh di bit.ly/templateIMK (persona dan user journey). Berikut ini adalah tahapan user
requirements yang berhasil dirangkum:

A. Interview

Pada tahap ini dilakukan interview atau wawancara dengan pengguna aplikasi Safe
Community versi 0.0.1. Produk yang didapatkan dari tahap ini adalah sebuah persona.
Berikut persona yang didapat dari narasumber yang merupakan seorang mahasiswa
bernama Aditya Cahaya
Gambar 2.1 Hasil Interview Pewawancara dengan Narasumber
B. User Journey

Tahap ini merupakan bagian terakhir dari aktivitas user requirements, yaitu membuat
map visualisasi dari proses yang dilalui oleh pengguna untuk mencapai tujuan.
Berdasarkan hal-hal tersebut maka user diminta untuk menceritakan aktivitas-aktivitas
yang dilakukan selama berinteraksi dengan aplikasi, baik kesulitan hingga
kepuasannya terhadap aplikasi.

Diketahui bahwa pengguna telah menggunakan beberapa fitur pada aplikasi dalam
berinteraksi. Seperti diantaranya adalah lapor krisis kesehatan dan siaga krisis. Selain
itu, pengguna menyampaikan kesulitan yang ia hadapi ketika menggunakan aplikasi
pada bagian painpoints.

Gambar 2.2 User Journey (Lapor Krisis Kesehatan & Siaga Krisis)
 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. Berikut ini adalah sitemap-nya.

Gambar 3.1 Sitemap Safe Community

Sitemap berikut menjelaskan kartu-kartu yang telah melalui proses pengelompokan

yang dilakukan oleh pengguna. Fitur-fitur yang tersedia pada kartu dikelompokkan oleh
pengguna sesuai dengan card sorting pada pertemuan sebelumnya. Oleh karena itu, pengguna
dapat dengan mudah mengetahui fitur yang tesedia dalam aplikasi tersebut. Contohnya dalam
menu beranda terdapat fitur Check In, Lapor Krisis Kesehatan, Resiko Bencana, Siaga Krisis
Kesehatan, dan Pantau Krisis Kesehatan.

Selanjutnya dapat membuat user flow berdasarkan dari studi kasus yang telah
dikumpulkan dari user journey untuk mencari solusi dan menyelesaikan proses kasus
tersebut. User flow yang dibuat dengan menggunakan jenis low fidelity. Low fidelity
merupakan bentuk user flow yang tidak menampilkan bentuk screen pada setiap aktivitas
alur. Berikut ini adalah pembuatan user flow yaitu:
 A. User Flow Home

Gambar 3.2 User Flow Home

Berdasarkan gambar 3.2 yang diatas merupakan tampilan ketika pengguna mengakses
aplikasi Safe Community. Pada langkah pertama pengguna akan memasuki halaman awal
pada aplikasi Safe Community, dilanjutkan dengan menekan tombol selanjutnya sehingga
akan otomatis te-redirect ke beranda.

B. User Flow Beranda

Gambar 3.3 User Flow Beranda

Berdasarkan gambar 3.3 yang diatas pengguna akan diarahkan ke halaman beranda.
Pada langkah pertama pengguna akan memasuki halaman awal pada aplikasi Safe
Community, dilanjutkan dengan menekan tombol selanjutnya sehingga akan otomatis te-
redirect ke beranda, dan bisa langsung melihat beberapa menu yang terdapat pada aplikasi
Safe Community. Pada bagian ini, kita akan menggunakan fitur check in.
 C. User Flow Lapor Krisis Kesehatan

Gambar 3.5 User Flow Lapor Krisis Kesehatan

Berdasarkan gambar 3.5 yang diatas pengguna mengakses Safe Community untuk
melapor krisis kesehatan. Pada langkah pertama pengguna sudah berada di dalam halaman
beranda, dan memasuki menu lapor krisis kesehatan. Lalu pengguna langsung bisa
menambahkan laporan krisis kesehatan dengan mengisi formulir yang berupa korban,
bantuan, dan keterangan lain. Setelah itu, data disimpan sebagai info laporan.
 D. User Flow Resiko Bencana

Gambar 3.6 User Flow Resiko Bencana

Berdasarkan gambar 3.6 yang diatas pengguna mengakses Safe Community untuk
mengetahui resiko bencana. Pada langkah pertama pengguna sudah berada di dalam halaman
beranda, lalu masuk ke menu resiko bencana. Untuk mengecek resiko bencana pada suatu
wilayah, pengguna terlebih dahulu harus memilih provinsi dan kabupaten. Jika sudah,
pengguna menekan tombol cari sehingga akan didapat informasi berupa profil kabupaten,
bahaya, ketentuan, dan kapasitas.
 BAB IV

Wireframe

Studi kasus bab ini adalah membuat wireframe aplikasi yang sesuai dengan ketentuan
pada kompenen https://material.io/ untuk memenuhi tujuan dari Interaksi Manusia dan
Komputer (IMK). Wireframe tersebut dapat dikases di
https://www.figma.com/proto/bc2nrFP166n8UMeTL2gvce/IMK-Prototype?node-
id=1%3A2&scaling=scale-down&page-id=0%3A1
Kasus 1 (Resiko Bencana)
Kasus 2 (Siaga Krisis)
Kasus 3 (Lapor Krisis Kesehatan)
 BAB V

Mock Up

Studi kasus bab ini adalah membuat mock up aplikasi yang sesuai dengan ketentuan
pada kompenen https://material.io/ untuk memenuhi tujuan dari Interaksi Manusia dan
Komputer (IMK). Mock up tersebut dapat dikases di
https://www.figma.com/file/bc2nrFP166n8UMeTL2gvce/IMK-Prototype?node-
id=174%3A139

Kasus 1 (Resiko Bencana)

Gambar 5.1 Resiko Bencana

Kasus 2 (Lapor Krisis Kesehatan)

Gambar 5.2 Lapor Krisis Kesehatan

Kasus 3 (Siaga Krisis)

Gambar 5.3 Siaga Krisis

 BAB VI

Prototype Clickable

Studi kasus pada bab ini dibuat berdasarkan desain mock up yang telah dibuat pada
bab sebelumnya. Dalam studi kasus ini menjelaskan langkah-langkah dari proses pembuatan
prototype aplikasi Safe Community yang telah didesain mengikuti sketsa mock up.
Perancang dapat membuat prototype clikable dengan menggunakan koneksi antar frame.
Koneksi yang dihubungkan harus sesuai dengan fungsi ikon atau perintah dalam aplikasi
tersebut. Kemudian perancang dapat mendesain prototype menggunakan animasi transisi
yang tersedia dalam tools Figma agar pengguna dapat memahami dan mengoperasikan
aplikasi dengan mudah.

A. Kasus 1 (Resiko Bencana)

Gambar 6.1 Resiko Bencana
 Berdasarkan gambar 6.1 di atas, pengguna mengakses Safe Community untuk melihat
resiko bencana pada wilayah tertentu. Untuk mengetahui hal tersebut, pengguna harus
memilih provinsi dan kabupaten sesuai dengan wilayah yang ingin dicek keadaan resiko
bencananya. Setelah itu, lakukan penelurusan dengan mengklik button cari sehingga profil
dari kabupaten/kota akan terlampir di bawahnya. Pada prototype ini, provinsi yang ingin
dicari resiko bencananya adalah DKI Jakarta dengan kabupaten Kepulauan Seribu.

Gambar 6.2 Resiko Bencana: Bahaya

Berdasarkan gambar 6.2 di atas, pengguna mengakses Safe Community untuk melihat
bahaya di Kepulauan Seribu. Lalu, didapati persentase kejadian bencana di Kepulauan Seribu
berupa diagram lingkaran dengan perbandingan bencananya masing-masing. Di pojok kanan
atas pun terdapat pilihan menu yang berguna untuk menampilkan pilihan print chart. Print
chart disini menampilkan berbagai pilihan gambar yang dapat diunggah sesuai dengan
format yang diinginkan.
 Gambar 6.3 Resiko Bencana: Kerentanan

Berdasarkan gambar 6.3 di atas, pengguna mengakses Safe Community untuk melihat
kelompok yang rentan di Kepulauan Seribu. Lalu, didapati persentase kelompok tersebut
berupa diagram lingkaran dengan perbandingan usianya masing-masing. Di pojok kanan atas
pun terdapat pilihan menu yang berguna untuk menampilkan pilihan print chart. Print chart
disini menampilkan berbagai pilihan gambar yang dapat diunggah sesuai dengan format yang
diinginkan.
 BAB VII

Usability Testing

Studi kasus pada bab ini dilakukan dengan menguji coba prototype clickable yang
telah berhasil dibuat pada pertemuan sebelumnya. Setiap perancang pasti ingin produk atau
fiturnya sesuai dengan kebutuhan pengguna. Salah satu metode untuk mengetahui tolak ukur
tersebut adalah System Usability Scale (SUS) Score.
System Usability Scale (SUS) berisi 10 pertanyaan dimana pengguna diberikan pilihan
skala 1–5 untuk dijawab berdasarkan pada seberapa banyak mereka setuju dengan setiap
pernyataan tersebut terhadap produk atau fitur yang diuji. Nilai 1 berarti sangat tidak setuju
dan 5 berarti sangat setuju dengan pernyataan tersebut.

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

1. Narasumber (Aditya Cahaya)

2. Asisten Laboratorium Tekbik Informatika yang bertugas (Maria Gabriela)

3. Asisten Laboratorium Tekbik Informatika yang bertugas (Abdu)

4. Asisten Laboratorium Tekbik Informatika yang bertugas (Dimas Pradipta)

Aditya Cahaya
© Digital Equipment Corporation, 1986.
No Questionnaires Scale (s) Deviation SUS

1 2 3 4 5
1 I think that I would like to use this system x s–1 4
frequently
(Saya pikir bahwa saya akan ingin lebih
sering menggunakan aplikasi ini)
2 I found the system unnecessarily complex x 5–s 3
(Saya menemukan bahwa aplikasi ini,
tidak harus dibuat serumit ini)
3 I thought the system was easy to use x s–1 4
(Saya pikir aplikasi mudah untuk
digunakan)
4 I think that I would need the support of a x 5–s 2
technical person to be able to use this
system
(Saya pikir bahwa saya akan
membutuhkan bantuan dari orang teknis
untuk dapat menggunakan aplikasi ini)
5 I found the various functions in this x s–1 3
system were well integrated
(Saya menemukan berbagai fungsi di
aplikasi ini diintegrasikan dengan baik)
6 I thought there was too much X 5–s 3
inconsistency in this system
(Saya pikir ada terlalu banyak
ketidaksesuaian dalam aplikasi
ini)
© Digital Equipment Corporation, 1986.
7 I would imagine that most people would x s–1 1
learn to use this system very quickly (Saya
bayangkan bahwa kebanyakan orang akan
mudah untuk mempelajari aplikasi ini
dengan sangat cepat)

8 I found the system very cumbersome to use x 5–s 3

(Saya menemukan, aplikasi ini sangat
rumit untuk digunakan)

9 I felt very confident using the system (Saya x s–1 4

merasa sangat percaya diri untuk
menggunakan aplikasi ini)
10 I needed to learn a lot of things before I x 5–s 3
could get going with this system (Saya
perlu belajar banyak hal sebelum saya
bisa memulai menggunakan aplikasi)
SUS Total 30

Nilai Akhir SUS = SUS Total * 2.5

G rade

A >81

B 68 – 80

C 68

D 51 – 67

E <50
Nilai Akhir SUS = SUS Total * 2.5 = 30 * 2.5 = 75
© Digital Equipment Corporation, 1986.
Grade SUS =B

Maria Gabriela
No Questionnaires Scale (s) Deviation SUS

1 2 3 4 5
1 I think that I would like to use this system x s–1 4
frequently
(Saya pikir bahwa saya akan ingin lebih
sering menggunakan aplikasi ini)
2 I found the system unnecessarily complex x 5–s 3
(Saya menemukan bahwa aplikasi ini,
tidak harus dibuat serumit ini)
3 I thought the system was easy to use x s–1 3
(Saya pikir aplikasi mudah untuk
digunakan)
4 I think that I would need the support of a x 5–s 4
technical person to be able to use this
system
(Saya pikir bahwa saya akan
membutuhkan bantuan dari orang teknis
untuk dapat menggunakan aplikasi ini)
5 I found the various functions in this x s–1 3
system were well integrated
(Saya menemukan berbagai fungsi di
aplikasi ini diintegrasikan dengan baik)
6 I thought there was too much x 5–s 4
© Digital Equipment Corporation, 1986.
inconsistency in this system
(Saya pikir ada terlalu banyak
ketidaksesuaian dalam aplikasi
ini)
© Digital Equipment Corporation, 1986.
7 I would imagine that most people would x s–1 3
learn to use this system very quickly
(Saya bayangkan bahwa kebanyakan
orang akan mudah untuk mempelajari
aplikasi ini dengan sangat cepat)
8 I found the system very cumbersome to use x 5–s 4
(Saya menemukan, aplikasi ini sangat rumit
untuk digunakan)

9 I felt very confident using the system (Saya x s–1 3

merasa sangat percaya diri untuk
menggunakan aplikasi ini)
10 I needed to learn a lot of things before I x 5–s 4
could get going with this system (Saya
perlu belajar banyak hal sebelum saya
Grade
bisa memulai menggunakan aplikasi)
A >81 SUS Total 35
B 68 – 80
C 68
D 51 – 67
Nilai Akhir SUS = SUS Total

E <50 * 2.5

Nilai Akhir SUS = SUS Total * 2.5 35 * 2.5 = 87.5

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

Nilai Akhir SUS = SUS Total * 2.5

Grade Nilai Akhir SUS = SUS Total * 2.5 = 35 * 2.5 = 87.5

A >81 Grade SUS =A

B 68 – 80
C 68
D 51 – 67
E <50
© Digital Equipment Corporation, 1986.
Dimas Pradipta
No Questionnaires Scale (s) Deviation SUS

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

E <50 * 2.5

Nilai Akhir SUS = SUS Total * 2.5 = 34 * 2.5 = 85

Grade SUS =A
© Digital Equipment Corporation, 1986.
BAB VIII

Kesimpulan
Prototype aplikasi Safe Community dibuat dengan memperhatikan prinsip-prinsip
dasar Interaksi Manusia dan Komputer (IMK) dan telah dilakukan uji coba usability testing
kepada pengguna (PJ dan asisten) yang bertugas yaitu dengan nilai SUS berikut :

No. Nama User Nilai Akhir SUS

1 Aditya Cahaya 75
2 Maria Gabriela 87.5
3 Abdu 87.5
4 Dimas Pradipta 85
Rerata Nilai Akhir 335 : 4 = 83.75

Dari hasil masing-masing user pertama sampai keempat hasil akhir SUS nya mendapat
grade A. Dan dengan rerata nilai akhir memperoleh 83.75 dengan cara mentotalkan nilai akhir
dari tiap user dan hasilnya dibagi 4, maka dikategorikan mendapat grade A. Angka tersebut
menunjukan tingkat kemudahan pengguna dalam menggunakan prototype aplikasi Safe
Community. Disimpulkan secara keseluruhan pengguna dapat menggunakan prototype aplikasi
dengan cukup mudah dan dipahami.

Berikut Link Prototype:

https://www.figma.com/file/bc2nrFP166n8UMeTL2gvce/IMK-Prototype?node-id=20%3A3