Jurnal Teknik Informatika (JUTIF) DOI: https://doi.org/10.52436/1.jutif.2024.5.4.1932 Vol. 5, No. 4, August 2024, pp. 971-980 p-ISSN: 2723-3863
e-ISSN: 2723-3871

## DESIGNING UI/UX FOR A MEDITERRANEAN DIET APP TO MINIMIZE TYPE 2 DIABETES RISK
Farah Danisha Salam *1 , Endang Wahyu Pamungkas 2
1,2 Informatics, Faculty of Communication and Informatics and Universitas Muhammadiyah Surakarta, Indonesia Email: 1 L200204017@student.ums.ac.id , 2 ewp123@ums.ac.id
(Article received: March 15, 2024; Revision: April 18, 2024; published: July 29, 2024)

## Abstract
The industrial revolution has had a significant impact in health field, where the crucial disease in Indonesia is Type 2 Diabetes Mellitus (T2DM). One of the effective ways to minimize the increase in T2DM is by developing a diet application using Mediterranean diet Method. The Mediterranean diet involves controlling certain types of foods and beverages, characterized by high intake of fruits, vegetables, whole grains, nuts, legumes, moderate consumption of fish, low intake of red/processed meat, and low intake of high-fat dairy products. In this research and design, the Author applied User Centered Design (UCD) method, which encompasses User Interface (UI) and User Experience (UX). The author also applied the UX law (Hick’s Law, Law of Proximity, dan Aesthetic-usability Effect) on designing the user interface. This article included a A/B Testing and System Usability Scale (SUS) result that  showed  an  interesting  findings,  where  the  design  that  achieved  a  higher  success  rate  had  a  lower  user satisfaction score and vice versa. However, both designs have an acceptable score and C grade.
Keywords : Mediterranean  Diet,  Type  2  Diabetes  Mellitus,  User  Centered  Design  User  Interface,  User Experience.

## PERANCANGAN UI/UX APLIKASI DIET MEDITERANIA UPAYA MEMINALISIR TERKENA PENYAKIT DIABETES MELITUS TIPE 2

## Abstrak
Revolusi industri saat ini telah melahirkan banyak dampak ke bidang kesehatan, dimana penyakit yang menjadi masalah  krusial  di  Indonesia  yaitu  Diabetes  Melitus  Tipe  2  (DMT2).  Salah  satu  cara  efektif  dalam  upaya meminimalisir kenaikan angka penderita DMT2 adalah membuat aplikasi diet dengan metode diet Mediterania. Diet  Mediterania  merupakan  metode  diet  dengan  mengontrol  beberapa  jenis  makanan  dan  minuman,  dengan memiliki  karakteristis  yaitu  tinggi  buah,  sayur,  biji-bijian,  kacang-kacangan,  ikan  sedang,  rendah  daging merah/olahan,  dan  rendah  produk  susu  tinggi  lemak.  Dalam  penelitian  dan  perancangan  aplikasi  ini,  penulis menggunakan metode User Centered Design (UCD), dimana memuat antarmuka pengguna (UI) dan pengalaman pengguna  (UX).  Penulis  juga  menerapkan  hukum  UX  ( Hick’s  Law,  Law  of  Proximity,  dan  Aesthetic-usability Effect )  pada  perancangan  antarmuka  pengguna.  Artikel  ini  memuat  hasil  pengujian  A/B Testing dan System Usability  Scale (SUS)  yang  menunjukan  hasil  yang  sangat  menarik,  dimana  desain  yang  memberikan  tingkat keberhasilan lebih tinggi  memiliki tingkat  kepuasan pengguna  yang rendah dan sebaliknya.  Akan tetapi, kedua desain mendapatkan penilaian acceptable dan C grade .
Kata  kunci : Antarmuka  Pengguna,  Diabetes  Melitus  Tipe  2,  Diet  Mediterania,  Pengalaman  Pengguna,  User Centered Design.

## 1. PENDAHULUAN
Revolusi  industri  saat  ini  telah  melahirkan banyak  dampak  ke  berbagai  bidang,  salah  satunya yaitu  bidang  kesehatan.  Di  dunia  serba  instan  ini, masyarakat  kurang  memperhatikan  kesehatan  diri. Hal  ini  menyebabkan  meningkatnya  angka  diabetes di  Indonesia.  Pada  tahun  2020,  Kementrian Kesehatan merilis data penderita Diabetes tahun 2019 dan  perkiraan  tahun-tahun  berikutnya.  Indonesia
menempati  urutan  ke-7  dengan  jumlah  ±  10,7  juta penderita diabetes [1]. Salah satu jenis diabetes yang dapat dihindari sejak dini yaitu Diabetes Melitus Tipe 2.  Diabetes  Melitus  Tipe  2  merupakan  salah  satu penyakit  metabolis  yang  disebabkan  oleh  genetik, gaya hidup, dan(atau) lingkungan [2]. Gaya hidup dan lingkungan  yang  sehat,  dapat  menghindarkan masyrakat  dari  DMT2.  Salah  satu  caranya  yaitu dengan melakukan diet. Menurut ahli Siregar (2009),
972 Jurnal Teknik Informatika (JUTIF) , Vol. 5, No. 4, August 2024, pp. 971-980
Diatia (Yunani)  atau  diet  merupakan  perilaku bagaimana  mengatur  makan  dan  minum  yang dikonsumsi  seseorang  secara  terus-menerus  untuk menjaga kesehatan [3]. Terdapat banyak metode diet yang  dapat  digunakan  dengan  kelebihan  dan kekurangan  masing-masing.  Akan  tetapi,  saat  ini yang  menjadi  trend  dan  memiliki  efektifitas  tinggi yaitu Diet Mediterania [4], [5], [6].
Diet  Mediterania  merupakan  metode  untuk mengontrol  beberapa  jenis  makanan  dan  minuman yang  pada  awalnya  dilakukan  oleh  penduduk Mediteranian  [7].  Berdasarkan  hasil  penelitian  yang berjudul  “ The  Role  of  a  Mediterranean  Diet  in Prevention  of  Type  2  Diabetes  Mellitus ”  [8],  dapat disimpulkan  bahwa  melakukan  Diet  Mediterania dalam  jangka  Panjang  direkomendasikan  untuk pencegahan  Diabetes  Melitus  Tipe  2  karena karakteristik  dari  Diet  Mediterania  yaitu  memiliki tingkat  tinggi  dalam  konsumsi  buah,  sayuran,  biji- bijian,  kacang-kacangan,  jonsumsi  ikan  (dalam tingkat sedang), dan meminimalisir konsumsi daging merah, daging olahan, dan produk susu tinggi lemak. Melakukan  diet  Mediterania  akan  terasa  efisien  dan efektif  dengan  adanya  sebuah  aplikasi  dengan  fitur- fitur yang menunjang diet Mediterania.
User Interface (UI) dan User Experience (UX) merupakan  komponen  yang  diperlukan  dalam membangun sebuah aplikasi. UI merupakan tampilan sistem  dimana  berhubungan  atau  berinteraksi langsung  dengan  pengguna  [9],  sedangkan  UX merupakan pengalaman pengguna dalam menggunakan sistem yang dimana sebagai perancang perlu  memperhatikan  pengguna  dari  segi  emosi  dan pikiran  pengguna  [10].  Dalam  artikel  ini  memuat perbandingan  antara  dua  UI/UX  yaitu  desain  A (minimalis dan warna yang sederhana) dan desain B (ornamental  atau  memuat  ilustrasi  dan  perpaduan beberapa  warna).  Karena  pengguna  yang  beragam (dari  segi  usia,  jenis  kelamin,  dan  aktivitas pengguna), hal tersebut diperlukan untuk menghasilkan pilihan terbaik.
User Interface (UI) dan User Experience (UX) memiliki  elemen  yang  berbeda.  Elemen  UI  adalah warna,  ukuran  teks,  jenis  teks,  gambar,  tombol,  dan tata  letak  (semua  yang  berhubungan  dengan  visual dan  interaksi  dengan  pengguna)  [11].  Elemen  UX adalah  kemudahan  dalam  penggunaan  dan  kualitas dari  informasi.  UX  melibatkan  hukum  UX  ( Law  of UX ),  dimana  hukum  ini  memberikan  praktis  terbaik yang  dapat  digunakan  desainer  dalam  membuat antarmuka  pengguna  [12].  Hukum  UX  yang  akan menjadi  acuan  dalam  peracangan  UX  yaitu Hick’s Law (waktu  yang  ditempuh  pengguna  dalam mengambil  keputusan)  [13], Law  of  Proximity (pengelompokan  objek  atau  objek  yang  berdekatan) [14],  dan Aesthetic-usability  Effect (pembuatan desain  yang  estetis)  [15],  [16].  Perancangan  UI/UX menggunakan  alat  atau  media  yaitu  Figma.  Figma merupakan  salah  satu  alat  desain  yang  efektif  dan efisien yang digunakan oleh UI/UX desainer [17].
Metode  yang  digunakan  dalam  merancang UI/UX  pada  artikel  ini  yaitu User  Centered  Design (UCD)  dimana  metode  ini  memfokuskan  penulis dalam  memvalidasi  masalah  yang  ada  terhadap pengguna.  Sehingga  aplikasi  yang  dirancang  akan berguna  dan  sesuai  dengan  masalah  yang  sedang dihadapi [18].
Pengujian  UI/UX  sangat  diperlukan  agar memvalidasi  bahwa  perancangan  yang  dibuat  telah memberikan kepuasan terhadap pengguna. Alat yang akan  digunakan  yaitu  Useberry.  Useberry  adalah platform  yang  digunakan  para  UX  Designer  dalam menganalisa hasil perancangan [19]. A/B Testing dan System Usability Scale merupakan metode yang akan digunakan dalam pengujian. A/B Testing merupakan metode  pengujian  yang  membandingkan  dua  jenis desain yang berbeda akan tetapi memiliki konsep atau informasi  yang  sama  [20].  Pengujian  ini  diperlukan untuk  memberikan  hasil  akhir  yang  terbaik  dari pengalaman  pengguna.  SUS  merupakan  metode pengujian  untuk  mengukur  tingkat  kepuasan pengguna ( satisfaction ). Pengguna akan memberikan nilai berdasarkan 10 pertanyaan yang diberikan. Nilai total  dari  SUS  memiliki  tingkatan/artian  seperti acceptable, adjective , dan grade [21].
Artikel  ini  memuat  seluruh  hasil  penelitian mengenai  opini  responden  mengenai  kesehatan  diri dan  diet  mediterania,  serta  hasil  pengujian  A/B testing dan SUS.

## 2. METODE PENELITIAN
Pada proses perancangan, penulis menggunakan metode User Centered Design (UCD), dimana tertera pada  gambar  14  memiliki  tahapan  yaitu  penelitian (research), merancang ide (concept ideation), desain (design), dan pengujian (testing).
Gambar 1. Design system
2.1. Penelitian ( Research )
Tahap penelitian melibatkan pengumpulan data yang  dilakukan  dengan  menggunakan  alat  Google
Form.  Pada  tabel  1  terdapat  5  pertanyaan  yang mencakup tentan  g  olahraga,  diet,  dan  Diabetes Melitus Tipe 2. Target responden dari penelitian  ini yaitu  berjenis  kelamin  perempuan  dan  laki-laki, berumur 17-60 tahun, dan tidak memiliki batasan dari sisi pekerjaan maupun latar belakang.
Tabel 1. Pertanyaan yang diberikan kepada responden No. Pertanyaan Jenis jawaban 1. Apakah  kamu  termasuk  orang  yang aware dengan kesehatan diri? Ya / tidak
2.
Apakah kamu atau keluargamu memiliki riwayat  penyakit  Diabetes  Melitus  Tipe 2? Ya / tidak 3. Apakah  kamu  mengetahui  tentang  diet Mediterrania? Ya / tidak 4. Seberapa sering kamu berolahraga? Pilihan 5. Menurutmu, definisi diet itu seperti apa? Opini
2.2. Merancang Ide ( Concept Ideation)
Tahapan ini merupakan tahapan merancang ide dari  hasil Research .  dimana  mmembentuk  konsep awal  seperti  nama  aplikasi,  logo,  warna,  konsep desain  atau  design  principle  (menetapkan  hukum UX),  menentukan  fitur  utama,  dan  pembuatan  user- flow [22].

## 2.3. Desain ( Design)
Setelah  merancang  ide  yaitu  tahap  desain, dimana  realisasi  dari  rancangan  ide  menjadi high- fidelity (tampilan secara utuh yang memiliki warna). Dalam  pembuatan high-fidelity menerapkan  hukum UX, yaitu Hick’s Law , Aesthetic-usability Effect ,  dan Law of Proximity . Sehingga setiap aspek atau elemen dari  kedua  desain  harus  mempertimbangkan  setiap hukum  UX yang  digunakan.  Penulis  menggunakan media  atau  alat  yaitu  Figma.  Tahapan  ini  juga melibatkan pembuatan purwarupa (rupa awal aplikasi dimana  seluruh  desain  saling  berhubungan  atau berkoneksi) yang akan digunakan sebagai pengujian [23].

## 2.4. Pengujian ( Testing)
Pada  tahapan  pengujian  menggunakan  dua metode yaitu A/B Testing dan System Usability Scale dan  terdapat  tiga  jenis  titik  keberhasilan  yang  ingin dicapai,  yaitu Learnibility (dilihat  berdasarkan success rate), Efficiency (dilihat berdasarkan rata-rata waktu  yang  dihabiskan),  dan Satisfation (kepuasan pengguna).  Syarat  pengujian  yaitu  responden  harus menggunakan  smartphone  dan  tidak  memiliki batasan usia maupun jenis kelamin.

## 3. HASIL DAN PEMBAHASAN

## 3.1. Contoh Sub-Bab Pertama
Hasil dari penelitian terdapat 51 responden yang telah  menjawab  pertanyaan  dari  tabel  1.  Berikut jawaban  dari  lima  pertanyaan  yang  dibagi  menjadi tiga jenis jawaban.
Tabel 2. Jawaban responden berdasarkan jawaban ya atau tidak .
Pertanyaan Ya Tidak Apakah  kamu  termasuk  orang  yang aware dengan kesehatan diri? 44 7 Apakah  kamu  mengetahui  tentang  diet Mediterrania? 8 43 Apakah  kamu  atau  keluargamu  memiliki riwayat penyakit Diabetes Melitus Tipe 2? 19 32
Berdasarkan  hasil  penelitian  pada  Tabel  2, ditemukan  bahwa  sebanyak  82%  (44  orang)  dari responden menunjukkan kepedulian terhadap kesehatan  diri  mereka.  Namun,  analisis  lebih  lanjut pada  Tabel  3  dan  Tabel  4  menunjukkan  bahwa olahraga  jarang  dilakukan  oleh  sebagian  besar responden  dan  masih  banyak  responden  yang memiliki  mispersepsi  dengan  makna  diet.  Hal  ini terjadi disinkronisasi antara pendapat dan pernyataan responden  mengenai  kepedulian  terhadap  kesehatan diri,  serta  kurangnya  edukasi  mengenai  arti  dan manfaat utama diet.
Tabel 3. Jawaban responden berdasarkan pilihan. Pertanyaan Tidak pernah (dalam jangka waktu setahun) Jarang (sebulan sekali) Lumayan sering ( >10x perbulan) Sering (setiap hari) Seberapa sering kamu berolahraga? 4 27 7 17 Tabel 4. Jawaban responden berdasarkan jawaban opini pribadi. Pertanyaan Mengurangi Defisit Merubah/mengubah Menjaga, megatur, mengontrol, membatasi Menurutmu, definisi diet itu seperti apa? 4 27 7 17
Tabel  2  menampilkan  bahwa  terdapat  19 responden  (37%)  atau  keluarga  responden  yang memiliki  riwayat  DMT2  dan  32  responden  (63%) tidak  memiliki  riwayat  penyakit  DMT2.  Dari  data tersebut, walaupun DMT2 belum bisa disembuhkan, para  pengidap  dapat  melakukan  kontrol  kesehatan diri  dengan  cara  melakukan  diet  [24].  Serta  bagi responden yang tidak menderita, dapat mencegahnya sejak dini. Hal ini juga berhubungan dengan data pada Tabel  1  (baris  2)  dimana  kurangnya  edukasi
mengenai  diet  Mediterrania  karena  terdapat  43 responden yang tidak mengetahui.
Berdasarkan  hasil  penelitian  di  atas,  cukup menjadi  alasan  dan  acuan  utama  penulis  dalam merancang UI/UX diet Mediterrania.

## 3.2. Merancang Ide
Penulis  membuat  sebuah design  system pada gambar 1 yang terdiri atas warna, logo, dan font (gaya huruf).  Fitur  utama  dari  aplikasi  ini  yaitu  Utama

## 974
Jurnal Teknik Informatika (JUTIF) , Vol. 5, No. 4, August 2024, pp. 971-980
(home),  makan  (mengontrol  makanan  pengguna), olahraga  (mengontrol  kalori  yang  terbakar),  gula darah (mengontrol tingkat gula darah). Akan terdapat dua desain berbeda untuk  menguji Hukum  Law dan
mendapatkan desain terbaik. Desain A menggunakan gaya  minimalis  sedangkan  desain  B  menggunakan gaya  ilustrasi.  Pada  Gambar  2  terdapat user  flow sebagai alur dari aplikasi.
Gambar 1. Design system
Gambar 2. User flow

## 3.3. Desain
a. Daftar dan On Boarding
Gambar 3 dan Gambar 4 merupakan fitur daftar dan on  boarding .  Penulis  menerapkan  dua  desain yang berbeda, yaitu pada tata letak. Pada Gambar 3, terlihat tata letak yang cenderung padat dengan objek yang  menyatu  satu  sama  lain,  menciptakan  kesan kepadatan informasi. Sementara itu, pada Gambar 4,
setiap pertanyaan disusun secara terpisah, memberikan  ruang  antara  tiap  elemennya.    Kedua desain  menerapkan hukum UX Hick’s Law (Gambar 3 menghabiskan waktu yang lebih cepat dan Gambar 4  waktu  yang  lebih  lama)  dan Aesthetic-usability Effect .  Untuk  penerapan Law  of  Proximity hanya diterapkan  pada  Gambar  3,  guna  memberikan perbedaan tingkat keberhasilan yang lebih signifikan kepada kedua desain.
Gambar 4. Desain B: Daftar dan On Boarding

## b. Utama
Gambar  5  dan  Gambar  6  merupakan  tampilan utama  ketika  pengguna  berhasil  masuk  ke  dalam aplikasi.  Pada  kedua  desain,  penulis  menerapakan dua tata letak yang berbeda. Gambar 5 memiliki tata letak vertikal sedangkan gambar 6 memiliki tata letak horizontal  di  setiap  section.  Pada  bagian  artikel (Tahukah  anda),  penulis  membuat  perbedaan  antara desain  A dan desain B,  yaitu  setiap section terdapat sub-menu pada  desain  A sedangkan  pada  desain  B setiap section menuju  artikel  sesuai  dengan  judul. Penulis  menerapkan  hukum  UX Hick’s  Law (Gambar 5 menghabiskan  waktu yang lebih lama dan Gambar 6 waktu yang lebih cepat), Law of Proximity dan Aesthetic-usability Effect .
Gambar 5. Desain A: Utama

## Gambar 6. Desain B: Utama

## c. Makan
Gambar  7  dan  Gambar  8  (fitur  makan)  adalah menu  yang  krusial  pada  perancangan  ini,  dimana pengguna mengontrol seluruh asupan di menu makan. Gambar 7 memiliki tata letak vertikal dan horizontal di  setiap  section  dan  desain  cenderung  clean sedangkan  gambar  8  memiliki  tata  letak  hanya vertikal. Penulis menerapkan hukum UX Hick’s , Law
of Proximity dan Aesthetic-usability Effect . Perbedaan  pada  kedua  desain  ada  pada  letak penyampaian  informasi  makanan,  dimana  desain  A memberikan  informasi  kalori,  lemak,  karbohidrat, dan protein total secara terpisah sedangkan desain B tidak terpisah.
Gambar 7. Desain A: Makan
Gambar 8. Desain B: Makan

## d. Gula Darah
Gambar  9  dan  Gambar  10  (fitur  gula  darah) dapat  digunakan  oleh  penderita  atau  non-penderita diabetes.  Perbedaan  desain  A  dan  desain  B  yaitu desain A memiliki menu tersendiri sedangkan desain B  (fitur  gula  darah)  tergabung  pada  fitur  makanan. Alasan utama dari perbedaan ini yaitu ingin menguji apakah lebih efisien atau tidak jika fitur gula darah di pisah.  Karena  pemeriksaan  gula  darah  biasanya dilakukan  saat  sebelum  dan(atau)  setelah  makan. Penulis  menerapkan  hukum  UX Hick’s dan Aesthetic-usability Effect . Law of Proximity digunakan  secara  spesifik  digunakan  pada  desain  B (gabungan antara fitur makan dan gula darah).
Gambar 9. Desain A: Gula darah
Gambar 10. Desain B: Gula darah

## e. Olahraga
Dalam  menjaga  kesehatan,  penting  untuk menjaga  keseimbangan  antara  gaya  hidup  sehat  dan olahraga  teratur.  Pada  Gambar  11  dan  Gambar  12 (fitur  olahraga)  pada  aplikasi  ini  bertujuan  untuk memantau  jenis  olahraga  apa  saja  yang  telah dilakukan  oleh  pengguna.  Perbedaan  yang  terlihat antara Gambar 11 dan Gambar 12 adalah pendekatan desain yang berbeda.
Pada  Gambar  11,  terlihat  desain  yang  lebih minimalis dengan fokus pada elemen-elemen utama, menciptakan  tampilan  yang  bersih  dan  sederhana. Namun,  alur  yang  disajikan  dalam  Gambar  11 cenderung  lebih  panjang,  karena  pengguna  harus melakukan beberapa langkah untuk mengisi olahraga. Di  sisi  lain,  Gambar  12  menampilkan  desain  yang lebih  berwarna  dan  berilustrasi,  menambahkan elemen  visual  yang  menarik.  Meskipun  begitu,  alur
dalam  Gambar  12  terlihat  lebih  padat  karena banyaknya  informasi  yang  disajikan  dalam  satu tampilan.  Penulis  menerapkan  hukum  UX Hick’s , Law of Proximity dan Aesthetic-usability Effect .
Gambar 11. Desain A: Gula darah
Gambar 12. Desain A: Gula darah.

## 3.4. Pengujian
Tahap  pengujian  menggunakan  Useberry  telah mencakup beberapa fitur penting dari aplikasi, yaitu Daftar dan On Boarding (F1), halaman  utama/home (F2), fitur makan (F3), fitur gula darah (F4), dan fitur olahraga  (F5).  Pengujian  ini  dilakukan  kepada  total 30  partisipan,  terdiri  dari  16  laki-laki  dan  11 perempuan,  dengan  rentang  usia  dari  21  hingga  52 tahun.  Pengujian  ini  menggunakan  metode  A/B Testing dan System Usability Scale (SUS).
Tabel 5. Hasil A/B Testing Desain A Umur/JK Desain A F1 F2 F3 F4 F5 SUS Score Done Time Done Time Done Time Done Time Done Time R1 19/L ✓ 18d ✓ 6d ✓ 3d ✓ 11d ✓ 12d 45 R2 20/P ✓ 18d ✓ 4d ✓ 5d ✓ 9d ✓ 11d 100 R3 21/P ✓ 55d ✓ 20d ✓ 18d ✓ 20d ✓ 26d 90 R4 22/L ✓ 45d ✓ 13d ✓ 9d ✓ 18d ✓ 20d 45 R5 23/L ✓ 18d ✓ 4d ✓ 32d ✓ 7d ✓ 10d 42.5 R6 21/L ✓ 31d ✓ 8d ✓ 5d ✓ 8d ✓ 8d 72.5 R7 22/L ✕ 45d ✓ 5d ✓ 24d ✓ 8d ✓ 34d 65 R8 19/P ✓ 55d ✓ 7d ✓ 6d ✓ 24d ✓ 21d 70 R9 23/L ✓ 21d ✓ 41d ✓ 5d ✓ 9d ✕ 18d 77.5 R10 19/L ✓ 22d ✓ 3d ✓ 3d ✓ 7d ✓ 8d 95 R11 52/P ✓ 1m 32d ✓ 2m 5d ✓ 15d ✓ 22d ✓ 27d 72.5 R12 20/P ✓ 23d ✓ 7d ✓ 7d ✓ 9d ✓ 24d 80 R13 22/P ✓ 35d ✓ 18 ✓ 16d ✓ 11d ✓ 50d 55 R14 21/P ✓ 1m 4d ✓ 10d ✓ 35d ✓ 16d ✓ 32d 35 R15 26/P ✓ 20d ✓ 24d ✓ 5d ✓ 10d ✓ 24d 50 R16 24/L ✕ 1m 17d ✓ 7d ✓ 19d ✓ 18d ✓ 56d 60 R17 21/L ✓ 32d ✓ 5d ✓ 13d ✓ 8d ✓ 12d 100 R18 22/L ✕ 49d ✓ 19d ✓ 4d ✓ 11d ✓ 15d 90 R19 23/L ✓ 19d ✓ 5d ✓ 5d ✓ 9d ✓ 21d 65 R20 22/L ✕ 1m 5d ✓ 40d ✓ 31d ✓ 34d ✕ 1m 13d 57.5 R21 21/P ✓ 29d ✕ 1m 3d ✓ 10d ✓ 10d ✕ 22d 50 R22 21/P ✓ 25d ✓ 29d ✓ 25d ✓ 36d ✓ 2m 7d 100 R23 22/P ✕ 47d ✓ 4d ✓ 34d ✕ 8d ✓ 9d 57.5 R24 31/P ✓ 18d ✓ 4d ✓ 16d ✓ 9d ✓ 8d 100 R25 21/P ✓ 19d ✓ 5d ✓ 4d ✓ 6d ✓ 18d 100
978 Jurnal Teknik Informatika (JUTIF) , Vol. 5, No. 4, August 2024, pp. 971-980
R26 21/P ✓ 19d ✓ 8d ✓ 18d ✓ 11d ✓ 43d 72.5 R27 22/L ✕ 38d ✓ 3d ✓ 4d ✓ 8d ✓ 16d 100 R28 20/L ✕ 28d ✓ 8d ✓ 13d ✓ 9d ✓ 18d 50 R29 52/L ✓ 55d ✕ 1m 52d ✓ 16d ✓ 25d ✓ 18d 95 R30 22/L ✓ 58d ✓ 7d ✓ 11d ✓ 13d ✓ 25d 95 23 28 30 29 27 72.91 Tabel 6. Hasil A/B Testing Desain B Umur/JK Desain B F1 F2 F3 F4 F5 SUS Score Done Time Done Time Done Time Done Time Done Time R1 19/L ✓ 30d ✓ 2d ✓ 6d ✓ 7d ✓ 9d 62.5 R2 20/P ✓ 35d ✓ 16d ✓ 6d ✓ 8d ✓ 15d 100 R3 21/P ✓ 1m 24d ✓ 2m 27d ✓ 39d ✓ 15d ✕ 1m 18d 62.5 R4 22/L ✓ 57d ✓ 5d ✓ 13d ✓ 22d ✓ 16d 80 R5 23/L ✓ 40s ✓ 4d ✕ 2m 2d ✓ 7d ✓ 9d 62.5 R6 21/L ✓ 1m 4d ✓ 11d ✕ 2m 9d ✓ 8d ✕ 20 82.5 R7 22/L ✓ 46d ✓ 18d ✕ 56d ✓ 16d ✓ 33d 87.5 R8 19/P ✓ 1m 19d ✓ 12d ✓ 16d ✓ 16d ✕ 33d 79 R9 23/L ✓ 53d ✓ 4d ✓ 10d ✓ 13d ✓ 24d 75 R10 19/L ✓ 24d ✓ 2d ✓ 8d ✓ 9d ✓ 9d 70 R11 52/P ✓ 3m 17d ✓ 56d ✓ 27d ✓ 56d ✓ 28d 65 R12 20/P ✓ 18d ✓ 3d ✓ 5d ✓ 9d ✓ 17d 75 R13 22/P ✓ 1m 30d ✓ 56d ✓ 17d ✓ 26d ✕ 1m 4d 72.5 R14 21/P ✓ 1m 34d ✓ 40d ✓ 13d ✓ 15d ✓ 21d 87.5 R15 26/P ✓ 17d ✓ 8d ✓ 7d ✓ 12d ✓ 10d 55 R16 24/L ✓ 24d ✓ 2d ✓ 11d ✓ 24d ✓ 24d 77.5 R17 21/L ✓ 1m 8d ✓ 24d ✓ 15d ✓ 15d ✓ 12d 100 R18 22/L ✓ 1m 7d ✓ 7d ✕ 23d ✕ 20d ✓ 9d 87.5 R19 23/L ✓ 26d ✓ 8d ✓ 6d ✓ 12d ✓ 8d 92.5 R20 22/L ✓ 1m 31d ✓ 29d ✓ 27d ✓ 21d ✓ 43d 80 R21 21/P ✕ 45d ✓ 16d ✓ 17d ✓ 18d ✓ 9d 57.5 R22 21/P ✕ 35d ✓ 12d ✕ 39d ✕ 16d ✓ 17d 25 R23 22/P ✓ 1m 33d ✓ 30d ✓ 20d ✓ 26d ✓ 11d 75 R24 31/P ✕ 34d ✓ 2d ✓ 9d ✓ 15d ✓ 15d 100 R25 21/P ✕ 15d ✓ 2d ✓ 4d ✓ 6d ✓ 6d 97.5 R26 21/P ✕ 34d ✓ 6d ✓ 10d ✓ 10d ✕ 29d 65 R27 22/L ✕ 1m 4d ✓ 3d ✓ 7d ✓ 13d ✓ 21d 97.5 R28 20/L ✕ 1m ✓ 9d ✓ 11d ✓ 14d ✕ 18d 85 R29 52/L ✕ 1m 17d ✓ 24d ✓ 14d ✓ 31d ✓ 21d 55 R30 22/L ✕ 1m 2d ✓ 11d ✓ 12d ✓ 12d ✓ 10d 95 22 30 25 28 24 76.88

## a. F1 (Daftar dan On Boarding)
Desain  A  memiliki  tingkat  keberhasilan  lebih tinggi dari desain B dan perbedaannya yaitu satu nilai. Terlihat  dari  tabel  5,  penerapan  hukum Law  of Proximity pada  desain  A  memberikan  dampak  baik terhadap  desain.  Walau  hanya  perbedaan  satu  nilai tingkat keberhasilan, desain A mendapatkan rata-rata waktu  38  detik.  Sedangkan  desain  B  pada  tabel  6, rata-rata pengguna menghabiskan waktu sebanyakan 55 detik. Oleh karena itu, F1 desain A berhasil dalam menerapkan Law of Proximity dan Hick’s Law . b. F2 (Utama)
Desain  B  memiliki  tingkat  keberhasilan  lebih tinggi  dari  desain  A  dan  perbedaannya  adalah  dua poin. Hal ini disebabkan oleh desain A memiliki alur yang  lebih  panjang  karena  memiliki  sub-menu  pada setiap  artikel.  Sedangkan  desain  B,  menu  yang tertampil  mengarahkan  langsung  ke  artikel  sesuai dengan  judul.  Oleh  sebab  itu,  terlihat  pada  tabel  5, walaupun  desain  miliki  tingkat  keberhasilan  yang rendah,  desain  A  dapat  memberikan  edukasi  atau
informasi Diet Mediterania lebih lengkap dan mudah untuk diakses. Karena desain B hanya terfokus artikel secara  umum  dan  jika  ingin  menambah  artikel, pengguna harus mencari satu-satu dan akan bingung dengan artikel yang tidak tertata.
c. F3 (Makan)
Berdasarkan tabel 5 dan 6, tingkat keberhasilan desain A lebih tinggi dari desain B dengan total nilai perbedaan  yaitu  lima  poin.  Penerapan Aesthetic- usability  Effect dan Hick’s  Law pada  desain  A memberikan  efek  yang  lebih  baik.  Dimana  pada gambar 7 dan gambar 8, perebedaan dari sisi  warna dan penataan. Desain B cenderung menggunakan satu warna  dominan  yaitu  biru,  sedangkan  desain  A memiliki  beberapa  warna  yang  memeberikan  kesan berwarna akan tetapi tetap clean (rapi).
d. F4 (Gula darah)
Terdapat perbedaan nilai satu poin antara desain
A  dan  desain  B.  Penerapan Law  of  Proximity (penggabungan  anatara  fitur  makan  dan  fitur  gula darah) pada desain B tidak memberikan dampak baik
pada Hick’s Law karena terlihat pada tabel 6, rata-rata waktu  pengambilan  keputusan  oleh  pengguna  yaitu 16 detik. Hal ini menujukkan desain A lebih efisien karena lebih rendah 3 detik dari desain B.
e. F5 (Olahraga)
Berdasarkan tabel 5 dan 6, desain A dan desain B memiliki perbedaan tingkat keberhasilan sebanyak tiga poin. Penerapan Aesthetic-usability Effect cukup berhasil  pada  desain  A.  Dengan  tampilan  yang minimalis  dan clean dapat  memberikan  efek  baik pada  pengguna  walaupun  memiliki  alur  yang  relatif panjang dari pada desain B.
A/B testing menghasilkan nilai SUS dari desain A dan B yaitu 72.91 dan 78.88 dimana kedua desain masuk  ke  dalam  kategori acceptable,  good dan excelent, dan  mendapatkan grade  C yang  dapat dilihat pada Gambar 13.
Gambar 13. System Usability Scale (SUS)

## 4. DISKUSI
Berdasarkan hasil penelitian dengan responden pada  Tabel  2,  3  dan  4  menunjukan  bahwa perancangan  UI/UX  diet  Mediterania  ini  diperlukan untuk meminimalisir terkena DMT2.
Pada  perancangan  UI/UX  ini  memperkenalkan konsep  perancangan  dengan  metode User  Centered Design (UCD) dengan membuat dua desain berbeda, dimana  dua  desain  tersebut  menerapkan  hukum  UX Hick’s  Law , Law  of  Proximity, dan Aesthetic- usability  Effect dengan  hasil  desain  yang  berbeda. Kunci  utama  dari  pengujian  perancangan  ini  yaitu pada  titik  keberhasilan  setiap  fitur  dan  nilai  hasil SUS.
Berdasarkan  hasil  Tabel  5  dan  Tabel  6 menyatakan  bahwa  4  dari  5  fitur  yang  telah  diuji, desain  A  memiliki  tingkat  keberhasilan  lebih  tinggi dari  desain  B.  Akan  tetapi  untuk  nilai  kepuasan pengguna (SUS), desain B memiliki nilai yang lebih tinggi  3.91  poin.  Penulis  akan  merekomendasikan desain A untuk lanjut ke proses pembuatan aplikasi, hal  ini  dikarenakan  nilai  tingkat  keberhasilan  lebih tinggi  membuktikan  alur  desain  A  lebih  mudah dipahami.  Dengan  hasil  yang  cukup  memuaskan dengan mendapatkan score 72.91 dan 78.88, penulis tidak perlu melakukan iterasi pada tahap desain.
Dalam penelitian terdahulu mengenai perancangan dengan metode yang sama (UCD), hasil menunjukan  bahwa  metode  ini  efektif  dan  efisien untuk  digunakan  dalam  perancangan.  Serta  penulis tidak  melakukan  iterasi  pada  tahap  desain  karena hasil  pengujian  yang  lebih  baik  dari  desain sebelumnya [18].
Diharapkan  hasil  dari  penelitian  ini  dapat dikembangkan  oleh  peneliti  selanjutnya  untuk menggunakan hukum UX lainnya dan(atau) membantu developer untuk  memudahkan  dalam pembangunan aplikasi diet Mediterania.

## 5. KESIMPULAN
Berdasarkan hasil penelitian dapat disimpulkan bahwa perlu adanya keseimbangan antara kesadaran diri  untuk  hidup  sehat  dengan  usaha  untuk memperolehnya. Serta berdasarkan pengujian perancangan,  hasil  SUS  ( satisfaction )  dari  kedua desain  yaitu  72.91  dan  76.88.  Berdasarkan  kategori acceptability,  adjective  ratings,  dan  grade  desain  A dan B termasuk penilaian yang acceptable , good , dan memiliki grade C. Walaupun desain B memiliki nilai SUS  yang  lebih  tinggi,  penerapan  hukum Law  of Proximity, Hick’s Law, dan Aesthetic-usability Effect memberikan  hasil  tingkat  keberhasilan  yang  lebih tinggi terhadap desain A.
Penerapan Law of Proximity sangat berpengaruh kepada Hick’s law . Jika elemen yang didekatkan atau disusun  dengan  padat  merupakan  jenis  yang  sama (seperti input-field dengan kategori yang sama) akan membuat  pengguna  cepat  mengambil  keputusan. Akan  tetapi  jika  elemen  yang  disusun  secara  padat berbeda kategori (fitur makan dan gula darah) maka keputusan  yang diambil akan memakan  waktu lebih lama.
Dapat  disimpulkan  bahwa  hukum  UX  yang penulis  gunakan  tidak  dapat  memberikan  kepuasan ( satisfaction ) kepada pengguna akan tetapi memberikan tingkat keberhasilan lebih tinggi dalam penggunaan  desain.  Sehingga  untuk  melanjutkan pembangunan aplikasi, dapat menggunakan desain A. Kepada  peneliti  selanjutnya,  dapat  melakukan evaluasi  dan/atau  penggunaan  terhadap  hukum  UX lainnya. Sehingga dapat menemukan hukum UX yang tepat dan nilai saticfaction yang tinggi.

## DAFTAR PUSTAKA
[1] Kementrian  Kesehatan,  “Informasi  Data Diabetes Tahun 2019,” 2019.
[2] M.  Georgoulis,  M.  D.  Kontogianni,  and  N. Yiannakouris,  “Mediterranean  diet  and diabetes: Prevention and treatment,” Nutrients , vol. 6, no. 4, pp. 1406–1423, Apr. 2014, doi: 10.3390/nu6041406.
[3] E.  Puspita  Sari,  “HUBUNGAN  ANTARA BODY  DISSACTISFACTION  DENGAN KECENDERUNGAN  PERILAKU  DIET PADA  REMAJA  PUTRI,”  2019.  [Online]. Available: https://www.researchgate.net/publication/33
2510927
[4] L.  Haigh et  al. ,  “The  effectiveness  and acceptability  of  Mediterranean  diet  and calorie restriction in non-alcoholic fatty liver

## 980
Jurnal Teknik Informatika (JUTIF) , Vol. 5, No. 4, August 2024, pp. 971-980
disease  (NAFLD):  A  systematic  review  and meta-analysis,” Clinical  Nutrition ,  vol.  41, no.  9,  pp.  1913–1931,  Sep.  2022,  doi: 10.1016/j.clnu.2022.06.037.
[5] B.  Roman,  L.  Carta,  Á.  M.  Martínez- González, and L. Serra-Majem, “Effectiveness  of  the  Mediterranean  diet  in the elderly,” Clinical Interventions in Aging , vol.  3,  no.  1.  pp.  97–109,  2008.  doi: 10.2147/cia.s1349.
[6] US  HEALTH  NEWS,  “Best  Diets  2023.” Accessed: Jun. 11, 2023. [Online]. Available: Best Diets 2023
[7] G.  Caprara,  “Mediterranean-type  dietary pattern  and  physical  activity:  The  winning combination  to  counteract  the  rising  burden of  non-communicable  diseases  (NCDS),”
Nutrients , vol. 13, no. 2. MDPI AG, pp. 1–37, Feb. 01, 2021. doi: 10.3390/nu13020429.
[8] J.  P.  Krabbe  and  Michael  Gontarek,  “The Role  of  a  Mediterranean  Diet  in  the Prevention  of  Type  2  Diabetes  Mellitus,”
2023. [Online].
Available: https://www.researchgate.net/publication/37 2499056
[9] M.  Shidqi  Hadafi,  dan  Bambang  Agus Herlambang, G. Pusat Lantai, and J. Sidodadi Timur, PENGEMBANGAN  UI/UX  DESIGN
STUDI  KASUS  APLIKASI  CAMPAIGN
MENGGUNAKAN METODE DESIGN
THINKING , vol. 6. 2021.
[10] H. Joo, “A Study on Understanding of UI and UX, and Understanding of Design According to  User  Interface  Change,”  2017.  [Online]. Available: http://www.ripublication.com
[11] M.  Agus  Muhyidin,  M.  A.  Sulhan,  and  A.
Sevtiana, “PERANCANGAN UI/UX APLIKASI MY CIC LAYANAN INFORMASI  AKADEMIK  MAHASISWA MENGGUNAKAN  APLIKASI  FIGMA,” 2020. [Online].
Available:
https://my.cic.ac.id/.
[12] H. J. Christanto, S. A. Sutresno, G. D. G. E. Sidabutar,  J.  A.  Seah,  S.  B.  Tjhang,  and  Y. Krisrian,  “Pengembangan  Platform  Coffee
Shop  KURLEB  dengan  Fokus  pada  User Interface  dan  Prinsip  UX  Law,” Journal  of Information System Research (JOSH) , vol. 5, no.  1,  pp.  293–301,  Oct.  2023,  doi: 10.47065/josh.v5i1.3793.
[13] T.  O.  Kvålseth,  “Hick’s  law  equivalent  for reaction  time  to  individual  stimuli,” British Journal  of  Mathematical  and  Statistical Psychology , vol. 74, no. S1, pp. 275–293, Jul. 2021, doi: 10.1111/bmsp.12232.
[14] M.  A.  Maulyda,  Sugiman,  W.  Wuryandani, and  Y.  W.  Purnomo,  “How  Do  Prospective Teachers Find Number Patterns Based on the
Laws of Proximity, Closure, and Similarity in a Problem-Solving Activity?,” Acta
Scientiae ,  vol.  25,  no.  5,  pp.  275–302,  Sep.
2023, doi: 10.17648/acta.scientiae.7770.
[15] A.  Sonderegger,  A.  Uebelbacher,  M. Pugliese,  and  J.  Sauer,  “The  influence  of aesthetics  in  usability  testing:  The  case  of dual-domain  products,”  in Conference  on Human  Factors  in  Computing  Systems  - Proceedings ,  Association  for  Computing
Machinery, 2014, pp. 21–30. doi: 10.1145/2556288.2557419.
[16] A. Miniukovich and K. Figl,  “The  effect of prototypicality on webpage aesthetics, usability,  and  trustworthiness,” Int.  J.
Human-Computer  Studies ,  vol.  179,  p.
103103, 2023, doi: 10.7910/DVN/9F.
[17] A.  P.  Heryanti et  al. ,  “Pengenalan  dan Pelatihan  Figma  untuk  Pelajar  SMA  Al- Fityan  Tangerang  pada  Kegiatan  Gerakan Nasional  Revolusi  Mental,” Prosiding Seminar Nasional Pemberdayaan Masyarakat  (SENDAMAS) ,  vol.  3,  no.  1,  p.
22, Feb. 2024, doi: 10.36722/psn.v3i1.2466.
[18] M.  Multazam,  I.  V  Paputungan,  and  B.
Suranto,  “Perancangan  User  Interface  dan User Experience pada Placeplus menggunakan  pendekatan  User  Centered Design,” 2020. [19] Useberry, “Useberry: UX Research
Platform.”  Accessed:  Aug.  10,  2023.
[Online].
Available: https://app.useberry.com/
[20] F.  Quin,  D.  Weyns,  M.  Galster,  and  C.  C. Silva, “A/B Testing: A Systematic Literature
Review,” 2023. [Online]. Available: https://ssrn.com/abstract=4549495
[21] M.  M.  Hyzy et  al. , “System Usability Scale Scores  for  Digital  Health  Apps:  Meta Analysis,” 2022, doi: 10.2196/preprints.37290. [22] A.  Kathleen,  R.  P.  Sutanto,  and  A.
Pranayama, “ANALISIS PERBANDINGAN USER FLOW DARI APLIKASI E- CATALOGUE IFURNHOLIC,” 2021.
[23] C.-J.  Huang  and  J.  Kolopitawondal,  “User Experience Design and Evaluation on Mobile
Investment Application User Interface
Prototype,” in Usability and User Experience ,  AHFE  International,  2023.  doi: 10.54941/ahfe1003192.
[24] R.  Wahyuningrum,  D.  Wahyono,  M. Mustofa,  and  Y.  S.  Prabandari,  “Masalah- Masalah terkait Pengobatan Diabetes Melitus Tipe 2: Sebuah Studi Kualitatif,” Indonesian Journal of Clinical Pharmacy , vol. 9, no. 1, p. 26,
Mar. 2020, doi: 10.15416/ijcp.2020.9.1.26.