commit 7701af62139ce237c631f6276ba22955508d3392 Author: EndieningNur Date: Fri Jul 11 20:23:49 2025 +0700 Upload files to "Laporan TA atau Skripsi" diff --git a/Laporan TA atau Skripsi/Design TA (Event App).fig b/Laporan TA atau Skripsi/Design TA (Event App).fig new file mode 100644 index 0000000..fe603d2 Binary files /dev/null and b/Laporan TA atau Skripsi/Design TA (Event App).fig differ diff --git a/Laporan TA atau Skripsi/Laporan Skripsi_E41211493_Endiening Nur.pdf b/Laporan TA atau Skripsi/Laporan Skripsi_E41211493_Endiening Nur.pdf new file mode 100644 index 0000000..a43e6e2 --- /dev/null +++ b/Laporan TA atau Skripsi/Laporan Skripsi_E41211493_Endiening Nur.pdf @@ -0,0 +1,3370 @@ +PENGGUNAAN METODE USER CENTERED DESIGN (UCD) + TERHADAP RANCANGAN UI/UX SISTEM PEMESANAN + TIKET EVENT BERBASIS MOBILE + HALAMAN SAMPUL + SKRIPSI + + oleh + Endiening Nur Puspitasari + + NIM E41211493 + + PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2025 + PENGGUNAAN METODE USER CENTERED DESIGN (UCD) + TERHADAP RANCANGAN UI/UX SISTEM PEMESANAN + TIKET EVENT BERBASIS MOBILE + + HALAMAN JUDUL + + SKRIPSI + + Sebagai salah satu syarat untuk memperoleh gelar Sarjana Sains Terapan + Komputer (S. Tr. Kom) Program Studi Di Luar Kampus Utama (PSDKU) + + Teknik Informatika Kab. Nganjuk + Jurusan Teknologi Informasi + + oleh + + Endiening Nur Puspitasari + NIM E41211493 + + PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2025 + + ii + MOTTO + + “Sesungguhnya kami adalah milih Allah, dan sesungguhnya kepada-Nya kami + akan kembali.” + + (QS. Al-Baqarah: 156) + “Jika kamu bersyukur, maka Aku akan menambah nikmat kepadamu.” + + (QS. Ibrahim: 7) + “Awal biasanya menakutkan dan akhir biasanya menyedihkan, tetapi segala + + sesuatu di antaranya yang membuat semuanya layak untuk dijalani.” + (Bob Marley) + +“Teruslah belajar meskipun kamu sedang terluka, biarkan langkahmu membawa + dirimu padda kebahagiaan dan mengakhiri sedihmu.” + (Ustadz Hanan Attaki) + + vi + PERSEMBAHAN + + Penyelesaian skripsi ini tidak lepas dari keterlibatan dukungan, doa, serta +bantuan baik moril maupun materil dari berbagai pihak. Sehingga penulis +mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang +terlibat. Skripsi ini saya persembahkan kepada: +1. Allah SWT. yang telah melimpahkan rahmat, taufik serta kelancaran dalam + + setiap langkah yang saya tempuh. +2. Kedua orang tua saya (Ibu Anis dan Bapak Hari), kakak kandung, saudara, + + dan keluarga besar yang selalu memberikan kasih sayang, doa, dan + dukungan. +3. Ibu Intan Sulistyaningrum Sakkinah S.Pd., M.Eng., selaku dosen + pembimbing saya. Terima kasih atas kesabaran, waktu, ilmu, pengarahan, + dan motivasi yang telah diberikan selama penulisan dan penyusunan skripsi + ini. Saya mengucapkan mohon maaf atas segala perbuatan maupun ucapan + yang mungkin kurang berkenan selama proses bimbingan. +4. Teman – teman terdekat saya (Erlyna dan Enggar) yang selalu membantu, + menemani, dan dukungan dalam penyusunan skripsi. Serta teman – teman + saya lainnya (Nila, Rosyida, Filza, Akhdan, dan Ansori) yang menjadi + sebagian teman baik saya dari kampus. +5. Semua teman – teman saya baik dari kampus, teman MSIB, maupun teman + sekolah yang telah membantu dan memberikan dukungan. +6. Diri saya sendiri yang telah berjuang, bertahan, dan tidak menyerah. Terima + kasih telah terus melangkah hingga titik ini. + + vii + Penggunaan Metode User Centered Design (UCD) terhadap Rancangan + UI/UX Sistem Pemesanan Tiket Event Berbasis Mobile + + Dibimbing oleh Intan Sulistyaningrum Sakkinah, S.Pd., M.Eng. + + Endiening Nur Puspitasari + Program Studi Teknik Informatika + + Jurusan Teknologi Informasi + + ABSTRAK + +Industri event di Indonesia khususnya konser musik, mengalami pertumbuhan +pesat, namun sistem pemesanan tiket event masih menghadapi berbagai kendala, +seperti proses yang rumit, metode pembayaran terbatas, dan minimnya fitur +pendukung yang belum adanya pengingat acara. Penelitian ini merancang UI/UX +aplikasi pemesanan tiket event berbasis mobile dengan pendekatan User Centered +Design (UCD) agar sesuai dengan kebutuhan pengguna. Evaluasi pengujian +kegunaan dilakukan menggunakan System Usability Scale (SUS) secara +kuantitatif, dengan menyebarkan kuesioner kepada 100 responden. Hasil +menunjukkan peningkatan skor SUS dari 63,5 menjadi 76 setelah iterasi desain, +serta perbaikan pada Adjective Rating, Grade Scale, dan Acceptability Range. +Penggunaan metode UCD dalam penelitian dan SUS dalam evaluasi sistem +terbukti efektif dalam meningkatkan kegunaan aplikasi. + +Kata kunci: Aplikasi Mobile, Pemesanan Tiket Event, System Usability Scale +(SUS), UI/UX, User Centered Design (UCD) + + viii + The Application of User-Centered Design (UCD) Method in the UI/UX Design + of a Mobile-Based Event Ticket Booking System + + Supervised by Intan Sulistyaningrum Sakkinah, S.Pd., M.Eng. + + Endiening Nur Puspitasari + Study Program of Informatic Engineering + + Majoring of Information Technology + + ABSTRACT + +The event industry in Indonesia, particularly music concerts, has experienced +rapid growth. However, ticket booking systems still face various challenges, such +as complicated processes, limited payment methods, and a lack of supporting +features like event reminders. This study aims to design the UI/UX of a mobile- +based event ticket booking application using the User Centered Design (UCD) +approach to align with user needs. Usability evaluation was conducted +quantitatively using the System Usability Scale (SUS) by distributing +questionnaires to 100 respondents. The results showed an increase in SUS score +from 63.5 to 76 after design iterations, along with improvements in the Adjective +Rating, Grade Scale, and Acceptability Range. The use of the UCD method in the +design process and SUS in the evaluation proved effective in enhancing the +application's usability. + +Key words: Event Ticket Booking, Mobile Application, System Usability Scale +(SUS), UI/UX, User Centered Design (UCD) + + ix + RINGKASAN + +Penggunaan Metode User Centered Design (UCD) terhadap Rancangan +UI/UX Sistem Pemesanan Tiket Event Berbasis Mobile, Endiening Nur +Puspitasari, NIM E41211493, Tahun 2025, 134 hlm., Teknik Informatika, +Politeknik Negeri Jember, Intan Sulistyaningrum Sakkinah, S.Pd., M.Eng. (Dosen +Pembimbing). + + Perkembangan industri event di Indonesia mengalami pertumbuhan pesat, +ditandai dengan meningkatnya antusiasme masyarakat terhadap berbagai jenis +acara, khususnya konser musik. Namun, sistem pemesanan tiket event yang ada +saat ini masih memiliki berbagai kekurangan, seperti kesulitan dalam proses +pemesanan, metode pembayaran yang terbatas, serta minimnya fitur yang +mendukung pengalaman pengguna, seperti pengingat acara. Selain itu, pemesanan +tiket umumnya masih dilakukan melalui situs web, sedangkan penggunaan +aplikasi mobile masih belum optimal. + + Penelitian ini bertujuan untuk merancang antarmuka pengguna (UI) dan +pengalaman pengguna (UX) sistem pemesanan tiket event berbasis aplikasi +mobile dengan menerapkan metode User Centered Design (UCD). Pendekatan ini +digunakan agar desain aplikasi dapat disesuaikan dengan kebutuhan dan +preferensi pengguna. Evaluasi dilakukan menggunakan metode System Usability +Scale (SUS) untuk mengukur tingkat kegunaan aplikasi secara kuantitatif. + + Hasil penelitian menunjukkan bahwa penerapan metode UCD mampu +meningkatkan kualitas desain antarmuka aplikasi. Hal ini terlihat dari peningkatan +skor SUS dari 63,5 pada pengujian pertama menjadi 76 setelah iterasi desain +dilakukan. Perubahan tersebut juga berdampak pada peningkatan kategori dalam +Adjective Rating, Grade Scale, dan Acceptability Range. Demikian, metode SUS +terbukti efektif sebagai alat ukur objektif untuk menilai tingkat kegunaan aplikasi. + + x + PRAKATA + + Puji syukur penulis panjatkan ke hadirat Allah Swt. atas berkat rahmat dan +karunia-Nya sehingga penulisan skripsi yang berjudul “Penggunaan Metode User +Centered Design (UCD) terhadap Rancangan UI/UX Sistem Pemesanan Tiket +Event Berbasis Mobile” dapat diselesaikan dengan baik. + + Tulisan ini adalah laporan dari hasil penelitian yang dilaksanakan mulai +bulan Februari 2025 hingga Mei 2025 bertempat di Politeknik Negeri Jember – +PSDKU Nganjuk, sebagai salah satu syarat untuk memperoleh gelar Sarjana Sains +Terapan (S.Tr.Kom) di Program Studi Teknik Informatika Jurusan Teknologi +Informasi. + + Penulis menyampaikan penghargaan dan ucapan terima kasih yang sebesar- +besarnya kepada: +1. Bapak Syaiful Anwar, S.Tp. M.P., selaku Direktur Politeknik Negeri Jember. +2. Bapak Hendra Yufit Riskiawan, S.Kom. M.Cs., selaku Ketua Jurusan + + Teknologi Informasi. +3. Ibu Ulfa Emi Rahmawati, S.Kom, M.Kom., selaku Ketua Program Studi + + Teknik Informatika Kampus 3 Kabupaten Nganjuk. +4. Ibu Intan Sulistyaningrum Sakkinah, S.Pd., M.Eng., selaku Dosen + + Pembimbing. +5. Ibu Ulfa Emi Rahmawati, S.Kom., M.Kom. dan Ibu Puji Hastuti, S.T., + + M.Eng., selaku Dosen Penguji. +6. Rekan-rekan dan semua pihak yang telah membantu dalam penelitian dan + + penulisan laporan ini. + Laporan Skripsi ini masih jauh dari kata sempurna, sehingga penulis + +mengharapkan kritik dan saran yang bersifat membangun guna perbaikan di masa +mendatang. Semoga tulisan ini bermanfaat. + + Nganjuk, 13 Juni 2025 + + Endiening Nur Puspitasari + xi + DAFTAR ISI + + Halaman +HALAMAN SAMPUL .................................................................................................i +HALAMAN JUDUL................................................................................................... ii +HALAMAN PENGESAHAN ................................................................................... iii +SURAT PERNYATAAN .......................................................................................... iv +SURAT PERNYATAAN PUBLIKASI .....................................................................v +MOTTO ...................................................................................................................... vi +PERSEMBAHAN ..................................................................................................... vii +ABSTRAK................................................................................................................ viii +ABSTRACT.................................................................................................................. ix +RINGKASAN ...............................................................................................................x +PRAKATA.................................................................................................................. xi +DAFTAR ISI ............................................................................................................. xii +DAFTAR GAMBAR .................................................................................................xv +DAFTAR TABEL ................................................................................................... xvii +DAFTAR LAMPIRAN.......................................................................................... xviii +BAB 1. PENDAHULUAN ..........................................................................................1 + + 1.1 Latar Belakang ...............................................................................................1 + 1.2 Rumusan Masalah..........................................................................................4 + 1.3 Tujuan.............................................................................................................4 + 1.4 Manfaat...........................................................................................................4 + + 1.4.1 Bagi Peneliti .........................................................................................4 + 1.4.2 Bagi Politeknik Negeri Jember ...........................................................5 + 1.4.3 Bagi Pengguna (End User)..................................................................5 + 1.5 Batasan Masalah ............................................................................................5 +BAB 2. TINJAUAN PUSTAKA.................................................................................6 + 2.1 State of the art................................................................................................6 + 2.2 Event .............................................................................................................11 + 2.3 Sistem Informasi Pemesanan Tiket ............................................................11 + + xii + 2.4 Aplikasi Mobile ...........................................................................................12 + 2.5 User Interface (UI) ......................................................................................13 + 2.6 User Experience (UX).................................................................................13 + 2.7 User Centered Design (UCD).....................................................................14 + 2.8 Usability Testing ..........................................................................................16 + 2.9 System Usability Scale (SUS) .....................................................................16 + 2.10 Populasi dan Sampel ...................................................................................18 + 2.11 Userflow .......................................................................................................19 + 2.12 Wireframe (Lo-fi & Hi-fi)...........................................................................20 + 2.13 Figma............................................................................................................20 + 2.14 Prototype ......................................................................................................21 +BAB 3. METODE PENELITIAN.............................................................................23 + 3.1 Waktu dan Tempat.......................................................................................23 + 3.2 Alat dan Bahan.............................................................................................23 + + 3.2.1 Alat .....................................................................................................23 + 3.2.2 Bahan..................................................................................................23 + 3.3 Metode Penelitian ........................................................................................24 + 3.4 Tahapan Penelitian ......................................................................................24 + 3.4.1 Identifikasi Masalah ..........................................................................25 + 3.4.2 Pengumpulan Data.............................................................................25 + 3.4.3 Analisis Konteks Pengguna (Understand Context of Us) ...............26 + 3.4.4 Analisis Kebutuhan Pengguna (Specify User Requirement)...........26 + 3.4.5 Perancangan Desain Interface (Design Solution)............................27 + 3.4.6 Evaluate Against Requirements ........................................................27 + 3.4.7 Evaluasi Hasil ....................................................................................28 + 3.5 Pelaksanaan Penelitian ................................................................................28 +BAB 4. HASIL DAN PEMBAHASAN ...................................................................30 + 4.2 Analisis Kebutuhan Pengguna (Specify User Requirement).....................32 + 4.2.1 Kebutuhan Pengguna.........................................................................32 + 4.2.2 Konteks Skenario...............................................................................33 + + xiii + 4.3 Perancangan Desain Interface dan Implementasi (Produce Design + Solution) .......................................................................................................36 + 4.3.1 Userflow .............................................................................................36 + 4.3.2 Wireframe...........................................................................................56 + + 4.4 Design Prototype 1 ......................................................................................67 + 4.4.1 Halaman Log In .................................................................................68 + 4.4.2 Halaman Sign Up...............................................................................69 + 4.4.3 Menu Home........................................................................................70 + 4.4.4 Menu Tickets ......................................................................................71 + 4.4.5 Menu Saved........................................................................................74 + 4.4.6 Menu Profile ......................................................................................75 + 4.4.7 Halaman Detail Event........................................................................77 + 4.4.8 Halaman Checkout.............................................................................78 + 4.4.9 Fitur Join Antrean ..............................................................................79 + + 4.5 Evaluate Against Requirements 1...............................................................81 + 4.5.1 Hasil Analisis Umpan Balik ..............................................................83 + 4.5.2 Hasil Kuesioner SUS .........................................................................83 + + 4.6 Design Prototype 2 ......................................................................................86 + 4.7 Evaluate Against Requirements 2...............................................................90 + + 4.7.1 Hasil Analisis Umpan Balik ..............................................................90 + 4.7.2 Hasil Kuesioner SUS .........................................................................91 + 4.8 Evaluasi Hasil ..............................................................................................93 +BAB 5. KESIMPULAN DAN SARAN ...................................................................96 + 5.1 Kesimpulan ..................................................................................................96 + 5.2 Saran .............................................................................................................96 +DAFTAR PUSTAKA ................................................................................................97 +LAMPIRAN ............................................................................................................ 103 + + xiv + DAFTAR GAMBAR + + Halaman +Gambar 2.1 Tahapan User Centered Design (Interaction Design, 2023).............. 15 +Gambar 2.2 SUS Score (Brooke, 2020)................................................................... 18 +Gambar 3.1 Tahapan Penelitian ............................................................................... 24 +Gambar 4.1 Userflow Log In .................................................................................... 37 +Gambar 4.2 Userflow Sign Up.................................................................................. 38 +Gambar 4.3 Userflow Forgot Password .................................................................. 39 +Gambar 4.4 Userflow Book Event ............................................................................ 41 +Gambar 4.5 Userflow Join Queue ............................................................................ 43 +Gambar 4.6 Userflow Fitur Pencarian Event ........................................................... 44 +Gambar 4.7 Userflow Fitur Search Bar ................................................................... 45 +Gambar 4.8 Userflow Payment Status ..................................................................... 46 +Gambar 4.9 Userflow Detail Ticket.......................................................................... 47 +Gambar 4.10 Userflow Detail History ..................................................................... 48 +Gambar 4.11 Userflow Fitur Saved Events.............................................................. 49 +Gambar 4.12 Userflow Notification ......................................................................... 50 +Gambar 4.13 Userflow Detail Event ........................................................................ 51 +Gambar 4.14 Userflow Edit Personal Data............................................................. 52 +Gambar 4.15 Userflow Ubah Password................................................................... 53 +Gambar 4.16 Userflow Notification Setting............................................................. 54 +Gambar 4.17 Userflow Help Center......................................................................... 55 +Gambar 4.18 Userflow Terms and Conditions ........................................................ 55 +Gambar 4.19 Userflow Log Out ............................................................................... 56 +Gambar 4.20 Wireframe Halaman Log In ............................................................... 57 +Gambar 4.21 Wireframe Halaman Sign Up............................................................. 58 +Gambar 4.22 Wireframe Menu Home...................................................................... 59 +Gambar 4.23 Wireframe Menu Tickets .................................................................... 60 +Gambar 4.24 Wireframe Menu Saved...................................................................... 61 +Gambar 4.25 Wireframe Menu Profile .................................................................... 62 + + xv + Gambar 4.26 Wireframe Halaman Detail Event...................................................... 63 +Gambar 4.27 Wireframe Halaman Checkout........................................................... 64 +Gambar 4.28 Wireframe Halaman Waiting Room................................................... 65 +Gambar 4.29 Wireframe Halaman Checkout Proses 1 dan 2.................................. 66 +Gambar 4.30 Wireframe Halaman Checkout Proses 3 dan 4.................................. 67 +Gambar 4.31 Desain Halaman Log In...................................................................... 68 +Gambar 4.32 Prototipe Halaman Log In .................................................................. 69 +Gambar 4.33 Desain Halaman Sign Up ................................................................... 69 +Gambar 4.34 Prototipe Halaman Sign Up ............................................................... 70 +Gambar 4.35 Desain Menu Home ............................................................................ 70 +Gambar 4.36 Prototipe Menu Home ........................................................................ 71 +Gambar 4.37 Desain Menu Tickets Section Tab Waiting ....................................... 72 +Gambar 4.38 Desain Menu Tickets Section Tab My Tickets .................................. 73 +Gambar 4.39 Desain Menu Tickets Section Tab History........................................ 73 +Gambar 4.40 Prototipe Menu Tickets....................................................................... 74 +Gambar 4.41 Desain Menu Saved ............................................................................ 75 +Gambar 4.42 Prototipe Menu Saved ........................................................................ 75 +Gambar 4.43 Desain Menu Profile .......................................................................... 76 +Gambar 4.44 Prototipe Menu Profile....................................................................... 76 +Gambar 4. 45 Desain Halaman Detail Event........................................................... 77 +Gambar 4.46 Prototipe Halaman Detail Event ........................................................ 78 +Gambar 4.47 Desain Halaman Checkout ................................................................. 78 +Gambar 4.48 Prototipe Halaman Checkout ............................................................. 79 +Gambar 4.49 Desain Halaman Waiting Room......................................................... 80 +Gambar 4.50 Desain Halaman Checkout Fitur Join Antrean ................................. 80 +Gambar 4.51 Prototipe Fitur Join Antrean............................................................... 81 +Gambar 4.52 Iterasi Desain Halaman Checkout...................................................... 87 +Gambar 4.53 Iterasi Desain Menu Tickets - Tab Waiting dan Tab History .......... 88 +Gambar 4.54 Iterasi Desain Menu Tickets - Tab My Tickets.................................. 89 +Gambar 4.55 Iterasi Desain Modal Confirmation ................................................... 89 + + xvi + DAFTAR TABEL + Halaman + +Tabel 2.1 State of the art............................................................................................. 6 +Tabel 2.2 Pertanyaan Kuesioner System Usability Scale (SUS) ........................... 17 +Tabel 3. 1 Pelaksanaan Penelitian ............................................................................ 28 +Tabel 4.1 User Persona ............................................................................................. 30 +Tabel 4.2 Kebutuhan Pengguna................................................................................ 32 +Tabel 4.3 Konteks Skenario...................................................................................... 33 +Tabel 4.4 Hasil Perhitungan SUS Usability Testing 1 ............................................ 84 +Tabel 4.5 Hasil Perhitungan SUS Usability Testing 2 ............................................ 91 +Tabel 4.6 Hasil Perbandingan Usability Testing ..................................................... 93 + + xvii + DAFTAR LAMPIRAN + Halaman + +Lampiran 1. Hasil Kuesioner Evaluate Against Requirements 1 di Google Form +.................................................................................................................................. 103 +Lampiran 2. Hasil Kuesioner Evaluate Against Requirements 2 di Google Form +.................................................................................................................................. 106 +Lampiran 3. Data Kuesioner SUS Evaluate Against Requirements 1 ................ 109 +Lampiran 4. Data Kuesioner SUS Evaluate Against Requirements 2 ................ 110 +Lampiran 5. Perhitungan SUS Evaluate Against Requirements 1 ...................... 111 +Lampiran 6. Perhitungan SUS Evaluate Against Requirements 2 ...................... 113 +Lampiran 7. Data Kuesioner Pengumpulan Kebutuhan Pengguna ..................... 115 + + xviii + BAB 1. PENDAHULUAN + +1.1 Latar Belakang + Kegiatan event sering dijumpai dalam kehidupan sehari-hari, berbagai + +kegiatan event baik yang bersifat formal maupun informal. Event menurut +Maulana dkk. (2024), adalah kegiatan yang diselenggarakan oleh pihak tertentu +pada waktu yang telah ditentukan, dengan tujuan memberikan informasi, +pengalaman, atau mencapai tujuan tertentu kepada para peserta atau pengunjung. +Acara ini dapat berupa perayaan, seminar, lokakarya, festival, konser, atau +kegiatan lainnya (Ningsih dkk., 2023). + + Masyarakat Indonesia saat ini menunjukkan antusiasme yang tinggi +terhadap berbagai jenis event, terutama konser musik. Penyelenggaraan festival +musik di Indonesia memiliki potensi untuk menjadi salah satu penggerak ekonomi +nasional, karena mampu menarik wisatawan asing (Kemenparekraf, 2021). +Menurut Kementerian Pariwisata dan Ekonomi Kreatif (2023), jumlah +pengunjung event di Indonesia meningkat dari pencapaian target dengan sekitar +11,76%. Perkembangan ini menunjukkan bahwa industri event di Indonesia +sedang mengalami pertumbuhan pesat dan diminati oleh banyak orang. + + Perkembangan teknologi, terutama setelah pandemi COVID-19, +memberikan dampak signifikan terhadap penyelenggaraan event. Saat ini, event +dapat diselenggarakan secara offline, online, maupun hybrid. Selama pandemi, +penyelenggara event memanfaatkan platform konferensi video untuk +menyelenggarakan event virtual (Pratama dan Santoso, 2021). Setelah pandemi, +model event hybrid yang menggabungkan elemen fisik dan virtual menjadi +semakin populer karena menawarkan fleksibilitas dan jangkauan yang lebih luas +(Juliana dkk., 2023). + + Salah satu faktor kunci keberhasilan sebuah event adalah pemasaran. +Pemasaran melalui media digital, seperti sosial media, situs web, dan aplikasi +mobile, menjadi sangat penting (Sukmawati dan Negara, 2022). Selain itu, +pemesanan tiket event saat ini juga dapat dilakukan secara online maupun offline. +Penggunaan metode pemesanan tiket online juga semakin diminati karena + + 1 + 2 + +kemudahan dan efisiensinya (Yoganata, 2024). Pemasaran dan pemesanan tiket +online tidak hanya meningkatkan partisipasi masyarakat, tetapi juga memberikan +keuntungan bagi penyelenggara event (Alfianto dkk., 2023). Sehingga, di era +digital saat ini diharapkan adanya sistem pemesanan tiket event melalui online. + + Pemesanan tiket event secara online saat ini umumnya dilakukan melalui +situs web. Berdasarkan survei kuesioner yang dilakukan untuk menilai +pengalaman pengguna terhadap 60 responden. Pemilihan 60 responden didasarkan +pada aksesibilitas terhadap responden yang relevan, yaitu individu yang memiliki +pengalaman dalam melakukan pemesanan tiket event secara online. Responden +mayoritas memiliki pengalaman memesan tiket melalui website seperti tiket.com, +artatix.co.id, loket.com, eventbrite.com, dan lainnya, hasil jawaban responden +dapat dilihat pada Lampiran 17. Penggunaan aplikasi mobile untuk pemesanan +tiket event masih sangat jarang. Sistem pemesanan tiket event yang pernah +digunakan oleh responden masih memiliki beberapa kekurangan yang sering +dikeluhkan pengguna. Berdasarkan pengalaman pengguna dari 60 responden, +beberapa masalah yang sering muncul adalah kesulitan dalam proses pemesanan, +ketersediaan tiket yang terbatas, pilihan metode pembayaran yang kurang +beragam, dan tidak adanya fitur pengingat acara. + + Masalah-masalah dalam sistem pemesanan tiket online dapat berdampak +negatif pada semua pihak. Dampaknya adalah pengguna mengalami kekecewaan +dan frustrasi, sehingga membuat pengguna tidak membeli atau lupa menghadiri +acara (Yamin dkk., 2024). Penyelenggara event menghadapi penurunan penjualan, +citra buruk, dan kerugian finansial. Secara umum, minat masyarakat terhadap +event dapat menurun dan penjualan tiket ilegal berkembang (Yamin dkk., 2024). +Sehingga, harus melakukan desain ulang terhadap sistem pemesanan tiket event +untuk memastikan pengalaman pengguna yang memuaskan. + + Perancangan desain antarmuka yang baik memiliki peran penting dalam +menentukan sejauh mana pengguna dapat berinteraksi dengan sistem secara +mudah dan nyaman (Zieglmeier dan Lehene, 2021). Perancangan desain yang +kurang tepat, sistem berisiko tidak memenuhi harapan pengguna yang dapat +menyebabkan kebingungan, kesalahan dalam penggunaan, serta menurunnya + 3 + +tingkat kepuasan pengguna (Putra dkk., 2022). Sehingga, diperlukan pendekatan +perancangan yang terstruktur dan berfokus pada kebutuhan pengguna untuk +mencegah kegagalan implementasi, serta memastikan rancangan desain benar - +benar sesuai kebutuhan dan mampu meningkatkan kenyamanan dalam +penggunaan sistem. + + Berdasarkan permasalahan tersebut, penelitian ini bertujuan untuk +merancang desain antarmuka pengguna User Interface (UI) dan User Experience +(UX) yang lebih baik pada sistem pemesanan tiket event berbasis mobile. Aplikasi +mobile lebih unggul karena pengalaman pengguna personal, aksesibilitas offline, +terintegrasi fitur perangkat, dan notifikasi langsung (Putra dkk., 2023). Penelitian +ini akan menggunakan metode User Centered Design (UCD), untuk memastikan +bahwa desain aplikasi sesuai dengan kebutuhan dan preferensi pengguna +(Ernawati dan Indriyanti, 2022). Desain prototipe aplikasi mobile yang dihasilkan +akan diuji menggunakan metode System Usability Scale (SUS) untuk +mengevaluasi kemudahan penggunaan dan pengalaman pengguna. + + Penelitian ini menghasilkan desain UI/UX sistem pemesanan tiket event +berbasis aplikasi mobile dengan pendekatan metode User Centered Design +(UCD). Rancangan desain UI/UX dengan pendekatan UCD yaitu melalui proses +analisis user persona dalam tahapan understand context of use, analisis kebutuhan +pengguna dan konteks skenario dalam tahapan specify user requirements. Proses +selanjutnya yaitu merancang userflow, wireframe, dan design prototype dalam +tahapan design solutions. Tahapan terakhir evaluate againts requirements yaitu +melakukan usability testing menggunakan pendekatan System Usability Scale +(SUS). Penelitian ini juga melakukan iterasi desain berdasarkan dari hasil +usability testing pertama, kemudian dilakukan kembali usability testing kedua. +Hasil dari usability testing pertama dan kedua, peneliti melakukan evaluasi hasil +yang menunjukkan adanya peningkatan skor SUS awal 63,5 menjadi 76. +Demikian, penelitian ini masih terdapat kekurangan pada sistem yang terletak +dalam aspek kemudahan pengguna dan aksesbilitas. + 4 + +1.2 Rumusan Masalah + Berdasarkan dari latar belakang di atas, maka rumusan masalah dalam + +penelitian ini adalah sebagai berikut. + a. Bagaimana merancang tampilan User Interface pada Sistem Pemesanan + Tiket Event Berbasis Mobile dengan penerapan metode User Centered + Design (UCD)? + b. Bagaimana cara mengukur pengalaman pengguna Sistem Pemesanan Tiket + Event Berbasis Mobile dengan Usability Testing melalui penerapan metode + System Usability Scale (SUS)? + +1.3 Tujuan + Berdasarkan rumusan masalah di atas, maka tujuan dari penelitian ini adalah + +sebagai berikut. + a. Merancang tampilan User Interface pada Sistem Pemesanan Tiket Event + Berbasis Mobile dengan menerapkan metode User Centered Design (UCD). + b. Mengetahui hasil pengujian pengalaman pengguna Sistem Pemesanan Tiket + Event Berbasis Mobile dengan Usability Testing melalui menerapkan + metode System Usability Scale (SUS). + +1.4 Manfaat + Manfaat yang dapat diperoleh dari penelitian ini adalah sebagai berikut. + +1.4.1 Bagi Peneliti + a. Pemahaman mendalam tentang metode User Centered Design (UCD) dan + bagaimana penerapannya dapat meningkatkan kualitas desain aplikasi + mobile. + b. Peneliti akan mendapatkan pengalaman praktis dalam melakukan Usability + Testing dan analisis data menggunakan metode System Usability Scale + (SUS). + 5 + +1.4.2 Bagi Politeknik Negeri Jember + a. Bermanfaat sebagai pengembangan ilmu pengetahuan bagi mahasiswa + khususnya di bidang program studi Teknik Informatika. + b. Menjadi referensi untuk penelitian lanjutan bagi mahasiswa khususnya di + Politeknik Negeri Jember. + +1.4.3 Bagi Pengguna (End User) + a. End user akan mendapatkan manfaat dari sistem pemesanan tiket event yang + lebih mudah digunakan dan mudah dipahami. + b. Desain UI/UX yang dioptimalkan akan meningkatkan keseluruhan + pengalaman pengguna dan memenuhi kebutuhan pengguna. + +1.5 Batasan Masalah + Pada penelitian ini diberikan batasan masalah agar tujuan dan saran yang di + +inginkan dapat tercapai. Adapun batasan masalah sebagai berikut: + a. Pendekatan metode User Centered Design pada penelitian ini menghasilkan + sebuah prototype dari Sistem Aplikasi Pemesanan Tiket Event Berbasis + Mobile. + b. Proses desain solusi difokuskan pada perancangan alur pengguna (userflow) + dan antarmuka pengguna (user interface). + c. Tahapan penelitian hanya sampai dengan Usability Testing dengan metode + System Usability Scale. + BAB 2. TINJAUAN PUSTAKA + +2.1 State of the art + + Tabel 2.1 dibawah ini merupakan beberapa penelitian terdahulu atau state of + +the art yang berkaitan dengan penelitian ini, dengan rincian sebagai berikut: + +Tabel 2.1 State of the art + +No Judul Peneliti Tahun Metode Kekurangan + +1. Perancangan Wikan 2021 User Evaluasi yang + + dan Evaluasi Chandra Experience digunakan + + User Kinanthi, Questionnaire hanya bersifat + + Experience Nina (UEQ) subjektif, tidak + + Aplikasi Setiyawati adanya metode + + Virtual Event evaluasi + + Menggunakan kuantitatif. + + User + + Experience + + Questionnaire + +2. Perancangan Muhammad 2021 Human Terdapat + + UI/UX Arif Idris, Centered banyak fitur + + Aplikasi Galang Design (HCD) yang masih + + Perangkat Prihadi perlu + + Bergerak Ivent Mahardhika, dikembangkan + + Menggunakan Beni Suranto lebih jauh + + Pendekatan dengan + + HCD (Human mendalami + + Centered pemahaman + + Design) mengenai + + kebutuhan + + pengguna. + +3. Perancangan Muhammad 2021 User Centered Ukuran sampel + + User Interface Arif Idris Design (UCD) terbatas dan + + 6 + 7 + +No Judul Peneliti Tahun Metode Kekurangan + + & User hanya + + Experience menggunakan + + Pada Aplikasi evaluasi secara + + E-Commerce kualitatif. + + Ivent + + Menggunakan + + Metode User + + Centered + + Design (UCD) + +4. Analisis Dan Yevi 2023 User Centered Penelitian ini + + Perancangan Septiray Design (UCD) tidak adanya + + Antarmuka Purbo, Fandy melakukan + + Aplikasi Setyo iterasi desain + + Wisata Utomo, Yuli terhadap hasil + + Menggunakan Purwati pengujian. + + Metode User- + + Centered + + Design (UCD) + +5. Implementasi Ricko 2024 Design Fitur pada + + Design Muhammad Thinking platform + + Thinking Firdaus, belum sesuai + + dalam Noor Latifah preferensi + + Perancangan pengguna dan + + UI/UX pada ukuran sampel + + Website yang terlalu + + Penjualan kecil dalam + + Tiket Konser evaluasi + + usability. + +6. Penggunaan Endiening 2025 User Centered Kekurangan + + Metode User Nur Design (UCD) utama sistem + 8 + +No Judul Peneliti Tahun Metode Kekurangan + Puspitasari terletak pada + Centered aspek + kemudahan + Design (UCD) penggunaan + khususnya + terhadap pada desain + antarmuka dan + Rancangan tingkat + pembelajaran + UI/UX Sistem awal yang + tinggi. + Pemesanan + + Tiket Event + + Berbasis + + Mobile + + Penelitian dengan judul “Analisis Dan Perancangan Antarmuka Aplikasi +Wisata Menggunakan Metode User-Centered Design (UCD)” yang dilakukan +oleh (Purbo dkk, 2023) memiliki permasalahan yaitu akses informasi yang +terbatas mengenai destinasi wisata, akomodasi, dan kegiatan yang tersedia. Selain +itu, koordinasi antara wisatawan dan pihak terkait seperti pengelola destinasi dan +pelayanan pariwisata perlu ditingkatkan. Berdasarkan permasalahan tersebut, +peneliti merancang prototipe aplikasi VACALAM (Vacation Lampung) +menggunakan Figma dengan metode User-Centered Design (UCD). Namun, pada +penelitian ini tidak melakukan iterasi desain terhadap hasil pengujian. Sehingga +hasil desain yang telah dirancang perlu adanya perbaikan desain antarmuka, +dikarenakan skor pengujian melalui metode System Usability Scale (SUS) 71,7 +menunjukkan hasil acceptable good (cukup baik). Ini mengindikasikan adanya +masalah desain antarmuka yang perlu diperbaiki berdasarkan hasil pengujian. + + Penelitian yang berjudul “Perancangan UI/UX Aplikasi Perangkat Bergerak +Ivent Menggunakan Pendekatan HCD (Human Centered Design)” oleh (Idris +dkk., 2021). Tujuan utama penelitian ini memudahkan pengguna mencari +kebutuhan dalam sebuah acara sesuai dengan target anggaran pengguna dan +kualitas yang diberikan oleh pemilik jasa. Solusi yang diberikan pada penelitian + 9 + +ini berupa Aplikasi perangkat bergerak “Ivent” yang berhasil mendapatkan empati +dari pengguna dengan pengisian kuesioner yang melibatkan 68 responden. +Peneliti belum sepenuhnya optimal dalam mengembangkan Aplikasi “Ivent”. +Terdapat banyak fitur yang masih perlu dikembangkan lebih jauh dengan +mendalami pemahaman mengenai kebutuhan pengguna. + + Penelitian dengan judul “Implementasi Design Thinking dalam Perancangan +UI/UX pada Website Penjualan Tiket Konser” oleh (Firdaus dan Latifah, 2024). +Penelitian ini merancang platform penjualan tiket konser berbasis website +bernama Concerto menggunakan metode Design Thinking untuk menjawab +permasalahan pengguna dalam memperoleh tiket resmi, informasi konser yang +lengkap, dan menjalin koneksi sosial. Hasil menunjukkan bahwa fitur utama +seperti pencarian konser, pembelian tiket, dan fitur cari teman mampu memenuhi +kebutuhan pengguna, dengan tingkat keberhasilan usability sebesar 85%. Namun, +penelitian ini memiliki kekurangan, yaitu belum tersedianya fitur notifikasi secara +real-time dan jumlah partisipan usability yang terbatas (8 responden). Sehingga, +validitas hasil masih perlu ditingkatkan dengan pengembangan lebih lanjut seperti +penambahan fitur dan perluasan pengujian yang disarankan untuk memperkuat +fungsionalitas platform. + + Penelitian dengan judul “Perancangan dan Evaluasi User Experience +Aplikasi Virtual Event Menggunakan User Experience Questionnaire” yang +dilakukan oleh (Kinanthi dan Setiyawati, 2021). Penelitian ini dilatarbelakangi +oleh keterbatasan aplikasi Zoom Meeting dalam mendukung penyelenggaraan +virtual event, khususnya dari segi pengalaman pengguna dan kelengkapan fitur. +Tujuan penelitian ini adalah merancang dan mengevaluasi pengalaman pengguna +(UX) dan antarmuka pengguna (UI) pada aplikasi virtual event berbasis web +bernama EventGo, dengan menggunakan metode User Experience Questionnaire +(UEQ). Hasil penelitian menunjukkan bahwa desain EventGo mengalami +peningkatan skor UX pada aspek attractiveness, efficiency, perspicuity, +stimulation, dan novelty dibandingkan dengan Zoom Meeting. Namun, terdapat +kekurangan pada aspek dependability yang mengalami penurunan dibandingkan +Zoom Meeting, serta keterbatasan dalam cakupan evaluasi karena pengujian hanya + 10 + +dilakukan secara subjektif tanpa menggunakan metode kuantitatif. Sehingga, +diperlukan pengembangan lebih lanjut melalui pengujian usability pada skala +pengguna yang lebih luas serta evaluasi secara objektif untuk memperoleh hasil +yang lebih valid. + + Penelitian yang berjudul “Perancangan User Interface & User Experience +Pada Aplikasi E-Commerce Ivent Menggunakan Metode User Centered Design +(UCD) oleh (Idris, 2021). Penelitian ini dilatarbelakangi oleh kebutuhan pengguna +terhadap platform e-commerce yang mampu memfasilitasi pencarian serta +penyewaan barang dan jasa untuk keperluan event, seperti vendor atau event +organizer (EO). Tujuan penelitian adalah merancang antarmuka pengguna (UI) +dan pengalaman pengguna (UX) aplikasi Ivent menggunakan metode User +Centered Design (UCD) agar sesuai dengan kebutuhan calon pengguna. Hasil +pengujian menunjukkan bahwa antarmuka yang dirancang dapat digunakan secara +optimal dan cepat oleh partisipan dengan kesalahan minor. Namun, penelitian ini +memiliki keterbatasan pada ukuran sampel yang kecil dan metode pengujian yang +bersifat kualitatif, sehingga belum menghasilkan evaluasi usability secara +kuantitatif. + + Berdasarkan beberapa penelitian terdahulu, peneliti merancang desain +UI/UX untuk sistem aplikasi pemesanan tiket event berbasis mobile. Penelitian ini +menggunakan pendekatan User Centered Design (UCD) yang berfokus pada +kebutuhan dan pengalaman pengguna. Inovasi dalam penelitian ini terletak pada +penerapan fitur pengingat acara dan fitur antrean, yang belum ditemukan dalam +penelitian terdahulu. Penelitian ini juga berupaya melengkapi kekurangan dari +penelitian terdahulu melalui penerapan iterasi desain dalam proses UCD, +perancangan fitur yang disesuaikan dengan preferensi pengguna, penggunaan +ukuran sampel yang lebih besar dengan melibatkan 100 responden, serta +penerapan evaluasi usability secara kualitatif (melalui umpan balik pengguna) dan +kuantitatif menggunakan metode System Usability Scale (SUS). Kelebihan +penelitian ini dari penelitian terdahulu terletak pada pendekatan yang lebih +menyeluruh dan terukur, baik dari sisi perancangan berbasis kebutuhan pengguna +secara nyata, jumlah responden yang luas, hingga penerapan fitur pengingat acara + 11 + +dan fitur antrean. Penelitian ini juga mengintegrasi antara evaluasi kualitatif dan +kuantitatif, sehingga menjadikan hasil penelitian yang lebih kuat secara +metodologis. + +2.2 Event + Event adalah suatu peristiwa atau moment yang diadakan dengan tujuan + +tertentu. Event bertujuan untuk memfasilitasi interaksi antara manusia sebagai +makhluk sosial. Kegiatan event juga bisa menjadi media komunikasi yang baik +untuk menyampaikan suatu maksud dan tujuan antara suatu organisasi kepada +khalayak luas. Melalui event, organisasi dapat berinteraksi langsung dengan +audiens, membangun hubungan yang lebih kuat, dan menyampaikan pesan atau +informasi tertentu (Lestari, 2021). + + Event merupakan suatu hal yang tidak dapat dipisahkan dari kehidupan +manusia. Seiring berjalannya waktu, event semakin bertumbuh dan berkembang +baik di secara privat maupun publik. Saat ini, event telah menjadi salah satu +industri yang bertumbuh sangat pesat, atraktif, dan menarik perhatian khalayak +umum (Wijaya dkk., 2020). + + Kesimpulan dari kedua sumber diatas, event merupakan suatu peristiwa atau +momen yang diselenggarakan dengan tujuan khusus untuk memfasilitasi interaksi +sosial dan komunikasi antara suatu organisasi dengan khalayak yang lebih luas +merupakan kegiatan event. Event juga telah menjadi bagian penting dalam +kehidupan manusia, berkembang pesat dari waktu ke waktu dan kini menjadi +industri yang sangat menarik di khalayak umum. + +2.3 Sistem Informasi Pemesanan Tiket + Sistem informasi adalah kumpulan dari sub-sub sistem yang saling + +terintegrasi dan berkolaborasi untuk menyelesaikan masalah tertentu dengan cara +mengolah data menggunakan komputer sehingga memiliki nilai tambah dan +bermanfaat bagi pengguna (Bratha, 2022). + + Sistem informasi pemesanan tiket event adalah sebuah platform digital yang +memungkinkan pengguna untuk memesan dan membeli tiket untuk berbagai acara + 12 + +atau festival secara online. Sistem ini mengotomatisasi proses reservasi dan +menyediakan layanan pemesanan internal. Sistem ini juga dapat memberikan +dampak positif pada daya tarik event atau festival tersebut terhadap pengunjung +dan kontribusi terhadap kesejahteraan ekonomi dan sosial daerah penyelenggara +(Mair dan Weber, 2019). + + Kesimpulan dari kedua sumber diatas, sistem informasi tiket event +merupakan platform digital untuk memudahkan pemesanan dan pembelian tiket +secara online. Sistem ini tidak hanya mengotomatiskan proses pemesanan tetapi +juga meningkatkan kemampuan untuk menarik lebih banyak pengunjung, +sehingga dapat membawa manfaat ekonomi dan interaksi sosial yang positif bagi +daerah penyelenggara event. + +2.4 Aplikasi Mobile + Aplikasi mobile atau dikenal juga sebagai aplikasi seluler (perangkat + +bergerak) adalah jenis perangkat lunak yang dirancang untuk dijalankan di ponsel +seperti smartphone atau tablet PC. Platform aplikasi mobile menyediakan +lingkungan teknologi yang lengkap dengan alat dan infrastruktur untuk +mengembangkan, menguji, dan mendistribusikan aplikasi pada perangkat mobile. +Manfaat dari platform ini meliputi aksesibilitas yang mudah, portabilitas yang +nyaman, akses ke fitur perangkat, notifikasi real time, dan lain-lain (Putra dkk., +2023). + + Menurut Agusti (2022) Aplikasi adalah jenis program komputer yang +dikembangkan dengan teknik dan prinsip tertentu untuk menjalankan tugas-tugas +khusus. Aplikasi mobile adalah program yang menggunakan sumber daya berbasis +web untuk memberikan akses ke berbagai informasi yang relevan. Aplikasi ini +dapat diakses melalui perangkat seluler, seperti smartphone, perangkat nirkabel, +dan lainnya. + + Kesimpulan dari kedua sumber diatas, aplikasi mobile umumnya perangkat +lunak yang dirancang untuk beroperasi pada perangkat seluler. Selain manfaat +utama diatas, aplikasi mobile juga memiliki manfaat lain yaitu fungsionalitas +offline, peningkatan keterlibatan pengguna, pengalaman pengguna yang lebih + 13 + +baik, integrasi dengan layanan lain, dan lain-lain. Aplikasi mobile juga dapat +diakses melalui perangkat seluler seperti smarthphone, tablet, dan perangkat +nirkabel atau wearable lainnya. Sehingga berbagai informasi dapat diakses +dengan lebih mudah dan cepat. + +2.5 User Interface (UI) + Menurut ISO 9241-110 (2020) User interface adalah semua elemen dari + +sistem interaktif baik perangkat lunak maupun perangkat keras yang +memungkinkan pengguna untuk mengendalikan sistem guna menyelesaikan tugas +tertentu. Fungsi user interface adalah sebagai penghubung atau penerjemah +informasi antara sistem dan pengguna maupun sebaliknya. + + User Interface (UI) merupakan cara dimana pengguna dan program +berinteraksi satu sama lain. User interface mencakup semua elemen visual dan +interaktif dari sebuah aplikasi atau sistem yang dirancang untuk memfasilitasi +interaksi yang efektif dan interaksi antara pengguna dengan teknologi yang +digunakan (Fernando, 2020). + + Kesimpulan dari kedua sumber diatas, elemen visual dan interaktif pada +sistem aplikasi yang memungkinkan pengguna berinteraksi dengan sistem +merupakan fungsi utama dari user interface. User interface juga berperan sebagai +penghubung informasi antara sistem dan pengguna. Desain antarmuka yang baik, +pengguna dapat mengendalikan perangkat lunak dan perangkat keras secara +efisien. Fungsi ini memastikan bahwa komunikasi antara manusia dan sistem +berjalan lancar, sehingga pengguna dapat menyelesaikan tugas-tugas mereka +dengan mudah dan cepat. + +2.6 User Experience (UX) + User Experience (UX) memegang peranan penting sebagai tolak ukur + +keberhasilan. User Experience (UX) tidak sekadar berfokus pada fungsionalitas +semata, melainkan merangkum jangkauan pengalaman yang lebih luas, meliputi +reaksi, persepsi, perilaku, emosi, dan pemikiran. Sehingga UX merupakan konsep + 14 + +beragam yang mencakup aspek kognitif, efektif, dan perilaku pengguna dalam +interaksi mereka dengan sistem (Hartawan, 2022). + + User experience (UX) merujuk pada persepsi dan tanggapan pengguna +terhadap penggunaan suatu produk, sistem, atau layanan. User experience +mencakup semua aspek interaksi pengguna dengan produk atau layanan, termasuk +kemudahan penggunaan, kepuasan, dan efisiensi. Pengalaman ini memainkan +peran penting dalam menentukan kesuksesan produk karena mempengaruhi +bagaimana pengguna merasa dan berinteraksi dengan sistem tersebut. Oleh karena +itu, desain UX yang baik bertujuan untuk menciptakan pengalaman yang positif +dan memuaskan bagi pengguna (Fernando, 2020). + + Kesimpulan dari kedua sumber diatas, User Experience merupakan evaluasi +terhadap seberapa nyaman dan puasnya pengguna terhadap sebuah produk, +layanan, atau sistem. Ini mencakup berbagai aspek seperti kemudahan +penggunaan, efisiensi, serta kesan keseluruhan yang diperoleh pengguna selama +interaksi dengan produk tersebut. + +2.7 User Centered Design (UCD) + User-Centered Design (UCD) adalah sebuah proses iteratif. User centered + +design memanfaatkan berbagai metode dan alat, seperti survei dan wawancara +untuk investigasi, serta pendapat untuk generasi ide guna memahami kebutuhan +pengguna. Istilah ini muncul pada tahun 1970-an. Ahli ilmu kognitif dan +pengalaman pengguna Don Norman mengadopsi istilah ini dalam karyanya untuk +meningkatkan interaksi manusia dengan produk sehari-hari. Istilah ini menjadi +populer melalui karya-karya seperti "User-Centered System Design: New +Perspectives on Human-Computer Interaction" yang ditulis Norman bersama +Stephen W. Draper, serta "The Design of Everyday Things" oleh Norman yang +awalnya berjudul "The Psychology of Everyday Things" (Interaction Design, +2023). + + User Centered Design adalah pendekatan perancangan UI/UX yang +menempatkan pengguna sebagai fokus utama dalam pengembangan antarmuka. +UCD juga dikenal sebagai pendekatan pengembangan sistem interaktif yang + 15 + +berfokus pada pembuatan sistem yang bermanfaat, di mana desain dilakukan dari +tahap awal dan diimplementasikan secara berkelanjutan untuk menghasilkan +produk yang sesuai dengan keinginan pasar (Dakhilullah dan Suranto, 2022). + + Metode User Centered Design (UCD) memiliki empat tahapan yang +digambarkan pada Gambar 2.1. + + Gambar 2.1 Tahapan User Centered Design (Interaction Design, 2023) +Secara umum berikut penjelasan dari setiap tahapan user centered design: + + a. Understand Context of Us + Desainer sistem harus memahami konteks penggunaan sistem, termasuk + siapa yang akan menggunakan aplikasi tersebut, tujuan penggunaannya, dan + situasi di mana aplikasi tersebut akan digunakan. + + b. Specify User Requirement + Memahami konteks penggunaan aplikasi telah selesai, maka perancang + dapat melanjutkan ke tahap berikutnya yaitu menentukan kebutuhan + pengguna. Tahap ini, perancang harus mengidentifikasi kebutuhan + pengguna dalam bisnis serta tujuan yang ingin dicapai. + + c. Design Solution + Proses selanjutnya melibatkan perancangan desain solusi berdasarkan + kebutuhan pengguna yang telah diidentifikasi pada tahapan specify user + requirement. Tahap perancangan ini mencakup berbagai tahapan, mulai dari + konsep awal, pembuatan prototipe, hingga desain akhir. + + d. Evaluation Againts Requirement + Evaluasi dilakukan dengan melibatkan pengguna yang akan memakai + sistem, dimulai dari satu tahap dan dilanjutkan ke tahap berikutnya. + 16 + + Kesimpulan dari kedua sumber diatas, User Centered Design (UCD) adalah +proses desain berulang yang memprioritaskan pemahaman kebutuhan pengguna +melalui metode seperti survei dan wawancara yang dikembangkan oleh ilmuwan +kognitif Don Norman. Tujuannya adalah untuk menciptakan sistem interaktif yang +menguntungkan pengguna, mulai dari tahap desain awal hingga penerapan +berkelanjutan untuk memastikan bahwa produk sesuai dengan kebutuhan +pengguna. + +2.8 Usability Testing + Menurut ISO 9241-110 (2020) kata "usability" juga digunakan sebagai + +kualifikasi untuk merujuk pada pengetahuan, keterampilan, aktivitas, dan atribut +desain yang berkontribusi terhadap kegunaan. Seperti keahlian dalam kegunaan, +teknik kegunaan, metode kegunaan, penilaian kegunaan, heuristic kegunaan. +Usability testing digunakan untuk mengukur sejauh mana suatu sistem, produk, +atau layanan dapat digunakan oleh pengguna tertentu untuk mencapai tujuan +tertentu dengan efektivitas, efisiensi, dan kepuasan dalam konteks penggunaan +tertentu. + + Usability testing adalah pendekatan yang digunakan untuk menguji seberapa +berguna suatu produk. Beberapa hal yang perlu disiapkan sebelum melakukan +pengujian yaitu tentukan jumlah responden, identifikasi tugas yang akan diuji, dan +susun pertanyaan untuk mendiskusikan antarmuka pengguna dan pengalaman +pengguna aplikasi (Putri dan Indriyanti, 2023). + + Kesimpulan dari kedua sumber diatas, pengujian usability bertujuan untuk +mengevaluasi apakah suatu aplikasi telah memenuhi kebutuhan pengguna atau +belum. Usability testing melibatkan pengujian langsung pada pengguna. Proses ini +mencakup dengan melakukan survei atau wawancara yang diukur dengan variabel +untuk mengetahui kepuasan pengguna. + +2.9 System Usability Scale (SUS) + System Usability Scale (SUS) adalah alat yang digunakan untuk menguji + +usability sistem komputer dengan fokus pada pengguna. Metode ini sederhana dan + 17 + +sering digunakan dalam penelitian (Damayanti dkk., 2022). System Usability + +Scale (SUS) merupakan kuesioner yang terdiri dari 10 pertanyaan (Brooke, 2020). + +Berikut 10 pertanyaan kuesioner SUS, ditampilkan pada Tabel 2.2. + +Tabel 2.2 Pertanyaan Kuesioner System Usability Scale (SUS) (Brooke, 2020) + +No Pertanyaan + +1 I think that I would like to use this system frequently + +2 I found the system unnecessarily complex + +3 I thought the system was easy to use + +4 I think that I would need the support of a technical person to be able + + to use this system + +5 I found the various functions in this system were well integrated + +6 I thought there was too much inconsistency in this system + +7 I would imagine that most people would learn to use this system very + + queckly + +8 I found the system very cumbersome to use + +9 I felt very confident using the system + +10 I needed to learn a lot of things before I could get going with this + + system + + Kuesioner ini menggunakan skala likert dengan 5 poin, di mana responden +diminta memberikan penilaian mulai dari “Sangat tidak setuju” hingga “Sangat +setuju”. Menurut (Brooke, 2020) berikut adalah aturan perhitungan skor rata-rata +pada System Usability Scale (SUS): + + a. Pada pertanyaan bernomor ganjil, skor yang diberikan oleh pengguna akan + dikurangi 1. + + b. Pada pertanyaan bernomor genap, hasil skor akhir diperoleh dari pengguna + akan dikurangi 5. + + c. Jumlah skor rata-rata diperoleh dengan menjumlahkan skor pada setiap + nomor pertanyaan, kemudian hasilnya dikalikan dengan 2,5. + 18 + + Berdasarkan aturan perhitungan, maka nilai akhir dari System Usability +Scale (SUS) dapat dihitung dengan menggunakan rumus sebagai berikut, dapat +dilihat pada Rumus 2.1. +Skor SUS = + + ------- 2.1 + Desain yang berhasil menerapkan usability adalah jika nilai rata-rata yang +diperoleh dari pengujian System Usability Scale (SUS) berada di atas 68, maka +sistem dianggap layak untuk dikembangkan dan digunakan. Namun, jika nilai +rata-rata berada di bawah 68 artinya sistem perlu melakukan perbaikan pada +perancangan dan mengadakan pengujian ulang (Damayanti dkk., 2022). Berikut +SUS Score dapat dilihat pada Gambar 2.2 dibawah ini. + + Gambar 2.2 SUS Score (Brooke, 2020) + +2.10 Populasi dan Sampel + Populasi mencakup seluruh objek atau subjek penelitian, sementara sampel + +adalah sebagian atau perwakilan yang memiliki karakteristik representatif dari +populasi. Menentukan sampel yang tepat memerlukan pemahaman yang baik +tentang sampling oleh peneliti, termasuk dalam hal jumlah dan pemilihan sampel +yang diambil. Kesalahan dalam penentuan populasi dapat menyebabkan +pengumpulan data yang tidak akurat, sehingga hasil penelitian tidak berkualitas, +tidak representatif, dan tidak memiliki daya generalisasi yang baik (Amin dkk., +2023). + + Populasi adalah keseluruhan objek atau subjek penelitian yang memiliki +karakteristik tertentu untuk diteliti dan diambil kesimpulan. Sampel merupakan +bagian dari populasi yang memiliki jumlah dan karakteristik yang sama. Sampel + 19 + +terdiri dari sejumlah individu yang dipilih dari populasi dan mewakili keseluruhan + +anggota populasi. Sampel yang baik harus memiliki sifat representatif terhadap + +populasi. Jika suatu sampel tidak representatif terhadap setiap anggota populasi, + +berapa pun ukurannya, hasilnya tidak dapat digeneralisasi terhadap populasi + +(Suriani dkk., 2023). + +Kesimpulan dari kedua sumber diatas, populasi mencakup keseluruhan + +objek atau subjek penelitian dengan karakteristik tertentu, sementara sampel + +adalah bagian yang mewakili populasi tersebut. Pemilihan sampel yang + +representatif sangat penting untuk memastikan bahwa data yang dikumpulkan + +akurat dan hasil penelitian dapat digeneralisasi. Kesalahan dalam menentukan + +populasi atau memilih sampel dapat mengakibatkan hasil penelitian yang tidak + +berkualitas dan tidak representatif. Cara pengambilan sampel pada penelitian ini + +menggunakan rumus slovin, dapat dilihat pada Rumus 2.2 berikut: + + = ------------------------------------------------------------ 2.2 + +Keterangan: + • n = Jumlah target sampel + • N = Jumlah keseluruhan populasi + • e = Jumlah persen margin error + +2.11 Userflow + Userflow merupakan gambaran alur proses pada sebuah aplikasi yang harus + +diselesaikan oleh pengguna untuk mencapai tujuan tertentu. Alur ini disusun +berdasarkan proses bisnis atau kebiasaan pegguna dan biasanya diperoleh dari +hasil wawancara atau analisis kompetitor. Userflow menjadi dasar penting dalam +pengembangan desain karena membantu memahami bagaimana interaksi +pengguna berlangsung dari awal hingga akhir (Santoso, 2024). + + Menurut Soedewi dkk. (2022), userflow memiliki peran penting dalam +membantu merancang alur interaksi pengguna secara sistematis sebelum proses +pembuatan user interface dimulai. Userflow mempermudah desainer dalam +mengidentifikasi dan menyusun alur pengguna secara logis, sehingga dapat + 20 + +menghindari navigasi yang kompleks. Pendekatan ini bertujuan untuk +meningkatkan kemudahan pengguna dan memastikan pengalaman pengguna yang +lebih efisien serta intuitif saat berinteraksi dengan sistem. + + Kesimpulan dari kedua sumber diatas, userflow merupakan komponen +penting dalam perancangan antarmuka karena membantu desainer memahami dan +merancang alur interaksi pengguna secara terstruktur. Menyusun userflow +sebelum tahap desain dimulai, alur navigasi dapat disusun lebih logis, efisien, dan +sesuai dengan tujuan pengguna, sehingga menciptakan pengalaman yang lebih +mudah dan intuitif. + +2.12 Wireframe (Lo-fi & Hi-fi) + Wireframe merupakan representasi awal dari rancangan sebuah produk yang + +berfungsi sebagai panduan dalam proses pengembangan desain. Kerangka ini, +berbagai informasi yang telah dikumpulkan dihimpun dan disusun secara +terstruktur untuk menggambarkan kebutuhan pengguna yang akan diakomodasi +oleh produk tersebut (Darmawan dan Ziveria, 2023). + + Wireframe merupakan rancangan awal dari antarmuka yang terbagi menjadi +dua jenis, yaitu low-fidelity (lo-fi) dan high-fidelity (hi-fi). Wireframe lo-fi +biasanya dibuat dalam bentuk sketsa sederhana hitam putih untuk mempercepat +proses perancangan awal dan fokus pada struktur dasar tampilan. Wireframe hi-fi +merupakan desain yang lebih rinci, menampilkan tata letak, warna, serta elemen +visual yang lebih mendekati bentuk akhir aplikasi (Santoso, 2024). + + Kesimpulan dari kedua sumber diatas, wireframe adalah rancangan awal +yang digunakan untuk menggambarkan kebutuhan dan struktur antarmuka suatu +produk. Wireframe disusun secara sistematis berdasarkan informasi pengguna, +dan terdiri dari dua jenis, yaitu lo-fi untuk sketsa sederhana dan hi-fi untuk +tampilan yang lebih mendekati desain akhir. + +2.13 Figma + Menurut Santoso (2024), Figma menjadi salah satu tools utama dalam + +proses perancangan UI/UX. Aplikasi ini berbasis cloud dan memungkinkan para + 21 + +desainer untuk membuat wireframe, prototype, serta mendesain antarmuka secara +kolaboratif dalam waktu nyata. Figma banyak digunakan oleh UI/UX designer +dan web developer karena fleksibilitas dan efisiensinya dalam mendukung proses +desain antarmuka digital. + + Figma merupakan alat desain berbasis web yang mendukung pengeditan +grafis vektor dan pembuatan prototipe, serta dilengkapi fitur penggunaan secara +offline melalui aplikasi desktop yang tersedia untuk Mac OS dan Windows. +Aplikasi ini dirancang khusus untuk mendukung proses perancangan antarmuka +pengguna (UI) dan pengalaman pengguna (UX), dengan keunggulan utama pada +fitur kolaborasi waktu nyata (real-time). Figma memungkinkan para pengguna +untuk bekerja secara bersama-sama dalam satu proyek, kapan saja dan di mana +saja, sehingga sangat mendukung kerja tim secara efisien dan terintegrasi +(Herniyanti dkk., 2022). + + Kesimpulan dari kedua sumber diatas, figma merupakan platform desain +antarmuka berbasis web yang banyak digunakan dalam pengembangan UI/UX +karena mendukung pembuatan wireframe, prototipe, dan desain grafis secara +kolaboratif. Dengan fitur cloud dan dukungan kolaborasi real-time, Figma +memungkinkan tim desain bekerja bersama secara fleksibel dan efisien, baik +secara online maupun offline. + +2.14 Prototype + Prototype merupakan representasi awal dari hasil desain yang dapat + +digunakan untuk menyimulasikan interaksi pengguna dengan sistem. Prototype +dapat berupa versi lo-fi maupun hi-fi, tergantung pada kedalaman dan tingkat +detail yang diinginkan. Prototype ini digunakan untuk pengujian dan evaluasi +sebelum sistem dikembangkan secara penuh, sehingga memungkinkan perbaikan +dini berdasarkan umpan balik pengguna (Santoso, 2024). + + Menurut Oktaviani dkk. (2022), prototype merupakan representasi awal dari +rancangan sistem yang berfungsi sebagai model atau acuan dalam menentukan +ukuran, struktur, dan skalabilitas sistem yang akan dikembangkan. Melalui +prototipe ini, baik pengembang maupun pengguna dapat melakukan interaksi + 22 + +langsung tanpa perlu membangun produk dalam bentuk fisik terlebih dahulu. +Proses ini disesuaikan dengan kebutuhan awal dalam pengembangan perangkat +lunak, sehingga memungkinkan untuk mengidentifikasi dan mengevaluasi fitur +serta fungsi yang telah dirancang sejak dini. + + Kesimpulan dari kedua sumber diatas, prototype adalah representasi awal +dari desain sistem yang bertindak sebagai model atau referensi dalam menentukan +ukuran, struktur, dan skalabilitas suatu sistem yang dikembangkan. Prototype ini +memungkinkan pengembang dan pengguna untuk berinteraksi secara langsung +tanpa terlebih dahulu membuat produk dalam bentuk fisik. Proses ini memenuhi +persyaratan awal dalam pengembangan perangkat lunak, memungkinkan fungsi +yang dirancang lebih awal diidentifikasi dan dievaluasi. + BAB 3. METODE PENELITIAN + +3.1 Waktu dan Tempat + Pembuatan “Penggunaan Metode User Centered Design (UCD) terhadap + +Rancangan UI/UX Sistem Pemesanan Tiket Event Berbasis Mobile” ini +dilaksanakan selama 4 bulan bertempat di Politeknik Negeri Jember - PSDKU +Nganjuk. + +3.2 Alat dan Bahan +3.2.1 Alat + + Alat yang akan digunakan selama penelitian mencakup perangkat keras, +perangkat lunak, dan alat lainnya yang diperlukan untuk mengumpulkan data dan +mengembangkan desain. Berikut adalah beberapa contoh alat yang mungkin +digunakan: + + a. Perangkat keras + Penelitian ini menggunakan Laptop HP 22H2 dengan spesifikasinya yaitu + Processor AMD Ryzen 7 5700U, RAM 8 GB, SSD 447 GB, dan Layar 14 + inchi + + b. Perangkat Lunak + 1) Sistem operasi windows 10 64-bit + 2) Figma browser + 3) Microsoft office + 4) Diagram.net + 5) Web browser (Google Chrome) + +3.2.2 Bahan + Penelitian ini membutuhkan berbagai sumber informasi dan material yang + +digunakan selama proses penelitian berlangsung. Bahan dalam penelitian ini +menggunakan data kualitatif dan kuantitatif. Data kualitatif diperoleh dari hasil +pengumpulan kebutuhan pengguna sebelum melakukan desain solusi dengan cara +melalui kuesioner terhadap 60 responden dan umpan balik pengguna yang + + 23 + 24 + +dikumpulkan setelah melakukan pengujian desain. Data kuantitatif yang dapat +diukur, dihitung, dan dibandingkan menggunakan angka. Data ini diperoleh dari +hasil penyebaran kuesioner pengukuran usability dengan menggunakan metode +System Usability Scale. +3.3 Metode Penelitian + + Penelitian ini menerapkan metode User Centered Design (UCD) untuk +merancang design sistem informasi pemesanan tiket event. Metode User Centered +Design ini memungkinkan untuk mendesain sistem dengan menempatkan +pengguna sebagai fokus utama. Penelitian ini dilakukan dengan memahami secara +mendalam tentang kebutuhan, keinginan, dan keterbatasan pengguna. Sistem yang +dirancang diharapkan tidak hanya mudah digunakan, tetapi juga memberikan +pengalaman yang memuaskan bagi pengguna, sehingga dengan menggunakan +metode User Centered Design (UCD) diharapkan akan mendapatkan hasil sesuai +dengan yang diharapkan. +3.4 Tahapan Penelitian + + Tahapan penelitian dapat dilihat pada Gambar 3.1 dibawah ini. + + Gambar 3.1 Tahapan Penelitian + 25 + + Metode penelitian ini mencakup beberapa tahap utama yang dilakukan +secara sistematis untuk mencapai tujuan penelitian. Ada beberapa tahapan dalam +penelitian ini dimulai dari melakukan identifikasi masalah, pengumpulan data, +analisis konteks pengguna, analisis kebutuhan pengguna, perancangan design +interface, evaluation againts requirement, dan evaluasi hasil. Berikut adalah +penjelasan dari setiap tahapan pada Gambar 3.1 diatas. +3.4.1 Identifikasi Masalah + + Tahapan awal penelitian ini yaitu identifikasi masalah terkait sistem +informasi pemesanan tiket event. Masalah diidentifikasi melalui penyebaran +kuesioner kepada 60 responden. Pemilihan 60 responden didasarkan pada +aksesibilitas terhadap responden yang relevan, yaitu individu yang memiliki +pengalaman dalam melakukan pemesanan tiket event secara online. Jumlah +tersebut dinilai cukup untuk memperoleh data yang dibutuhkan dalam +mengidentifikasi kebutuhan pengguna berdasarkan pengalaman responden. +Kuesioner dibagikan kepada responden yang sering (3 – 5 kali dalam setahun) +menghadiri event untuk mengetahui pengalaman pengguna yang mencakup +kekurangan atau kelebihan yang mereka alami saat menggunakan sistem +informasi pemesanan tiket event secara online. + +3.4.2 Pengumpulan Data + Tahapan ini akan melakukan pengumpulan data melalui teknik kuesioner. + +Data yang dikumpulkan akan digunakan sebagai sumber acuan perancangan User +Interface pada sistem informasi pemesanan tiket event. Penyebaran kuesioner +dilakukan secara dua kali. Tujuan dari penyebaran kuesioner di awal sebelum +perancangan adalah untuk memahami kekurangan atau kelebihan dan +pengumpulan kebutuhan pengguna pada perancangan sistem pemesanan tiket +event secara online. Penyebaran kuesioner kedua dilakukan untuk pengujian hasil +rancangan desain sebagai evaluasi tingkat kegunaan (usability) dan kemudahan +pengguna. + + Kuesioner digunakan sebagai alat utama untuk mengumpulkan data yang +akurat. Prosesnya dimulai dengan pembuatan kuesioner, diikuti dengan + 26 + +penyebaran secara online kepada responden mulai dari usia remaja hingga dewasa +yang memiliki pengalaman dalam membeli tiket event melalui platform online. +Responden berasal dari berbagai latar belakang pekerjaan dan pendidikan, dengan +tingkat literasi teknologi yang bervariasi untuk mendapatkan sudut pandang yang +luas mengenai kemudahan dan pengalaman pengguna. + +3.4.3 Analisis Konteks Pengguna (Understand Context of Us) + Proses ini dimulai dengan memahami konteks pengguna, mencakup aspek + +teknis, sosial, organisasi, dan pribadi. Ini termasuk mengetahui identitas pengguna +aplikasi, tujuan penggunaan, dan situasi di mana aplikasi digunakan. Pemahaman +ini penting bagi pengembang untuk menciptakan produk yang tidak hanya +fungsional tetapi juga sesuai dengan target user persona. + +3.4.4 Analisis Kebutuhan Pengguna (Specify User Requirement) + Tahap ini melibatkan proses penting dalam menentukan kebutuhan + +pengguna atau user requirements. Ini mencakup analisis mendalam mengenai +harapan pengguna terhadap aplikasi dalam konteks kebutuhan mereka, serta +tujuan spesifik yang ingin dicapai melalui penggunaan aplikasi tersebut. +Pemahaman ini sangat penting untuk memastikan bahwa desain aplikasi yang +dibuat akan memenuhi kebutuhan dan mencapai tujuan yang telah ditetapkan. +a. Kebutuhan Pengguna + + Tahap ini melakukan analisa kebutuhan pengguna yang diperlukan dalam +sistem aplikasi pemesanan tiket event berbasis mobile. +b. Konteks Skenario + + Merancang kegiatan yang menjelaskan perilaku pengguna untuk sistem +aplikasi pemesanan tiket event. Penelitian ini, skenario konteks dibuat +berdasarkan analisis perilaku dan pengalaman pengguna sebelumnya. Skenario ini +mencakup tugas, subtugas pengguna, tujuan, serta penjelasan detail untuk setiap +skenario. Tujuannya adalah untuk menghasilkan informasi yang relevan dan +solusi yang akan mendukung perancang dalam mengembangkan desain pada +tahap berikutnya. + 27 + +3.4.5 Perancangan Desain Interface (Design Solution) + Fase perancangan ini, solusi dikembangkan berdasarkan kebutuhan + +pengguna yang telah diidentifikasi sebelumnya. Proses ini melibatkan beberapa +langkah, dimulai dari pembuatan konsep awal yang kasar hingga berakhir dengan +desain prototipe. +a. Userflow + + Fase ini membuat alur desain yang bertujuan untuk mempermudah +komunikasi desain, menyediakan dokumentasi yang jelas, dan memastikan fokus +desain tetap pada pengalaman pengguna. Userflow dapat mempermudah +pemahaman tentang alur desain dalam aplikasi. +b. Wireframe + + Tahap ini memetakan struktur, tata letak, dan fungsionalitas aplikasi. Proses +ini melibatkan penataan elemen-elemen desain dalam antarmuka pengguna +aplikasi. Desain wireframe akan mencakup low-fidelity yang menggambarkan +garis dasar, bentuk sederhana, dan teks placeholder. +c. Design Prototype + + Design prototype dirancang berdasarkan dari rancangan wireframe yang +diubah menjadi high-fidelity. Tampilan high-fidelity lebih detail dengan +penggunaan warna, jenis huruf yang mirip dengan produk final, gambar +placeholder yang relevan, dan elemen interaktif seperti tombol atau kontrol input. +Proses ini melibatkan pengembangan navigasi antar halaman, interaksi input +pengguna, dan respon aplikasi terhadap interaksi. Tujuannya adalah untuk +menguji konsep, mengumpulkan umpan balik, dan memastikan bahwa desain dan +fungsionalitas aplikasi memenuhi kebutuhan pengguna. + +3.4.6 Evaluate Against Requirements + Tahap ini, pengguna diminta untuk melakukan pengujian usability pada + +design prototype yang telah dibuat dan memberikan masukan. Proses ini +melibatkan pengumpulan pendapat dari pengguna mengenai kegunaan, +fungsionalitas, dan aspek estetika prototipe. Berdasarkan umpan balik yang +diterima, dilakukan serangkaian perbaikan dan penyesuaian pada desain atau + 28 + +dikenal sebagai iterasi desain. Tujuannya adalah untuk meningkatkan produk +sehingga lebih cocok dengan kebutuhan dan harapan pengguna. + + Usability testing pada penelitian ini dengan cara melalui penyebaran +kuesioner skala likert yang menggunakan metode System Usability Scale (SUS). +Peneliti membuat kuesioner dengan 10 pertanyaan dan 5 jawaban. Berdasarkan +hasil data yang diperoleh dari kuesioner usability testing, maka dilakukan +perhitungan tingkat usability dengan metode System Usability Scale (SUS). Hasil +perhitungan tersebut dapat menentukan tingkat usability melalui nilai rata-rata +pengujian. Daftar pertanyaan kuesioner metode System Usability Scale (SUS) +dapat dilihat pada Tabel 2.2. Pertanyaan – pertanyaan metode System Usability +Scale (SUS) dapat membantu mengetahui hasil pengujian dari desain yang +dirancang mulai dari sisi user interface hingga user experience. + +3.4.7 Evaluasi Hasil + Pada tahap ini, peneliti melakukan evaluasi dengan membandingkan hasil + +usability testing sebelum dan sesudah dilakukan iterasi desain. Selain itu, peneliti +juga melakukan analisis terhadap perubahan skor dan kategorisasi yang muncul, +untuk menilai sejauh mana perbaikan desain memberikan dampak terhadap +pengalaman pengguna. + +3.5 Pelaksanaan Penelitian + + Tabel 3.1 dibawah ini merupakan waktu pelaksanaan penelitian dengan + +rentang waktu 4 (empat) bulan. + +Tabel 3. 1 Pelaksanaan Penelitian + +No Kegiatan Bulan Bulan Bulan Bulan + + 1 2 3 4 + +1 Identifikasi Masalah + +2 Pengumpulan Data + +3 Analisis Konteks Pengguna + +4 Analisis Kebutuhan Pengguna + +5 Perancangan Desain Solusi + 29 + +No Kegiatan Bulan Bulan Bulan Bulan + + 1 2 3 4 + +6 Evaluate Againts Requirement +7 Evaluasi Hasil + BAB 4. HASIL DAN PEMBAHASAN + +4.1 Analisis Konteks Pengguna (Understand Context of Us) + +Pada tahap ini peneliti mengidentifikasi user persona dengan menggunakan + +hasil yang didapatkan dari penyebaran kuesioner kepada 60 responden + +berdasarkan pengumpulan kebutuhan pengguna. Data yang diperoleh dari + +kuesioner ini diambil untuk membuat kesimpulan karakteristik pengguna. Berikut + +adalah hasil user persona yang dapat dilihat pada Tabel 4.1 dibawah ini. + +Tabel 4.1 User Persona + + User Persona + +Demografi a. Umur : 18 - 26 tahun + + b. Jenis kelamin : Laki-laki / Perempuan + + c. Status : Mahasiswa dan Pekerja + +Perilaku a. Pernah menggunakan aplikasi pemesanan tiket event + + b. Sering menggunakan jaringan internet untuk + + mengakses sebuah aplikasi mobile + +Pain Poin a. Sering lupa tanggal mulai event setelah melakukan + + pemesanan tiket + + b. Kurangnya dalam opsi metode pembayaran tiket + + c. Sering mengalami kehabisan tiket terutama pada + + event yang besar + + d. Kesulitan dalam memesan tiket + +Goals a. Terdapat fitur pengingat event ditampilkan menu + + yang terintegrasi dengan kalender + + b. Tersedianya banyak opsi pembayaran tiket dengan + + tampilan pengguna dapat memilih satu metode + + pembayaran + + c. Terdapat fitur antrean, ditampilkan dengan pengguna + + memperoleh nomor antrean untuk mendapatkan + + giliran memesan tiket + + d. Kemudahan dalam alur pemesanan tiket ditunjukkan + + 30 + 31 + + User Persona + melalui navigasi yang jelas, sehingga tidak + menimbulkan kebingungan bagi pengguna + + Tabel 4.1 menyajikan ringkasan karakteristik pengguna yang akan menjadi +dasar pada tahap pengembangan selanjutnya. Karakteristik ini diperoleh dari +survei kuesioner yang melibatkan 60 responden. Hasil kuesioner tersebut diolah +dan dianalisis untuk membentuk user persona. User persona ini memberikan +gambaran lengkap mengenai pengguna, termasuk demografi, pola perilaku, +masalah yang sering dihadapi (pain poin), dan tujuan yang ingin dicapai (goals). +Analisis demografi dilakukan untuk mendapatkan pemahaman yang lebih +mendalam tentang pengguna. + + Analisis demografi dilakukan untuk mendapatkan gambaran yang jelas +mengenai karakteristik calon pengguna yang akan berpartisipasi dalam usability +testing. Data demografi, yang mencakup usia (18-26 tahun), jenis kelamin (laki- +laki atau perempuan), dan status (mahasiswa/i dan pekerja) digunakan untuk +memastikan bahwa peserta usability testing mewakili target pengguna yang +sebenarnya. Pemahaman perilaku pengguna menjadi langkah selanjutnya setelah +menganalisis demografi. + + Berdasarkan analisis perilaku, dapat diketahui bahwa pengguna memiliki +pengalaman menggunakan aplikasi pemesanan tiket event, menunjukkan kesiapan +mereka terhadap solusi digital dan pemahaman dasar tentang cara kerja aplikasi +serupa. Mereka juga sering menghadiri acara langsung seperti konser musik, +seminar, lokakarya, dan teater, yang menunjukkan minat kuat terhadap event. +Selain itu, mereka adalah pengguna aktif internet, yang membuktikan +kenyamanan dalam menggunakan aplikasi berbasis online dan kebutuhan akan +antarmuka yang intuitif. Namun, meskipun mereka aktif dan berpengalaman, +pengguna juga menghadapi beberapa masalah, yang diidentifikasi melalui analisis +pain poin dan goals. + + Identifikasi analisis pain poin dan goals, terungkap bahwa pengguna sering +kesulitan mengingat tanggal event setelah membeli tiket, sehingga mereka + 32 + +mengharapkan fitur pengingat yang lebih baik. Keterbatasan pilihan metode +pembayaran juga menjadi hambatan yang signifikan, menekankan pentingnya +integrasi opsi pembayaran yang lebih beragam. Ketersediaan tiket yang terbatas, +terutama untuk event populer, seringkali mengecewakan pengguna, sehingga +mereka menginginkan fitur antrian yang memberikan kesempatan yang lebih adil +dan terstruktur dalam mendapatkan tiket. Terakhir, kesulitan dalam proses +pemesanan tiket secara keseluruhan menunjukkan bahwa alur pemesanan perlu +disederhanakan agar lebih ramah pengguna. Pengembangan aplikasi dapat lebih +fokus pada solusi yang sesuai dan berfungsi baik dengan memahami karakteristik, +perilaku, dan tantangan yang dihadapi pengguna. + +4.2 Analisis Kebutuhan Pengguna (Specify User Requirement) + +Proses analisis kebutuhan pengguna mencakup dua tahapan, yaitu + +mengidentifikasi kebutuhan pengguna dan menentukan situasi konteks skenario. + +4.2.1 Kebutuhan Pengguna + +Identifikasi kebutuhan pengguna dalam tahapan ini dilakukan berdasarkan + +data analisis user persona yang ada pada Tabel 4.1. Berikut adalah detail + +kebutuhan pengguna yang dapat dilihat pada Tabel 4.2 dibawah ini. + +Tabel 4.2 Kebutuhan Pengguna + +Persona Needs Requirement + + a. Dapat memperoleh Fitur pengingat event yang + + informasi mengenai terintegrasi dengan kalender + + tanggal event dimulai + + b. Dapat memilih metode Tersedia beragam metode + +User pembayaran yang sesuai pembayaran agar pengguna + + dengan kebutuhan dapat memilih sesuai dengan + + pengguna kebutuhan + + c. Dapat informasi antrian Fitur live tracking antrian + + mengenai pemesanan tiket secara real-time + + yang akan mendatang + 33 + +Persona Needs Requirement + d. Dapat memesan tiket Alur pemesanan tiket yang + + dengan mudah sederhana dan antarmuka + pengguna yang memudahkan + interaksi pengguna + + Berdasarkan Tabel 4.2 dapat diketahui bahwa sistem ini dirancang untuk +memenuhi beragam kebutuhan pengguna, mulai dari kemudahan akses informasi +acara hingga fleksibilitas dalam metode pembayaran. Sistem juga menyediakan +fitur-fitur seperti pengingat event terintegrasi kalender, live tracking antrian, dan +antarmuka pengguna yang intuitif, sistem ini bertujuan untuk tidak hanya +meningkatkan optimalisasi proses pemesanan tiket, tetapi juga memberikan +pengalaman pengguna yang lebih personal, transparan, dan memuaskan. + +4.2.2 Konteks Skenario + +Konteks skenario disusun untuk mendeskripsikan tugas atau aktivitas yang + +diambil dari perilaku pengguna pada Tabel 4.1 user persona. Konteks skenario + +terdiri dari task, sub task, goals, deskripsi skenario yang dibuat. Berikut adalah + +konteks skenario yang dapat dilihat pada Tabel 4.3 dibawah ini. + +Tabel 4.3 Konteks Skenario + +No Task Sub Task Goals System + +1 Home Home Pengguna dapat Alur pada task home + + mengetahui event yaitu dapat + + yang tersedia dan fitur mengetahui dan + + apa saja yang tersedia mengakses apa saja + + Popular Pengguna dapat yang tersedia dalam + + Events mengetahui event home, seperti: + + yang sedang popular a. Popular Events + + Upcoming Pengguna dapat b. Upcoming Events + + Events mengetahui event c. Pencarian event + + yang akan datang dan menggunakan + 34 + +No Task Sub Task Goals System + + dapat mengikuti input kolom + + antrean sebelum d. Fitur pencarian + + penjualan tiket resmi berdasarkan + + dibuka kategori + + Pencarian Pengguna dapat e. Pencarian event + + event melakukan pencarian menggunakan + + event dengan filter + + menggunakan fitur + + pencarian dan filter + + berdasarkan kategori, + + tanggal, lokasi, dan + + kisaran harga tiket + +2 Book Detail Event Pengguna dapat Alur pada task book + +Event mengetahui informasi event yaitu: + + detail event dan a. Pada menu home + + memesan tiket pilih event + + Proses Pesan Pengguna diharapkan b. Pada halaman + + Tiket melakukan login detail event + + terlebih dahulu jika menentukan + + ingin memesan tiket jumlah tiket dan + + Pembayaran klik book + + Tiket c. Apabila sudah + + Pengguna dapat melakukan login, + pengguna dapat + memilih metode memasukkan + informasi data + pembayaran sesuai pengunjung + + dengan kebutuhan + + d. Pengguna memilih + + metode + 35 + +No Task Sub Task Goals System + + pembayaran + + e. Apabila data sudah + + lengkap dan benar, + + maka klik payment + +3 Tickets Menunggu Pengguna dapat Alur pada task tickets + +Order Pembayaran melihat detail tiket order yaitu dapat + + yang sudah dipesan mengetahui daftar + + dengan status tiket yang pernah + + menunggu dipesan terbagi + + pembayaran beberapa status, + + E-Tiket Pengguna dapat seperti: + + melihat detail e-tiket a. Waiting + + yang sudah dibayar b. My tickets + + c. History + + Riwayat Pengguna dapat + + Pesanan melihat riwayat + + pemesanan tiket untuk + + event – event yang + + telah berlangsung + +4 Saved Saved Events Pengguna dapat Alur pada task saved + +Events melihat event yang events yaitu dapat + + disimpan untuk dibeli melihat event yang + + disimpan dalam dua + + kategori, seperti: + + a. Upcoming event + + b. Past event + + Berdasarkan pada Tabel 4.3, dapat diketahui bahwa perilaku pengguna +dalam menggunakan aplikasi pemesanan tiket mencakup beberapa aktivitas +utama. Aktivitas tersebut meliputi pencarian dan penjelajahan daftar event yang + 36 + +tersedia, proses pemesanan tiket, penyelesaian pembayaran, penerimaan e-tiket, +serta penelusuran riwayat pesanan. Pola perilaku ini menunjukkan bahwa +pengguna secara aktif mengikuti alur fungsional utama aplikasi dari awal hingga +akhir, yang menjadi dasar penting dalam mengevaluasi desain antarmuka yang +telah dikembangkan. + +4.3 Perancangan Desain Interface dan Implementasi (Produce Design + Solution) + Proses perancangan desain interface dan implementasi terdiri dari tiga + +tahapan, yaitu userflow dan wireframe. +4.3.1 Userflow + + Userflow merupakan representasi alur interaksi pengguna dalam +menjalankan serangkaian proses pada aplikasi untuk mencapai tujuan tertentu. +Dalam konteks penelitian ini, userflow menggambarkan tahapan-tahapan yang +dilalui oleh pengguna saat menggunakan aplikasi pemesanan tiket event berbasis +mobile. Pemahaman terhadap userflow penting untuk memastikan bahwa seluruh +langkah dalam proses penggunaan aplikasi dapat berjalan dengan mudah dan +sesuai dengan kebutuhan pengguna. Berikut adalah userflow aplikasi pemesanan +tiket event berbasis mobile. +a. Log In + + Log in merupakan userflow untuk proses log in agar pengguna dapat +mengakses semua fitur dalam aplikasi. Tahap awal pengguna ketika membuka +aplikasi tampilan awal yaitu splashscreen. Pengguna klik tombol continue maka +menampilkan menu utama aplikasi yaitu home. Pengguna harus melakukan log in +dahulu agar dapat mengakses fitur – fitur dalam aplikasi. Log in dapat dilakukan +melalui menu home pada header bar maupun menu profile dengan cara klik +tombol label log in here, maka akan menampilkan halaman log in. Tahap +selanjutnya pengguna memasukkan email dan password akun yang telah terdaftar, +setelah itu sistem akan otomatis memeriksa apakah email dan password yang +dimasukkan valid. Email dan password apabila valid maka tombol log in aktif, +namun apabila tidak valid maka input kolom menampilkan notification wrong + 37 + +serta tombol log in masih disable, sehingga pengguna perlu memasukkan ulang +email dan password dengan benar. Setelah email dan password valid, maka +pengguna klik tombol log in agar pengguna dapat mengakses fitur – fitur utama +pada aplikasi. Userflow log in dapat dilihat pada Gambar 4.1 dibawah ini. + + Gambar 4.1 Userflow Log In +b. Sign Up + + Sign up merupakan userflow untuk proses daftar akun, ketika pengguna +belum memiliki akun. Tahap awal pengguna harus membuka halaman log in, +kemudian klik tombol label sign up maka menampilkan halaman sign up. Tahap +selanjutnya pengguna memasukkan data yaitu nama, email, dan password. Sistem +akan otomatis memeriksa apakah email sesuai dengan format email dan password +sesuai dengan kriteria. Email dan password apabila valid maka tombol sign up +aktif, namun apabila tidak valid maka input kolom menampilkan notification + 38 + +wrong serta tombol sign up masih disable, sehingga pengguna perlu memasukkan +ulang email dan password dengan benar. Setelah email dan password valid, maka +pengguna klik tombol sign up kemudian menampilkan pop up berhasil sign up. +Userflow sign up dapat dilihat pada Gambar 4.2 dibawah ini. + + Gambar 4.2 Userflow Sign Up +c. Forgot Password + + Forgot password merupakan userflow untuk proses lupa kata sandi. Tahap +awal pengguna harus membuka halaman log in, kemudian klik tombol label forgot +password, maka akan menampilkan halaman forgot password. Tahap selanjutnya +pengguna memasukkan email yang telah terdaftar, kemudian sistem memeriksa +apakah email telah terdaftar. Tombol send recovery aktif apabila benar, namun +jika tidak maka input kolom menampilkan notification wrong dan pengguna perlu +memasukkan ulang email. Klik tombol send recovery email setelah di verifikasi +terdaftar, maka sistem beralih ke halaman verification code untuk pengguna +memasukkan verification code yang dikirim melalui email. Verification code +apabila valid maka pengguna klik tombol verify untuk melanjutkan proses +berikutnya, namun apabila code tidak valid maka input kolom menampilkan + 39 +notification wrong sehingga klik tombol try again untuk memasukkan ulang code +dengan benar. Setelah verify sistem akan menampilkan pop up berhasil verifikasi +code, kemudian sistem beralih ke halaman create new password untuk pengguna +membuat password baru. Pengguna harus memasukkan password baru, sistem +otomatis memeriksa apakah password tersebut sudah sesuai dengan kriteria. +Apabila tidak valid maka pengguna perlu membuat password ulang, namun +apabila valid maka klik tombol reset password, kemudian sistem menampilkan +pop up berhasil password update. Sehingga pengguna dapat log in dengan +menggunakan password yang baru dibuat. Userflow forgot password dapat dilihat +pada Gambar 4.3 dibawah ini. + + Gambar 4.3 Userflow Forgot Password + 40 + +d. Book Event + Book event merupakan userflow untuk proses pesan tiket event. Tahap awal + +pengguna harus membuka menu home. Tahap selanjutnya pengguna memilih +event dengan klik tombol book now, pengguna dapat memilih langsung pada +section popular event maupun dengan cara klik label tombol see all untuk melihat +semua daftar list popular event yang tersedia. Setelah itu pengguna akan melihat +informasi detail event, untuk memesan tiket pengguna klik section tab ticket +kemudian pilih type ticket dengan mengklik tombol dropdown select. Pengguna +dapat melihat event tersebut apakah terdapat opsi pilih tanggal atau sessions, +apabila ada maka pengguna perlu memilih tanggal atau sessions terlebih dahulu. +Kemudian jika tidak ada opsi, maka pengguna dapat langsung menentukan jumlah +tiket yang akan dibeli dengan klik tombol operator plus. Klik tombol book maka +akan menampilkan halaman checkout untuk lanjut ke tahap pembelian tiket. Pada +tahap pembelian tiket pengguna harus mengisi data pengunjung dan memilih +metode pembayaran. Setelah tahap tersebut dilakukan pengguna dapat melakukan +review pembelian sebelum melakukan pembayaran. Apabila data sudah benar +pengguna perlu checklist terms and conditions lalu klik tombol payment untuk +pengguna melakukan pembayaran. Userflow book event dapat dilihat pada +Gambar 4.4 dibawah ini. + 41 +Gambar 4.4 Userflow Book Event + 42 + +e. Join Queue + Join queue merupakan userflow untuk proses fitur antrean sebelum + +penjualan tiket resmi dibuka. Tahap awal pengguna harus membuka menu home. +Tahap selanjutnya pengguna memilih event dengan klik tombol join queue, +pengguna dapat memilih langsung pada section upcoming event maupun dengan +cara klik label tombol see all untuk melihat semua daftar list upcoming event yang +tersedia. Setelah itu pengguna akan melihat informasi detail event, untuk +mengikuti antrean pengguna klik tombol join queue maka sistem beralih ke +halaman waiting room. Pada halaman tersebut pengguna akan mendapatkan +nomor antrean dan pengguna menunggu waktu gilirannya untuk memesan tiket. +Setelah waktu gilirannya mulai maka akan beralih ke halaman book event untuk +memilih type ticket dengan mengklik tombol dropdown select. Pengguna dapat +melihat event tersebut apakah terdapat opsi pilih tanggal atau sessions, apabila ada +maka pengguna perlu memilih tanggal atau sessions terlebih dahulu. Kemudian +jika tidak ada opsi, maka pengguna dapat langsung menentukan jumlah tiket yang +akan dibeli dengan klik tombol operator plus. Klik tombol book untuk lanjut ke +tahap pembelian tiket. Pada tahap pembelian tiket pengguna harus mengisi data +pengunjung dan memilih metode pembayaran. Setelah tahap tersebut dilakukan +pengguna dapat melakukan review pembelian sebelum melakukan pembayaran. +Apabila data sudah benar pengguna perlu checklist terms and conditions lalu klik +tombol payment untuk pengguna melakukan pembayaran. Userflow join queue +dapat dilihat pada Gambar 4.5 dibawah ini. + 43 +Gambar 4.5 Userflow Join Queue + 44 + +f. Filter Pencarian Event + Fitur pencarian event merupakan userflow untuk proses pencarian event + +menggunakan filter. Tahap awal pengguna akses halaman yang terdapat fitur +filter, klik icon filter maka sistem menampilkan bottomsheet filter. Sistem +memberikan opsi untuk filter yaitu terdapat event type, event date, location, dan +ticket price range. Pengguna dapat mencari event dengan menggunakan semua +opsi filter atau hanya salah satu dari opsi filter, kemudian klik tombol apply maka +halaman tersebut akan ditampilkan berdasarkan filter. Userflow filter pencarian +event dapat dilihat pada Gambar 4.6 dibawah ini. + + Gambar 4.6 Userflow Fitur Pencarian Event +g. Fitur Search Bar + + Fitur search bar merupakan userflow untuk proses pencarian event +menggunakan fitur search bar. Tahap awal pengguna akses halaman yang terdapat + 45 + +fitur search bar, kemudian klik icon search event bar. Pengguna dapat +memasukkan keyword nama event yang ingin dicari pada kolom input. Keyword +yang dimasukan apabila ditemukan maka halaman akan menampilkan event +berdasarkan keyword, namun apabila tidak ditemukan maka halaman akan +menampilkan not found. Userflow fitur search bar dapat dilihat pada Gambar 4.7 +dibawah ini. + + Gambar 4.7 Userflow Fitur Search Bar +h. Payment Status + + Payment status merupakan userflow untuk melihat detail status pembayaran. +Tahap awal pengguna harus membuka menu tickets, kemudian klik section tab +waiting maka sistem menampilkan list ticket order yang sedang menunggu +pembayaran. Tahap selanjutnya klik tombol view details untuk melihat detail +payment status, apabila pengguna ingin melakukan pembayaran maka dapat +langsung salin nomor virtual account dengan cara klik icon copy. Setelah itu, +pengguna dapat langsung melakukan pembayaran sesuai dari metode pembayaran +tersebut. Userflow payment status dapat dilihat pada Gambar 4.8 dibawah ini. + 46 + + Gambar 4.8 Userflow Payment Status +i. View Detail Ticket + + View detail ticket merupakan userflow untuk melihat detail ticket dengan +status telah dilakukan pembayaran. Tahap awal pengguna harus membuka menu +tickets. kemudian klik section tab my tickets maka sistem menampilkan tiket event +dengan tampilan kalender. Tahap selanjutnya, klik foto atau icon event pada +tanggal kalender maka menampilkan halaman ticket detail. Pada halaman detail +tiket pengguna dapat mengunduh ticket kedalam device, melihat lokasi event +dengan klik tombol view maps, dan melihat halaman detail event dengan klik +tombol event details. Userflow view detail ticket dapat dilihat pada Gambar 4.9 +dibawah ini. + 47 + + Gambar 4.9 Userflow Detail Ticket +j. View Detail History + + View detail history merupakan userflow untuk melihat detail history ticket +event yang telah berlangsung. Tahap awal pengguna harus membuka menu tickets, +kemudian klik section tab history maka sistem menampilkan list history ticket. + 48 +Pada history ticket terdapat dua status yaitu paid untuk tiket yang telah dibayar +dan payment expired untuk tiket yang melewati batas pembayaran. Klik area card +ticket tersebut maka akan beralih ke halaman detail ticket berdasarkan history +ticket yang dipilih. Userflow view detail history dapat dilihat pada Gambar 4.10 +dibawah ini. + + Gambar 4.10 Userflow Detail History +k. Fitur Saved Events + + Fitur saved events merupakan userflow untuk proses fitur menyimpan event, +agar pengguna mudah menemukan kembali event tersebut tanpa perlu mencari +dari awal. Tahap awal pengguna harus membuka menu home, kemudian klik icon + 49 +bookmark pada card events, maka event tersebut berhasil disimpan dengan tanda +icon bookmark aktif atau berwarna biru. Pengguna klik menu saved untuk melihat +event yang disimpan, maka sistem menampilkan halaman saved yang terdapat dua +section tab yaitu upcoming events (event yang belum berlangsung) dan past events +(event yang telah berlangsung). Userflow fitur saved events dapat dilihat pada +Gambar 4.11 dibawah ini. + + Gambar 4.11 Userflow Fitur Saved Events + 50 + +l. Notification + Notification merupakan userflow untuk melihat halaman notifikasi. Tahap + +awal pengguna harus membuka menu home, kemudian klik icon notification pada +header bar maka sistem akan menampilkan halaman notification. Pengguna dapat +melihat berbagai notification ketika berhasil melakukan booking, payment, +maupun aktivitas lainnya. Userflow notification dapat dilihat pada Gambar 4.12 +dibawah ini. + + Gambar 4.12 Userflow Notification +m. Detail Event + + Detail event merupakan userflow untuk melihat halaman informasi detail +event. Tahap awal pengguna membuka menu home, kemudian klik area card event +yang menampilkan halaman detail event. Pengguna dapat melihat berbagai section +tab yaitu description untuk informasi tentang event, location untuk melihat detail +lokasi event yang juga dapat langsung mengarah ke google maps dengan klik +tombol view maps, ticket untuk melihat list type ticket dari event, dan terms and +conditions dari event. Userflow detail event dapat dilihat pada Gambar 4.13 +dibawah ini. + 51 + + Gambar 4.13 Userflow Detail Event +n. Edit Personal Data + + Edit personal data merupakan userflow untuk proses edit informasi data +pribadi. Tahap awal pengguna harus membuka menu profile, kemudian klik sub +menu personal data maka menampilkan halaman detail personal data. Pada edit +personal data, pengguna dapat melakukan dua kategori edit. Pertama, edit + 52 +informasi data dengan klik tombol edit personal data lalu mengubah informasi +data. Kedua, edit profile photo dengan klik tombol change profile photo, +pengguna memilih foto dan mengatur foto kemudian klik label tombol save. +Pengguna setelah melakukan pengeditan pada profile photo maupun informasi +data personal, pengguna harus klik tombol update maka sistem akan menampilkan +pop up profile updated. Userflow edit personal data dapat dilihat pada Gambar +4.14 dibawah ini. + + Gambar 4.14 Userflow Edit Personal Data + 53 + +o. Ubah Password + Ubah password merupakan userflow untuk proses ubah kata sandi. Tahap + +awal pengguna harus membuka menu profile, kemudian klik sub menu account +settings yang menampilkan halaman account setting. Tahap selanjutnya klik +tombol change password yang beralih ke halaman change password untuk +mengubah password dari lama ke password baru. Pengguna memasukkan +password lama dan password baru, kemudian sistem otomatis memeriksa apakah +password baru sesuai kriteria. Apabila password tidak sesuai kriteria maka perlu +membuat ulang password baru. Setelah itu jika password sesuai kriteria, maka +pengguna klik tombol save kemudian sistem menampilkan pop up berhasil ubah +password. Userflow ubah password dapat dilihat pada Gambar 4.15 dibawah ini. + + Gambar 4.15 Userflow Ubah Password + 54 + +p. Notification Setting + Notification setting merupakan userflow untuk proses fitur notification + +setting. Tahap awal pengguna harus membuka menu profile, kemudian klik sub +menu notification maka sistem menampilkan halaman notification setting. +Pengguna dapat mengatur notifikasi pada aktifitas – aktifitas yang tersedia dengan +cara klik tombol switch, apabila kondisi tombol switch on maka notifikasi +aktivitas tersebut menyala begitupun dengan sebaliknya. Userflow notification +setting dapat dilihat pada Gambar 4.16 dibawah ini. + + Gambar 4.16 Userflow Notification Setting +q. Help Center + + Help center merupakan userflow untuk melihat informasi help center. Tahap +awal pengguna harus membuka menu profile, kemudian klik sub menu help +center maka sistem menampilkan halaman help center. Pada halaman help center +terdapat dua section tab yaitu FAQ untuk list pertanyaan umum mengenai aplikasi +yang disertai jawaban dan contact us untuk informasi kontak aplikasi yang dapat +dihubungi apabila terdapat kendala. Pengguna ketika pilih section tab maka +halaman akan ditampilkan berdasarkan section tab yang dipilih. Userflow help +center dapat dilihat pada Gambar 4.17 dibawah ini. + 55 + + Gambar 4.17 Userflow Help Center +r. Terms and Conditions + + Terms and conditions merupakan userflow untuk melihat informasi syarat +dan ketentuan aplikasi. Tahap awal pengguna harus membuka menu profile, +kemudian klik sub menu terms and conditions maka sistem akan menampilkan +halaman terms and conditions. Halaman terms and conditions akan memberikan +detail informasi mengenai persyaratan dan ketentuan apa saja yang berlaku pada +aplikasi. Userflow terms and conditions dapat dilihat pada Gambar 4.18 dibawah +ini. + + Gambar 4.18 Userflow Terms and Conditions + 56 + +s. Log Out + Log out merupakan userflow untuk proses keluar akun dari aplikasi. Tahap + +awal pengguna harus membuka menu profile, kemudian klik sub menu log out +maka sistem akan menampilkan pop up confirmation dengan terdapat dua tombol +action. Pertama yaitu tombol cancel untuk pengguna yang tidak jadi melakukan +log out, maka sistem akan menampilkan kembali pada menu profile. Kedua yaitu +tombol log out untuk pengguna yang jadi melakukan log out, maka sistem akan +menampilkan halaman log in. Userflow log out dapat dilihat pada Gambar 4.19 +dibawah ini. + + Gambar 4.19 Userflow Log Out +4.3.2 Wireframe + + Wireframe merupakan rancangan awal berupa kerangka visual aplikasi +sebagai dasar perancangan antarmuka pengguna. Wireframe dibuat secara low- +fidelity dengan menggambarkan susunan tata letak, elemen utama, dan navigasi +antarmuka aplikasi tanpa memasukkan detail desain seperti warna atau gambar. + 57 + +Proses pembuatan wireframe menggunakan tools Figma. Berikut adalah +rancangan wireframe aplikasi pemesanan tiket event berbasis mobile. +a. Halaman Log In + + Halaman log in merupakan sebuah fitur auntentikasi untuk pengguna dapat +mengakses semua fitur pada aplikasi. Tampilan halaman log in dapat dilihat pada +Gambar 4.20 dibawah ini. + + Gambar 4.20 Wireframe Halaman Log In + Gambar 4.20 merupakan tampilan halaman log in, pada halaman ini akan +menampilkan logo, nama aplikasi, dan narasi singkat untuk memperkenalkan +identitasnya kepada pengguna baru. Halaman log in juga akan menampilkan input +kolom email dan password, tombol log in, serta label tombol lainnya untuk +beralih ke fitur lainnya seperti forgot password dan sign up. +b. Halaman Sign Up + Halaman sign up merupakan sebuah fitur auntentikasi pengguna untuk +mendaftarkan pengguna baru ke dalam aplikasi. Tampilan halaman sign up dapat +dilihat pada Gambar 4.21 dibawah ini. + 58 + + Gambar 4.21 Wireframe Halaman Sign Up + Gambar 4.21 merupakan tampilan halaman sign up, pada halaman ini akan +menampilkan input kolom nama, email, dan password. Halaman sign up juga +menampilkan tombol sign up untuk konfirmasi telah mendaftar, serta label tombol +beralih ke halaman log in dan terms and conditions. +c. Menu Home + Menu home merupakan menu utama atau tampilan utama aplikasi yang +memberikan akses ke fitur – fitur utama. Tampilan menu home dapat dilihat pada +Gambar 4.22 dibawah ini. + 59 + + Gambar 4.22 Wireframe Menu Home + Gambar 4.22 merupakan tampilan menu home, pada menu ini akan +menampilkan berbagai section. Pertama terdapat section header bar yang meliputi +foto profile pengguna, kalimat sapaan, dan fitur notifikasi. Kedua terdapat section +navigation yang meliputi search bar serta fitur filter berupa bottomsheet dan tab. +Ketiga section content yang berupa card dengan menampilkan informasi popular +event dan upcoming event. Pada section content popular event menampilkan foto +icon event, icon save, judul, tanggal, lokasi, harga tiket, dan tombol pesan tiket. +Sedangan section content upcoming events menampilkan foto icon event, tanggal +event berlangsung, icon save, judul, dan daftar peserta join antrean event. +Kemudian terdapat section utama aplikasi yaitu navigation menu bar yang terdiri +dari menu home, tickets, saved, dan profile. +d. Menu Tickets + Menu tickets merupakan menu pesanan tiket event yang telah di pesan oleh +pengguna. Tampilan menu tickets dapat dilihat pada Gambar 4.23 dibawah ini. + 60 + + Gambar 4.23 Wireframe Menu Tickets + Gambar 4.23 merupakan tampilan menu tickets, pada menu ini +menampilkan judul menu di header bar dan navigation menu bar di bottom. Menu +tickets juga akan terdapat tiga section tab yaitu, waiting, my ticket, dan history. +Tampilan awal menu tickets adalah section tab waiting (gambar bagian kiri). +Section tab waiting digunakan untuk pesanan tiket yang sedang menunggu +pembayaran, kemudian ditampilkan berupa card list yang terdapat foto icon event, +judul event, total pembayaran, dan durasi waktu pembayaran. Tampilan card list +dapat digerakkan dengan cara scrolling secara vertical. + Section tab my tickets (gambar bagian tengah) digunakan untuk pesanan +tiket yang telah dilakukan pembayaran dan event yang akan berlangsung. My +tickets ditampilkan berupa kalender, tanggal yang terdapat jadwal event +berlangsung maka ditandai dengan foto icon event yang berbentuk rounded. +Tampilan kalender dapat digerakkan dengan cara scrolling secara vertical. + Section tab history (gambar bagian kanan) digunakan untuk riwayat pesanan +tiket event yang telah berlangsung, kemudian ditampilkan berupa card list yang +terdapat id pesanan, status ticket (paid dan payment expired), foto icon event, +judul event, tanggal dan waktu event, lokasi event, dan total pembayaran. +Tampilan card list dapat digerakkan dengan cara scrolling secara vertical. + 61 + +e. Menu Saved + Menu saved merupakan menu untuk melihat event yang telah disimpan oleh + +pengguna melalui fitur save. Tampilan menu saved dapat dilihat pada Gambar +4.24 dibawah ini. + + Gambar 4.24 Wireframe Menu Saved + Gambar 4.24 merupakan tampilan menu saved, pada menu ini menampilkan +judul menu dan filter di header bar serta navigation menu bar di bottom. Menu +saved juga akan terdapat dua section tab yaitu, upcoming event dan past event. +Tampilan awal menu saved adalah section tab upcoming event (gambar bagian +kiri). Section tab upcoming event digunakan untuk list event yang akan +berlangsung. + Section tab past event (gambar bagian kanan) digunakan untuk list event +yang telah berlangsung. Tampilan list event berupa card list yang terdapat foto +icon event, judul, tanggal, lokasi, fitur save, dan harga tiket. Tampilan card list +dapat digerakkan dengan cara scrolling secara vertical. +f. Menu Profile + Menu profile merupakan menu yang memberi akses pengelolaan akun +pengguna, termasuk informasi pribadi, preferensi, keamanan serta memberikan + 62 + +akses dukungan dan bantuan tentang aplikasi. Tampilan menu profile dapat dilihat +pada Gambar 4.25 dibawah ini. + + Gambar 4.25 Wireframe Menu Profile + Gambar 4.25 merupakan tampilan menu profile, pada menu ini +menampilkan foto profile, nama pengguna, dan alamat pengguna di header bar +serta navigation menu bar di bottom. Menu profile juga terdapat beberapa sub +menu dalam bentuk list yaitu personal data, account settings, notification settings, +help center, terms and conditions, dan fitur logo out. Sub menu personal data +digunakan untuk edit informasi pengguna baik data diri maupun foto profile. Sub +menu account settings merupakan fitur untuk ubah kata sandi akun. Sub menu +notification settings digunakan untuk mengatur aktivitas notifikasi apa saja yang +ditampilkan. Sub menu help center merupakan pusat kontak informasi seputar +aplikasi yaitu terdapat FAQ dan contact us. Sub menu terms and conditions +merupakan halaman tentang syarat ketentuan yang berlaku pada aplikasi. Terakhir +adalah fitur log out untuk pengguna yang ingin keluar akun dari aplikasi. +g. Fitur Pesan Tiket + Fitur pesan tiket merupakan fitur utama aplikasi. Tampilan proses fitur +pesan tiket dapat dilihat pada Gambar 4.26 dibawah ini. + 63 + + Gambar 4.26 Wireframe Halaman Detail Event + Gambar 4.26 merupakan halaman detail event atau tampilan proses awal +untuk fitur pesan tiket, pada saat user telah menekan tombol pesan tiket di menu +home maka akan menampilkan halaman detail event. Halaman ini menampilkan +foto icon event, icon cancel, icon fitur save, dan icon fitur share di header bar. +Kemudian terdapat judul event, tanggal dan lokasi event, serta terdapat empat +section tab yaitu description, location, ticket, dan terms conditions. Tampilan +awal halaman detail event adalah section tab ticket. Section tab ticket merupakan +akses untuk membeli tiket yang menampilkan list type ticket pada event. Card +ticket menampilkan judul type, status ketersediaan tiket, deskripsi singkat, harga +tiket, dan tombol untuk memilih tiket. Kemudian, pada saat pengguna telah +memilih tiket maka akan beralih ke halaman checkout. Berikut adalah tampilan +halaman checkout dapat dilihat pada Gambar 4.27 dibawah ini. + 64 + + Gambar 4.27 Wireframe Halaman Checkout + Gambar 4.27 merupakan tampilan halaman checkout, pada halaman ini +menampilkan judul menu dan icon cancel di header bar, stepper pembelian tiket, +dan tombol continue di bottom. Proses pembelian tiket terdapat informasi data +pengunjung, metode pembayaran, dan review pesanan. Pada halaman informasi +data pengunjung (gambar bagian kiri) menampilkan card informasi data pengguna +atau pembeli dengan tampilan input kolom nama, email, no telepon, dan no +identitas. Setelah itu, dibawah informasi tersebut terdapat card informasi data +pengunjung yang menampilkan judul type ticket dan tombol tambah data. Apabila +data pengunjung telah diisi maka card informasi data pengunjung menampilkan +judul type ticket, nama pengunjung, dan tombol ubah data. Kemudian beralih ke +proses metode pembayaran. + Halaman proses metode pembayaran (gambar bagian tengah) menampilkan +judul stepper, judul kategori pembayaran, list metode pembayaran, dan tombol +continue di bottom. Pemilihan metode pembayaran ini menggunakan model radio +button, saat dipilih maka radio button tersebut aktif. Kemudian beralih ke proses +review pesanan. + Halaman proses review (gambar bagian kanan) terdapat beberapa section +yaitu informasi detail tiket, detail pengunjung, dan detail pembayaran, serta + 65 + +tombol payment di bottom untuk melanjutkan proses ke pembayaran tiket. Section +detail tiket menampilkan foto icon event, judul, tanggal dan lokasi event. Section +detail pengunjung menampilkan judul type ticket dan nama pengunjung. Section +detail pembayaran menampilkan foto metode pembayaran, harga tiket, sub total, +pajak, dan total pembayaran. +h. Fitur Join Antrean + + Fitur join antrean merupakan fitur utama aplikasi. Tampilan proses fitur join +antrean dapat dilihat pada Gambar 4.28 dibawah ini. + + Gambar 4.28 Wireframe Halaman Waiting room + Gambar 4.28 merupakan halaman waiting room untuk proses fitur join +antrean. Pada saat user telah menekan tombol join queue di menu home maka +beralih ke halaman waiting room awal (gambar bagian kiri) yang menampilkan +judul dan icon cancel di header bar dan informasi detail event. Informasi detail +event terdapat foto icon, judul, dan deskripsi event, terms and conditions, serta +tombol join untuk mendaftarkan pengguna kedalam antrean. Kemudian beralih ke +proses menunggu antrean. + Halaman waiting room kedua yaitu menunggu antrean (gambar bagian +kanan) menampilkan judul dan icon cancel di header bar, foto icon event, judul, + 66 + +nomor antrean, tanggal dan waktu event, durasi antrean, dan narasi singkat tentang +peringatan tidak keluar antrean. Kemudian, apabila giliran dimulai maka beralih +ke halaman checkout. Tampilan halaman checkout dapat dilihat pada Gambar 4.29 +dibawah ini. + + Gambar 4.29 Wireframe Halaman Checkout Proses 1 dan 2 + Gambar 4.29 merupakan tampilan halaman checkout di fitur join antrean, +pada halaman ini menampilkan judul menu dan icon cancel di header bar, stepper +pembelian tiket, dan list type tiket. Proses pembelian tiket terdapat pilih type tiket, +informasi data pengunjung, metode pembayaran, dan review pesanan. Pada +halaman pilih type ticket (gambar bagian kiri) menampilkan type tiket yang +terdapat pada event dengan model card list. Card ticket menampilkan judul type, +status ketersediaan tiket, deskripsi singkat, harga tiket, dan tombol untuk memilih +tiket. Kemudian beralih ke proses informasi data pengunjung. + Halaman informasi data pengunjung (gambar bagian kanan) menampilkan +card informasi data pengunjung dengan tampilan input kolom nama, email, no +telepon, dan no identitas, serta tombol continue di bottom untuk melanjutkan +proses pembelian tiket. Kemudian beralih ke proses metode pembayaran dan +review pesanan, dapat dilihat pada Gambar 4.30 dibawah ini. + 67 + + Gambar 4.30 Wireframe Halaman Checkout Proses 3 dan 4 + Gambar 4.30 merupakan tampilan proses metode pembayaran dan review +pesanan. Halaman metode pembayaran (gambar bagian kiri) menampilkan judul +stepper, judul kategori pembayaran, list metode pembayaran, dan tombol continue +di bottom untuk melanjutkan proses pembelian tiket. Pemilihan metode +pembayaran ini menggunakan model radio button, saat dipilih maka radio button +tersebut aktif. Kemudian beralih ke proses review pesanan. + Halaman review pesanan (gambar bagian kanan) terdapat beberapa section +yaitu informasi detail tiket, detail pengunjung, dan detail pembayaran, serta +tombol payment di bottom untuk melanjutkan proses ke pembayaran tiket. Section +detail tiket menampilkan foto icon event, judul, tanggal dan lokasi event. Section +detail pengunjung menampilkan judul type ticket dan nama pengunjung. Section +detail pembayaran menampilkan foto metode pembayaran, harga tiket, sub total, +pajak, dan total pembayaran. +4.4 Design Prototype 1 + Design Prototype adalah perancangan user interface, navigasi, dan alur +interaksi yang memiliki tampilan high-fidelity. Design prototype 1 merupakan +rancangan desain tahap awal sebelum melakukan usability testing. Desain aplikasi + 68 + +ini dirancang berdasarkan hasil analisa kebutuhan pengguna. Proses pembuatan +design prototype menggunakan tools Figma. Link figma interatif pada design +prototype: https://figma.fun/SUJ7mL. Berikut adalah design prototype tahap 1. +4.4.1 Halaman Log In + + Halaman log in adalah halaman autentikasi pengguna yang berfungsi untuk +memastikan bahwa hanya pengguna yang telah mendaftar akun dapat mengakses +semua fitur pada aplikasi. Halaman ini memuat perintah berupa input email dan +password, ketika input kolom belum terisi maka tombol log in akan disable. +Tampilan halaman log in ditampilkan pada Gambar 4.31 dibawah ini. + + Gambar 4.31 Desain Halaman Log In + Interaksi prototipe pada halaman log in, ketika pengguna melakukan tap +pada komponen yang memiliki keterhubungan ke frame lain, sistem akan +menjalankan aksi navigate to disertai dengan animasi smart animate berdurasi +300ms. Kemudian, ketika pengguna berhasil log in maka sistem akan +menampilkan pop up yang menjalankan aksi open overlay disertai animation +disolve in dengan interaction after delay selama 1300ms. Alur prototype dari +halaman log in ditampilkan pada Gambar 4.32 dibawah ini. + 69 + + Gambar 4.32 Prototipe Halaman Log In +4.4.2 Halaman Sign Up + + Halaman sign up adalah halaman daftar akun bagi pengguna yang belum +memiliki akun untuk masuk kedalam aplikasi. Halaman ini memuat perintah +berupa input nama, email, dan password, ketika input kolom belum terisi maka +tombol sign up akan disable. Tampilan halaman sign up ditampilkan pada Gambar +4.33 dibawah ini. + + Gambar 4.33 Desain Halaman Sign Up + Interaksi prototipe pada halaman sign up, ketika pengguna melakukan tap +pada komponen yang memiliki keterhubungan ke frame lain, sistem akan +menjalankan aksi navigate to disertai dengan animasi smart animate berdurasi +300ms. Kemudian, ketika pengguna berhasil sign up maka sistem akan + 70 + +menampilkan pop up yang menjalankan aksi open overlay disertai animation +disolve in dengan interaction after delay selama 1300ms. Alur prototype dari +halaman sign up ditampilkan pada Gambar 4.34. + + Gambar 4.34 Prototipe Halaman Sign Up +4.4.3 Menu Home + + Menu home adalah menu utama pengguna dapat mengakses semua fitur +yang ada dalam aplikasi. Menu home memuat informasi popular event dan +upcoming event yang tersedia. Popular events merupakan event yang akan +berlangsung. Sedangkan, upcoming events merupakan event yang belum resmi +dijual, namun terdapat fitur antrean untuk memesan tiket dahulu agar pengguna +tidak kehabisan tiket. Tampilan menu home ditampilkan pada Gambar 4.35 +dibawah ini. + + Gambar 4.35 Desain Menu Home + 71 + + Interaksi prototipe pada menu home, ketika pengguna melakukan tap pada +komponen yang memiliki keterhubungan ke frame lain, sistem akan menjalankan +aksi navigate to disertai dengan animasi smart animate berdurasi 300ms. Ketika +pengguna tap icon filter maka menampilkan bottomsheet dengan interaksi aksi +open overlay bottom center disertai dengan animasi smart move in up berdurasi +300ms. Alur prototipe dari menu home ditampilkan pada Gambar 4.36. + + Gambar 4.36 Prototipe Menu Home + +4.4.4 Menu Tickets + Menu tickets adalah menu untuk mengakses pesanan. Menu tickets memuat + +section tab waiting, my tickets, dan history. Tampilan awal menu tickets adalah +section tab waiting. Section tab waiting digunakan untuk status pesanan yang +sedang menunggu pembayaran. Halaman ini dirancang sebagai solusi atas konteks +skenario terhadap sub task menunggu pembayaran, sebagaimana dijelaskan pada +Tabel 4.3. Pengguna ketika ingin melihat detail payment status maka dapat klik +area card. Halaman detail payment status dari section tab waiting memuat durasi +sisa waktu pembayaran, nomor virtual account, detail pembayaran, detail +pesanan, dan detail cara pembayaran. Tampilan menu tickets section tab waiting +dan detail payment status ditampilkan pada Gambar 4.37 dibawah ini. + 72 + + Gambar 4.37 Desain Menu Tickets Section Tab Waiting + Section tab my tickets digunakan untuk status pesanan yang telah dibayar +dan menunggu event berlangsung. Halaman ini dirancang sebagai solusi atas +kebutuhan pengguna terhadap fitur pengingat event yang terintegrasi dengan +kalender, sebagaimana dijelaskan pada Tabel 4.2. Menu ini terhubung langsung +dengan kalender pada perangkat pengguna, sehingga ketika terdapat jadwal acara +pada tanggal tertentu, sistem akan secara otomatis memberikan pengingat melalui +notifikasi. Push notification tersebut akan muncul menjelang waktu pelaksanaan +event, sehingga membantu pengguna untuk tidak melewatkan acara yang telah +dijadwalkan. + Pengguna ketika ingin melihat detail tiket maka dapat klik icon foto pada +tanggal kalender. Halaman ticket detail dari section tab my tickets memuat code +QR ticket untuk check in ditempat lokasi event, detail informasi tiket, button +mengarah ke gmaps, dan button melihat detail event. Tampilan menu tickets +section tab my tickets dan detail ticket ditampilkan pada Gambar 4.38 dibawah ini. + 73 + + Gambar 4.38 Desain Menu Tickets Section Tab My Tickets + Section tab history digunakan untuk status pesanan event yang telah +berlangsung. Halaman ini dirancang sebagai solusi atas konteks skenario terhadap +sub task riwayat pesanan, sebagaimana dijelaskan pada Tabel 4.3. Pengguna +ketika ingin melihat detail riwayat pesanan maka dapat klik area card. Halaman +ticket detail dari section tab history memuat foto icon event, detail informasi tiket, +dan detail pembayaran. Tampilan menu tickets section tab history dan detail +riwayat pesanan ticket ditampilkan pada Gambar 4.39 dibawah ini. + + Gambar 4.39 Desain Menu Tickets Section Tab History + 74 + + Interaksi prototipe pada menu ticket, ketika pengguna melakukan tap pada +komponen yang memiliki keterhubungan ke frame lain, sistem akan menjalankan +aksi navigate to disertai dengan animasi smart animate berdurasi 300ms. Alur +prototipe dari menu ticket ditampilkan pada Gambar 4.40. + + Gambar 4.40 Prototipe Menu Tickets + +4.4.5 Menu Saved + Menu saved adalah menu untuk mengakses event yang disimpan. Menu + +saved memuat section tab upcoming events dan past events. Halaman ini +dirancang sebagai solusi atas konteks skenario terhadap sub task saved events, +sebagaimana dijelaskan pada Tabel 4.3. Tampilan awal menu saved adalah section +tab upcoming events. Section tab upcoming events digunakan untuk event yang +akan berlangsung. Section tab past events digunakan untuk event yang telah +berlangsung. Event yang telah berlangsung namun tetap ditampilkan pada +aplikasi, maka event tersebut tidak ada tombol untuk memesan. Pengguna ketika +ingin unsaved event maka klik icon save sehingga event tersebut tidak ditampilkan +pada menu saved. Tampilan menu saved dapat dilihat pada Gambar 4.41 dibawah +ini. + 75 + + Gambar 4.41 Desain Menu Saved + Interaksi prototipe pada menu saved, ketika pengguna melakukan tap pada +komponen yang memiliki keterhubungan ke frame lain, sistem akan menjalankan +aksi navigate to disertai dengan animasi smart animate berdurasi 300ms. Alur +prototipe dari menu saved ditampilkan pada Gambar 4.42 dibawah ini. + + Gambar 4.42 Prototipe Menu Saved +4.4.6 Menu Profile + + Menu profile adalah menu untuk mengelola informasi pribadi, akun, +maupun preferensi. Menu saved memuat foto profil, nama dan alamat pengguna, + 76 +serta beberapa sub menu. Sub menu yang terdapat pada menu profile yaitu +personal data, account settings, notification settings, help center, terms and +conditions, serta fitur log out. Tampilan menu profile dapat dilihat pada Gambar +4.43 dibawah ini. + + Gambar 4.43 Desain Menu Profile + Interaksi prototipe pada menu profile, ketika pengguna melakukan tap pada +komponen yang memiliki keterhubungan ke frame lain, sistem akan menjalankan +aksi navigate to disertai dengan animasi smart animate berdurasi 300ms. Alur +prototipe dari menu profile ditampilkan pada Gambar 4.44. + + Gambar 4.44 Prototipe Menu Profile + 77 + +4.4.7 Halaman Detail Event + Halaman detail event adalah halaman untuk menampilkan informasi lengkap + +mengenai event yang juga merupakan proses awal untuk melakukan pemesanan +tiket. Halaman ini dirancang sebagai solusi atas konteks skenario terhadap sub +task detail event, sebagaimana dijelaskan pada Tabel 4.3. Halaman ini memuat +foto icon event, judul event, tanggal dan waktu event, lokasi event, dan beberapa +section tab. Section tab yang terdapat pada halaman detail yaitu description, +location, ticket, dan terms and conditions. + + Tampilan awal detail event adalah section tab description yang memuat +deskripsi singkat tentang event, informasi fasilitas dan kontak yang dapat +dihubungi. Section tab location memuat detail lokasi event, tampilan maps, dan +button view maps untuk melihat titik lokasi melalui google maps. Section tab +ticket memuat list type event dan button detail seat (apabila ada). Section tab +terms and conditions memuat informasi syarat ketentuan pada event. Tampilan +halaman detail event dapat dilihat pada Gambar 4.45 dibawah ini. + + Gambar 4. 45 Desain Halaman Detail Event + Interaksi prototipe pada menu detail event, ketika pengguna melakukan tap +pada komponen yang memiliki keterhubungan ke frame lain, sistem akan +menjalankan aksi navigate to disertai dengan animasi smart animate berdurasi +300ms. Alur prototipe dari menu detail event ditampilkan pada Gambar 4.46. + 78 + + Gambar 4.46 Prototipe Halaman Detail Event +4.4.8 Halaman Checkout + + Halaman checkout adalah halaman untuk proses pembelian tiket. Halaman +ini memuat beberapa tahapan yaitu information, payment, dan review. Halaman +ini dirancang sebagai solusi atas konteks skenario terhadap sub task proses pesan +tiket dan pembayaran tiket, sebagaimana dijelaskan pada Tabel 4.3. Tahapan +information digunakan untuk pengguna memasukkan data pengunjung. Tahapan +payment digunakan untuk pengguna memilih metode pembayaran. Tahapan +review digunakan untuk pengguna melihat detail pesanan sebelum dilakukan +pembayaran. Tampilan halaman checkout ditampilkan pada Gambar 4.47. + + Gambar 4.47 Desain Halaman Checkout + 79 + + Interaksi prototipe pada halaman checkout, ketika pengguna melakukan tap +pada komponen yang memiliki keterhubungan ke frame lain, sistem akan +menjalankan aksi navigate to disertai dengan animasi smart animate berdurasi +300ms. Ketika pengguna klik tombol payment maka sistem akan menampilkan +pop up confirmation, kemudian pop up berhasil memesan apabila pengguna +melanjutkan untuk ke pembayaran. Aksi modal confirmation dengan interaction +after delay selama 1300ms. Alur prototipe dari halaman checkout ditampilkan +pada Gambar 4.48. + + Gambar 4.48 Prototipe Halaman Checkout + +4.4.9 Fitur Join Antrean + Fitur join antrean adalah pembelian tiket dahulu melalui antrean sebelum + +tiket dijual resmi di aplikasi. Fitur ini akan digunakan pada event – event besar +yang memiliki minat pengunjung banyak. Halaman ini dirancang sebagai solusi +atas kebutuhan pengguna terhadap fitur antrean dengan live tracking antrean +secara real-time, sebagaimana dijelaskan pada Tabel 4.2. Fitur join antrean +memuat halaman waiting room dan halaman checkout. Pada halaman waiting +room awal menampilkan deskripsi event dan memuat button join queue untuk +mendaftar antrean. Halaman waiting room selanjutnya memuat informasi nomor +antrean. Pada halaman ini pengguna dapat menunggu waktu giliran untuk +checkout berdasarkan nomor antrean dan terdapat informasi sisa durasi +menunggu. Tampilan halaman waiting room ditampilkan pada Gambar 4.49 +dibawah ini. + 80 + + Gambar 4.49 Desain Halaman Waiting Room + Apabila proses menunggu antrean selesai, maka sistem otomatis akan +beralih ke halaman checkout. Halaman ini memuat beberapa tahapan yaitu select +ticket, information, payment, dan review. Tampilan halaman ditampilkan pada +Gambar 4.50 dibawah ini. + + Gambar 4.50 Desain Halaman Checkout Fitur Join Antrean + Interaksi prototipe pada fitur join antrean, ketika pengguna melakukan tap +pada komponen yang memiliki keterhubungan ke frame lain, sistem akan + 81 + +menjalankan aksi navigate to disertai dengan animasi smart animate berdurasi +300ms. Ketika pengguna klik tombol payment maka sistem akan menampilkan +pop up confirmation, kemudian pop up berhasil memesan apabila pengguna +melanjutkan untuk ke pembayaran. Aksi modal confirmation dengan interaction +after delay selama 1300ms. Alur prototype fitur join antrean dapat dilihat pada +Gambar 4.51 dibawah ini. + + Gambar 4.51 Prototipe Fitur Join Antrean + +4.5 Evaluate Against Requirements 1 + Usability testing pada desain antarmuka aplikasi pemesanan tiket event + +dilakukan dengan pendekatan eksplorasi bebas tanpa menggunakan task testing. +Pendekatan ini bertujuan untuk menangkap perilaku alami pengguna saat +berinteraksi dengan prototipe aplikasi yang dibuat menggunakan Figma. Setelah +menyelesaikan eksplorasi, responden diminta memberikan umpan balik langsung +mengenai pengalaman mereka selama menggunakan prototipe tersebut. Selain itu, +responden juga mengisi kuesioner System Usability Scale (SUS) yang disediakan +melalui Google Form sebagai alat ukur kuantitatif tingkat usability desain. + + Teknik sampling pada penilitian ini adalah Simple Random Sampling +dengan mengambil populasi pada jumlah penduduk di Indonesia. Simple Random +Sampling adalah sebuah teknik pengambilan sampel secara acak serta berasal dari +populasi yang ada (Noor dkk., 2022). Berdasarkan Badan Pusat Statistik Provinsi +Sulawesi Utara (2024) jumlah penduduk Indonesia pada tahun 2024 yaitu +berjumlah 281.603,8 jiwa. Perhitungan sampel menggunakan rumus slovin + 82 + +dengan menggunakan margin of error sebanyak 10% atau 0,10 berikut +perhitungan pengambilan sampel. + + Populasi penduduk Indonesia berjumlah 281.603,8 jiwa. Berdasarkan +perhitungan menggunakan rumus slovin, diperoleh ukuran sampel minimum +sebanyak 100 responden. Jumlah ini dinilai cukup untuk menggambarkan +pengalaman pengguna terhadap pengujian usability desain sistem. Kuesioner +disebarkan secara luas melalui media daring. Sebagian besar responden berasal +dari Provinsi Jawa Timur, namun terdapat juga responden yang berasal dari +Provinsi Daerah Istimewa Yogyakarta, Jawa Tengah, Jawa Barat, DKI Jakarta, +Kalimantan Timur, Lampung, dan Sumatera Utara. + + Pengujian dan evaluasi ini melibatkan 100 responden, yang merupakan +mahasiswa dan pekerja dengan rentang usia 18 hingga 26 tahun. Tahapan +pelaksanaan usability testing adalah sebagai berikut. + + a. Responden diberikan tautan prototipe Figma tanpa disertai task testing. + b. Responden melakukan eksplorasi desain secara bebas. + c. Responden memberikan umpan balik langsung yang kemudian dikumpulkan + + untuk dijadikan dasar dalam iterasi desain. + d. Responden mengisi kuesioner SUS untuk mengukur tingkat usability dari + + desain yang telah dieksplorasi. + Setelah tahapan usability testing selesai, peneliti melakukan analisis data +yang diperoleh dari umpan balik responden serta hasil kuesioner SUS. Analisis +umpan balik digunakan untuk mengidentifikasi masalah desain dan area yang +memerlukan perbaikan, sedangkan analisis kuesioner SUS dilakukan dengan + 83 + +menghitung skor usability secara keseluruhan. Berikut hasil analisis umpan balik +dari responden dan analisis perhitungan SUS. +4.5.1 Hasil Analisis Umpan Balik + + Berdasarkan hasil pengumpulan umpan balik dari responden, terdapat +beberapa aspek desain yang perlu diperbaiki adalah sebagai berikut. + + a. Tampilan stepper pada halaman checkout perlu dilengkapi dengan informasi + detail pada setiap tahap serta penambahan tanda checklist untuk tahap yang + telah dilalui oleh pengguna. + + b. Penambahan tombol view detail pada menu tickets section tab waiting dan + tab history untuk memudahkan pengguna melihat rincian pesanan. + + c. Penambahan informasi penggunaan pada menu tickets khususnya di section + tab my tickets agar pengguna lebih memahami fungsi dan cara + penggunaannya. + + d. Tampilan modal confirmation pada opsi tombol perlu disusun secara + horizontal (left-right) untuk meningkatkan keterbacaan dan kemudahan + interaksi pengguna. + +4.5.2 Hasil Kuesioner SUS + Perhitungan tingkat usability menggunakan metode System Usability Scale + +(SUS) dalam penelitian ini dilakukan secara manual dengan menggunakan +Microsoft Excel. Kuesioner SUS terdiri dari 10 pernyataan yang menggunakan +skala Likert 5 poin, dengan rentang nilai dari 1 (sangat tidak setuju) hingga 5 +(sangat setuju). Menurut Brooke (2024), aturan perhitungan skor SUS adalah +sebagai berikut: + + a. Pertanyaan dengan nomor ganjil, skor yang diberikan oleh responden + dikurangi dengan 1. + + b. Pertanyaan dengan nomor genap, hasil skor akhir diperoleh dari pengguna + akan dikurangi 5. + + c. Jumlah skor rata-rata diperoleh dengan menjumlahkan seluruh skor dari 10 + pertanyaan, kemudian mengalikan hasilnya dengan 2,5 untuk menghasilkan + skor akhir dalam rentang 0 hingga 100. + 84 + + Hasil perhitungan skor SUS ini kemudian digunakan untuk menentukan + +tingkat usability berdasarkan kategori yang telah ditetapkan. Tabel 4.4 di bawah + +ini menampilkan hasil perhitungan SUS pada tahap usability testing 1. + +Tabel 4.4 Hasil Perhitungan SUS Usability Testing 1 + + Skor Hasil Hitung SUS Nilai + +R P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 Jml SUS + +1 2 3 3 2 4 4 2 2 2 1 25 62,5 + +2 2 1 1 1 4 1 3 1 2 1 17 42,5 + +3 2 2 2 2 2 2 2 2 2 2 20 50 + +4 4 2 3 0 4 2 3 4 2 0 24 60 + +5 4 0 4 3 3 1 2 3 3 2 25 62,5 + +6 2 1 2 1 3 2 4 4 2 4 25 62,5 + +7 3 2 3 3 4 2 2 3 3 1 26 65 + +8 2 3 2 4 3 1 3 3 3 4 28 70 + +9 3 3 3 2 3 2 2 3 3 3 27 67,5 + +10 3 3 3 3 3 3 3 3 3 3 30 75 + +…………………………… … … + +91 2 0 1 3 4 1 3 2 3 2 21 52,5 + +92 3 2 3 1 4 3 1 3 3 3 26 65 + +93 3 3 4 4 3 2 3 4 4 3 33 82,5 + +94 4 3 3 3 4 4 4 3 4 2 34 85 + +95 4 3 4 0 4 3 4 0 4 0 26 65 + +96 4 4 4 4 3 4 4 4 4 3 38 95 + +97 2 2 2 1 2 2 3 2 2 2 20 50 + +98 3 4 4 3 3 4 3 4 3 3 34 85 + +99 3 1 3 1 3 1 3 1 3 1 20 50 + +100 4 3 4 3 4 3 3 4 4 2 34 85 + + Skor Rata -Rata (Hasil Akhir) 63,5 + + Berdasarkan Tabel 4.4, diperoleh hasil dari perhitungan skor System +Usability Scale (SUS). Sebagai contoh perhitungan, digunakan data dari + 85 + +responden 1 (R1). Pada pertanyaan nomor 1 yang termasuk kategori ganjil, R1 +memberikan nilai 3. Sedangkan, pada pertanyaan nomor 2 yang termasuk kategori +genap, R1 memberikan nilai 2. Perhitungan skor SUS pada pertanyaan ganjil, +perhitungan dilakukan dengan cara mengurangi nilai yang diberikan responden +dengan angka 1, sehingga 3 – 1 = 2. Sementara itu, untuk pertanyaan genap, +perhitungan dilakukan dengan mengurangi nilai responden dari angka 5, yaitu 5 – +2 = 3. Proses ini dilakukan untuk seluruh 10 pertanyaan, dan hasil penjumlahan +akhir untuk Responden 1 adalah 25. Nilai total tersebut kemudian dikalikan +dengan 2,5 sesuai rumus SUS, sehingga diperoleh skor akhir sebesar 62,5 untuk +responden 1. Setelah proses serupa dilakukan terhadap seluruh responden, maka +seluruh skor SUS dijumlahkan dan dibagi dengan jumlah responden, yaitu 100 +orang. Perhitungan tersebut, diperoleh nilai rata-rata skor SUS sebesar 63,5. + + Hasil perhitungan rata-rata skor System Usability Scale (SUS) dengan total +100 responden dikonversikan ke dalam beberapa kategori, yaitu Adjective Rating, +Grade Scale, dan Acceptability Range, seperti yang ditampilkan pada Gambar 2.2. +Berdasarkan hasil perhitungan, skor SUS sebesar 63,5 menunjukkan bahwa desain +antarmuka aplikasi pemesanan tiket event masih belum optimal dalam hal +kegunaan atau usability. Hasil rata – rata dalam kategori standar SUS, skor ini +termasuk dalam kategori Adjective Rating "OK", Grade Scale "D", dan +Acceptability Range "Marginal Low". Artinya, secara umum pengguna merasa +antarmuka aplikasi ini masih belum baik secara usability, sehingga belum +memberikan pengalaman pengguna yang memuaskan. Skor ini mencerminkan +persepsi pengguna bahwa aplikasi masih memiliki berbagai kekurangan yang +berdampak pada kurangnya kenyamanan dalam penggunaan serta menghambat +kelancaran proses interaksi pengguna dengan sistem. + + Hasil ini dapat terjadi karena beberapa faktor, antara lain adanya +kekurangan dalam aspek desain antarmuka, alur interaksi pengguna, penyajian +informasi, dan pemenuhan ekspektasi pengguna. Pada konteks aplikasi pemesanan +tiket, pengguna pada umumnya mengharapkan proses yang cepat, jelas, dan bebas +hambatan. Sehingga kekurangan kecil sekalipun dapat memberikan dampak +terhadap persepsi dan pengalaman pengguna pada sistem. + 86 + + Sebagai upaya perbaikan, peneliti melakukan evaluasi usability secara lebih +mendalam dengan memanfaatkan umpan balik dari pengguna. Umpan balik +tersebut sangat penting untuk mengidentifikasi komponen-komponen aplikasi +yang dianggap membingungkan atau menimbulkan kesulitan dalam +penggunaannya. Berdasarkan hasil evaluasi, peneliti melakukan perbaikan pada +desain antarmuka agar menjadi lebih intuitif, memperjelas penyajian informasi +agar lebih mudah dipahami, serta menyempurnakan alur navigasi agar sesuai +dengan ekspektasi pengguna. Proses perbaikan ini dilaksanakan secara iteratif +melalui siklus penyempurnaan dan pengujian ulang. Demikian, peneliti dapat +melihat apakah adanya peningkatan skor SUS pada pengujian berikutnya serta +tercapainya pengalaman penggunaan yang lebih nyaman dan mudah bagi +mayoritas pengguna. + +4.6 Design Prototype 2 + Design prototype 2 merupakan hasil iterasi desain setelah melakukan + +usability testing. Desain tahap kedua dirancang berdasarkan umpan balik dari +pengguna, yaitu terdapat perbaikan pada desain antarmuka, memperjelas +penyajian informasi, dan alur navigasi. Proses pembuatan design prototype +menggunakan tools Figma. Link figma interatif pada design prototype: +https://figma.fun/SUJ7mL. Berikut beberapa tampilan dari perbaikan rancangan +desain. +a. Stepper di halaman checkout + + Pada desain prototipe sebelumnya, pengguna merasa kurang nyaman dengan +tampilan stepper yang digunakan. Hal ini disebabkan karena pada tahap yang +sudah dilalui maupun belum dilalui ditampilkan seperti memberi kesan disable, +sehingga kurang jelas bagi pengguna. Selain itu, pengguna tidak dapat melihat +secara lengkap tahapan yang ada pada halaman checkout, karena langkah yang +belum dilalui hanya ditunjukkan dengan angka, tanpa penjelasan lebih lanjut +mengenai isi dari setiap tahap. Solusi dari umpan balik tersebut yaitu dengan +menambahkan teks informasi dari setiap tahap dan tahap yang telah dilalui akan + 87 + +ditandai dengan checklist. Tampilan stepper di halaman checkout ditampilkan +pada Gambar 4.52 dibawah ini. + + Gambar 4.52 Iterasi Desain Halaman Checkout +b. Menambahkan button view detail di menu tickets section tab waiting dan + + history + Pada desain prototipe sebelumnya, pengguna merasa bingung ketika ingin +melihat detail pesanan dari section tab waiting maupun tab history. Hal ini +disebabkan karena tidak adanya button untuk melihat detail. Solusi dari umpan +balik tersebut yaitu dengan menambahkan button view detail pada setiap card +pesanan di section tab waiting dan tab history. Tampilan section tab waiting dan +tab history ditampilkan pada Gambar 4.53 dibawah ini. + 88 + + Gambar 4.53 Iterasi Desain Menu Tickets - Tab Waiting dan Tab History +c. Menambahkan informasi petunjuk penggunaan di menu tickets section tab + + my tickets + Pada desain prototipe sebelumnya, pengguna merasa bingung ketika +mengakses menu tickets section tab my tickets. Hal ini disebabkan karena tidak +adanya informasi penggunaan pada halaman tersebut. Solusi dari umpan balik +tersebut yaitu dengan menambahkan fitur informasi tentang cara penggunaan +yang digambarkan melalui icon info, dimana ketika pengguna klik icon tersebut +maka akan menampilkan bottomsheet informasi tentang petunjuk penggunaan +menu. Tampilan section tab my tickets ditampilkan pada Gambar 4.54 dibawah +ini. + 89 + + Gambar 4.54 Iterasi Desain Menu Tickets - Tab My Tickets +d. Opsi tombol disusun secara horizontal pada modal confirmation + + Pada desain prototipe sebelumnya, opsi tombol pada modal confirmation +disusun secara vertikal (top-bottom). Tata letak susunan tersebut dinilai kurang +optimal karena membuat tampilan pop-up terlihat terlalu besar dan memakan +banyak ruang, yang berdampak pada penurunan kenyamanan pengguna. +Sehingga, dilakukan perubahan tata letak tombol menjadi horizontal (left-right) +untuk mengoptimalkan penggunaan ruang dan kenyamanan dalam berinteraksi. +Tampilan pop up konfirmasi ditampilkan pada Gambar 4.55 dibawah ini. + + Gambar 4.55 Iterasi Desain Modal Confirmation + 90 + + Setelah proses iterasi dan pembaruan alur prototipe selesai dilakukan, +peneliti kembali melakukan usability testing ulang untuk memastikan apakah +perubahan yang dilakukan berhasil meningkatkan tingkat usability dibandingkan +dengan versi sebelumnya. + +4.7 Evaluate Against Requirements 2 + Usability testing kedua dilakukan dengan menggunakan pendekatan dan + +struktur proses yang sama seperti pada usability testing pertama. Setelah +menyelesaikan pengujian, pengguna diminta untuk memberikan umpan balik serta +mengisi kuesioner System Usability Scale (SUS). Selanjutnya, dilakukan analisis +terhadap umpan balik responden dan perhitungan skor SUS untuk mengevaluasi +hasil pengujian. Berikut hasil analisis umpan balik dari responden dan analisis +perhitungan SUS. +4.7.1 Hasil Analisis Umpan Balik + + Pada tahap evaluasi ini, mayoritas pengguna tidak memberikan umpan balik +yang spesifik terkait perbaikan desain aplikasi. Kondisi ini menunjukkan bahwa +secara umum pengguna merasa desain antarmuka aplikasi telah memenuhi +kebutuhan dan ekspektasi mereka, sehingga tidak terdapat keluhan maupun saran +mengenai aspek desain. Hal ini juga dapat menunjukkan bahwa perbaikan yang +dilakukan pengujian sebelumnya berhasil mengatasi masalah utama yang +ditemukan, sehingga pengguna tidak merasa perlu memberikan masukan +tambahan. + + Ketiadaan umpan balik tertulis dari pengguna tidak selalu berarti bahwa +desain aplikasi sudah sepenuhnya baik. Beberapa pengguna mungkin tidak +memberikan tanggapan karena kurangnya dorongan atau pemahaman dalam +menyampaikan masukan. Sehingga, peneliti menggunakan perhitungan skor +System Usability Scale (SUS) untuk menilai tingkat kegunaan aplikasi secara +terukur. + 91 + +4.7.2 Hasil Kuesioner SUS + + Pengujian usability dengan pendekatan System Usability Scale (SUS) + +dilakukan kembali setelah proses iterasi desain. Tujuan dari pengujian ini adalah + +untuk mengetahui apakah terdapat peningkatan skor SUS dibandingkan dengan + +hasil pengujian sebelumnya. Setelah melakukan pengujian ulang, peneliti dapat + +mengevaluasi sejauh mana perbaikan pada desain berpengaruh terhadap persepsi + +dan pengalaman pengguna dalam menggunakan sistem. + + Perhitungan tingkat usability menggunakan metode System Usability Scale + +(SUS) dalam penelitian ini dilakukan secara manual yang menggunakan Microsoft + +Excel dengan mengikuti aturan perhitungan SUS. Tabel 4.5 menampilkan hasil + +perhitungan SUS pada tahap usability testing 2. + +Tabel 4.5 Hasil Perhitungan SUS Usability Testing 2 + + Skor Hasil Hitung SUS Nilai + +R P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 Jml SUS + +1 2 3 4 4 4 1 4 4 2 4 32 80 + +2 1 2 3 1 2 3 4 4 2 2 24 60 + +3 4 4 4 4 4 4 4 4 4 4 40 100 + +4 4 4 4 4 4 4 4 4 4 4 40 100 + +5 4 4 4 4 4 4 4 4 4 4 40 100 + +6 3 4 3 3 2 3 4 4 4 3 33 82,5 + +7 3 3 4 4 4 4 3 3 3 3 34 85 + +8 4 4 3 4 3 4 4 3 3 4 36 90 + +9 3 3 3 3 3 3 3 3 3 3 30 75 + +10 3 4 4 4 3 3 3 4 3 3 34 85 + +… ………………………… … … + +91 2 3 2 2 2 2 2 3 1 2 21 52,5 + +92 4 3 4 0 3 2 2 3 4 0 25 62,5 + +93 2 3 2 4 3 3 3 3 3 4 30 75 + +94 3 2 2 1 4 3 4 3 2 2 26 65 + +95 2 2 2 1 3 3 2 2 2 1 20 50 + 92 + + Skor Hasil Hitung SUS Nilai + SUS +R P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 Jml 65 + 55 +96 3 2 3 2 2 2 2 3 3 4 26 82,5 + 62,5 +97 2 2 3 2 3 2 2 3 2 1 22 47,5 + 76 +98 2 4 3 4 3 3 3 4 3 4 33 + +99 3 2 2 4 4 4 1 2 2 1 25 + +100 3 1 2 2 3 0 2 2 2 2 19 + + Skor Rata -Rata (Hasil Akhir) + + Berdasarkan Tabel 4.5, diperoleh hasil dari perhitungan skor System +Usability Scale (SUS). Sebagai contoh perhitungan, digunakan data dari +responden 1 (R1). Pada pertanyaan nomor 1 yang termasuk kategori ganjil, R1 +memberikan nilai 3. Sedangkan, pada pertanyaan nomor 2 yang termasuk kategori +genap, R1 memberikan nilai 2. Perhitungan skor SUS pada pertanyaan ganjil, +perhitungan dilakukan dengan cara mengurangi nilai yang diberikan responden +dengan angka 1, sehingga 3 – 1 = 2. Sementara itu, untuk pertanyaan genap, +perhitungan dilakukan dengan mengurangi nilai responden dari angka 5, yaitu 5 – +2 = 3. Proses ini dilakukan untuk seluruh 10 pertanyaan, dan hasil penjumlahan +akhir untuk Responden 1 adalah 32. Nilai total tersebut kemudian dikalikan +dengan 2,5 sesuai rumus SUS, sehingga diperoleh skor akhir sebesar 80 untuk +responden 1. Setelah proses serupa dilakukan terhadap seluruh responden, maka +seluruh skor SUS dijumlahkan dan dibagi dengan jumlah responden, yaitu 100 +orang. Dari perhitungan tersebut, diperoleh nilai rata-rata skor SUS sebesar 76. + + Hasil perhitungan rata-rata skor System Usability Scale (SUS) dengan total +100 responden dikonversikan ke dalam beberapa kategori, yaitu Adjective Rating, +Grade Scale, dan Acceptability Range, seperti yang ditampilkan pada Gambar 2.2. +Berdasarkan hasil perhitungan skor rata-rata System Usability Scale (SUS) sebesar +76, dapat disimpulkan bahwa desain antarmuka aplikasi pemesanan tiket event +memiliki tingkat kegunaan yang tergolong baik, disebabkan skor tersebut masuk +dalam kategori Adjective Rating "Good", Grade Scale “C”, dan Acceptability +Range “Acceptable”. Artinya, menunjukkan bahwa mayoritas pengguna menilai + 93 + +antarmuka aplikasi mudah digunakan dan memberikan pengalaman yang +memuaskan. Kemudian, performa aplikasi berada di atas rata-rata, meskipun +masih terdapat ruang untuk perbaikan lebih lanjut. Selain itu, aplikasi telah +memenuhi standar kelayakan penggunaan bagi sebagian besar pengguna. Hasil ini +menunjukkan bahwa aplikasi mampu memberikan pengalaman penggunaan yang +relatif nyaman dan memuaskan bagi pengguna. + +4.8 Evaluasi Hasil + +Tahapan evaluasi hasil merupakan tahap evaluasi setelah diperoleh hasil + +dari usability testing kedua. Tahap selanjutnya adalah melakukan perbandingan + +dengan hasil usability testing pertama untuk mengetahui sejauh mana peningkatan + +yang terjadi setelah dilakukan iterasi pada desain aplikasi pemesanan tiket event. + +Tabel 4.6 menampilkan hasil perbandingan antara kedua pengujian berdasarkan + +skor SUS dan kategorinya. + +Tabel 4.6 Hasil Perbandingan Usability Testing + +Kategori SUS Score Usability Testing 1 Usability Testing 2 + +SUS Score 63,5 76 + +Adjective Ratings Ok Good + +Grade Scale D C + +Acceptability Ranges Marginal Low Acceptable + + Berdasarkan tabel 4.6, terlihat adanya peningkatan skor SUS dari 63,5 pada +usability testing pertama menjadi 76 pada usability testing kedua. Peningkatan ini +juga diikuti oleh perubahan kategori pada Adjective Rating dari "Ok" menjadi +"Good", serta Grade Scale dari "D" ke "C". Selain itu, pada Acceptability Range, +terjadi kenaikan dari kategori "Marginal Low" ke "Acceptable". + + Peningkatan skor SUS dari usability testing pertama ke usability testing +kedua disebabkan oleh perbaikan yang dilakukan berdasarkan hasil umpan balik +pengguna pada pengujian pertama. Pada tahap awal pengujian, ditemukan +sejumlah kekurangan dalam desain antarmuka, seperti alur navigasi yang +membingungkan, kurangnya kejelasan informasi, serta tampilan yang belum + 94 + +sepenuhnya mendukung kenyamanan interaksi. Kekurangan-kekurangan tersebut +berdampak pada rendahnya persepsi kegunaan dan kenyamanan aplikasi oleh +pengguna. + + Setelah dilakukan iterasi desain, berbagai perbaikan difokuskan pada aspek- +aspek yang menjadi sumber masalah, antara lain perbaikan desain antarmuka agar +menjadi lebih intuitif, memberikan informasi penggunaan menu agar lebih mudah +dipahami, serta menyempurnakan alur navigasi agar sesuai dengan ekspektasi +pengguna. Perbaikan ini bertujuan untuk memenuhi kebutuhan pengguna terhadap +fungsi aplikasi, serta menciptakan pengalaman penggunaan yang lebih nyaman +dan intuitif. + + Hasil dari perbaikan tersebut kemudian divalidasi melalui usability testing +kedua, yang menunjukkan peningkatan skor secara jelas. Hal ini menandakan +bahwa perbaikan desain yang dilakukan telah menjawab kebutuhan dan +ekspektasi pengguna secara lebih baik dibandingkan versi sebelumnya. Dengan +demikian, kenaikan skor usability mencerminkan dampak positif dari proses +iteratif yang berbasis pada umpan balik nyata dari pengguna. + + Berdasarkan hasil usability testing pertama dan kedua, ditemukan sejumlah +kekurangan sistem yang ditunjukkan oleh skor System Usability Scale (SUS) +bernilai 0. Fokus analisis ditujukan pada pertanyaan dengan skor terendah, karena +menunjukkan aspek kekurangan dari sudut pandang pengguna. Pertanyaan genap +dalam SUS merupakan pernyataan negatif, nilai rendah maka pengguna +cenderung setuju terhadap pernyataan negatif tersebut yang sistem dinilai buruk +pada aspek tersebut. Sebaliknya, pertanyaan ganjil merupakan pernyataan positif, +nilai rendah maka pengguna cenderung tidak setuju terhadap pernyataan positif +tersebut yang menunjukkan adanya kekurangan pada sistem. + + Pertanyaan nomor 4 (saya merasa saya membutuhkan bantuan dari orang +yang memiliki keahlian teknis untuk bisa menggunakan sistem ini) dan +pertanyaan nomor 10 (saya perlu mempelajari banyak hal sebelum saya bisa mulai +menggunakan sistem ini) merupakan yang paling banyak memperoleh skor SUS 0 +dalam dua kali pengujian. Pertanyaan nomor 4 mengenai kebutuhan bantuan +teknis untuk menggunakan sistem, sedangkan nomor 10 mengenai perlunya + 95 + +mempelajari banyak hal sebelum menggunakan sistem. Rendahnya skor pada +kedua poin tersebut menunjukkan bahwa sistem belum cukup intuitif dan user- +friendly, serta memiliki kurva pembelajaran yang tinggi. + + Sistem desain aplikasi pada penelitian ini dapat disimpulkan bahwa +kekurangan utama sistem terletak pada aspek kemudahan penggunaan khususnya +pada desain antarmuka dan tingkat pembelajaran awal yang tinggi. Namun +demikian telah dilakukan iterasi desain, temuan ini menunjukkan bahwa +perbaikan lanjutan masih diperlukan untuk meningkatkan pengalaman pengguna +secara menyeluruh. + BAB 5. KESIMPULAN DAN SARAN + +5.1 Kesimpulan + Berdasarkan penelitian “Penggunaan Metode User Centered Design (UCD) + +terhadap Rancangan UI/UX Sistem Pemesanan Tiket Event Berbasis Mobile” +yang telah dilaksanakan, maka dapat disimpulkan sebagai berikut. + + a. Perancangan tampilan user interface dengan menerapkan metode User + Centered Design (UCD) yaitu mencakup empat tahapan utaman: analisis + user persona dalam tahapan understand context of use, analisis kebutuhan + pengguna dan konteks skenario dalam tahapan specify user requirements, + merancang userflow, wireframe, dan design prototype dalam tahapan design + solutions, serta pengujian usability menggunakan metode System Usability + Scale (SUS) dalam tahapan evaluate against requirements. + + b. Pengukuran pengalaman pengguna melalui usability testing menggunakan + metode System Usability Scale (SUS). Hasil pengujian menunjukkan adanya + peningkatan skor System Usability Scale (SUS) dari 63,5 pada usability + testing pertama menjadi 76 setelah dilakukan iterasi desain dilakukan + berdasarkan umpan balik pengguna. Namun demikian, masih ditemukan + kekurangan pada aspek kemudahan penggunaan dan aksesbilitas. + +5.2 Saran + Adapun beberapa saran yang didapatkan berdasarkan kesimpulan dari + +penelitian, sebagai berikut. + a. Iterasi lanjutan terhadap desain antarmuka untuk menyempurnakan elemen + – elemen yang masih belum optimal berdasarkan hasil pengujian dan + evaluasi berikutnya. + b. Iterasi desain selanjutnya sebaiknya difokuskan pada perbaikan aspek-aspek + yang menjadi kelemahan utama berdasarkan hasil SUS, khususnya pada + pertanyaan nomor 4 dan 10 mengenai kemudahan penggunaaan dan + aksesbilitas. + + 96 + DAFTAR PUSTAKA + +Agusti, E. (2022) ‘Perancangan Aplikasi Invoice Berbasis Mobile Studi Kasus + +UMKM’, Jurnal Ilmiah Teknik, 1(1), pp. 19–33. + +doi:https://doi.org/10.55904/hexatech.v1i01.56. + +Alfianto, M. A., A. Rihhadatul'Ais, I. N. Syafiqah, M. A. Saputro, dan Z. U. E. + +Farouq (2023) ‘Strategi Komunikasi Pemasaran dalam Memperkuat Brand + +Awareness Pekan Raya Jakarta (PRJ)’, Jurnal Pendidikan Tambusai, 7(3), + +pp. 20760–20765. doi: https://doi.org/10.31004/jptam.v7i3.9563. + +Amin, N. F., S. Garancang, dan K. Abunawas (2023) ‘Konsep Umum Populasi + +dan Sampel dalam Penelitian’, Jurnal Kajian Islam Kontemporer, 14(1), pp. + +15–31. + +Badan Pusat Statistik Provinsi Sulawesi Utara (2024) ‘Jumlah Penduduk Menurut + +Provinsi di Indonesia (Ribu Jiwa) 2024’, BPS Provinsi Sulawesi Utara, + +[Diakses pada 4 Maret 2025]. https://sulut.bps.go.id/id/statistics- + +table/2/OTU4IzI=/jumlah-penduduk-menurut-provinsi-di-indonesia.html + +Bratha, W. G. E. (2022) ‘Literature Review Komponen Sistem Informasi + +Manajemen: Software, Database dan Brainware’, Jurnal Ekonomi + +Manajemen Sistem Informasi, 3(3), pp. 344–360. doi: + +https://doi.org/10.31933/jemsi.v3i3. + +Brooke, J. (1995) ‘SUS : A quick and dirty usability scale’, Usability Eval. Ind., + +189, [Diakses pada 28 Maret 2024]. + +https://www.researchgate.net/publication/228593520_SUS_A_quick_and_d + +irty_usability_scale. + +Dakhilullah, T. D. A. and Suranto, B. (2022) ‘Penerapan Metode User Centered + +Design Pada Perancangan Pengalaman Pengguna Aplikasi I-Star’, + +AUTOMATA, 3(2). + +Damayanti, C., A. Triayudi, dan I. D. Sholihati (2022) ‘Analisis UI / UX untuk + +Perancangan Website Apotek dengan Metode Human Centered Design dan + +System Usability Scale’, Media Informatika Budidarma, 6(1), pp. 551–559. + +doi: 10.30865/mib.v6i1.3526. + + 97 + 98 + +Darmawan, M. K. dan M. Ziveria (2023) ‘Analisis Kebutuhan UI/UX Mahasiswa + Kalbis Institute pada Studi Kasus Learning Management System (LMS) + LEAPS Kalbis Institute’, Jurnal Mahasiswa Institut Teknologi dan Bisnis + Kalbis Volume, 9(2), p. 403. + +Ernawati, S. dan Indriyanti, A. D. (2022) ‘Perancangan User Interface dan User + Experience Aplikasi Medical Tourism Indonesia Berbasis Mobile + Menggunakan Metode User Centered Design (UCD) (Studi Kasus: PT + Cipta Wisata Medika)’, Journal of Emerging Information System and + Business Intelligence (JEISBI), 03(04), pp. 90–102. + +Fernando, F. (2020) ‘Perancangan User Interface (UI) & User Experience (UX) + Aplikasi Pencari Indekost di Kota Padangpanjang’, TANRA: Jurnal Desain + Komunikasi Visual Fakultas Seni dan Desain Universitas Negeri Makassar, + 7(2), pp. 101–111. doi: 10.26858/tanra.v7i2.13670. + +Firdaus, R. M. dan N. Latifah (2024) ‘Implementasi Design Thinking dalam + Perancangan UI/UX pada Website Penjualan Tiket Konser’, Bit-Tech + (Binary Digital - Technology), 7(2), pp. 600–607. doi: + https://doi.org/10.32877/bt.v7i2.1970. + +Hartawan, M. S. (2022) ‘Penerapan User Centered Design (UCD) pada + Wireframe Desain User Interface dan User Experience Aplikasi Sinopsis + Film’, Jeis: Jurnal Elektro Dan Informatika Swadharma, 2(1), pp. 43–47. + doi: 10.56486/jeis.vol2no1.161. + +Herniyanti, M. A. F. Hafidin, E. Prasetya, Shabrina, R. Dewi, dan V. Z. Kamila + (2022) ‘Analisis Perilaku Desainer dalam Memanfaatkan Software Figma + untuk Mendesain’, Adopsi Teknologi dan Sistem Informasi (ATASI), 1(2), p. + 102. doi: https://doi.org/10.30872/atasi.v1i2.374. + +Idris, M. A. (2021) ‘Perancangan User Interface & User Experience pada + Aplikasi E-Commerce Ivent Menggunakan Metode User Centered Design + (UCD)’. + +Idris, M. A., G. P. Mahardika, dan B. Suranto (2021) ‘Perancangan UI / UX + Aplikasi Perangkat Bergerak Ivent Menggunakan Pendekatan HCD (Human + Centered Design)’, Automata, 2(1). + 99 + +Interaction Design Foundation - IxDF 'What is User Centered Design (UCD)?', + Interaction Design Foundation - IxDF, [Diakses pada 15 Mei 2024]. + https://www.interaction-design.org/literature/topics/user-centered-design. + +ISO 9241-110 (2020) ‘Ergonomics of Human-System Interaction – Part 110: + Interaction Principles’, iTeh Standards, [Diakses pada 10 Mei 2024]. + https://standards.iteh.ai/catalog/standards/sist/88ea5894-05f7-42cd-8f74- + cd817ad8c0e5/iso-9241-110-2020. + +Juliana, R. Sianipar, D. M. Lemy, A. Pramezwary, R. Pramono, dan A. + Djakasaputra (2023) ‘Factors Influencing Visitor Satisfaction and Revisit + Intention in Lombok Tourism: The Role of Holistic Experience, Experience + Quality, and Vivid Memory’, International Journal of Sustainable + Development and Planning, 18(8), pp. 2503–2511. doi: + https://doi.org/10.18280/ijsdp.180821. + +Kemenparekraf (2021) ‘Konser Musik Indonesia Kelas Dunia yang Selalu + Dinantikan’, Kemenparekraf, [Diakses pada 20 Maret 2024]. + https://www.kemenparekraf.go.id/ragam-ekonomi-kreatif/Konser-Musik- + Indonesia-Kelas-Dunia-yang-Selalu-Dinantikan. + +Kemenparekraf (2023) ‘Siaran Pers: Jumpa Pers Akhir Tahun, Kemenparekraf + Paparkan Capaian Kinerja di Sepanjang 2023’, Kemenparekraf, [Diakses + pada 4 Maret 2025]. https://kemenparekraf.go.id/berita/siaran-pers-jumpa- + pers-akhir-tahun-kemenparekraf-paparkan-capaian-kinerja-di-sepanjang- + 2023. + +Kinanthi, W. C. dan N. Setiyawati (2021) ‘Perancangan dan Evaluasi User + Experience Aplikasi Virtual Event Menggunakan User Experience + Questionnaire’, Jurnal Sains Komputer & Informatika (J-SAKTI), 5(2), pp. + 973–987. + +Lestari, M. T. (2021) ‘Public Relations Event: Membangun Image, Reputasi, dan + Mutual Understanding’, (Penyunting Suwito dan L. Kim). Edisi ke 1. + Jakarta: KENCANA. + +Mair, J. dan K. Weber (2019) ‘Event and Festival Research: A Review and + Research Directions’, International Journal of Event and Festival + 100 + + Management, 10(3), pp. 209–216. doi: https://doi.org/10.1108/IJEFM-10- + 2019-080. +Maulana, S., A. I. Agung, dan M. Ali (2024) ‘Rancang Bangun Sistem + Peminjaman Perlengkapan Event Menggunakan Metode Topsis di + Universitas Hasyim Asy’ari Jombang’, Ilmiah Inovasi Teknologi Informasi, + 8(2), pp. 178–188. +Ningsih, N., Aprianto, dan O. Sahartian (2023) ‘Perancangan Sistem Informasi E- + Marketplace Event Online untuk Meningkatkan Pemasaran Digital Berbasis + Mobile’, Jurnal Informatika Teknologi dan Sains, 5(1), pp. 7–12. doi: + https://doi.org/10.51401/jinteks.v5i1.2247. +Noor, S., O. Tajik, dan J. Golzar (2022) ‘Simple random sampling’, International + Journal of Education & Language Studies, pp. 78–82. doi: + https://doi.org/10.22034/ijels.2022.162982. +Oktaviani, S. N., C. F. Aziz, dan B. M. Sulthon (2022) ‘Analisa UI/UX Sistem + Informasi Penjualan Berbasis Mobile Menggunakan Metode Prototype’, + KLIK: Kajian Ilmiah Informatika dan Komputer, 2(6), pp. 225–233. +Pratama, A. T. dan N. Santoso (2021) ‘Rancang Bangun Sistem Informasi + Manajemen Event Berbasis Mobile’, Jurnal Pengembangan Teknologi + Informasi dan Ilmu Komputer (J-PTIIK) Universitas Brawijaya, 5(6), pp. + 2399–2407. +Purbo, Y. S., F. S. Utomo, dan Y. Purwati (2023) ‘Analisis dan Perancangan + Antarmuka Aplikasi Wisata Menggunakan Metode User-Centered Design + (UCD)’, Jurnal Teknologi Terpadu, 9(2), pp. 123–132. doi: + https://doi.org/10.54914/jtt.v9i2.977. +Putra, P. O. H., R. A. W. W. C. K. Dewi, dan I. Budi (2022) ‘Usability Factors + that Drive Continued Intention To Use and Loyalty of Mobile Travel + Application’, Heliyon, 8(9), pp. 1–16. doi: 10.1016/j.heliyon.2022.e10620. +Putra, Y. W. S., A. M. Dawis, N. F. Natsir, Fitria, A. A. S. Widhiyanti, F. N. + Hasan, Somantri, dan Maniah (2023) ‘Pengantar Aplikasi Mobile, + (Penyunting W. Andriyani dan Erlangga). Edisi ke 1. Sukabumi: CV. Haura + Utama. + 101 + +Putri, A. R. R. dan A. D. Indriyanti (2023) ‘Evaluasi Usability User Interface dan + User Experience pada Aplikasi M.Tix dengan Metode Usability Testing + (UT) dan System Usability Scale (SUS)’, Journal of Emerging Information + Systems and Business Intelligence, 4(2), pp. 21–32. + +Raharjo, J. S. D., R. Tullah, dan H. Setiana (2019) ‘Sistem Informasi Pemesanan + dan Pembelian Tiket Bus Online Berbasis Web pada PO Budiman’, Jurnal + Sisfotek Global, 9(2), pp. 120–125. doi: 10.38101/SISFOTEK.V9I2.259. + +Santoso, M. F. (2024) ‘Implementation of UI/UX Concepts and Techniques in + Web Layout Design With Figma’, Jurnal Teknologi Dan Sistem Informasi + Bisnis, 6(2), p. 282. doi: https://doi.org/10.47233/jteksis.v6i2.1223. + +Setiawan, V., I. Suhartana, dan I. Dwidasmara (2023) ‘Perancangan Desain + Antarmuka Sistem Pemesanan Tiket Acara Berbasis Website’, Jurnal + Pengabdian Informatika, 1, pp. 937–942. + +Soedewi, S., A. Mustikawan, dan W. Swasty (2022) ‘Penerapan Metode Design + Thinking Pada Perancangan Website UMKM Kirihuci’, Jurnal Online + Desain Komunikasi Visual, 10(2), p. 86. doi: + https://doi.org/10.34010/visualita.v10i02.5378. + +Sukmawati, M. D. dan G. N. J. A. Negara (2022) ‘Analisis Pengaruh Aplikasi + Digital Marketing sebagai Strategi Pemasaran dalam Minat Beli + Konsumen’, Seminar Ilmiah Nasional Teknologi, Sains, dan Sosial + Humaniora (SINTESA), 5, pp. 267–272. + +Suriani, N., Risnita, dan M. S. Jailani (2023) ‘Konsep Populasi dan Sampling + Serta Pemilihan Partisipan Ditinjau dari Penelitian Ilmiah Pendidikan’, + Jurnal Pendidikan Islam, 1(2), pp. 24–36. doi: + https://doi.org/10.61104/ihsan.v1i2.55. + +Wijaya, S., M. Kristanti, S. Thio, dan R. Jokom (2020) ‘Manajemen Event + Konsep dan Aplikasi, (Penyunting R. Mirsawati). Edisi ke 1. Depok: PT + RajaGrafindo Persada. + +Yamin, A. G., M. A. Surur, dan A. S. R. S. Samodra (2024) ‘Analisa Pelanggaran + Etika dalam Industri Hiburan (Studi Kasus: Penipuan Calo Tiket Konser + Coldplay)’, Jurnal Ilmiah Wahana Pendidikan, 10(14), pp. 126–134. doi: : + 102 + +https://doi.org/10.5281/zenodo.13360477. + +Yoganata, M. W. (2024) ‘Transformasi E-Business di Era Society 5.0 Mengubah + +Perilaku Konsumen dan Model Bisnis’, Jurnal Kajian dan Penalaran Ilmu + +Manajemen (JKPIM), 2(2), pp. 54–68. doi: + +https://doi.org/10.59031/jkpim.v2i2.402. + +Zieglmeier, V. dan A. M. Lehene (2021) ‘Designing Trustworthy User + +Interfaces’, pp. 1–8. doi: https://doi.org/10.1145/3520495.3520525. + LAMPIRAN +Lampiran 1. Hasil Kuesioner Evaluate Against Requirements 1 di Google Form +Link Gform : http://bit.ly/4ldKspo + + 103 + 104 + 105 + 106 + +Lampiran 2. Hasil Kuesioner Evaluate Against Requirements 2 di Google Form +Link Gform : http://bit.ly/4e720RG + 107 + 108 + 109 + +Lampiran 3. Data Kuesioner SUS Evaluate Against Requirements 1 +Link Gsheet : http://bit.ly/3ZDULe8 + 110 + +Lampiran 4. Data Kuesioner SUS Evaluate Against Requirements 2 +Link Gsheet : http://bit.ly/3ZDVlZm + 111 + +Lampiran 5. Perhitungan SUS Evaluate Against Requirements 1 +Link Gsheet : https://shorturl.at/9JuVI + 112 + 113 + +Lampiran 6. Perhitungan SUS Evaluate Against Requirements 2 +Link GSheet : https://shorturl.at/hZtz6 + 114 + 115 + +Lampiran 7. Data Kuesioner Pengumpulan Kebutuhan Pengguna +Link GSheet : https://shorturl.at/loZ8I + 116 +