## Penerapan Pola Layer-Cake pada Tata Letak Antarmuka Pengguna Situs Berita Sepakbola
Implementing Layer-Cake Pattern on User Interface Layout of Football News Website (A Case Study of "SWED" News Website)
Restyandito 1 , Melkhi Pryadi 2 , Willy Sudiarto Raharjo 3 1,2,3 Fakultas Teknologi Informasi, Universitas Kristen Duta Wacana Yogyakarta E-mail: 1 dito@ti.ukdw.ac.id, 2 melkhi.pryadi@ti.ukdw.ac.id, 3 willysr@ti.ukdw.ac.id

## Abstrak
Dalam  pengambilan  keputusan,  pihak  pengelola  situs  web  perlu  memperhatikan  bagaimana pelanggan menggunkan layanan dari situsnya. Situs "SWED sepakbola" memiliki total kunjungan 11,69  juta  pengunjung.  Rata-rata  lama  waktu  kunjung  adalah  1  menit  21  detik,  dengan  1,54 jumlah halaman per pengunjung. Dengan jumlah bounce rate mencapai 79,17% dapat dikatakan banyaknya  pengunjung  pada  landpage  tidak  memiliki  jumlah  interaksi  yang  banyak.  Hal  ini mengindikasikan pelanggan merasa tidak tertarik. Penelitian ini mencoba mengoptimalisasikan performa tata letak antarmuka pengguna untuk menarik interkasi pembaca dengan menekan rasio bounce menggunakan pendekatan desain layer-cake, grid dan penggunaan kolom. Perbandingan desain  lama  dan  hasil  redesain  dilakukan  menggunakan  pengujian  A/B  dan  perhitungan inferensial statistik. Hasilnya redesain yang dilakukan berhasil meningkatkan konversi klik, dari varian awal (varian control) ke varian yang baru (varian treatment) sebesar 40%. Konversi klik sebanyak 14 hingga 63 klik dengan pengunjung sebanyak 4 sampai 18 pengunjung dalam 4 grup yang  berbeda,  selama  4  kali  pengujian  dan  pengujian  tersebut,  untuk  menemukan  nilai  yang optimal hingga hasil akhir yang signifikan pada kategori “baik” dengan nilai CR “diatas rata-rata” sehingga dapat menemukan formula tata letak lebih lanjut (optimal) dari varian tata letak SWED sepakbola..
Kata kunci: pola layer-cake, A/B testing, bounce rate, optimalisasi, antarmuka web

## Abstract
In  the  context  of  decision-making,  website  managers  must  carefully  analyze  user  engagement. For example, "SWED Sepakbola," affiliated with SWED, has 11.69 million viewers but a high 79.17% bounce rate. This data suggests that high traffic doesn't guarantee interaction, indicating potential  issues  on the  landing  page  that  could  deter  users.  To address this,  a study aimed to optimize the user interface layout and reduce the bounce rate on SWED Sepakbola. The study utilized statistical values from A/B testing and referenced scholarly sources on interface layout patterns (e.g., layer-cake, grid, and column). The findings revealed a significant 40% increase in click conversion rate when comparing the initial variant (control) to the new variant (treatment). Click conversion rates ranged from 14 to 63 clicks, with visits varying from 4 to 18 across four testing rounds. The goal was to identify an optimal value surpassing the average CR, enabling exploration  of  additional  layout  formulas  for  SWED  Sepakbola.  This  study  exemplifies  the importance  of  data-driven  decision-making  to  enhance  user  engagement  and  website performance.
Keywords: layer-cake pattern, A/B testing,  bounce rate, optimalization, web interface.

## 1. PENDAHULUAN
Masalah  yang  dihadapi  pihak  situs  SWED  sepakbola  adalah  untuk  dapat  terus menyediakan  informasi  diperlukan  sumber  dana  atau  pemasukan.  Salah  satunya,  dari  pihak pengiklan. Namun untuk mendapatkan iklan, bagian terpenting yang harus diperhatikan adalah
pengalaman pengunjung di situs web mereka. Jika pengunjung merasa tidak puas, pengunjung akan beralih ke situs lain yang diangap lebih baik. Jika situs web menjadi sepi pengunjung, akan mengalami kesulitan untuk beroperasi karena tidak ada pihak yang  mau  memasang iklan pada web yang tidak ada pengunjungnya.Pada kasus ini, SWED sepakbola salah satu saluran SWED. Situs  web  merupakan  sebuah  kumpulan  halaman-halaman  elektronik  yang  menampilkan informasi berupa teks, gambar, animasi, suara dan atau bisa juga menampilkan semuanya dalam halaman yang terkait pada halaman-halaman lainnya. SWED memiliki total kunjungan 11,69 juta pengunjung,  dari  bulan  April  hingga  September  2021.  Rata-rata lama  waktu  kunjung  adalah  1 menit 21 detik, dengan jumlah halaman per kunjungan adalah 1,54 halaman namun, jumlah bouce rate mencapai 79,17% [1]
Dari data ini, meskipun situs SWED memiliki banyak kunjungan, akan tetapi kebanyakan lama waktu yang dihabiskan oleh para pengunjung pada situs tidak sampai dua menit dan jumlah rata-rata mengunjungi satu halaman saja. Hal ini diukur sebagai rasio bouce dan lagi, termasuk kategori  rasio  bounce  diatas  normal  yakni  41%-55%  [2]  termasuk  dalam  kategori  situs  web dengan conversion rate yang rendah karena dari banyak pengunjung, rata-rata mengunjungi satu halaman saja. Jika hal ini terus terjadi, reputasi situs SWED sepakbola akan menjadi buruk dimata pihak  pengiklan jika  dilihat  dari data tersebut  karena kurangnya  aktivitas  dari  pengunjungnya. Belum  lagi,  soal  daya  saing  dengan  situs  berita  olahraga  lainnya  karena  data  ini  dapat mempengaruhi SEO ( Search Engine Optimization ) dari berbagai mesin pencari di internet yang akan mempengaruhi jumlah jumlah kunjungan karena kata kunci dari situs SWED akan diletakan sesuai  urutan  dari  situs  dengan  performa  tertinggi  hingga  yang  terendah.  Data  mengenai conversion rate dan rasio bounce ini penting untuk diperhatikan untuk mengembangkan situs web dengan performa yang baik.
Conversion rate adalah persentase dari pengguna ketika melakukan sebuah tindakan yang diinginkan. Contohnya sebuah situs jual beli online dengan pengunjung 100,000 orang pada bulan April. Pada bulan tersebut pengguna yang melakukan transaksi beli sebanyak 2,000 orang dari item  atau  barang  yang  ada  pada  situs  tersebut.  Konversinya  bisa  dilihat  dengan  total  jumlah transaksi  dibagi  total  jumlah  pengunjung  yaitu  2,000/100,000  =  2%.  Nilai  yang  dikonversi tersebut dapat berupa klu atau apa pun saja yang menjadi kunci dari sebuah indikasi performa disebut juga key performance indicator (KPI). Jika tidak ada KPI maka tidak ada rasio yang dapat dikonversikan  dengan  total  kedatangan pengunjung  atau  dapat  membuat  nilai  konveri  menjadi lebih sedikit. Hal ini juga bisa termasuk kategori bounce dalam kunjungan.
Bounce rate dapat didefinisikan sebagai rasio sesi yang berusia/berdurasi sangat singkat (umumnya  sesi  dengan  satu  halaman)  yang  terjadi  baik  melalui direct  entry (ketika  pengguna mengetikkan URL  ke dalam browser) maupun referral entry (dengan mengklik  hyperlink) dan halaman tujuan yang sesuai. Walau sederhana, bounce rate telah menjadi tolak ukur standar untuk evaluasi  kinerja  titik  masuk  (atau  referensi)  dalam  analisis  web.  Pengukuran  rasio bounce ini, digunakan untuk mengukur kinerja dari tampilan sebuah halaman dari situs web sehingga data tersebut dapat dijadikan alat untuk mengevaluasi atau memperbaiki tampilan sebuah halaman [3] [4]. Data pengukuran ini juga diperhatikan oleh pihak kegita yaitu, investor dan juga SEO [5].
Pengukuran rasio bounce biasanya diamati oleh perusahaan atau pihak profesional yang menangani  masalah  performa  situs  web.  Seperti  Similarweb  yang  memberikan  layanan peningkatan  peringkat  SEO  dan  melaporan  performa  situs  web  secara  statistik.  Penanganan masalah  performa  situs  web  tidaklah  terlepas  dari  tampilan  visual website yakni,  menangani tataletak antarmuka pengguna. Antarmuka pengguna dalam ISO 9241-161:2016 adalah elemen visual yang ditampilkan dengan bantuan perangkat lunak yang mengisyaratkan adanya interaksi melalui  input/output.  Lalu,  yang  dimaksud  tata  letak  berarti  pengelompokan  item-item  yang terkait  atau  berhubungan  dengan  cara  menempakan  ruang  atau  menentukan  urutan  agar  jelas untuk  dilihat.  Pengunjung  situs  web  didominasi  oleh  pengunjung,  dengan  prilaku  cenderung untuk memindai konten dari pada membaca seluruhnya [6] menemukan sebuah pola yang dapat memudahkan pengunjung untuk memindai teks pada situs web secara cepat. Pola ini dinamakan The  Layer-Cake  Pattern .  Pola layer-cake menggunakan  judul,  subjudul  dan  kaliman  yang mengarahkan inti atau maksud sebuah informasi pada awal paragraf. Studi ini dilakukan dengan
eyetracking selama 13 tahun dengan melibatkan 500 peserta dan lebih dari 750 jam waktu dalam sesi  pengujian  mengatakan  pola  layer-cake  adalah  pola  yang  paling  efisie  sejauh  ini,  dalam membantu pengunjung memindai teks selama membaca di web. Cara ini dapat meningkatkan alur baca  yang  jelas,  (pengalaman)  baik  untuk  struktur  konten  web  sehingga  pengunjung  melihat konten dalam web berupa teks dengan baik, prilaku membaca ini telah menjadi materi studi yang terus dikembangkan. Salah satu studi pengembangannya adalah pola membaca yang disokong, pemindaian bernama layer-cake. pola ini, terdiri dari fiksasi yang sebagian besar terletak pada bagian judul dan sub-judul (heading dan sub-heading) halaman, dengan ciri fiksasi, titik panas atau plot tatapan mata (dari hasil studi eyetracking) berada pada judul, sesekali berada pada bagian teks (body) diantaranya. Pengaturan struktur pola dibuat menggunakan beberapa cara menandai sub-judul, sehingga tampilannya lebih mencolok secara relatif dari tampilan teks lainnya dengan konsisten  dan  mengikuti  alur  mata  dalam  membaca  (seperti  dari  kiri  ke  kanan).  Taktik  visual dapat berupa: penggunaan warna yang berbeda, ukuran kalimat yang diperbesar, dan cara lainnya menggunakan efek; seperti dipertebal, terdapat bayangan teks, garis bawah (sebaiknya digunakan untuk hyperlink) Kombinasi efek; dari taktik sebelumnya.
Penelitian sebelumnya, menguji perhatian visual konsumen terhadap foto-foto pariwisata dengan  teks  keterangan  didalamnya.  Menurut  Li,  Huang,  &  Christianson  [7]  eyetracking digunakan untuk merekam perhatian visual konsumen dan kuesioner diberikan untuk memperoleh informasi tentang efektivitas iklan yang dirasakan. Efektivitas iklan lebih tinggi pada foto-foto pariwisata yang menyertakan teks dalam bahasa yang dikenal.

## 2. METODE PENELITIAN
Metode penelitian melibatkan perancangan treatment dengan penerapan pola Layer-cake, evaluasi performa situs yang akan diujikan melalui A/B Testing kepada 42 responden dan analisa eyetracing . Berikut adalah langkah-lamgkah untuk mengatasi masalah dalam studi kasus ini.
A/B test, disebut juga sebagai controlled experiments, split test, randomized experiments, control/treatment tests , dan online field experiment . Terori A/B tes ini berawal dari eksperimen Sir Ronald A. Fisher di Rothamsted Agricultural Experimen Station di Inggris pada tahun 1920 dan di dipengaruhi topik penelitian lain yang juga dikembangkan saat itu, statistika [8]. Menurut Kohavi  &  Longbotham,  [8]  Online  Controlled  Experiments  and  A/B  Testing,  adalah  suatu rancangan  eksperimen,    bertujuan  untuk  mengevaluasi  faktor  dengan  dua  level  yakni,  versi  A disebut  juga  “ control ”  dan  versi  B  disebut  “ treatment ”.  Versi control biasanya  adalah  versi bawaan semula atau versi yang belum diubah. Sedangkan versi t reatment adalah versi yang sudah diubah (Gambar 1).
Gambar 1 A/B Testing
Uji  coba  dilakukan  menggunakan between  subject  design 2x1  ( Independent  variabel berupa varian A dan varian B dan sebuah Dependent variabel berupa jumlah klik)  seperti tampak
pada Gambar 1 di atas. Maka dalam perancangannya antarmuka pada tahap awal terdapat dua jenis, varian A atau control (Gambar 2a) dan varian B atau treatment (Gambar 2b).
(a)                                                                         (b)
Gambar 2 Control Prototype berdasarkan situs asli (kiri) dan Treatment Prototype (kanan)
Varian ini, dibuat menggunakan Bootstraps studio. Untuk membuat prototipe dari situs SWED  Sepakbola  yang  sebagian  besar  menggunakan  Framework  Bootstraps  maka  peneliti menggunakan  Bootstraps  studio.Prototipe  ini  dibuat  menggunakan  bootstrap  karena,  varian  A atau control dari  sumber  utama  menggunakan  framework  yang  sama  sehingga  dapat menggunakan tool ini untuk perancangan yang “mirip” dengan situs asli saat ini. Varian B atau treatment merupakan versi pengembangan dan dirancang untuk menerapkan kekuatan dari pola Layer-Cake. Mockup ini, terlihat garis yang menunjuk penerapan pola membaca layer-cake yang didukung oleh penjelasan referensi [6]. Pola ini terdiri dari teks yang ditebalkan, kata kunci, dan kalimat penting dalam paragraf awal, terutama terletak pada judul dan sub-judul halaman. Versi treatment  ini  terus  dikembangkan  untuk  mendapatkan  nilai  konversi  yang  optimal.  Sehingga dilakukan lebih banyak versi untuk menemukan terapan treatment yang cocok dan meningkatkan nilai OEC ( Overall Evaluation Criterion ). OEC yang digunakan adalah nilai dari hasil konversi klik pada berita yang ada di situs web dan membandingkan nilai tersebut dalam perbandingan statistik  yaitu,  observed  power,  p-value  dan  Z-score.  Tingkat  konversi  diperoleh  dari  jumlah konversi di varian A atau B dibagi dengan total pengunjung di varian A atau B tersebut.
Secara keseluruhan penggemar olahraga sepakbola dapat di bagi menjadi 3 persona [9] berdasarkan  latar  belakang  dari  responden  penelitian  ini. Ketiga  persona tersebut  dapat  dilihat pada  Tabel  1  meliputi  :  responden  yang  gemar  dan  hobi  olahraga  sepakbola,  responden  yang merupakan pengamat olah raa sepakbola, dan responden penggemar setia suatu klub bola. Dengan mengetahui karakter dan tujuan pengemar sepakbola secara umumnya uji desain dapat dilakukan sesuai dengan persona responden saat melakukan pengujian. Hal ini dilakukan untuk mengurangi bias  akibat  preferensi  responden.  Sebagai  contoh,  jika  responden  merupakan  penggemar  klub sepak bola Manchester United (liga Inggris), sedangkan berita yang ditampilkan di situs SWED saat ini adalah berita-berita liga Spanyol, maka ada kemungkinan responden tidak mengklik berita karena memang tidak tertarik dengan berita yang bukan karena desain layer-cake yang diujikan (varian treatment) . Hal ini disebabkan karena penggemar sepak bola memiliki tim yang menjadi idola  masing-masing  dengan  memiliki  tingkat  fanatisme  terhadap  pemain  maupun  klub  sepak bola  tersebut  [10].  Sebaliknya  ada  kemungkinan  responden  yang  tidak  tertarik  dengan  liga Spanyol  akan  melihat isi  berita situs  SWED  karena  tampilan  desain layer-cake yang  mungkin lebih menarik.

## Tabel 1. User persona.
Persona Deskripsi Karakteristik Utama Tujuan Persona A Penggemar dan hobi olahraga sepakbola -  Bermain sepakbola secara aktif dan berpartisipasi dalam komunitas/club sepakbola lokal. - Meningkatkan keterampilan sepakbola. - Menemukan teman dan komunitas sepakbola. - Mencapai prestasi dalam karir sepakbola. Persona B Pencinta Sepakbola (Pengamat) -  Mengikuti berita-berita dan pertandingan sepakbola secara aktif. -  Menyukai statistik dan analisis dalam sepakbola. - Mendapatkan informasi terkini tentang tim dan pemain sepakbola. - Menyuarakan pendapat dan berinteraksi dengan. penggemar sepakbola lainnya. Persona C Penggemar Setia Klub Tertentu -  Mendukung dengan setia klub sepakbola favorit. -  Mengikuti perkembangan tim dan pemain secara mendalam. - Mendukung klub sepakbola favorit dengan kehadiran di stadion dan pembelian merchandise resmi. - Mengikuti perkembangan tim melalui sosial media dan forum diskusi.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Hasil Redesain
Hasil kedua varian website yang dibuat (varian A dan B) dibuat dengan memanfaatkan API ( Application Programming Interface ) dari situs asli SWED yang dibuat agar kedua varian website uji dapat menampilkan berita-berita yang sama dengan yang ditampilkan pada situs asli SWED. Halaman website yang dibuat meliputi halaman home, indeks, berita, profile tim, jadwal dan home sport. Contoh implementasi varian website tersebut dapat dilihat pada Gambar 3 dan Gambar 4.
Varian  A  yang  merupakan  desain  asli  situs  SWED sport memilih  tema  dengan  warna cerah dengan logo atau icon yang juga menggunakan warna cerah. Varian B menerapakan desain layer-cake dengan  memanfaatkan  pendekatan  grid  dan  F-Shape  pattern.  Desain  tersebut diimplementasikan  dengan  fokus  utama  pada  bagian  atas  kiri  dan  area  fokus  mengecil  saat pembaca melihat turun ke bawah [11]. Oleh sebab itu informasi yang penting diletakkan di bagian kiri atas (mis berita utama). Penerapana pola layer-cake tampak pada hal-hal berikut:
- Penggunaan sub-heading yang  memungkinkan  pembaca  melihat  struktur  informasi dengan lebih jelas
- Tegas  pada  hiearki  informasi  dimana sub-heading yang  lebih  besar  menandakan informasi  yang  lebih  umum,  sementara sub-heading yang  lebih  kecil  menandakan informasi yang lebih spesifik
- Konten  yang  tersegmentasi  dengan  memanfaatkan  prinsip  Gelstat  ( proximity dan continuity )  maka  pembaca  dapat  melihat  segmen-segmen  yang  ada  dengan  jelas berdasarkan topik atau tema tertentu
- Teks yang mudah dibaca dengan memanfaatkan jenis dan ukuran font serta tata letak yang baik
- Konsistensi visual, seperti ukuran font , warna dan tata letak, sehingga dapat membantu meperjelas hierarki informasi dan meningkatkan keterbacaan ( readibility )
- Menjaga  fokus  pembaca  (fitur).  Pola layer-cake dapat  membantu  mengarhkan  fokus pembaca, dengan menampilkan konten yang paling penting pada bagian atas, sementara konten yang lebih spesifik dan detail diletakkan pada bagian bawah.
(a)                                                                         (b)
Gambar 3 Halaman home situs asli (kiri) dan situs hasil redesain (kanan)
(a)                                                                         (b)
Gambar 4 Halaman jadwal situs asli (kiri) dan situs hasil redesain (kanan)

## 3.2 Analisa Konversi Klik
Analisa  reponden  dilakukan  terhadap  jumlah  berita  yang  dilihat  oleh  responden berdasarkan varian desain yang diujikan (varian A / control yang merupakan desain situs awal,
dan varian B / treatment yang merupakan hasil redesain dengan memanfaatkan pola layer-cake ). Beberapa contoh hasil pengujian yang dilakukan dapat dilihat pada Tabel 2.
Tabel 2. Contoh data responden dan jumlah klik.
Resp  Usia Club faforit Var Tanggal Berita Jumlah Klik 1 27 Real Madrid A 16/02/2022 Courtois: Madrid Kebobolan Gol Bodoh Rifqi Ardita Widiant; Kylian Mbappe Baper Lawan Real Madrid? - Y Arifin; 2 2 24 Chelsea A 27/02/2022 Abramovich Mundur dari Chelsea, Bagaimana Nasib Marina Granovskaia? Afif Farhan; Siapa Mau Beli Chelsea? Afif Farhan; Kisah Kane dan Son, Duet Maut Terbaik Premier League - Tim detikcom 3 … 22 23 Chelsea B 07/04/2022 Pertahanan Chelsea Lagi Keropos Banget! - Novitasari Dewi Salusi;
Peraih Ballon d'Or Ini Ikut Perang Rusia
Vs Ukraina – Y. Arifin; Sebuah Detail Kecil yang Menghukum Chelsea – A. Farhan; Karim Benzema Nyaris Tak Bisa Masuk
Stamford Bridge - Novitasari D. Salusi
Chelsea Takluk dari Madrid, Tuchel
Ungkit Kekalahan Atas Brentford detikTV, dtv
FIFA Bantah Pertandingan Piala Dunia 2022 Dihelat 100 Menit – M. R.Pratama
Ferdinand Puji Benzema Setinggi Langit Sambil Sebut-sebut Ronaldo – R. Prasatya 7 23 24 Chelsea
B 14/05/2022 Final Piala FA: Misi Balas Dendam Chelsea ke Liverpool! - Bayu Baskoro SEA Games 2021: Elkan Baggott Tak Bisa Gabung Timnas Indonesia U-23? –
M. Robbani Lukaku Bantah Klaim Agennya soal
Masalah di Chelsea – N. D. Salusi Werner Tak Pernah Menyesal Tolak Liverpool demi Chelsea karena... - Putra Rusdi K 4

## …
Analisa A/B  Testing dilakukan  dengan  melihat  OEC  yang  merupakan  nilai  dari  hasil konversi klik pada berita yang ada di situs asli (A / control ) maupun hasil redesain (B / treatment ) dan membandingkan nilai tersebut dengan inferential statisik yaitu, observed power, p-value dan Z-score . Hasil pengujian menunjukkan bahwa desain A mendapatkan total 45 jumlah klik (rata- rata 2.6471) dan desain B mendapatkan 63 klik (rata-rata 3.7059) sehingga didapatkan tingkat konversi klik sebesar 40% yang didapat dari perhitungan berikut:
𝐶𝑅 𝐵 −𝐶𝑅 𝐴 𝐶𝑅 𝐴 𝑥 100% = 3,71−2,65 2,65 x 100% = 40%
Hasil analisis statistik juga menunjukkan adanya perbedaan signifikan jumlah konversi klik  dari  desain  situs  asli  (A)  dengan  hasil  redesain  (B)  dimana  diperoleh  nilai  rasio  F  adalah 4,80891 dan P sebesar 0,035698 (P < 0,05 dengan tingkat kepercayaan 95%).

## 3.3 Analisa Eyetracking
Analisa  dilakukan  menggunakan  laporan  Feng-GUI  yang  merupakan  alat  untuk menganalisa  nilai-nilai  dari  grafis,  sebuah  situs  web  ke  dalam  matriks  dengan  kemampuan kecerdasan  buatan  berdasarkan  database  dari  infomasi  persona  yang  mewaliki  kelompok  atau
populasi  pengunjung  dalam  bentuk  laporan  [12].  Laporan  ini,  mensimulasikan  penglihatan manusia  dan  menciptakan  hasil  pengukuran  yang  memprediksi  performa  jalannya  situs  saat dilihat oleh manusia. Laporan ini juga mewakili hasil “sangat mirip” dengan sesi pelacakan mata selama 5 detik oleh 40 subjek. Berikut adalah analisis dari sistem simulasi oleh Feng-GUI.

## 3.3.1 Laporan heatmap
Istilahnya  laporan  heatmap  merupakan  gambaran  dari  fokus,  yang  tampilkan menggunakan gradien warna: hijau ke merah, untuk menampilkan area dengan fiksasi yang lebih banyak  atau  lebih  lama  diperhatikan.  Hasil  ini  juga  menampilkan  elemen-elemen  yang  paling menarik  dari  gambar  dalam  bentuk  titik  "panas" berwarna  merah  dan "dingin" berwarna  hijau pada bagian berikut ini.
-  Hasil evaluasi varian A ( control )
Gambar 5 Heatmap control situs asli Diperoleh hasil dengan menutupi daerah pada halaman dengan warna gradien. Pada Gambar  4.  Halaman  beranda  pada  situs  SWED  salah  satu  dari  5  gambar  pada  deret  berita menjadi fokus perhatian dari tampilan keseluruhan halaman. Tampilan gradasi merah tersebut, merupakan gambar dari pemain sepakbola yang sedang memperebutkan bola. Dari analisis ini kita tahu bahwa gambar adalah obyek visual yang paling menarik dari varian control dari SWED. -  Hasil evaluasi varian B ( treatment )
Perbandingan hasil heatmap pada bada bagian treatmen adalah sebagai berikut.
Gambar 6 Heatmap treatment desain alternatif . Laporan heatmap pada  bagian treatment terlihat  beberapa  titik  panas  yang  tersebar pada  bagian  gambar-gambar  berita.  Selain  itu,  pada  bagian  sub  menu  dan  sub  judul.  Yang berarti arah mata dalam simulasi telah berhasil dalam melihat pola layer-cake dalam halaman ini. Laporan heatmap tersenit adalah laporan prediksi pelacakan mata dari 40 pengunjung yang menunjukkan  bagaimana  area-area  dalam  sebuah  web  diamati  sebagaimana  aslinya  dalam, menarik perhatian pengunjung. Warna heatmap berkisar dari hijau ke kuning hingga merah. Warna-warna  tersebut  mewakili  intensitas  fokus  atau  perhatian  dari  mata  dalam  kategori
rendah,  sedang,  dan  tinggi  secara  berturut-turut  dari  40  pengunjung.  Area  tanpa  warna menunjukkan bahwa area tersebut berpotensi terlewatkan.

## 3.3.2 Laporan Gaze Plot
Laporan gaze plot memvisualisasikan pola pemindaian dan urutan antara elemen-elemen pada halaman situs, berikut ini. -  Hasil evaluasi varian A ( control )
Gambar 7 Gaze plot control desain asli Terlihat  bahwa,  garis  fiksasi  pertama  berada  ditengah  pada  gambar  dengan  angka  1 kemudian dilanjutkan ke arah atas lalau ke bagian bawah, dan lanjut tersebar pada bagian kiri dan kanan.
-  Hasil evaluasi varian B ( treatment )
Gambar 8 Gaze plot treatment desain alternatif .
Dari laporan ini dapat dilihat titik henti gaze juga telah berhasil melewati sub judul dan beberapa  bagian  pada  teks  di  bawah  judul  berita  utama.seperti  yang  terlihat  pada  bagian referensi pola layer-cake [6] . Laporan ini terdiri dari serangkaian titik henti pemindaian oleh mata pengunjung, yang disebut fiksasi dan gerakan mata yang disebut saccades. Diperlihatkan pada  lingkaran  berisi  angka  sesuai  urutan  pemindaian,  dihubungkan  oleh  garis-garis  antar urutan.
Secara rata-rata, fiksasi berlangsung sekitar 200 milidetik saat membaca teks linguistik, dan 350 milidetik saat melihat area berisi gambar.
-  Terdapat  30  fiksasi  dalam  laporan  ini,  yang  mewakili  jalur  pandang  selama  7,5  detik. (250ms x 30 = 7,5 detik)
-  Gambar  laporan  gaze  plot  ini  untuk  secara  visual  menunjukkan  urutan  fiksasi  dan  jalur pandang mata.

## 3.3.3 Laporan Area of Interest (AOI)
Laporan  area  ini  membantu  mendefinisikan  area  dengan  potensi  yang  menarik  atau mencolok pada tampilan situs, sering kali menjadi fokus pertama pada saat situs selesai dimuat.
Potensi ini diungkapkan melalui skor “Visibility” pada area. Skor visibility merupakan metrik ringkasan yang mengindikasikan seberapa menonjol tampilan visual di dalam sebuah area antara elemen-elemen atau kelompok. Pada laporan Gambar berikut. -  Hasil evaluasi varian A ( control )
Gambar 9 Area of Interest control desain asli .
Terdapat  persegi  merah  yang  mewakili  skor  area  tersebut.  Skor  terdapat  pada  bagian dalam kotak tersebut dari rentan skor visibility dari 0 hingga100%. Semain tinggi skor semakin baik tingkat  visibility-nya.
-  Hasil evaluasi varian B ( treatment )
Gambar 10 Area of Interest treatment desain alternatif .
Dikatakan  juga  dari  laporan  Feng-GUI  [12]  hasil  skor  ini  juga  dapat  dijadikan perbandingan  antar  varian,  desain  atau  tataletak  yang  ingin  digunakan.  Dengan  melakukan perbandingan  A/B  dari  laporan  dapat  diambil  varian  B  adalah  varian  yang  lebih  tinggi performanya.
Dari  gambar  ini  dengan  menambahkan  tata  letak  untuk  gambar  dan  sub  berita menghasilkan banyak spot atau area yang menarik yang berarti, meningkatkan kekuatan visual untuk menarik interaksi dari pengunjung [13].

## 3.3.4 Rangkuman Data Fiksasi
Rangkuman  data  fiksasi  berdasarkan  analisa  Feng-GUI  dapat  dilihat  pada Tabel 3.  Berikut  ini merupakan deret, definisi dan singkatan dalam rangkuman ini [14].
-  Time  to  first  fixation  (TTFF)  Merupakan  waktu  dalam  satuan  milidetik  mulai,  dari  saat stimulus ditampilkan hingga dimulainya fiksasi pertama di dalam bagian daya tarik area.
-  Fixations before (FB) Jumlah fiksasi sebelum peserta melakukan fiksasi pertama di dalam area daya tarik.
-  Fixation length (FL) Waktu, lama fiksasi dalam satuan milidetik di dalam area daya tarik.
-  Fixation count (FC) Jumlah fiksasi di dalam AOI.
-  Intensity features (I) Persentase kekuatan dari fitur.
-  Edges features (O) Persentase area diluar konten utama dan orientasinya.
-  Red/Green contrast (RG) Persentase kontars warna antara merah dan hijau. -  Blue/Yellow contrast (BY) Persentase kontras warna, biru dan kuning.
Tabel 3. Rangkuman data fiksasi dari home sepakbola (control).
AOI Visibility Score TTFF FB FL FC Intensity  Edges RG contrast BY contrast AOI 3 100 250 0 500 2 53 55 19 3 AOI 5 48 500 1 250 1 34 65 38 0 AOI 2 48 750 2 250 1 90 64 5 5 AOI 4 40 1000 3 750 3 51 52 67 0 AOI 1 36 1250 4 250 1 43 65 2 4
Tabel 4. Rangkuman data fiksasi home sepakbola (treatment).
Dari tabel-tabel tersebut  tersusun berdasarkan data dengan skor DTA tertinggi ke skor yang lebih rendah. Dapat dilihat bahwa variasi dari treatment dengan pola layer-cake lebih unggul dari varian control atau variasi dari tampilan semula dari situs SWED sepakbola.

## 4. KESIMPULAN DAN SARAN
Berdasarkan  penelitian  dan  analisis,  penerapan  pola layer-cake dan  pengujian  A/B Testing pada situs berita olahraga SWED sepakbola berpotensi meningkatkan nilai conversion rate dan mengurangi rasio bounce . Pola layer-cake membantu pengunjung melakukan navigasi situs  dengan  luas  dan  mudah,  sementara  pengujian  A/B  Testing  memungkinkan  identifikasi elemen  desain  yang  efektif.  Dengan  mengoptimalkan  tata  letak  antarmuka  pengguna  dan berdasarkan  hasil  pengujian,  SWED  sepakbola  dapat  meningkatkan  interaksi  pengguna  dari tingkat  konversi  yang  diamati  pada  varian  B  (3,71%)  lebih  tinggi  40,00%  daripada  tingkat konversi pada varian A (2,63%). Dengan confidence level 95% berdasarkan sampel sebanyak 42 orang yang mewakili polulasi pengunjung SWED di Indonesia.
Implementasi strategi ini memberikan manfaat signifikan. Peningkatan conversion rate berdampak  positif  pada  pengalaman  pengunjung.  Mengurangi  rasio bounce ,  mempertahankan pengunjung  lebih  lama  di  situs  dan  berpotensi  meningkatkan  loyalitas  pengguna.  Selain  itu, optimasi tata letak antarmuka pengguna juga berdampak pada aspek SEO pada hasil statistik dan OEC yang meningkat, akan meningkatkan peringkat dan visibilitas situs SWED sepakbola.

## DAFTAR PUSTAKA
[1]   Similar Web, "Analyze any Website or App," [Online]. Available: https://www.similarweb.com/website/sport.detik.com/?competitors=bolasport.com.
[Accessed Februari 2021].
AOI Visibility Score TTFF FB FL FC Intensity Edges RG contrast BY contrast AOI 5 100 250 0 250 1 38 47 10 21 AOI 1 82 500 1 250 1 43 57 29 15 AOI 2 81 750 2 500 2 61 49 3 40 AOI 4 81 1000 3 500 2 26 54 13 26 AOI 6 77 1250 4 500 2 47 57 52 2 AOI 3 77 1500 5 250 1 43 51 9 17
[2]   Jansen,  B.G,  Jung,  S.G.,  and  Salminen,  J.,  2022,  "Measuring  User  Interactions  with Websites: A Comparison of Two Industry Standard Analytics Approaches Using Data of 86 Websites," Plos one, vol. 17, no. 5, p. 0268212
[3]   Sng,  Y.F.,  2017  "Study  on  Factors  Associated  with  Bounce  Rates on  Consumer Product Websites," in Business Analytics: Progress on Applications in Asia, World Scientific, pp. 526-546.
[4]   Schneider, D., 2021, "Bounce Rate Explained: Everything You Need to Achieve Growth," [Online].  Available:  https://www.similarweb.com/blog/research/market-research/bounce- rate/.
[5]   Sharma, H., 2022, "How do Bounce Rates vary according to product sold?," arXiv preprint arXiv:2205.06866, 2022.
[6]   Pernice,  K.,  2019,  "The  Layer-Cake  Pattern  of  Scanning  Content  on  the  Web,"  Nielsen Norman Group, pp. 4-60, 2019.
[7]   Li, Q., Huang, Z., and Christianson, K., 2016, "Visual attention toward tourism photographs with text: An eye-tracking study," Tourism Management, pp. 243-258.
[8]   Kohavi, R., and Longbotham, R., 2017, Online Controlled Experiments and A/B Testing, 2017 ed., C. Sammut and G. I. Webb, Eds., Boston, MA: Springer US, pp. 922-929.
[9]   Brand Finance, 2022, "Football Fan Research," Brand Finance, London.
[10]  Jaroso,  T.A.,  Garcia,  G.M.G,  Sanchez-Saez,  J.A.,  and  Pascual,  E.C.,  2022,  "Fan Identification as a Precursor of Loyalty Towards a Football Team. A Systematic Review," Journal of Sports Economics & Management, pp. 22-60.
[11]  Peer,  S.,  Sharma,  D.,  Ravindranath,  K.,  and  Naidu,  M.,  2004,  "Layout  design  of  user interface components with multiple objectives," Yugoslav Journal of Operations Research, pp. 171-192.
[12]  Feng-GUI,  2023,  "Attention  and  Attraction  Analysis  Report,"  Feng-GUI  -  AI-Powered Neuromarketing, Rehovot.
[13]  Christner, C., Urman, A., Adam, S., and Maier, M., 2022, "Automated tracking approaches for studying online media use: A critical review and recommendations," Communication methods and measures, vol. 16, no. 2, pp. 79-95.
[14]  Hollander, J.B., Sussman, A., Levering, A. P.,  and Foster-Karim, C., 2020,  "Using Eye- Tracking to Understand Human Responses to Traditional Neighborhood Designs," Planing Practice & Research, vol. 35, no. 5, pp. 485-509.