## PENGGUNAAN  TEKNIK  FLUID  GRIDS  TERHADAP KETERLIHATAN  KONTEN  PADA  WEBSITE  PRODI INFORMATIKA
Muhammad Akbar Al Afghani 1 , Anugrah Bagus Wijaya 2
1,2 Universitas Amikom Purwokerto; jalan letjend pol. soemarto, watumas, purwanegara, kabupaten banyumas, jawa tengah;(0281)623321
Riwayat artikel: Received: 27 Juni 2023 Accepted: 10 Juli 2023
Published: 1 Agustus 2023
Keywords: user centered design, user interface, skala likert, fluid grid
Corespondent Email: anuuwu.real@gmail.com
© 2023 JITET (Jurnal Informatika dan Teknik Elektro Terapan). This article is an open-access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY NC)
Abstrak. Tujuan dari penelitian ini adalah mengimplementasikan fluid grid pada website prodi informatika dengan pendekatan user centered design dan untuk mengukur kepuasan pengguna menggunakan kuesioner yang dihitung dengan  skala  Likert.  Metode  UCD  digunakan  untuk  memastikan  bahwa pengunjung berada di jantung desain dan pengembangan situs web. Langkah- langkah  UCD  meliputi  pengumpulan  kebutuhan  pengguna,  analisis pengguna,  desain  prototyping,  pengujian  dan  evaluasi  berkelanjutan.  dan teknologi fluid grid digunakan untuk membuat desain website yang responsif. Selain  itu,  survei  menggunakan  skala  Likert  digunakan  untuk  mengukur kepuasan pengguna terhadap desain website. Skala Likert adalah alat umum untuk mengukur tingkat persetujuan atau ketidaksetujuan dengan pernyataan tertentu. Responden diminta untuk menanggapi pada skala Likert mulai dari 'sangat tidak setuju' hingga 'sangat setuju'. Hasil  penelitian ini diharapkan dapat  meningkatkan  pengalaman  pengguna  saat  mengakses  informasi  pada website program studi informatika. Selain itu, diharapkan penelitian ini juga akan memberikan pemahaman tentang penggunaan teknologi fluid grid yang baik  dalam  desain  web  responsif  dan  efektivitas  penggunaan  teknik  UCD dalam desain dan pengembangan situs web.
Abstract. . The purpose of this research is to implement a fluid grid on the website  of  the  informatics  study  program  with  a  user-centered  design approach  and  to  measure  user  satisfaction  using  a  questionnaire  that  is calculated using a Likert scale. The UCD method is used to ensure that the visitor  is  at  the  heart  of  the  website  design  and  development.  UCD  steps include  gathering  user  requirements,  user  analysis,  prototyping  design, testing  and  ongoing  evaluation.  and  fluid  grid  technology  is  used  to  create responsive website designs. In addition, a survey using a Likert scale is used to measure user satisfaction with website design. The Likert scale is a common tool  for  measuring  the  level  of  agreement  or  disagreement  with  certain statements. Respondents were asked to respond on a Likert scale ranging from 'strongly disagree' to 'strongly agree'. The results of this study are expected to improve  user  experience  in  accessing  information  on  the  informatics  study program website. In addition, it is hoped that this research will also lead to a better  understanding  of  the  use  of  fluid  grid  technology  in  responsive  web design and the effectiveness of using UCD techniques in website design and development.
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062

## 1. PENDAHULUAN
Kehidupan bermasyarakat pada saat ini sangat  erat  kaitannya  dengan  kehidupan berteknologi.  Yang  mana  teknologi  sudah menjadi kebutuhan bagi setiap insan di seluruh pelosok  dunia.[1]  Dalam  bidang  pendidikan pun  teknologi  memiliki  peran  penting  dalam proses  belajar  dan  mengajar.[2]Salah  satu contoh  rangkaian  teknologi  yang  memberikan keuntungan  adalah  Website  yang  mana membuat  informasi  dapat  digapai  di  seluruh dunia lewat internet.
Website  adalah  salah  satu media  yang cuku  banyak  digunakan  untuk  berbagai Aktivitas. Mengingat keperluan untuk menyampaikan  informasi  lebih  cepat,  Website dapat mengatasi masalah ini. Salah satu faktor kenyamanan pengguna Website adalah kemudahan  menemukan  informasi  dan  mudah dipahami. Desain Website bukan hanya sekedar untuk estetika semata, karena desain sebenarnya  adalah  untuk  pengembangan  dan perencanaan  sistem  informasi.  Desain  Web adalah  sebagai  alat  komunikasi  pengembang yang  bertujuan  menyediakan  informasi  yang mudah diakses oleh pengguna.
Alur Navigasi pada Website merupakan  salah  satu  bagian  inti  dari  Design Website.  Alur  navigasi  yang  mudah  bisa membuat  pengunjung  memberikan  tanggapan yang baik. User Experience dan Usability pada Website  harus    baik  agar  Website  dimengerti dan  dimanfaatkan  dengan  mudah,  oleh karenanya peneliti membutuhkan metode yang tepat  untuk  evaluasi  dan  memberikan  desain yang memenuhi kebutuhan pengunjung.
Selain  itu  tampilan  website  yang responsive  juga  merupakan  hal  penting  yang tidak  boleh  terlewat  karena  akan  sangat berpengaruh  terhadap  tampilan  jika  diakses dengan  perangkat  yang  berbeda.  [3]  jadi membuat web design yang responsive merupakan  hal  yang  harus  dilakukan  untuk kenyamanan pengunjung.
Pentingnya fungsionalitas website program studi informatika Universitas Amikom Purwokerto  berfungsi  untuk  memaparkan informasi  terkait  seputar  jurusan  informatika. Baik  dari  kegiatan  seputar  jurusan  maupun kegiatan  mahasiswanya.  User  interface  dan User  experience  dari  website  program  studi
informatika  ini  masih  perlu  di  analisis  dan  di Evaluasi  lagi  agar  dapat  memudahkan  dan membuat nyaman penggunaan website tersebut. User  interface  yang  baik  dapat  membuat pengguna  lebih  sering  mengunjungi  website tersebut.
Untuk mengatasi permasalahan tersebut,  penulis  menggunakan  metode  yang dirancang  terpusat  pada  pengunjung.  User- centered  design  merupakan  metode  yang fokusnya  adalah  pada  pengunjung  dari  mulai sampai  selesai,  metode  ini  diharapkan  dapat mengatasi permasalahan saat ini.[4]

## 2. TINJAUAN PUSTAKA
Penelitian pertama yang digunakan peneliti sebagai  bahan  acuan  adalah  dari  Aan  Ansen Andryadi  pada  tahun  2023  yang  berjudul “Analisis Tampilan Web Responsif”. Tujuannya  adalah  untuk  membandingkan  dan menganalisa  3  tiga  website  yang  memiliki desain menarik.[5]
Penelitian  juga  dilakukan  oleh  Ali  Imran,
Muhammad Nasir, dan Lipantri Mashur Gultom pada  tahun  2020  yang  berjudul  “Perancangan Ulang  Desain  Website  Pada  Jurusan  Teknik Informatika  Politeknik  Negeri  Bengkalis Dengan  Menggunakan  Konsep  User  Interface Dan  User  Experience”.  Dalam  hasil  yang dipaparkan  peneliti  adalah  semua  tampilan website.[6]
Penelitian  berikutnya  dilakukan  oleh  M.
Agus Muhyidin, Muhammad Afif Sulhan, dan Agus  Sevtiana.  Yang  berjudul  “Perancangan Ui/Ux  Aplikasi  My  Cic  Layanan  Informasi Akademik  Mahasiswa  Menggunakan  Aplikasi Figma”  yang  bertujuan  untuk  memudahkan mahasiswa  yang  membutuhkan  informasi terkait perkuliahan, kenyaman dalam penggunaan  aplikasi  dengan  tampilan  yang simple, modern dan menarik.[2]
Penelitian  selanjutnya  oleh  Nujjiya  Febyla, Ariyan Zubaidi, dan Indah Wulandari berjudul “Analisis  Dan  Perbaikan  Tampilan  Sistem Informasi  Dewan  Perwakilan  Rakyat  Daerah Provinsi  Nusa  Tenggara  Barat  Berbasis Website  Menggunakan  Figma”.    Yang  telah memperbaiki tampilan Website seperti memperbaiki  tampilan,  merubah  warna  tema dan mengubah gaya tampilan.[7]
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
Penelitian berikutnya oleh Luminita
GIURGIU dan Ilie GLIGOREA yang berjudul “Responsive  Web  Design  Techniques”. Membahas  tentang  Teknik  desain  yang responsive sehingga dapat di buka di berbagai perangkat berbeda.[3]

## 3. METODE PENELITIAN
Metode penelitian ini menggunakan metode User Centered design (UCD). Merupakan suatu motode
yang dimanfaatkan untuk pengembangan secara interaktif untuk membuat system.  UCD  adalah  tahapan  yang  berfokus pada  kebutuhan,  kegunaan,  lingkungan,  tugas dan alur kerja.

## 3.1. Metode pengembangan UCD

## gambar 1. tahapan metode user centered design
Metode pada Gambar diatas adalah metode yang dipakai untuk Merancang system. Konsep UCD adalah pengunjung sebagai Center dari seluruh proses penyusunan system.[4]

## 3.1.1. Analisis Pengunjung
Pada  tahap  ini  peneliti  menentukan  proses identifikasi user yang telah disebarkan melalui kuisioner  dan  menentukan  user  yang  terlibat sebagai  pengunjung  website.  berikut  adalah penjabaran pengunjung website :
Demography Mahasiswa,  Dosen, Admin, Alumni Geography Lingkup Prodi Informatika Psychography Pengguna Smartphone dan PC Behavior mengakses mencari informasi menggunakan layanan
Table 1. spesifikasi calon pengguna

## 3.1.2. Spesifikasi Kebutuhan Penunjung
Pada  tahapan  ini  Peneliti  MEndefinisikan kebutuhan  apa  saja  yang  diharapkan  oleh pengguna  berdasarkan  hasil  kuisioner  yang telah  disebar  sebelumnya.  Berikut  adalah datanya:
Mahasiswa Dosen Alumni Admin
Login Login Login Login Menu Menu Tracing Alumni Mengelola Data
Ubah Repository Mengelola informasi Hapus Repository Mengelola  Profil Website Mengelola  data alumni
Tambah Repository Forum Alumni Mengelola dan Verifikasi Repository Dosen

## Table 2. spesifikasi kebutuhan pegunjung
Setelah mengidentifikasi keperluan pengunjung, lalu digambarkan dalam sebuah bentuk use case diagram
Mahasiswa Dosen Alumni Admin Beranda Profile Website Informasi Menu Dosen Menu Mahasiswa Menu Alumni Repositori Dokumen Layanan Tracing Alumni Reguler Transfer MBKM Buku Kurikulum Program Studi Berita Kampus Info Beasiswa Info Mahas iswa Data Mahasiswa Menu Mahasiswa Penelitian Pengabdian HKI & Paten Pengaduan Akademik Pusat Bantuan Login <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Info Alumni Forum Diskusi Job Fair <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Data Dosen Menu Dosen <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Sejarah Sambutan Vis i Misi Struktur Fasilitas <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Kelola Pengguna Sertifikasi Pelatihan TOEFL <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Kelola Informasi Website Kelola Repos itori <<include>> Detail Dosen <<extend>> <<includ e>> <<include>> <<includ e>> <<include>> <<include>> <<include>>
gambar 2. Use case diagram
hal  penting  lainnya  yang  dibutuhkan  adalah struktur  navigasi  yang  dapat  dicerna  dengan mudah.
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
Halaman Utama Pencarian Berita Kampus Isi Artikel Sejarah Sambutan Visi Misi Struktur Fasilitas Buku Kurikulum Program Studi Mahasiswa Alumni Dosen Pusat Bantuan Layanan Pengaduan Layanan Akademik Navigasi Reguler Transfer MBKM Sertifikasi Pelatihan TOEFL Data Dosen Menu Dosen Detail Dosen Login Dosen Menu Dosen (Repositori Tersimpan) Tambah Repositori Ubah Repositori Hapus Repositori Info Mahasiswa Data Mahasiswa Menu Mahasiswa Login Mahasiswa Menu Akses Mahasiswa Info Alumni Forum Alumni Job Trace Login Alumni Akses Diskusi Alumni Buat diskusi Ubah Diskusi Hapus diskusi KRS Kroscek Nilai Profile Lulusan Kalender Akademik Pusat Studi
gambar 3. struktur navigasi

## 3.1.3. Tahapan Design
Pada  tahap  ini,  peneliti  mulai  memikirkan interface dan proses kerja website agar mudah dipahami. Peneliti diharuskan membuat tampilan yang tidak mengesampingkan fungsinya. Dalam tahap ini penggunaan Figma sangat  membantu  Peneliti  untuk  merancang designnya. Pada tahap ini peneliti melakukan 3 tahapan,  yaitu  proses  perancangan  styleguide, perancangan  wireframe,  dan  membuat  sebuah prototype.

## 3.1.4. Evaluasi
Ini  adalah  tahapan  untuk  evaluasi  hasil design  yang  dibuat  sebelumya  dengan mengimplementasikan  kepada  pengguna dan  diharapkan  mendapat  feedback  yang baik  dan  bisa  dijadikan  masukan  untuk perkembangan website

## 4. HASIL DAN PEMBAHASAN
4.1. Hasil Desain
Beberapa interface disajikan sebagai berikut :
1. Tampilan beranda untuk desktop
gambar 4. tampilan beranda
ini adalah halaman yang muncl pertama kali pengunjung mengakses website yang berisi elemen elemen seperti banner, logo, search, dan elemen pendukung lainnya
2. Tampilan Main Navigation Untuk Desktop
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
gambar 5. tampilan main navigation
halaman ini menampilkan sebuah DIV atau area dibagian  center  yang  akan  PopUp  saat navigation button di klik. Pada saat tombol nav di  klik  div  akan  otomatis  muncul  dan background  akan  gelap  agar  menampilkan visual yang enak dipandang.
3. Tampilan informasi

## gambar 6. tampilan informasi desktop
Pada bagian ini menampilkan informasi yang  dapat  di  akses  di  menu.  Berisi elemen  pencarian  untuk  mencari informasi yang diinginkan dan informasi informasi lainnya. 4. Tampilan beranda Mobile
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
halaman ini  adalah halaman  yang muncul  jika pengguna mengakses menggunakan smartphone  atau  perangkat  mobile,  dirancang sedemikian  rupa  dan  elemen  elemen  dibuat lebih  kecil  dan  layout  diubah  mengikuti  rasio smartphone.
5. Tampilan Navigasi Untuk Mobile
gambar 8. tampilan navigation mobile
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
Pada bagian ini terdapat scrolling yang mana berfungsi agar pengunjung dapat melihat  semua  menu  navigasi,  tidak terlalu  berbeda  dengan  yang  versi desktop  hanya  saja  semua  elemen diperkecil  dan  ditambah  menu  di bagian  bawah  agar  dapat  Kembali keberanda dengan cepat.
6. Tampilan informasi untuk mobile
gambar 9. Tampilan Informasi Mobile
pada bagian ini sub-konten di pindah ke bagian bawah main content agar main content dapat terlihat dengan jelas. Sub- content dapat di slide ke kanan maupun ke kiri untuk melihat sub-konten yang lain.
4.2.

## Evaluasi Hasil Design
Dari hasil penyebaran kuisioner sebelumnnya,  diperoleh  sejumlah  34 penjawab. Skala likert digunakan sebagai bahan  untuk  mengukur  prosentase dengan bobot dan prosentase interval 20 yang diperoleh dengan cara menghitung 100  dibagi  banyaknya  nilai  skala  likert yang telah ditentukan.[8] tanya jawab sts ts n s ss
P1 Apakah perpaduan warna nyaman di mata?
0 0 5 12 15 P2 Apakah Penempatan icon, menu dan konten sesuai?
0 1 7 10 14 P3 Apakah  icon yang sesuai dapat membantu?
0 1 4 12 14 P4 Apakah bentuk dan ukuran icon sesuai?
0 0 5 9 18
P5 Apakah anda dapat memahami fungsi setiap gambar dan icon?
0 2 2 12 18 P6 Apakah font yang digunakan nyaman di pandang?
0 0 1 16 15 P7 Apakah ukuran fontnya nyaman? 0 0 3 13 16 Table 3. Tabel pertanyaan jawaban skor persentase Sangat setuju 5 81% - 100% Setuju 4 61% - 80% Netral 3 41% - 60% Tidak setuju 2 21% - 40% Sangat setuju 1 0% - 20%

## Table 4. bobot dan persentase
Selanjutnnya peritungan skala likert dengan menggunakan rumus berikut Total Score = jumlah penjawab × bobot jawaban X = skor tertinggi × jumlah responden Y = skor terendah × jumlah responden Persentase = total skor ÷ skor tertinggi × 100 rumus 1. perhitungan skala likert
perhitungan dihitung dengan total skor dari yang tertinggi hingga ke terendah menggunakan rumus yang menghasilkan hasil sebagai berikut :
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577 eISSN: 2830-7062
sts ts n s ss Total skor Persentase setuju Tidak setuju
P1 0 0 15 48 75 138 86,25 % P2 0 2 21 40 70 133 83,12
% 16,87 %
P3 0 2 12 48 70 132 82,5
% 17,5 %
P4 0 0 15 36 90 141 88,12
% 11,87 %
P5 0 3 6 48 85 142 88,12
% 11,87 %
P6 0 0 3 64 75 142 88,75
% 11,25 %
P7 0 0 9 52 80 141 88,12 % 11,87 %
Table 5.  Persentase hasil kuisioner

## gambar 10. diagram persentase
Gambar 10 adalah persentase evaluasi dalam bentuk diagram, dari 7 pertanyaan yang telah disebar kepada para pengunjung, telah didapat hasil 86% setuju dengan desain web yang telah dibuat dan diharapkan Dapat memenuhi kebutuhan pengguna website.

## 5. KESIMPULAN
Kesimpulannya adalah sebagai berikut :
a. Perbaikan  tampilan  Website  Program Studi Informatika telah dilakukan sesuai dengan metode yang tepat
b. Perbaikan  tampilan  Website  dilakukan dengan  mendesain  ulang  website  yang semula masih menggunakan Wordpress
c. Memberikan tampilan yang lebih
nyaman dimata dengan tidak mengurangi
fungsionalitas website

## UCAPAN TERIMA KASIH
Terima  kasih  yang  sedalam  dalamnya kepada  dosen  pembimbing  riset  yang  telah membantu menyelesaikan penulisan jurnal ini. Dan  terimakasih  kepada  semua  yang  disebut dalam penelitian ini.

## DAFTAR PUSTAKA
[1] R. Pramudita, R. W. Arifin, A. Nurul Alfian, And N. Safitri, “Penggunaan Aplikasi Figma  Dalam Membangun  Ui/Ux  Yang  Interaktif  Pada Program  Studi  Teknik  Informatika  Stmik Tasikmalaya,” Shilka  Dina  Anwariya ,  Vol.  3, No. 1, 2021, [Online]. Available: Www.Youtube.Com,
[2]  M.  Agus  Muhyidin,  M.  A.  Sulhan,  And  A. Sevtiana, “Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” 2020. [Online]. Available: Https://My.Cic.Ac.Id/.
[3]  L.  Giurgiu  And  I.  Gligorea,  “Responsive  Web Design  Techniques,” International  Conference Knowledge-Based Organization , Vol. 23, No. 3,
Pp.  37–42,  Jun.  2017,  Doi:  10.1515/Kbo-2017- 0153.
[4]  D. Larson Kaligis And R. R. Fatri, “Pengembangan  Tampilan  Antarmuka  Aplikasi Survei  Berbasis  Web  Dengan  Metode  User Centered  Design,”  1051.  [Online].  Available: Https://Jurnal.Umj.Ac.Id/Index.Php/Just-It
[5]  A.  A.  Andryadi,  “Analisis  Tampilan  Web Responsive Studi Kasus : Situs Dicoding, Detik Dan  Rumah  Zakat,”  2023.  [Online].  Available: Www.Rumahzakat.Org
[6]  A.  Imran,  M.  Nasir,  And  L.  M.  Gultom, “Perancangan  Ulang  Desain  Website  Pada Jurusan  Teknik  Informatika  Politeknik  Negeri Bengkalis  Dengan  Menggunakan  Konsep  User Interface Dan User Experience.”
[7]  N.  Febyla Et  Al. ,  “Analisis  Dan  Perbaikan Tampilan  Sistem  Informasi  Dewan  Perwakilan Rakyat  Daerah  Provinsi  Nusa  Tenggara  Barat Berbasis Website Menggunakan Figma (Analysis  And  Improvement  Of  Information System  Display  Of  The  Regional  People’s Representative Council Of Nusa Tenggara Barat Website  Using  Figma).”  [Online].  Available: Http://Begawe.Unram.Ac.Id/Index.Php/Jbti/
[8]  S.  Rahayu,  W.  Program,  S.  Pendidikan,  J. Kesehatan,  And  D.  Rekreasi,  “Pengembangan Skala  Likert  Untuk  Mengukur  Sikap  Terhadap Penerapan  Penilaian  Autentik  Siswa  Sekolah Menengah Pertama.”