INNOVATIVE: Journal Of Social Science Research Volume 4 Nomor 4 Tahun 2024 Page 10176-10184 E-ISSN 2807-4238 and P-ISSN 2807-4246
Website: https://j-innovative.org/index.php/Innovative
Analisis Visual Situs Web Untuk Pengembangan Situs Web Perpustakaan Digital
Nuning Kurniasih 1 ✉ , Fitri Perdana 2 , Saleha Rodiah 3
Program Studi Perpustakaan dan Sains Informasi, Universitas Padjadjaran
Email: nuning.kurniasih@unpad.ac.id 1 ✉
Abstrak
Elemen  visual  merupakan  salah  satu  aspek  dari  antarmuka  pengguna  (UI).  Pada  situs web perpustakaan  digital,  elemen  visual  merupakan  aspek  penting  untuk  meningkatkan  pengalaman pengguna dan situs web usability. Penelitian ini bertujuan untuk melakukan analisis visual terhadap salah  satu  situs web  perpustakaan  digital  perguruan  tinggi  yaitu  Telkom  University  Open  Library. Analisis visual situs web Tel-U Open Library ini mempergunakan metode Evaluasi Heuristik (Heuristic Evaluation).  Hasil penelitian menunjukkan bahwa desain visual situs web Tel-U Open Library cukup menarik. Namun demikian, pengembangan masih perlu dilakukan untuk  beberapa hal antara lain meningkatkan  keterbacaan  dengan  meningkatkan  kontras  warna  dan  membuat  standar  tipografi, memastikan gambar dan ikon memiliki resolusi tinggi, menyederhanakan  tata letak dan membuat tata letak yang  lebih ramah pengguna dengan mengurangi elemen atau konten pada halaman web, membuat  elemen  interaktif  tidak  mengganggu  elemen  lainnya,  memberikan  umpan  balik    dan mempergunakan panduan untuk memastikan elemen visual pada seluruh situs web konsisten. Hasil analisa pada elemen visual ini diharapkan dapat memberikan masukan bagi pengembangan visual situs web Tel-U Open Library.
Kata Kunci: elemen visual web, perpustakaan digital, pengembangan situs web
Abstract
Visual elements are one aspect of the user interface (UI). On digital library websites, visual elements are  an  important  aspect  to  improve  user  experience  and  website  usability.  This  research  aims  to conduct a visual analysis of one of the university's digital library websites, Telkom University Open Library. The visual analysis of the Tel-U Open Library website uses the Heuristic Evaluation method. The  results  showed  that  the  visual  design  of  the  Tel-U  Open  Library  website  is  quite  attractive. However, development still needs to be done for several things including improving readability by increasing color contrast and creating typography standards, ensuring images and icons have high resolution, simplifying the layout and creating a more user-friendly layout by reducing elements or content  on  web  pages,  making  interactive  elements  not  interfere  with  other  elements,  providing feedback and using guidelines to ensure visual elements throughout the website are consistent. The results of the analysis on visual elements are expected to provide input for the visual development of the Tel-U Open Library website.
Keyword: visual elements of the web, digital library, website development

## PENDAHULUAN
Elemen visual merupakan salah satu aspek dari antarmuka pengguna (UI). Pada situs web  perpustakaan  digital,  elemen  visual  penting  untuk  mempermudah  akses  informasi, memahami konteks konten lebih baik, menemukan informasi lebih cepat dan efisien,  dan meningkatkan pengalaman  pengguna. Tampilan visual situs web  yang profesional tidak hanya  dapat  meningkatkan  kredibilitas  perpustakaan  digital,  namun  juga  meningkatkan keterlibatan dan kepuasan pengguna (Jongmans, Jeannot, Liang, & Dampérat, 2022) . Desain  visual  sebuah situs  web  perpustakaan    digital tidak  lepas  dari  visi,  misi  dan tujuan lembaga penaung dengan menekankan pada aspek fungsi ( usability) dan estetika (Bowen, 2018; Thorlacius, 2009). Elemen-elemen visual perlu didesain sebaik mungkin untuk menciptakan  visual  yang  tidak  hanya  menarik,  tetapi  juga  memandu  dan  membantu pengguna ( usability) mencapai tujuan.
Secara teknis, elemen visual terdiri atas (a) tombol yang dapat diklik untuk melakukan sebuah tindakan (b) ikon yang merupakan representasi grafis dari sebuah objek atau konsep; (c)  gambar baik berupa foto, ilustrasi atau grafik;  (d) tipologi berupa gaya, susunan dan tampilan teks, termasuk jenis, ukuran dan warna huruf; (e)  formulir yang dipergunakan  oleh pengguna untuk memasukkan dan mengirimkan informasi (f) tautan baik berupa teks atau gambar; kartu untuk mengelompokkan informasi yang saling berkaitan (g) modal/ pop-up, menampilkan informasi atau opsi tambahan; (h) slider/ corousels, memungkinkan pengguna untuk menggulir serangkaian konten; (i) footer, biasanya berisi tautan ke halaman penting, detail  kontak  dan  ikon  media  sosial;(j) breadceumb,  merupakan  alat  bantu  navigasi;  (k)
search bar, yang berisi formulir input untuk mencari konten; (l) progress bar, menunjukkan indikator  kemajuan  sebuah  tugas;  (m) tooltip,  merupakan  kotak  pop-up  yang  berisi informasi tambahan saat pengguna mengarahkan kursor pada sebuah elemen; dan (n) latar belakang yang terdiri atas warna, pola atau gambar (Bhaskar, Naidu, Babu, & Govindarajulu, 2011; Blair-Early & Zender, 2008; Galitz, 2017; Roth, 2017; Wei, Lirong, & Chunming, 2012).
Penelitian ini bertujuan untuk melakukan analisis visual terhadap salah satu situs web perpustakaan  digital  perguruan  tinggi  yaitu Telkom  University  Open  Library  (selanjutnya disingkat Tel-U Open Library). Tel-U Open Library senantiasa ingin terus mengembangkan situs  web  perpustakaan  digitalnya  dengan    melakukan  evaluasi  secara  berkala.  Penulis sebagai  salah  satu  narasumber  yang  diikutsertakan  dalam  salah  satu  sesi  diskusi pengembangan situs web, melakukan analisa terhadap situs web Tel-U Open Library. Salah satu  aspek  yang  penulis  analisa  adalah  elemen  visual,  aspek  lainnya  disampaikan  dalam artikel terpisah. Hasil analisa pada elemen visual ini diharapkan dapat memberikan masukan bagi pengembangan visual situs web Tel-U Open Library.

## METODE PENELITIAN
Analisis  visual situs  web  Tel-U  Open  Library  ini  mempergunakan  metode  Evaluasi Heuristik  ( Heuristic  Evaluation).    Evaluasi  Heuristik  merupakan  sebuah    evaluasi  yang didasarkan  pada  hasil  evaluasi  seorang  atau  beberapa  ahli  terhadap    elemen-elemen antarmuka  pengguna.  Evaluasi  berpegang  pada  prinsip usability  yang  terdiri  atas penyediaan fitur yang dibutuhkan, kemudahan dalam mempergunakan fitur dan kegunaan fitur  (Broin, 2011; Nielsen, 2012; Pratama, Hanggara, & Setiawan, 2022; Syarqim Mahfudz, Agusti, Az Zahra, & Rahma Dhini, 2022). Adapun langkah-langkah dalam evaluasi heuristik untuk menganalisis visual situs web Tel-U Open Library ini dapat dilihat pada Gambar 1.
Gambar 1 Langkah-langkah Penelitian
Mendefinisikan Cakupan Memilih Heristik Dasar Melakukan Evaluasi Menyusun Laporan Memberikan Rekomendasi
Pada Gambar 1 dapat dilihat bahwa proses penelitian dimulai dengan mendefinisikan cakupan.  Cakupan  pada  penelitian  ini  adalah  analisis  elemen-elemen  visual  untuk mengembangkan situs web Tel-U Open Library.  Selanjutnya peneliti memilih Heuristik dasar yang terdiri atas kejelasan, konsistensi, navigasi, umpan balik dan estetika. Adapun elemen- elemen visual yang dievaluasi mencakup tata letak dan jarak, skema warna, tipografi, ikon dan  gambar,  elemen  interaktif  dan  konsistensi.  Hasil  dari  evaluasi    dan  rekomendasi disampaikan kepada pihak Tel-U Open Library pada acara workhsop pengembangan situs web.

## HASIL DAN PEMBAHASAN
A. Tata Letak dan Jarak pada Situs Web
Tata Letak dan jarak pada  situs web Tel-U Open Library dapat dikases pada tautan: https://openlibrary.telkomuniversity.ac.id/ Visual tata letak  web Tel-U Open Library dapat dilihat seperti pada Gambar 2.
Gambar 2 Tata Letak Situs Web Tel-U Open Library Sumber: https://openlibrary.telkomuniversity.ac.id/
Pada Gambar 2 dapat dilihat bahwa halaman web tersebut menampilkan banyak sekali elemen.  Dalam  satu  sisi  halaman  web  tersebut  memiliki  informasi  yang  sangat  lengkap,
namun  banyaknya  elemen  mempengaruhi    tata  letak  yang  terlihat  sangat  penuh  dan terkesan kurang rapi. Banyak  elemen yang ditampilkan mungkin akan  membuat bingung pengguna  dan  meluangkan  waktu  lebih  lama  untuk  memilih  atau  mempertimbangkan elemen  mana  yang  perlu  mendapat  perhatian  terlebih  dahulu.  Namun  demikian, berdasarkan informasi dari pihak Tel-U Open Library, banyaknya informasi atau elemen yang ditampilkan pada halaman web tersebut karena ingin menampilkan semua informasi kepada pengguna  untuk  mempermudah  pengguna  mencari  informasi.  Untuk  mengatasi permasalahan ini, maka perlu dipertimbangkan lagi apakah bisa mengurangi elemen atau konten  terutama  pada  halaman  utama  sehingga  setiap  elemen  mempunyai  ruang  yang cukup.
Dalam hal jarak antar elemen, beberapa elemen terutama pada menu navigasi utama di bagian atas terlihat jarak sudah sama, namun pada bagian “ News ”, “Informasi Penting” “ E-Journal, E-book & E-Magazine ”, dan menu lain di bawahnya terlihat belum konsisten. Beberapa elemen terlihat sangat dekat/ sempit dan beberapa elemen lainnya mempunyai jarak yang cukup. Konsistensi pengaturan jarak  antar menu item dalam menu navigasi, spasi pada bagian judul dan konten yang mengikutinya, jarak  pada paragraf dan blok teks,  jarak antara  gambar  dan  teks  dan  margin  di  antara  tombol  perlu  dipertimbangkan  untuk pengembangan  selanjutnya.  Pengaturan  jarak  berguna  untuk    memberi  ruang  konten bernafas dan meningkatkan keterbacaan.
Tata  letak web  perpustakaan  digital  perlu  berfokus  pada  efektivitas,  efisiensi,  dan kemudahan  belajar.  Tata  letak  situs web  yang  efisien  dan  efisien  harus  dapat  membatu pengguna menyelesaikan tugas mereka dengan cepat dan akurat. Ini berarti secara visual struktur navigasi harus  jelas dan intuitif dan memastikan bahwa informasi penting mudah diakses. Konsistensi pada visual situs web diperlukan agar pengguna dapat dengan mudah mengenali dan mempelajari situs web saat pertama kali mengunjungi web.   Desain  tata letak yang berfokus  pada pengguna dapat diperoleh melalui pengumpulan umpan balik dari pengguna (Joo, Lin, & Lu, 2011).

## B. Skema Warna
Situs web mempergunakan skema warna utama  yang sesuai dengan warna lembaga penaung    yaitu  merah,  putih,  hitam,  abu-abu.  Namun  demikian,  penting  untuk memperhatikan  kontras  warna  yang  pas  untuk  keterbacaan  teks    bagi  pengguna  yang memiliki    gangguan  penglihatan.  Sebagai  contoh  teks  berwarna  hitam  dengan  latar belakang  berwarna  putih  akan  memiliki  kontras  yang  tinggi  sehingga  mudah  dibaca, sedangkan teks berwarna hitam pada latar belakang dengan gradasi abu-abu yang agak
tua seperti pada kolom “Lokasi” pada  Tabel “Jam Operasional” mungkin perlu dicek lagi tingkat keterbacaannya. Kontras warna pada tombol dan tautan terhadap latar belakang juga perlu diperhatikan agar  pengguna tidak sulit mengenalinya. Aspek lainnya yang perlu diperhatikan adalah hierarki visual yang jelas seperti warna pada judul, tombol dan konten utama harus lebih menonjol dibandingkan dengan elemen lainnya.
Johann Wolfgang von Goethe seorang filsuf Jerman  mengembangkan teori psikologi warna.  Menurut von Goethe  warna sebaiknya tidak hanya menampilkan visual fisi tetapi juga dampak prikologis dan emosional yang melihatnya,  warna harus menciptakan kontras dan harmoni, warna akan mempengaruhi persepsi dan warna memiliki makna simbolis yang menyimpan pesan tertentu (von Goethe, 2009; Yogananti, 2015)

## C. Tipologi
Tipologi  pada  situs  web  tersebut  sudah  cukup  jelas  dan  mudah  dibaca.  Namun demikian,  masih  ada  ukuran  dan  gaya  huruf  yang  berbeda.  Hal  ini  bisa  mengganggu keterbacaan. Pada halaman beranda terlihat hurufnya kecil-kecil, hal ini akan sulit dibaca terutama  bagi  pengguna  yang  memiliki  gangguan  penglihatan.  Penggunaan  gaya  huruf dengan ketebalan yang berbeda juga akan mengganggu hierarki visual. Tinggi baris dan spasi antar baris yang kurang memadai akan membuat paragraf sulit dibaca. Penempatan teks yang tidak rata juga mungkin akan menyulitkan keterbacaan. Untuk mengatasi hal ini maka  perlu  dibuat  standarisasi  ukuran  huruf  dan  gaya  huruf,  seperti  ukuran  huruf  yang mudah dibaca dengan ukuran minimal 16px, gaya dan .ketebalan huruf yang konsisten untuk menjaga hierarki visual yang jelas, tinggi baris yang memadai dan kontras yang tinggi antara warna  latar  belakang  dengan  teks,  serta  menggunakan  rata  kiri  untuk  meningkatkan keterbacaan.

## D. Gambar dan Ikon
Pada situs web ini terdapat banyak gambar dan ikon. Terutama pada bagian Katalog dan Gallery.    Namun  demikian  ada  beberapa  gambar  kurang  jelas  karena  resolusinya rendah. Oleh karena itu perlu menampilkan gambar dengan resolusi tinggi namun tetap harus diperhatikan bahwa pemuatan gambar tersebut tidak memerlukan waktu yang lama. Perlu konsistensi dalam menampilkan ikon dan gambar baik dari sisi gaya maupun  ukuran. Daya  tarik  visual  dapat  ditampilkan  melalui  gambar  yang  jelas  dan  ikon  yang  konsisten (Bowen,  2018).  Pengembang  juga  dapat  menambahkan Alt  Text  (teks  alternatif)  pada gambar untuk membantu pengguna dengan gangguan penglihatan.

## E. Elemen Interaktif
Elemen interaktif seperti tombol dan tautan  pada situs web ini ada namun gambar “Lets  Talk”  untuk  menunjukkan  menu  interaktif  kurang  intuitif  sehingga  dapat  menutupi tombol atau informasi lain yang ada di bawahnya (Gambar 3).  Untuk mengatasi masalah pada elemen ini adalah dengan membuat semua elemen interaktif yang tidak menggangu elemen lainnya.
Gambar 3 Visual Interaktif yang Menutupi Elemen Lainnya

## F. Konsistensi
Masih ada beberapa inkonsistensi dalam elemen desain, seperti gaya tombol, gaya dan ukuran huruf, jarak yang bervariasi. Oleh karena itu perlu mempergunakan panduan gaya untuk memastikan bahwa semua elemen visual mengikuti prinsip desain yang sama atau konsisten.

## SIMPULAN
Desain visual situs web Tel-U Open Library cukup menarik, namun ada beberapa hal yang  perlu  dikembangkan  antara  lain  meningkatkan  keterbacaan  dengan  meningkatkan kontras  warna  dan  membuat  standar  tipografi,  memastikan  gambar  dan  ikon  memiliki resolusi tinggi, menyederhanakan  tata letak dan membuat tata letak yang  lebih ramah pengguna dengan mengurangi elemen atau konten pada halaman web, membuat elemen interaktif  tidak  mengganggu  elemen  lainnya,  memberikan  umpan  balik    dan mempergunakan  panduan  untuk  memastikan  elemen  visual  pada  seluruh  situs  web konsisten. Untuk pengembangan visual situs web, pengembang dapat bekerja sama dengan ahli desain grafis.

## DAFTAR PUSTAKA
Bhaskar, N. U., Naidu, P. P., Babu, R. C., & Govindarajulu, S. R. &. (2011). General Principles of User  Interface  Design  and  Websites. International  Journal  of  Software  Engineering (IJSE), (2), 45.
Blair-Early, A., & Zender, M. (2008). User interface design principles for interaction design.
Design Issues, 4(1), 85 – 108. Retrieved from https://faculty.mercer.edu/codone_s/tco620/2013/interface_design.pdf
Bowen, A. (2018). The Visual Effect: A Literature Review of Visual Design Principles as They Apply to Academic Library Websites. Internet Reference Services Quarterly, 23(3 – 4),
67 – 88. https://doi.org/10.1080/10875301.2019.1702133
Broin, U. Ó. (2011). Heuristic Evaluation of User Interfaces: Exploration and Evaluation. ACM CHI 90 Conference, (December), 249 – 256. https://doi.org/10.13140/RG.2.2.19881.90721 Galitz, W. O. (2017). The Essential Guide to User Interface Design: An Introduction to GUI Design  Principles  and  Techniques  (3rd  ed.).  Retrieved  from  ttps://download.e- bookshelf.de/download/0000/5697/72/L-G-0000569772-0015277282.pdf
Jongmans, E., Jeannot, F., Liang, L., & Dampérat, M. (2022). Impact of website visual design on user experience and website evaluation: the sequential mediating roles of usability and  pleasure. Journal  of  Marketing  Management,  38(17 – 18),  2078 – 2113. https://doi.org/10.1080/0267257X.2022.2085315
Joo, S., Lin, S., & Lu, K. (2011). A Usability Evaluation Model for Academic Library Websites: Efficiency, Effectiveness and Learnability. Journal of Library and Information Studies, 2(December 2011), 11 – 26. Retrieved from http://jlis.lis.ntu.edu.tw/article/v9-2-2.pdf Nielsen, J. (2012). Usability 101: Introduction to Usability. Retrieved from All Usability website: https://www.nngroup.com/articles/usability-101-introduction-to-usability/
Pratama,  H.  Y.,  Hanggara,  B.  T.,  &  Setiawan,  N.  Y.  (2022).  Evaluasi  Usability  dengan Menerapkan Metode Heuristic Evaluation pada Website Dinas Pendidikan Kota Batu. Jurnal  Pengembangan  Teknologi  Informasi  Dan  Ilmu  Komputer,  6(3),  1350 – 1359. Retrieved from https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/10809
Roth, R. (2017). User Interface and User Experience (UI/UX) Design. Geographic Information Science & Technology Body of Knowledge, 2017(Q2).
https://doi.org/10.22224/gistbok/2017.2.5
Syarqim Mahfudz, M., Agusti, F., Az Zahra, S., & Rahma Dhini, B. (2022). Heuristic Evaluation Analysis Using the 10  Nielsen Rule Usability Method on the Kai Access Application. Proceeding of International Conference on Science, Health, And Technology, 325 – 337. https://doi.org/10.47701/icohetech.v3i1.2154
Thorlacius,  L.  (2009).  Visual  Communication  in  Web  Design – Analyzing  Visual Communication in Web Design. In International Handbook of Internet Research (pp.
455 – 476). https://doi.org/10.1007/978-1-4020-9789-8_28
von  Goethe,  J.  W.  (2009). Goethe’s  theory  of  colours :  Retrieved  from https://archive.org/details/goethestheoryco01goetgoog
Wei, Z., Lirong, S., & Chunming, L. (2012). An analysis of the development of China Digital Library  for  Visual  Impairment  website. The  Electronic  Library,  30(6),  756 – 763. https://doi.org/10.1108/02640471211282082
Yogananti, A. F. (2015). Pengaruh Psikologi Kombinasi Warna Dalam Website. ANDHARUPA: Jurnal Desain Komunikasi Visual & Multimedia, 1(01), 45 – 54. https://doi.org/10.33633/andharupa.v1i01.956