## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index

## 88
This work is licensed under a Creative Commons Attribution 4.0 International License .

## Perancangan dan Analisis Pengaruh User Interface E-Learning Terhadap Minat Belajar Siswa SMA/SMK Menggunakan Heuristics of Responsive Web Design
Angreyni Regal 1 , Indrastanti R. Widiasari 2
1,2 Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen Satya
Wacana, Salatiga Indonesia
Email : 1 672016204@student.uksw.edu, 2 indrastanti.widiasari @uksw.edu

## Abstract
During  this  current  pandemic  of  Covid-19,  online  learning  or  online  school  is  very important for high school students because they have not been allowed to go to school to take part in offline school as usual. The existence of E-Learning or Electronic Learning facilities will greatly help students to get material or theory in the form of lessons and information from internet. As the Minister of Education emphasizes the implementation of online  schools,  more  and  more  parents  are  beginning  to  facilitate  their  children  with smartphones, so that students can join the online class or searching the subject on the internet. There are many online platforms that provide these things, one of which is the website. However, there are still many websites whose display or the user interface is not very attractive to students because their construction has not been designed properly and optimally. By using the Heurisctic Of Responsive Web Design method as a benchmark to make this e-learning website, hoped that the website design and purpose will be fulfill the need and expectations of students who want to find lessons material and want to learn by online.
Keywords: E-Learning, Website, User Interface, Heuristic of Responsive Web Design
1. PENDAHULUAN
Pada  masa  pandemi  saat  ini,  pembelajaran  berbasis  online (E-Learning) sangatlah penting untuk dilakukan. Terutama untuk siswa SMA/SMK yang sedang mempersiapkan  diri  untuk  lanjut  ke  bangku  perkuliahan  maupun  dunia  kerja. Konsep pembelajaran berbasis Komputer dan Jaringan adalah suatu bentuk model pembelajaran  dengan  memanfaatkan  teknologi  website  dan  internet[1].  Yang notabenenya sudah sangat banyak digunakan di zaman sekarang ini. Beberapa manfaat  E-learning  yaitu, E-learning memberi  fleksibilitas dalam memilih waktu dan tempat untuk mengakses perjalanan. E-learning memberi kesempatan bagi pelajar  secara  mandiri  memegang  kendali  atas  keberhasilan  belajar.  Dan ,  E- learning  memberi  efisiensi  biaya  bagi  administrasi  penyelenggara,  efisiensi

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 89
penyediaan sarana dan fasilitas fisik untuk belajar serta efisiensi biaya bagi pelajar yaitu biaya transportasi dan akomodasi [2].
Dari sekian banyak E-Learning yang ada, salah satu yang berkembang pesat dan sangat  diminati  oleh  user  atau  pengguna,  dalam  penelitian  ini  yaitu  siswa SMA/SMK) adalah E-Learning berbasis website, karena dinilai lebih memudahkan dalam  pencarian  informasi  dan  pengetahuan  yang  dibutuhkan[3].  Website menurut Ginanjar (2004) adalah sebuah  kumpulan antar halaman yang saling terkait  yang  didalamnya  merepresentasikan  sebuah  informasi  mengenai  topik yang  diangkat,  dan  membawa  sebuah  citra  /  visualisasi  dari  pembuat  website tersebut [4].
Usability atau kegunaan suatu website sangat penting karena dari sinilah dapat dinilai seberapa berguna website yang dibangun, namun tentunya usability setiap website akan berbeda untuk satu  user dengan user lainnya  tergantung tingkat kebutuhan  pengguna  tersebut  [5].  Kategori  dari  faktor Usability  sendiri  yaitu accessability dan personalisasi, content dan fitur, navigation  dan search, serta Identity,  privacy,  dan  security  [6].  Disamping  itu,  aspek  lainnya  yang  harus diperhatikan dalam pembuatan E-Learning berbasis web ini adalah tampilan atau User Interface (antarmuka pengguna)[7]. Metode yang sering digunakan dalah perancangan  E-Learning  berbasis  web  ini  adalah Responsive  Web  Design. Responsive  Web  Design  (RWD)  adalah  sistem  web  desain  yang  bertujuan memberikan tampilan menyesuaikan dalam berbagai perangkat. Dengan metode ini, web akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia baik desktop maupun mobile [8]. Pada Juni 2012, Google’s Pierre Far merekomendasikan  desain  web  responsif  (RWD)  ke  perusahaan  yang  akan membangun  website  versi  mobile  sehingga  sebuah  website  tunggal  dapat beradaptasi pada banyak resolusi browser [9].
Penelitian  ini  penting  dilakukan  karena  masih  banyak  website E-Learning yang belum memperhatikan kenyamanan user, menu-menu yang disediakan web, dan tampilan  website  saat  diakses  melalui mobile  phone. Masih banyak web yang harus  dizoom  out  dan  zoom  in  saat  diakses  melalui handphone.  Maka  dalam penelitian  ini,  dengan  penerapan  Heuristic  of  Responsive  Web  Design  sebagai acuan  pembuatan  web,  peneliti  berusaha  memenuhi  kriteria  kenyamanan  user tersebut. Heuristics of responsive web design terdiri dari empat indikator : flexible everything,  design  for  mobile  first,  Design  for  Progressive  Enhancement,  dan optimize content rather than support [10].
Responsive web design merupakan pendekatan yang menyarankan bahwa desain dan pengembangan website harus memperhatikan tingkah laku dan lingkungan dari pengakses berdasarkan ukuran layar, platform, dan orientasi dari device yang

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
90 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
digunakan. Dalam penerapannya, responsive web design terdiri dari kombinasi antara f lexible grids and layouts, images dan CSS media queries [10].  Kombinasi- kombinasi  tersebutlah  yang  diterapkan  peneliti  dalam  perancangan  dan pembuatan website “Online School” agar siswa lebih mudah dan nyaman dalam mengakses website untuk mencari informasi dan pengetahuan baru.
Persyaratan usability  dari  suatu  produk,  termasuk  internet  dan  sistem komputer dapat diidentifikasikan jika produk yang dirancang sesuai dengan kebutuhan pengguna, dalam hal ini yaitu siswa. Evaluasi usability berjalan seiring  dengan  dikenalnya  HCI  ( Human  Computer  Interaction)  [12]. Melalui e-learning, peserta didik tidak hanya mendengarkan uraian materi dari  pendidik  saja  tetapi  juga  aktif  mengamati,  melakukan, mendemonstrasikan,  dan  sebagainya.  Materi  bahan  ajar  dapat divirtualisasikan dalam berbagai format sehingga lebih menarik dan lebih dinamis sehingga mampu memotivasi peserta didik untuk lebih jauh dalam proses pembelajaran [11].

## 2. METODOLOGI  PENELITAN

## 2.1 Identifikasi Permasalahan
Tahap ini adalah tahap untuk melakukan identifikasi mengenai permasalahan yang akan diteliti. Permasalahan yang ada pada penelitian ini adalah mengenai minat belajar  siswa  yang  semakin  berkurang  dari  waktu  ke  waktu.  Lebih  spesifiknya mengenai  kurangnya  minat  siswa  untuk  membuka  dan  memanfaatkan  media- media pembelajaran elektronik ( e-learning) khususnya e-learning berbasis web. Yang akan diteliti disini yaitu apakah masalah tersebut berkaitan dengan Design User  Interface  yang  disuguhkan  atau  tidak.  Penelitian  ini  fokus  pada  evaluasi kemudahan  penggunaan  pada  portal e-learning    siswa  dengan  memberikan tampilan website yang menarik. Metodologi yang digunakan adalah Heuristics of Responsive Web Design.

## 2.2 Studi Kasus
Tahap ini adalah tahap pengumpulan informasi guna untuk membantu penelitian. Informasi diambil dari berbagai jurnal nasional dan jurnal internasional. Jurnal yang dikumpulkan yaitu mengenai User Interface dan Heuristics of  Responsive Web Design, berkaitan dengan penggunaan E-Learning, Website, serta tampilan dari web  itu  sendiri  ( user  interface).  Beberapa  dari  jurnal  meneliti  mengenai pentingnya user  interface  sebagai  tolak  ukur  ketertarikan  pengguna  untuk membuka  dan  belajar  melalui website.  Beberapa  lainnya  melakukan  penelitian dengan  cara  memberikan  beberapa  contoh  tampilan  kepada  pengguna  dan

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 91
meneliti tampilan mana yang paling menarik dan dapat memberikan kenyamanan untuk user terutama untuk website berbasis e-learning.

## 2.3 Desain dan Pembuatan Website
Tahap  ini  merupakan  perancangan  desain  sesuai  dengan  metode Heuristic  Of Responsive Web Design. Terdapat empat indikator dari Heuristics of Responsive Web Design yaitu sebagai berikut :
1) Flexible  Everything  Flexible  Everything  mencakup  banyak  aspek diantaranya layout  dari  halaman  website  yang  menyesuaikan  dengan
ukuran  layar browser,  menampilkan  gambar  dengan  skala  yang proporsional  sesuai  layar browser. Secara   umum  flexible  everything adalah  kemampuan  elemen  halaman website  untuk  menyesuaikan persentase ukurannya berdasarkan ukuran layar browser.
2) Design for Mobile First Indikator ini berfokus pada kemampuan mobile device yang terbatas, tidak seperti desktop PC maupun laptop. Faktor- faktor seperti ukuran layar yang lebih kecil, fokus pada content dan tugas- tugas penting, optimalisasi performa, bisa menjadi acuan untuk membuat responsive web design yang lebih baik.
3) Design  for  Progressive  Enhancement,  merupakan  sebuah  pendekatan pada  pengembangan  web  yang  bertujuan  untuk  memberikan pengalaman terbaik kepada khalayak seluas mungkin.
4) Optimize Content Rather Than Support, fokus dari  indikator ini adalah untuk  mengutamakan  konten  daripada  elemen-elemen  lain  yang digunakan sebagai pendukung dan pelengkap halaman web [10].
Kemudian  dilanjutkan  dengan  membangun  website.  Perancangan  Website awalnya  dilakukan  di  aplikasi  figma  dengan  memperhatikan  menu-menu  yang disediakan, kegunaan website, kemudahan akses, serta tampilan yang menarik. Lalu  pembuatan  atau  pembangunan  website  dilakukan  dengan  menggunakan aplikasi  pemrograman Visual  Studio  Code.  Di  Aplikasi  inilah  peneliti  membuat coding untuk website sesuai dengan rancangan yang telah dibuat sebelumnya di figma. Bahasa pemrograman yang digunakan adalah html dan penerapan CSS.

## 2.4 Pengumpulan Data
Tahap  ini  merupakan  tahap  pengumpulan  data  yang  akan  digunakan  dalam proses  penelitian.  Data  dikumpulkan  dari  siswa-siswi  SMA/SMK  dengan  cara membagikan  kuesioner  secara  online  karena  saat  ini  dunia  sedang  berada ditengah  pandemi  Covid-19  sehingga  pelajar  belum  bisa  kembali  bersekolah seperti  biasanya.  Untuk  pertanyaan-pertanyaan  yang  akan  diajukan  didalam kuesioner, peneliti menyediakan link website yang telah dibangun oleh peneliti

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
92 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
untuk  dinilai  oleh  responden  yaitu  tampilan  website  yang  dibangun  dengan penggunaan metode Heuristics of  Responsive Web Design. Data yang digunakan dalam penelitian ini adalah :
1) Data  Siswa  Sekolah  Menengah  Pertama/Sekolah  Menengah  Kejuruan (SMA/SMK)
2) Data Hasil Kusioner (berisi tentang tanggapan siswa mengenai tampilan user  interface  website  e-learning  (Online  School)  yang  dibuat  dengan menggunakan pendekatan Heuristics of  Responsive Web Design).
Ada beberapa parameter yang dianalisis, yaitu :
1) Tampilan User Interface Website Menganalisis pendapat user atau dalam hal ini siswa mengenai tampilan website
2) Fitur-Fitur Website Menganalisis pendapat user mengenai fitur-fitur yang disediakan, apakah mudah digunakan atau masih perlu perbaikan
3) Fleksibilitas Website Pengalaman  user  saat  mengakses  website  dari  PC  maupun  mobile, fleksibel untuk semua jenis ukuran browser atau belum 4) Respon Website Pengalaman user saat mengakses website mengenai kecepatan respon dan proses loading website setelah diklik 5) Manfaat Website Pendapat user mengenai kegunaan dan manfaat yang diberikan dengan adanya website Online School.

## 2.5 Analisis Data dan Kesimpulan
Pada  tahap  ini,  peneliti  akan  melakukan  analisis  terhadap  data  yang  telah terkumpul dari responden, dalam hal ini para  pelajar SMA/SMK. Untuk melihat apakah tujuan dari penelitian sudah tercapai. Analisis dilakukan dengan metode perhitungan Likert.
Tahapan  terakhir  pada  peneilitian  ini,  yaitu  penarikan  kesimpulan.  Penarikan kesimpulan dirumuskan setelah seluruh prosedur penelitian telah dilaksanakan.

## 3. HASIL DAN PEMBAHASAN
Berdasarkan desain website yang sebelumnya telah dirancang dengan berpatokan pada poin-poin dari Heuristic of Responsive Web Design di figma. Desain website kemudian  dibangun  dan  diimplementasikan.  Hasil  dari  penelitian  ini  adalah Website  Online  School  (https://your-onlineschool.netlify.app/),  telah  diuji  dan diharapkan dapat memenuhi kebutuhan pelajar SMA/SMK dalam mendapatkan

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 93
materi pelajaran Komputer yang mereka butuhkan secara online. Berikut adalah beberapa gambar tampilan dari website yang telah dibangun.
a. Halaman Utama Website
Gambar  2  dan  Gambar  3  adalah  tampilan  Halaman  Utama  atau  Home  pada website Online School. Halaman dibawah adalah tampilan yang pertama kali user lihat pada saat mengakses link website. Pada menu “Home” ini, user atau dalam hal ini siswa SMA/SMK dapat membaca maksud dan tujuan dibuatnya website Online School. Tampilannya juga sudah fleksibel baik diakses melalui PC maupun handphone

## Gambar 2 Halaman Utama di HP

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
94 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
b. Halaman menu Theory
Gambar 4 dan Gambar 5 adalah tampilan dari menu Theory di hand phone dan di PC. Isi dari halaman Theory ini adalah materi pelajaran komputer yang dapat diakses oleh siswa saat membutuhkannya.
Gambar 5 Menu Theory di PC

## Gambar 4 Menu Theory di HP

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 95
c. Halaman menu Webinar
Berikut adalah Gambar 6 dan Gambar 7, merupakan tampilan dari menu Webinar. Di menu Webinar ini disediakan informasi untuk para siswa mengenai webinar-webinar terbaru yang dibuka untuk tingkat SMA/SMK atau secara umum. Juga disediakan tombol submit untuk pembicara, guru, atau siapapun yang mau mendaftarkan webinarnya atau memberikan informasi terkait pelaksanaan webinar. Yang nantinya akan diarahkan ke halaman untuk mengisi data saat mengklik ‘SUBMIT’. User diminta memasukkan data dan memberik an keterangan apakah user akan memberikan informasi terkait webinar atau melakukan pendaftaran untuk melaksanakan webinar. Nantinya saat tombol ‘kirim’ diklik, akan diarahkan ke email user kemudian mengirim template yang telah diisi tadi ke email admin.
Gambar 6 Menu Webinar di HP
Gambar 7 Menu Webinar di PC

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
96 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
d. Hasil Input Data Webinar
Gambar  8  adalah  tampilan  halaman  untuk  mengisi  data  yang  muncul  setelah mengklik tombol SUBMIT di menu Webinar.  Gambar 9 adalah hasil pengiriman dari halaman submit data yang berisi nama, nama host, judul webinar, tanggal pelaksanaan, waktu pelaksanaan, nomor yang bisa dihubungi, dan keterangan.
Gambar 8 Halaman Submit Gambar 9 Email

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 97
Isi dari menu Theory adalah materi pelajaran siswa, tampilannya dapat dilihat di Gambar 10.
Gambar 10 Isi Theory
e. Kode Program
1) Kode Program 1 Menyesuaikan Ukuran Interface Mobile Phone
/* Mobile */ @media (max-width: 500px) { .navbar { height: 110px; } .navbar .flex { flex-direction: column; } .navbar ul { padding: 10px; background-color: rgba(0, 0, 0, 0.1); } }
Kode Program 1 berisi source code yang berguna untuk menyesuaikan ukuran website  agar  fleksibel  atau  sesuai  dengan  layar  saat  diakses  dengan menggunakan mobile phone, ada juga khusus untuk menyesuaikan layar tablet. Caranya adalah dengan menentukan  ukuran  media dan navigation bar dengan flexbox. Flexbox sendiri bertujuan untuk memberikan container kemampuan untuk

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
98 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
mengatur  posisi  item-item  yang  ada  dalam  halaman  website,  serta  mengatur panjang  dan  lebarnya.  Code  yang  digunakan  adalah  flex-direction  untuk menentukan  arah  yang  akan  diberlakukan  untuk  item-item  yang  ada  pada container.  Arah  yang  digunakan  disini  adalah  column/  menyesuaikan  dari  atas kebawah.
2) Kode Program 2 Menyesuaikan ukuran media
.container { max-width: 1100px; margin: 0 auto; overflow: auto; padding: 0 40px; } .containerbutton { max-width: 200px; margin: 0 auto 0 170px; padding: 0 10px; } @media (max-width: 500px) { .containerbutton { margin: 0 auto 0 50px; } }
Kode Program 2 adalah container disini berguna untuk mengatur ukuran gambar- gambar atau yang ada agar menyesuaikan dengan ukuran yang telah diatur dalam container  saat  dipanggil.  Contoh  penggunaanya  adalah  pada  menu  webinar digunakan agar ukuran gambar tetap stabil satu sama lain, juga pada tampilan menu, container digunakan agar tampilan menu di setiap halaman tetap sama dan fleksibel saat diakses melalui PC maupun Mobile Phone.
3) Kode Program 3 CSS untuk navigation bar atau tampilan navigasi
/* Navbar */ .navbar { background-color: var(--primary-color); color: #fff; height: 70px; } .navbar ul { display: flex;

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 99
} .navbar a { color: #fff; padding: 10px; margin: 0 5px; font-size: x-large; } .navbar a:hover { border-bottom: 2px #fff solid; } .navbar .flex { justify-content: space-between; }
Kode Program 3 berisi css untuk mengatur tampilan navigasi atau menu. Di css, ditentukan background color, warna, dan ukuran navigasi. Penambahan navbar .flex agar tampilan navigasi menyesuaikan ukuran dengan device yang mengakses website.

## 4) Kode Program 4 Melakukan Submit Data
<!-- KONTEN START --> <section class="py-3"> <div class="container"> <h1>PELAKSANAAN WEBINAR</h1> </div> <div class="container"> <form action="mailto:angreyniregalbaru@gmail.com" method="post" enctype="text/plain"> Nama Pembicara:<br> <input type="text" name="name" required><br> Nama Host:<br> <input type="text" name="host name" required> <br> Judul Webinar:<br> <input type="text" name="Webinar Title" requi red><br> Tanggal Pelaksanaan:<br> <input type="date" name="Tanggal Pelaksanaan" required><br> Waktu Pelaksanaan:<br> <input type="time" name="Waktu Pelaksanaan" r equired><br> Nomor yang dapat dihubungi:<br> <input type="number" name="Nomor yang bisa di hubungi" required><br> Ket. : (Pendaftaran/Informasi):<br>

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
100 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
<input type="text" name="Keterangan" size="50 " required><br><br> <input class="containerbutton" type="submit" value="Kirim" style="background- color: #59A7AC;"> </form> </div> </section> <!-- KONTEN END  -->
Kode Program 4 adalah source code yang berguna untuk menginput data di menu Webinar (Submit). Setelah mengklik Submit, akan muncul halaman untuk mengisi data.  Digunakan  code  form  action  untuk  mengeksekusi  pengiriman  data  serta memasukkan  alamat  email  tujuannya.  Semua  data  ‘required’  atau  tidak  boleh kosong. Setelah mengklik ‘kirim’, data akan langsung diarahkan ke email user dan akan terpost secara otomatis di kolom isi email, kemudian user mengirim data tersebut ke email tujuan yang sudah tersedia secara otomatis juga.

## Pengumpulan Data
Pengujian  website  diperuntukkan  khusus  bagi  siswa  SMA/SMK  secara  acak. Kuesioner berupa google form yang dibagikan kepada siswa-siswi secara random sebanyak  30  orang.  Analisis  data  kuesioner  dilakukan  dengan  perhitungan metode Likert. Tujuan pengujian ini adalah untuk mendapatkan nilai subjektif dari para  pelajar  mengenai  website  yang  telah  dibangun.  Didalam  gform  kuesioner telah  disediakan  link  website,  user  diminta  untuk  mengakses  dan  merasakan sendiri terlebih dahulu kemudian memberikan tanggapan terhadap pernyataan- pernyataan  yang  ada  di  dalam  kuesioner.  Parameter  standar  yang  digunakan dalam pengujian untuk mengetahui bagus atau tidaknya nilai-nilai yang didapatkan dapat dilihat di Tabel 1.
Tabel 1 Parameter Nilai Skor Parameter Nilai 5 Sangat Setuju 4 Setuju 3 Netral 2 Tidak Setuju 1 Sangat Tidak Setuju Tabel 2 memperlihatkan hasil pengujian yang telah dilakukan. Tabel 2 Hasil Kuesioner Pengujian Website Jawaban No         Pernyataan Jumlah  Indeks

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 101
Ax5  Ax4  Ax3  Ax2  Ax1
USER INTERFACE 1 Website OnlineSchool yang telah dirancang dan dibangun peneliti mudah digunakan oleh user (pengguna) 13 15 2 0 0 131 87% 2  Tidak ada kesulitan dalam memahami fitur-fitur yang disediakan peneliti dalam web selama mengakses Website Online School ini 9 16 4 1 0 123  82% 3   Website Online School fleksibel dan tampilannya jelas saat diakses menggunakan PC (Komputer/Laptop) 20 9 1 0 0 139  92% 4    Website Online School fleksibel dan tampilannya jelas saat diakses melalui Mobile Phone (HP) 17 13 0 0 0 137  91% 5  Website Online School sudah responsive atau respon yang diberikan web saat diakses baik 8 18 4 0 0 124  83% 6  Proses Loading atau proses menampilkan halaman web tergolong cepat 9 14 7 0 0 122  81% Total 76 85 18 0 0 774  86% FUNGSIONALITAS

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
7 Website OnlineSchool
meningkatkan minat belajar karena desain user interfacenya menarik dan tidak membosankan 6 20 4 0 0 122 81% 8  Website Online School desainnya tidak monoton (tidak hanya berisi tulisan) lebih menarik diakses oleh siswa untuk keperluan belajar online 10 14 6 0 0 124  83% 9 Menu Webinar memberikan manfaat yang baik untuk siswa maupun pembicara dalam menemukan informasi mengenai webinar ataupun mendaftarkan dan memberikan informasi webinarnya kepada admin website untuk dipost di kolom informasi 5 18  7 0 0 118  79% 10   Tujuan dan maksud baik dari dibuatnya website Online School ini dapat dilihat dengan jelas, apalagi pada masa pandemi saat ini siswa dituntut untuk tetap giat belajar meskipun harus dari rumah atau secara online 16 13 1 0 0 135  90% Total 76 85 18 0 0 774  83%

## Tabel 3 Interpretasi Nilai Kepuasan

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 103
Skor Kepuasan Nilai 80% - 100% Sangat Setuju 60% - 79,9% Setuju 40% - 59,9% Netral 20% - 39,9% Tidak Setuju 0% - 19,9% Sangat Tidak Setuju
Berdasarkan  data  kuesioner  yang  telah  dikumpulkan  dan  dianalisis  dengan menggunakan skala Likert, hasilnya dapat dilihat di kolom indeks pada Tabel Hasil Kuesioner.  Skala Likert atau Likert Scale adalah skala penelitian yang digunakan untuk mengukur sikap dan pendapat. Dengan skala likert ini, responden diminta untuk  melengkapi  kuesioner  yang  mengharuskan  mereka  untuk  menunjukkan tingkat persetujuannya terhadap serangkaian pertanyaan atau pernyataan. Hasil Perhitungan Likert diatas didapatkan dengan rumus dibawah :
Rumus Indeks (%) = Total Skor : (ymax) x 100
Dimana  total  skor  adalah  jumlah  masing-masing  skala,  ymax  adalah  jumlah responden dikali skor tertinggi parameter Likert.
Berdasarkan  Tabel  2  Hasil  Kuesioner,  nilai  rata-rata  pada  pernyataan  pertama adalah  13,1  maka  persentasenya  adalah  87%,  nilai  rata-rata  pada  pernyataan kedua  adalah  12,3  maka  persentasenya  yaitu  82%,  nilai  rata-rata  untuk pernyataan  ketiga  adalah  13,9  maka  persentasenya  adalah  92%.  Selanjutnya pernyataan keempat memiliki rata-rata 13,7 dengan persentase 91%, pernyataan kelima mempunyai rata-rata 12,4 dan presentase 83%. Lalu untuk pernyataan keenam,  rata-ratanya  adalah  12,2  dengan  persentase  81%.  Sedangkan  untuk pernyataan  ketuju,  mendapatkan  rata-rata  12,2  dan  persentasenya  81%. Kemudian  pernyataan  kedelapan  mendapat  rata-rata  12,4  dengan  persentase 83%, pernyatan kesembilan memiliki rata-rata 11,8 dan rata-ratanya adalah 79%. Yang  terakhir  adalah  pernyataan  kesepuluh,  mendapat  rata-rata  13,5  dengan persentase 90%.
Menurut perhitungan Likert yang telah dilakukan, indeks yang didapatkan untuk klasifikasi  User  Interface  adalah  sebesar  86%  dari  100%.  Dan  indeks  untuk klasifikasi  dari  segi  fungsionalitas  adalah  sebesar  83%  dari  100%.  Total keseluruhan  indeks  untuk  kedua  klasifikasi  adalah  85%.  Berdasarkan  tabel  3, persentase hasil klasifikasi dari setiap indeks dapat disimpulkan bahwa responden sangat  setuju  dengan  kemudahan  dari  segi  penggunaan  website,  user interfacenya menarik, membuat siswa lebih memiliki minat untuk belajar online, memberikan  kemudahan  dalam  mencari  informasi  mengenai  webinar  pelajaran

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
104 | Perancangan dan Analisis Pengaruh User Interface E-Learnig ……
maupun webinar, serta memiliki desain yang menarik serta fleksibel diakses dari device apapun terutama mobile phone.

## 4. KESIMPULAN
Dari  penelitian  yang  telah  dilakukan,  dapat  disimpulkan  bahwa  penggunaan metode Heuristic of Responsive Web Design memiliki pengaruh yang baik untuk perancangan  website  baik  dari  segi  user  interface  maupun  fungsionalitasnya. Untuk indikator pertama yaitu Flexible Everything, sudah diterapkan namun belum terlihat  jelas  pengaruhnya  karena  pertanyaan  yang  digunakan  untuk  kuesioner tidak terlalu spesifik pada pengaruhnya. Begitupun untuk  indikator kedua, yaitu Design for Mobile First dimana pada indikator ini, berfokus pada tampilan layar pada mobile yang terbatas. Indikator kedua sudah diterapkan dan sesuai dengan pertanyaan pada kuesioner kolom User Interface, poin-poin dari indikator sudah tercapai namun karena pertanyaan yang kurang spesifik, pengaruhnya belum bisa ditentukan.
Pengaruh penggunaan metode Heuristic of Responsive Web Design dapat terlihat dengan  jelas  di  indikator  ketiga  dan  keempat  yaitu Design  for  Progressive Enhancement dan Optimize Content Rather Than Support. Pengaruh dari kedua indikator tersebut dapat terlihat jelas dari kolom kuesioner User Interface maupun Fungsionalitas. Dengan adanya website yang menarik perhatian siswa, fleksibel di  semua  device,  dan  mudah  digunakan,  diharapkan  kedepannya  siswa  akan semakin rajin belajar online apalagi ditengah-tengah keadaan kita saat ini, belum ada kejelasan kapan wabah corona akan tertangani dengan baik. Website Online School bersifat umum bagi siapapun yang membutuhkan.
Saran  yang  diberikan  untuk  penelitian  selanjutnya  adalah  berfokus  pada pengembangan fungsi dan memperbanyak materi pelajaran agar  user semakin tertarik dan semakin rajin belajar melalui E-Learning berbasis website. Dan juga membuat  pertanyaan  yang  lebih  spesifik  saat  melakukan  analisis  mengenai pengaruh penerapan metode terhadap minat belajar siswa. Terima kasih.

## REFERENSI
[1] R. Adawi, 2008, “Pembelajaran Berbasis E - Learning,” vol. 2, pp. 1– 12 [2]  Awp Unla, 2015, “E - Learning” vol. 2, pp. 1– 9
[3] W.  O.  J.  Fhiter,  R.  Umar,  and  A.  Yudhana,  2017,  “Implementasi  Dan Pengembangan  Sistem  E-learning  Berbasis  Web  Pada  STIMIK Muhammadiyah Paguyangan,” Pros. Semin. Nas. Multi Disiplin Ilmu, no. Call for Papers UNISBANK Ke-3, pp. 104 – 107
[4] A.  Kurniawan,  R.  I.  Rokhmawati,  and  A.  Rachmadi,  2018,  “Evaluasi  User

## Journal of Information Technology Ampera
https://journal-computing.org/index.php/journal-ita/index
Angreyni Regal, Indrastanti R. Widiasari | 105
Experience dengan Metode Heuristic Evaluation dan Persona ( Studi pada : Situs Web Dalang Ki Purbo Asmoro ),” vol. 6, pp. 2918– 2926 [5]  M.  Penha,  W.  Franklin,  M.  Correia,  F.  Ferreira,  and  C.  Campos,  2014, “Heuristic  Evaluation  of  Usability -a  Case  study  with  the  Learning Management Systems (LMS) of IFPE,” Int. J. Humanit. Soc. Sci., pp. 295 – 303
[6]  Y. Windarto, 2015, Identifikasi Usability Factor Website E-Commerce Model B2C Dengan Metode Heuristic, J. Tek. dan Ilmu Komput., pp. 221 – 231
[7]  E. W. F. Amin Ali, 2016, Evaluasi Heuristic Pada Web Based Learning Dalam Upaya Meningkatkan Kemudahan Pengisian Try Out Uji Kompetensi, vol. 6, pp. 74 – 80
[8]  R. Adawi, 2014, Responsive Web Design, vol. 1 pp. 2 – 4
[9]  H. A. D. Arief Hidayat, Victor Gayuh Utomo, 2016, Penerapan Responsive Web Design Dalam Perancangan Sistem Modul Online Adaptif, pp. 44 – 48
[10] M. F. Ikhsan, M. K. Sabariah, G. Agung, and A. Wisudiawan, 2017, Analisis User Interface Pada Mobile Device Menggunakan Heuristics of Responsive Web Design Analysis of User Interface on Mobile Device Using Heuristics of Responsive Web Design, vol. 16, pp. 6432 – 6439
[11] W. Hartanto, 2016, Penggunaan E-Learning Sebagai Media Pembelajaran, vol. 2, pp. 1 – 15
[12] D. Caesaron, 2015, Evaluasi Heuristic Desain Antar Muka ( Interface ) Portal Mahasiswa ( Studi Kasus Portal Mahasiswa Universitas X ), vol. 16, pp. 9 – 14