JSI (Jurnal Sistem Informas.
Universitas Dirgantara Marsekal Suryadarma p-ISSN: 2355-9675 e-ISSN: 2541-3228 Perancangan Desain UI/UX Website Sekolah Menggunakan Metode User Centered Design Fitria Risyda1,*.
Yulisa Gardenia2.
Muryan Awaludin3.
Yoke Lucia Renica Rehatalanit4 1,2Manajemen Informatika.
Universitas Dirgantara Marsekal Suryadarma.
Indonesia 3,4Sistem Informasi.
Universitas Dirgantara Marsekal Suryadarma.
Indonesia frisyda@gmail.
com, yulisagardenia @gmail.
com, muryanawaludin1@gmail.
com, yoke@unsurya.
Article Info Article history:
Received December 20, 2024 Accepted December 25, 2024 Published January 2, 2025 Kata Kunci:
User Interface User Experience Metode UCD Pengujian SUS Website Sekolah ABSTRAK Kemajuan teknologi digital saat ini mendorong sekolah untuk memiliki platform online yang informatif dan fungsional berbentuk website sebagai media komunikasi, sumber informasi, dan layanan yang menghubungkan sekolah dengan siswa, orang tua, dan masyarakat tidak terkecuali pada sekolah SMK Al-Muhajirin yang saat ini belum memiliki website sekolah dan hanya menggunakan media sosial untuk berbagi informasi dengan Penelitian ini bertujuan merancang desain antarmuka pengguna (User Interfac.
dan pengalaman pengguna (User Experienc.
website sekolah dengan menggunakan metode User-Centered Design (UCD) untuk menyediakan informasi yang mudah diakses kepada siswa, guru, dan masyarakat sekitar mengenai sekolah serta memperkenalkan sekolah ke publik melalui platform website.
Hasil dari penelitian ini adalah rancangan User Interface (UI) dan User Experience (UX) yang sudah tervalidasi dari sisi pengguna menggunakan pengujian System Usability Scale (SUS).
Berdasarkan hasil pengujian SUS menunjukan nilai 80 mengindikasikan bahwa desain UI/UX yang dirancang dinilai baik dan sesuai dengan kebutuhan pengguna.
Corresponding Author:
Fitria Risdya.
Prodi Manajemen Informatika.
Universitas Dirgantara Marsekal Suryadarma.
Email: *frisyda@mail.
PENDAHULUAN
Kemajuan teknologi digital saat ini mendorong sekolah untuk memiliki platform online yang informatif dan fungsional berbentuk website.
Website adalah situs yang dapat diakses oleh pengguna internet dari seluruh dunia(Hikmah Alim & Komarudin, 2.
Website sekolah mempunyai peran yang krusial sebagai media komunikasi, sumber informasi, dan layanan yang menghubungkan sekolah dengan siswa, orang tua, dan masyarakat (Windasari, 2.
Website sekolah juga dapat digunakan sebagai bahan promosi dan branding bahwa sekolah memiliki teknologi informasi yang baik (Windasari.
SMK Al-Muhajirin adalah salah satu sekolah swasta yang berdiri sejak tahun 1997 terakreditasi A dan berlokasi di kota Depok.
Sekolah memiliki beberapa jurusan diantaranya Teknik Komputer dan Jaringan.
Desain Komunikasi Visual serta Bisnis dan Manajemen.
Saat ini sekolah belum memiliki website sekolah sehingga informasi terkait kegiatan akademik, pengumuman, serta informasi penting yang terbaru dan lain-lain tidak dapat diakses mudah oleh siswa, orang tua dan masyarakat umum.
Tentunya hal ini dapat mengurangi kualitas pelayanan dan branding sekolah berbasis teknologi ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) informasi di mata masyarakat.
Berdasarkan permasalahan diatas kebutuhan pembuatan website sekolah menjadi sangat penting untuk SMK Al-Muhajirin, oleh karena itu penulis merancang sebuah tampilan User Interface (UI) dan User Experience (UX) website sekolah dengan metode User-Centered Design (UCD) yang disesuaikan dengan kebutuhan portal informasi pada SMK Al-Muhajirin agar selanjutnya dapat dikembangkan menjadi sebuah Sistem Informasi berbasis website yang dapat diakses secara METODE Metode User-Centered Design Metode yang digunakan penulis dalam merancang tampilan UI/UX adalah metode User-Centered Design (UCD), metode ini melibatkan para pengguna di setiap tahap pengembangannya, sehingga mereka dapat memberikan masukan mengenai antarmuka aplikasi dan hasil akhir yang diharapkan dari desain aplikasi (Ernawati & Dwi Indriyanti, 2.
Beberapa penelitian terdahulu yang mengangkat metode User-Centered Design (UCD) dalam perancangan desain UI/UX adalah penelitian oleh Solichuddin.
dalam penelitiannya yang berjudul AuPerancangan User Interface dan User Experience dengan Metode User Centered Design pada Situs Web KalografiAy memaparkan bahwa metode UCD sangat membantu dalam menganalisis kebutuhan pengguna secara umum karena melibatkan pengguna dari tahapan awal hingga tahap pengujian menggunakan metode Heuristic Evaluation sehingga dapat membantu penulis untuk merancang tampilan UI/UX yang sesuai dengan kebutuhan pengguna (Solichuddin & Wahyuni, 2.
Penelitian kedua ditulis oleh Ernawati.
yang berjudul AuPerancangan User Interface dan User Experience Aplikasi Medical Tourism Indonesia Berbasis Mobile Menggunakan Metode User Centered Design (UCD) (Studi Kasus: PT Cipta Wisata Medik.
Ay memaparkan bahwa prototype hasil desain UI/UX yang dibangun dengan metode UCD setelah dilakukan pengujian kepada 40 responden dengan metode SUS mendapatkan skor 80,125 yang berarti tampilan aplikasi yang dibangun sudah baik dan memenuhi kebutuhan pengguna(Ernawati & Dwi Indriyanti, 2.
Penelitian ketiga ditulis oleh Hutabarat .
yang berjudul AuUser-Centered Design pada User Interface (UI) / User Experience (UX) Prototyping Aplikasi E-CommerceAy memaparkan hasil prototype aplikasi e-commerce yang dibangun dengan metode UCD memberikan kontribusi signifikan dalam memastikan desain yang sesuai kebutuhan pengguna (Awaludin & Amelia, 2.
Fitur-fitur penting seperti pencatatan produk digital, tampilan informasi yang terstruktur, serta pencarian produk yang efektif menjadi elemen kunci dalam memastikan kemudahan dan kenyamanan pengguna (Hutabarat & Sudaryana, 2.
Berdasarkan beberapa hasil penelitian terdahulu, pemilihan metode ini dirasa penulis cukup sesuai untuk merancang desain UI/UX pada website sekolah dikarenakan metode ini membuat proses pengembangan desain tampilan UI/UX menjadi lebih cepat dan efisien, mengurangi risiko kesalahan desain, dan memastikan bahwa hasil akhir benar-benar memenuhi ekspektasi pengguna.
Metode UserCentered Design (UCD) melibatkan beberapa tahapan diantaranya yang dapat dilihat pada gambar dibawah ini:
Gambar 1.
Alur tahapan metode UCD Berdasarkan gambar diatas tahapan dalam alur metode User-Centered Design (UCD) meliputi 4 tahapan (Hakim et al.
, 2.
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Understand context of use Pada tahap ini dilakukan penentuan user yang akan menggunakan sistem, karakteristik serta situasi yang akan dihadapi oleh user saat sistem digunakan.
Specify User Against Requirement Tahapan ini menentukan apa yang dibutuhkan oleh pengguna dari sistem.
Kebutuhan ini akan menjadi langkah pertama dalam desain sistem yang akan dibuat.
Produce Design Solution Pada tahap ini, proses perancangan sistem yang sesuai dengan kebutuhan user dimulai.
Setelah mengidentifikasi kebutuhan user di tahap sebelumnya, hasil identifikasi tersebut digunakan sebagai dasar untuk merancang sistem yang akan dibuat.
Evaluate Against User Requirements Pada tahapan terakhir, dilakukan pengujian terhadap sistem yang sudah dirancang sesuai dengan kebutuhan user.
Metode Pengumpulan Data Metode pengumpulan data dilakukan untuk mendapatkan informasi yang dibutuhkan(Maulana & Cahyono, 2.
, berikut adalah teknik pengumpulan data yang penulis lakukan pada penelitian ini:
Wawancara Peneliti melakukan wawancara kepada Kepala Sekolah.
Staf Sekolah bagian Informasi, guru dan siswa-siswi SMK Al-Muhajirin.
Studi Pustaka Pengumpulan data dilakukan dengan cara mempelajari, meneliti, dan menelaah berbagai literatur yang bersumber dari buku-buku, jurnal ilmiah, situs internet dan bacaan lainnya yang berkaitan dengan penelitian yang dilakukan (Nuryamin et al.
, 2.
Pengujian System Usability Scale (SUS) Usability adalah ukuran sebuah karakteristik yang mendeskripsikan seberapa efektif pengguna dalam berinteraksi dengan suatu produk (Sriwulandari et al.
, 2.
Indikator yang terdapat pada usability juga berfungsi untuk menilai tingkat kepuasan pengguna saat memanfaatkan teknologi, aplikasi, atau produk tertentu untuk mencapai tujuan yang diinginkan.
Dalam konteks ini, ukuran keberhasilannya dapat dievaluasi berdasarkan seberapa efektif aplikasi atau teknologi tersebut dalam memberikan pengalaman layanan yang baik kepada penggunanya(Alvian Kosim et al.
, 2.
System Usability Scale (SUS) adalah adalah alat ukur yang digunakan untuk menilai usability terhadap sebuah produk, aplikasi atau sistem(Brooke, 1.
System Usabillity Scale (SUS) dapat digunakan untuk mengevaluasi prototype UI/UX (Bahtiar & Gustalika, 2.
Metode System Usability Scale (SUS) dipilih karena sudah terbukti keakuratan dan konsistensinya, bahkan dengan jumlah responden yang cenderung sedikit (Amelia et al.
, 2.
Metode pengukuran SUS menggunakan kuesioner yang berisi 10 pertanyaan, di mana pertanyaan nomor ganjil menggambarkan sisi baik dari usability, sedangkan pertanyaan nomor genap menggambarkan sisi buruk.
Responden memberikan penilaian terhadap seberapa besar mereka setuju dengan pernyataan-pernyataan tersebut menggunakan skala Likert yang berkisar dari 1 hingga 5 kemudian diolah dengan rumus dibawah ini:
xE = Ocycu ycu x 100% .
Hasil dari perhitungan SUS kemudian diubah menjadi nilai antara 1 hingga 100 untuk menilai tingkat kelayakan produk, seperti yang terlihat pada Gambar 2 dibawah ini:
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Gambar 2.
System Usability Scale
HASIL DAN PEMBAHASAN
Implementasi metode User-Centered Design (UCD) Dalam perancangan desain UI/UX yang penulis bangun menggunakan metode UCD yang memiliki beberapa tahapan dan disetiap tahapan terdapat hasil sebagai berikut:
Understand context of use Pada tahap pertama, peneliti akan menentukan siapa yang akan memanfaatkan sistem dan menguraikan alasan serta situasi di mana mereka akan menggunakan produk tersebut.
Langkah ini sangat krusial untuk memastikan bahwa pengguna menjadi fokus utama dalam proses Berdasarkan hasil wawancara kepada 3 responden yang telah dilakukan, didapatkan hasil tujuan penggunaan dan keinginan pengguna terhadap aplikasi website sekolah yang akan dibangun.
Responden mewakili beberapa kategori pengguna yaitu siswa, guru dan masyarakat umum.
Hasil wawancara tersebut dapat dilihat pada tabel 1 dibawah ini:
Pertanyaan Tujuan Penggunaan Pertanyaan Keinginan Pengguna Tabel 1.
Hasil Wawancara Responden Hasil Responden Dapat melihat informasi terkait PPDB.
Berita terbaru.
Sarana dan prasarana sekolah Dapat melihat kalender akademik, mengakses informasi terbaru.
Jadwal Pelajaran dan nilai Dapat melihat informasi terkait prestasi, ekstrakulikuler, dan fitur live chat dengan admin Responden Hasil Responden Aplikasi dapat diakses melalui browser, baik melalui device telepon selular maupun laptop.
Desain tampilan aplikasi yang menarik dan mudah Aplikasi berbasis web dan memiliki fitur yang lengkap untuk menyediakan informasi tentang sekolah serta menyediakan fasilitas chat dengan admin sekolah .
Specify User Against Requirement Tahap berikutnya melibatkan penentuan kebutuhan pengguna agar dapat memahami apa yang dibutuhkan oleh pengguna setelah tahap wawancara pada tahap pertama.
Hasil yang didapatkan dari tahapan ini dapat dilihat pada tabel 2 dibawah ini:
Kebutuhan Halaman Beranda Halaman Profil Tabel 2.
Specify User Against Requirement Spesifikasi Fungsi Halaman beranda memberikan gambaran umum tentang sekolah yang dapat dirinci dengan informasi berupa Pilihan Jurusan.
Fasilitas Sekolah dan Prestasi Siswa/i Fungsi Halaman profil memberikan informasi tentang profile sekolah berupa identitas sekolah, akreditasi, visi dan misi sekolah ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Halaman Artikel Halaman Informasi Halaman Masuk Halaman Ruang Siswa Halaman Ruang Guru Halaman Admin Menu Live Chat Fungsi Halaman Artikel berisi konten informatif, edukatif, dan inspiratif yang relevan dengan komunitas sekolah dan perkembangan IPTEK.
Fungsi Halaman Informasi berisi informasi terbaru terkait kegiatan akademik sekolah yang sesuai dengan kalender akademik sekolah Fungsi Halaman Masuk adalah fitur login untuk mengakses ruang guru, ruang siswa atau ruang admin dengan memasukkan user dan password yang sesuai maka user dapat mengakses menu yang ada di Fungsi Halaman ruang siswa adalah penyediaan informasi khusus yang bersifat pribadi seperti data nilai dan informasi kelulusan.
Serta memiliki fitur untuk mendownload materi yang diberikan oleh guru secara online.
Fungsi Halaman ruang guru sebagai halaman yang digunakan oleh guru untuk mengupload informasi penting untuk siswa, materi Pelajaran maupun nilai.
Fungsi Halaman Admin adalah mengelola, memantau, dan memastikan kelancaran operasional sistem di website.
Admin dapat memvalidasi akun pengguna dan mengelola konten untuk halaman Artikel dan Halaman Informasi.
Fungsi menu ini adalah menampilkan jendela komunikasi langsung dengan admin web.
Dimana user baik siswa atau Masyarakat umum dapat memanfaatkan fitur menu tersebut untuk berkomunikasi dengan sekolah secara langsung.
Produce Design Solution Pada tahap ini, peneliti akan merancang User Interface (UI) dan User Experience (UX) dari website sekolah yang dibangun berupa prototype berdasarkan kebutuhan yang telah diidentifikasi sebelumnya.
Halaman Beranda Halaman ini dapat diakses oleh masyarakat umum yang mencari informasi tentang sekolah SMK Al-Muhajirin.
Pada halaman ini terdapat beberapa menu diantaranya Profile.
Artikel.
Informasi dan Kontak yang jika dipilih akan menampilkan halaman yang sesuai.
Gambar 3.
Halaman Beranda
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Halaman Login Siswa Pada halaman login siswa, siswa memasukkan username dan password.
Jika berhasil maka akan masuk ke halaman ruang siswa.
Jika siswa lupa password dapat menekan tombol Forget password dan password akan di reset ke email.
Jika siswa belum memiliki akun dapat menekan tombol SIGN UP untuk registrasi akun yang nanti akan tampil halaman register setelah diisi data akun akan diverifikasi oleh admin.
Gambar 4.
Halaman Login Siswa .
Halaman Ruang Siswa Pada halaman ruang siswa terdapat beberapa tombol menu diantaranya menu Utama.
E-Learning.
Informasi.
Download dan Logout.
Gambar 5.
Halaman Ruang Siswa .
Halaman Login Guru Pada halaman login guru, guru memasukkan username dan password.
Jika berhasil maka akan masuk ke halaman ruang guru.
Jika guru lupa password dapat menekan tombol Forget password dan password akan di reset ke email.
Jika guru belum memiliki akun dapat menekan tombol SIGN UP untuk registrasi akun yang nanti akan tampil halaman register setelah diisi data akun akan diverifikasi oleh admin.
Gambar 6.
Halaman Login Guru
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Halaman Ruang Guru Pada halaman ruang guru terdapat beberapa tombol menu diantaranya menu Utama.
E-Learning.
Informasi.
Download dan Logout.
Gambar 7.
Halaman Ruang Guru .
Halaman Login Admin Pada halaman login admin, admin memasukkan username dan password.
Jika berhasil maka akan masuk ke halaman ruang admin.
Jika admin lupa password dapat menekan tombol Forget password dan password akan tereset ke email.
Gambar 8.
Halaman Login Admin .
Halaman Ruang Admin Pada halaman ruang admin terdapat beberapa tombol menu diantaranya Menu Utama.
Kelola Akun.
Kelola Artikel.
Kelola Informasi dan Logout.
Gambar 9.
Halaman Ruang Admin
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Halaman Profil Pada halaman profil terdapat informasi tentang profile sekolah berupa identitas sekolah, akreditasi, visi dan misi sekolah Gambar 10.
Halaman Profil .
Halaman Informasi Halaman ini berisi informasi terbaru terkait kegiatan akademik sekolah yang sesuai dengan kalender akademik sekolah Gambar 11.
Halaman Informasi .
Evaluate Against User Requirements Pada tahap ini peneliti menyiapkan 10 pernyataan yang melibatkan 10 responden terdiri dari siswa, guru dan masyarakat umum berusia 17-45 tahun untuk menguji prototype tampilan desain UI/UX website sekolah.
Daftar pernyataan untuk responden ada pada tabel 3.
Hasil yang didapat dari responden kemudian dihitung dengan metode System Usability Scale (SUS) untuk melihat hasil prototype yang dibangun sudah sesuai dengan kebutuhan pengguna atau belum Hasil perhitungan System Usability Scale (SUS) dapat dilihat pada tabel 4.
Tabel 3.
Daftar Pernyataan System Usability Scale (SUS) Kode
Pernyataan P01
Saya akan sering mengakses website sekolah untuk mendapatkan informasi terbaru P02
Saya merasa website ini kurang informatif
P03
Saya merasa website ini sangat informatif
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
P04
P05
P06
P07
P08
P09
P10
Saya merasa membutuhkan bantuan orang lain untuk mengakses website ini Saya merasa website ini mudah digunakan karena menu navigasi yang ada sangat jelas Saya kurang memahami fitur-fitur yang tersedia pada website Saya merasa tidak ada hambatan dalam mengakses website sekolah Saya merasa fitur-fitur yang tersedia belum memobilisasi kebutuhan akan informasi Saya merasa fitur-fitur yang tersedia sudah sesuai dengan kebutuhan informasi yang ada di sekolah Saya perlu mendapatkan sosialisasi terlebih dahulu sebelum menggunakan website Tabel 4.
Hasil perhitungan System Usability Scale (SUS) P01 P02 P03 P04 P05 P06 P07 P08 P09 P10
SKOR SUS
R01
R02
R03
R04
R05
R06
R07
R08
R09
R10
Total Skor SUS Konversi Skor SUS (Total Skor / Jumlah Responde.
x 2,5 Sesuai dengan hasil perhitungan SUS, diperoleh nilai 80 yang tergolong dalam kategori "Baik" dan berlabel grade "B".
Hasil tersebut menunjukkan bahwa desain UI/UX yang telah dibuat dinilai baik dan memenuhi kebutuhan penggunanya.
KESIMPULAN
Berdasarkan pembahasan di atas, didapatkan kesimpulan sebagai berikut :
Perancangan UI/UX website sekolah menggunakan metode User Centered Design membuat proses pengembangan menjadi lebih efisien, mengurangi risiko kesalahan desain, dan menghasilkan desain yang dapat memenuhi ekspektasi pengguna Berdasarkan hasil pengujian System Usability Scale (SUS) didapatkan nilai 80 yang berada pada rating AuGoodAy dan grade letter AuBAy yang berarti tampilan UI/UX website sekolah yang dirancang dinilai baik dan sesuai dengan kebutuhan pengguna.
Rancangan tampilan UI/UX untuk website sekolah yang telah dibuat untuk selanjutnya dapat dikembangkan dalam bentuk sistem informasi berbasis website yang penyimpanan datanya sudah tersimpan kedalam database.
DAFTAR PUSTAKA