Received on : 15/05/2020 Revised on : 20/12/2020 Accepted on : 23/03/2021

## PERANCANGAN DESAIN INTERFACE APLIKASI SMARTPHONE UNTUK MENU DI AGRA ROOFTOP DENGAN TEORI NIRMANA
Yohanes Anton Kurniawan 1 , Martin Setyawan 2
1,2 Program Studi Desain Komunikasi Visual, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana yohanesanton24@gmail.com 1 , martinsetyawan@gmail.com 2 .
Abstract: AGRA  Rooftop  is  one  of  the  highest  lounges  in  Central  Java.  Its operating  hours  at  AGRA  Rooftop  is  between  17:00 - 00:00.  The  difficulty experienced by AGRA Rooftop consumers is reading the menu at night because the lighting in AGRA Rooftop is designed to enjoy the sunset or the city of Solo at night. The design of the new menu interface is expected to help consumers to read  and  to  understand  the  menus  as  well as  to  help  the  promotion  the smartphone.  The  research method  and  design  strategy used  in  this  research  is prototyping and cyclic strategy. Interface design has been tested and the results show that the interface is quite interesting and helps consumers to choose and to understand the menu.
Keywords: interface design, menu, AGRA Rooftop
Abstrak: AGRA  Rooftop  merupakan  salah  satu  lounge  tertinggi  di  Jawa Tengah.  Jam  operasional  di  AGRA  Rooftop  antara  pukul  17.00 – 00.00. Kesulitan yang dialami oleh konsumen AGRA Rooftop adalah membaca menu yang ada pada waktu malam karena pencahayaan yang ada di AGRA Rooftop didesain  untuk  menikmati  sunset  atau  pemandangan  kota  Solo  pada  waktu malam.    Perancangan  interface  menu  yang  baru  diharapkan  dapat  membantu konsumen untuk membaca dan mengerti menu yang ada serta dapat membantu promosi  yang  dimiliki  kedalam  smartphone  .  Metode  penelitian  dan  strategi perancangan yang digunakan dalam penelitian ini adalah prototype dan cyclic strategy.  Perancangan  interface  sudah diujikan  dan  didapatkan  hasil  bahwa interface  yang  ada  sudah  cukup  menarik  dan  membantu  konsumen  dalam memilih dan memahami menu yang ada.
Kata kunci: desain interface, menu, AGRA Rooftop

## LATAR BELAKANG
AGRA  Rooftop,  merupakan  lounge pertama yang memiliki lokasi tertinggi di kota  Surakarta.  AGRA  Rooftop  dibuka pada pada bulan April 2016 dan terletak di lantai  29,  Hotel  Alila  Solo.  Lounge  ini memiliki lokasi yang cukup menarik untuk menikmati  sunset  di  kota  Surakarta  atau menikmati keindahan kota di malam hari. AGRA Rooftop memiliki jam operasional mulai jam 5 sore sampai dini hari. AGRA Rooftop  didesain sebagai  tempat  untuk bersantai sekaligus menikmati pemandangan  sunset  kota  Solo  hingga waktu  malam.  Agar  konsumen  dapat menikmati  pemandangan  kota  Solo  pada waktu  malam,  maka  pencahayaan  di
AGRA Rooftop tidak dibuat terlalu terang.
Hal  tersebut  menimbulkan  masalah tersendiri  bagi  konsumen.  Permasalahan yang  dialami  oleh  konsumen  adalah  saat memilih  menu  pada malam  hari, menurut staf  dari  AGRA  Rooftop  dan  wawancara dari beberapa  konsumen  bahwa  7  dari  10 pengunjung  mengalami  kesulitan  untuk membaca menu yang ada pada malam hari karena kurangnya
pencahayaan.
Pengalaman  lain  yang  dirasakan  saat membaca  menu  yang  ada  menurut konsumen  adalah  saat  membaca  menu menjadi  kurang  mudah  karena  harus membalik  kertas  dan  jumlahnya  tidak sedikit.  Permasalahan  yang  dihadapi juga oleh  AGRA  Rooftop  adalah  biaya  cetak
yang tidak sedikit untuk mengganti menu. Perancangan interface untuk dijadikan aplikasi  sudah  pernah  dilakukan  oleh Wisnu  Pramudita  (2014)  yang  membuat katalog untuk Meercut Distro & Clothing.
Selanjutnya  Andre  Christian  (2013)  yang membuat  katalog  penjualan  furniture.
Kusnawi Kintar (2015) dalam penelitiannya  juga  membahas  mengenai penggunaan  user  interface  dan  user experience, sehingga membantu pengguna aplikasi untuk mempermudah mendapatkan  informasi  perusahaan di dalam  media  online  secara  jelas  dan menarik  bagi  pembeli  produk  dan  calon pengguna Penelitian ini diadakan untuk mengubah  menu  yang  awalnya  dicetak dalam kertas dibuat menjadi bentuk digital sehingga dapat
diakses melalui
smartphone.  Aplikasi  dalam  smartphone memerlukan  adanya  sebuah  interface untuk menjalankan aplikasi tersebut. Oleh karena  itu,  penelitian  ini  diadakan  untuk merancang  interface  yang  nantinya  akan diterapkan dalam aplikasi tersebut.
Penggunaan teori nirmana dalam perancangan  ini  nantinya  akan  digunakan sebagai dasar penentuan desain yang akan digunakan, baik itu dari komposisi, warna serta  elemen  yang  akan  digunakan nantinya.  Penggunaan  smartphone  dapat menjadi inovasi baru bagi AGRA Rooftop selain  untuk membantu  menghemat  biaya cetak saat ada perubahan menu karena jika ada perubahan tidak perlu untuk mencetak kembali  melainkan  dapat  diubah  dan aplikasi  yang  ada  tinggal  diperbarui  saja, sekaligus  dapat  menghemat  waktu  yang dimiliki  oleh  konsumen  karena  melalui smartphone  pengunjung  dapat memilih menu sebelum datang ke AGRA Rooftop. Perancangan  ini  juga  bermanfaat  bagi AGRA  Rooftop  untuk  membantu  sebagai media  promosi  kepada  konsumen  atau masyarakat. Penggunaan smartphone juga cukup efektif karena selain tingkat cahaya yang  dapat diatur,  pengunjung  juga  dapat melihat foto produk yang akan dipilihnya nanti.

## METODE PENELITIAN
Metode  yang  akan  dipakai  adalah
penelitian  metode  prototype,  yakni  suatu proses  yang  memungkinkan  developer membuat  sebuah  model  software,  metode ini baik digunakan apabila client tidak bisa memberikan  informasi  yang  maksimal mengenai  kebutuhan  yang  diinginkannya (Yurindra, 2011:404)
Strategi yang digunakan dalam penelitian  ini  adalah  Cyclic  strategy, Cyclic  strategy  atau  strategi  ini  pada dasarnya  memiliki  prinsip  yang  sama dengan  linear  strategy,  hanya  saja  pada strategi  ini  ada  kalanya  suatu  tahap  perlu diulang kembali untuk menampung umpan balik  (Sarwono,  2007:  28).  Tahapan penelitian  dengan  cyclic  strategy  dapat dilihat di Gambar 1.
Gambar 1. Metode Linear Strategy [Sumber : Sarwono, 2007]
Berdasarkan  bagan  diatas,  linear strategy  terbagi  menjadi  4  tahapan  yaitu tahap  identifikasi  masalah,  tahap  analisis data,  tahap  perancangan  dan  tahap pengujian.  Tahapan  pengumpulan  data dilakukan  dengan  wawancara  kepada outlet  manager  AGRA  Rooftop  dan observasi  pada  lokasi  AGRA  Rooftop. Tahap  analisis  data  dilakukan  dengan menganalisis  data  verbal,  visual  dan menentukan  karakteristik  yang  akan dituangkan  pada  perancangan  interface. Tahapan  selanjutnya  adalah  tahapan perancangan,  dalam  tahapan  perancangan ini terbagi menjadi beberapa bagian yakni pembuatan konsep, perancangan kemasan, perancangan katalog serta hasil perancangan kemasan dan katalog. Tahapan  selanjutnya  adalah  tahapan pengujian,  pengujian  dilakukan  kepada pemilik batik,  desainer  kemasan  dan responden  selaku  target  konsumen  dari AGRA Rooftop.

## HASIL Tahap Identifikasi Masalah
Tahap  pertama  dalam  penelitian  ini
adalah  identifikasi  masalah  berdasarkan permasalahan yang ada mengenai masalah yang ada di dalam penelitian ini. Observasi dilakukan juga secara langsung di AGRA Rooftop.  Berdasarkan  observasi  yang dilakukan,  data  lain  yang  didapatkan adalah  corporate  identity,  promo  apa  saja yang  ada  di  AGRA  Rooftop  selama  satu minggu,  view  yang  dimiliki  AGRA Rooftop waktu sore dan foto lokasi AGRA Rooftop pada waktu sore dan pada waktu malam hari. AGRA Rooftop menggunakan Instagram  dan  flyer  sebagai  media promosi.
Gambar 2. Logo AGRA Rooftop
Gambar 3. View AGRA Rooftop Waktu Sore

## Gambar 4. Lokasi AGRA Rooftop

## Tahap Analisis Data
Tahap kedua yaitu analisis data verbal dan visual, dalam tahapan ini menganalisis dan  menentukan  karakteristik  yang  akan dituangkan  pada  perancangan  interface. Hasil  wawancara  yang  dilakukan  kepada 10  pengunjung  AGRA  Rooftop  secara acak mengenai menu yang ada sebelumnya,  7  dari  10  pengunjung mengalami  kesulitan  untuk  membaca menu  yang  ada  pada  malam  hari  karena kurangnya pencahayaan. Pengalaman lain yang dirasakan  saat  membaca  menu yang ada  menurut  konsumen  adalah  saat membaca menu  menjadi  kurang  mudah karena  harus  membalik  kertas  dan jumlahnya  tidak  sedikit.  Permasalahan yang  dihadapi  juga  oleh  AGRA  Rooftop adalah biaya cetak yang tidak sedikit untuk mengganti  menu.  Pada  analisis  ini didapatkan  bahwa  menu  yang  ada sekarang  secara  keseluruhan  belum  bisa dipahami oleh konsumen AGRA Rooftop. Analisis  data  lebih  mengarah  kepada penarikan kesimpulan berdasarkan permasalahan yang ada.

## Tahap Perancangan
Tahap ketiga yaitu tahap perancangan. Pada  tahapan  perancangan  ini,  akan dilakukan pemetaan  analisis  yang  sudah dibuat  untuk  menjadi  dasar  proses brainstorming konsep perancangan interface. Untuk konsep dari perancangan desain interface ini menampilkan tampilan yang  user  interface  yang  minimalis  agar dapat  mudah  dipahami  oleh  konsumen pada saat penggunaannya. Pada perancangan  ini,  gaya  desain  yang  akan digunakan  merupakan  gaya  flat  design. Penggunaan gaya desain ini dipilih karena
dalam penerapannya desain yang digunakan  cukup  sederhana  dan  mudah dipahami.
Konsep perancangan pada awal aplikasi  ini  akan  ada  login  screen  agar konsumen  AGRA  Rooftop  terdata,  dan mempermudah untuk
menyebarkan promosi  acara  yang  akan  diadakan  oleh AGRA  Rooftop  nantinya.  Pada  menu utama terdapat enam buah menu, dua menu untuk  memilih  menu  makanan  dan minuman,  sebuah  tombol  untuk  bagian promosi  /  event  yang  ada  di  AGRA Rooftop,  baik  promo  selama  satu  minggu maupun  event  khusus  yang  diadakan  di AGRA  Rooftop.  Pada  bagian  bawah aplikasi  ini  nantinya  akan  ada  tombol untuk booking tempat di AGRA Rooftop, tombol  untuk  menuju  Instagram  dari AGRA  Rooftop.  Serta  menu  untuk menjelaskan tentang AGRA Rooftop, jam operasional,  dan  peraturan  secara  umum yang  berlaku  di  AGRA  Rooftop.  Tombol ini juga berfungsi untuk bagian contact us,
sehingga pengunjung
dapat
menyampaikan  kritik, pujian,  opini,  ide dan  gagasan  kepada  AGRA  Rooftop melalui telepon dan email. Dan untuk latar belakang aplikasi ini akan digunakan foto suasana dari AGRA Rooftop waktu sunset.
Penggunaan warna yang akan digunakan  dalam  aplikasi  ini  nantinya adalah  warna hitam,  merah  dan  putih dengan susunan RGB :
Hitam = R=0 G=0 B=0 Merah = R=237 G=50 B=55 Putih = R=255 G=255 B=255 warna  ini  dipilih  karena  warna  ini merupakan  corporate identity  dari  AGRA Rooftop.
Jenis  font  yang  digunakan  dalam aplikasi ini adalah Sans Serif dengan tipe Gill  Sans.  Font  ini  digunakan  karena merupakan  corporate identity  dari  AGRA Rooftop.
Ukuran  yang  digunakan  masing – masing  icon  dalam  aplikasi  ini  nantinya 490  x  190px.  Ukuran  ini  diambil  karena nantinya  dapat  menggunakan  banyak menu  tanpa  mengorbankan  kenyamanan dalam penggunaan aplikasi ini.
Selanjutnya adalah pembuatan sketsa. Dalam  pembuatan  sketsa  terdapat  untuk
layout  tampilan  menu  beserta  icon  yang akan digunakan nantinya dalam pembuatan aplikasi. Sketsa untuk icon dan layout interface dapat dilihat pada Gambar 5 dan Gambar 6.
Gambar 5. Sketsa Icon
Gambar 6. Sketsa Layout
Pada bagian login screen, dan booking diletakkan di bagian tengah supaya mudah untuk dibaca mengenai apa saja yang akan di  input  konsumen.  Pada  bagian  home screen,  peletakan  menu  berada  di  sisi sebelah kiri agar konsumen dapat menggunakan  dengan  satu  tangan.  Pada bagian  kategori makanan  dipilih  tampilan grid  karena  foto  untuk  menjelaskan  jenis apa  saja  makanan  apa  saja  yang  berada dalam kategori tersebut lebih jelas terlihat. Sedangkan  untuk  bagian  menu  dipilih layout  secara  list  karena  informasi  yang ada dapat disampaikan secara jelas baik itu nama menu, harga, bahan yang digunakan serta tampilan menu yang dipilih.

## Pembuatan Button Menu
Button menu bertujuan untuk memudahkan  konsumen  saat  memilih bagian  untuk  menu  makanan,  minuman, promosi,  memesan  tempat,  dll.  Tahap proses pembuatan icon dan hasil icon dapat dilihat pada Gambar 7 dan Gambar 8.
Gambar 7. Proses Pembuatan Icon

## Gambar 8. Icon yang akan digunakan

## Pengambilan Foto
Dilakukan  pengambilan  foto  sesuai dengan konsep yang ada. Semua foto yang ada akan disimpan dalam bentuk RAW dan jpeg.  Bentuk  RAW  nantinya  akan digunakan  pada  proses  selanjutnya,  yaitu proses  editing,  sedangkan  bentuk  jpeg akan  digunakan  hanya  sebagai  preview saat memilih atau seleksi foto.

## Gambar 9 Proses Pengumpulan Foto

## Seleksi Foto Dan Editing
Dilakukan  seleksi  foto  dari  beberapa foto yang sudah diambil. Seleksi dilakukan dengan  melakukan  preview  pada  bentuk jpeg  foto.  Foto  yang  sudah  terpilih kemudian  akan  di  edit  ulang  file  RAW yang  ada  menggunakan  program  khusus edit  foto.  Editing  yang  dilakukan  hanya sebatas  mengubah  brightness,  contrast, saturation  dan  cropping  dari  foto  yang sudah  ada  supaya  menjadi  lebih  terlihat menarik. Foto yang sudah diedit dan data
verbal yang telah terkumpul akan dimasukkan ke dalam draft untuk dijadikan layout.
Gambar 10. Proses Editing Foto

## Pembuatan Desain Layout Aplikasi
Pembuatan desain  layout  aplikasi dilakukan  karena  merupakan  hasil  akhir dan  akan  diujikan  kepada  staff  dan  tamu AGRA Rooftop. Tahap proses pembuatan layout interface dapat dilihat pada Gambar 11.

## Gambar 11. Proses Pembuatan Layout Interface
Dalam  desain  ini  digunakan  warna merah untuk icon, dan font yang digunakan berjenis  sans  serif  dengan  tipe  Gill  Sans, serta  menggunakan  warna  hitam  sebagai background pada menu. Pada  login  screen  terdapat  2  bagian yaitu bagian sign up dan sign in. Pada login screen dapat dimanfaatkan sebagai pengumpulan  data  dari  konsumen  dan dapat sebagai data saat konsumen reservasi tempat.
Gambar 12. Tampilan Login Screen [Sumber: Dokumentasi Penulis]
Pada menu utama terdapat background dari  area  outdoor  dari  AGRA  Rooftop. Pada bagian ini terdapat 6 menu yaitu food, drink,  promotion,  booking,  about  us,  dan follow us.
Gambar 13. Tampilan Menu Utama
Pada  sub  menu  dari  food,  drink  dan
promotion  terdapat  pilihan  untuk  jenis menu  selanjutnya.  Dalam  sub  menu terdapat  foto  yang menggambarkan  isi menu apa saja yang ada di dalamnya. Pada bagian menu kategori baik pada makanan, minuman dan promosi, terdapat foto menu dan  flyer  acara  yang  sedang  berlangsung serta penjelasannya.
Pada bagian reservasi, terdapat kolom untuk  konsumen  menentukan  tanggal, waktu  dan  jumlah  konsumen  yang  akan pesan  tempat  di  AGRA  Rooftop.  Layout untuk  bagian  reservasi  dapat  dilihat  pada Gambar 15.

## Gambar 15. Tampilan Reservation
Pada  bagian  About  Us  merupakan penjelasan mengenai AGRA Rooftop baik jam  operasional  maupun  peraturan  yang berlaku  di  AGRA  Rooftop.  Layout  untuk bagian reservasi dapat dilihat pada Gambar 16.

## Tahap Pengujian
Tahap  keempat penelitian  ini  adalah pengujian  desain  interface  ini.  Desain interface yang  sudah jadi tersebut kemudian  akan  diujikan  kepada  beberapa staff  dan  tamu  dari  AGRA  Rooftop. Berdasarkan  pengujian  kepada  konsumen yang  dilakukan  dengan  cara  memberikan kuesioner  kepada  40  konsumen  secara acak  di  AGRA  Rooftop.  Materi  yang diujikan  meliputi  layout,  dan  kejelasan materi  yang  ada  dalam  layout  tersebut.
Daftar  pertanyaan  yang  diajukan  kepada konsumen dapat dilihat pada Tabel 1.
Tabel 1. Daftar Pertanyaan Kuesioner [Sumber: Dokumentasi Penulis No. Daftar Pertanyaan
Jawaban San gat Set uju Set uju Cu kup Ku ran g Set uju Sang at Tidak Setuj u 1 Apakah menurut anda  background  di menu  utama  sudah dapat menggambarkan area AGRA Rooftop? 2 Apakah icon yang
ada    di  menu  utama dapat menggambarkan identitas milik
AGRA Rooftop?
3 Apakah informasi yang  ada  di  menu utama  dapat  anda pahami?
4 Apakah menurut anda  tampilan  pada bagian sub menu dan menu didalamnya mudah dipahami?
5 Apakah menurut
anda foto yang ada di bagian sub  menu
dapat menjelaskan isi menu  seperti  apa yang  ada  di  bagian tersebut?
6 Apakah tampilan pada  bagian  menu mudah dipahami
dipahami?
7 Dengan  adanya  foto di  dalam  tampilan
menu,  apakah dapat membantu anda
dalam memilih menu yang ada?
8 Apakah tampilan dari  bagian  reservasi mudah dipahami
untuk digunakan?
9 Apakah tampilan
dari  bagian  about  us mudah dipahami?
Baik  itu  penjelasan mengenai AGRA Rooftop maupun jam operasionalnya.
10 Apakah penggunaan
warna  hitam  pada icon maupun background pada menu dapat
membantu memperjelas dan memahami keseluruhan dalam tampilan ini ?
11 Apakah secara
keseluruhan  desain yang ada cukup sederhana dan
mudah dipahami?
Penilaian  yang  diterapkan  sebagai berikut :
Tabel 2. Daftar Point Penilaian Jawaban Kuesioner Skor Keterangan 1 Point Tidak Setuju
2 Point Kurang Setuju 3 Point Cukup 4 Point Setuju 5 Point Sangat Setuju
Berikut  kriteria interpretasi  skornya berdasarkan interval:
Tabel 3. Interval Persentase Penilaian Persentase Keterangan 0% - 19,99% Sangat tidak setuju 20% – 39,99% Tidak setuju 40% – 59,99% Cukup 60% – 79,99% Setuju 80% – 100% Sangat setuju

## Berikut rangkuman hasil penilaian 40 responden dari 11 pertanyaan tersebut.
Tabel 4. Hasil Jawaban Kuesioner [Sumber: Dokumentasi Penulis]
Jawaban Responden Jumlah Jawaban Sangat tidak setuju 1 Tidak setuju 7 Cukup 66 Setuju 215 Sangat setuju 151
Maka penilaian interpretasi responden terhadap  layout  desain  tersebut  dihitung berdasarkan skala likert adalah :
Total skor / Y x 100 = 1828 / 2200 x 100 = 83.0 %
Berdasarkan hasil tersebut perancangan  layout  ini  berada  dalam kategori sangat setuju menarik dan mudah dipahami oleh konsumen.
Pengujian  wawancara  yang  kedua dilakukan  kepada  staf  di  AGRA  Rooftop dengan pertanyaan yang sama. Hasil yang didapat  yaitu    dari  segi  desain  cukup mudah  dipahami  dan  cukup  menarik.
Terdapat saran apabila aplikasi ini bisa di
koneksikan  dengan  aplikasi  yang  sudah dimiliki AGRA Rooftop akan dapat lebih mempersingkat  waktu  sehingga  orderan dari meja tamu dapat langsung diteruskan ke bagian dapur.
Pengujian  wawancara  yang  ketiga dilakukan kepada Bapak Yusna Ardiansyah selaku  outlet  manager  di AGRA Rooftop. Hasil yang didapat yaitu desain  secara  keseluruhan  sudah  cukup menarik  dan  merupakan  suatu  inovasi untuk AGRA Rooftop untuk mengenalkan menu dan mempromosikan event yang ada di  AGRA  Rooftop.  Terdapat  masukan untuk  desain  menu  utama,  akan  lebih menarik jika dibuat layout lain supaya area AGRA  Rooftop  yang  menjadi  latar belakang dapat  lebih ditonjolkan.
Dari hasil beberapa pengujian
wawancara yang sudah dilakukan didapatkan hasil yang saling  berhubungan yaitu  layout  yang  sudah  ada  cukup menarik,  dan  kejelasan  materi  dapat diperoleh  ke  konsumen  yang  nantinya akan menggunakan aplikasi tersebut.

## KESIMPULAN
Kesimpulan yang didapat pada perancangan desain interface untuk aplikasi  menu  AGRA  Rooftop  sudah cukup  menarik, mudah  dipahami  oleh konsumen. Kejelasan materi dalam layout yang  ada  sudah  dapat  dipahami  oleh konsumen  maupun  oleh  tim  dari  AGRA Rooftop. Untuk selanjutnya dapat dikembangkan sebagai inovasi untuk menu maupun  media  promosi  dari  AGRA Rooftop.

## DAFTAR PUSTAKA
Pramudita, Wisnu; dkk. 2014. Perancangan dan  Implementasi  Aplikasi  Katalog Digital  Dalam  Pemilihan  Busana Berbasis  Multimedia  (  Studi  Kasus  : Meercut Distro & Clothing ). Salatiga: Universitas Kristen Satya Wacana Andre  Christian.  2013. Perancangan Aplikasi Katalog Penjualan Furniture
Dengan  Memanfaatkan  Teknologi Augmented  Reality  Pada  Android
Platform. Salatiga: Universitas Kristen Satya Wacana
Kintar,  Kusnawi.  2015. Implementasi  UI dan  UX  Design  Pada  Website  PT.
TIME  EXCELINDO. Yogyakarta  : Teknik Informatika STMIK AMIKOM Yogyakarta Sarwono,  Jonathan  dan  Lubis.  2007. Metode Riset untuk Desain Komunikasi  Visual. Yogyakarta:  CV. Andi Offset