DESAIN ANTARMUKA DAN PENGALAMAN PENGGUNA APLIKASI GAMIFIKASI HAFALAN AL-QURAN BERBASIS ANDROID LAPORAN SKRIPSI Dibuat untuk Melengkapi Syarat-Syarat yang Diperlukan untuk Memperoleh Diploma Empat Politeknik Bagas Muadun 4616040004 PROGRAM STUDI TEKNIK MULTIMEDIA DIGITAL JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER POLITEKNIK NEGERI JAKARTA 2020
Memperoleh Diploma Empat Politeknik
POLITEKNIK NEGERI JAKARTA
HALAMAN PERNYATAAN ORISINALITAS
Skripsi ini adalah hasil karya sendiri, dan semua sumber baik yang
dikutip
maupun dirujuk telah saya nyatakan dengan benar.
Nama : Bagas Muadun
Judul Skripsi : Desain Antarmuka dan Pengalaman Pengguna
Aplikasi
Gamifikasi Hafalan Al-Quran berbasis Android
Telah diuji oleh tim penguji dalam Sidang Skripsi pada hari senin
Tanggal 13, Bulan
Juli, Tahun 2020 dan dinyatakan LULUS.
Disahkan oleh
Penguji I : Dr. Mera Kartika Delimayanti,
S.Si., M.T
M.Kom
S.Kom,. M.Kom
Ketua
KATA PENGANTAR
Segala puji dan syukur dipanjatkan kepada Allah Subhanahu Wa Ta’ala
yang telah
memberikan penulis nikmat dan karunia-Nya kepada penulis sehingga
dapat
menyelesaikan tugas akhir ini. Tugas akhir dibuat sebagai
kontribusi penulis kepada
agama Islam dan Al-Quran, ilmu bidang Teknik Informatika dan
Komputer terkhusus
bidang Teknik Multimedia Digital, alamamater Juruan Teknik
Informatika dan
Komputer Politeknik Negeri Jakarta. Penulis menyadari bahwa tugas
akhir ini tidak
dapat diselesaikan tanpa ada bantuan moral, materil. Oleh karena
itu, penulis
mengucapkan terima kasih kepada:
1. Allah Subhanahu Wa Ta’ala yang telah memberikan nikmat dan
karunia-Nya
yang tak terhingga sehingga memberikan kepada penulis kekuatan
dan
kesehatan untuk menyelesaikan tugas akhir ini.
2. Kedua orang tua Bapak Suherman dan Ibu Nuraeni yang
senantiasa
memberikan doa, bantuan moral dan materil, serta kakak dan adik
saya Dery
Firdaus, Bagus Muidun dan Gifari Al-Rasyid
3. Pembimbing Bapak Iwan Sonjaya yang telah membimbing penulis
dalam
memberikan arahan tugas akhir dengan sabar. Semoga Allah
memberikan
kebaikan kepadanya
4. Teman kelompok skripsi Naufal Mahfudz Ismail yang telah membantu
dan
berkerjasama dengan baik selama proses pengerjaan skripsi dan
pengumpulan
data.
5. Ustadz Wahid Darmawan dan Ustadz Ishaq Hafidzhahullah yang
telah
bersedia menjadi pakar Tahfidz Quran dalam proses pengumpulan
data.
6. Muhammad Sami Aji, Nafiys Ismail, Riyan Hidayat, Laksamana
Adhito yang
saling menolong dan memberikan penulis motivasi dalam mengerjakan
tugas
akhir.
7. Teman-Teman Pesantren Kosan BISA dan Yayasan BISA yang
telah
memberikan tempat tinggal selama kuliah dan sampai menyelesaikan
tugas
akhir.
v
8. Teman-teman kelas program studi Teknik Multimedia Digital yang
telah
menjadi teman seperjuangan selama empat tahun.
9. Seluruh 124 responden kuesioner daring, 8 responden wawancara
sebagai
penghafal Quran dan 25 responden Usability Testing yang telah
bersedia
memberikan waktunya untuk membantu dan berpartisipasi dalam
melaksanakan tugas akhir penulis.
Akhir kata, penulis menyadari banyaknya kekurangan dalam penelitian
tugas akhir ini
dan penulis memohon doa kepada Allah Subahahu Wa Ta’ala agar tugas
akhir ini dapat
membawa manfaat dan keberkahan kepada Jurusan Teknik Informatika
dan Komputer
PNJ
KEPENTINGAN AKADEMIS
Sebagai civitas akademik Politeknik Negeri Jakarta, saya yang
bertanda tangan di
bawah ini :
Jenis Karya : Skripsi
Politeknik Negeri Jakarta Hak Bebas Royalti Noneksklusif
(Non-exclusive Royalty-
Free Right) atas karya ilmiah saya yang berjudul :
Desain Antarmuka dan Pengalaman Pengguna Aplikasi Hafalan
Al-Quran
berbasis Android
beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas
Royalti
Noneksklusif ini Politeknik Negeri Jakarta berhak menyimpan,
mengalihmedia/format-kan, mengelola dalam bentuk pangkalan data
(databse),
merawat, dan mempublikasikan skripsi saya selama tetap mencantumkan
nama saya
sebagai penulis/pencipta dan sebagai pemilik Hak Cipta.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Pada tanggal : 13 Juli 2020
Yang menyatakan,
(Bagas Muadun)
*Karya Ilmiah : karya akhir makalah non seminar, laporan kerja
praktek, laporan
magang, karya profesi, dan karya spesialis.
vii
berbasis Android
Memiliki hafalan Al-Quran merupakan suatu hal yang utama dalam
melakukan
ibadah sehari-hari sebagai muslim maupun muslimah. Hasil survey
dan
wawancara diidentifikasi sebagai permasalahan adalah pengaruh media
sosial
yang menyebabkan responden terhambat dalam hafalan Quran,
keterbatasan
waktu dan konsistensi serta motivasi untuk hafalan Al-Quran.
Tujuan
penelitian ini adalah membuat dan mengusulkan ide solusi dengan
menerapkan
gamifikasi dalam desain aplikasi hafalan Al-Quran. Metode yang
digunakan
penelitian ini adalah design thinking yaitu mengumpulkan dan
mengidentifikasi
data temuan, mendefinisikan dan mengembangkan ide solusi,
implementasi ide
solusi ke bentuk desain protoype serta melakukan pengujian dan
evaluasi
desain aplikasi. Hasil pengujian desain aplikasi gamifikasi hafalan
Al-Quran
dilakukan oleh 25 responden usability testing menghasilkan 90,5%
tingkat
keberhasilan dan memperoleh nilai skor usability testing desain 1
yaitu 68 dan
desain 2 yaitu 59. Kemudian nilai skor system usability scale
sebesar 88
sehingga desain aplikasi dapat diterima dan mudah untuk
digunakan.
Kata kunci: Gamifikasi, Al-Qur’an, user interface, user experience,
design
thinking, usability testing
KEPENTINGAN AKADEMIS
......................................................................................
vi
1.4.1 Tujuan Penelitian
.................................................................................................
4
1.4.2 Manfaat Penelitian
...............................................................................................
4
2.6 User Experience
.................................................................................................
14
2.8 Diagram Afinitas
................................................................................................
15
BAB III
............................................................................................................................20
ix
3.2.1 Kuesioner Daring
................................................................................................
22
3.2.3 Wawancara Pengguna
.........................................................................................
24
3.2.4 Hasil Wawancara
................................................................................................
26
3.4 Pembuatan Persona
............................................................................................
31
3.6.1 Implementasi Konsep Gamifikasi Hafalan Al-Quran
........................................... 34
3.6.2 Implementasi Ten Usability Heuristic Interface design
........................................ 38
3.7 Pembuatan Desain Antarmuka
............................................................................
41
3.7.1 Rancangan Alur Informasi Fitur
..........................................................................
41
3.7.2 Journey Pengguna
...............................................................................................
44
BAB IV
............................................................................................................................66
4.4 Data Hasil Pengujian Alpha Testing
....................................................................
71
4.4.1 Analisis Data Hasil Pengujian Alpha Testing
....................................................... 73
4.5 Hasil Pengujian Usability Testing
.......................................................................
73
4.5.1 Data Hasil Pengujian Usability Testing Aspek Completion Rate
.......................... 74
4.5.2 Data Hasil Pengujian Usability Testing Aspek Duration
...................................... 77
4.6 Data Hasil Kuesioner System Usability Scale
...................................................... 80
4.6.1 Analisis Data Hasil Kuesioner System Usability Scale
......................................... 82
BAB
V..............................................................................................................................84
PENUTUP
.......................................................................................................................84
Gambar 2 1 Contoh Penerapan Diagram Afinitas
......................................................... 15
Gambar 2 2. Pemetaan Peringkat Ajektif
......................................................................
19
Gambar 3 1. menunjukan demografi umur responden
.................................................. 22
Gambar 3 2 menunjukan demografi profesi responden
................................................ 23
Gambar 3 3 Kelompok Diagram Afinitas 1
...................................................................
27
Gambar 3 4 Kelompok Diagram Afinitas 2
...................................................................
28
Gambar 3 5 Kelompok Diagram Affinitas 3
.................................................................
28
Gambar 3 6 Persona Ari Seorang Mahasiswa.
..............................................................
32
Gambar 3 7. Skenario variasi tantangan hafalan
...........................................................
35
Gambar 3 8 Skenario dan pembagian surat pada Level
1............................................. 36
Gambar 3 9. Skenario dan pembagian surat pada Level
2............................................ 36
Gambar 3 10. Skenario dan pembagian surat pada Level 3.
........................................ 37
Gambar 3 11. Rancangan Alur Informasi Desain Fitur
................................................ 43
Gambar 3 12. Journey Pengguna desain aplikasi pada Persona 1
................................ 45
Gambar 3 13. Navbar-bottom
.........................................................................................
55
Gambar 3 14. Realisasi pada ketiga Navbar-bottom
..................................................... 55
Gambar 3 15. Realisasi Desain onboarding
...................................................................
56
Gambar 3 16. Realisasi Desain Login dan Register
...................................................... 57
Gambar 3 17. Desain system leveling tantangan hafalan
............................................. 58
Gambar 3 18. Realisasi Desain Poin dan Leaderboard
................................................. 59
Gambar 3 19. Progress Bar
.............................................................................................
60
Gambar 3 20. Realisasi Badge visual
.............................................................................
61
Gambar 3 21. Realisasi Tantangan Hafalan
..................................................................
62
Gambar 3 22. Realisasi Purwarupa Audio Murottal
..................................................... 63
Gambar 3 23. Realisasi Purwarupa Aktifitas Hafalan
.................................................. 64
Gambar 3 24. Realisasi Purwarupa Rekam Hafalan
..................................................... 65
Gambar 3 25. Realisasi Purwarupa Time Quran
...........................................................
65
Gambar 4 1. Alur pengujian usability testing
................................................................
70
Gambar 4 2. Kriteria Sauro pada UT completion rate
.................................................. 77
xii
Tabel 3 1 Rangkuman Hasil Kebutuhan Kuesioner Daring
......................................... 23
Tabel 3 2. Fokus objektif wawancara
............................................................................
24
Tabel 3 3 Topik Pertanyaan Wawancara.
......................................................................
25
Tabel 3 4. Kerangka pengelompokan diagram
afinitas................................................. 27
Tabel 3 5. Membingkai Ulang Masalah
1......................................................................
30
Tabel 3 6. Membingkai Ulang Masalah
2......................................................................
30
Tabel 3 7. Membingkai Ulang Masalah
3......................................................................
31
Tabel 3 8. Implementasi Ten Usability
Heuristic.........................................................
39
Tabel 3 9 Wireframe Desain
Aplikasi............................................................................
46
Tabel 4 1 Skenario dan Tugas Pengujian UT
................................................................
69
Tabel 4 2 Hasil. Alpha testing dengan 10 Usability Heuristic
..................................... 71
Tabel 4 3 Skor Usability pada maze
design...................................................................
74
Tabel 4 4. Pemetaan tingkat penyelesain UT
................................................................
75
Tabel 4 5. Data hasil pengujian aspek tingkat penyelesain
keseluruhan ..................... 75
Tabel 4 6. Data hasil pengujian aspek keberhasilan tingkat
penyelesaian .................. 76
Tabel 4 7. Data Hasil Durasi Keseluruhan Responden dalam setiap
Tugas ................ 78
Tabel 4 8. Tabel Durasi Tingkat Kegagalan pada Tugas UT
....................................... 80
Tabel 4 9. Nilai SUS
.......................................................................................................
81
xiii
Lampiran 2. Daftar Isi Wawancara Pengguna
...............................................................
90
Lampiran 3. Pemetaan Wawancara Affinity Mapping
................................................. 92
Lampiran 4. Wawancara dengan Pakar Tahfidz Quran
................................................ 94
Lampiran 5. Skor Usability Testing dengan Maze
........................................................ 96
Lampiran 6. Perhitungan Nilai System Usability
Scale................................................ 98
1
Memiliki hafalan Al-Quran merupakan suatu hal yang utama dalam
melakukan
ibadah sehari-hari sebagai muslim maupun muslimah. Berdasarkan
penelitian
dalam jurnal Pengaruh Menghafal Al-Quran terhadap Highorder
Thinking
Skills (HOTS) ditinjau dari Berprestasi Mahasiswa menyatakan ada
pengaruh
yang signifikan antara aktivitas menghafal Al-Quran dan motivasi
berprestasi
mahasiswa terhadap kemampuan berfikir tingkat tinggi. Hal ini
sangat bagus
untuk membekali remaja dan mahasiswa untuk biasa hidup dengan
mandiri dan
dapat menyelesaikan permasalahan hidupnya dengan baik (Stiyamulyani
&
Jumini, 2018). Berdasarkan hasil wawancara dengan salah satu
pengajar di
Rumah Tahfidz Berkah Doa Bunda di Ciganjur, Jakarta Selatan
mengatakan
dalam mengajar hafalan al-Quran tidak ada kesulitan namun yang
menjadi sulit
adalah kemauan serta motivasi dari anak-anak dalam menghafal.
Hasil
penjelasan wawancara juga didapati bahwa sering didapati anak-anak
merasa
tidak semangat dalam menghafal Al-Quran (Ishaq, 2020).
Berdasarkan survei yang telah dilakukan sebanyak 124 responden yang
sudah
bisa membaca dan pernah menghafal Al-Quran dari berbagai profesi
yang
terbagi dari mahasiswa, pelajar, pegawai sampai Ibu Rumah
Tangga
menyatakan dari 99,2 persen atau 124 responden memiliki motivasi
dan
keinginan untuk menghafal Al-Quran. Kemudian sebanyak 72,8 persen
atau 91
responden menyatakan pengaruh media sosial menghambat untuk
menghafal
dan mengulang hafalan Qurannya.
Sebanyak 77,4 persen atau 88 responden mengalami keterbatasan waktu
untuk
menghafal Al-Quran, serta masalah konsistensi dalam menghafal
maupun
mengulang hafalan Al-Quran.
adalah pengharuh media sosial yang menyebabkan responden
terhambat
menghafal Quran, keterbatasan waktu dan konsistensi padahal 99,2
persen atau
124 responden memiliki keinginan untuk menghafal Al-Quran.
Oleh karena itu untuk mengatasi permasalahan tersebut, dapat
diterapkan
Gamification dalam penerapan hafalan Al-Quran. Gamification atau
gamifikasi
adalah sebuah konsep yang menggunakan dinamika dengan basis
permainan,
permainan berfikir dan estetika untuk mengikat orang-orang,
tindakan
mempromosikan, memotivasi pembelajaran dan menyelesaikan
sebuah
masalah (Kapp, 2012). Istilah gamifikasi pertama kali dikemukakan
oleh Nik
Pelling pada presentasinya dalam acara TED (Technology,
Entertainment,
Design) pada tahun 2002. Gamifikasi mengandung syarat diantara lain
adalah
Point, Badges, Levels, Leaderboards, Challenges, Rewards, (Jusuf,
2016)
sehingga pada penerapannya gamifikasi dapat membangun motivasi
dan
menyenangkan dalam menghafal maupun mengulang hafalan
Al-Quran.
Dalam penerapan gamifikasi pada aplikasi hafalan Al-Quran yang
akan
dirancang yaitu dengan menghafal dari ayat paling belakang (Juz 30)
lebih
efektif karena ayat dan surahnya pendek-pendek dan mudah dihafal
untuk
pemula. Surah pendek-pendek itu akan membawa kebahagian untuk
menghafal. Ketika sudah menghafal satu surah, mendapatkan rasa
finish karena
sudah selesai menghafal serta aplikatif karena bisa digunakan dalam
ibadah
sholat. (Wahid, 2020).
aplikasi desain antarmuka dan pengalaman pengguna dengan
pendekatan
design thinking dan menerapkan gamifikasi sebagai media untuk
mencapai
3
menghafal dan mengulang hafalan Al-Quran.
1.2 Perumusan Masalah
a. Bagaimana bentuk desain antarmuka aplikasi gamifikasi hafalan
Al-Quran?
b. Bagaimana pengujian dan evaluasi desain antarmuka aplikasi
gamifikasi
hafalan Al-Quran?
sebagai berikut:
kegiatan murojaah yaitu mengulang hafalan
b. Target pengguna aplikasi adalah umur 13 – 28 tahun yang
memiliki
pengalaman menghafal Al-Quran
c. Hafalan Al-Quran Gamifikasi berfokus hanya pada Al-Quran Juz
30
d. Elemen gamifikasi hafalan Al-Quran terdiri dari tiga level dan
delapan
tantangan hafalan yang bervariasi.
e. Hasil desain aplikasi yang telah dibuat menjadi sebuah
prototype
f. Pembuatan desain antarmuka menggunakan Figma dan komponen
visual
desain menggunakan Adobe Ilustrator
1.4 Tujuan dan Manfaat Penelitian
1.4.1 Tujuan Penelitian
Tujuan dari skripsi ini adalah membuat desain antarmuka gamifikasi
yang mudah
digunakan dari sisi usability atau kegunaan pengalaman pengguna dan
tampilan
dalam menghafal dan mengulang hafalan Al- Quran.
1.4.2 Manfaat Penelitian
a. Desain aplikasi antarmuka gamifikasi diharapkan dapat
meningkatkan
engagement atau keterikatan motivasi dalam kegiatan menghafal
Al-Quran
b. Memberikan kemudahan dalam kegiatan menghafal dan mengulang
hafalan
Al-Quran dengan sebuah aplikasi yang dapat digunakan secara
daring.
c. Gamifikasi hafalan Al-Quran sebagai sarana penghafal Al-Quran
yang ingin
berlomba dalam seberapa kuat hafalan yang dimiliki dengan variasi
level yang
disediakan.
pemikiran dari kaca mata desainer yang dalam memecahkan masalahnya
dengan
pendekatan human oriented/berfokus pada manusia sebagai
pertimbangan utama
dari proses pemecahan masalah (Brown, 2008). Melalui metode design
thinking
yang dilakukan adalah memahami secara spesifik karakter dari
pengguna sehingga
dalam proses desain antarmuka sesuai dengan kebutuhan pengguna dan
membantu
pengguna untuk mencapai tujuannya. Di samping itu, penelitian ini
memiliki
beberapa tahapan yang diawali dengan melakukan studi literatur
mengenai
referensi yang dijadikan sebagai pendukung dalam melaksanakan
penelitian.
5
Tinjauan pustaka yang digunakan berupa jurnal, buku, laporan
penelitian, dan
skripsi yang sudah ada, serta hasil pencarian pustaka di internet.
Alur metode
penelitian bedasarkan Gambar 1 sebagai berikut:
Gambar 1 1. Alur Metode Penelitian
6
a. Metode Pengumpulan Data
Tahap ini dilakukan dengan wawancara terhadap target pengguna yaitu
yang
sedang menghafal al Quran, guru yang mengajarkan al-Quran dan pakar
Al-
Quran. Sehingga dapat analisis masalah pada mereka dan apa saja
yang
dibutuhkan.
b. Metode Desain Antarmuka
sebagai berikut:
Tahap utama dari proses desain yang berfokus untuk memahami
pengguna
dalam konteks aplikasi yang akan dirancang dan pengguna yang
akan
menggunakan aplikasi ini. Tahapan Empathize sangat dibutuhkan
dengan
mengetahui tentang kebutuhan dan permasalahan pengguna.
Dalam melakukan tahapan Empathize yaitu Observe atau Observasi
adalah
mengamati pengguna dalam kehidupan sehari-hari tentang apa
yang
dibutuhkan. Kemudian User Interview atau wawancara adalah
menanyakan
pertanyaan-pertanyaan kepada pengguna tentang permasalahan dan
solusi yang
diinginkan. Sehingga dari proses oberservasi dan wawancara
dapat
dikombinasikan untuk mendapatkan kebutuhan dari permasalahan
agar
terciptanya sebuah solusi yang dibutuhkan oleh pengguna. Hasil dari
tahapan
Empathize yaitu menentukan dan memetakan masalah dengan
menggunakan
Diagram Afinitas.
2. Define (Analisis Permasalahan dan Kebutuhan)
Tahapan ini adalah mengumpulkan data-data yang sudah didapatkan
dari proses
Empathize yaitu dengan menentukan dan menganalisis permasalahan
yang
berfokus pada pengguna yang spesifik dan berdasarkan
insight/wawasan dari
kebutuhan pengguna. Sehingga dapat ditentukan permasalahan tersebut
dengan
menggunakan user personas. Personas adalah gambaran pengguna yang
akan
menggunakan aplikasi yang dirancang sehingga dapat mempermudah
dalam
mendefinisikan solusi aplikasi.
Tahapan ini dapat dilakukan setelah empathy dan Ideate berdasarkan
hasil
pernyataan masalah yang telah dilakukan sehingga tercipta
pengembangan ide
solusi yang dapat diimplementasikan ke dalam desain antarmuka yang
akan
dibuat. Define dan Ideate saling berhubungan antar keduanya
yaitu
memberikan dan membuat solusi. Sehingga solusi apa yang dapat
menyelesaikan masalah pengguna. Pembuatan solusi tidak semua
masalah
pengguna dapat diselesaikan namun tujuan utama adalah berfokus
kepada
sebuah solusi yang paling dibutuhkan pengguna dalam mencapai
tujuannya.
4. Prototype (Perancangan Antarmuka Pengguna)
Tahap prototype merupakan desain antarmuka yang akan dibuat
berdasarkan
ide solusi pada tahap Ideate sehingga menjadi bentuk rancangan
antarmuka
pengguna. Desain antarmuka yang dibuat menggunakan teknik
prototyping
dengan terbagi menjadi dua jenis yaitu Low-Fidelity dan
High-Fidelity. Low-
Fidelity atau sering disebut wireframe merupakan kerangka atau
blueprint dari
elemen-elemen dasar seperti button, teks, icon. Sedangkan
High-Fidelity
merupakan desain yang lebih detail yang sudah memiliki warna,
ukuran dan
jarak antar elemen.
5. Test (Pengujian)
dibuat prototype. Hal ini dilakukan untuk mengumpulkan berbagai
umpan balik
pengguna dari berbagai rancangan akhir yang telah dirumuskan dalam
proses
prototype sebelumnya. Proses ini merupakan tahap akhir namun
bersifat life
cycle sehingga memungkinkan perulangan dan kembali pada tahap
perancangan sebelumnya apabila terdapat kesalahan (Brown, 2008).
Dalam
melakukan pengujian kebergunaan sebuah interface salah
satunya
menggunakan Usability Testing
2.1 Penelitian Terdahulu
Penelitian yang di lakukan oleh Nurul Hidayah dan Royana Afwani
(2019)
berjudul Rancang Bangun Aplikasi Bantu Hafalan Al-Quran Metode
At-Taisir
Berbasis Android. Penelitian tersebut merupakan merancang Aplikasi
Android
untuk membantu menghafal Al-Quran dengan menyajikan kondisi ayat
Al-
Quran yang akan dihafalkan yaitu per halaman dan ditentukan sesuai
dengan
metode At-Taisir. At-Taisir adalah metode dalam menghafal Al-Quran
yang
berupa halaman dan ayat yang akan dihafal dengan cara mengulang
dan
membaca serta diberikan denah posisi mushaf. Penelitian ini
hanya
memudahkan hafalan dengan metode At-Taisir. Sedangkan, untuk
menilai user
sudah menghafal atau tidak hanya dengan keyakinan user dengan
menandai
apakah surat tersebut sudah hafal atau belum hafal (Nurul Hidayah,
2019).
Penelitian yang di lakukan oleh Reza Sevutra dan Susi Erlinda
(2019) berupa
penerapan gamifikasi hafalan alquran dan hadis berbasis android
menggunakan
metode SCOTT. Metode SCOTT adalah tahapan desain game sebelum
pembuatan game yang dinamakan The Ten-Page Design Document
yaitu
seperangkat pedoman dari kebijakan yang seksama (Rogers, 2010).
Sistem yang
rancang adalah menerapkan gamifikasi untuk memberikan semangat agar
anak
tidak cepat bosan dalam menghafal Al-Quran maupun Hadis. Pada
penerapan
gamifikasi menggunakan fitur level yaitu dengan tujuh level hafalan
setiap
tantangan hafalan yang akan diselesaikan oleh anak-anak.
Gamifikasi dikontrol secara langsung oleh pengajar. Ketika anak
menyetor
hafalan, maka pengajar akan menceklis hafalan yang telah di hafal
oleh anak.
Anak akan mendapatkan point berdasarkan level yang telah
diselesaikan. (Reza
Sevetura, 2019).
2.2 Desain
Kata desain merupakan kata baru yang peng-Indonesiaan dari bahasa
Inggris
yaitu design yang artinya ‘Rancang’ atau ‘Merancang’. Menurut Kamus
Besar
Bahasa Indonesia (KBBI) desain adalah kerangka bentuk atau
rancangan dan
motif, pola, corak. Desain adalah terjemahan fisik mengenai aspek
social,
ekonomi, dan tata hidup manusia yang mencerminkan budaya zamannya.
Desain
salah satu manifestasi kebudayaan yang berwujud dan produk dari
nilai-nilai
yang berlaku pada kurun waktu tertentu (Sachari & Sunarya,
2000) Desain
merupakan pemecahan masalah dengan satu target yang jelas (Acher,
1965).
2.3 Gamifikasi
untuk mengikat orang-orang, tindakan motivasi, mempromosikan
pembelajaran
dan menyelesaikan masalah (Kapp, 2012). Gamifikasi memberikan
dan
meningkatkan motivasi tambahan untuk menjamin peserta didik atau
pelajar
dalam mengikuti kegiatan secara lengkap (Glover, 2013) Dalam
penerapan
gamifikasi agar bekerja mengandung syarat yaitu fitur Point,
Badges, Levels,
Leaderboards, Challenges, Rewards (Jusuf, 2016). Berikut uraian
fitur
gamifikasi yang popular digunakan (Brull & Finlayson, 2016)
:
a. Point
gamifikasi. Fungsi poin memberikan sebuah umpan balik secara
langsung dan
dapat ditampilkan secara eksternal untuk menampilkan kepada orang
lain.
Tujuannya adalah untuk melihat capaian seberapa baik dan tidak baik
pemain
dalam bermain.
b. Badges
Badges atau lencana merupakan tanda secara visual kepada pemain
bahwa ia
telah mencapai sesuatu. Sebagai contoh banyak yang menggunakan
badges
sebagai program latihan atau dalam sebuah permainan. Penggunaan
badges
bersifat fleksibel artinya menyesuaikan keadaan untuk diberikan
untuk apa saja
jenis aktifitas. Selain itu, badges dapat mengandung komponen
sosial contohnya
membagikan lencana ke media sosial.
c. Level
mengalami kemajuan dalam sebuah konten pembelajaran. Kegunaan level
untuk
meminta pemain agar maju dan menyelesaikan misi, mencapai poin,
dan
mengumpulkan materi. Selain itu, naik level mudah digunakan
untuk
membedakan antara satu kelompok dengan kelompok lainnya.
d. Leaderboard
Salah satu fitur gamifikasi untuk menunjukan papan peringkat dalam
permainan
kira-kira seberapa banyak pemain yang bermain. Leaderboard
menampilkan
pemain-pemain utama yang telah melakukan banyak misi dan biasanya
yang
mendapatkan poin terbanyak sehingga berguna agar pemain untuk
memotivasi
dan mengikat untuk terus melakukan permainan.
Oleh karena itu elemen desain yang membentuk sebuah games dalam
konteks
non-games merupakan dari gamifikasi (Deterding, 2011).
Penggunaan
gamifikasi memiliki beragam system tergantung pada analisis masalah
pada
pembelajaran (Jusuf, 2016) berikut beberapa penerapan system
gamifikasi:
1. Penggunaan system gamifikasi menggunakan poin atau nilai
tertentu
2. Poin dapat diubah menggunakan bentuk lain seperti badge atau
reward lainnya
3. Semua atau sebagian kegiatan utama gamifikasi yang dilakukan
system harus
mencatat dan mengubahnya menjadi poin.
12
4. Sistem yang menggunakan gamifikasi selalu memiliki cara untuk
mengikat
dan membuat pengguna atau pemain untuk kembali.
2.4 User Interface
User Interface terdiri dari kata User artinya pengguna dan
Interface yaitu
tampilan. Kata user ditempatkan di depan kata Interface sehingga
dalam
membuat user interface harus memperhatikan dan mengutamakan
pengguna
(Dwinawan, 2016). Sehingga user interface atau antarmuka pengguna
adalah
tampilan yang memiliki hubungan secara langsung dengan pengguna.
User
interface menghubungkan antara pengguna dengan system sehingga
dapat
digunakan. Dalam proses pembuatan user interface memiliki tahapan
yaitu riset
pengguna, desain dan prototipe serta evaluasi (Intentic,
2017).
2.5 Ten Usability Heuristic for User Interface Design
Ten Usability Heuristic for User Interface Design atau disebut
sebuah prinsip
umum heuristic untuk menganalisis sebuah desain interaksi atau
antarmuka. 10
prinsip heuristic sebagai aturan umum bukan sebuah pedoman kegunaan
khusus
dan atribut kualitas yang digunakan dalam menilai seberapa
mudahnya
tampilan antarmuka. (Neilsen, 1994)/
1. Visibilitasi status sistem
Kondisi system harus mampu memberikan informasi yang terjadi pada
user,
baik yang sedang dilakukan maupun apapun yang terjadi.
2. Kecocokan antara sistem dan dunia nyata
Sistem harus mampu memberikan informasi yang mudah dipahami
yaitu
bahasa sehari hari. Hal ini bertujuan agar memberi kesan keakraban
dengn
user.
13
yaitu memberikan jalan kembali yang dialami oleh pengguna
dalam
keadaan yang tidak diinginkan.
4. Konsistensi dan Standar
dalam mengenal sebuah fitur ketika digunakan
5. Pencegahan kesalahan
Untuk menghindari eror atau bug dalam system yang dilihat oleh user
dapat
ditangani pesan eror dalam bentuk visual desain.
6. Rekognisi dari pada mengingat
System menyediakan sebuah tindakan atau objek sebagai pengingat.
Hal ini
memberikan kemudahan terhadap pengguna dalam mengingat
informasi
dari satu bagian halaman ke bagian halaman lainnya.
7. Fleksibilitas dan efisensi penggunaan
Menyediakan fitur yang fleksibel dan efisiensi terhadap sebuah
antarmuka
dan system agar pengguna tidak memakan waktu dalam mempejari
sebuah
fitur.
Desain antarmuka yang baik dapat memberikan kenyamanan
terhadap
pengguna, yaitu menampilkan informasi yang relevan, warna yang
bagus,
whitespace (jarak antar elemen) memberikan desain yang
minimalis.
9. Bantu pengguna mengenali, mendiagnosis, dan pulih dari
kesalahan
Mencegah terjadi eror harus menyediakan pemberitahuan dalam
bentuk
bahasa sederhana dan memberikan solusi terhadap eror yang
terjadi.
10. Bantuan dan dokumentasi
menangani kesalahan dalam pengunaan aplikasi sehingga
membantu
pengguna dalam menyelesaikan tugasnya.
2.6 User Experience
Berdasarkan definisi ISO 9241-210 user experience adalah persepsi
seseorang
dan respon dari penggunaan sebuah produk, system atau jasa. User
experience
bukan tentang cara kerja dari suatu produk atau layanan yang ada.
Namun
bagaimana interaksi antara user dengan produk seperti pengalaman
pengguna
dalam menggunakan sebuah produk, apakah mudah digunakan,
bagaimana
kemudahan pengguna dalam menemukan dan menyerap sebuah informasi
serta
kepuasan pengguna dalam mengoperasikan layanan produk (Garret,
2011).
Berdasarkan pengertian di atas penerapan user experience banyak
model yang
dapat digunakan. Hal yang terpenting adalah fokus terhadap persepsi
pengguna
dalam berinteraksi dengan sebuah produk atau layanan.
2.7 User Persona / Karakter Pengguna
User personas atau karakter pengguna adalah bagian dari dalam
metode design
thinking yaitu define. Persona merupakan pola hipotesis dasar
tehadap
pengguna yang sesungguhnya berdasarkan penjelasan pengguna seperti
tujuan,
keahlian dan minat (Cooper, 1999). Dalam menerapkan persona penting
untuk
dijelaskan tentang karateristik pengguna seperti nama, foto,
tujuan, umur,
pekerjaan (Grudin & Pruitt, 2002). Persona digunakan untuk
memberikan
gambaran bagi desainer untuk mengembangkan sistem, bisa didapatkan
dengan
wawancara, kegiatan sehari-hari, dan sifat serta karakter (Persada,
2017).
Berdasarkan beberapa pengertian diatas, maka user persona merupakan
sebuah
karakter fiksi yang mendekati kepada pengguna sesungguhnya
dengan
reprentasi karakter dari keseluruhan pengguna yang memiliki
kemungkinan
berinteraksi dengan produk yang dikembangkan agar sesuai dengan
kebutuhan
pengguna.
15
2.8 Diagram Afinitas
masalah dan kebutuhan yang telah didapatkan pada tahap emphatize
atau
pengumpulan data (Plattner, 2010). Salah satu metode yang dapat
digunakan
adalah Diagram Afinitas atau Affinity Mapping merupakan metode yang
berguna
dalam memetakan data dalam jumlah besar maupun kecil dan mengatur
ke
dalam kelompok-kelompok berdasarkan hubungan yang berkaitan (Dam
& Teo,
2019). Proses diagram afinitas sangat bagus untuk mengelompokan
data yang
dikumpulkan selama penelitian atau ide-ide yang dihasilkan
selama
brainstorming atau curah pendapat. (Dam & Teo, 2019).
Untuk penerapan diagram afinitas dapat dipraktikan secara
berkelompok dua
atau lebih orang dan langkah-langkah yang dilakukan adalah sebagai
berikut
(Kho, 2017):
2. Menuliskan data yang sudah didapat dan ide dari
permasalahan
menggunakan alat seperti kertas.
kelompok
Gambar 2 1 Contoh Penerapan Diagram Afinitas
16
Sumber: ilmumanajemenindustri.com
2.9 Usability
Usability istilah yang lebih luas dari “User Experience” dan
mengacu kepada
kemudahan mengakases dan/atau menggunakan produk (Interaction
Design
Foundation, 2019) Menurut (Neilsen, 2012) usability merupakan
kondisi
dimana seseorang dapat mudah menggunakan sebuah alat atau objek
tertentu
buatan manusia dalam mencapai suatu tujuan. usability adalah sejauh
mana
produk atau system dapat digunakan oleh pengguna untuk mencapai
tujuan
dengan efektivitas, efisiensi dan kepuasan dalam konteks tertentu
(ISO, 2018),
Menurut (Neilsen, 2012) usability memiliki lima kriteria untuk
mengukur metrik
pada setelah melakukan usability testing agar mendapatkan penilaian
dari
sebuah desain atau produk yang telah dibuat. Lima kriteria tersebut
sebagai
berikut:
Dalam arti yaitu mudah dipelajari dengan mengukur semudah apa
pengguna
dapat mempelajari cara penggunaan aplikasi tersebut pertama
kali.
2. Effeciency
Efesiensi yaitu berhubungan dengan waktu. Pengguna dapat
menggunakan
sebuah aplikasi sesuai tujuan dan tugas yang dilakukan. Sehingga
seberapa cepat
pengguna dalam melakukan tugasnya.
melakukan kebutuhan tugasnya. Hal ini dapat mengukur sejauh mana
pengguna
mengingat langkah-langkah atau proses yang dilakukan dalam
mencapai
tujuannya terhadap sebuah fitur aplikasi.
17
4. Eror
Bentuk pencegahan yang dilakukan pada sebuah aplikasi dengan
mengetahui
sejauh mana pengguna melakukan eror dan apakah pengguna mudah pada
saat
mengatasi eror pada aplikasi.
aplikasi. Kepuasaan pengguna sangat berpengaruh terhadap tingkat
kepuasaan
dan pendapat terhadap desain aplikasi secara keseluruhan.
Berdasarkan standar ISO/IEC 9126-4 untuk mengukur metrik usability
dalam
mencapai sebuah desain atau produk yang dapat digunakan oleh
pengguna untuk
mencapai tujuannya ada tiga yaitu effectiveness, efficiency dan
satisfaction
(Mifsud, 2018)
System Usability Scale merupakan alat ukur pengujian menggunakan
kuesioner
yang dapat digunakan untuk mengukur usability atau kebergunaan
sebuah situs
website, aplikasi perangkat lunak maupun perangkat keras menurut
sudut
pandang subjektif pengguna (Brooke, 2013). SUS dikembang oleh Jhon
Brooke
pada tahun 1986. SUS memiliki 10 pernyataan dengan masing-masing
memiliki
5 poin menggunakan skala Likert sebagai tanggapan yaitu “Sangat
Setuju”,
“Setuju”, “Netral”, “Sangat Tidak Setuju” dan “Tidak Setuju”. Hasil
SUS
berupa skor yang mudah dipahami berupa skor 0 hingga 100 (Brooke,
2013).
Berikut adalah item pernyataan SUS (Sharfina & Santoso, 2017)
pada tabel 2.1.
18
Tabel 2 1 Item Pernyataan SUS
No Pernyataan Skala
1 Saya pikir bahwa saya akan lebih sering menggunakan
aplikasi
ini
2 Saya menemukan bahwa aplikasi ini, tidak harus dibuat
serumit
ini
3 Saya pikir aplikasi mudah untuk digunakan 1 s/d 5
4 Saya pikir bahwa saya akan membutuhkan bantuan dari orang
teknis untuk dapat menggunakan aplikasi ini
1 s/d 5
dengan baik
1 s/d 5
6 Saya pikir ada terlalu banyak ketidaksesuaian dalam aplikasi ini
1 s/d 5
7 Saya bayangkan bahwa kebanyakan orang akan mudah untuk
mempelajari aplikasi ini dengan sangat cepat
1 s/d 5
8 Saya menemukan, aplikasi ini sangat rumit untuk digunakan 1 s/d
5
9 Saya merasa sangat percaya diri untuk menggunakan aplikasi ini 1
s/d 5
10 Saya perlu belajar banyak hal sebelum saya bisa memulai
menggunakan aplikasi
Item pernyataan SUS memiliki lima pernyataan positif dan lima
pernyataan
negatif. Setiap pernyataan memiliki nilai kontribusi. Untuk item
pernyataan
genap yaitu 2, 4, 6, 8 dan 10 skor kontribusinya adalah 5 dikurangi
posisi skala
dan item pernyataan ganjil yaitu 1, 3, 5, 7 dan 9 skor
kontribusinya adalah posisi
skala dikurangi 1 serta dikalikan jumlah skor kontribusi dengan 2.5
untuk
mendapatkan keseluruhan nilai SUS (Aprilia, et al., 2015). Dalam
membaca
Skor SUS terdapat dua cara yang dapat digunakan (Brooke, 2013)
penentuan
pertama yaitu dari sisi tingkat penerimaan pengguna terdapat tiga
kategori yaitu
acceptable, not acceptable dan marginal sedangkan dari sisi tingkat
nilai skala
yaitu nilai-huruf (dari A sampai ke F) (Sauro, 2011) kemudian
peringkat ajektif
19
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri
Jakarta
yaitu terdiri dari worst imaginable, poor, ok, good, excellent dan
best imaginable
seperti ditunjukan pada gambar 2.1
Gambar 2 2. Pemetaan Peringkat Ajektif
sedangkan penentuan kedua adalah dari tingkat nilai persentile
yaitu (dari A
sampai ke F) yaitu dengan membandingan hasil penilaian pengguna
secara
umum. Skor peringkat persentil memiliki ketentuan pada tabel 2.2
sebagai
berikut :
No Nilai Persentil Batasan Skor
1 Nilai A 81-100
2 Nilai B 69-80
3 Nilai C 68
4 Nilai D 51-67
5 Nilai F <51
3.1 Deskripsi Desain Aplikasi
Aplikasi yang akan di desain bernama Qurmar atau Qur’an Muroja’ah.
Arti
kata Muroja’ah di ambil dari bahasa Arab yaitu mengulang hafalan
sehingga
aplikasi dengan menerapkan gamifikasi yang bertujuan untuk
membantu
penghafal Al-Quran untuk meningkatkan engagement atau keterikatan
motivasi
menghafaal Al-Qur’an. Aplikasi ini dapat membantu pengguna
dalam
melakukan kegiatan tersebut secara daring sehingga dapat
meningkatkan
pengalaman bersifat fleksibel. Untuk mendapatkan kebutuhan pengguna
dalam
desain yang akan dirancang maka dilakukan riset dan analisis
sehingga
requirement atau kebutuhan pengguna dapat jelas dalam membantu
kebutuhan
fitur dan konten pada desain aplikasi.
3.2 Riset dan Analisis Desain Aplikasi
Pengayaan riset dan analisis dalam penelitian ini dilakukan untuk
mendapatkan
data kuantitatif dan kualitatif berdasarkan pendekatan design
thinking yaitu
empathize atau pengumpulan data (Plattner, 2010). Proses instrumen
yang
dilakukan adalah menyebarkan survey berupa kuesioner daring
guna
mendapatkan data kuantitatif dan mengadakan wawancara kepada
pengguna
yang telah ditentukan pada penelitian ini sehingga dapat memperoleh
data
kualitatif. Data-data tersebut untuk mendukung penelitian guna
mencapai
tujuan dalam merancang solusi antarmuka dan pengalaman pengguna
pada
aplikasi gamifikasi hafalan Al-Quran.
3.2.1 Kuesioner Daring
dilakukan pada awal penelitian dengan menyebarkan kuesioner
dengan
memberikan pertanyaan yang bersifat terbuka dan tertutup serta
demografi
peminat. Kuesioner terbuka diberikan hanya satu pertanyaan yang
diajukan
kepada responden guna memberikan jawaban yang dikehendaki dan
delapan
pernyataan tertutup yang berisi untuk mengukur pengalaman dalam
menghafal
dan mengulang hafalan Al-Quran. Untuk mencapai target dan tujuan
kuesioner
dilakukan penyebaran melalui beberapa platform media sosial.
Penyebaran
survey dimulai kepada responden pada tanggal 21 Januari 2020 dan
berakhir
pada 22 januari 2020. Data yang diperoleh sebanyak 124 responden.
Hasil
survey dijelaskan pada subbab selanjutnya.
3.2.2 Kebutuhan Hasil Kuesioner Daring
Demografi peminat pada survey yang telah dilakukan yaitu rentang
umur dan
profesi responden. Hasil rentang umur responden suvey dari 14 – 53
tahun.
Responden yang paling banyak mengisi survey adalah umur 19 – 24
tahun
sedangkan profesi yang mengisi survey dari berbagai jenis profesi
yang paling
banyak mengisi survey dari mahasiswa sebanyak 54,4 %. Gambar 3.1
dan 3.2.
menunjukan umur dan profesi secara lengkap.
Gambar 3 1. menunjukan demografi umur responden
23
Gambar 3 2 menunjukan demografi profesi responden
Sebagai rangkuman hasil kebutuhan kuesioner daring, ditunjukan pada
tabel
3.1 sebagai berikut:
No. Pertanyaan
3. Memiliki Motivasi untuk menghafal Al-Qur’an 99,2% 0.8%
4. Media sosial menghambat Hafalan 72,8% 27,2%
5. Dapat meluangkan waktu untuk menghafal 29,6% 70,4%
Hasil analisis kuesioner daring diatas menunjukan beberapa
permasalahan dari
responden yang bisa membaca dan pernah menghafal Al-Quran.
Permasalahan
utama berhubungan dengan meluangkan waktu dalam kegiatan
menghafal,
24
distraksi media sosial dan hal yang mendukung dari responden
dalam
melakukan kegiatan tersebut adalah memiliki motivasi dan keinginan
untuk
terus melakukan kegiatan menghafal Al-Quran. Oleh karena itu,
data-data
tersebut dapat mendukung dalam merancang solusi antarmuka dan
pengalaman
pengguna dengan menerapkan gamifikasi pada aplikasi hafalan
Al-Quran.
3.2.3 Wawancara Pengguna
target penelitian yang akan menggunakan aplikasi yang dirancang dan
desain
solusi dari masalah yang ada. Hal ini berguna untuk memperoleh data
kualitatif
penelitian. Pertanyaan-pertanyaan wawancara berjenis
semi-terstruktur dan
sifatnya terbuka sehingga target pengguna atau responden dapat
menceritakan
masalah, kebutuhan, dan motivasi yang tidak dijabarkan pada data
kuantitatif
dalam pengalaman menghafal Al-Quran. Wawancara penelitian ini
berfokus
pada tiga objektif. Untuk lebih jelasnya berikut tiga objektif
tersebut dalam
bentuk tabel 3.2 :
Kode Fokus Objektif Keterangan
Quran.
pengguna mengalami masalah dalam
menghafal Al-Quran.
3.2.3.1 Pertanyaan dan Segmentasi Wawancara
Setelah menentukan fokus objektif wawancara maka dibuatkan
topik
pertanyaan wawancara terbagi menjadi tiga yaitu informasi demografi
peminat
dan berdasarkan kode FO_01, FO_02 dan FO_03 pada tabel 3.1.
Kemudian
segementasi pengguna dengan rentang umur 13-28 tahun yang
memiliki
pengalaman menghafal Al-Quran berdasarkan batasan masalah
penelitian.
Untuk lebih jelasnya berikut uraian topik wawancara pada tabel 3.3.
sebagai
berikut :
Kode Keterangan
TP_02 Pertanyaan pengalaman kebiasaan dan masalah pengguna
dalam
menghafal dan mengulang hafalan Al-Quran
TP_03 Pertanyaan tujuan dan motivasi pengguna dalam menghafal
Al-
Quran
Mengenai susunan dari tiga topik pertanyaan wawancara secara
lengkap dapat
dilihat pada lampiran L-1. Dalam penjabaran tiga topik yaitu
pertama, informasi
demografi pengguna, menanyakan kepada pengguna tentang pengalaman
dasar
apakah bisa membaca Al-Quran, apakah pernah dan sejak kapan
menghafal.
Kedua, pengguna menceritakan pengalaman kebiasan bagaimana
melakukan
kegiatan menghafal dan masalah, apakah ada masalah selama
melakukan
kegiatan tersebut dan ketiga, pengguna menceritakan motivasi dan
keinginan
serta bagaimana target yang ingin dicapai. Kemudian ditambahkan
apakah
pengguna menggunakan sebuah media dalam membantu kegiatan
menghafal
Al-Quran.
26
3.2.4 Hasil Wawancara
partisipan yang memiliki pengalaman menghafal Al-Quran,
keterbatasan waktu
dan sumber daya penulis dalam mencari data sehingga jawaban-jawaban
dari 8
pertisipan sudah cukup untuk membangun ide dan solusi pada desain
aplikasi
dan didukung dengan data kuantitatif serta studi literatur yang
sudah dijelaskan
sebelumnya. Untuk pemetaan hasil wawancara digunakan affinity
mapping atau
diagram afinitas. Tujuannnya adalah untuk mengelompokan data
wawancara
yang telah dikumpulkan sehingga masalah dan solusi yang
dirancang
memprioritaskan kebutuhan pengguna. Uraian analisis wawancara
dijelaskan
pada sub bab berikut.
pemetaan hasil wawancara agar dapat dikelompokan permasalahan
yang
didapat dari responden. Fokus dalam pemetaan dan pengelompokan
hasil data
wawancara yaitu pertama, mengetahui permasalahan responden,
tujuan
responden dalam melakukan kegiatan menghafal Al-Quran dan
motivasi
responden yang mendorong atau keinginan untuk melakukan
kegiatan
menghafal Al-Quran.
tujuan, serta motivasi ke dalam kelompok yang memiliki kesamaan
kemudian
memilih hasil pemetaan permasalahan untuk dijadikan kebutuhan dan
insight
solusi desain aplikasi. Untuk pemetaan dilakukan dengan menggunakan
post-
it-note pada aplikasi Miro.com, dibuatkan kerangka kelompok diagram
afinitas
sebagai berikut ke dalam Tabel 3.4 sebagai berikut:
27
Tabel 3 4. Kerangka pengelompokan diagram afinitas
No Nama Kelompok dan Hasil Pengelompokan
Kelompok 1:
1
Kelompok 2:
2
28
Gambar 3 4 Kelompok Diagram Afinitas 2
Kelompok 3:
Dari rangkuman hasil wawancara dari jawaban 8 responden memiliki
jawaban
sebagai permasalahan yang berbeda-beda. Namun dari substansi
hasil
wawancara banyak jawaban yang memiliki dan mendekati permasalahan
yang
sama.
sebagai kebutuhan dan insight desain aplikasi. Kelompok-kelompok
tersebut
dipilih karena dari urgensi permasalahan terbanyak dan motivasi
berdasarkan
29
latar belakang penelitian. Selain itu, prioritas dan limitasi
kemampuan dari fitur
yang akan di rancang.
kegiatan yang berbeda-beda sehingga konsistensi dalam mengatur
waktu,
kesibukan dan waktu luang yang dimiliki untuk melakukan kegiatan
menghafal
Al-Quran.
responden dalam menghafal Al-Quran. Terdapat keinginan dan target
yang
ingin dicapai terutama dalam konteks ingin menambah hafalan.
Kemudian kelompok terakhir adalah media yang biasa membantu
dalam
kegiatan menghafal Al-Quran. Media yang dipakai berbagai jenis dari
mulai
mushaf Al-Quran, audio, alat tulis untuk pencatatan setelah
menghafal dan
stopwatch. Dari keselurhan responden mengatakan audio sangat
membantu
untuk menghafal Al-Quran.
membingkai ulang masalah berdasarkan design thinking yaitu
define.
3.3 Membingkai Ulang Masalah – Reframing Problem
Tahapan ini merupakan bagian dari pendekatan metode design thinking
yaitu
define (Plattner, 2010). Salah satu caranya dengan melakukan
Reframing
Problem atau membingkai ulang masalah dari pengelompokan data
wawancara
pengguna sebelumnya menggunakan diagram affinitas. Tujuannya
adalah
merancang pernyataan masalah yang berguna dan dapat
ditindaklanjuti
sehingga dapat menyimpulkan kebutuhan dan insight dari calon
pengguna
desain aplikasi gamifikasi hafalan Al-Quran. Pada penerapannya,
digunakan
keterangan seperti Needs/Kebutuhan, Insight dan Definisi Masalah.
Untuk
lebih jelasnya, menunjukan Tabel 3.5, Tabel 3.6 dan Tabel 3.7
penjelasan
tersebut.
30
Tabel 3 5. Membingkai Ulang Masalah 1
Needs/ Kebutuhan 1. Dapat menambah hafalan dan ingin ikut
lomba hafalan Al-Quran.
mengurangi rasa malas
D1 Insight Kesulitan mengatur waktu
dan konsistensi. dalam menghafal Al-Quran
Mendefiniskan
Masalah
menghafal
menghafal lebih ruhani
kampungnya
dalam keluarganya
keutamaan menghafal Al-Quran
Mendefiniskan
Masalah
membuat orang tua dan keluarga bangga,
menjadi hafidz Quran, dan mendapatkan
keutamaan menghafal Al-Quran tetapi
karena tidak ada yang mengingatkan.
31
Tabel 3 7. Membingkai Ulang Masalah 3
Needs/ Kebutuhan Di ulang-ulang seperti playlist audio
murottal
karena sangat berpengaruh dan menambah
semangat menghafal.
(mengulang hafalan Al-Quran)
menghafal Al-Quran
untuk merekam hafalan
karena dapat membantu dalam kegiatan
menghafal Al-Quran.
3.4 Pembuatan Persona
Berdasarkan riset dan analisis dari hasil kuesioner daring dan
wawancara, maka
didapatkan satu persona. Persona yang diperoleh merupakan
karakter
pengguna yang akan menggunakan desain aplikasi gamifikasi hafalan
Al-
Quran. Di dalam isi persona terdapat empat bagian yaitu Bio,
menggambarkan
keperibadian persona, goals atau tujuan, frustration atau kendala,
dan
motivation pengguna.
Pada Gambar 3.6 yaitu persona yang menggambarkan seorang mahasiswa
yang
bernama Muhammad Ari Ramadhan yang aktif berorganisasi di
kampus
memiliki keinginan untuk untuk melakukan kegiatan menghafal
dan
mengulang hafalan Al-Quran. Namun, Ari sulit untuk membagi waktu
antara
kegiatan kuliah, organisasi dan menghafal Al-Quran. Dia memiliki
target
capaian agar bisa menambah dan mengulang hafalan. Di samping itu,
Ari juga
termotivasi dalam melakukan kegiatan menghafal dan agar konsisten
dalam
mengatur waktunya. Ari juga ingin mengetahui urgensi dan mencari
motivasi
dalam kegiatan menghafal Al-Quran agar tambah semangat.
32
Gambar 3 6 Persona Ari Seorang Mahasiswa.
3.5 Kebutuhan Pengguna (User Requirements)
.Berdasarkan pembuatan persona sebagai gambaran spesifik karakter
pengguna
yang akan menggunakan desain aplikasi gamifikasi hafalan Al-Quran
dan hasil
riset wawancara pengguna dan kuesinoner daring maka
didefinisikan
kebutuhan pengguna dalam uraian fitur dan konten yang di rancang
sebagai
berikut:
a. Pengguna akan dibantu dalam menghafal dan mengulang hafalan
Al-
Qur’an dengan fitur Audio Fingerprint. Audio Fingerprint
berfungsi
sebagai pengecekan hafalan dengan mecocokan suara pengguna
dengan
audio murotal Al-Qur’an yang di setorkan. Pada fitur ini di
33
merancangnya,
b. Pengecekan suara berguna untuk pengguna yang belum pernah
menghafal
surah Al-Quran pada juz 30.
c. Terdapat challenge yang membagikan tingkat level hafalan pada
juz 30
sesuai dengan tingkat kesulitan yang sudah terdefinisi dan akan
menjadi
badges pada profil pengguna.
d. Terdapat Daily Challenge atau tantangan perhari yaitu hafalan
surat dan
mendapatkan point lebih besar. Tantangan berupa hafalan surat
secara acak
pada waktu yang di tentukan. Daily challenge sangat berguna
bagi
pengguna yang telah memiliki pengalaman menghafal Al-Quran
sebagai
pengulangan hafalan.
e. Pengguna dapat melihat dan mencari Leaderboard atau Ranking
pengguna
lain sesuai poin dan hafalan surat nya yang telah di
kalkulasikan.
f. Pengguna dapat mengatur waktu dan target hafalan nya per surat
serta di
jadwalkan sesuai dengan pengguna inginkan.
g. Alarm atau notifikasi akan di aktifkan sesuai dengan pengaturan
yang telah
di atur oleh pengguna untuk mengingatkan dalam menyetor target
hafalan
nya.
h. Aplikasi menyediakan audio murothal setiap surat dan ayat pada
juz 30
untuk membantu pengguna dalam menghafal. Setiap Audio dapat di
jadikan
playlist yang dipilih oleh pengguna atau di pilih secara otomatis
sesuai
dengan target hafalan pengguna.
i. Menampilkan Banner yang berisi Quotes untuk meningkatkan
pengetahuan
j. dan motivasi ruhani dalam menghafal dan mengulang hafalan
Al-Qur’an..
34
3.6 Perumusan Ide dan Solusi
Perumusahan ide dan solusi adalah bagian selanjutnya dari Design
Thinking
tahap Ideate (Plattner, 2010) yaitu merumuskan ide dan solusi dalam
desain
aplikasi yang bernama Qurmar. Dalam merumuskan ide dan solusi
berdasarkan
hasil riset dan analisis maka di peroleh ide dan solusi menjadi dua
bagian yaitu
merealisasikan konsep gamifikasi hafalan Al-Qur’an sebagai fitur
utama,
kemudian merealisasikan Ten Usability Heuristic for User Interface
Design
sebagai panduan tampilan dan pengalaman pengguna untuk membuat
desain
kebutuhan fitur dan konten aplikasi. Untuk lebih jelasnya,
penjabaran rumusan
ide dan solusi pada sub bab berikutnya.
3.6.1 Implementasi Konsep Gamifikasi Hafalan Al-Quran
Desain konsep gamifikasi hafalan Al-Quran berfokus kepada
surat-surat yang
ada pada Juz ke 30. Hal ini berdasarkan hasil wawancara dengan
pakar tahfidz
Quran (Wahid, 2020) bahwa hafalan dimulai dari belakang yaitu juz
30
merupakan dasar yang paling mudah bagi pemula maupun yang telah
memiliki
pengalaman menghafal Al-Quran serta aplikatif dalam ibadah
sehari-hari.
Dalam penerapananya elemen gamifikasi yang digunakan yaitu Level,
Poin,
Reward, Badge, Progress bar, dan Leaderboard. Berikut penjelasan
konsep
gamifikasi yang dirancang:
menghafal Al-Quran pada Juz 30 secara bertahap berdasarkan variasi
tantangan
hafalan. System levelling berguna sebagai tanda profil terhadap
penghafal
sebagai akses tantangan hafalan dari setiap level yang diikuti.
Pada desain
aplikasi terdapat tiga level dan keseluruhan level memiliki delapan
tantangan.
35
Setiap tantangan memiliki variasi tantangan hafalan berbeda. Untuk
lebih
jelasnya, dibuatkan skenario rancangan variasi tantangan sebagai
berikut:
Gambar 3 7. Skenario variasi tantangan hafalan
Pada scenario diatas, setiap level memiliki tingkatan dari termudah
sampai
tersulit. Setiap penghafal harus mulai dari level satu sampai
selesai agar dapat
mengakases level selanjutnya yang terkunci. Variasi tantangan yang
dirancang
berbeda-beda agar tidak monoton dalam melakukan hafalan Al-Quran
dan tidak
meninggalkan maksud tujuan dari gamifikasi yaitu untuk
membuat
engangement dari penghafal.
Setelah membuat rancangan scenario tantangan gamifikasi,
dikumpulkan
nama-nama surat juz 30 yang akan dimasukan ke dalam variasi
tantangan
hafalan. Dalam Juz 30 terdapat 37 surat masing-masing surat memilki
nomor
surat yang sudah tersedia di dalam Al-Quran. Sumber Al-Quran
diambil dari
36
Kementrian Agama sebagai referensi. Untuk lebih jelasnya, berikut
pembagian
surat yang dimasukan ke dalam scenario tantangan hafalan:
Gambar 3 8 Skenario dan pembagian surat pada Level 1
Gambar 3 9. Skenario dan pembagian surat pada Level 2
37
Gambar 3 10. Skenario dan pembagian surat pada Level 3.
B. Poin dan Reward
Elemen gamifikasi poin dan reward digunakan sebagai bentuk
apresiasi kepada
pengguna yaitu penghafal Al-Quran dalam melakukan tantangan
hafalan.
Dengan adanya poin dan reward akan membangkitkan motivasi
kepada
penghafal agar lebih giat dalam melakukan kegiatan menghafal dan
mengulang
Hafalan Al-Quran. Penggunaan poin dan reward berfungsi sebagai
permainan
yang sehat dalam bersaing.
Elemen badge atau lencana merupakan indikator kesuksesan kepada
pengguna
yang telah aktif dalam menyelesaikan tantangan hafalan dari setiap
level. Setiap
level memiliki beberapa badge yang tersedia. Contoh implementasinya
adalah
pengguna sudah menyelesaikan tantangan di Level 1 yaitu
pengguna
mengakses sub-level 1 dengan menerima tantangan menyusun surat
secara
sempurna, jika pengguna dapat menjawab hafalan benar semua
dan
mendapatkan poin secara keseluruhan maka badge dapat di klaim oleh
user.
Sehingga di dalam profile badge akan di tampilkan. Penggunaan
badge
merupakan cara yang bersaing secara sehat. Bentuk badge di sediakan
dalam
38
bentuk visual desain yang menarik, sehingga terdapat pengalaman
visual yang
ada dalam desain aplikasi.
aplikasi di realisiasikan elemen gamifikasi yaitu Progress bar.
Penggunaan
progress bar akan ditampilkan pada halaman profil pengguna. Hal ini
berfungsi
sebagai keikutsertaan pengguna dalam melakukan tantangan hafalan
Al-Quran
dan seberapa jauh pengguna melakukan pembelajaran. Progess bar
dapat
membuat pengguna termotivasi untuk terus melakukan tantangan
hafalan Al-
Quran.
Leaderboard atau disebut papan peringkat merupakan elemen yang
digunakan
sebagai tanda prestasi secara berurut yang dinilai dari keaktifan
dan sejauh
pengguna melakukan tantangan hafalan. Semakin aktif dan rajin
menyelesaikan
misi dari tantangan level hafalan maka akan semakin baik poin dan
peringkat
yang diperoleh. Leaderboard ditampilkan dalam visual berupa nama
pengguna,
poin, avatar dan nomor peringkat.
3.6.2 Implementasi Ten Usability Heuristic Interface design
Pada proses perancangan antarmuka dan penelitian desain
aplikasi
direalisasikan Ten Usability Heusristic atau 10 kegunaan
heuritistic sebagai
panduan dan kegunaan dari fitur-fitur serta konten yang di rancang.
Sehingga
kegunaan desain aplikasi gamifikasi Al-Quran mudah digunakan dan
tidak
membingungkan. Untuk lebih jelasnya, pada Tabel 3.8 penjabaran 10
Usability
heuristic dari komponen-kompnen desain yang di rancang sebagai
berikut:
39
Tabel 3 8. Implementasi Ten Usability Heuristic
No Ten Usability Heuristic Implementasi
1 Visibilitasi status sistem • Halaman Login dan Register
Menampilkan Informasi berhasil mendaftar
ilustrasi
• Perubahan warna Level
surat yang disediakan.
mudah di pahami
tantangan Level jika user ingin bermain
kembali setelah melakukan tantangan.
4 Konsistensi dan Standar
google material android
Orenye. Dan Sekunder sebagai
• Pengkategorian layout kompenen icon,
halaman register
level
mudah di pahami
melakukan login pada aplikasi.
• Memberikan fitur notifiksasi sebagai
kategori sebagai perpindahan halaman.
8
tren kekinian tanpa meninggalkan
Internet dan memberikan tata cara
sederhana agar terselesaikan dari
Pengaturan.
sampai bentuk high-fidelity. Di samping itu, dibuat rancangan alur
informasi
fitur, journey pengguna, wireframe aplikasi, komponen visual desain
guna
mendukung konten sampai desain purwarupa.
3.7.1 Rancangan Alur Informasi Fitur
Rancangan alur informasi fitur memudahkan penulis dalam
memvisulisasikan
desain antarmuka dan membantu dalam membuat desain dari halaman
paling
utama sampai halaman pendukung. Untuk halaman utama terbagi menjadi
lima
kategori yaitu: Halaman hafalan challenge, halaman cek hafalan,
halaman
audio murottal, halaman waktu hafalan, dan halaman papan peringkat.
Dan
terdapat tiga bagian navigasi fitur yaitu halaman Beranda, halaman
Aktifitas
42
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri
Jakarta
dan halaman Profil. Untuk lebih jelasnya, berikut alur informasi
fitur pada
Gambar 3.11.
44
3.7.2 Journey Pengguna
gambaran besar yang menceritakan pengguna dalam menggunakan
desain
aplikasi yang dirancang sehingga diharapkan dapat membantu
pengguna.
Scenario alur desain ditentukan terlebih dahulu penggunanya,
kemudian
ditentukan tujuan pengguna dalam menggunakan desain aplikasi.
Contoh pada gambar 3.7 yaitu persona 1 memiliki tujuan untuk
menambah
hafalan dengan mengulang hafalan Quran juz 30. Kemudian dirancang
tahapan-
tahapan scenario yang akan dilakukan oleh persona 1 dan penggunaan
desain
disertakan informasi yang akan di tampilkan oleh system. Di samping
itu,
terdapat informasi yang diberikan judul Opportunities tentang apa
yang akan di
dapatkan ketika pengguna menggunakan desain aplikasi. Untuk lebih
jelasnya,
pada gambar 3.12 merupakan journey pengguna desain aplikasi
gamifikasi
hafalan Al-Quran:
Gambar 3 12. Journey Pengguna desain aplikasi pada Persona 1
46
3.7.3 Wireframe Desain Aplikasi
Tahapan wireframe merupakan rancangan antarmuka low-fidelity
yaitu
gambaran yang belum detail dengan warna dasar yaitu putih dan
abu-abu.
Wireframe berguna untuk kerangka dan menyusun kategori informasi
dalam
mendesain ke tahap high-fidelity. Untuk lebih jelasnya, berikut
penjelasan
wireframe pada tabel 3.9 di bawah ini:
Tabel 3 9 Wireframe Desain Aplikasi
Nama
Halaman
Login dan
dalam aplikasi. Hal ini
dalam system.
Beranda
Profile
3.7.4 Komponen Visual Desain
visual desain untuk memudahkan ke dalam tahap desain high-fidelity.
Dalam
penyusunan komponen visual desain terdapat elemen-elemen yang
digunakan
berupa warna, Ilustrasi, Icon, Button, Bagde dan banner grafis.
Untuk lebih
jelas, berikut penjelasan komponen visual desain pada tabel
3.10.
Tabel 3 10. Komponen Visual Desain Aplikasi
Nama
Komponen
Logo
Aplikasi
Icon Botom
fitur utama. Icon tersebut
Badge Pengunaan icon badge yang
menarik dapat memikat user
tantangan.
Quran dalam Bahasa Arab.
Ilustrasi
Halaman
Aktifitas
Banner
grafis
Quotes
Harian
dengan perpenduan warna
di tampilkan disetiap kondisi
antarmuka aplikasi gamifikasi hafalan Al-Quran sebagai
berikut:
55
3.7.5.1. Purwarupa Navigasi Utama
halaman. Ketiga halaman tersebut yaitu halaman beranda, halaman
aktifitas,
halaman profil Gambar 3.13 dan Gambar 3.14 menunjukan navigasi
utama
aplikasi gamifikasi hafalan Al-Quran.
Gambar 3 13. Navbar-bottom
Gambar 3 14. Realisasi pada ketiga Navbar-bottom
Jika user mengakses setiap navigasi tersebut, maka warna hijau dan
icon sebagai
penanda perpindahan halaman tersebut. Pada halaman beranda dari
kiri, terdapat
fitur utama tediri dari Hafalan Challenge, cek hafalan, Time Quran,
audio
Murrotal dan Leaderboard. Terdapat slide tentang banner quotes
harian dengan
menggunakan hadist-hadist keutamaan menghafal Al-Quran.
Kemudian,
56
halaman aktifitas dari kiri adalah aktifitas untuk melihat
pekerjaan selama
mengakses aplikasi sehingga akan tercatat aktifitasnya dan halaman
ketiga dari
kiri profil ketika user sudah memiliki akun, terlihat menu lencana
yaitu badge
dan pencapaian. Secara umum, ketika user mengakses semua fitur,
maka akan
kembali pada halaman beranda.
pertama kali menggunakan aplikasi. Tujuan onboarding bertujuan
sebagai
gambar besar fitur utama di dalam aplikasi. Gambaran onboarding
sendiri
digunakan dalam bentuk ilustrasi sehingga membuat lebih menarik
ketika user
melihatnya. Pada Gambar 3.15 berikut desain onboarding aplikasi
gamifikasi
hafalan Al-Quran:
Gambar 3 15. Realisasi Desain onboarding
Terdapat tiga halaman ketika desain aplikasi dibuka, pada halaman
pertama dari
kiri menjelaskan bahwa terdapat fitur untuk membuat target hafalan,
kemudian
57
halaman kedua dari kiri memberikan mengenai fitur gamifikasi yaitu
tantangan
hafalan dan halaman terakhir dari kiri menjelaskan fitur cek
setoran hafalan.
Navigasi next berfungsi sebagai perpindahan halaman dari setiap
onboarding.
3.7.5.3. Purwarupa Login dan Register
Untuk menggunakan aplikasi, user harus mendaftar terlebih dahulu ke
dalam
suatu sistem aplikasi. Hal ini bertujuan untuk mendapatkan sebuah
data ketika
desain tersebut di implementasikan oleh programmer. Secara umum,
register
digunakan ketika user belum pernah menggunakan aplikasi dan login
ketiga user
sudah mendaftar akun. Di samping itu, terdapat akun email untuk
memudahkan
user mendaftar aplikasi tanpa harus mendaftar mengisi form daftar.
Gambar 3.16
menunjukan halaman login dan register.
Gambar 3 16. Realisasi Desain Login dan Register
3.7.5.4. Purwarupa Gamifikasi
Desain aplikasi gamifikasi hafalan Al-Quran menggunakan
elemen-elemen
gamifikasi yang di realisasikan menggunkan Level, Badge,
Leaderboard,
Progres barr, dan Poin. Berikut penjabaran gamifikasi sebagai
berikut:
A. Level
Pada dasarnya, level digunakan untuk membuat penghafal akan
tertantang
menyelesaikan tantangan hafalan. Realisasi level menggunakan tiga
level dan
delapan tantangan seperti yang sudah dijelaskan sebelumnya pada sub
bab 3.3.1.
Gambar 3.17 desain purwarupa menampilkan system level pada
aplikasi:
Gambar 3 17. Desain system leveling tantangan hafalan
Dalam penerapannya, setiap level diberikan berbeda warna agar
terlihat
menarik dan diberikan judul disetiap kotak level. Kotak level di
desain
menggunkan icon Al-Quran agar tidak meninggalkan kesan dari ciri
khas Al-
Quran itu sendiri. Level 1 memiliki warna oranye, level 2 yaitu
warna ungu,
kemudian level 3 warna merah pink. Artinya setiap warna berfungsi
sebagai
tanda bahwa tantangan hafalan Quran dapat di akses.
59
Pada halaman paling kiri, user harus menyelesaikan tantangan kotak
secara
bertahap dari level 1 sampai level 3. Jika berwarna abu-abu dan
terdapat icon
kunci gembok artinya user tidak dapat mengaksesnya dan harus
menyelesaikan
level yang memiliki warna dari setiap penanda level. Terdapat
pop-up
penjelasan ketika user mencoba mengklik level yang terkunci.
B. Poin dan Leaderboard
Poin dan leaderboard memiliki elemen berhubungan dalam realisasi ke
dalam
bentuk desain aplikasi. Poin didapatkan ketika user telah melakukan
tantangan
hafalan yang disediakan sedangkan leaderboard merupakan susunan
peringkat
keaktifan user melakukan tantangan hafalan Quran. sehingga semakin
tinggi
poin maka leaderboard yang didapatkan akan semakin tinggi. Pada
gambar 3.18
merupakan desain Poin dan leaderboard.
Gambar 3 18. Realisasi Desain Poin dan Leaderboard
Pada desain poin menunjukan nominal angka dengan kategori
peringkat. Dari
kategori tersebut menujukan tiga peringkat terbaik jika user sangat
aktif dan
60
mendapatkan poin tertinggi. Di samping itu, dari desain ditampilkan
elemen
level, nama dan avatar agar setiap akun mudah dikenali. Sedangkan
dari desain
papan peringkat berwarna oranye menunjukan ketika user sudah
terdaftar di
aplikasi dan melakukan tantangan hafalan,
C. Progress Bar
Progress bar berfungsi sebagai tanda kepada user sejauh mana user
melakukan
akses tantangan hafalan Al-Quran. Dalam penerapan desain progress
bar hanya
digunakan dalam dua kondisi yaitu ketika user sedang melakukan
tantangan
hafalan maka elemen tersebut ditampilkan dan kedua jika user tidak
melakukan
akses tantangan hafalan maka progess bar tidak ditampilkan. Pada
gambar 3.19
merupakan desain tampilan dari progress bar.
Gambar 3 19. Progress Bar
61
D. Badge/Lencana dan Profile
bertujuan untuk memotivasi user dalam mencapai tujuan tertentu. Di
samping
itu, badge sebagai tanda bahwa user telah aktif melakukan tantangan
hafalan
Al-Quran. Elemen badge pada desain aplikasi gamifikasi hafalan
Al-Quran
ditampilkan pada fitur profil. Dalam penerapan badge pada desain,
user harus
menyelesaikan misi hafalan yang sudah disediakan sehingga badge
dapat
didapatkan. Contoh sebuah tujuan agar user mendapatkan sebuah badge
pada
level 1 dengan sebuah tantangan menyusun surat hafalan pendek. Jika
user
menyelesaikan badge dengan benar dan baik, maka badge akan mudah
di
dapatkan. Badge pada desain visual di rancang menarik perhatian
usernya,
berbentuk mirip icon fill dengan berbagai warna. Untuk lebih
jelasnya,
berikut reasliasi badge pada gambar 3.20 sebagai berikut:
Gambar 3 20. Realisasi Badge visual
62
3.7.5.5. Purwarupa Halaman Tantangan Hafalan
Pada halaman desain ini, user diberikan tantangan hafalan yang
disediakan
yaitu fokus pada juz 30. Tantangan hafalan yang diberikan berupa
variasi
tantangan yang disediakan. Sebagai contoh pada desain gambar 3.21
yaitu
memberikan tantangan hafalan berupa susun ayat surat Al-Falaq.
Ayat-ayat
tersebut diberikan acak dan user harus menjawab hafalan dengan
menyusun
dengan benar. Diberikan prinsip rekognisi berupa timer atau
waktu
diberikan, kemudian jika user menjawab dengan benar akan
menampilkan
angka pada icon warna hijau dan warna icon merah jika user
menjawab
salah ayat. Pada desain bagian paling kiri, user akan mendapatkan
kalkulasi
poin, waktu dari keseluruhan menjawab tantangan hafalan.
Tantangan
hafalan ini berguna untuk penghafal agar memperkuat hafalan dalam
aspek
murojaah(mengulang hafalan Quran).
63
3.7.5.6. Purwarupa Halaman Audio Murottal
Pada desain halaman audio murottal diberikan playlist nama-nama
surat juz
30 sesuai kebutuhan pada saat wawancara penghafal Al-Quran. Pada
desain
bagian kiri user dapat mendengarkan audio dan mengganti surat apa
yang
ingin dia dengarkan. Kemudian diberikan opportunities berupa surat
ayat-
ayat Al-Quran dalam bahasa arab. Sehingga kelebihan pada audio
murottal
user dapat mendengarkan audio murottal dan membaca ayat
Al-Quran.
Tetapi tidak mengurangi fleksibiltas dari user itu sendiri yaitu
dengan hanya
mendengarkan audio murottal. Gambar 3.22 realisasi desain audio
murottal:
Gambar 3 22. Realisasi Purwarupa Audio Murottal
3.7.5.7. Purwarupa Halaman Aktifitas Hafalan
Pada desain halaman aktifitas hafalan, berfungsi sebagai realisasi
dari
prinsip rekognisi dari pada mengingat. Kegiatan seluruh user akan
tampil
pada halaman aktifitas. Pada desain bagian kanan diberikan ilustasi
dan teks
jika keadaan user belum melakukan aktifitas pada desain aplikasi
dan pada
desain bagian kiri berupa aktifitas yang terekam ketika user
sudah
menggunakan aplikasi. Pada Gambar 3.23 adalah realisasi
purwarupa
aktifitas hafalan
Gambar 3 23. Realisasi Purwarupa Aktifitas Hafalan
3.7.5.8. Purwarupa Halaman Cek Rekam Hafalan
Pada desain halaman rekaman hafalan beguna sebagai penghafal
Al-Quran
untuk merekam apa yang dia hafal. Hal ini untuk menjawab kebutuhan
pada
wawancara dengan penghafal bahwa menghafal dengan suara sendiri
dalam
membantu untuk mendengarkan hafalan sebelum disetorkan kepada
ustadz
tahfidz Quran. Pada saat penerapanya, user tinggal memilih surat
yang ia
rekam. Pada gambar 3.24 merupakan realisasi dari desaim rekam
hafalan.
65
Gambar 3 24. Realisasi Purwarupa Rekam Hafalan
3.7.5.9. Purwarupa Halaman Time Quran
Pada desain halaman time Quran berguna untuk media pengingat
pada
aplikasi gamifikasi hafalan Al-Quran. Hal ini membantu penghafal
agar
kembali lagi pada aplikas dengan menyelesaikan tantangan hafalan
yang
telah disediakan. Pada desain bagian kanan, kondisi dimana saat
pertama
kali user membuka fitur Time Quran. diberikan ilustrasi agar
menarik pada
saat desain tersebut. Kemudian user melakukan pengaturan tanggal,
jam
dan menulis apa yang akan dilakuka pada aplikasi. Dan pada desain
bagian
kri kondisi dimana user sudan mengatur waktu sebagai media
pengingat.
Pada gambar 3.25 merupakan realisasi purwarupa Time Quran.
Gambar 3 25. Realisasi Purwarupa Time Quran
66
Al-Quran dilakukan setelah proses perancangan antarmuka keseluruhan
selesai.
Tahap pengujian berdasarkan metode design thinking yaitu testing.
Dalam
penerapan pengujian dilakukan dengan usability testing bersifat
kuantitatif
bertujuan mengukur seberapa mudah penilaian efektifitas dan
efesiensi desain
antarmuka yang digunakan dari tingkat penyelesain, durasi dan
kuesioner system
usability scale merupakan sebuah kuesioner untuk penilaian kepuasan
desain
antarmuka.
Desain antarmuka dan pengalaman penguna aplikasi gamifikasi
Al-Quran dalam
pengujiannya di lakukan dengan dua tahap yaitu alpha testing dan
usability testing.
Pengujian alpha testing dilakukan oleh perancang antarmuka sendiri
agar terhindar
dari sesuatu yang tidak diinginkan sedangkan usability testing
dilakukan oleh
pengguna sesungguhnya yang akan menggunakan aplikasi. Usability
testing
merupakan cara untuk mengetahui apakah pengguna mudah menggunakan
desain
antarmuka dan seberapa efektif dan efisensi sebuah desain dapat
membantu
pengguna dalam mencapai tujuannya. Setelah dilakukan usability
testing diberikan
penilian kuesioner system usability scale kepada pengguna UT.
67
4.3 Prosedur Pengujian
Pada bagian ini menjelaskan beberapa tahapan prosedur alpha testing
dan usability
testing sebagai berikut:
Pengujian alpha testing dilakukan terhadap desain antarmuka
menggunakan
prinsip 10 Usability Heuristic for User Interface Design dengan
menerapkan
prinsip agar kegunaan antarmuka sesuai tujuan yang dicapai. Apakah
pengujian
antarmuka menggunakan prinsip 10 Usability Heuristic for User
Interface Design
sudah sesuai. Pengujian dilakukan dengan mengamati keseluruhan
desain
antarmuka sebagai berikut:
Prinsip dengan menegetahui kondisi apa yang terjadi dalam system
sehingga
memberikan informasi yang terjadi pengguna apa sedang dilakukan dan
apa
yang terjadi.
Prinsip untuk memberikan informasi yang mudah dipahami dan
familiar.
Penerapanya pada sebuah informasi teks dengan bahasa
sehari-hari.
3. Kontrol dan kebebasan pengguna
Prinsip untuk memberikan kebebasan kepada pengguna dalam
menggunakan
antarmuka. Seperti contoh tombol kembali, perpindahan
halaman.
4. Konsistensi dan standar.
antarmuka seperti penggunaan icon, ilustrasi dan tombol yang dapat
mudah
dikenali.
68
Penerapannya dengan membuat pola desain yang mudah dalam setiap
langkah
pada desain antarmuka
Prinsip ini berguna ketika diterapkan kepada pengguna yang baru
maupun
tingkat lanjut usia. Caranya dengan menerapkan elemen antarmuka
dalam
perpidanhan halaman
7. Pencegah kesalahan
Jika eror dalam sebuah system atau terjadi bug maka sebuah desain
sangat
membantu pengguna. Sebagai contoh meampilkan eror dalam sebuah
pesan.
8. Estestika dan desain minimalis
Prinsip dalam menerapkan desain yang rapih, tidak membingungkan.
Sebagai
contoh penggunaan warna dalam sebuah antarmuka yang nyaman di
pandang.
9. Membantu pengguna untuk mengenali, mendiagnosa, dan memulihkan
dari
eror
Prinsip untuk memberikan panduan jika terjadi eror pada aplikasi.
sebagai
contoh, jika pengguna tidak terkoneksi internet maka pengguna
diberikan
petunjuk untuk menyalakan internetnya.
10. Bantuan dan dokumentasi.
kegiatannya dalam sebuah system sehingga tujuan pengguna dapa
tercapai
4.3.2 Prosedur Pengujian Usability Testing
Pengujian desain antarmuka aplikasi dengan usability testing
dilakukan dengan tiga
tahap yaitu menentukan kriteria pengguna yang akan menjadi
responden, kemudian
memberikan sebuah scenario dan tugas yang telah disediakan. Setelah
itu pengguna
diberikan kuesioner system usability scale untuk mengisi penilaian
kepuasan
terhadap desain antarmuka.
Kriteria pengguna yang akan menjadi responden adalah sebagai
berikut:
1. Pria dan wanita islam berumur 13-42 tahun
2. Familiar dengan smartphone
Setelah menentukan kriteria responden, didefinisikan sekumpulan
scenario dan
tugas berdasarkan kebutuhan pada desain antarmuka aplikasi
gamifikasi hafalan
Al-Quran yang telah dirancang. Pada Tabel 4.1 skenario dan tugas
untuk
digunakan pada pengujian desain antarmuka.
Tabel 4 1 Skenario dan Tugas Pengujian UT
No Tugas Skenario
desain onboarding aplikasi.
“Kamu akan mengikuti tantangan hafalan
Quran” tolong ikuti tantangan hafalan
yang tersedia dan selesaikan hafalan”
3 Mencari dan menemukan
4 Menemukan dan mendengarkan
audio murottal Surat At-Tin.
mendengarkan audio murrotal”
kamu yaitu surat Al-Buruj
tolong pengguna temukan nama surat Al-
Buruj menggunakan kemudian cek dan
rekam hafalan kamu”
6
pengingat menghafal Al-Quran, tolong
tersebut”
”
poin, badge yang sudah di kumpulkan,
tolong temukan halaman tersebut”.
yang akan dilakukan pengujian kepada pengguna. Tugas dan scenario
tersebut
bersifat spesifik agar cenderung lebih fokus.
Pada pelaksanaan pengujian usability testing dilakukan secara
daring dengan
menggunakan aplikasi maze design untuk desain antarmuka yang telah
dibuat
kemudian menggunakan google form untuk kuesioner SUS. Pada
penerapannya
responden mencoba desain antarmuka dengan tugas dan scenario yang
telah
disediakan, kemudian mengisi kuesioner SUS (system usability
scale). Berikut alur
pengujian usability testing pada gambar 4.1
Gambar 4 1. Alur pengujian usability testing
71
4.4 Data Hasil Pengujian Alpha Testing
Hasil alpha testing dapat dilihat pada tabel 4.2 sebagi pengujian
desain antarmuka
menggunakan prinsip Ten Usability Heuristic for user interface
design.
Tabel 4 2 Hasil. Alpha testing dengan 10 Usability Heuristic
Prinsip 10
Konsistensi dan
Bantu pengguna
Pengujian alpha testing berdasarkan prinsip Ten Usability Heuristic
for User
Interface Design menunjukan dari 10 prinsip menyatakan 9 prinsip
hasilnya valid.
Delapan prinsip tersebut menggambarkan kegunaan dari keseluruhan
desain
antarmuka aplikasi gamifikasi hafalan Quran. Sedangkan satu prinsip
tersebut
hasilnya tidak valid dikarenakan kegunaan prinsip tersebut tidak
realisasikan dalam
desain antatmuka. Prinsip-prinsip yang direalisasikan dapat memandu
pengguna
dalam menggunakan sebuah desain antarmuka, sehingga kegunaan desain
dapat
mudah untuk digunakan.
Pelaksanaan Usability Testing secara daring disebarkan ke beberapa
grup media
sosial dimulai 29 Juni – 4 Juli 2020 yang merupakan responden
dengan kriteria
yang telah disebutkan pada sub bab 4.3.2 dan berdasarkan persona
yang telah di
tentukan. Kemudian diperoleh sebanyak 25 responden dengan bantuan
aplikasi
maze design dengan dua link berbeda yaitu: https://bit.ly/Desain01
dan
https://bit.ly/Desain02 secara otomatis akan menampilkan tugas dan
skenario dan
desain antarmuka berupa purwarupa yang sudah disediakan. Hasil skor
UT pada
aplikasi maze design diperoleh pada tabel 4.3 sebagai
berikut.
Tabel 4 3 Skor Usability pada maze design
Design Antarmuka
Design Protoype 1 T-1 sampai T-4 68
Design Protoype 2 T-6 sampai T-8 59
Berdasarkan kriteria Maze Design, skor diatas masuk dalam level
medium atau
pertengahan artinya usability desain antarmuka cukup baik. Kriteria
tersebut
didasarkan peniliaian tingkat keberhasilan, kegagalan, durasi dan
kesalahan klik
pada 25 responden dalam tugas UT. Selain itu,skor usability
diperoleh dari tiga
metrik. Pertama setiap halaman desain antarmuka, tugas dan scenario
yang
diberikan dan ketiga rata-rata yang dikalkulasikan dari aplikasi
Maze tersebut..
Kemudian untuk mengukur penilaian keberhasilan usability testing
pada penelitian
ini menggunakan aplikasi maze design berdasarkan tiga aspek
penilaian yaitu
completion rate dengan mengetahui tingkat penyelesaian responden,
kemudian
duration untuk mengetahui waktu tempuh tugas dan scenario yang
diselesaikan
oleh responden, dan satisfaction atau kepuasan responden terhadap
desain
antarmuka menggunakan kuesioner SUS.
4.5.1 Data Hasil Pengujian Usability Testing Aspek Completion
Rate
Hasil pengujian completion rate dinilai dari tingkat penyelesaian
berdasarkan tugas
dan scenario yang diberikan kepada responden. Untuk lebih jelasnya,
pada tabel
4.4 pemetaan tingkat penyelesaian UT sebagai berikut:
75
Tabel 4 4. Pemetaan tingkat penyelesain UT
Kode Tingkat
secara berhasil
G Gagal/Menyerah Tidak menyelesaikan tugas atau menyerah
Pada tabel 4.5 merupakan data hasil tingkat penyelesain responden
terhadap tugas
dan scenario secara keseluruhan sebagai berikut:
Tabel 4 5. Data hasil pengujian aspek tingkat penyelesain
keseluruhan
Tugas Tingkat Penyelesaian Keseluruhan
76
4.5.1.1 Analisis Data Hasil Usability Testing Aspek Completion
Rate
Data hasil pengujian tingkat penyelesaian tugas berdasarkan
rata-rata keberhasilan
dan kegagalan responden yang dikerjakan sebanyak 8 (delapan) tugas
dan skenario
yang diberikan. Rata-rata persentase keberhasilan dari keseluruhan
tugas paling
kecil 80 persen sampai paling besar 100 persen sedangkan kegagalan
responden
dalam menyelesaikan tugas rata-rata rentang paling kecil 4 persen
sampai 20 persen.
Untuk mengukur penilaian baik atau buruk dari usability desain
antarmuka terhadap
aspek completion rate ditunjukan pada nilai keberhasilannya. Pada
tabel 4.6 Rata-
rata tingkat penyelesaian.
Tabel 4 6. Data hasil pengujian aspek keberhasilan tingkat
penyelesaian
Persentase Jumlah
Berdasarkan kriteria Sauro, rata-rata aspek completion rate adalah
78 persen
merupakan ambang batas baik sampai buruknya tingkat penyelesaian.
Sehingga
tugas keberhasilan pada desain antarmuka aplikasi gamifikasi
hafalan Al-Quran
yang dilakukan oleh 25 responden diperoleh 90,5 % keberhasilan
efektif dalam
tingkat penyelesaian sehingga menyatakan sudah baik dari setiap 8
alur desain
antarmuka oleh responden yang dilakukan pengujian walaupun beberapa
responden
ada yang memiliki kegagalan dalam setiap tugas yang diberikan. Pada
gambar 4.1
merupakan peringkat persentil kriteria sauro sebagai berikut:
Sumber: measuringu.com
4.5.2 Data Hasil Pengujian Usability Testing Aspek Duration
Pengujian UT aspek duration untuk mengetahui waktu yang ditempuh
per-detik
oleh responden berjumlah 25 responden dalam melakukan 8 tugas yang
diberikan.
Pada aspek duration sangat berkaitan dengan tingkat penyelesaian
responden setiap
screen desain dan tugas yang dikerjakan. Pada pengujian UT ini
diambil durasi
desain antarmuka hafalan Quran berdasarkan dari setiap waktu tugas
yang
dikerjakan menggunakan maze design. Tabel 4.5 menunjukan durasi
waktu
keseluruhan responden sebagai berikut:
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri
Jakarta
Tabel 4 7. Data Hasil Durasi Keseluruhan Responden dalam setiap
Tugas
R
T
R-1(d) 6,7 26,1 48,4 25,5 50,6 39,5 5,4 50,9
R-2(d) 20,1 73,2 786,2 16,9 7,4 65,4 5 12,4
R-3(d) 19,6 50,2 58,9 13,4 112,5 58,5 14,9 131
R-4(d) 21 67,7 66,2 18,1 23,1 30,7 8,5 44
R-5(d) 169,9 165,7 79,2 38,2 17,5 49,3 14,8 39,6
R-6(d) 43,9 250,3 279,9 25,7 32,8 36,8 4,4 23,9
R-7(d) 24,6 60,1 81,6 23,5 16,3 195,9 8,1 38,1
R-8(d) 234,2 2893,4 818,2 41,2 77,9 28,7 7,8 29,7
R-9(d) 14,5 51,4 108,2 66,6 26,3 93,5 12,4 21,9
R-10(d) 26,1 91,9 53,1 17 45,6 96,4 15 164,4
R-11(d) 17,8 46,9 54,4 18,4 28,1 43 4,3 17,9
R-12(d) 29,2 77,8 94,6 59,7 97,8 176,6 11,5 35,9
R-13(d) 25,4 95 42,2 20,4 53,2 34,7 6,1 31,5
R-14(d) 23,8 52,9 54,2 9,1 85,6 52,2 45,5 51,9
R-15(d) 0 0 315,6 44,4 4,7 13,6 6,5 5,1
R-16(d) 50,7 59,4 120,5 50,6 46,6 89,7 15,8 230,5
R-17(d) 27,5 68,7 79,8 15,8 9,2 51,8 4,5 22,9
R-18(d) 5,9 53,8 54,4 11,8 61,5 42,4 8 19,2
R-19(d) 16 106,6 99,5 22,2 7,7 24,2 16,6 20,9
R-20(d) 0 61,7 103,6 13,9 14,5 42,4 16,7 13,3
R-21(d) 18,2 30,6 49,3 14,4 128,1 1568,4 15 40,7
R-22(d) 0 137,8 56 27,4 22,9 51,7 8 19,4
R-23(d) 10,7 61,2 42,4 64,6 40,7 108,7 6,7 4,8
R-24(d) 118,6 86,6 115,9 56,8 730,2 290,3 32,9 13,5
R-25(d) 30,7 63,6 61,3 45,8 25 47,3 9,9 122
79
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri
Jakarta
4.5.2.1 Analisis Data Hasil Usability Testing Aspek Duration
Berdasarkan hasil UT dalam aspek duration waktu yang ditempuh per
detik
diperoleh rata-rata masing tugas dari 8 tugas kepada 25 responden
yang terekam
menggunakan aplikasi maze design. Dalam hasil tersebut terdapat
penemuan bahwa
tingkat penyelesain atau completion rate berkaitan terhadap durasi
sehingga data
dari aplikasi maze design terbagi menjadi tiga kriteria responden
terhadap tugas
yang diberikan.
Pertama, pada angka warna hitam tingkat keberhasilan dalam kategori
kesuksesan
secara langsung. Artinya adalah responden menyelesaikan misi tugas
melalui alur
desain antarmuka dengan benar. Kedua, pada angka warna biru tingkat
keberhasilan
dalam kategori secara tidak langsung merupakan responden yang
menyelesaikan
misi tugas tidak melalui alur desain antarmuka yang diharapkan
tetapi sampai
menemukan keberhasilan terhadap tujuan alur desain. Ketiga, pada
angka merah
tingkat kegagalan responden yang gagal atau menyerah artinya
responden tidak
melanjutkan atau kebingungan dari alur desain antarmuka terhadap
tugas yang
diberikan.
Data durasi waktu tempuh terhadap ketiga kriteria responden
ditemukan bahwa
tingkat keberhasilan secara langsung waktunya lebih cepat dalam
menjalankan 8
tugas dengan durasi waktu. Kemudian tingkat keberhasilan tidak
langsung waktu
yang ditempuh lebih lama terhadap 8 tugas dengan proses alur desain
antarmuka
tetapi berhasil ditunjukan dengan angka warna biru.
Sedangkan pada tingkat kegagalan atau menyerah terlihat pada tabel
4.8
menunjukan sebagai berikut:
Tabel 4 8. Tabel Durasi Tingkat Kegagalan pada Tugas UT
T-1 T-2 T-3 T-4 T-5 T-6 T-7 T-8
R-2 65,4
R-4 23,1
R-5 79,2
Berdasarkan hasil diatas, penemuan faktor kegagalan karena dari
waktu tempuh
lebih lama dan uniknya ada responden dengan waktu tempuh 0 detik
pada T-1
masuk ke halaman desain onboarding kemudian T-2 mengerjakan
tantangan hafalan
Quran untuk mendapatkan poin sehingga dapat diartikan responden
tidak mengerti
alur desain antarmuka dan dan mengabaikan intruksi tugas yang
diberikan.
4.6 Data Hasil Kuesioner System Usability Scale
Penilaian kuesioner SUS dilakukan setelah pengujian usability
testing. Responden
SUS merupakan responden yang sama dengan responden UT sehingga
hasil
penilaian kuesioner SUS diperoleh sebanyak 25 responden. Hal ini
bertujuan agar
nilai SUS dapat dihubungkan dengan hasil UT sebelumnya. Kuesioner
SUS
bertujuan untuk mendapatkan kepuasan terhadap desain antarmuka.
Pada tabel 4.9
berikut hasil data SUS dari responden beserta rata-rata nilai yang
diperoleh
81
Tabel 4 9. Nilai SUS
Responden Umur Nilai SUS
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri
Jakarta
4.6.1 Analisis Data Hasil Kuesioner System Usability Scale
Berdasarkan aspek kepuasan yang telah dilakukan, diperoleh nilai
SUS dengan skor
88. Menurut kriteria Sauro, desain antarmuka dapat dikategorikan
sebagai desain
yang dapat diterima atau acceptability dengan skala ranking/grade
scale yaitu B,
kemudian pada adjective ratings masuk ke dalam golongan
Excellent.
Berdasarkan penemuan pada kuesioner SUS, latarbelakang dan factor
responden
sangat mempengaruhi besar dan kecil nilai SUS yang didapat. Hal
tersebut
berdasarkan responden yang memiliki nilai terkecil yaitu rentang
40-50 disebabkan