## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896

## Perancangan User Interface Design dan User Experience Mobile Responsive Pada Website Perusahaan
Moh. Dani Ariawan, Agung Triayudi * , Ira Diana Sholihati
Fakultas Teknologi Komunikasi dan Informasi, Informatika, Universitas Nasional, Jakarta, Indonesia Email: 1 muh.dani12@gmail.com, 2,* agungtriayudi@civitasunas.unas.ac.id, 3 iradiana2803@gmail.com
*) Email Penulis Korespondensi: agungtriayudi@civitasunas.unas.ac.id
Abstrak− Metode  Human-Centered  Design  merupakan  sebuah  metode  pendekatan  dalam  pengembangan  dan  perancangan sebuah sistem yang berfokus pada pengguna sesuai aspek – aspek kebutuhan dan kebiasaan dari pengguna. Kesulitaan dalam mengakses informasi pada website menjadi sebuah permasalahan yang dihadapi oleh user dan dari segi visual website belum bisa responsive ketika di akses melalui mobile. Tahapan awal yang dilakukan pada metode ini adalah observasi yang bertujuan untuk mencari dan untuk lebih memahami permasalahan yang dihadapi oleh user hingga melakukan testing untuk mengetahui apakah  solusi  yang  diberikan  dapat  dipahami  dan  mudah  digunakan  oleh  user.  Pengujian  website  dilakukan  dengan memberikan tugas – tugas pada user untuk melakukan interaksi pada prototype website, sebagai hasil akhir keberhasilan dalam aspek    kemudahan  dan  kenyamanan  user  menggunakan  website  tersebut.  Setelah  dilakukan  pengujian  kepada  user  secara langsung didapatkan hasil pengujian, yaitu user sudah merasa cukup paham dan mudah ketika menggunakan website yang sudah dibuat. Fitur mobile responsive yang dibuat juga membuat user merasa terbantu ketika sedang menggunakan website pada smartphone.
Kata Kunci: User Interface, User Experience, Human – Centered Designe, Website
Abstract− Human-Centered Design Method is a method of approach in the development and design of a system that focuses on the user according to aspects of the needs and habits of the user. Difficulty in accessing information on the website becomes a problem faced by the user and in terms of visual website can not be responsive when accessed via mobile. The initial stage carried out in this method is observation which aims to find and to better understand the problems faced by users to conduct testing to find out whether the solutions provided can be understood and easily used by the user. Website testing is done by giving tasks to the user to interact on the website prototype, as the final result of success in the aspect of ease and comfort of the  user  using  the  website.  After  testing  the  user  directly  the  test  results  are  obtained,  ie  the  user  already  feels  quite understanding and easy when using the website that was created. The responsive mobile feature created also makes users feel helped when using a website on a smartphone.
Keywords: User interface, User experience, Human - Centered Design, Website

## 1. PENDAHULUAN
Perkembangan teknologi di era 4.0 yang semakin cepat dan maju menuntut kita semua untuk terus bisa berinovasi dalam membuat sebuah produk teknologi, Baik teknologi berbasis aplikasi mobile ataupun website. Sudah banyak perusahaan  –  perusahaan  yang  memanfaatkan  website  sebagai  alat  untuk  memperkenalkan  profile  mereka, contohnya adalah kantor Kementerian Energi dan Sumber Daya Mineral Direktorat Jenderal ketenagalistrikan.
Direktorat jenderal ketenagalistrikan bertugas menyelengarakan perumusan dan pelaksanaan kebijakan di bidang  pembinaan,  pengusahaan,  keteknikan,  keselamatan  kerja,  dan  lingkungan  di  bidang  ketenalaglistrikan. Untuk memberikan sarana informasi Direktorat jenderal  ketenagalistrikan menggunakan media website sebagai sarana untuk memberikan informasi mengenai struktur organisasi, sejarah singkat, dan berita.
Masalah  yang  muncul  pada  penggunaan  website  sebagai  media  informasi  pada  kantor  kementrian ketenagalistrikan  adalah  masih  banyaknya  user  yang  kesulitan  dalam  menggunkan  website  tersebut,  hal  ini menjadi sebuah masalah penting dari sisi kenyamanan user [1] dalam mencari informasi yang ada pada website tersebut. Dari segi visual pada website direktorat jendral ketenagalistrikan juga  terlihat kurang menarik. Website juga  belum  responsive  ketika  user  mengaksesnya  melalui  mobile,  hal  ini  menjadi  sangat  penting  mengingat dizaman yang serba cepat seperti saat ini user juga sering mengakses informasi apapun melalui mobile[2].
Metode  pendekatan  Human-Centered  Design  merupakan  sebuah  metode  pendekatan  didalam pengembangan  dan  perancangan  sebuah  sistem  yang  sangat  berfokus  kepada  pengguna[3].  Dalam  penerapan Human-Centered Design seorang desainer diwajibkan memperhatikan aspek-aspek  kebutuhan dan kebiasaan dari user yang menjadi fokus terciptanya produk[4].
Berfokus  pada  permasalahan  diatas,  maka  penulis  membuat  sebuah  solusi  dengan  melakukan pengembangan  pada  website  dari  sisi  visual  dengan  membuat  tampilan  yang  lebih  responsive  ketika  di  akses melalui mobile sesuai dengan aspek aspek user interface[5].
Untuk  memudahkan  pengguna  dalam  memahami  dan  memberikan  kemudahan  dan  kenyamanan  dalam mengakses website tersebut sesuai dengan aspek aspek user experience[6]. Tujuan utama dari penelitian ini adalah penulis  akan  menerapkan  aspek-aspek  user  interface  dan  user  experience  pada  pengembangan  website[7] Kementerian  Eenergi  dan  Sumber  daya  Mineral  Direktorat  Jenderal  Ketenagalistrikan  dengan  menggunakan metode HCD[8]  dan diharapkan dengan adanya penerapan user interface dan user experience pada pengembangan website,  user  dapat  lebih  nyaman  dan  mudah  dalam  menggunakannya  untuk  memaksimalkan  informasi  yang

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896
nantinya  akan  didapatkan  oleh  user  dalam  website  tersebut[9].  Dan  diharapkan  dapat  menghasilkan  website dengan visual yang lebih modern, user friendly dan responsive ketika digunakan pada mobile[10].

## 2. METODE PENELITIAN
Studi literature digunakan untuk mencari pembahasan yang berkaitan dengan topik yang akan di angkat, refrensi yang dipakai sebagai rujukan pada penelitian ini yang berkaitan dengan user interface dan user experience beserta metode Human – Centered Designe.
Gambar 1 . Diagram alir
Setelah mendapat dan memahami referensi kemudian mulai dilakukan proses pengumpulan masalah yang dihadapi user,  mengamati  kebiasaan  user,  mencari  dan  menentukan  solusi,  dan  mulai  merancang  desain  sebagai  solusi. Setelah  itu  dilakukan  pengujian  terhadap  desain  solusi  kepada  user,  jika  user  masih  di  rasa  kesulitan  ketika memakai  desain  solusi  maka akan dilakukan perbaikan. Namun  jika user sudah berhasil dan tidak menghadapi kesulitan apapun, maka dibuatlah sebuah kesimpulan dan saran untuk proses pengembangan serta perbaikan dari penelitian ini.
Perangkat dan software yang dibutuhkan adalah :
a. Hardware dan Spesifikasi Hardware
Laptop ASUS A405U Ram 8GB Hdd 1TB + 128GB(SSD) OS Windows 10 CPU Intel Core i5-7200U, up to 3.18Hz b. Software
Adobe Xd Whimsical Google Chrome Sublime Text c. Alat Tulis
Kertas Pensil Pulpen

## 2.1 Perancangan sistem
Pada flowchart dijelaskan bagaimana jalanya proses pada website ketika digunakan oleh user, alur prosesnya mulai ketika  user  membuka  website  lalu  user  memilih  fitur  yang  dicari  untuk  mendapatkan  informasi  tentang  kantor setelah user memilih fitur menunya user bisa langsung mendapatkan informasi yang diinginkan.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896
Gambar 2. Flowchart Proses

## 3. HASIL DAN PEMBAHASAN

## 3.1 Pengumpulan Masalah Pada User
Sebelum  melakukan  perancanga  penulis  akan  melakukan  Studi  literature,  studi  literatur  dilakukan  untuk memperdalam teori permasalahan yang akan di angkat, yang bersumber dari jurnal dan internet.
Sebelum melakukan perancangan user interface penulis akan mencari tau apa saja masalah dan kebutuhan yang diperlukan  oleh  user  dengan  cara  melakukan  research,  research  dilakukan  juga  untuk  mengetahui  apasaja kebiasaan user ketika membuka website dan mencari tau fitur apa saja yang dibutuhkan oleh user dan masalah apa yang sering terjadi pada user ketika sedang menggunakan website. Research dilakukan dengan cara mewawancarai user secara langsung, agar penulis mendapatkan jawaban yang lebih banyak penulis memanfaatkan software online Google form dengan menggunakan software Google form penulis bisa mendapatkan jawaban yang lebih banyak.

## 3.2 Membuat Wirefrime sebagai solusi
Untuk mengurangi terjadinya kesalahan ketika melakukan designe dilakukan tahap awal yaitu membuat wireframe pada tahap ini juga dilakukan untuk mencari dan menentukan solusi, wireframe sendiri adalah membuat struktur dasar atau sketsa awal untuk tampilan desinge, pada tahap inilah ditentukan tata letak awal untuk tampilan website seperti tata letak fitur menu, gambar, icon, dan text. Wireframe bisa dibuat dengan menggunakan kertas atau bisa juga dibuat dengan menggunakan software whimsical.
Gambar 3 . Wireframe

## 3.3 Membuat Tampilan Hight Fidelity
Setelah proses wireframe sudah dianggap cukup  baik, lanjut  ketahap berikutnya yaitu membuat  tampilan hight fidelity tahapan ini dilakukan untuk memberikan gambaran designe yang lebih  jelas dimana pada designe hight fidelity ini mulai diberikan warna, gambar, menu, icon, dan teks. Pada tahap ini juga berfungsi untuk mempertegas tampilan  pada  website    agar  ketika  diberikan  kepada  user,  user  memahami  tampilan  yang  sudah  dibuat,  untuk membuat designe hight fidelity bisa menggunakan software figma, adobe xd, atau sketch.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896
Gambar 4. Hight Fidelity

## 3.4 Membuat Prototype
Setelah  proses  perancangan  desain  hight  fidelity   sudah  dirasa  cukup  langsung  lanjut  ketahap  berikutnya  yaitu membuat  prototype,  prototype  dibuat  untuk  memudahkan  user  dalam  memahami  tampilan  yang  sudah  dibuat. Dengan  menggunakan  prototype  user  bisa  melakukan  simulasi  interaksi  dengan  tampilan  yang  sudah  dibuat, prototype juga digunakan untuk memudahkan penulis ketika melakukan usability testing terhadap user.
Gambar 5 . Prototype

## 3.5 Coding
Tahap  coding  untuk  memembuat  tampilan  pada  website  pada  tahap  coding  ini  menggunakan  HTML,CSS  dan Framework Bootstrap 4.0, HTML digunakan untuk membuat kerangka pada website setelah kerangka dibuat lalu diperjelas dengan menggunakan CSS, CSS berfungsi  untuk  mempercantik tampilan website agar website lebih rapih dan nyaman dipandang, agar website bisa digunakan di mobile penulis menggunakan Framework Bootstrap untuk membuat website menjadi responsive dengan memanfaatkan grid yang sudah disediakan pada bootstrap.
Gambar 6 . Coding

## 3.6 Halaman Home
Halaman  home  adalah  halaman  awal  pada  website  pada  halaman  home  terdapat  banyak  fitur  yang  bisa memudahkan user dalam mencari info tentang kantor seperti About us, link terkait, foto dan video. Pada halaman home juga terdapat icon social media yang dapat klik untuk masuk langsung ke halaman social media kementerian direktorat jenderal ketenagalistrikan.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896
Gambar 7 . Halaman Home

## 3.7 Tampilan Pada Mobile
Fitur  mobile  responsive  dibuat  untuk  memudahkan  user  dalam  menggunakan  website  pada  smartphone,  fitur mobile  responsive  juga  dibuat  untuk  memudahkan  user  dalam  mencari  informasi  yang  terdapat  pada  website dengan menggunakan smartphone.

## Gambar 8 . Tampilan pada mobile

## 3.8 FeedBack Question
FeedBack  Question  dibuat  agar  user  bisa  memberikan  masukan  dan  saran  yang  bertujuan  untuk  mengetahui apasaja yang bisa dikembangkan dan diperbaiki pada prototype yang sudah dibuat.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI 10.30865/mib.v4i1.1896

## 3.9 Hasil Pengujian
Disini penulis melakukan pengujian langsung dengan cara mendatangi user dan user akan diberikan tugas untuk menggunakan prototype yang sudah dibuat, setelah user dirasa cukup ketika menggunakan prototype user akan diberikan tugas untuk memberikan penilaian tentang website tersebut apakah website sudah cukup dipahamai oleh user atau belum.
Tabel 1. Pengujian User No Pertanyaan Sangat Baik Cukup Baik Kurang Baik 1 Tampilan pada website 38.5% 61.5% - 2 Website dimengerti oleh user 46.2% 46.2% 7.7% 3 Fitur Responsive yang dibuat 53.8% 46.2% - 4 Fitur menu dapat membantu user 38.5% 46.2% 15.4%
dari pengujian yang sudah dilakukan mendapatkan hasil cukup baik 46,2%, Sangat baik 46,2%, dan kurang baik 7,7%.
Gambar 10 . Grafik Hasil Pengujian

## 4. KESIMPULAN
Dapat disimpulkan dengan adanya perancangan User Interface dan User Experience Design dapat memudahkan dan mempercepat pembuatan atau pengembangan suatu aplikasi dan website, dengan adanya UI dan UX  dalam pembuatan suatu product digital dapat memudahkan developer dalam membangun productnya sebelum dilakukan coding  dan publish ke user. Hasil yang didapat  setelah melakukan pengujian langsung kepada user adalah user sudah  cukup  paham  dengan  tampilan  website  yang  dibuat  dan  user  juga  sudah  merasa  cukup  mudah  dalam menggunakanya.  Dan  adanya  fitur  mobile  responsive  juga  diharapkan  dapat  memudahkan  user  dalam  mencari informasi  pada  website  dengan  menggunakan  smartphone.  Metode  HCD  (Humen  Centered  Designe)  dapat digunakan untuk merancang dan membuat website yang sesuai dengan kebutuhan user.

## REFERENCES
[1] N. Syahirsah, I. Aknuranda, and H. Aryadita, “Evaluasi dan Perbaikan Desain Antar Muka Pengguna Situs Talangin . com,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. Univ. Brawijaya , vol. 2, no. 12, pp. 6618–6626, 2018.
[2] I. Muslim, “Perspektif Pengguna dalam Perancangan UserInterface pada Website Digital Library,” J. Sains, Teknol. dan Ind. , vol. 13, no. 1, pp. 39–45, 2015.
[3] Y.  Firantoko,  H.  Tolle,  and  H.  M.  Az-zahra,  “Perancangan  User  Experience  Dengan  Menggunakan  Metode  Human Centered Design Untuk Aplikasi Info Calon Anggota Legislatif 2019,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 3, no. 3, pp. 2798–2806, 2019.
[4] X. Sun and A. May, “Design of the User Experience for Personalized Mobile Services,” Int. J. Hum. Comput. Interact. , vol. 5, no. 2, pp. 21–39, 2014.
[5] F. Muhammad, R. A. Nugroho, and D. Turianto N, “Analisis User Experience Untuk Tingkat Keterpilihan Smartphone Android,” Kumpul. J. Ilmu Komput. , vol. 04, no. 01, pp. 82–91, 2016.
[6] D.  Prajarini  and  D.  Sumberahayu,  “PERANCANGAN  PROTOTYPE  WEB  PROFILE  DESA  WISATA  DAN KERAJINAN GAMPLONG SLEMAN DENGAN METODE DESAIN USER EXPERIENCE,” vol. 2, no. 1, pp. 249– 259, 2018.
[7] J. Saptari, R. Iswandari, and R. Setyawati, “User Experience (UX) dalam pemanfaatan fasilitas Informal Learning Space (ILS) perpustakaan,” Berk. Ilmu Perpust. dan Inf. , vol. 14, no. 1, p. 26, 2018.
[8] D. M. Lestari, D. Hardianto, and A. N. Hidayanto, “Analysis of user experience quality on responsive web design from its informative perspective,” Int. J. Softw. Eng. its Appl. , vol. 8, no. 5, pp. 53–62, 2014.
[9] L.  D.  Farida,  “Pengukuran  User  Experience  Dengan  Pendekatan  Usability  [Kasus:  Website  Pariwisata  Di  Asia Tenggara],” Semin. Nas. Teknol. Inf. dan Multimed. , pp. 6–7, 2016.
[10]  A. Iqbal, G. Prakasa, and F. Ardiansyah, “Perancangan User Experience Aplikasi Marketplace Paket Wisata Indonesia untuk Wisatawan Lokal User Experience Design of the Indonesia Tourism Package Marketplace Application for Local Tourist,” J. Ilmu Komput. Agri-Informatika , vol. 5, no. 1, pp. 51–60, 2016.