Jurnal Ilmu Komputer dan Desain Komunikasi Visual Volume 5, Nomor 2, Desember 2020 ISSN (Cetak) : 2541-4550 ISSN (Online) : 2541-4585

## Desain UI dan UX pada Aplikasi Android Coronavirus Disease 2019 (COVID-19)
Viving Frendiana 1 , Dandun Widhiantoro 2 1,2 Program Studi Broadband Multimedia, Jurusan Teknik Elektro, Politeknik Negeri Jakarta
Jl. Prof. DR. G.A. Siwabessy, Kampus Universitas Indonesia Depok 16425
1 viving.frendiana@elektro.pnj.ac.id, 2 dandun@elektro.pnj.ac.id

## Abstrak
Infeksi  coronavirus  adalah  penyakit  yang  disebabkan  oleh  virus  corona  dan menyebabkan gejala berupa gangguan pernapasan. Virus ini kali pertama ditemukan di akhir tahun  2019  di  kota  Wuhan,  China  dan  hingga  akhir  tahun  2020  menyebar  hampir  keseluruh dunia. Untuk menekan penyebaran coronavirus diperlukan  perilaku hidup sehat seperti sering mencuci tangan dan menggunakan masker. Selain itu, dari sisi teknologi, Android merupakan operating  system  yang  banyak  digunakan  untuk  mengembangkan  aplikasi  mobile.  Adanya teknologi  aplikasi  ini  sangat  memungkinkan  digunakan  untuk  mengupdate  informasi  terbaru seputar  COVID-19,  maupun  mencegah  penyebaran  dan  proses  pelacakan.  Desain  UI  dan  UX diperlukan  dalam  pembuatan  aplikasi  android  coronavirus  disease  2019  (COVID-19). Berdasarkan  hasil  pengujian  aspek  functional  suitability  memiliki  hasil  persentase  sukses sebesar  100%  dan  hasil  perhitungan  persentase  kelayakan  adalah  95,66%,  sehingga  dapat disimpulkan bahwa aplikasi memiliki standar usability yang sangat layak.
Kata kunci — Covid-19, Coronavirus, Android, UI UX, Android Studio

## Abstract
Coronavirus infection is a disease caused by the corona virus and causes symptoms in the form of respiratory problems. This virus was first discovered at the end of 2019 in the city of Wuhan, China and until the end of 2020 it has spread to almost all over the world. To reduce the  spread  of  the  coronavirus,  healthy  habits  such  as  washing  hands  and  wearing  masks  are needed. In addition, in terms of technology, Android is an operating system that is widely used to  develop  mobile  applications.  The  existence  of  this  application  technology  makes  it  very possible  to  use  it  to  update  the  latest  information  about  COVID-19,  as  well  as  prevent  the spread and the tracking process. The UI UX design is needed in making the 2019 coronavirus disease  (COVID-19)  android  application.  Based  on  the  results  of  testing  the  functional suitability  aspect  has  a  success  percentage  of  100%.  And  the  results  of  the  calculation  of  the percentage of feasibility is 95.66%, so it can be concluded that the application has a very decent usability standard.
Keywords— COVID-19, Coronavirus, Android, UI UX, Android Studio

## 1. PENDAHULUAN
Coronavirus adalah  penyakit  yang  disebabkan  oleh  virus  corona  dan menyebabkan  gejala  berupa  gangguan  pernapasan.  Corona  virus  dapat  ditularkan  dari manusia  ke  manusia  melalui droplet yaitu  partikel  air  yang  keluar  ketika  batuk  atau bersin. Gejala coronavirus sangat bervariasi, seperti batuk kering, demam tinggi, nyeri
Jurnal Ilmu Komputer dan Desain Komunikasi Visual Volume 5, Nomor 2, Desember 2020 ISSN (Cetak) : 2541-4550 ISSN (Online) : 2541-4585
tenggorokan, sesak napas hingga gangguan pernapasan berat seperti pneumonia. Hingga kini, coronavirus telah menyebar hampir keseluruh negara di dunia (Susilo et al., 2020).
Inovasi teknologi untuk  menangani penyebaran virus corona sangat diperlukan. Android  merupakan operating  system yang  banyak  digunakan  untuk  mengembangkan aplikasi  mobile.  Android  mempunyai  pasar  yang  sangat  luas  mencakup  88%  di  dunia dan  diperkiraan  akan  terus  berkembang  (Safaat  H,  2018).  Hampir  semua  orang mempunyai smartphone android, sehingga pembuatan aplikasi android untuk membantu mencegah dan menanggulangi COVID-19 perlu dikembangkan.
Dalam  pembuatan  aplikasi  diperlukan  desain  yang  terdiri  dari User  Interface (UI)  dan User  Experience (UX). User  Interface (UI)  fokusnya  yaitu  pada  tata  letak komponen-komponen  aplikasi  dan  pemilihan  warna  yang  sesuai.  Sedangkan User Experience (UX)  lebih  berfokus  terhadap  pengalaman  pengguna  pada  saat menggunakan  aplikasi  yang  kita  buat  apakah  memudahkan  atau  menyulitkan.  Adanya teknologi  aplikasi  ini  sangat  memungkinkan  digunakan  untuk  mengupdate  informasi terbaru seputar COVID-19, maupun mencegah penyebaran dan proses pelacakan.

## 2. METODE PENELITIAN
Pada penelitian ini menggunakan metode pengujian perangkat lunak ISO 25010 (Ridwan  &  Prasetyawan,  2017).  Tahapan  pengembangan  multimedia terdiri  dari  lima tahap yaitu: konsep, perancangan, pengumpulan bahan, pembuatan dan pengujian. 2.1 Konsep
Pada  penelitian  ini  akan  dikembangkan  sebuah  aplikasi  android  menggunakan android  studio  yang  berisi  informasi-informasi  mengenai  COVID-19.  Informasi- informasi tersebut berupa pilihan-pilihan menu antara lain: Aktifkan Bluetooth , Periksa Kesehatan  Mandiri, Chat Dokter  Online,  Belanja  Alat  Kesehatan,  Tips  Terhindar COVID-19,  Info Update COVID-19,  Nomor  Darurat,  dan Share .  Berikut  adalah spesifikasi  software  yang  digunakan  untuk  pembuatan  aplikasi  Android,  yang ditunjukkan pada Tabel 1.
Tabel 1 Spesifikasi Software Software Android Studio Version 3.6.2 Runtime Version 1.8.0_212-release-1586-b04 amd64 VM OpenJDK 64-Bit Server VM Language Java Min SDK API 28: Android 9.0 (Pie) Emulator Nexus 5X API 28

## 2.2 Perancangan
Dalam tahap perancangan akan dibuat sebuah struktur navigasi yang merupakan hubungan  antar  menu.  Struktur  navigasi  dapat  mempermudah  dalam  pembuatan aplikasi.

## 2.3 Pengumpulan Bahan
Pada  tahap  ini  dilakukan  pengumpulan  bahan  berupa  gambar, icon ,  materi, background dan  objek  yang  diperlukan  dalam  pembuatan  aplikasi  android.  Bahan
Jurnal Ilmu Komputer dan Desain Komunikasi Visual Volume 5, Nomor 2, Desember 2020 ISSN (Cetak) : 2541-4550 ISSN (Online) : 2541-4585
diambil  dari  fitur  yang  tersedia  pada  Android  Studio  dan  juga  bersumber  dari website yang menyediakan gambar secara gratis tanpa copyright .

## 2.4 Pembuatan
Pada tahap ini, perancangan yang sudah dilakukan kemudian diimplementasikan menjadi script program  pada  Android  Studio.  Desain layout pada  Android  Studio menggunakan  bahasa  xml,  sedangkan  untuk  pemberian  aksi  aktivitas  menggunakan bahasa pemrograman java.

## 2.5 Pengujian
Pengujian  dilakukan  sesuai  dengan  standar  ISO  25010.  Berikut  ini  merupakan teknik analisis data yang digunakan dalam beberapa pengujan yang dilakukan.
2.5.1 Aspek Functional  Suitability /  Pengujian Functionality, pengujian  aspek  ini menggunakan test  case dengan  skala  pengukuran  Gutmann  dengan  alternatif  jawaban sukses  dan  gagal.  Setelah  hasil  pengujian  didapat  kemudian  dibandingkan  dengan kriteria  yang  terdapat  pada  dokumen Testing  Criteria  for  Android  Application yang dikembangkan oleh AQuA. Kriteria yang digunakan adalah kriteria functionality sanity check . Kriteria tersebut dapat dilihat pada Tabel 2.
Tabel 2. Standar aspek kualitas functional suitability

## Kriteria Lolos
Semua fungsi utama aplikasi seperti algoritma, perhitungan, pengukuran, pembagian skor, dan lain sebagainya harus berjalan dengan benar.
Pengujian  aspek  kualitas functionality dilakukan  dengan  cara  melakukan  tes pada  setiap  menu  yang  terdapat  pada  aplikasi  android  yang  sudah  dibuat.  Hal  ini bertujuan untuk membuktikan bahwa apakah aplikasi dapat berjalan dengan baik.
2.5.2 Aspek  Usability ,  pada  pengujian  aspek usability ,  teknik  analisis  data  dilakukan dengan memberikan penilaian terhadap setiap jawaban responden pada kuesioner USE oleh  Arnold  M.  Lund  dengan  jumlah  10  pertanyaan,  dengan  menggunakan  interval skala likert seperti yang disajikan pada Tabel 3.
Tabel 3. Tabel interval skala likert Alternatif Jawaban Nilai Sangat Tidak Setuju 1 Tidak Setuju 2 Ragu-Ragu 3 Setuju 4 Sangat Setuju 5
Setelah  diberikan  penilaian  kemudian  dilakukan  penghitungan  persentase sebagai berikut:
𝑃𝑒𝑟𝑠𝑒𝑛𝑡𝑎𝑠𝑒 (%) = 𝑁𝑖𝑙𝑎𝑖 𝑦𝑎𝑛𝑔 𝑑𝑖𝑝𝑒𝑟𝑜𝑙𝑒ℎ
𝑁𝑖𝑙𝑎𝑖 𝑚𝑎𝑘𝑠𝑖𝑚𝑎𝑙 𝑥 100%
Jurnal Ilmu Komputer dan Desain Komunikasi Visual Volume 5, Nomor 2, Desember 2020 ISSN (Cetak) : 2541-4550 ISSN (Online) : 2541-4585
Data yang didapatkan kemudian dikonversi berdasarkan Tabel 4.
Tabel 4. Tabel interprestasi skor Angka (%) Klasifikasi 0 – 20 Sangat Tidak Baik 21 – 40 Tidak Baik 41 – 60 Cukup 61 – 80 Baik 81 – 100 Sangat Baik
Berikut formulir tanggapan dengan pertanyaan ditunjukkan pada Tabel 5.
Tabel 5. Daftar Pertanyaan Formulir Tanggapan No Pertanyaan 1 2 3 4 5 1 Tampilan aplikasi ini menarik
2 Fitur dan tata letak pada aplikasi ini mudah digunakan
3 Aplikasi ini mudah dipahami
4 Aplikasi ini nyaman untuk digunakan
5 Aplikasi ini sangat informatif
6 Aplikasi ini bermanfaat untuk mengetahui informasi COVID-19
7 Aplikasi ini memudahkan saya
8 Dengan Aplikasi ini informasi COVID-
19 lebih mudah diakses
9 Menu/Halaman pada Aplikasi ini sudah lengkap
10 Saya puas dengan keseluruhan tampilan dan fitur Aplikasi ini
Keterangan : 1 = Sangat Tidak Setuju 2 = Tidak Setuju 3 = Cukup Setuju 4 = Setuju
5 = Sangat Setuju
Setelah  merancang  pertanyaan  angket,  kemudian  menyebarkannya  kepada  12 responden. Berdasarkan hasil jawaban responden, kemudian dihitung total skor dan skor kriteria interpretasi. Setelahnya data dianalisis secara deskriptif berdasarkan interpretasi skornya.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Tampilan UI UX Aplikasi Android
Gambar 1. Belanja Kesehatan
Pada  Menu  Belanja  Kesehatan  seperti  pada  gambar  1  terdapat  beberapa item perlengkapan pelindung COVID yang bisa dipesan antara lain : masker, hand sanitizer, face  shield,  tisu  kering,  tisu  basah,  sarung  tangan  dan  alat  pelindung  diri  (APD). Pembuatan  Menu  Belanja  Kesehatan  menggunakan  xml  dengan  nama  file activity_menu.xml  dan  viewgroup  berupa  LinearLayout.  Dalam  LinearLayout  terdapat beberapa TextView dan ListView
<? xml version ="1.0" encoding ="utf-8" ?> < LinearLayout ...
< TextView ... < TextView
...
< ListView ... </ ListView > </ LinearLayout >
(a) (b)
Gambar 2. Pilihan Masker (a) dan Hand Sanitizer (b)
Gambar  2  merupakan    tampilan  apabila item dipilih. Item yang  dipilih  bisa dimasukkan  kedalam  keranjang  untuk  selanjutnya  dilakukan  proses  pembelian. Pembuatan Menu Pilihan menggunakan xml dengan nama file cart_list_activity.xml dan list_item.xml. Pada file cart_list_activity.xml terdapat viewgroup berupa RelativeLayout .  Dalam RelativeLayout tersebut  terdapat  beberapa TextView , ListView dan CardView .  Sedangkan  pada  file  list_item.xml  terdapat viewGroup LinearLayout yang didalamnya diisi beberapa TextView dan ImageView .
(b) (b)
Gambar 3. Daftar Keranjang (a) dan Data Order (b)
Jurnal Ilmu Komputer dan Desain Komunikasi Visual Volume 5, Nomor 2, Desember 2020 ISSN (Cetak) : 2541-4550 ISSN (Online) : 2541-4585
Gambar  3a  merupakan list  item daftar  keranjang.  Dari  daftar  keranjang  ini, selanjutnya  dapat  dilakukan  proses  pemesanan  barang.  Sedangkan  gambar  3b merupakan  data  pemesan  yang  perlu  diinput  untuk  berikutnya  dilakukan  pemrosesan kirim pesanan.
Sedangkan  gambar  5  menjelaskan  informasi update mengenai  situasi  jumlah kasus  COVID-19  di  Indonesia  perharinya.  Info update meliputi  jumlah  yang terkonfirmasi, yang sedang dalam perawatan, yang sudah sembuh, dan yang meninggal. Info update ini datanya di publish setiap hari.

## Gambar 5. Info

## 3.2 Pengujian Functional Suitability
Dari Tabel 6 membuktikan bahwa keseluruhan fungsi  yang diuji pada aplikasi berjalan dengan baik. Kemudian hasil pengujian dihitung dengan menggunakan rumus feature  completeness sebagai  berikut  dengan  I  sebagai  jumlah  menu  yang diimpelementasikan dan P sebagai jumlah menu yang berhasil sehingga:
𝑋 = I P 𝑋 = 13 13 𝑋 =1
Tabel 6. Hasil pengujian functionality No Nama Test Hasil 1 Splashscreen Berjalan dengan baik 2 Home Berjalan dengan baik 3 Belanja Kesehatan Berjalan dengan baik 4 Pilihan Masker Berjalan dengan baik 5 Pilihan Hand Sanitizer Berjalan dengan baik 6 Daftar Keranjang Berjalan dengan baik 7 Data Order Berjalan dengan baik
No Nama Test Hasil 8 Zona Covid Berjalan dengan baik 9 Detail Zona Merah Berjalan dengan baik 10 Tips Berjalan dengan baik 11 Info Berjalan dengan baik
Berdasarkan suitability  metric menurut  ISO  20510  bahwa  apabila  nilai  X  yang diperoleh  mendekati  angka  satu  maka  dapat  dikatakan  baik.  Berdasarkan  hasil pengujian  aspek functional  suitability memiliki  hasil  persentase  sukses  sebesar  100%. Maka  dapat  diambil  kesimpulan  bahwa  hasil  pengujian functional  suitability telah sesuai  dengan  kriteria functional  sanity  check yang  dikembangkan  oleh  AQuA  ( App Quality Alliance ).

## 3.4 Pengujian Usability
Pada  pengujian  ISO  25010  ini,  perhitungannya  menggunakan  instrumen kuesioner  jenis  checklist  dengan  skala  Likert.  Pada  tabel  7  menampilkan  hasil  nilai pengujian Usability yang didapat dari responden. Berdasarkan pengujian usability yang telah dilakukan pada 12 responden menggunakan kuisioner maka hasilnya dapat dilihat sebagai berikut:
Persentase skor = 4,7833 5 x 100% = 95,66%
Tabel 7. Hasil Pengujian Usability Jumlah responden Nilai yang didapatkan Nilai Maksimum 12 4,7833 5
Hasil  perhitungan  persentase  kelayakan  adalah  95,66%,  sehingga  dapat disimpulkan bahwa aplikasi memiliki standar usability yang “Sangat Layak”.

## 4. KESIMPULAN
Berdasarkan hasil analisis data dan pembahasan, maka disimpulkan sebagai berikut :
1. Desain UI UX pada menu-menu pada aplikasi android berhasil dibuat
2. Berdasarkan  hasil  pengujian  aspek  functional suitability memiliki  hasil  persentase sukses sebesar 100%.
3. Hasil perhitungan persentase kelayakan adalah 95,66%, sehingga dapat disimpulkan bahwa aplikasi memiliki standar usability yang sangat layak.

## 5. SARAN
Perlu dilakukan penelitian lebih lanjut mengenai database yang bisa terintegrasi dengan database aplikasi COVID-19 milik pemerintah atau lembaga resmi. Dan untuk penelitian  berikutnya  disarankan  untuk  mengkaji activity pada  android  menggunakan bahasa Kotlin yang lebih ringkas.

## UCAPAN TERIMA KASIH
Penelitian  ini  tidak  akan  berhasil  tanpa  dukungan  berbagai  pihak.  Penulis mengucapkan banyak terima kasih kepada UP2M PNJ yang telah membiayai penelitian ini.

## DAFTAR PUSTAKA
Ridwan,  M.,  &  Prasetyawan,  P.  (2017).  Rancang  Bangun  Aplikasi  Permainan Adventure of Frunimal Untuk Edukasi Bahasa Inggris Berbasis Android. Simetris :
Jurnal Teknik Mesin, Elektro Dan Ilmu Komputer , 8 (2), 763.
https://doi.org/10.24176/simet.v8i2.1599
Safaat  H,  N.  (2018). Pemrograman  Aplikasi  Mobile  Berbasis  Android  Revisi  Ketiga . Informatika.
Susilo,  A.,  Rumende,  C.  M.,  Pitoyo,  C.  W.,  Santoso,  W.  D.,  Yulianti,  M., Herikurniawan,  H.,  Sinto,  R.,  Singh,  G.,  Nainggolan,  L.,  Nelwan,  E.  J.,  Chen,  L. K., Widhani, A., Wijaya, E., Wicaksana, B., Maksum, M., Annisa, F., Jasirwan, C.
O.  M.,  &  Yunihastuti,  E.  (2020).  Coronavirus  Disease  2019:  Tinjauan  Literatur Terkini. Jurnal Penyakit Dalam Indonesia , 7 (1), 45. https://doi.org/10.7454/jpdi.v7i1.415