DESAIN ANTARMUKA DAN PENGALAMAN PENGGUNA APLIKASI ...

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 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
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:
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
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
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

DESAIN ANTARMUKA DAN PENGALAMAN PENGGUNA APLIKASI ...

Documents

Transcript of DESAIN ANTARMUKA DAN PENGALAMAN PENGGUNA APLIKASI ...