## PERANCANGAN USER INTERFACE DAN USER EXPERIENCE BRINGHARJO QR SHOP
Ria Andriani 1) , Fania Ellysabeth 2) Jeki Kuswanto 3)
1,2) D3 Teknik Informatika Universitas Amikom Yogyakarta
3) S1 Teknik Komputer Universitas Amikom Yogyakarta email : ria@amikom.ac.id 1) , fania.el@students.amikom.ac.id 2 ) ,jeki@amikom.ac.id 3)

## Abstraksi
UPT. Pusat Bisnis Pasar Bringharjo merupakan pusat pengelolaan kios yang berada di Jl. Margo Mulyo No. 16, Ngupasan, Kec Gondomanan, Yogyakarta, Daerah Istimewa Yogyakarta. Salah satunya fastfood yang berada di lantai tiga pasar Bringharjo Timur. Tempat makan yang terdapat di pasar Bringharjo sendiri masih menggunakan metode manual. Dimana para pengunjung akan mengantri ketika hendak memesan makanan, memilih makanan kemudian  membayar  total  pembelanjaan  di  meja  kasir.  Di  masa  pandemi  ini,  mengantri  sangat  rentan  dalam penyebaran  virus Covid 19 yang  sedang  melanda  dunia,  termasuk  Indonesia.  Tujuan dari  perancangan  ini  ialah untuk menghasilkan desain user interface dan user experience untuk mempermudah pengunjung fastfood pasar Bringharjo dalam bertransaksi, sekaligus membantu mencegah penyebaran Covid19.
Perancangan  ini  menggunakan  metode  User-Centered  Design  (UCD)  sebagai  proses  pemecahan  masalah. Metode  ini  menyesuaikan  karakteristik  pengguna  selama  proses  perancangan  dan  diseimbangi  dengan  konteks serta lingkungan. Selain itu, pengguna berperan dalam mengoperasikan sistem dan menentukan persyaratan yang terdapat pada rancangan user interface dan user experience. Hasil  akhir  pada  penelitian  ini  ialah  rekomendasi user  interface dan user  experience aplikasi prototype Bringharjo  Qr  Shop  yang  memberikan  pengalaman  bertransaksi  aman  dan  nyaman  bagi  pengunjung,  serta memenuhi kebutuhan informasi yang pengunjung perlukan.
Kata Kunci : User Interface, User Experience dan User-Centered Design

## Abstract
Technical  Executive  Unit.  Central  Business  BringharjoMarket  is  the  management of  a central  store  located  in Margo  Mulyo  street  number  16,  Ngupasan,  Kec.  Gondomanan,  Yogyakarta,  Special  Region  of  Yogyakarta. Fastfood  is  one  of  them  which  is  located  on  the  third  floor  of  the  east  Bringharjo  Market.  The  fastfood  in  the Bringharjo market still uses the manual method. Visitors will queue when they want to order food, choose food and then pay for the total purchase at the cashier desk. During this pandemic, queuing is very vulnarable in the spread  of  the  Covid19  virus  that  is  sweeping  the  world,  including  Indonesia.  The  purpose  of  this  design  is  to produce a user interface and user experience to make it easier for fastfood visitors to Bringharjo market when transacting, while helping prevent the spread of Covid19 virus
This design uses the User Centered Design method as a problem solving process. This method method adapts the characteristics  of  the  user  during  the  design  process  and  is  balanced  with  the  context  and  environment.  In addition, user has the role of operating the system and determining the content contained in the design of user interface and user experience.
The final result in this design is a recommendation for the user interface and user experience of the Bringharjo Qr  Shop  protoype  application  that  provides  a  safe  and  comfortable  transaction  experience  for  visitors,  and fulfills the information needs that visitors need.
Keywords : User Interface, User Experience And User-Centered Design

## 1. Pendahuluan
Di  masa  pandemi  saat  ini,  tiap  individu  diharuskan untuk  senantiasa  menerapkan  gaya  hidup baru  yang disebut  new  normal.  Tatanan  baru  ini  perlu dibiasakan dalam menjalankan produktivitas kegiatan  sehari-hari,  kebiasaan  serta  perilaku adaptasi  untuk  menumbuhkan  gaya  hidup  bersih, sehat  serta  menjaga  jarak.  Pandemi  ini  telah mendorong  banyak  pelaku  usaha  untuk  berinovasi dalam mengantri. Karena kegiatana mengantri sering kali  menciptakan  kerumunan  yang  padat,  bahkan menimbulkam  barisan  yang  tidak  teratur dan  sangat rentan terhadap penularan virus Covid19.
Fastfood  yang  terletak  dilantai  tiga  pasar Bringharjo  Timur  merupakan  salah  satu  unit  bisnis yang dikelola langsung oleh UPT. Pusat Bisnis Pasar Bringharjo.  Restoran  ini  sendiri  masih  menerapkan sistem  pemesanan  manual,  yaitu  pengunjung bertransaksi dengan cara membuat barisan, memilih makanan  yang  tertera  pada  buku  menu,  menikmati hidangan kemudian membayarnya di meja kasir. Hal tersebut  memicu  kekhawatiran  baik  dari  pengelola restoran  maupun  pengunjung,  metode  tersebut dianggap kurang efektif dalam bertransaksi.
Berdasarkan wawancara yang telah dilakukan  kepada  pihak  UPT.  Pusat  Bisnis  Pasar Bringharjo, fastfood ini memerlukan sebuah website yang  memiliki  tampilan  menarik  dan  mudah dipahami  untuk  pengunjung  pasar  Bringharjo  yang berasal  dari  latar  belakang,  gender  serta  usia  yang berbeda-beda.  Maka,  pada  penelitian  ini  akan dilakukan  perancangan  user  interface  dan  user experience  aplikasi  prototype  Bringharjo  Qr  Shop. Perihal  layanan  dan  informasi  yang  tertera  pada aplikasi  dimulai  dari  scan  qr  code  atau  memberi kode  unik  yang  telah  ditentukan  oleh  pihak pengembang  untuk  menampilkan  menu,  harga  serta pengunjung dapat bertransaksi pada aplikasi.
Pada penelitian yang dilakukan oleh Bagus Laksono mahasiswa
Universitas Dinamika Fakultas Teknologi dan Informatika pada tahun 2021 dengan judul
"Evaluasi dan Perancangan User Interface/User  Experience  Pada  Website  INMAX Property  Menggunakan  Model  Double  Diamond". Pada  penelitian  ini,  berfokus  pada  evaluasi  sebuah website  instansi,  apakah  rancangan  user  interface dan user experience yang baru dapat mempengaruhi kenyamanan  user  dengan  menggunakan  model Double  Diamond  yang  memberikan  kebebasan desainer  dari  batasan  dan  saat  melakukan  evaluasi pada  suatu  desain.  Penulis  juga  menggunakan metode  Heuristic  Evaluation  pada  tahap  evaluasi. Sedangkan  pada  penelitian  ini,  lebih  fokus  dalam rancangan  user  interface  dan  user  experience  untuk sistem transaksi pada fastfood yang belum memiliki website  dengan  metode  UCD.  Metode  User Centered  Design  (UCD)  dipilih  sebagai  proses pemecahan masalah, karena tidak hanya mengharuskan  desainer  untuk  menganalisis  dan
membayangkan kecenderungan  pengguna saat menggunakan suatu produk, tetapi juga memverifikasi  asumsi  pengguna  tentang  perilaku mereka  di  lingkungan.  Sehingga  menghasilkan rancangan  user  interface  dan  user  experience  untuk aplikasi  prototype  Bringharjo  Qr  Shop  yang memudahkan pengguna saat bertransaksi.

## 2. Metode Penelitian
Adapun alur penelitian yang digunakan dapat dilihat pada Gambar 1 berikut.

## Gambar 1. Alur Penelitian
Penelitian  ini  terdiri  dari  beberapa  tahapan  dimulai dari  merumuskan  masalah  yang  ada,  kemudian dilakukan  pengumpulan  data  berupa  studi  literatur, observasi  dan  wawancara.  Untuk  analisis  data, penulis  menggunakan  dua  metode,  yaitu  analisis kualitatif  dan  analisis  naratif.  Pada  rancangan sistem, penulis menggunakan metode User-Centered Design (UCD),  yang  terdiri  dari  identifikasi pengguna, spesifikasi kebutuhan pengguna, perancangan  desain  dan  evaluasi  desain.  Hasil  dari penelitian ini berupa rekomendasi user interface dan user  experience aplikasi  prototype  Bringharjo  Qr Shop.

## Metode Perancangan
Perancangan  merupakan  proses  penerapan  dari teknik  yang  telah  peneliti  tentukan  sebelumnya. Pada  tahap  ini  elemen  dari  metode  pengumpulan data  serta  metode  analisis  di  konversikan.  Tujuan dari  perancangan  ini  ialah  menerapkan  data  yang telah diperoleh  dan  dapat di proses agar menghasilkan  rancangan  user  interface  dan  user experience Bringharjo Qr Shop.
Tahapan yang dilakukan pada perancangan ini ialah daftar pertanyaan, mengidentifikasi calon pengguna, spesifkasi kebutuhan pengguna, perancangan desain, evaluasi desain.
1. Daftar Pertanyaan
Peneliti  membuat  daftar  pertanyaan  yang  diajukan pada  proses  wawancara  agar  informasi  yang dibutuhkan  peneliti  saat  merancang  sistem  dapat mencapai  tujuan  dan  data  yang  diperlukan  sesuai
kebutuhan. Daftar pertanyaan akan dibuat untuk tiga partisipan,  meliputi  pembeli,  pemilik  kedai  dan pihak UPT. Pusat Bisnis Pasar Bringharjo.
2. Mengidentifikasi Pengguna
Peneliti  dapat  menentukan  siapa  target  pengguna setelah  proses  wawancara  dilaksanakan.  Riset  calon pengguna  diperoleh  dari  beberapa  pertanyaan mengenai keseharian masyarakat dalam hal bertransaksi pada restoran.
3. Spesifikasi Kebutuhan Pengguna
Peneliti menggali segala kebutuhan pengguna terkait proses  pemesanan  serta  transaksi  bagi  para  calon pengguna. Pada proses ini  peneliti menggunakan metode  User-Centered  Design  (UCD).  Fokus metode  UCD  terletak  pada  pengguna,  kebutuhan serta teknik terkait user.
4. Perancangan Desain
Peneliti membuat desain kasaran atau low fidelity dan high  fidelity  desain  visual  untuk  memastikan tampilan  dan  warna  pada  interface  sesuai  dengan calon  pengguna  dan  tujuan  aplikasi.  Hasil  akhir  dari perancangan desain high fidelity  ini digunakan untuk prototype interaktif layaknya aplikasi sesungguhnya.
5. Evaluasi Desain
Pada  tahap  evaluasi  desain,  peneliti  menguji  coba sistem  dengan  cara  memberikan  prototype  aplikasi serta  memberi  tugas  kepada  calon  pengguna  untuk bertransaksi menggunakan sistem yang telah dirancang.  Feedback  partisipan  selama  sesi  akan diperhatikan  dan  dicatat  oleh  peneliti  sebagai  bahan evaluasi desain selanjutnya.
6. Aplikasi Perancangan
Peneliti  menggunakan  aplikasi  Figma  pada  proses perancangan  untuk  membuat  komponen-komponen visual  user  interface  dan  user  experience  aplikasi dalam  bentuk  grafis  vektor.  Aplikasi  ini  juga digunakan  peniliti  untuk  melayout  dan  membuat prototype desain aplikasi

## Metode Analisis
Metode  analisis  dilakukan  untuk  menjelaskan  data yang diperoleh saat metode pengumpulan data telah berhasil  peneliti  kumpulkan. Kegiatan  ini  dilakukan dengan  mengamati,  menganalisis  serta  mengubah data  dari  hasil  penelitian  menjadi  sebuah  informasi baru. Agar data yang diperoleh mudah dipahami dan dapat  ditemukan  kesimpulan  bagi  penulis  guna merancang  user  interface  dan  user  experience  pada aplikasi  prototype  Bringharjo  Qr  Shop  dengan menggunakan metode User-Centered Design (UCD).
Metode  analisis  yang  digunakan  dalam  penelitian ini, yaitu analisis kualitatif dan analisis naratif.
a. Analisis Kualitatif
Peneliti menjabarkan data yang didapatkan menggunakan  analisis  kualitatif  dan  diuraikan dengan  kata-kata  tertulis  dari  partisipan  yang diamati
b. Analisis Naratif
Peneliti mengumpulkan serta menganalisis pengalaman  pengunjung  selama  bertransaksi  di fastfood pasar Bringharjo Timur, kemudian mendeskripsikan  peristiwa  menggunakan  alur  cerita saat  penyusunan.  Analisis  naratif  akan  membantu menjelaskan  dampak  dari  pengalaman  pengunjung, cerita  dapat  diperoleh  dengan  metode  pengumpulan data yang telah dilakukan sebelumya.

## 3. Hasil dan Pembahasan
Setelah  melewati  beberapa  proses  pada  tahap analisis  serta  perancangan,  maka  diperoleh  hasil akhir  produk  user  interface  dan  user  experience aplikasi  prototype  Bringharjo  Qr  Shop.  Pembuatan desain  aplikasi  menggunakan  Figma.  Jumlah  layar desain  untuk  prototype  versi  mobile  Bringharjo  Qr Shop sebanyak 26 halaman.
1. Prototyping Scan Qr
Scan  Qr  merupakan  halaman  pertama  saat  user menggunakan  aplikasi  prototype  Bringharjo  Qr Shop.  Jika  pada  handphone  user  tidak  ada  scan generator.
Gambar.1 Scan Qr 2. Prototyping Scan Code
Tampilan  Scan  Code  berisi  inputan  kode  unik  yang telah  disediakan  pihak  pengembang.  User  mengisi kode dengan  benar,  lalu  memilih  ikon  "send"  untuk melanjutkan ke halaman selanjutnya.
Bagian  Data  Pengunjung  berisi  inputan  yang  harus diisi  oleh  user  inputan  yang  harus  diisi  oleh  user dimulai  dari  No.  Meja  yang  user  tempati,  nama pemesan,  jumlah  tamu  serta  nomor  handphone. Setelah  itu  user  memilih  button  "kirimkan!"  dan akan dialihkan ke halaman berikutnya.
Gambar 3. Prototyping Data Pengunjung
4. Prototyping Beranda
Pada  halaman  Beranda  terdapat  inputan  pencarian yang  berfungsi  untuk  langsung  mencari  menu  yang user  inginkan.  Di  halaman  Beranda  user  dapat menemukan menu yang direkoemendasikan, restoran  favorit  di  fastfood  Bringharjo,  serta  promo yang tersedia.
Gambar 4. Prototyping Beranda
5. Prototyping Profil
Di halaman Profil berisikan informasi yang sudah di isi  oleh  user  sesudah  scan  qr  atau  scan  code. Informasi  yang  tersedia  berupa  nama  pemesan, jumlah  tamu  dan  nomor  handphone.  Informasi tersebut  masih  bisa  di  ubah  selama  user  belum menyelesaikan transaksi.
Gambar 5. Prototyping Profil
6. Prototypng Detail Pesanan
Halaman  Detail  Pesanan  Anda  merupakan  bagian yang menampilkan menu yang telah di pilih user dan disertai total yang harus dibayar.
Gambar 6. Prototyping Detail Pesanan
7. Prototyping Metode Pembayaran
Pada bagian Metode Pembayaran, user bisa memilih cara  yang  mana  untuk  menyelesaikan  transaksi. Pihak pengembang menyediakan dua cara, yaitu qris code dan tunai.
Gambar 7. Prototyping Metode Pembayaran
8. Prototyping Status Pemesanan Halaman  Status  Pemesanan  merupakan  bagian terakhir  interface  saat  user  melakukan  transaksi menggunakan  aplikasi  prototype  Bringharjo  Qr Shop.  Halaman  Status  pemesanan  dijadikan  bukti konfirmasi  bahwa  pesanan  sudah  diterima  oleh penjual dan akan segera diproses.
Gambar 8. Prototyping Status Pemesanan
9. Prototyping List Kedai
Pada  List  Kedai,  menampilkan  nama  restoran, jumlah menu hingga rating yang resto dapatkan dari pengunjung lainnya.

## Gambar 9. Prototyping List Kedai
Wawancara  yang  diilakukan  kepada  20  pengguna untuk  mengetahui  pendapat  pengguna  mengenai interface yang telah dirancang untuk direkomendasikan kepada pengembang.
Berdasarkan  jawaban  dari  user  dapat  diambil kesimpulan  dari  jawaban  yang  paling  banyak dilontarkan oleh user. Adapun kesimpulan hasil dari wawancara usability testing adalah sebagai berikut:
1. Semua pengguna berpendapat bahwa interface  prototype  Bringharjo  Qr  Shop memiliki  desain  yang  bagus  dan  warna yang berciri khas.
2. 2 dari 20 pengguna berpendapat belum bisa membedakan antara ikon beranda dan kedai
3. Semua  pengguna  berpendapat  bahwa  tugas yang  ada  memiliki  bobot  yang  sama  dan mudah dikerjakan satu per satu.
4. Semua pengguna berpendapat bahwa prototype  aplikasi  Bringharjo  Qr  Shop merupakan sistem transaksi yang dibutuhkan pada masa pandemi saat ini dan seterusnya
5. 3  dari  20  pengguna  berpendapat  bahwa fitur  profil  yang  terdapat  di  prototype aplikasi  Bringharjo  Qr  Shop  kurang maksimal  dalam  penggunaanya.  Selain  itu, fitur  yang  digunakan  pada  aplikasi  sudah memenuhi kebutuhan transaksi bagi user.

## 4. Kesimpulan
Berdasarkan  penelitian  yang  telah  dilakukan,  maka bisa ditarik kesimpulan sebagai berikut :
1.  Tahapan  perancangan  dilakukan  secara  digital menggunakan  software  Adobe  Illustration  dan Figma.  Dalam  perancangan  user  interface  dan  user experience  prototype  aplikasi  Bringharjo  Qr  Shop ini  disesuaikan  dengan  target  audiens  dari  fastfood pasar  Bringharjo  Timur  yang  telah  ditentukan melalui riset dan analisis. Pada konsep perancangan ini  memusatkan  pengguna  sebagai  subjek  dari pemakai  sebuah  produk  tertentu  berdasarkan perilaku mereka atau disebut User Centered Design. 2.  Perancangan  user  interface  dan  user  experience aplikasi prototype Bringharjo Qr Shop ini merupakan upaya untuk memberikan solusi terhadap permasalahan  transaksi  yang  terjadi  di  tempat penelitian.
3.  Pengujian  hasil  rancangan  berupa  prototype dilakukan  dengan  20  partisipan  dari  pengunjung fastfood  pasar  Bringharjo  Timur.  Dari  hasil wawancara  usability  testing,  semua  pengguna berpendapat bahwa prototype aplikasi Bringharjo Qr Shop  merupakan  sistem  transaksi  yang  dibutuhkan saat pandemi maupun untuk berkelanjutan.
Maka,  user  interface  dan  user  experience  aplikasi prototype  Bringharjo  Qr  Shop  dinyatakan  dapat diterima  dengan  baik  oleh  pengunjung  dengan memberikan  kemudahan  serta  kenyamanan  bagi pengunjung.

## Daftar Pustaka
[1] Ananda,  V.  P.,  2020, Perancangan  User Interface  (UI)  Dan  User  Experience  (UX) Prototype  Aplikasi  Mobile  AIS  Menggunakan Metode  Lean  UX ,  SKRIPSI,  Universitas  Islam Negeri Syarif Hidayatullah, Jakarta
[2] Andi,  R.,  2018,  Perancangan  Desain  User  Interface (UI)  Aplikasi  Pencari  Kost,  SKRIPSI, Universitas Negeri Makassar, Makassar
[3] Annisa,  M.,  Ismiarta,  A.,  Hanifah,  M,  A,A.,  2019, Perancangan  Antarmuka  Pengguna  Sistem  Informasi Prosedur  Pelayanan  Umum  Menggunakan  Metode
Design  Thinking  (Studi  Kasus:  Fakultas  Ilmu Komputer Universitas Brawijaya , Jurnal Pengembangan  Teknologi  Informasi  dan  Ilmu
Komputer, e-ISSN: 2548-964X, Vol. 3, No. 4. April, 2019
[4] Arief,  M.Rudianto,  2011, Pemrograman  Web Dinamis  Menggunakan  PHP  dan  MYSQL ,  Andi
Offset, Yogyakarta.
[5] Arief, R. S., 2020, Perancangan UI/UX Menggunakan  Pendekatan  HCD  (Human-Centered Design) Pada Website Thriftdoor, THESIS, Informatika, Universitas Islam Indonesia, Yogyakarta
[6] Bagus,  L.,  2021,  Evaluasi  dan  Perancangan  User Interface/User  Experience  Pada  Website  INMAX Property  Menggunakan  Model  Double  Diamond, TUGAS AKHIR, Universitas Dinamika, Surabaya
[7] Galitz, Wilbert O, 2007, The Essential Guide to User Interface  Design:  An  Introduction  to  GUI  Design Principles  and  Techniques,  IN:  Wiley  Publishing, Indianpolis.
[8] George,  M.Scot,  2001, Prinsip-Prinsip  Sistem Informasi Manajemen , Mc. Graw-Hill, inc, Jakarta.
[9] ISO  9241-210,  2010,  Ergonomic  of  Human-System Interaction  -  Human-Centered  Design  for  Interactive Systems
[10] Ni,  P.V.L.S,  A.A,  Komplang,O,S,  Putu,  W.B  2020, Perancangan  User  Interface  dan  User  Experience SIMRS  Modul  Akuntansi  Keuangan, JITTER-Jurnal Ilmiah  Teknologi  dan  Komputer,  Vol  1,  No.  2.  2
Desember, 2020
[11] R.P, Hero, W., Herman, T., Hanifah, M, A,A., 2019, Perancangan  User  Experience  Aplikasi  Pemesanan Katering  Sekolah  Dengan  Menggunakan  Metode Human-Centered  Design, Jurnal  Pengembangan Teknologi  Informasi  dan  Ilmu  Komputer,  e-ISSN: 2548-964X, Vol 3, Noo. 3, Maret 2019
[12] Rifda,  F.A,  Yahya,  T.H.,  2019,  Analisa  Usability Desain  User  Interface  Pada  Website  Tokopedia Menggunakan  Metode  Heuristics  Evaluation,  Jurnal TEKNOKOMPAK,  ISSN:  1412-9663,  Vol.1  3,  No.
1., 2019
[13] Yoga,  A.,  2018,  Perancangan  Antarmuka  Pengguna Dengan Metode Lean UX Pada Website Hello Work Dinas  Tenaga  Kerja  Kabupaten  Pasuruan,  TUGAS AKHIR, STIKOM Surabaya, Surabaya.