JSI (Jurnal Sistem Informas.
Universitas Dirgantara Marsekal Suryadarma p-ISSN: 2355-9675 e-ISSN: 2541-3228 Perancangan Desain Antarmuka Sistem Informasi Sekolah Menggunakan Metode Activity Centered Design Riyan Abdul Aziz1* 1Program Studi Informatika.
STMIK Amikom Surakarta.
Surakarta riyan@dosen.
Article Info Article history:
Received May 21, 2025 Accepted June 22, 2025 Published July 1, 2025 Kata Kunci:
Desain antarmuka
Sistem informasi sekolah Activity centered design
System usability scale
ABSTRAK
Sistem informasi sekolah menjadi satu bagian yang penting bagi calon peserta didik untuk menentukan apakah akan melanjutkan mendaftar di sekolah tersebut atau tidak.
Penelitian ini bertujuan untuk menyelesaikan keterbukaan informasi yang dibutuhkan oleh sekolah swasta dalam bentuk sistem informasi sekolah berbasis website.
Penelitian ini akan berfokus pada perancangan desain antarmuka sistem informasi sekolah sebagai tahap awal sebelum sistem informasi sekolah dibuat.
Metode pengembangan yang digunakan untuk membangun desain antarmuka sistem informasi sekolah adalah activity centered design, metode ini dipilih karena dalam proses perancangan antarmuka web membantu menciptakan desain yang lebih terarah sesuai dengan kebutuhan pengguna, sehingga dapat meningkatkan produktivitas, kenyamanan, dan kesesuaian sistem.
Hasilnya desain antarmuka sistem telah berhasil dibuat, hasil perhitungan menggunakan system usability scale (SUS) didapatkan jumlah perhitungan rata-rata sebesar 85,84 dari enam responden, acceptability range sistem informasi sekolah pada status acceptable, grade scale sistem informasi sekolah termasuk dalam skala B, adjective ratings aplikasi sistem informasi sekolah masuk dalam kategori excelent.
Corresponding Author:
Riyan Abdul Aziz.
Program Studi Informatika.
STMIK Amikom Surakarta.
Email: *riyan@dosen.
PENDAHULUAN
Informasi yang baik dan benar menjadi satu tuntutan yang wajib dipenuhi bagi seluruh instansi yang ada di Indonesia.
Instansi pendidikan dari tingkat pusat sampai dengan daerah diwajibkan menyampaikan informasi secara terbuka dan benar melalui berbagai platform digital (Dr.
Saryanto et , 2.
(Nugraha.
Sjoraida, & Novianti, 2.
Ada berbagai macam platform digital yang dapat digunakan untuk menyampaikan informasi tersebut diantaranya platform digital televisi, media sosial dan website (Marhamah & Fauzi, 2.
(Alamsyah.
Aulya, & Satriya, 2.
Media sosial dan website menjadi dua platform digital yang saat ini banyak digunakan oleh berbagai instansi pendidikan selain karena kemudahan mengelola dua platform digital tersebut juga jangkauan dua platform tersebut yang sangat luas, dua platform tersebut dapat menjangkau audience dari tingkat remaja sampai dengan dewasa (Putri.
Rasyid, & Yazid, 2.
(Akhbar.
Zulfa.
Sari, & Fadhillah, 2.
(Sugeng, 2.
Website merupakan salah satu platform digital yang saat ini banyak digunakan oleh instansi pendidikan, beberapa pengguna internet yang sadar akan teknologi menjadikan tolak ukur bahwa sebuah instansi pendidikan yang terpercaya yaitu mempunyai website resmi, pengguna akan mencari informasi yang dibutuhkan melalui website tersebut (Rachmad et al.
, 2.
(Muryan Awaludin.
Tata Sumitra, & ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Achmad Ramadhany, 2.
Hal itulah yang mendorong berbagai instansi pendidikan untuk membuat dan menjadikan website sebagai salah satu platform digital untuk menyampaikan informasi (Apriyanti et al.
, 2.
Ada banyak informasi yang bisa disampaikan mulai dari sejarah, visi misi, kegiatan unggulan, program-program yang ditawarkan sampai dengan membuka pendaftaran peserta didik baru secara online (Indriani.
Diba.
Ubaedullah, & Pratama, 2.
(Darmawan, 2.
(Alenezi, 2.
Pemanfaatan website inilah yang belum dimaksimalkan oleh objek penelitian SMK Muhammadiyah 5 Surakarta.
SMK Muhammadiyah 5 Surakarta terletak di Jalan Kerinci Kelurahan Banjarsari Kecamatan Banjarsari Kota Surakarta.
SMK Muhammadiyah 5 surakarta saat ini memiliki satu program unggulan yaitu jurusan tata busana dengan jumlah total siswa sebanyak sembilan puluh lima siswa, terdiri dari delapan puluh sembilan siswa perempuan dan enam siswa laki-laki.
Ekstrakulikuler mulia batik contemporary merupakan salah satu kegiatan siswa yang menjadi favorit rata-rata peserta didik yang bersekolah di SMK Muhammadiyah 5 Surakarta, ekstrakulikuler mulia batik contemporary setiap tahun selalu mendapatkan medali pada setiap kejuaraan baik tingkat kota maupun tingkat nasional, mulia batik contemporary juga sering ditunjuk mewakili pemerintah Kota Surakarta pada beberapa event karnaval tingkat nasional.
Permasalahan yang muncul setiap tahun di objek penelitian SMK Muhammadiyah 5 Surakarta adalah jumlah siswa yang mendaftar pada saat pembukaan siswa baru.
Rata-rata siswa yang mendaftar adalah siswa yang berada di desa-desa sekitar area sekolah, jumlah siswa yang mendaftar setiap tahun mulai dari tiga puluh sampai dengan lima puluh siswa.
Selanjutnya peneliti melaksanakan wawancara dengan beberapa siswa yang sudah mendaftar untuk memastikan permasalahan yang disampaikan pihak sekolah sesuai dengan apa yang dialami siswa, hasilnya didapatkan selama ini siswa mendengar adanya SMK Muhammadiyah 5 Surakarta dari kakak tingkat atau dari tetangga yang telah bersekolah, informasi tentang keberadaan sekolah, jurusan yang ditawarkan, program-program unggulan yang ditawarkan tidak pernah sampai kesiswa mapun orangtua siswa.
Hasil wawancara ini memperkuat permasalahan yang disampaikan pihak sekolah sesuai dengan kondisi yang ada diluar, padahal dari sisi perkembangan teknologi masyarakat yang ada disekitar area sekolah mempunyai perangkat handphone dan koneksi internet untuk mengakses informasi sekolah disekitar mereka.
Solusi yang ditawarkan oleh peneliti dari permasalahan yang dialami oleh objek penelitian adalah dengan membuat sistem informasi sekolah berbasis website (Feladi & Marlianto, 2.
(Oktaviani & Ayu, 2.
(Nurkhozin.
Basir, & Abdillah, 2.
(Awaludin.
Yasin, & Risyda, 2.
Sistem informasi yang ditawarkan akan memuat seluruh informasi penting sekolah mulai dari sejarah sekolah, visi misi, jurusan yang ditawarkan, program-program unggulan sekolah, fasilitas sekolah, foto dan video yang mendukung informasi dan fitur tambahan berupa sistem pendaftaran siswa baru secara online (Beno.
Silen, & Yanti, 2.
(Awaludin, 2.
Penelitian ini akan berfokus pada perancangan desain antarmuka sistem informasi sekolah berbasis website menggunakan metode activity centered design, metode ini dipilih karena dalam proses perancangan antarmuka web membantu menciptakan desain yang lebih terarah sesuai dengan kebutuhan pengguna, sehingga dapat meningkatkan produktivitas, kenyamanan, dan kesesuaian sistem (Wahyu & Hapsari, 2.
(Rika Widianita, 2.
METODE
Metode penelitian yang digunakan dalam merancang desain antarmuka sistem informasi sekolah berbasis website ini adalah activity centered design (Wahyu & Hapsari, 2.
(Rika Widianita, 2.
Metode ini memiliki lima tahapan utama yang harus dijalankan dalam merancang desain antarmuka sistem diantaranya, activity research, activity flow mapping, activity-based design, usability testing, development and refinement (Wahyu & Hapsari, 2.
(Rika Widianita, 2.
, tahapan-tahapan tersebut diilustrasikan pada gambar 1.
Gambar 1.
Activity Centered Design Pada tahap Activity Research peneliti menganalisis tugas-tugas utama pengguna melalui observasi atau wawancara untuk memahami kebutuhan dari system yang akan dikembangkan.
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Pada tahap Activity Flow Mapping peneliti menentukan user yang berkaitan dengan system, membuat struktur menu sistem yang memvisualisasikan langkah-langkah penggunaan sistem mulai dari awal sampai dengan akhir.
Pada tahap Activity-Based Design peneliti membuat wireframe/prototipe antarmuka dari sistem informasi yang akan dibuat, proses pembuatan wireframe/prototipe menggunakan prinsip minimalis dan konsisten sesuai dengan prinsip metode pengembangan desain antarmuka activity centered design.
Pada tahap Usability Testing peneliti menguji prototype yang telah dibuat pada tahap sebelumya dengan pengguna sistem, tahap ini bertujuan untuk mengidentifikasi kesalahan pada desain sistem dan memperbaiki kesalahan desain tersebut.
Pada tahap Development and Refinement peneliti mengembangkan desain antarmuka menggunakan bahasa pemrograman yang berkaitan, apabila ada perbaikan maka peneliti akan menyempurnakan desain antarmuka sesuai dengan umpan balik pengguna.
HASIL DAN PEMBAHASAN
Activity Research Hasil observasi dan wawancara yang dilakukan peneliti dengan pihak sekolah didapatkan beberapa elemen utama yang akan diimpelementasikan kedalam sistem informasi sekolah berbasis website, elemen-elemen tersebut dijelaskan pada tabel 1.
Tabel 1.
Elemen Website Sistem Informasi Sekolah Element Website 1 Halaman Utama Profil Sekolah Jurusan Fasilitas Ekstrakulikuler E-Learning Keterangan Halaman utama memuat slide gambar pada section satu, memuat informasi jurusan pada section dua, memuat mitra industri bagi lulusan pada section tiga, memuat testimoni dari siswa yang lulus langsung bekerja maupun melanjutkan kuliah pada section empat, memuat penghargaan jurusan pada section lima, memuat informasi terbaru sekolah pada section enam, memuat call to action untuk mendaftar pada section tujuh, memuat informasi kontak dan alamat sekolah pada bagian Profil sekolah memuat informasi tentang sejarah sekolah, memuat visi dan misi sekolah, memuat struktur organisasi sekolah, memuat informasi guru dan karyawan sekolah.
Jurusan memuat informasi tentang jurusan tata busana yang menjadi ungulan sekolah, didalamnya memuat deskripsi tentang jurusan dan penghargaan-penghargaan yang didapatkan dari jurusan tata busana.
Fasilitas memuat informasi tentang ruang kelas, memuat informasi laboratorium sekolah, memuat informasi ruang siswa, memuat informasi tentang lingkungan sekolah.
Seluruh informasi dilengkapi dengan keterangan, gambar dan video yang mendukung.
Ekstrakulikuler memuat informasi tentang kegiatan hizbul wathan, memuat informasi kegiatan ikatan pelajar muhammadiyah, memuat informasi kegiatan solo batic carnival, memuat informasi kegiatan fashion design, memuat informasi kegiatan sekolah gajian.
E-learning memuat beberapa materi yang berkaitan dengan jurusan tatabusana, materi ini dapat diakses secara umum oleh ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) PPDB Informasi Halaman Admin seluruh pengunjung website, materi ini diisi dan dikelola angsung oleh guru.
PPDB memuat informasi tentang kuota jurusan, memuat informasi daftar pembagian kelas, memuat form input untuk melihat siswa yang dinyatakan lulus seleksi, memuat informasi alur dan syarat pendaftaran, memuat form pendaftaran siswa Informasi memuat tentang info sekolah, memuat informasi tentang blog, memuat informasi tentang kontak sekolah.
Halaman admin memuat fitur yang dapat mengelola seluruh elemen website, terdapat dua hak akses yaitu admin utama dan guru, admin utama dapat mengelola seluruh elemen website, guru dapat mengelola elemen e-learning.
Activity Flow Mapping Activity Flow Mapping menghasilkan user yang dapat mengakses sistem dan struktur menu yang menggambarkan langkah-langkah mengaksises sistem informasi sekolah.
Terdapat empat user yang berkaitan erat dengan sistem informasi sekolah yaitu admin, guru, siswa dan calon siswa, seluruh user dapat melihat dan mengakses seluruh elemen website, user admin dapat mengelola seluruh elemen website didalam halaman admin, user guru dapat mengelola elemen website e-learning didalam halaman admin guru, aktivitas seluruh user di gambarkan pada gambar 2.
User calon siswa selain dapat mengakses seluruh elemen website, calon siswa juga dapat melakukan pendaftaran siswa baru, mengecek hasil kelulusan siswa baru, melihat pembagian kelas baru, aktivitas user admin ppdb dan user calon siswa digambarkan pada gambar 3.
Gambar 1.
Usecase diagram sistem informasi sekolah ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Gambar 3.
Usecase diagram sistem informasi pendaftaran peserta didik baru Struktur menu yang menggambarkan langkah-langkah mengakses sistem informasi sekolah dapat dilihat pada gambar 4.
, dimana user dapat melihat dan mengakses seluruh elemen website.
Struktur menu yang menggambarkan urutan-urutan elemen website yang dapat dikelola oleh admin dapat dilihat pada gambar 5.
Struktur menu yang menggambarkan elemen website elearning yang dapat dikelola oleh guru dapat dilihat pada gambar 6.
, dimana guru dapat menambahkan materi, mengedit materi dan menghapus materi sesuai dengan kompetensi guru.
Struktur menu yang menggambarkan urutan pendaftaran siswa baru oleh calon siswa dapat dilihat pada gambar 7.
, dimana calon siswa dapat melihat kuota kelas yang terdapat pada jurusan, melakukan pendaftaran siswa baru, mengecek kelulusan calon siswa baru dan melihat pembagian kelas siswa yang dinyatakan lulus.
Gambar 4.
Struktur menu sistem informasi sekolah Gambar 5.
Struktur menu admin sistem informasi sekolah ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Gambar 6.
Struktur menu guru elemen website e-learning Gambar 7.
Struktur menu pendaftaran peserta didik baru Activity-Based Design Activity-Based Design menghasilkan wireframe antarmuka system informasi sekolah, proses pembuatan wireframe mengacu pada elemen website yang dibutuhkan pengguna, usecase diagram dan struktur menu system informasi sekolah.
Wireframe yang dibuat untuk pengguna diantaranya wireframe halaman utama, wireframe profil sekolah, wireframe jurusan, wireframe fasilitas, wireframe ekstrakulikuler, wireframe e-learning, wireframe PPDB dan wireframe informasi, tampilan wireframe pengguna ditunjukan pada gambar 8.
Wireframe yang dibuat untuk admin diantaranya wireframe admin system informasi sekolah ditunjukan pada gambar 9.
, wireframe admin guru ditunjukan pada gambar , dan wireframe admin system informasi pendaftaran siswa baru ditunjukan pada gambar 11.
Gambar 8.
Wireframe pengguna sistem informasi sekolah ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Gambar 9.
Wireframe admin sistem informasi sekolah Gambar 10.
Wireframe admin guru sistem informasi sekolah Gambar 11.
Wireframe admin sistem informasi PPDB Usability Testing Tahap usability testing peneliti lakukan dengan menyerahkan wireframe yang telah dibuat dalam bentuk design prototype kepada pengguna, pengguna yang melakukan uji coba pada tampilan utama sistem informasi sekolah adalah siswa, karyawan, dan guru dari SMK Muhammadiyah 5 Surakarta, berikutnya adalah admin sistem, admin guru dan calon siswa baru dari SMK Muhammadiyah 5 Surakarta, sehingga total pengguna yang melakukan uji coba pada design prototype sistem informasi sekolah ini adalah enam pengguna.
Selanjutnya untuk mendapatkan hasil kepuasaan pengguna peneliti hitung menggunakan system usability scale (SUS), berikut ini skenario tugas yang diberikan kepada pengguna, dan admin:
Tabel 2.
Skenario tugas pengguna dan admin sistem informasi sekolah Tugas Skenario
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Melihat tampilan informasi sekolah sistem Pengguna melihat dan mencoba seluruh menu, fitur dan tombol yang terdapat pada setiap halaman sistem informasi sekolah.
Daftar peserta didik baru Pengguna calon peserta didik baru mencoba fitur kuota jurusan, pendaftaran siswa baru, melihat hasil kelulusan dan melihat pembagian kelas.
Mengakses dashboard admin Pengguna admin utama dan guru dapat mengakses sistem informasi sekolah seluruh menu, fitor dan tombol yang terdapat pada halaman masing-masing admin Mengelola halaman admin Pengguna admin utama dapat mengelola seluruh sistem informasi sekolah tampilan, mengelola peserta didik baru dan mengelola pengguna yang terdapat pada sistem informasi sekolah.
Mengelola halaman admin Pengguna admin guru dapat mengelolah halam eguru learning, baik menambahkan materi, mengedit materi dan menghapus materi.
Langkah berikutnya setelah pengguna melaksanakan skenario tugas yang diberikan yaitu melakukan pengujian menggunakan system usability scale (SUS).
Proses pengujian dilakukan secara unmoderated dengan meminta pengguna mengisi kuesioner SUS yang telah disiapkan, daftar pertanyaan kuesioner dijelaskan pada tabel 3.
Tabel 3.
Kuesioner SUS Kuesioner disebarkan kepada enam responden yaitu guru, karyawan, siswa, admin utama, admin guru dan calon siswa baru, pemilihan jumlah responden diambil berdasarkan pengguna aktual yang berkaitan langsung dengan sistem informasi sekolah, hal ini selaras dengan penelitian sebelumnya tentang syarat pemilihan responden dan batas pemilihan jumlah responden pada tahap prototype sebanyak lima sampai dengan sepuluh responden (Sauro, 2.
(Irawan.
Syamsuar.
Kurniawan, & Akbar, 2.
(Fatah & Ayu Mufarroha, 2.
Hasil dari kuesioner system usability scale SUS yang telah disebarkan ditampilkan pada tabel 4.
, berikut:
Tabel 4.
Hasil kuesioner SUS
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Selanjutnya hasil kuesioner pada tabel 4.
, dilakukan perhitungan ulang menggunakan rumus perhitungan SUS yaitu nilai masing-masing responden yang muncul pada pertanyaan ganjil dikurangi satu (Nilai Pertanyaan Ganjil Ae .
, sedangkan nilai masing-masing responden pada pertanyaan genap dikurangi lima .
- Nilai Pertanyaan Gena.
Selanjutnya jumlah nilai masing-masing responden yang telah dikurangi, dihitung nilai akhirnya dengan rumus perhitungan jumlah nilai masing-masing responden dikali dua koma lima .
umlah nilai x 2,.
, nilai akhir masing-masing responden dijumlahkan seluruhnya dan dihitung rata-ratanya.
Hasil dari perhitungan nilai masing-masing responden menggunkan rumus perhitungan SUS dijelaskan pada tabel 5.
Tabel 5.
Hasil perhitungan SUS Selanjutnya dari nilai rata-rata yang muncul dilakukan pemeringkatan menggunakan Grade Rankings of SUS Acceptability Score ditunjukan pada gambar 12.
, berdasarkan hasil perhitungan ratarata sebesar 85,84 didapatkan acceptability range sistem informasi sekolah pada status acceptable, grade scale sistem informasi sekolah termasuk dalam skala B, adjective ratings sistem informasi sekolah masuk dalam kategori excelent.
Dengan demikian perancangan desain antarmuka sistem informasi sekolah menggunakan metode activity centered design dapat dilanjutkan pada tahap selanjutnya yaitu tahap perancangan sistem informasi.
Gambar 12.
Grade Rankings of SUS Acceptability Score Development and Refinement Dari hasil perancangan wireframe desain antarmuka dan perhitungan usability testing, selanjutnya peneliti wujudkan dalam bentuk high-fidelity, high-fidelity merupakan tampilan desain antarmuka dalam bentuk sempurna seluruh elemen yang terdapat didalam desain antarmuka ditampilkan dalam bentuk web-icon, illustrasi, gambar, warna dan font yang telah ditentukan.
Tampilan high-fidelity desain antamuka halaman utama, halaman profil sekolah, halaman jurusan, halaman fasilitas, halaman ekstrakulikuler, halaman e-learning, halaman PPDB dan halaman informasi di tampilkan pada gambar , tampilan high-fidelity desain antamuka admin sistem informasi sekolah di tampilkan pada gambar , tampilan high-fidelity desain antamuka admin guru di tampilkan pada gambar 15.
, tampilan highfidelity desain antamuka admin pendaftaran siswa baru di tampilkan pada gambar 16.
ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE)
Gambar 13.
high-fidelity halaman utama sistem informasi sekolah Gambar 14.
high-fidelity halaman admin sistem informasi sekolah Gambar 15.
high-fidelity halaman admin guru sistem informasi sekolah ISSN: 2355-9675 (PRINT), 2541-3228 (ON LINE) Gambar 16.
high-fidelity halaman admin ppdb
KESIMPULAN
Perancangan desain antarmuka sistem informasi sekolah telah berhasil dibuat, user yang berkaitan erat dengan sistem adalam siswa, calon siswa, karyawan, guru dan admin sistem.
Terdapat beberapa elemen utama yang di tampilkan didalam sistem informasi sekolah diantaranya halaman utama, halaman profil sekolah, halaman jurusan, halaman fasilitas, halaman ekstrakulikuler, halaman e-learning, halaman PPDB dan halaman informasi.
Seluruh halaman yang berada pada sistem informasi sekolah dapat ditambah, diedit, dan di hapus sesuai dengan kebutuhan oleh user admin sistem.
Pada halaman elearning nama mata pelajaran, isi mata pelajaran dapat di tambah, di edit, dan di hapus sesuai dengan kebutuhan oleh user admin guru.
Pada halaman ppdb calon siswa baru dapat melihat kuota jurusan, mendaftar sebagai siswa baru pada form pendaftaran, melihat kelulusan pendaftaran siswa baru, dan melihat pembagian kelas bagi siswa yang dinyatakan lulus.
Hasil perhitungan menggunakan system usability scale (SUS) didapatkan jumlah perhitungan rata-rata sebesar 85,84, acceptability range sistem informasi sekolah pada status acceptable, grade scale sistem informasi sekolah termasuk dalam skala B, adjective ratings aplikasi sistem informasi sekolah masuk dalam kategori excelent.
Dengan demikian perancangan desain antarmuka sistem informasi sekolah menggunakan metode activity centered design dapat dilanjutkan pada tahap selanjutnya yaitu tahap perancangan sistem informasi.
DAFTAR PUSTAKA