KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 3, No 6, Juni 2023, Hal 1320-1325 DOI 10.30865/klik.v3i6.941 https://djournals.com/klik
Copyright © 2023, Arya Sastranegara. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.

## Implementasi User Center Design dan System Usability Scale Pada Website Sekolah Menengah Atas
Arya Sastranegara, Agung Triayudi * , Nur Hayati
Fakultas Teknologi dan Informatika, Program Studi Informatika, Universitas Nasional, Jakarta, Indonesia Email: 1 Aryasastraa@gmail.com, 2,* agungtriayudi@civitas.unas.ac.id, 3 nurhayati@civitas.unas.ac.id Email Penulis Korespondensi: agungtriayudi@civitas.unas.ac.id
Abstrak− Website SMA Tunas Markatin betujuan untuk menyediakan media informasi dan publikasi yang efektif bagi siswa, guru, orang tua, dan marsyarakat umum. Untuk mencapai tujuan tersebut, Metode User-Center Design (UCD) dan  System Usability Scale (SUS) diterapkan untuk meningkatkan pengalaman pengguna dan kepuasan pengguna terhadap website. Dalam fase UCD, pendekatan berbasis website. Studi pengguna awal dilakukan untuk memahami keutuhan dan prefrensi pengguna yang potensial pengumpulan data, dilakukan melalui wawancara, observasi, dan survei, untuk memproleh pemahaman yang mendalam tentang kebutuhan dan tujuan pengguna.nteraktif.  Hasil  dari  evaluasi  ini  menjadi  perbaikan  dan  penyempurnaan  design.  Metode  System  Usability  Scale    (sus) digunakan untuk emngukur tingkat kepuasan pengguna terhadap website. Setelah peluncuran website pengguna diberikan kuesioner SUS yang terdiri dari pertanyaan terstruktur yang mengukur persepsi pengguna terhadap kegunaan sistem secara keseluruhan. Data yang erkumpul dianalisis untuk mengevaluasi tingkat kepuasan pengguna.Berdasarkan temuan dari studi pengguna, design prototipe interaktif dibuat dan iterasi dilakukan dengan melibatkan pengguna. Proses evaluasi design melibatkan penguji usabilitas, di  mana pengguna memberikan umpan balik dan masukan terkait navigasi strukturi informasi, tata letak, dan elemen  masalah utama penelitian, solusi  (metode)  dari  penyelesaian  masalah  yang  ditemui,  tujuan  penelitian  serta  hasil  sementara  penelitian  yang  bisa  berupa angka/persentase sesuai dengan kebutuhan penelitian.
Kata Kunci: Publikasi Sekolah;  Profil Sekolah; Informasi;
Abstract− The SMA Tunas Markatin website aims to provide an effective media of information and publications for students, teachers, parents and the general public. To achieve this goal, the User-Center Design (UCD) Method and System Usability Scale (SUS) are implemented to improve user experience and user satisfaction with websites. In the UCD phase, a website-based approach. Initial user studies  are  conducted  to  understand  the  needs  and  preferences  of  potential  users  to  collect  data,  conducted  through  interviews, observations,  and  surveys,  to  gain  an  in-depth  understanding  of  user  needs  and  goals.  The  results  of  this  evaluation  become improvements and refinement of the design. The System Usability Scale (sus) method is used to measure the level of user satisfaction with the website. Following the launch of the website, users are provided with the SUS questionnaire which consists of struct ured questions that measure the user's perception of the overall usability of the system. The collected data is analyzed to assess the level of user  satisfaction.  Based  on  the  findings  from  user  studies,  an  interactive  prototype  design  is  created  and iterations  are  carried  out involving the users.  The  design  evaluation process involves  usability  testers,  who  provide  feedback  and  input  regarding  structural information navigation, layout, and elements of the main research problems, solutions (methods) of solving problems encountered, research objectives and research temporary results which can be in the form of numbers/proportions according to research needs.
Keywords : School Publications; Profile School; Information;

## 1. PENDAHULUAN
Perkembangan teknologi, internet telah memberikan dampat yang segnifikan pada era globalisas ini perkembangan ilmu pengetahuan dan  teknologi sangat cepat akibatnya masalah kita tentunya yang berkaitan dengan kehidupan sehari-hari menjadi semakin rumit dengan cepat karena itu kita harus menggunakan kompleksitas teknis bersama dengan kecepatan presisi, dan akurasi  untuk menangani kesulitan saat ini memberi informasi sehingga dalam melaksanakan  pekerjaan kita akan dapat  hasil yang  optimal  [1][2]. Pemanfaatan teknologi  computer dalam ranah data dan informasi  salah satunya, seperi  halnya  pendidikan  yang  penting  untuk  melakukan  suatu  proses   data  yang  valid  meraupkan suatu  modal  untuk mendanai   generasi  [3].  Pengetahuan yang sangat  penting untuk  menjaga kinerja di  bidang pendidikan setiap manusia membutuhkan  pendidikan  untuk  tumbuh  sebagai  pribadi  baik  secara  inteektual  maupun  dalam  hal  kemampuan  untuk mengembangkan  karakter  dan  kemampuan  seseorang  karena  lembaga  itu  menjadi  tempat  siswa/siswi  untuk  media pengembangan diri [4].
Informasi yang ambigu tentang pendidikan tidak diragukan lagi dibutuhkan oleh semua orang termasuk orang tua dan siswa, meskipun demikian  sekarang diyakini bahwa mencari informasi tentang sekolah itu sulit, termasuk di SMA Tunas  markatin  dalam  era  digital  saat  ini  web  menjadi  salah  satu  media  yang  populer  mudah  untuk  menyampaikan informasi dan promosi oleh karena itu SMA Tunas Markatin belum memiliki website resmi sebagai media promosi dan informasi  orang  tua  ,  intruktur  dan  siswa,masyarakan  umum  [5] . Analisis  website  Sekolah  Menengah  Atas  Tunas Markatin   yang dapat  menjadi media promosi  dan informasi  bagi pengguna, namun harus memastikan bahwa website tersebut  dapat  memberikan  informasi  yang  lengkap  akurat  dan  mudah  diakses  oleh  pengguna,  oleh  karena  itu  perlu dilakukan analisis terhadap website SMA Tunas Markatin.Website Website SMA Tunas Markatin juga dapat  membantu sekolah dalam  meningkatkan kualitas  layanan,  informasi  dan promosi  yang diberikan dalam dunia pendidikan yang semakin  kompotitif  sebuah  website  yang  menarik  dan  mudah  diakses  dapat  membantu  sekolah  dalam  memperluas jangkauan promosi dan meningkatkan kepercayaan masyarakat terhadap kualitas pendidikan yang di berikan oleh Sekolah Tunas Markatin [6] .
Masalah yang di alami di sekolah proses pemberian promosi dan publikasi kepada siswa pegawai dan masyarakat umum masih menggunakan  media seperti spanduk dan pamphlet yang di rasa kurang efisien dan kurang berguna karena
Arya  Sastranegara,  Implementasi  User  Center Design  dan  System  Usability  Scale Pada  Website  Sekolah  Menengah Atas
penyampaian yang terbatas , dan mengeluarkan biaya [7] [8] . Penerapan UCD dilakukan dengan melaksanakan aktivitas- aktivitas  dengan  menggunakan  metide  UCD  dengan  kuisioner,  focus  group  intervew  dengan  adanya  sistem  ini  dapat meningkatkkan  kepuasan  pengguna [9] . Melalui  analisis  menggunakan  metode  SUS  mengukur  usability  kelayakan pengguna pada suatu sistem atau website [10] .
Skala ini sangat populer dan layak digunakan karena mudah diimplementasikan dan memberikan hasil yang relatif akurat dalam mengukur usability suatu produk, diharapkan dapat diketahui kelebihan dan kekurangan dari website profil Sekolah  Menengah  Atas  Tunas  Markatin  dan  memberikan  rekomendasi  yang  dapat  membantu  dalam  meningkatkan kepuasan  pengguna  dan  efektivitas  penggunaan  website.  Dengan  demikian,  analisa  ini  diharapkan  dapat  memberikan masukan yang berguna bagi sekolah dalam mengembangkan dan meningkatkan kualitas website profil Sekolah Menengah Atas Tunas Markatin sebagai media promosi dan informasi yang efektif dan berkualitas.

## 2. METODOLOGI PENELITIAN

## 2.1 Skema alur penelitian
Berikut pada gambar 1 merupakan tahapan dari penleitian yang dilakukan.
Gambar 1 . Langkah-langkah Penelitian
Skema  alur  design  penelitian  ini  dapat  ditunjukaan  pada  gambar  1.  Gambar  1  menunjukkan  cara-cara  yang diperlukan untuk melakukan penelitian ini. Rancangan alur penelitian tersebut mencangkup beberapa langkah, dimulai dengan mengidentifikasi  masalah, dilanjut dengan melakukan Pengumpulan data dengan cara tudi literatur, penentuan pada subjek penelitian.
a. Identifikasi  Masalah :  Menentukan  area  atau  topik  penelitian  yang  igin  di  teliti,  mendintifikasi  masalah  gap pengetahuan yang ada dalam area penlitian tersebut.
b. Pengumpulan Data Studi Literatur : Melakukan pencarian literatur yang relevan dan terkait dengan topik penelitian, membaca mengkaji literatur yang telah terkumpul untuk pemahaman yang mendalam penelitian. \
c. Penentuan  Subjek  Penelitian :  Mengidentifikasi  kriteria  inklusi  dan  ekslusi  yang  relevan  untuk  pemilihan  subjek penelitian.
d. Teknik  Pengumpulan  Data :  Memilih  teknik  pengumpulan  data  yang  sesuai  dengan  tujuan  penelitian,  Seperti Kuesioner, Wawancara, Observasi.
e. Pengujian pada Responden : mengumpulkan data dari responden yang telah dipilih bedasarkan yang di tentukan.
f. Analisis data : Menganalisis data secara sistematis untuk mencari pola temuan atau hubungan yang relevan dengan masalah penelitian
g. Rekomendasi  Perbaikan :  Membuat  rekomendasi  berdasarkan  hasil  analisis  data  yang  telah  dilakukan, mengidentifikasi area perbaikan atau tindakan yang dapat dilakukan berdasarkan temuan penelitian.
Arya  Sastranegara,  Implementasi  User  Center Design  dan  System  Usability  Scale Pada  Website  Sekolah  Menengah Atas
Gambar 2 Flowmap yang  berjalan
Pada Gambar 2 Flowmap atau visualisasi yang digunakan untuk menggambarkan aliran atau pergerakan informasi, proses, atau kegiatan dalam suatu sistem atau proses bisnis. Flowmap sering digunakan dalam analisis dan perancangan proses  untuk  memahami  alur  kerja  yang  terjadi  dan  mengidentifikasi  area-area  yang  membutuhkan  perbaikan  atau optimalisasi.[11] Website yang berisi dokumen multimedia (Teks, Gambar, Suara, GIF Animasi, dan Video) di Internet menggunakan  protokol  transfer  hiperteks  (HTTP)  dan  memerlukan  browser  web  untuk  digunakan  agar  dapat mengaksesnya, salah satu browser ialah Mozilla program yang dapat meluncurkan dokumen online

## 2.2 Tools Atau Alat
Tools atau alat yang digunakan untuk membangun sistem sangatlah penting karena untuk membangun aplikasi haruslah secara detail dan teliti, dengan menggunakan beberapa data aplikasi [12][13]. Peneltian ini difokuskan untuk membuat Sebuah media promosi dan publikasi berbasis website menggunakan bahasa pemograman PHP dan menggunakan metode User Centerd Design (UCD) [14][15].  Salah satu toolnya adalah HTML halaman hypertext yang dibuat dalam HTML di seluruh platform tanpa beralih dari satu ke yang lain harus melakukan perubahan apa pun pada perangkat target [16]. Dan juga  PHP  digunakan  Untuk  melindungi  kerahasiaan  kode,  pengguna  tidak  perlu  diberi  akses  ke  kode  sumber program.[17]. Tools lain yang digunakan adalah Java scriptb bahasa ini digunakan untuk membuat interaksi pada halaman web seperti validasi formulir, membuat efek animasi, manipulasi dokumen HTML, dan lain sebagainya [18]. Dan terakhir yang digunakan adalah database MySQL [19][20].

## 3. HASIL DAN PEMBAHASAN

## 3.1 Data Interface
Tampilan interface merupakan sarana yang digunakan dalam sistem ini supaya si pemakai/user bias melakukan hubungan terhadap sistem yang dibuat. Hasil tampilan interface sistem berupa halaman halaman Web yang sudah terintegrasi dalam sebuah halaman utama, seperti diperlihatkan berikut :
Arya  Sastranegara,  Implementasi  User  Center Design  dan  System  Usability  Scale Pada  Website  Sekolah  Menengah Atas
Gambar 3 Mockup pada admin SMA Tunas Markatin
Gambar  3.  Menjelaskan  Mockup  sebagai  representasi  visual  awal  dari  antarmuka  pengguna  menggambarkan tampilan dan tata letak elemen interaktif suatu sistem mockup UCD membantu dalam proses perancangan pengujain dan evaluasi  yang  lebih  baik,  Ini  adalah  Mockup  UCD  pada  website  Admin  SMA  Tunas  Markatin  Sebelum  ke  tahap pengembangan penuh yang di lakukan oleh pengembang.
a. Halaman Admin/dashboard
Gambar 4. Halaman admin /dashboard
Gambar  4  Menjelaskan  Halaman  Dashboard  yaitu  halaman  yang  muncul  ketika  pengguna  telah  berhasil  login kedalam halaman web. Halaman ini merupakan halaman utama dimana terdapat beberapa pilihan menu-menu yang bisa di akses oleh pengguna sistem.
b. Halaman Home
Arya  Sastranegara,  Implementasi  User  Center Design  dan  System  Usability  Scale Pada  Website  Sekolah  Menengah Atas
Gambar  5  Menjelaskan  Halaman  Home  yaitu  halaman  utama  website  SMA  Tunas  Markatin  di  dalam  konten konten  nya  berisi  tentang  ,  sambutan  kepala  sekolah,  agenda  sekolah  dan  memperkenalkan  guru  dari  SMA  Tunas Markatin

## Gambar 6. Hasil Kuisioner
Gambar 6 Menjelaskan tentang kuisioner dari para pengguna website ini, cenderung terlihat bahwa 18 responden menyatakan Sangat Sangat Setuju (56,3%), 2 responden Tidak Setuju (6,3%), 3 responden menyatakan Sepakat (9,4,%), 3 responden menyatakan Tidak Setuju (9,4% ), dan 6 Responden menyatakan Sepakat Secara Tegas (18,8%). Pernyataan berikut mendapat dukungan paling banyak, dengan 56,3% responden sangat tidak sepakat dengan pernyataan ke-5.
Skor
Q1
Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 (Total x 2,5) R1 5 2 5 1 5 5 5 3 5
1 37 79 R2 4 4 4 2 2 2 3 3 5
3 32 69 R3 4 4 3 3 3 2 3 2 5
3 32 69 R4 5 4 5 5 5 5 5 5 5
5 49 103 R5 5 3 3 4 4 3 3 3 3
4 35 75 R6 5 1 5 2 5 5 5 1 5
1 35 75 R7 5 1 5 1 5 1 5 1 5
1 30 65 R8 5 3 3 5 3 2 5 3 3
5 37 79 R9 5 5 5 5 5 5 5 5 5
5 50 105 R10 5 2 4 4 5 2 5 2
4 5 38 81 R11 5 2 5 2 5 2 4 2
4 3 34 73 R12 5 1 5 2 4 1 5 1
5 1 30 65 R13 5 1 5 1 5 4 5 1
2 1 30 65 R14 5 2 5 1 5 2 5 1
5 1 32 69 R15 5 1 5 1 5 2 5 4
5 1 34 73 R16 5 1 5 1 5 2 2 1
5 1 28 61 R17 5 1 5 1 5 4 4 1
5 1 32 69 R18 5 1 5 4 2 4 3 2
2 4 32 69 R19 2 2 5 1 3 3 5 1
3 1 26 57 R20 5 1 1 1 5 2 5 1
2 1 24 53 R21 5 1 3 4 1 2 3 4
2 1 26 57 R22 5 1 5 3 5 4 4 1
4 1 33 71 R23 2 2 4 2 4 4 5 1
2 4 30 65 R24 4 1 1 1 2 2 2 2
2 2 19 43 R25 4 4 4 2 1 4 2 5
1 1 28 61 R26 5 2 4 1 4 2 5 1
1 1 26 57 R27 5 1 5 1 5 1 5 1
5 1 30 65 R28 5 1 5 1 5 1 5 1
5 1 30 65 R29 5 1 4 2 5 1 4 3
1 1 27 59 R30 5 1 4 2 5 2 5 2
4 1 31 67 R31 5 1 5 2 4 1 4 1
5 1 29 63 R32 4 2 5 2 4 2 5 1
5 1 31 67 R33 1 1 4 2 5 1 5 2
4 2 27 59 R34 5 1 5 1 4 1 4 1 5 1 28 61 68
Responden Hasil Perhitungan Skor Data
TOTAL
Arya  Sastranegara,  Implementasi  User  Center Design  dan  System  Usability  Scale Pada  Website  Sekolah  Menengah Atas
Gambar 7 di  atas adalah hasil dari  perhitungan nilai  responden yang mengisi  kuesioner yang di  lakukan untuk pengujian pada website SMA Tunas markatin kuesioner ini di sebar di kalangan Siswa Mahasiswa dan masyarakat umum. Dimana hasilnya adalah mayoritas user atau pengguna website dari sistem ini merasa puas akan kinerja dan tampilan dari website ini.

## 4. KESIMPULAN
Penelitian ini bertujuan untuk menerapkan metode User Control Design (UCD) dan System Usability Scale (SUS) pada SMA Tunas Markatin dalam rangka meningkatkan kegunaan sistem yang digunakan oleh siswa, guru, dan staf  di sekolah tersebut.  Metode  UCD  digunakan  untuk  memastikan  pengguna  terlibat  secara  aktif  dalam  proses  perancangan  dan pengembangan sistem, sementara metode SUS digunakan untuk mengukur kegunaan sistem yang ada. Hasil penelitian menunjukkan  bahwa  penerapan  metode  UCD  pada  SMA  Tunas  Markatin  telah  berhasil  melibatkan  pengguna  secara langsung dalam proses perancangan dan pengembangan sistem. Dengan melibatkan siswa, guru, dan staf tim pengembang dapat memahami kebutuhan dan preferensi pengguna.

## REFERENCES
[1] A., Riki. "Pembuatan portal website sekolah SMA Negeri 1 Sungailiat sebagai media informasi." Dinamisia: Jurnal Pengabdian Kepada Masyarakat 5.1, 2021 , doi: 10.31849/dinamisia.v5i1.4413
[2] N. Marlena and D. Sasongko, “Pembuatan Website Profil Pada Sekolah Menengah Pertama (SMP) Negeri 2 Kartasura,” J. Speed , vol. 2, no. 3, pp. 7–14, 2010, [Online]. Available: https://ijns.org/journal/index.php/speed/article/view/874
[3] D.  Anggraeny,  D.  A.  Nurlaili,  and  R.  A.  Mufidah,  “Analisis  Teknologi  Pembelajaran  dalam  Pendidikan  Sekolah  Dasar,” Fondatia , vol. 4, no. 1, pp. 150–157, 2020, doi: 10.36088/fondatia.v4i1.467.
[4] A. D. Riyanto, “Pembuatan Website Sebagai Media Promosi Yang Terpercaya,” Semin. Nas. Inform. 2015 (semnasIF 2015) , vol. 2015, no. November, p. hh 28-35, 2015.
[5] M. A. Muzakki, “Analisis Efektivitas Promosi Digital terhadap Pertumbuhan Nasabah Perbankan Syariah di Indonesia Periode 2016- 2019,” Tesis , pp. 1–201, 2021.
[6] D. N. Heny, “Analisis User Interface dan User Experience pada Website Sekolah Tinggi Teknologi Adisutjipto Yogyakarta,” Conf. Senat. STT Adisutjipto Yogyakarta , vol. 2, p. 183, 2016, doi: 10.28989/senatik.v2i0.77.
[7] R. Muhidin, N. F. Kharie, and M. Kubais, “Analisis Dan Perancangan Sistem Informasi Pada Sma Negeri 18 Halmahera Selatan Sebagai Media Promosi Berbasis Web,” IJIS - Indones. J. Inf. Syst. , vol. 2, no. 2, p. 91, 2017, doi: 10.36549/ijis.v2i2.31.
[8] J. Volume, I. G. Agung, G. Abhirama, I. Bagus, and M. Mahendra, “Perancangan Aplikasi Forcoms Menggunakan Metode User Centered Design,” vol. 1, no. November, pp. 651–658, 2022.
[9] F. Khasan et al. , “Pengukuran Usability pada Website SMK Ma ’ arif 3 Somalangu Kebumen Menggunakan System Usability Scale ( SUS ) Usability Measurement on the Website of SMK Ma ’ arif 3 Somalangu Kebumen Using the System Usability Scale ( SUS ),” vol. 0, no. 02, pp. 67–72, 2022.
[10]  N.  Asnawi,  R.  Pamungkas,  and  D.  G.  Prasetyo,  “Analisis  Usability  Website  Program  Studi  Sistem  Informasi  Unipma Menggunakan Metode System Usability Scale Abstrak,” vol. 8, no. 1, 2023.
[11]  Novendri, “Pengertian Web,” Lentera Dumai , vol. 10, no. 2, pp. 46–57, 2019.
[12]  D. T. Octafian, “DESAIN DATABASE SISTEM INFORMASI PENJUALAN BARANG (Studi Kasus : Minimarket ‘Grace’ Palembang),” J. Teknol. Dan Inform. , vol. 1, no. 2, pp. 148–157, 2011.
[13]  W. Yogiyatno and H. Sofyan, “Pengembangan multimedia interaktif kompetensi dasar mengoperasikan software basis data untuk SMK Negeri 1 Seyegan,” J. Pendidik. Vokasi , vol. 4, no. 1, pp. 111–124, 2014, doi: 10.21831/jpv.v4i1.2539.
[14]  M. Suhartanto, “Kata kunci : Pembuatan Website Sekolah, PHP, 1.1,” J. Speed-Sentra Penelit. Enginerring dan Edukasi , vol. 4, no. 1, pp. 1–8, 2012.
[15]  A. Rochman, M. I. Hanafri, and A. Wandira, “Implementasi Website Profil SMK Kartini Sebagai Media Promosi dan Informasi Berbasis Open Source,” Acad. J. Comput. Sci. Res. , vol. 2, no. 1, pp. 46–51, 2020, doi: 10.38101/ajcsr.v2i1.272.
[16]  F. Rozi, T. Haryanti, and N. Fahriani, “Rancang Bangun Website Profil Sekolah Taud-Saqu Ashabul Qur’an Surabaya Berbasis Html,” J. Ilm. Comput. Insight , vol. 4, no. 1, pp. 1–9, 2022.
[17]  W. B. Utomo and C. Bakara, “Pembuatan Web Profil Sekolah Menengah pertama Negeri 1 Ngrampal dengan Menggunakan PHP dan MySQL,” Semin. Ris. Unggulan Nas. Inform. dan Komput. FTI UNSA 2013 , pp. 84–92, 2013.
[18]  M. Bernard and C. Novtiar, “Pengembangan media kalkulus menggunakan javascript geogebra untuk meningkatkan kemampuan penalaran  terhadap  calon  guru  pada  pandemi  covid-19,” J.  Pembelajaran  Mat.  Inov. ,  vol.  5,  no.  1,  pp.  159–168,  2022,  doi: 10.22460/jpmi.v5i1.159-168.
[19]  J.  Winanjar  and  D.  Susanti,  “RANCANG  BANGUN  SISTEM  INFORMASI  ADMINISTRASI  DESABERBASIS  WEB MENGGUNAKANPHP  DAN  MySQL,” ProsidingSeminar  Nas.  Apl.  Sains  Teknol. ,  pp.  3–3,  2021,  [Online].  Available: https://journal.akprind.ac.id/index.php/snast/article/view/3396
[20]  H. Supriyono et al. , “Penerapan Teknologi Web Sekolah Bagi Smp Dan Sma Muhammadiyah Kartasura,” War. LPM , vol. 19, no. 1, pp. 39–52, 2016, doi: 10.23917/warta.v19i1.1983.