Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN: 2548-964X

Vol. 5, No. 4, April 2021, hlm. 1278-1287 http://j-ptiik.ub.ac.id

Perancangan Antarmuka Pengguna Aplikasi Pengelolaan Program PPK

Sekolah menggunakan Metode Human-Centered Design (HCD)
(Kasus: SMPI Sabilurrosyad Malang)
Dinda Kanya Anky Putri1, Ismiarta Aknuranda2, Retno Indah Rokhmawati3

Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya

Email: 1dindakny@student.ub.ac.id, 2i.aknuranda@ub.ac.id, 3retnoindahr@ub.ac.id

Abstrak
Penguatan Pendidikan Karakter (PPK) adalah kebijakan pendidikan nasional yang bertujuan untuk
memperkuat karakter peserta didik. Melalui program PPK diharapkan satuan pendidikan dapat
meningkatkan kualitas pendidikan terutama dalam aspek membangun karakter yang kuat. SMPI
Sabilurrosyad merupakan sekolah menengah pertama islam yang berlokasi di kota Malang, Jawa Timur,
dan termasuk dalam satuan pendidikan yang mengimplementasikan PPK dalam seluruh kegiatan
sekolah. Dalam setahun terakhir, SMPI Sabilurrosyad telah mengimplementasikan PPK dalam
pelaksanaan kegiatan-kegiatan di sekolah, namun dokumentasi kegiatan dan berkas-berkas pendukung
masih tersebar dan tidak terpusat sehingga menyulitkan sekolah dalam menilai keberhasilan program
PPK yang telah diimplementasikan. Dengan permasalahan tersebut, peneliti melakukan perancangan
antarmuka pengguna aplikasi berbasis web untuk mendukung proses pengumpulan dokumentasi serta
proses penilaian program PPK di sekolah. Metode yang digunakan adalah Human Centered Design
(HCD) yang melibatkan pengguna di setiap tahapannya sehingga rancangan antarmuka pengguna yang
dihasilkan dapat memenuhi kebutuhan pengguna. Skripsi ini menghasilkan dua rancangan desain
antarmuka pengguna dalam bentuk wireframe dan prototipe fidelitas medium, prototipe dievaluasi
dengan menggunakan teknik Usability Testing dan metode Single Ease Question kepada empat orang
responden. Hasil pengujian yang diperoleh menunjukkan bahwa tugas yang diberikan dapat dikerjakan
dengan mudah oleh responden namun rancangan antarmuka masih membutuhkan perbaikan
berdasarkan saran dari responden.
Kata kunci: perancangan, antarmuka pengguna, penguatan pendidikan karakter, HCD, usability testing, SEQ
Abstract
Penguatan Pendidikan Karakter (PPK) is a national education policy that aims to strengthen the
character of students. Through the PPK program, it is hoped that educational units can improve the
quality of education, especially in the aspect of building strong character. SMPI Sabilurrosyad is an
Islamic junior high school located in the city of Malang, East Java, and is included in the education unit
that implements PPK in all school activities. In the past year, SMPI Sabilurrosyad has implemented
PPK in the implementation of activities in schools, but the documentation of activities and supporting
files is still scattered and not centralized, making it difficult for school to assess the success of the PPK
program that has been implemented. With these problems, the researcher designed a web-based
application user interface to support the documentation collection process and the PPK program
assessment process in schools. The method used is Human Centered Design (HCD) which involves the
user at every stage so that the resulting user interface design can meet user needs. This study resulted
in two user interface designs in the form of a wireframe and a high-fidelity prototype. The prototypes
were evaluated using the Usability Testing technique and the Single Ease Question method to four
respondents. The test results obtained indicate that the given task can be done easily by the respondent,
but the interface design still needs improvement based on the respondents' suggestions.
Keywords: design, user interface, penguatan pendidikan karakter, HCD, usability testing, SEQ

Fakultas Ilmu Komputer

Universitas Brawijaya 1278
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
1. PENDAHULUAN
Penguatan Pendidikan Karakter (PPK)
merupakan kebijakan pendidikan yang bertujuan
sebagai implementasi dari Nawacita Presiden
Joko Widodo dalam sistem pendidikan nasional.
Menurut Peraturan Presiden No. 87 Tahun 2017
pasal 1 ayat 1, Penguatan Pendidikan Karakter
merupakan suatu gerakan di bawah tanggung
jawab satuan pendidikan yang bertujuan untuk
memperkuat karakter peserta didik sebagai
bagian dari Gerakan Nasional Revolusi Mental
(GNRM). program PPK merupakan gerakan
pendidikan di bawah tanggung jawab satuan
pendidikan formal atau yang selanjutnya disebut
sekolah. Melalui program PPK diharapkan
sekolah dapat meningkatkan kualitas pendidikan
terutama dalam aspek membangun karakter yang
kuat.
SMPI Sabilurrosyad merupakan sekolah
menengah pertama islam yang berlokasi di kota
Malang, Jawa Timur. SMPI Sabilurrosyad
termasuk dalam satuan pendidikan formal
jenjang pendidikan menengah yang
mengimplementasikan PPK dalam seluruh
kegiatan sekolah. Berdasarkan hasil wawancara
terhadap Kepala Sekolah, SMPI Sabilurrosyad
memiliki permasalahan dalam
pendokumentasian kegiatan yang telah
dilakukan. Dokumentasi kegiatan dan berkas-
berkas pendukung masih tersebar dan tidak
terpusat. Hal tersebut menyulitkan sekolah
dalam melakukan penilaian keberhasilan
program PPK yang telah diimplementasikan.
Penilaian keberhasilan PPK bertujuan untuk
menjadi acuan dalam merancang kegiatan-
kegiatan yang akan dilakukan selanjutnya, serta
untuk menentukan apakah kegiatan yang telah
dilakukan akan dilakukan kembali atau
ditiadakan.
Berdasarkan permasalahan yang terjadi,
maka rumusan masalah dari skripsi ini adalah
bagaimana konteks penggunaan dalam
perancangan antarmuka pengguna Aplikasi
Pengelolaan Program PPK SMPI Sabilurrosyad,
bagaimana hasil spesifikasi persyaratan
pengguna dalam perancangan antarmuka
pengguna Aplikasi Pengelolaan Program PPK
SMPI Sabilurrosyad, bagaimana hasil rancangan
antarmuka pengguna Aplikasi Pengelolaan
Program PPK yang sesuai dengan metode
Human-Centered Design, serta bagaimana hasil
evaluasi terhadap prototipe rancangan
Fakultas Ilmu Komputer, Universitas Brawijaya
1279
antarmuka pengguna Aplikasi Pengelolaan
Program PPK dengan menggunakan metode
pengujian usability. Tujuan dari skripsi adalah
merancang antarmuka aplikasi berbasis web
untuk mengelola program PPK agar
menghasilkan sistem yang mudah untuk
digunakan, dapat memenuhi kebutuhan
pengguna serta menghasilkan tingkat usability
yang baik. Perancangan antarmuka tersebut
menggunakan pendekatan Human Centered
Design (HCD).
Human-Centered Design berperan sebagai
pendekatan kreatif untuk pemecahan masalah
yang melibatkan manusia dan menghasilkan
solusi inovatif yang dibuat khusus sesuai dengan
kebutuhan mereka. Setiap fase perancangan
pada Human-Centered Design melibatkan
persepsi pengguna. Dalam merancang
antarmuka, peneliti menerapkan beberapa aturan
desain yang bersumber dari buku Research-
Based Web Design & Usability Guidelines
(2006).
Penelitian sebelumnya yang juga
menggunakan pendekatan Human Centered
Design (HCD) adalah Rahayu (2019) dengan
judul “Perancangan Antarmuka Aplikasi
Penggajian Karyawan CV. Kuranji Karya
Mandiri Menggunakan Metode Human
Centered-Design (HCD)”. Tujuan dari
penelitian tersebut adalah merancang antarmuka
aplikasi penggajian karyawan yang dapat
mendemontrasikan solusi untuk mengelola
informasi dan data karyawan serta penggajian
dengan tingkat usabillitas yang sesuai dengan
konteks penggunaan menggunakan pendekatan
HCD.
2. LANDASAN KEPUSTAKAAN
2.1. Human Centered Design (HCD)
Human Centered Design merupakan suatu
metode pendekatan dalam pengembangan sistem
interaktif dengan tujuan untuk membuat sistem
dapat digunakan dan memiliki manfaat, dengan
berfokus pada pengguna dan kebutuhan mereka.
HCD menerapkan faktor ergonomi manusia,
pengetahuan, dan teknik penggunaan (ISO,
2019). Fokus utama pada HCD adalah manusia,
dengan pertimbangan keterbatasan dan
kemampuan teknologi, serta fitur yang dimiliki
organisasi. Human-Centered Design merupakan
pendekatan beriorientasi objek untuk
pengembangan sistem interaktif yang
melibatkan perspektif manusia dalam tiap fase
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
desain dan evaluasi. Gambar 1 merupakan fase
Human-Centered Design.
Gambar 1. Fase Human Centered Design
Sumber: ISO 9241-210 (2019)
Menurut ISO 9241-210 (2019), Terdapat 4
fase berbeda dalam siklus HCD, yaitu:
1. Memahami dan menspesifikasi konteks
penggunaan
Tahap ini berisi spesifikasi konteks
penggunaan dari hasil wawancara yang
mencakup kelompok pengguna dan kelompok
pemangku kepentingan, karakteristik pengguna
atau kelompok pengguna, tujuan dan tugas
pengguna, lingkungan sistem, serta dilakukan
pemodelan proses bisnis as-is dan to-be.
2. Menspesifikasi persyaratan pengguna
Tahap ini merupakan identifikasi
kebutuhan pengguna, spesifikasi kebutuhan
fungsional dan nonfungsional, serta pemodelan
diagram use case.
3. Membuat solusi desain yang memenuhi
persyaratan pengguna
Tahap ini berisi perancangan desain solusi
yang mengacu kepada konteks penggunaan dan
spesifikasi persyaratan pengguna dengan
mengikuti aturan dan standar usability.
4. Mengevaluasi desain solusi terhadap
persyaratan
Tahap ini berisi evaluasi desain solusi yang
merupakan tahap penting dalam perancangan
berbasis HCD. Evaluasi desain solusi dilakukan
untuk memperoleh pemahaman yang lebih baik
mengenai kebutuhan pengguna.
2.2 Pengujian Usability
Pengujian usability adalah metode untuk
mengevaluasi suatu produk atau layanan dengan
cara mengujikan produk atau layanan tersebut
kepada pengguna yang representatif. Dalam
tahap pengujian, pengguna diminta untuk
mengerjakan tugas sementara fasilitator
memperhatikan tingkah laku pengguna saat
menggunakan sistem, mendengar tanggapan,
dan membuat catatan bila diperlukan. Tujuan
Fakultas Ilmu Komputer, Universitas Brawijaya
1280
dari pengujian usability adalah mengidentifikasi
permasalahan usability, mengumpulkan data
kualitatif dan kuantitatif terkait tanggapan
pengguna, serta mengukur kepuasan pengguna
terhadap produk (Usability.gov, 2018).
Dalam melakukan pengujian usability,
peneliti menggunakan kuesioner Single Ease
Question (SEQ) yang bertujuan untuk menilai
seberapa sulit pengguna dalam menyelesaikan
suatu tugas. Single Ease Question merupakan
kuesioner dengan skala likert satu sampai 7. Poin
1 menandakan sangat sulit dan poin 7
menandakan sangat mudah. Pengguna akan
diberi pertanyaan secara keseluruhan seberapa
sulit atau mudah tugas yang diberikan. Single
Ease Question memiliki skor rata-rata 5,5
sehingga apabila nilai rata-rata melampaui skor
tersebut, maka dapat dikatakan tugas mudah
untuk dikerjakan. (Sauro, 2012). Gambar 2
merupakan bentuk kuesioner SEQ.
Gambar 2. Kuesioner SEQ
Sumber: Sauro (2012)
3. METODOLOGI
Bab ini menguraikan tahapan-tahapan dari
metodologi yang digunakan dalam skripsi.
Skripsi ini menggunakan pendekatan Human
Centered Design (HCD) versi ISO 9241-210
(2019). Tahapan langkah kerja yang digunakan
dalam skripsi ini yang dapat dilihat pada Gambar
3.
3.1. Menentukan Konteks Penggunaan
Tahapan ini bertujuan untuk menentukan
konteks penggunaan sistem berdasarkan
karakteristik pengguna, organisasi dan tugas,
serta lingkungan teknis dan fisik di masa
mendatang ketika sistem digunakan (ISO, 2019).
Penulis mendefinisikan konteks penggunaan
yang didapatkan dari hasil wawancara dengan
kepala sekolah SMPI Sabilurrosyad terkait
website requirement yang dapat ditemukan pada
usability.gov. Hasil dari wawancara dengan
pemangku kepentingan menjadi acuan dalam
menentukan pemangku kepentingan dan
pengguna aplikasi, bagaimana karakteristik dari
pengguna tersebut, kelengkapan sistem yang
harus dipenuhi, serta daftar tugas pengguna.
3.2. Spesifikasi Persyaratan Pengguna
Dalam tahapan ini penulis mendefinisikan
persyaratan fungsional dan persyaratan
nonfungsional berdasarkan aktivitas dalam
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1281

proses bisnis. Kemudian dilakukan wawancara

untuk memvalidasi apakah persyaratan
fungsional dan persyaratan nonfungsional telah
memenuhi kebutuhan pengguna. Wawancara
dilakukan secara offline dengan Kepala Sekolah
dari SMPI Sabilurrosyad. Persyaratan pengguna
dan persyaratan fungsional dimodelkan dengan
use case diagram. Pemodelan use case diagram
bertujuan untuk mendefinisikan tujuan
pengguna dan langkah-langkah yang harus
dilakukan untuk mencapai tujuan tersebut.
3.3. Pembuatan Solusi Desain
Tahap selanjutnya adalah membuat solusi
desain. Dalam membuat solusi desain, penulis
mengacu kepada panduan dari buku Research
Based Web Design and Usability Guidelines
(2006) dan buku Human Computer Interaction
(2004). Penulis membuat desain navigasi
terlebih dahulu. Persyaratan fungsional dan
diagram use case menjadi dasar dalam
Gambar 3. Metodologi
pembuatan desain navigasi. Desain navigasi
bertujuan untuk mempresentasikan gambaran 4. KONTEKS PENGGUNAAN DAN
menu dan informasi yang akan dimuat dalam SPESIFIKASI PERSYARATAN
sistem, serta gambaran alur kerja sistem. Setelah
PENGUNA
membuat desain navigasi, rancangan selanjutnya
diteruskan menjadi wireframe dan kemudian 4.1 Menentukan Konteks Penggunaan
prototipe fidelitas medium. Setelah prototipe Tahap ini merupakan tahap penentuan
selesai dirancang, penulis memperlihatkan cara konteks penggunaan aplikasi manajemen
kerja prototipe kepada pengguna dan kegiatan PPK SMPI Sabilurrosyad, sehingga
memvalidasi kembali apakah kebutuhan didapatkan informasi mengenai konteks
pengguna sudah terpenuhi. penggunaan yang berlaku saat ini dan konteks
3.4. Evaluasi Solusi Desain penggunaan sistem yang akan datang.
Setelah prototipe fidelitas medium selesai 4.1.1 Hasil Wawancara
dirancang, selanjutnya dilakukan evaluasi solusi Wawancara dilakukan dengan mengacu
desain yag merupakan tahap keempat dari pada jenis persyaratan situs web yang terdapat
Human Centered Design (HCD). Pengujian pada website usability.gov, yaitu persyaratan
solusi desain dilakukan dengan memberikan organisasi dan persyaratan kualitas layanan.
tugas yang harus dilakukan pengguna, dan Hasil wawancara terhadap kepala sekolah SMPI
kuesioner Single Ease Question yang harus Sabilurrosyad dapat dilihat pada Tabel 1.
dilengkapi pengguna setiap selesai mengerjakan Tabel 1. Hasil Wawancara Persyaratan Situs Web
satu tugas, penggunaan kuesioner ini bertujuan
untuk mendapatkan hasil evaluasi kuantitatif ID Persyaratan Keterangan
dari pengguna. Kepuasan pengguna dapat dilihat A-1 Organisasi Tujuan aplikasi bagi SMPI
Sabilurrosyad adalah dapat
dari hasil kuesioner SEQ yang mana terdapat mengelola dokumentasi
skor penilaian angka 1 sampai 7 yang kegiatan berbasis program
merepresentasikan tugas sangat sulit hingga PPK dan dapat menyediakan
sangat mudah. Selain itu, pengguna juga penilaian mandiri
keberhasilan program PPK
dimintai tanggapan dan saran jika merasa tugas
sesuai panduan penilaian
yang diberikan sulit. Tujuan dari evaluasi adalah PPK dari pemerintah.
untuk mengetahui apakah solusi desain telah A-2 Kualitas Diharapkan aplikasi dengan
memenuhi persyaratan pengguna dan Layanan antarmuka pengguna yang
mendapatkan respon dari pengguna guna baik dapat memudahkan
pengguna untuk mencapai
meningkatkan kualitas desain. tujuan dalam menggunakan
aplikasi. layanan yang
disediakan hanya digunakan

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1282

oleh internal SMPI Penanggung Mampu mengoperasikan laptop atau

Sabilurrosyad. Jawab Kegiatan computer, terbiasa menggunakan
PPK sistem dalam bentuk web, paham
4.1.2 Identifikasi Pemangku Kepentingan mengenai pelaksanaan dan
dan Pengguna Aplikasi dokumentasi program PPK.
Menurut ISO 9241-210 (2019), pemangku Admin Mampu mengoperasikan komputer
kepentingan merupakan sekumpulan orang atau atau laptop, terbiasa menggunakan
sistem berbasis web. Dari
individu yang memiliki hak, bagian, klaim, atau persyaratan organisasi, admin
ketertarikan terhadap sistem yang memiliki memiliki rentang usia 22-50 tahun
karakteristik yang memenuhi kebutuhan dan dan paham mengenai program PPK.
ekspektasi mereka. Sedangkan yang dimaksud 4.1.4 Identifikasi Lingkungan Sistem
pengguna adalah sekelompok orang atau Untuk menentukan lingkungan sistem akan
individu yang menggunakan dan berinteraksi dijelaskan tentang karakteristik perangkat keras,
dengan sistem secara langsung. Kelompok perangkat lunak dan kebutuhan yang tepat dalam
pemangku kepentingan dapat dilihat pada Tabel mengakses aplikasi. Lingkungan sistem dapat
2 dan kelompok pengguna dapat dilihat pada dilihat pada Tabel 5.
Tabel 3.
Tabel 5. Lingkungan Sistem
Tabel 2. Kelompok Pemangku Kepentingan
Lingkungan
Pemangku Karakteristik
Keterangan Sistem
Kepentingan Perangkat keras Berupa komputer atau laptop,
Kepala sekolah Kepala sekolah SMPI Sabilurrosyad persyaratan minimum adalah RAM
selaku pengelola dan pemimpin 1 GB dan tampilan dengan resolusi
pelaksanaan program PPK di 1920 x 1080 pixel.
sekolah. Perangkat lunak Menggunakan web browser seperti
Penanggung Penanggung Jawab Kegiatan PPK Google Chrome, Opera, atau
Jawab Kegiatan termasuk guru dan staf SMPI Microsoft Edge.
PPK Sabilurrosyad. Jaringan Aplikasi berbasis web
internet membutuhkan koneksi internet
Tabel 3. Kelompok Pengguna untuk dapat terhubung ke server.
Kelompok
Keterangan 4.1.5 Pemodelan Proses Bisnis
Pengguna Pemodelan proses bisnis pada skripsi ini
Kepala sekolah Kepala sekolah SMPI Sabilurrosyad
bertanggung jawab dalam
bertujuan untuk menggambarkan hubungan
pelaksanaan dan evaluasi program aktivitas yang terjadi di SMPI Sabilurrosyad.
PPK di sekolah. Hasil wawancara dengan bapak Islahuddin
Penanggung Penanggung Jawab Kegiatan PPK selaku Kepala Sekolah SMPI Sabilurrosyad
Jawab Kegiatan bertanggung jawab dalam digunakan sebagai dasar pembuatan proses
PPK melaksanakan dan
mendokumentasikan program PPK bisnis.
di sekolah. 4.1.5.1 Proses Bisnis As-Is Penilaian
Admin Admin merupakan pegawai internal Program PPK
sekolah yang bertugas mengelola Saat ini masih belum terdapat proses bisnis
akun pengguna sistem.
penilaian program PPK di SMPI Sabilurrosyad
4.1.3 Identifikasi Karakteristik Pengguna karena belum pernah diadakan penilaian
program PPK yang berbasis pada indikator
Identifikasi karakteristik pengguna dapat
penilaian dari pemerintah.
mencakup pengetahuan, keterampilan,
4.1.5.2 Proses Bisnis To-Be Penilaian
pengalaman, pendidikan, pelatihan, atribut fisik,
Program PPK
kebiasaan, preferensi dan kemampuan pengguna
Proses bisnis evaluasi program PPK
(ISO 9241-210, 2019). Karakteristik pengguna
memiliki dua aktor, yaitu Kepala Sekolah dan
dijelaskan dalam Tabel 4.
sistem. Proses bisnis dimulai dengan Kepala
Tabel 4. Karakteristik Pengguna Sekolah membuka sistem lalu menambah
Kelompok penilaian. Selanjutnya kepala sekolah dapat
Karakteristik melakukan input skor penilaian dan
Pengguna
Kepala sekolah Mampu mengoperasikan laptop atau mengunggah bukti penilaian. Kemudian sistem
komputer, terbiasa menggunakan akan mengkalkulasi skor penilaian dan
sistem berbasis web, paham
mengenai pelaksanaan dan
menghasilkan rekomendasi berdasarkan
penilaian program PPK. indikator penilaian program PPK. Skor penilaian

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1283

dan hasil rekomendasi selanjutnya akan Tabel 6. Spesifikasi use case mengelola penilaian
disimpan dalam basis data sistem. Setelah itu program PPK
kepala sekolah dapat memilih untuk mengubah Nama Properti Penjelasan
skor penilaian, menghapus bukti penilaian, ID UC-06
menambah bukti penilaian, atau melihat bukti Brief Menjelaskan bagaimana aktor
penilaian. Selanjutnya kepala sekolah dapat Description Kepala Sekolah menggunakan
melihat hasil skor penilaian dan rekomendasi sistem untuk menambahkan,
perbaikan yang bersumber dari basis data hasil melihat, mengubah, dan menghapus
penilaian. Setelah kepala sekolah mengetahui hasil penilaian program PPK.
Actor Kepala Sekolah
hasil skor penilaian dan rekomendasi perbaikan,
maka proses bisnis evaluasi program PPK Pre-Condition - Perangkat untuk mengakses
selesai. sistem harus memiliki koneksi
internet.
4.2 Spesifikasi Persyaratan Pengguna
Hasil wawancara yang telah dilakukan - Sistem terhubung dengan server.
dapat digunakan untuk mengidentifikasi - Aktor telah login atau masuk ke
persyaratan fungsional dan nonfungsional. sistem.
Terdapat 5 persyaratan fungsional untuk Kepala Post-Condition - Sistem berhasil menyimpan data
Sekolah, 2 persyaratan fungsional untuk hasil penilaian.
Penanggung Jawab Kegiatan, dan 1 persyaratan - Aktor dapat melihat data hasil
fungsional untuk admin. Untuk persyaratan penilaian yang tersimpan dalam
nonfungsional terdapat 4 persyaratan. sistem.
4.3 Pemodelan Use Case Basic Flow 1. Use case dimulai saat aktor
4.3.1 Diagram Use Case membuka rubrik penilaian
Pemodelan use case bertujuan untuk program PPK.
menjelaskan apa yang dapat dilakukan oleh 2. Sistem menampilkan data
aktor terhadap sistem. Pada skripsi ini diagram penilaian.
use case menjabarkan persyaratan fungsional 3. Aktor memilih menambah
yang telah didefinisikan sebelumnya. Diagram penilaian.
use case dapat dilihat pada Gambar 4. 4. Sistem menampilkan indikator
penilaian dan opsi unggah bukti
penilaian.
5. Aktor mengisi indikator
penilaian dan mengunggah
bukti penilaian.
6. Sistem menyimpan data
penilaian.
7. Sistem menampilkan status
penilaian yang telah tersimpan.
8. Use case selesai.

Gambar 4. Diagram use case
4.3.2 Spesifikasi Use Case
Spesifikasi use case adalah penjelasan
mengenai setiap use case yang menjabarkan
bagaimana sistem dan aktor bekerja. Tabel 6
merupakan spesifikasi use case mengelola
penilaian program PPK.
5. SOLUSI DESAIN
Bab ini menjelaskan mengenai solusi desain
aplikasi berupa desain navigasi, Usability
Guidelines (aturan desain), wireframe, serta
desain prototipe fidelitas medium. Desain
navigasi terdiri dari 2 jenis, yaitu diagram
hirarkis dan jaringan dengan mengacu pada buku
Alan Dix dengan judul Human Computer
Interaction. Aturan desain yang digunakan
mereferensi pada buku Research-Based Web
Design & Usability Guidelines (2004).
5.1 Desain Navigasi
5.1.1 Diagram Hirarkis
Pemodelan diagram hirarkis bertujuan

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
untuk menggambarkan keseluruhan struktur
halaman web dalam bentuk hirarki. Kebutuhan
fungsional dan use case dari aplikasi merupakan
dasar dalam pembuatan diagram hirarkis.
Diagram ini menautkan layar, halaman, dan
fungsi dalam pengelompokan yang logis.
Gambar 5 merupakan diagram hirarkis pengguna
kepala sekolah.
Gambar 5. Diagram hirarkis dari sudut pandang
kepala sekolah
5.1.2 Jaringan Layar
Dalam menggambarkan sistem secara
lengkap, perlu ada penggambaran jalur halaman
yang dilalui oleh pengguna ketika melakukan
suatu task. Salah satu cara untuk
menggambarkannya adalah dengan membuat
jaringan layar. Jaringan layar menunjukkan
status atau layar utama yang dihubungkan
dengan panah. Gambar 6 merupakan jaringan
layar mengelola penilaian program PPK.
Gambar 6. Jaringan layar mengelola penilaian
program PPK
5.2 Usability Guidelines
Pada skripsi ini, usability guidelines yang
digunakan mengacu pada buku Research-Based
Web Design & Usability Guidelines (2006).
Pemilihan guidelines mengacu pada kebutuhan
fungsional dan nonfungsional aplikasi. Terdapat
27 aturan desain yang diterapkan pada
wireframe dan prototipe fidelitas medium.
Fakultas Ilmu Komputer, Universitas Brawijaya
1284
5.3 Wireframe
Setelah menentukan usability guidelines,
selanjutnya dilakukan perancangan wireframe.
Wireframe merupakan gambaran grafis yang
memuat elemen serta konten utama dari
antarmuka halaman aplikasi. Pada tahap ini,
penulis merancang dua desain antarmuka untuk
seluruh halaman.
5.3.1 Wireframe halaman rubrik penilaian
PPK
Gambar 7 dan Gambar 8 merupakan
wireframe halaman rubrik penilaian PPK:
Gambar 7. Wireframe halaman rubrik penilaian PPK
(Desain 1)
Gambar 8. Wireframe halaman rubrik penilaian PPK
(Desain 2)
Nomor 1 menunjukkan ikon notifikasi,
nomor 2 menunjukkan ikon profil beserta opsi
keluar atau atur ulang kata sandi, nomor 3
menunjukkan daftar menu, dan nomor 4
menunjukkan rubrik penilaian PPK yang dibuat
dalam bentuk collapse card.
5.4 Prototipe Fidelitas Medium
Setelah melakukan perancangan wireframe,
selanjutnya adalah perancangan prototipe
fidelitas medium. Perancangan prototipe
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1285

fidelitas medium bertujuan untuk membuat keseluruhan serta analisis hasilnya. Evaluasi
solusi desain dalam bentuk yang lebih konkret usability dilakukan untuk menggali
dan mendekati fungsionalitas sistem yang permasalahan yang terdapat pada desain sistem.
sesungguhnya. Evaluasi dilakukan dengan menggunakan
Pada perancangan prototipe fidelitas metode pengujian usability dan kuesioner Single
medium terdapat satu kali iterasi. Setelah Ease Question (SEQ). Hasil dari evaluasi akan
prototipe fidelitas medium awal selesai digunakan dalam membuat rekomendasi
dirancang, prototipe didemokan kepada Kepala perbaikan desain sistem.
Sekolah untuk dievaluasi. Jika pada hasil 6.1 Penentuan Responden
rancangan prototipe awal terdapat kekurangan,
Pengujian dilakukan kepada lima calon
maka akan dilakukan perbaikan sehingga
pengguna sistem. Responden pengujian yaitu
rancangan akhir dapat memenuhi kebutuhan dan
satu orang kepala sekolah, tiga orang
memuaskan pengguna.
penanggung jawab kegiatan, dan satu orang
5.4.1 Prototipe fidelitas medium halaman
admin. Pemilihan responden dilakukan dengan
rubrik penilaian PPK
menggunakan teknik snowball sampling.
Gambar 9 dan Gambar 10 merupakan
Menurut Ahmadi (2005), teknik snowball
wireframe halaman rubrik penilaian PPK:
sampling dimulai dengan satu atau sedikit orang
yang kemudian menunjuk beberapa orang
lainnya sehingga melibatkan sejumlah besar
orang. Tabel 7 merupakan daftar responden
untuk pengujian usability.
Tabel 7. Daftar responden pengujian usability
Kode
Nama Tanggung Jawab
Responden
RES-1 Islahuddin, Sebagai kepala
S.S., M.Pd sekolah SMPI
Sabilurrosyad yang
Gambar 9. Prototipe fidelitas medium halaman bertanggung jawab
rubrik penilaian PPK (Desain 1) pada pengelolaan dan
penilaian program
PPK.
RES-2 Hermi Sebagai waka
Ismawati kurikulum sekolah
yang bertanggung
jawab pada
pengelolaan program
PPK.
RES-3 Hilda Sebagai staff yang
Ekky bertanggung jawab
Sucahyo pada pengelolaan
program PPK.
RES-4 Yulina Sebagai guru yang
Gambar 10. Prototipe fidelitas medium halaman Dwi bertanggung jawab
rubrik penilaian PPK (Desain 2) Lestari, pada pengelolaan
Halaman rubrik penilaian PPK dibuat S.Pd program PPK.
berdasarkan kebutuhan pengguna dengan
6.2 Skenario Tugas
menerapkan usability guidelines yang telah
ditentukan sebelumnya. Pada halaman rubrik Skenario tugas dibuat dengan mengacu
pada use case scenario yang telah didefinisikan
penilaian PPK terdapat poin-poin penilaian
beserta opsi untuk menambah penilaian atau sebelumnya. Skenario tugas dibedakan
mengubah penilaian. berdasarkan kelompok pengguna, yaitu admin,
penanggung jawab kegiatan, dan kepala sekolah.
Terdapat 16 skenario tugas untuk kepala
6. EVALUASI SOLUSI DESAIN
sekolah, 10 skenario tugas untuk penanggung
Evaluasi solusi desain menjelaskan
mengenai evaluasi usability desain sistem secara jawab kegiatan, dan 5 skenario tugas untuk

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 1286

admin. dokumentasi”.
6.3 Analisis Hasil Pengujian Pengguna kepala
Analisis hasil pengujian diperoleh dari sekolah meminta untuk
responden berdasarkan tugas yang telah meniadakan fitur
dikerjakan. Pengujian dilakukan dengan tambah dokumentasi
pada akun kepala
menggunakan kuesioner SEQ guna mengukur sekolah, sehingga fitur
tingkat kemudahan pengguna dalam tersebut hanya ada di
menggunakan sistem serta memperoleh saran akun penanggung
mengenai antarmuka pengguna berdasarkan jawab kegiatan.
tugas yang telah dilakukan. Penamaan menu
6.3.1 Analisis Hasil Kuesioner SEQ “Dokumentasi
Kegiatan” diganti
Tabel 8 menampilkan kesimpulan yang menjadi “Laporan
diperoleh dari skor rata-rata seluruh tugas untuk Kegiatan”.
desain 1 dan desain 2 dari seluruh responden. SK-15 RES-1 Menu atur ulang kata
Skor rata-rata desain 1 adalah 6,57 dan skor rata- sandi perlu ditampilkan
rata desain 2 adalah 6,79. Masing-masing skor di halaman utama.
tersebut telah melebihi skor rata-rata SEQ yaitu SK-16 RES-1 Menu keluar perlu
5,5. Sehingga dapat dikatakan responden dapat ditampilkan di halaman
mengerjakan tugas dengan mudah. Namun jika utama.
dilihat kembali, kesimpulan dari data tersebut SK-20 RES-3 Ikon “+” pada tombol
adalah tingkat kemudahan tugas desain 2 lebih untuk menambahkan
tinggi daripada tingkat kemudahan tugas desain dokumentasi perlu
1. diganti dengan tulisan
“Tambah
Tabel 8. Skor rata-rata seluruh tugas desain 1 dan dokumentasi”.
desain 2
7. KESIMPULAN DAN SARAN
Skor Rata-Rata Seluruh 7.1 Kesimpulan
Responden Tugas
Konteks penggunaan aplikasi pengelolaan
Desain 1 Desain 2
program PPK SMPI Sabilurrosyad terdiri dari
Kepala Sekolah 6,12 6,5
Penanggung
hasil wawancara persyaratan situs web,
6,59 6,89 pemangku kepentingan dan pengguna aplikasi,
Jawab Kegiatan
Admin 7 7 karakteristik pengguna, lingkungan sistem, serta
Skor Rata-Rata daftar tujuan dan tugas pengguna. Pemangku
6,57 6,79 kepentingan dan pengguna yang terlibat antara
Desain
lain Kepala Sekolah, Penanggung Jawab
6.3.2 Hasil Masukan Responden Kegiatan, dan Admin. Karakteristik pengguna
Masukan responden merupakan saran atau yang ditentukan mencakup pengetahuan,
rekomendasi yang dituliskan di lembar keterampilan, atribut fisik, serta kebiasaan
pengujian ketika responden menyelesaikan pengguna. Lingkungan sistem mencakup
tugas. Setiap selesai mengerjakan satu tugas, karakteristik perangkat keras, perangkat lunak,
responden memberikan nilai dan memberikan dan jaringan internet. Daftar tujuan dan tugas
saran jika terdapat kendala dalam mengerjakan pengguna menjelaskan tujuan pengguna serta
tugas. Tabel 9 merupakan hasil masukan yang tugas yang harus dilakukan untuk mencapai
diperoleh dari seluruh responden. tujuan tersebut.
Tabel 9. Hasil masukan seluruh responden Spesifikasi persyaratan pengguna disusun
Kode Kode
berdasarkan hasil wawancara yang dilakukan
Masukan kepada Kepala Sekolah SMPI Sabilurrosyad,
Skenario Responden
SK-04 RES-1 Pengguna kesulitan diperoleh 5 persyaratan fungsional dan 2
dalam menemukan persyaratan non-fungsional. Persyaratan
tombol yang berfungsi fungsional kemudian dipetakan menjadi use case
untuk menambahkan yang menggambarkan interaksi antara pengguna
dokumentasi baru, ikon dan sistem. Hasil pemodelan use case diagram
“+” pada tombol perlu berjumlah 8 use case dan melibatkan 3 aktor
diganti dengan tulisan
yaitu Kepala Sekolah, Penanggung Jawab
“Tambah

Fakultas Ilmu Komputer, Universitas Brawijaya

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
Kegiatan, dan Admin. Spesifikasi use case
menjelaskan lebih detil mengenai interaksi
antara pengguna dan sistem.
Solusi desain antarmuka pengguna yang
dihasilkan berupa desain navigasi, wireframe,
serta prototipe aplikasi pengelolaan program
PPK SMPI Sabilurrosyad. Desain navigasi
terbagi menjadi diagram hirarkis dan jaringan
layar. Dari desain navigasi kemudian dilakukan
perancangan wireframe sebagai prototipe
fidelitas rendah. Selanjutnya dilakukan
pembuatan prototipe fidelitas medium yang
memungkinkan interaksi langsung dan
memberikan pengalaman nyata bagi pengguna
dalam penggunaan sistem. Perancangan
antarmuka pengguna menggunakan sebanyak 27
aturan desain yang bersumber dari buku
Research-Based Web Design & Usability
Guidelines.
Evaluasi terhadap solusi desain prototipe
fidelitas medium dilakukan dengan
menggunakan teknik pengujian usability dan
kuesioner Single Ease Question (SEQ).
Responden pengujian melibatkan empat orang,
satu orang responden sebagai kepala sekolah,
dua orang responden sebagai penanggung jawab
kegiatan, dan satu orang responden sebagai
penanggung jawab kegiatan sekaligus admin.
Pengujian dilakukan terhadap dua alternatif
desain yang disediakan dengan menggunakan
tugas yang sama. Hasil pengujian usability dari
data yang didapatkan menunjukkan, responden
Kepala Sekolah mencapai skor 6,12 untuk desain
1 dan skor 6,5 untuk desain 2, ketiga responden
penanggung jawab kegiatan mencapai skor rata-
rata 6,59 untuk desain 1 dan skor rata-rata 6,89
untuk desain 2, responden admin mencapai skor
7 untuk desain 1 dan skor 7 untuk desain 2.
Sedangkan untuk rata-rata skor tiap desain dari
seluruh responden, desain 1 mencapai skor 6,57
dan desain 2 mencapai skor 6,79. Masing-
masing skor tersebut telah melebihi skor rata-
rata SEQ yaitu 5,5. Sehingga dapat dikatakan
bahwa responden dapat mengerjakan tugas
dengan mudah. Namun jika dilihat kembali
kesimpulan dari data tersebut, maka tingkat
kemudahan tertinggi terletak pada desain 2.
7.2 Saran
Berdasarkan skripsi yang telah dilakukan
oleh penulis, dapat diberikan saran yang dapat
digunakan untuk penelitian selanjutnya yakni,
melakukan perbaikan terhadap desain solusi
sesuai masukan pengguna dan melakukan
pengujian kembali untuk memastikan bahwa
Fakultas Ilmu Komputer, Universitas Brawijaya
1287
desain solusi telah memenuhi kebutuhan
pengguna.
8. DAFTAR PUSTAKA
Ahmadi, R., 2005. Memahami Metodologi
Penelitian Kualitatif. Malang: IKIP.
Dix, A., et al., 2004. Human Computer
Interaction. 3rd Ed. London: Pearson.
ISO 9241-210., 2019. Ergonomics of human-
system interaction: Part 210: Human-
centered design for interactive systems.
Geneva: ISO.
Rahayu, W., 2019. Perancangan Antarmuka
Aplikasi Penggajian Karyawan CV.
Kuranji Karya Mandiri Menggunakan
Metode Human Centered Design (HCD).
S1. Universitas Brawijaya.
Republik Indonesia. 2017. Undang-Undang No.
87 Tahun 2017 tentang Penguatan
Pendidikan Karakter. Lembaran Negara
RI Tahun 2017, No. 195. Jakarta:
Sekretariat Negara.
Sauro, J., 2012. 10 Things to Know About the
Single Ease Question (SEQ). [Online]
Tersedia di :
https://measuringu.com/seq10/ [Diakses
20 Juni 2020].
U.S. Dept. of Health and Human Services, 2006.
Research-Based Web Design & Usability
Guidelines [2006 edition]. Washington:
U.S. Government Printing Office.
Usability.gov., 2018. Usability Testing. U.S.
Department of Health & Human Services.
[online] Tersedia di:
https://www.usability.gov/how-to-and-
tools/methods/usability-testing.html
[Diakses 21 Oktober 2019].