## ANALISIS USER INTERFACE SITUS WEB IWEARUP.COM

## Irma Rochmawati 1
Program Studi Desain Komunikasi Visual Fakultas Desain, Universitas Komputer Indonesia pos-el: irma@email.unikom.ac.id
Diterima: 09 Feb 2019 Direvisi: 20 Feb 2019 Disetujui: 24 Feb 2019
Abstrak .  IWEARUP.COM  merupakan  sebuah  situs  web  yang  berbasis e-commerce ,  di dalamnya  memuat  informasi  mengenai  pembelian,  penjualan,  dan  pemasaran  produk fashion.  Sebuah  situs  web  merupakan  salah  satu  contoh  aplikasi  desain  sebagai  alat pemasaran. Desain situs web yang baik harus dapat menampilkan informasi dengan jelas. Terutama  bagaimana  menampilkan  antarmuka  ( interface )  sebaik  mungkin  agar pengunjung situs tidak kebingungan dengan informasi yang ditampilkan. Antarmuka yang buruk  berpengaruh  terhadap  pengguna  ( user )  dalam  produktivitas  atau  pengalaman mengunjungi  sebuah  situs  web.  Hal  ini  dibantu  dengan  hierarki  visual  yang  merupakan salah satu prinsip terpenting dibalik setiap desain situs web. Maka dilakukan kajian pada situs  web  IWEARUP.COM  dengan  studi  kasus  instrumental  guna  menghasilkan  suatu kesimpulan  yang  dapat  diaplikasikan  dalam  perancangan  sebuah  situs  web  berbasis e- commerce . Tujuannya agar desain situs web selaras dengan konten yang akan dimuat dalam hal  perancangan  situs  web  dan  menambah  pengetahuan  mengenai  hierarki  visual  desain situs serta kaitannya dengan antarmuka pengguna ( user interface ).
Kata kunci: Desain, hierarki visual, IWEARUP.COM, user interface , situs web .

## IWEARUP.COM USER INTERFACE ANALYSIS
Abstract.  IWEARUP.COM  is  a  website  that  is  an  e-commerce  based.  It  contains information about buying, selling, distributing, and marketing fashion products. A business website is an example of using design as a marketing tool. Display of charming  website with  design  is  an  attraction.  However,  a  good  website  design  must  be  able  to  display information clearly. Especially how to make the interface possible as it is not confused with the  information  displayed.  Poor  interfaces  affect  the  users  productivity  or  experience  in visiting a website. This is a visual hierarchy which is the most important principles behind every  website  design.  With  an  instrumental  case  study  of  the  approach  to  produce conclusions  that  can  be  applied  in  designing  e-commerce-based  website.  The  goal  is  to make the website design in line with the content that will increase the website design and increase knowledge about the visual hierarchy of  web design and its relation to the user interface.
Keywords: Design, IWEARUP.COM, user interface, visual hierarchy, website.
1 Alamat korespondensi: Jl. Dipati Ukur 112-116 Lebak Gede Coblong Kota Bandung 40132

## 1. Pendahuluan
Desain  yang  baik  harus  bisa  berfungsi  dan  dapat  menyampaikan  informasi  secara  jelas. Terutama  jika  menggunakan  desain  sebagai  alat  pemasaran  (Anggoro,  2016).  Alat pemasaran  yang  populer  saat  ini  salah  satunya  adalah  situs  web.  Situs  web  atau website merupakan kumpulan informasi yang terdiri dari halaman web yang saling terhubung satu sama  lain  yang  disediakan  secara  perorangan,  kelompok,  atau  pun  organisasi.  Situs  web yang  baik  menampilkan  visual  yang  menarik  dan  berfungsi  sesuai  dengan  kebutuhan pengguna.
Interface atau antarmuka merupakan jembatan antara dunia sebuah produk atau sistem dan dunia  pengguna  (Hackos  &  Redish,  1998).  Antarmuka  merupakan  media  yang menghubungkan komunikasi antara dua domain (produk/sistem dan manusia) dan berperan penuh dalam menerjemahkan setiap aksi dan reaksi dari kedua domain tersebut. Antarmuka berlaku pada beberapa jenis atau varian produk atau sistem. Dalam kehidupan sehari-hari, manusia dapat berinteraksi dengan obyek-obyek yang ada di sekitarnya melalui keberadaan antarmuka ini (Darmawan, 2013).
Desain user interface yang baik pada sebuah  situs web akan membuat pengunjung ingin berlama-lama pada situs web tersebut. Tetapi sebaliknya, sebuah desain user interface yang buruk dari sebuah situs web membuat pengunjung cepat meninggalkan situs web tersebut. Bahwa user  interface merupakan  unsur  yang  paling  penting  dari  sebuah  sistem  berbasis komputer atau produk (S.Sridevi, 2014).
Interface sangat penting pada sistem situs web, karena hampir semua situs web memiliki antarmuka  pengguna  ( user  interface ). Interface yang  buruk  membuat  frustasi  bagi pengguna  dan  akan  mempengaruhi  produktivitas  atau  pengalaman  dalam  mengunjungi sebuah situs web.
User  interface (UI)  adalah  apa  yang  berinteraksi  dengan  pengguna  sebagai  bagian  dari sebuah  pengalaman.  UI  bukan  hanya  tentang  warna  dan  bentuk,  melainkan  tentang menyajikan tools (alat) yang tepat pada user (pengguna) untuk bisa mencapai tujuannya. Selain  itu,  UI  lebih  dari  sekedar  tombol,  menu,  dan form yang  harus  diisi  oleh user .  UI adalah  koneksi  antara  pengguna  dan  pengalaman,  kesan  pertama,  dan  kesan  yang  kekal. Desain  UI  yang  baik  harus  menjaga  keseimbangan  yang  sempurna  antara  estetika  yang menawan dan interaktivitas yang tanpa memerlukan usaha lebih (Bank & Cao, 2014).
Menurut Fadeyev (dalam Nawawi, 2014), user interface design tidak hanya sekedar tombol ( button ) dan menu, namun interaksi yang tercipta antara pengguna dengan aplikasi. Hal ini berarti, user interface design bukan sekedar tentang bagaimana penampilan produk, tetapi lebih  kepada bagaimana produk tersebut bekerja, misalnya lebih memikirkan bagaimana merancang elemen-elemen supaya dapat difungsikan dengan baik jika dibandingkan hanya memilih warna atau bentuknya semata tanpa argumentasi manfaat yang jelas.
Hierarki  dalam  desain  adalah  suatu  cara  untuk  menuntun  mata  pembaca  kepada  sesuatu hal.  Juga  merupakan  salah  satu  cara  untuk  menunjukkan  tingkat  pentingnya  informasi. Desainer dapat menggunakan kontras untuk menuntun pembaca dalam membaca informasi dan gambar pada susunan yang diinginkan (Landa, Gonella, and Brower, 2007:180).
Hierarki visual merupakan salah satu prinsip terpenting yang ada dibalik setiap desain situs web.  Hal  ini  bertujuan  agar  desain  situs  web  selaras  dengan  konten  yang  akan  dimuat. Prinsip hierarki visual dalam desain situs web harus benar-benar diikuti oleh para desainer grafis, sebab prinsip ini mengatur elemen-elemen mengikuti perhatian yang berhubungan secara  langsung  dengan  titik  fokus.  Prinsip  Hierarki  visual  merupakan  prinsip  yang mengatur elemen-elemen mengikuti perhatian yang berhubungan secara langsung dengan titik fokus. Titik fokus merupakan perhatian yang pertama, kemudian baru diikuti perhatian ke  yang  lainnya.  Tiga  pertanyaan  penting  mengenai  hierarki  visual  adalah;  mana  yang Anda lihat pertama? Mana yang Anda lihat kedua? Mana yang Anda lihat ketiga?
Penelusuran teoritis ini dimulai dengan membahas hierarki visual dalam kaitannya dengan user interface pada situs web IWEARUP.COM. Penelitian ini dibuat berdasarkan metode studi  literatur  pustaka  untuk  memperoleh  informasi  data  sebagai  bahan  acuan,  dan pengumpulan data secara lengkap dengan cara observasi pada studi kasus yang diteliti.
Studi  kasus  merupakan  salah  satu  jenis  penelitian  dalam  pendekatan  kualitatif  yang menelaah sebuah “kasus” tertentu dalam konteks atau setting kehidupan nyata kontemporer (Creswell, 2014). Dalam kajian ini dipilih tipe penelitian yang berdasarkan tujuan, yakni studi kasus instrumental tunggal yang berfokus pada satu isu atau persoalan tertentu.
Tabel 1. Aspek-aspek Penelitian Sumber: Dmitry Fadeyev (2011)

## USER INTERFACE
Kejelasan ( clarity ) Ringkas ( concision ) Mudah Dikenali ( familiarity ) Responsiveness Konsistensi ( consistency ) Estetika ( aesthetics ) Efisiensi ( efficiency ) Pengampunan (forgiveness)

## 2. Pembahasan
Dalam  penelitian  ini  dibahas  mengenai user  interface dalam  sebuah  situs  web  fashion bernama  UP  (www.iwearup.com).  Secara  visual  terdapat  beberapa  unsur  yang  menarik perhatian  ketika  melihat  tampilan  situs  IWEARUP.COM  ini.  UP  merupakan  situs  web fashion yang menarik segmentasi pasar dari kalangan remaja khususnya perempuan. Secara keseluruhan tampilan situs web IWEARUP.COM memiliki kesan girly
(kewanitaan/feminin) yang terlihat dari pemilihan warna maupun konten dalam situs web tersebut (lihat Gambar 1). Hal inilah yang menjadi daya tarik utama yang membuat situs web ini penting untuk diteliti, karena secara tampilan, situs web UP berbeda dari situs web e-commerce yang lainnya.

## Gambar 1. Tampilan Homepage Situs Web IWEARUP.COM (2017)
User Interface Dalam Situs Web IWEARUP.COM User  interface merupakan  sarana  untuk  interaksi  antara  manusia  dengan  sistem  (Stone, 2011). Bisa diterjemahkan juga sebagai ruang dimana interaksi antara manusia dan mesin berlangsung. User  interface bukan  hanya  mengenai  tampilan  saja,  akan  tetapi  lebih menekankan  kepada  usaha  dalam  kemudahan  interaksi  antara  pengguna  dengan  sistem aplikasi,  disesuaikan  dengan  tujuan  interaksi  manusia  dengan  sistem.  Tujuan  utama perancangan user  interface adalah  untuk  memudahkan  pengoprasian  sistem  dalam penyampaian konten informasi.
Penelitian ini dikaji berdasarkan 8 aspek penting dalam user interface yang dikemukakan oleh Dmitry Fadeyev (2011). Aspek-aspek tersebut diantaranya kejelasan ( clarity ), ringkas ( concision ), mudah dikenali ( familiarity ), responsiveness , concistency , mempunyai muatan estetik ( aesthetics ), efficiency , dan forgiveness .

## 1. Kejelasan (Clarity)
Berdasarkan  pengamatan  situs  web  ini  sudah  cukup  memenuhi  aspek clarity .  Di  dalam halaman “ product ” terdapat setiap produknya dipasang dengan menampilkan foto produk dan  memiliki  deskripsi  tentang  spesifikasi  pada  setiap  produk  tersebut.  Sehingga spesifikasi produk-produk yang diposting di IWEARUP.COM dapat terlihat dengan jelas (lihat Gambar 2).

## Gambar 2. Aspek Kejelasan (Clarity)

## 2. Ringkas (Concision)
Aspek ringkas dapat dilihat dari tampilan utama situs web ini yang menyediakan banyak menu,  adanya  kolom pencarian dan penggolongan produk berdasarkan  kategori  tertentu, sehingga  dapat  memudahkan  pengunjung  untuk  menemukan  barang  atau  produk  yang ingin dicari.

## Gambar 3. Aspek Ringkas (Concision)
Pada  situs  web  IWEARUP.COM,  tampilan  menu/navigasi  di  layar  monitor desktop berbeda  dengan  di  layar mobile ( smartphone ).  Tampilan  menu/navigasi  di  layar mobile didesain lebih ringkas dan simple agar menyesuaikan dengan ukuran layarnya. Rancangan pada situs web ini diatur dan disesuaikan untuk kemudahan user , supaya dapat melakukan transaksi dengan mudah jika ingin membeli produk di situs web tersebut (lihat Gambar 3).

## 3. Mudah dikenali (Familiarity)
Aspek familiarity seperti terlihat pada Gambar 4 dan Gambar 5 sudah terpenuhi pada situs web  IWEARUP.COM.  Hal  ini  dapat  terlihat  jelas  dari  desain header dan footer . Keseragaman  tampilan  dan  elemen  visual  pada  setiap  halaman,  diantaranya  logo  “UP” yang simple pada bagian header dan warna yang digunakan untuk desain header dan footer tersebut, sehingga mudah dikenali oleh pengunjung situs web.
Gambar 4. Aspek Familiarity pada header
Gambar 5. Aspek Familiarity pada footer

## 4. Responsiveness
Situs  web  IWEARUP.COM  ini  memiliki  respons  yang  baik  terhadap  pengguna  ( user ), hampir  semua  navigasi  dan  tombol  ketika  diklik  dapat  diakses  dengan  cepat  dan memberikan  umpan  balik  ( feedback )  yang  baik  terhadap  pengguna  seperti  terlihat  pada Gambar 6.

## Gambar 6. Aspek Responsiveness

## 5. Konsistensi (Consistency)
Dilihat  dari  segi  desain  tampilannya,  situs  web  IWEARUP.COM  ini  sangat  konsisten seperti terlihat pada Gambar 7. Teridentifikasi dari desain tampilan dan perpaduan warna yang  sama  di  semua  halaman.  Kemudian  penggunaan  huruf  yang  sesuai  dan  tidak berlebihan dalam hal keterbacaan sehingga memudahkan user dalam mengakses situs web.

## 6. Mempunyai Muatan Estetik (Aesthetics)
Dilihat  dari  nilai  estetisnya,  situs  web  IWEARUP.COM  ini  sudah  tersusun  secara  baik. Perpaduan warnanya lebih berkesan girly (kewanitaan). sehingga apabila dilihat dari segi estetika terlihat sangat feminin seperti terlihat pada Gambar 8.
Warna dan kontras pada situs web IWEARUP.COM dapat terlihat di bagian menu. Hierarki visual terbentuk dari kontras antar warna teks menu yakni hitam dengan background konten navigasi berwarna merah muda/pink serta background dasar berwarna kuning.  Kemudian ketika  teks  menu  di hover ,  warna  kontras  semakin  terlihat  pada  kotak  abu-abu  yang membungkus teks menu.
Gambar 7. Warna dan Kontras dalam Situs Web IWEARUP.COM
Gambar 8. Aspek Muatan Estetik (Aesthetics)
Dalam  situs  web  IWEARUP.COM,  garis  digunakan  sebagai  pembatas  konten  dalam halaman “ Shopping Basket” . Di dalamnya terdapat garis lurus horisontal (solid) berwarna
hitam sebagai pembatas konten daftar produk dengan termin pembayaran, dan garis putus- putus ( dotted ) sebagai pembatas pada bagian tombol ( button ), hal ini terlihat seperti pada Gambar 9.
Gambar 9. Garis dalam Situs Web IWEARUP.COM
Penerapan tekstur kerap dimanfaatkan untuk hierarki visual. Tekstur yang susunannya agak teratur  dapat  disebut  sebagai  corak/pola  ( pattern ).  Dalam  situs  web  IWEARUP.COM terdapat  corak  yang  tersusun  dari  garis-garis  diagonal,  dapat  teridentifikasi  pada  latar ( background ) seperti terlihat pada Gambar 10.

## Gambar 10. Tekstur dalam Situs Web IWEARUP.COM
Pada  hierarki  visual  dalam  desain  situs  web  IWEARUP.COM,  ukuran  juga  memiliki peranan  penting  yang  dapat  mempengaruhi  perhatian  pengunjung  situs  web. Memperhatikan ukuran pada masing-masing elemen yang ada di sebuah halaman situs web merupakan  cara  efektif  yang  dapat  membimbing  arah  pandangan  pengunjung  ke  bagian tertentu dari situs web tersebut.
Dalam halaman homepage dari situs web IWEARUP.COM terdapat banyak gambar/foto atau  ilustrasi  yang  memenuhi  ruang  (lihat  Gambar  11).  Mulai  dari  gambar slider yang memiliki ukuran terbesar diantara gambar lainnya, hingga thumbnail foto produk terbaru yang memiliki ukuran paling kecil. Beragam ukuran gambar/foto ini menjadi kontras yang membedakan konten satu dengan yang lainnya.

## Gambar 11. Berbagai Ukuran Gambar dalam Situs Web IWEARUP.COM
Situs  web  IWEARUP.COM  di  desain  dalam  format responsive  web ,  yang  artinya  dapat diakses  dan  dapat  menyesuaikan  dengan  baik  di  berbagai  ukuran  layar  monitor 2 . Berdasarkan  pengamatan  yang  dilakukan  pada  layar  monitor  dengan  ukuran  1280x800 pixels, maka terlihat bagian konten dalam situs web tersebut memiliki ukuran lebar ( width ) 1140  pixel.  Ukuran  ini  berubah  menyesuaikan  resolusi  layar  yang  digunakan  untuk mengakses situs web (lihat Gambar 12).
2 Lihat juga Nawir, F. (2015). Pengaruh Tingkat Usability Desain Responsif Web Mobile Perguruan Tinggi Terhadap Persepsi Pengguna. VISUALITA, 7(1), 1-10. https://doi.org/10.33375/vslt.v7i1.1080

## Gambar 12. Berbagai Ukuran Resolusi Situs Web IWEARUP.COM
Klasifikasi  huruf  yang  digunakan  dalam  situs  web  IWEARUP.COM  lebih  banyak menggunakan jenis Sans Serif , diantaranya Roboto, Bebas, dan Asap . Font type yang paling banyak digunakan adalah Roboto , salah satunya terdapat pada teks judul dan body (lihat Gambar 13) .

## Gambar 13. Penggunaan Huruf Roboto
Selain itu terdapat juga penggunaan huruf Bebas yang diaplikasikan pada teks menu atau navigasi  (lihat  Gambar  14).  Huruf  ini  memiliki  kesan  tegas  bahkan  maskulin,  jauh  dari kesan feminin yang ditampilkan pada pemilihan warna dalam situs web ini.

## Gambar 14. Penggunaan Huruf Bebas

## 7. Efisiens (Efficiency)
Berdasarkan  pengamatan  yang  dilakukan,  situs  web  IWEARUP.COM  ini  cukup  efisien. Hal ini terlihat dalam penempatan menu yang ada di  tengah  atas ( header  section ) sudah cukup proporsional sehingga lebih memudahkan pengguna untuk merujuk ke menu tanpa harus menggeserkan scrollbar . Ditambah lagi semua produk disusun berdasarkan kategori sehingga memudahkan pengunjung dalam pencarian data.

## 8. Pengampunan (Forgiveness)
Situs web  IWEARUP.COM ini sudah menerapkan aspek forgiveness (lihat Gambar 15) . Yaitu  dengan  cara  menyediakan  kolom  bantuan  pada  halaman  “ I  Need  Help! ”  sehingga memudahkan pengunjung situs web tersebut dalam penanganan kesalahan. Selain itu ketika user melakukan kesalahan pada saat tidak memilih layanan kurir ( shipping service ) ataupun tidak memilih metode pembayaran ( payment method ), akan muncul peringatan untuk tidak melakukan  kesalahan  tersebut.  Peringatan  kesalahan user ini  ditampilkan  dengan  kotak berwarna merah yang terletak di kanan atas halaman browser seperti terlihat pada Gambar 16.
Gambar 15. Aspek Forgiveness

## Gambar 16. Tampilan Kesalahan Pengguna
Interface dalam sebuah situs web sangat penting sebagai sarana interaksi manusia ( user ) dan komputer ( system ). Selain itu, prinsip hierarki visual dalam mendesain situs web juga harus  diperhatikan.  Pengguna  situs akan  merasa  dimudahkan  dengan  adanya menu/navigasi, gambar, dan juga tombol-tombol yang ada dalam sebuah situs web. Desain interface haruslah menarik, interaktif, dan yang pasti user friendly agar pengguna merasa mudah dan nyaman untuk mengakses situs web tersebut.
Selain itu terdapat kekurangan dalam situs web IWEARUP.COM diantaranya:
• Fitur search engine sama sekali tidak berfungsi, sehingga sulit bagi pengguna ( user ) untuk mencari informasi yang lebih spesifik di dalam situs.
• Tidak  adanya  fasilitas  komentar,  sehingga  tidak  dapat  melakukan  umpan  balik ( feedback ) yang informatif.
• Jenis  huruf  (tipografi)  yang  digunakan  kurang  membangun  tampilan  situs  web, sehingga karakter situsnya tidak tertampilkan dengan baik.
• Tidak tersedianya pilihan bahasa, khususnya  bahasa  Indonesia. Situs  web ini  hanya menggunakan bahasa Inggris saja.
• Tidak adanya peta situs ( sitemap ).

## Kesimpulan
Kriteria penilaian bagus tidaknya situs web yang paling utama adalah ada atau tidak adanya kenyamanan yang dirasakan oleh pengunjung situs web ini. Serta informasi yang diberikan situs  web  ini  sudah  membantu  pengunjung  atau  belum.  Dari  8  aspek  yang  dikaji,  situs IWEARUP.COM sudah memenuhi syarat dari user interface serta menunjang kenyamanan dalam  menggunakan  berbagai  fitur  situs,  namun  dibalik  itu  situs  ini  juga  memiliki kekurangan  dalam  hal  informasi  dan  fitur  yang  diberikan  dari  sebuah  situs e-commerce . Disamping  itu,  situs  ini  berani  menampilkan  visual  warna  yang  berbeda  dibanding  situs yang lainnya.

## Daftar Pustaka
Anggoro, R.W. (2016). Hierarki Visual dalam Desain Situs web .
https://www.niagahoster.co.id/blog/hierarki-visual-desain-situs web/ (Diakses pada
02 Juli 2017).
Bank, C. & Cao, J. (2014). Web UI Design Best Practices . Mountain View: UXPin. Creswell, J.W. (2014). Penelitian Kualitatif & Desain Riset 3/E- : Memilih di Antara Lima Pendekatan . Yogyakarta: Pustaka Pelajar. Darmawan,  R.  (2013). Pengalaman,  Usability,  dan  Antarmuka  Grafis:  Sebuah Penelusuran  Teoritis .  (Jurnal  Vis.  Art  &  Des,  Vol.  4,  No.  2).  LPPM  ITB,  ISSN: 1978-3078.
Hackos, J.T. & Redish, J.C. (1998). User and Task Analysis for Interface Design . Toronto:
John Wiley & Sons, inc.
Landa, Gonella, and Brower. (2007). 2D: Visual Basics for Designers . Thomson/Delmar Learning. ISBN: 1418011606, 9781418011604.
Nawawi,  F.I.  (2014).  “Perancangan  Komunikasi  Visual  Berbasis  Multimedia  Pada Lembaga  Penyiaran  Publik  Radio  Republik  Indonesia  Pro2  Semarang”.  ( Skripsi ).
Program Studi Desain Komunikasi Visual Fakultas Ilmu Komputer Universitas Dian Nuswantoro.
Nawir,  F. (2015). Pengaruh Tingkat Usability Desain Responsif Web Mobile Perguruan Tinggi Terhadap Persepsi Pengguna . VISUALITA, 7(1), 1-10. https://doi.org/10.33375/vslt.v7i1.1080
S.Sridevi. (2014). User Interface Design . International Journal of Computer Science and Information  Technology  Research  ISSN  2348-120X  (online)  Vol.2,  Issue  2,  pp: (415-426),  Month:  April-June  2014.  www.researchpublish.com  (Diakses  pada  23 Juli 2017).