Implementasi Perancangan User Experience Code Maniac dengan Pendekatan Human-Centered Design (HCD)

Fakultas Ilmu Komputer

Universitas Brawijaya

1112

Implementasi Perancangan User Experience Code Maniac dengan Pendekatan Human-Centered Design (HCD)

Makhdoum Tosinmim¹, Retno Indah Rokhmawati², Fajar Pradana³ Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya Email: ¹makhdoumtosinmim@gmail.com, ²retnoindahr@ub.ac.id, ³fajar.p@ub.ac.id

Abstrak

Code Maniac merupakan platform pembelajaran pemograman berbasis gamifikasi yang dibangun oleh tim pengembang Fakultas Ilmu Komputer Universitas Brawijaya (FILKOM UB), memerlukan perbaikan antarmuka guna menemukan refined design sesuai dengan kebutuhan dan tujuan pengguna.

Peneltitian ini bertujuan untuk mengevaluasi serta menghasilkan rancangan solusi desain antarmuka dengan menggunakan metode Human-Centered Design (HCD) berdasarkan permasalahan yang diperoleh. Selain itu, tingkat usability desain awal dibandingkan dengan desain solusi. Tingkat usability yang dinilai meliputi tiga aspek yaitu efektivitas, efisiensi, dan kepuasan. Pengujian desain awal diberikan kepada sebelas partisipan untuk menjalankan skenario pengujian dan emoticon table untuk mengetahui apa yang dirasakan pengguna. Sedangkan pengujian desain solusi dilakukan kepada delapan partisipan dengan USE Questionnaire untuk mengukur kepuasan. Rancangan desain solusi dibuat dalam bentuk interaktif prototype. Hasil pengujian solusi desain menunjukkan bahwa peningkatan di semua aspek pengujian yaitu aspek efektivitas menjadi 100%, aspek efisiensi dengan nilai Time-Based Efficiency (TBE) 0,064 goals/sec dan nilai Overal Relative Efficiency (ORE) sebesar 100% yang menunjukkan bahwa perbaikan rancangan solusi desain yang ditingkatkan memiliki kegunaan yang lebih baik dari desain awal Code Maniac. Aspek kepuasan mendapat nilai persentase rerata sebesar 87,4%, Code Maniac masuk pada kategori “Sangat Layak”.

Kata kunci: Human-Centered Design, Usability, Usability Testing, USE Questionnaire, High-Fidelity Prototype, User Experience

Abstract

Code Maniac is a gamification-based programming learning platform built by the development team of the Faculty of Computer Science Universitas Brawijaya (FILKOM UB), requires interface improvements to find refined design according to user needs and goals. This study aims to evaluate and produce interface design solutions using the Human-Centered Design (HCD) method based on the problems obtained. In addition, the usability level of the early design and the repair solution was also carried out. The usability level assessed includes three aspects, namely effectiveness, efficiency, and satisfaction. Initial design testing was carried out on eleven participants to run test scenarios and an emoticon table to find out what users felt. Meanwhile, the solution design test was conducted on eight participants using the USE Questionnaire to measure satisfaction. The design of the solution design improvement is made in the form of an interactive. The final results of this study get improvement design show an increase in all aspects of the test, namely the effectiveness aspect to 100%, the efficiency aspect with a Time-Based Efficiency (TBE) value of 0,064 goals/sec and an Overall Relative Efficiency (ORE) value of 100% which indicates that the solution design improvement the solution design has a better usability rate than the old design. The satisfaction aspect gets an average percentage value of 87,4%, Code Maniac is included in the “Very Eligible” category..

Keywords: Human-Centered Design, Usability, Usability Testing, USE Questionnaire, High-Fidelity Prototype, User Experience

1. PENDAHULUAN

Perkembangan teknologi yang sangat pesat mempengaruhi cara belajar seseorang terhadap sesuatu. Salah satu cara belajar yaitu belajar

Fakultas Ilmu Komputer, Universitas Brawijaya

pemrograman atau coding. Pemrograman merupakan proses membuat sekumpulan intruksi yang memberi tahu komputer bagaimana melakukan sebuah tugas. Tujuan utama dari pemrograman yaitu memecahkan suatu masalah. Di Fakultas Ilmu Komputer, Universitas Brawijaya sendiri, pemrograman merupakan mata kuliah wajib bagi semua mahasiswa. Berdasarkan survei terhadap 100 mahasiswa FILKOM UB, ditemukan bahwa 76% responden lebih tertarik dengan materi pembleajaran selain mata kuliah pemrograman dasar (Bastari, et al., 2017).

Faktor keterbatasan materi dan kurangnya runtutan langkah dalam pembelajaran yang menjadi penyebab kesulitan dan kurangnya minat mahasiswa terhadap pembelajaran pemrograman. Dibutuhkan pembelajaran dari basic programming. Untuk mengatasi permasalahan tersebut telah dikembangkan platform pembelajaran berbasis gamifikasi Bernama Code Maniac.

Tim dari FILKOM UB mengembangkan Code Maniac yang merupakan sebuah platform pembelajaran materi pemrograman berbasis gamifikasi. Code Maniac mulai dikembangkan melalui Skema HPP (Hibah Penelitian Pemula) LPPM UB untuk pendanaan tahun 2020. Tujuan dibuatnya platform ini adalah untuk meningkatkan minat dan motivasi belajar mahasiswa. Code Maniac merupakan karya hasil kolaborasi tiga laboratorium dan grup riset di FILKOM UB, yang di dalamnya terdapat Software Engineering Laboratory, UB Learning Technology Laboratory dan Grup Riset Komputasi Cerdas. Konsep yang dibawakan oleh Code Maniac berupa sistem pembelajaran berbasis gamifikasi, sehingga pengguna diharapkan dapat belajar pemrograman dan merasakan keseruan berinteraksi dengan Code Maniac. Saat ini Code Maniac sudah dapat diakses bagi mahasiswa yang ingin belajar pemrograman secara menyenangkan.

Dalam pengembangan Code Maniac, berencana melakukan perbaikan antarmuka sampai menemukan refined design agar adaptif sesuai dengan kondisi emosional pengguna dan kebutuhan pengguna. Tim pengembang juga merasakan hal yang sama dalam implementasinya, yaitu kendala tidak adanya perancangan antarmuka dan pengalaman pengguna yang baik dalam memenuhi tujuan pengguna,

Penelitian ini dilakukan dengan tujuan untuk mengevaluasi dan meningkatkan

antarmuka pengguna sehingga menghasilkan refined design. Pendekatan yang digunakan adalah Human-Centered Design (HCD). HCD adalah desain yang berpusat pada manusia, dalam proses penciptaan berdasarkan karakteristik alami, memperhatikan keadaan psikologi dan persepsi manusia. Kuesioner akhir menggunakan USE Questionnaire untuk mendapatkan data secara kuantitatif dengan parameter yang berbeda-beda. Parameter- parameter tersebut terbagi menjadi 4 aspek yang dapat menunjang penelitian ini, yaitu usefulness, ease of use, ease of learning dan satisfaction.

Berdasarkan penjelasan di atas, diharapkan dari penelitian ini dapat memperoleh hasil berupa rancangan yang lebih baik dari sebelumnya dan memenuhi kebutuhan pengguna.

2. LANDASAN KEPUSTAKAAN 2.1. Human-Centered Design

Menurut (ISO 9241-210, 2010), Human- centered design adalah metode untuk desain dan pengembangan sistem, tujuannya adalah untuk mengembangkan sistem interaktif dengan tingkat kegunaan yang lebih tinggi dengan berfokus pada kegunaan dari sistem dengan melibatkan human factor atau aspek ergonomi dan pengetahuan serta teknik tentang usability.

HCD adalah desain proses berfokus pada kebutuhan dan persyaratan pengguna (Norman, 2002). Prinsip utama HCD adalah menjelaskan tentang bagaimana memperoleh dan mengimplementasikan pengetahuan yang berkaitan dengan manusia dan bagaimana mereka berhubungan atau berinteraksi dengan lingkungan, bertujuan untuk menciptakan produk atau sistem yang dapat mencukupi kebutuhan pengguna.

Dari paparan di atas diketahui bahwa HCD adalah desain yang berpusat pada manusia, yang sangat memperhatikan visi dan psikologi manusia dalam proses penciptaan sesuatu berdasarkan karakteristik alami. Keberadaan pengguna atau manusia menjadi bagian penting dalam pendekatan ini. Selama perancangan sistem menggunakan HCD, empat tahapan harus dilakukan selama merancang yang ditunjukkan pada Gambar 1.

Gambar 1. Tahapan HCD Sumber: ISO 9241-210 (2010)

2.2. Usability Testing

Usability merupakan sebuah alat penelitian yang menilai sejauh mana pengguna dapat menggunakan produk untuk mencapai tujuan yang ingin dicapai dengan aspek yang dinilai yaitu efektif, efisien, dan kepuasan pengguna dalam lingkungan penggunaan (ISO 9241-11, 2018). Usability testing merupakan kegiatan evaluasi produk atau sistem yang menguji pengguna yang representatif. Pengujian kegunaan bertujuan untuk mengidentifikasi masalah terkait kegunaan, mengumpulkan data secara kualitatif dan kuantitatif, dan mengukur kepuasan (Usability.gov, 2019).

2.3. Metrik Pengukuran Usability

Mendefinisikan standar kegunaan sebuah produk atau sistem, dan pengguna dapat menggunakannya dalam mencapai tujuan tertentu dengan tiga aspek yaitu efektivitas, efisiensi dan kepuasan di lingkungan penggunaan yang telah ditentukan (ISO 9241- 11, 2018). Metrik pengukuran digunakan untuk dapat mengamati dan menghitung permasalahan yang dialami oleh pengguna sehingga mengatasi kebutuhan pengguna.

A. Completion Rate

Untuk mengukur tingkat efektivitas dapat dihitung dengan mengukur nilai completion rate.

Completion rate merupakan metrik yang mudah dipahami, sehingga metrik ini sangat popular.

Nilai biner ‘1’ apabila tugas berhasil diselesaikan dan nilai ‘0’ apabila tugas gagal diselesaikan. Persamaan (1) merupakan persamaan untuk menghitung completion.

Completion Rate= 𝐽𝑢𝑚𝑙𝑎ℎ 𝑡𝑎𝑠𝑘 𝑏𝑒𝑟ℎ𝑎𝑠𝑖𝑙

𝐽𝑢𝑚𝑙𝑎ℎ 𝑡𝑎𝑠𝑘𝑠 𝑦𝑎𝑛𝑔 𝑑𝑖𝑙𝑎𝑘𝑢𝑘𝑎× 100% (1)

B. Overall Relative Efficiency

Efisiensi diukur dalam hal waktu tugas yang dikerjakan. Berapa lama (dalam detik atau menit) yang dibutuhkan peserta untuk menyelesaikan task dengan benar.Penghitungan menggunakan ORE adalah waktu yang dihabiskan oleh pengguna ketika berhasil menyelesaikan task dengan total waktu yang dihabiskan oleh semua penggun (Mifsud, 2015).

Persamaan (2) merupakan persamaan yang digunakan untuk mengukur overall relative efficiency.

𝑂𝑣𝑒𝑟𝑎𝑙𝑙 𝑅𝑒𝑙𝑎𝑡𝑖𝑣𝑒 𝐸𝑓𝑓𝑖𝑐𝑖𝑒𝑛𝑐𝑦 =

∑ ∑^N n_ijt_ij i=1 R

j=1

∑ ∑^N t_ij i=1 R j=1

× 100% (2)

Keterangan:

N = Jumlah total task R = Jumlah user

nij = Hasil task I oleh user j; jika user berhasil menyelesaikan tugas, maka nij=1, jika tidak, maka nij=0

tij = Waktu yang dihabiskan oleh user j untuk menyelesaikan task i. Jika tugas tidak berhasil diselesaikan, maka waktu diukur hingga saat user berhenti dari task.

C. Time-Based Efficiency

Cara lain menghitung tingkat efisiensi pengguna saat menyelesaikan tugas, dapat digunakan pengukuran waktu yang dapat membantu dalam perhitungan bagi pengguna untuk menyelesaikan task yang dibutuhkan adalah Time-Based Efficiency (TBE). Efisiensi merupakan seberapa mudah bagi pengguna untuk mempelajari desain sistem dan berapa lama waktu yang diperlukan untuk menyelesaikan tugas yang diberikan (Nielsen, 2012). Persamaan (3) merupakan persamaan yang digunakan menghitung TBE.

𝑇𝑖𝑚𝑒 𝐵𝑎𝑠𝑒𝑑 𝐸𝑓𝑓𝑖𝑐𝑖𝑒𝑛𝑐𝑦 =

∑ ∑ ^nij

tij N i=1 R

j=1

𝑁𝑅 (3)

Keterangan:

N = Jumlah total task R = Jumlah user

nij = Hasil task I oleh user j; jika user berhasil menyelesaikan task, maka nij=1, jika tidak, maka nij=0

tij = Waktu yang diperlukan oleh user j untuk menyelesaikan task i. Jika task tidak berhasil diselesaikan, maka waktu diukur hingga saat pengguna berhenti dari task.

D. Task Level Satisfaction

Setelah pengguna mencoba tugas yang telah

Fakultas Ilmu Komputer, Universitas Brawijaya diberikan, selanjutnya akan mengisi sebuah kuisioner yang dimana isinya terdiri dari pertanyaan- pertanyaan yang berkaitan tentang aktivitas yang dilakukan, pengguna harus memberi penilaian pribadi menggunakan Skala Likert. Aspek kepuasan diukur menggunakan kuisioner USE.

2.4. USE Questionnaire

USE Questionnaire adalah kuesioner yang dapat digunakan dalam pengukuran tingkat usability. Pada kuesioner USE mencakup tiga aspek pengukuran pengujian ISO, yaitu efisiensi, efektivitas dan kepuasan. USE merupakan alat bantu yang dapat digunakan untuk mempersiapkan pertanyaan yang akan diajukan dalam bentuk kuesioner. Kuesioner USE terdiri empat dimensi yaitu usefulness, ease of use, ease of learning dan satisfaction. Kuesioner ini berfungsi mengukur tingkat kepuasan pengguna dalam menjalankan sistem atau aplikasi yang sedang diteliti dengan diberikan kepada pengguna setelah melakukan pengujian atau task yang sudah ditentukan sebelumnya.

3. METODOLOGI

Gambar 2 merupakan alur dan tahapan- tahapan yang dilakukan dalam penelitian ini.

Gambar 2. Diagram Metodologi Penelitian

Penelitian diawali dengan studi literatur

untuk mempelajari metode atau bidang sejenis dengan penelitian yaitu HCD, USE Questionnaire, usability testing dan user experience. Langkah selanjutnya masuk ke tahap pendekatan HCD, diawali dari analisis konteks penggunaan, memahami karakteristik awal pengguna, tugas pengguna, dan lingkungan pengguna. Setelah memperoleh informasi, dilanjutkan dengan menggunakan usability testing dan USE Questionnaire untuk melakukan penilaian awal terhadap desain awal. Hasil dari usability berupa daftar kebutuhan pengguna atau kendala yang dialami serta saran perbaikan yang diberikan yang dapat dijadikan acuan dalam membuat rancangan desain solusi yang memperhatikan tingkat efektivitas, efisiensi, dan kepuasan. Kemudian membuat rancangan solusi desain dalam bentuk prototipe low-fidelity berupa wireframe, screenflow dan prototipe high-fidelity yang menyerupai tampilan asli dari Code Maniac dan bersifat interaktif yang akan digunakan dalam pengujian. Tahap terakhir yaitu melakukan evaluasi kembali untuk membandingkan hasil desain awal dan desain yang disempurnakan. Hasil pengujian akan menunjukkan seberapa jauh desain solusi dapat memenuhi kebutuhan pengguna. Tahap akhir adalah untuk menarik kesimpulan dan rekomendasi untuk penelitian selanjutnya.

4. HASIL EVALUASI AWAL

4.1. Identifikasi Pengguna dan Stakeholder Berdasarkan hasil konteks analisis pengguna dilakukan dengan mewawancarai user sesuai dengan pertanyaan pada lampiran A dan analisis sistem yang telah dibangun dapat disimpulkan bahwa pengguna Code Maniac adalah Dosen dan Mahasiswa FIlkom UB.

4.2. Identifikasi Karakteristik dari Kelompok Pengguna

Beberapa ciri atau karakteristik pengguna yang menggunakan Code Maniac nantinya:

1. Pengguna merupakan civitas akademika Fakultas Ilmu Komputer Universitas Brawijaya.

2. Sistem dapat digunakan oleh Pria dan Wanita.

3. User memiliki akses internet maupun intranet.

4. Pengguna menggunakan komputer atau ponsel cerdas dalam kesehariannya.

4.3. Identifikasi Tujuan dan Tugas untuk Kelompok Pengguna

Code Maniac mempunyai goals yaitu untuk meningkatkan minat dan motivasi belajar mahasiswa mengenai pemrograman sebagai media pembelajaran berbasis gamifikasi yang memudahkan mahasiswa. Pengguna juga mengharapkan Code Maniac dapat digunakan dengan mudah dan runtut dalam penyampaian materi sehingga mahasiswa tidak ada yang kesulitan lagi dalam hal pemrograman.

Aktivitas yang dapat dilakukan pengguna pada Code Maniac didapatkan melalui hasil analisis dan juga informasi dari stakeholder dan developer terdahulu. task dan deskrripsi pengujian dapat ditunjukkan pada Tabel 1.

Tabel 1. Task dan Deskripsi Pengujian

No Goals Deskripsi

1 Mendaftar dan Masuk ke

dalam Code Maniac

1. Anda adalah seorang mahasiswa semester satu yang diminta oleh Dosen

Anda untuk

melaksanakan praktikum pemograman dasar secara online dikarenakan adanya pandemi, Anda diminta untuk membuka halaman

http://codemaniac- filkom.ub.ac.id/ di browser lalu melakukan pendaftaran.

2. Beberapa waktu sebelumnya, Anda telah melakukan pendaftaran di Code Maniac dan Anda ingin memulai mencoba praktikum dan cobalah untuk masuk ke dalam aplikasi.

2 Melihat

Kategori dan Mengambil

Course

1. Anda telah masuk ke dalam Code Maniac, karena Anda seorang mahasiswa baru yang sedang belajar mengenai materi input, proses dan output, Anda mencari course yang mempelajari materi tersebut dan menemukan ada beberapa sub materi yang bisa dipelajari.

2. Pelajari course Statement Input dan kerjakan tugas yang ada.

3 Melihat

Achievement

1. Setelah mengambil beberapa course dan mengerjakan tugas yang ada, sekarang Anda mencoba untuk melihat

penghargaan apa saja yang berhasil Anda peroleh.

4 Melihat Hasil Course

1. Anda sebelumnya telah mengambil beberapa course, tetapi Anda lupa berapa poin yang Anda dapatkan, sekarang coba lihat riwayat course yang Anda ambil dan berapa poin yang didapatkan serta melihat jawaban yang Anda isikan sebelumnya.

5 Mengubah Identitas

1. Karena foto profile Anda belum disetting, Anda ingin mengubahnya.

Sekarang cobalah untuk mengubah foto profile Anda dengan foto karakter perempuan yang disediakan.

6 Berlomba dengan Teman

1. Anda ingin menguji kemampuan bersama teman sebelah Anda pada

suatu materi

pemrograman dasar yang disepakati, Anda mengerjakan tugas yang ada dan mendapatkan hasilnya.

4.4. Identifikasi Lingkungan Sistem

Identifikasi karakteristik sistem ditunjukkan pada Tabel 2.

Tabel 2. Identifikasi Karakteristik No Karakteristik Sistem

1 Perangkat Keras

Komputer atau Smartphone

2 Perangkat Lunak

Komputer dengan perangkat lunak terinstall Google Chrome, Mozilla Firefox, Opera, Safari, maupun Internet Explorer untuk membuka Code Maniac.

Smartphone berbasis sistem operasi Android maupun IOS.

3 Kelengkapan Lain

Memiliki koneksi internet maupun intranet.

4.5. Evaluasi Awal dan Spesifikasi Persyaratan Pengguna

Beberapa peserta diuji dengan menetapkan task sesuai dengan task pengguna pada Tabel 1.

Tujuan pengujian usability ini adalah untuk

Fakultas Ilmu Komputer, Universitas Brawijaya

mengevaluasi desain antarmuka pengguna Code Maniac untuk mendapatkan masukan yang akan digunakan sebagai referensi untuk merancang desain perbaikan. Pengukuran dengan tingkat efektivitas, efisiensi, dan kepuasan termasuk dalam pengujian ini. Evaluasi melibatkan 11 partisipan yang harus menyelesaikan 6 tugas.

A. Aspek Efektivitas

Berdasarkan hasil pengukuran tingkat keefektifan, ke-66 tugas yang diobservasi telah diselesaikan oleh 11 partisipan dan masing- masing partisipan mengerjakan 6 tugas. Di antara semua task yang dilakukan, 61 task Berhasil (B) dan 5 task dinyatakan Gagal (G).

Berdasarkan hasil ini, dilakukan perhitungan untuk mengevaluasi keberhasilan pengguna dalam melakukan task sesuai dengan rumus 1 sebesar 92,4%.

B. Aspek Efisiensi

Dalam hal efisiensi, TBE dan ORE dihitung. Total nilai TBE dari seluruh task yang telah diberikan dan diselesaikan oleh partisipan berdasarkan rumus persamaan 2 adalah 0,034 goals/sec. Dalam ORE, waktu total yang dibutuhkan saat pengerjaan task keseluruhan yaitu 7540 detik. Sedangkan waktu yang diperoleh dalam mengerjakan 61 tugas yang berhasil diselesaikan yaitu 6846. Berdasarkan data tersebut, nilai ORE dapat dihitung sesuai dengan rumus 3 adalah 90,7%.

C. Aspek Kepuasan

Pada tahap ini, kepuasan partisipan pada seluruh task yang diselesaikan akan diukur.

Tingkat kepuasan oleh pengguna akan diukur menggunakan kuesioner USE Questionnaire.

Namun pada hasil evaluasi awal, data yang didapatkan bukan merupakan testing menggunakan kuesioner USE Questionnaire melainkan menggunakan Emotion Table. Secara keseluruhan didapat rata-rata sistem berdasarkan kategori yang diberikan pada Emotion Table.

Keseluruhan nilai rata rata kategori positive adalah hal 76,71% dan nilai rata-rata kategori negative 23,28%.

4.6. Permasalahan Pada Desain Awal

Permasalahan, kendala serta pengalaman yang ditemui peserta dalam desain awal Code Maniac diperoleh melalui wawancara setelah pengujian. Uraian dari permasalahan yang dialami partisipan dirangkum dan ditunjukkan pada Tabel 3.

Tabel 3. Permasalahan Pada Desain Awal

Kode Deskripsi

M-01 Diperoleh time out pada saat submit registrasi dan tidak ada indikator yang menandakan keberhasilan submit data

M-02 Tidak ada informasi atau notifikasi ketika sukses atau gagal setelah mendaftar

M-03 Tampilan pada sistem diberikan tambahan desain seperti background dan sejenisnya agar tampilan lebih menarik

M-04 Ketika submit jawaban pada course dan salah tidak ada opsi untuk re-edit yang sudah dikerjakan dan harus mengulang dari awal.

Kurangnya informasi atau petunjuk ketika kode yang dikerjakan salah

M-05 Menu course sulit untuk ditemukan, menyebabkan ketidaktahuan untuk mencapai course

M-06 Letak tab course membingungkan sehingga menghambat kinerja pengguna. Tidak adanya pembahasan jawaban ketika salah

M-07 Peletakan menu riwayat sebaiknya ditaruh terpisah dan diperhatikan lagi agar mudah untuk di notice

M-08 Tidak sinkron antara perintah dengan output di tab course pada saat hasil sudah benar tetapi saat submit masih ada kesalahan

M-09 Pada tab hasil course tidak terdapat jawaban yang telah diisikan sebelumnya dan juga salah mengira letak hasil course

M-10 Tampilan pada hasil course dapat dibuat lebih menarik lagi seperti memunculkan tabel dan opsi untuk melihat pembahasan pada setiap course yang telah diambil

M-11 Tidak terdapat pemilihan untuk mengganti avatar menggunakan foto atau gambar pribadi M-12 Inkonsistensi halaman, seperti pada saat selesai mengedit profil halaman yang keluar adalah home melainkan halaman terakhir dari pengguna sebelum mengedit profil

M-13 Pada tab friends sedikit kesusahan saat mencari teman

M-14 Pada tab friends tidak adanya informasi atau opsi untuk menerima maupun menolak ajakan dari teman

5. PERANCANGAN DESAIN SOLUSI Sebelum masuk dalam perancangan, akan dibuat user flow untuk memetakan langkah- langkah saat pengguna berinteraksi dengan sistem. Selanjutnya perancangan dilakukan dengan membuat prototipe low-fidelity berupa wireframe dan screenflow, selanjutnya merancang prototipe high-fidelity berbentuk desain interaktif menyerupai wujud asli sebuah sistem.

5.1. User Flow

User Flow merupakan diagram langkah- langkah yang harus diambil pengguna untuk menyelesaikan sebuah task. User Flow dari tugas mendaftar dan masuk ke dalam Code

Maniac ditunjukkan pada Gambar 3.

Gambar 3. User Flow Task Mendaftar dan Masuk ke dalam Code Maniac

5.2. Wireframe

Hasil rancangan wireframe desain solusi halaman dashboard Code Maniac ditunjukkan pada Gambar 4.

Gambar 4. Wireframe Halaman Dashboard

5.3. Screenflow

Screenflow merupakan gambaran alur atau proses interaksi dari wireframe yang telah dibuat dengan tujuan untuk mengetahui alur dari aplikasi. Screenflow dibuat berdasarkan skenario pengujian yang sudah dibuat. Screenflow task mendaftar dan masuk ke dalam Code Maniac ditunjukkan pada Gambar 5.

Gambar 5. Screenflow Task Mendaftar dan

Masuk ke dalam Code Maniac

5.4. Prototipe Interaktif

Dalam melakukan perancangan desain solusi perbaikan dalam bentuk prototipe high- fidelity yang bersifat interaktif, wireframe dan screenflow desain solusi perbaikan sebelumnya digunakan sebagai dasar atau acuan. Figma adalah tools yang digunakan dalam penelitian ini dengan tujuan mendukung pembuatan prototipe interaktif. Prototipe desain solusi dashboard ditunjukkan pada Gambar 6.

Gambar 6. Prototipe Halaman Dashboard

6. EVALUASI DESAIN SOLUSI DAN ANALISIS HASIL

Setelah rancangan perbaikan selesai, solusi desain akan dievaluasi. Evaluasi dilakukan dengan menggunakan solusi desain high-fidelity prototype Code maniac yang telah diperbaiki berupa desain interaktif yang telah dibuat. Pada evalusi solusi, pengujian yang sama akan dilakukan saat mengevaluasi desain awal, seperti yang ditunjukkan pada Tabel 1.

6.1. Hasil Usability Testing

A. Aspek Efektivitas

Berdasarkan dari hasil pengukuran semua tugas yang diobservasi diselesaikan oleh 8 partisipan dan setiap tugas dikatakan berhasil (B) sehingga mendapat nilai efektivitas sebesar 100%.

B. Aspek Efisiensi

Perhitungan TBE dan ORE dihitung

dalam aspek efisiensi. TBE dari setiap task

dan skor TBE rata-rata seluruh task.

Nilai total TBE dari seluruh task yang telah diberikan dan diselesaikan oleh partisipan adalah 0,064 goals/sec. Pada perhitungan ORE, dari seluruh task yang dilakukan oleh setiap peserta, semua

Fakultas Ilmu Komputer, Universitas Brawijaya

peserta berhasil menyelesaikan setiap task sehingga mendapat nilai ORE pada desain solusi sebesar 100%.

C. Aspek Kepuasan

Perbaikan desain berdasarkan aspek-aspek yang termasuk dalam USE Questionnaire dinilai menggunakan tingkat kepuasan. Secara keseluruhan, nilai kepuasan perbaikan solusi desain adalah 87,4%.

6.2. Analisis Hasil

Perbandingan hasil pengujian usability dilakukan untuk mengevaluasi, usability

testing dilakukan pada desain awal dan

perbaikan perancangan solusi desain.

A. Aspek Efektivitas

Melakukan perhitungan tingkat kesuksesan desain awal dan perbaikan rancangan desain solusi untuk menilai aspek efektivitas. Nilai efektivitas desain awal Code Maniac yaitu sebesar 92,4%. Sementara pada perbaikan rancangan desain solusi meningkat menjadi 100%. Peningkatan terjadi karena beberapa faktor.

B. Aspek Efisiensi

Skor TBE rata-rata untuk semua task dalam desain awal adalah 0,034 goals/sec, tetapi dalam rancangan solusi desain terjadi peningkatan dan didapatkan nilai menjadi 0,064 goals/sec. Selain itu, pada ORE nilai desain awal sebesar 90,7%, sedangkan pada rancangan solusi desain mengalami peningkatan sebesar 100%.

C. Aspek Kepuasan

Persentase 76,71% ke arah positive mendapat peningkatan tetapi menggunakan pengukuran yang berbeda yaitu kuesioner USE.

Secara keseluruhan, terjadi peningkatan pada kuesioner USE dengan total rata-rata persentase yaitu sebesar 87,4%. Hal ini menunjukkan bahwa dibandingkan dengan desain awal Code Maniac, peserta lebih nyaman saat menggunakan rancangan desain perbaikan dan sistem telah didemonstrasikan dengan sangat baik dan memiliki nilai yang konsisten tentang cara menggunakannya, sehingga peserta dapat lebih mudah memahami. Dengan nilai persentase rerata keseluruhan sebesar 87,4%, Code Maniac masuk pada kategori kelayakan

“Sangat Layak”.

7. PENUTUP

7.1. Kesimpulan

Evaluasi desain awal memperoleh hasil pada ketiga aspek yang diukur, yaitu pada aspek efektivitas diperoleh tingkat keberhasilan partisipan menyelesaikan tugas yang diberikan sebesar 92,4%. Dari segi efisiensi nilai Time- Based Efficiency adalah 0,034 tujuan/detik dan nilai ORE adalah 90,7%. Dari aspek kepuasan, evaluasi awal menggunakan pengukuran berupa emotion table yang secara keseluruhan menghasilkan nilai rata-rata kategori positive sebesar 76,71% dan nilai rata-rata kategori negative 23,28%.

Perbaikan rancangan desain solusi antarmuka pengguna Code Maniac dibuat dengan merancang user flow terlebih dahulu sebelum menghasilkan low-fidelity prototype berupa wireframe dan screenflow. Hasil akhir dari perbaikan rancangan desain solusi antarmuka ini berupa high-fidelity prototype dalam bentuk prototipe interaktif yang dibuat menggunakan Figma. Perbaikan dibuat sesuai dengan masalah dan kebutuhan dari pengguna berdasarkan pedoman desain yaitu 8 Golden Rules of Interface.

Aspek efektivitas dalam desain solusi, tingkat keberhasilan peserta dalam menyelesaikan setiap task adalah 100%, meningkat 7,6% dari evaluasi awal Code Maniac. Aspek efisiensi nilai TBE adalah 0,064 goals/sec serta ORE yaitu 100%, TBE meningkat menjadi 0,03 goals/sec dan ORE meningkat 9,3%. Di dalam aspek kepuasan, pengukuran evaluasi hasil desain awal dan desain solusi terdapat perbedaan. Desain awal menggunakan emoticon table sedangkan desain solusi menggunakan kuesioner USE. Pada aspek tingkat kepuasan dengan kuesioner USE didapat nilai rata- rata kepuasan secara keseluruhan sebesar 87,4%.

7.2. Saran

Ada beberapa saran yang

direkomendasikan dengan tujuan sebagai referensi penelitian berikutnya:

1. Rancangan desain solusi dapat di implementasikan pada bagian backend untuk melengkapi implementasi pada penelitian ini.

2. Perlu pembaharuan tampilan antarmuka pengguna dalam perancangan user experience Code Maniac jika kedepannya memiliki proses atau fitur-fitur baru.

DAFTAR PUSTAKA

Bastari, D. I., Pradana, F. & Priyambadha, B., 2017. Pengembangan Sistem Pembelajaran Pemrograman Java yang Atraktif Berbasis Website. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 1(12), pp. 1493-1499.

ISO 9241-11, 2018. Ergonomics of human- system interaction — Part 11: Usability:

Definitions and concepts. s.l.:s.n.

ISO 9241-210, 2010. Ergonomics of human- system interaction — Part 210: Human- centred design for interactive systems.

s.l.:s.n.

Lund, A., 2001. Measuring Usability with the USE Questionnaire. Usability and User Experience Newsletter of the STC Usability SIG, Volume 8.

Mifsud, J., 2015. Usability Metrics – A Guide To Quantify The Usability Of Any System.

[Online]

Available at:

https://usabilitygeek.com/usability- metrics-a-guide-to-quantify-system- usability/

[Accessed 29 January 2021].

Nielsen, J., 2000. Why You Only Need to Test

with 5 Users. [Online]

Available at:

https://www.nngroup.com/articles/why- you-only-need-to-test-with-5-users/

[Accessed 3 February 2021].

Nielsen, J., 2012. Usability 101: Introduction to

Usability. [Online]

Available at:

https://www.nngroup.com/articles/usabili ty-101-introduction-to-usability/

[Accessed 3 February 2021].

Norman, D. A., 2002. The Design of Everyday Things. 1st ed. New York: Basic Books.

Pedreira, O., García, F., Brisaboa, N. & Piattini, M., 2014. Gamification in software engineering – A systematic mapping.

Information and Software Technology, 57(1), pp. 157-168.

Usability.gov, 2019. Usability Testing. [Online]

Available at:

https://www.usability.gov/how-to-and- tools/methods/usability-testing.html [Accessed 3 February 2021].

Usability.gov, 2021. Prototyping. [Online]

Available at:

https://www.usability.gov/how-to-and- tools/methods/prototyping.html [Accessed 3 February 2021].

Usability.gov, 2021. Scenarios. [Online]

Available at:

https://www.usability.gov/how-to-and- tools/methods/scenarios.html

[Accessed 3 February 2021].