## TINJAUAN USER INTERFACE DESIGN PADA WEBSITE E- COMMERCE LAKU6
Oleh: Ketut Nina Lestari Mastra Ray Fitri Dharmawan Fakultas Desain dan Seni Kreatif Universitas Mercu Buana Jakarta

## Ringkasan
Perkembangan website e-Commerce di Indonesia dari tahun ke tahun mengalami peningkatan, ditandai dengan banyaknya perusahaan besar maupun ritel yang beralih menggunakan media digital demi memudahkan para user dalam bertransaksi secara online. Salah satunya adalah website Laku 6, yang  khusus  menjual  smartphone  bekas.  Website  ini  telah  menjadi  salah  satu  andalan  konsumen karena keberadaan fitur pengecekan produk dan pelayanan yang disediakan. Akan tetapi, belum ada telaah  mengenai  efektivitas  user  interface  yang  digunakan  untuk  menunjang  image  dan  layanan website.
Penelitian  ini  dilakukan  dengan  menggunakan  metode  pendekatan  kualitatif  untuk  meninjau penerapan prinsip dasar user interface design pada elemen website e-Commerce Laku6, berdasarkan 17  Prinsip  Dasar  User  Interface  oleh  Deborah  J.  Mayhew.  Penelitian  ini  diharapkan  dapat  menjadi referensi  dalam  perancangan  website  e-commerce.  Dari  hasil  penelitian,  ditemukan  bahwa penggunaan anatomi, prinsip layout, dan warna pada website memiliki makna tersendiri.  Website ini menerapkan beberapa prinsip dasar seperti user compatibility, product compatibility, responsivenesse, robustness, dan flexibility.
Kata  Kunci: Unsur  Desain  Website,  Prinsip  Dasar  Desain  Antarmuka,  website  e-commerce, Laku6

## Abstract
The development of e-Commerce website in  Indonesia  has increased rapidly. Currently, many large companies and retailers are switching to using digital media to create an e-Commerce website to facilitate the user in transacting  online. One  of them is Laku6, a website which specifically sell used smartphone.  This  website  has  been  one  of  consumer’s  mainstay  due  to  its  customer  services,  for examples  product  quality  checking  and  delivery  service.  Nevertheless,  there  is  still  no  research  to review the effectiveness of its user interface in supporting the website’s image and service.
This  research  is  conducted  by  using  qualitative  approach  to  review  the  application  of  user interface design principles on the design elements of e-commerce website “Laku 6”, based on The 17 Basic Principles of User Interface by Deborah J. Mayhew. This research is expected to be a reference in designing an e-Commerce website. It is found that the web page anatomy on the website page is using  layout  principles  and  colors  used  have  different  meanings.  Then  the  basic  principles  of  user interface  design  applied  to  Laku6  website  such  as  user  compatibility,  product  compatibility, responsiveness, robustness, and flexibility.
Keywords: Elements of Web Design, Principles of User Interface Design, e-commerce website, Laku6

## A. PENDAHULUAN
Latar Belakang Jual  beli  online  merupakan  sebuah fenomena  yang  marak  di  kalangan masyarakat modern dewasa ini. Kemudahan proses yang ditawarkan sehingga menghemat waktu dan biaya menjadi alasan orang untuk beralih dari toko offline ke toko online.  Hal  ini  kian  ditunjang  oleh berkembangnya  website  yang  terfokus  pada kegiatan  jual  beli  online  alias  e-Commerce. Perdagangan elektronik (electronic commerce,  atau  disingkat  e-Commerce) dapat  diartikan  sebagai  pembelian  dan penjualan  barang  serta  layanan  dengan menggunakan  internet,  yang  terdiri  dari penyebaran, pembelian, penjualan, pemasaran  barang  dan  jasa  melalui  sistem elektronik  seperti  internet  atau  televisi, world  wide  web  (www),  atau  jaringan komputer  lainnya.  (Whitten,  2004:21). Dalam  praktiknya,  e-Commerce  dapat melibatkan  pengumpulan  data  otomatis, pertukaran data elektronik, sistem manajemen  inventori  otomatis,  serta transfer dana elektronik.
E-Commerce  merupakan  fenomena yang  tengah  marak  di  Indonesia.  Bahkan Indonesia  merupakan  negara  dengan pertumbuhan eCommerce tertinggi di dunia, dan  diperkirakan  akan  terus  bertumbuh (Aulia  E.  Marinto,  Ketua  Umum  Indonesia eCommerce  Association).  Hal  ini  ditunjang oleh Data Sensus Ekonomi 2016 dari Badan
Pusat  Statistik  (BPS),  yang  menyebutkan bahwa  dalam  sepuluh  tahun  terakhir, industri  e-Commerce  Indonesia  tumbuh sekitar  17%  dengan  total  jumlah  usaha mencapai  26,2  juta  unit  (Aburrahman, 2017).
Di  Indonesia,  semakin  banyaknya website  jual  beli  online  dengan  beragam fitur, tampilan, serta konten yang ditawarkan membuat para konsumen semakin dimudahkan  dalam  bertransaksi.  Salah  satu website  yang  bergerak  di  bidang  e- Commerce adalah
Laku6 (https://www.laku6.com/),  website  yang menyediakan  layanan  jual-beli  smartphone bekas.
Untuk  menjaring  pelanggan  dan bersaing  dengan  website  e-Commerce  lain, Laku6 menawarkan layanan yang berorientasi  pada  kebutuhan  pengguna, seperti  garansi  90  hari  dan  layanan pengantaran  gratis  ke  seluruh  Indonesia. Didasari oleh salah satu permasalahan dalam jual-beli  smartphone  bekas  secara  online, yakni ketidakmampuan calon pembeli untuk mengecek  secara  langsung  kualitas  barang, website  ini  juga  menyediakan  layanan pengecekan  kualitas  barang.  Setiap  barang yang  dijual  dikategorikan  ke  dalam  lima kualitas yakni overstock (barang baru masih disegel),  open  box,  mulus,  standar,  dan ekonomis.  Fitur  pengecekan  ini  membuat Laku6 berani untuk memberikan garansi 90 hari,  yang  juga  memudahkan  pengguna
untuk  memilih  barang  dengan  kualitas  yang diinginkan.
Desain  sebuah  website  tak  hanya menentukan image perusahaan, dalam kasus e-Commerce, desain website juga mempengaruhi tingkat penjualan. Untuk itu, dalam  perancangan  website,  perlu  untuk mempertimbangkan  beberapa  hal  seperti tampilan  visual,  penerapan  user  interface, serta  kemudahan  akses  pengguna.  Selain untuk  menarik  calon  pengguna,  pada prinsipnya  desain  website  juga  bertujuan untuk  memaksimalkan  fungsi  website sebagai  jembatan  antara  pengguna  dan penjual,  sehingga  tampilan  website  harus memberikan kemudahan akses bagi pengguna  untuk  memaksimalkan  layanan yang disediakan oleh website.
Penelitian  ini  membahas  mengenai tampilan  visual  pada  website  Laku6 berdasarkan  Teori  17  Prinsip  Dasar  User Interface  Design  oleh  Deborah  J.  Mayhew, dengan  tujuan  untuk  mereview  keterkaitan antara elemen desain dengan sisi fungsional sebuah  website,  dalam  hal  ini  kemudahan akses  oleh  para  user.  Dengan  mengkaji penerapan prinsip user interface pada desain website,  penelitian  ini  diharapkan  dapat menjadi media informasi untuk memperkaya pertimbangan  desainer  dalam  perancangan sebuah website e-Commerce.
Identifikasi dan Batasan Masalah
Permasalahan pada penelitian ini dirumuskan sebagai berikut:
a. Unsur  apa  saja  yang  dibutuhkan dalam  sebuah  desain  website  dan apa saja prinsip dasar User Interface Design?
b. Bagaimanakah  penerapan  prinsip dasar  User  Interface  Design  pada elemen-elemen desain website Laku6?
c. Apakah  website  Laku6  sudah memenuhi prinsip user interface?
Objek penelitian ini adalah keterkaitan antara  desain  website  dan  user  interface design  pada  website  e-Commerce  Laku6. Adapun aspek kajian difokuskan pada:
a. anatomi webpage
b. penerapan prinsip layout
c. penerapan prinsip Gestalt
d. penggunaan warna
e. penilaian  penerapan  prinsip  user interface pada website

## B. METODE PENELITIAN
Jenis Penelitian
Penelitian dilakukan secara kualitatif dengan metode pemaparan deskriptif. Data diperoleh  melalui  observasi  terhadap tampilan visual website e-Commerce Laku6.
Pendekatan Penelitian
Kajian  anatomi  website  secara  estetis didasarkan  pada  Prinsip  Layout  oleh Surianto  Rustan  (2008:74-86),  Prinsip Gestalt,  serta  The  Principles  of  Beautiful Web  Design  oleh  Jason  Beaird  (2011). Sedangkan  kajian  penerapan  prinsip  user interface dilakukan  berdasarkan  17  General
Principles  of  UI  Design  oleh  Deborah  J. Mayhew.

## C. HASIL DAN PEMBAHASAN

## Anatomi Webpage
Pada  homepage  website  Laku6  terdapat sebuah  containing  block/wadah  sebagai garis  pembatas  pada  jendela  browser  agar
konten yang ada pada halaman website tidak melebihi batas jendela browser. Penyusunan menu  dalam  containing  block  tersebut diatur  dalam  sistem  grid,  yang  membuat tampilan  homepage  secara  global  terbagi atas tiga bagian, yakni Header, Content, dan Footer.
Gambar 1. Anatomi Homepage Laku6
Gambar 2. Anatomi Halaman Pencarian Laku6
Adapun  halaman content yang  merupakan halaman utama pencarian memiliki tampilan yang  berbeda,  yakni  dengan  keberadaan sidebar di  sebelah  kiri  halaman, Content yang memenuhi  seluruh  halaman,  serta  tidak adanya footer.
Secara  lengkap,  setiap  bagian  terdiri atas elemen-elemen sebagai berikut:
a. Header Header  memenuhi  seperempat  atas laman  website.  Pada  tampilan  100%, bagian  ini  memenuhi  seluruh  jendela browser.  Header  pada  website  Laku6 terbagi  menjadi  4  lapis.  Bagian  teratas berupa  web  header  berbentuk  pita horizontal,  diikuti  lapis  kedua  yang  diisi company  logo  pada  bagian  kiri,  search box  pada  bagian  tengah,  primary navigation pada bagian kiri. Lapis ketiga berupa  secondary  navigation  yang
memuat  pranala  ke  laman  penjualan smartphone  berdasarkan  kategori  merk. Sedangkan  lapis  ketiga  berupa  picture banner  yang  juga  menjadi  point  of interest situs ini.
1) Logo Logo  biasanya  diletakkan  pada bagian  atas  halaman  website,  untuk mempermudah user dalam mengenali  website  apa/siapa  yang sedang  mereka  akses.  Pada  website Laku6,  logo  diletakkan  pada  posisi pojok kiri atas. Posisi ini sama pada setiap  halaman  website,  yang  juga berfungsi  sebagai  button  untuk menuju ke halaman beranda (homepage) website Laku6.
2) Navigation Navigasi  website  Laku6  difasilitasi oleh  beberapa  sistem  antara  lain
tombol  navigasi,  search  box,  filter, dan  pengurut  daftar.  Beberapa tombol navigasi yang ada diantaranya,  tombol  jual,  harga  hp bekas,  contact,  cek  imei,  tombol login,  serta  beberapa  tombol pencarian barang berdasarkan daftar brand terlaris.
b. Content Content mengisi bagian tengah homepage, yang secara garis besar terdiri atas  dua  bagian  yakni  Hot  Deals  dan Featured List. Pada dasarnya, isi dari dua bagian  ini  serupa,  yakni  menyampaikan informasi  barang  keluaran  terbaru  dan promosi  penawaran  (bundle)  barang yang  diberikan  oleh  pihak  Laku6. Homepage  Laku6  tidak  memiliki sidebar,  menu  ditampilkan  dengan responsive  scroll  menu.  Antara  content dengan  footer  terdapat  whitespace  agar halaman tidak terlihat penuh.
Sedangkan  pada  halaman  pencarian, content  terletak  di  bagian  kanan halaman. Bagian ini terdiri atas gambar- gambar  produk  disertai  keterangan singkat  yang  disusun  dalam  layout  grid. Setiap gambar juga merupakan navigation  button  yang  terhubung dengan halaman yang memuat informasi lengkap produk yang ditawarkan.
c. Sidebar Sidebar  hanya  terdapat  pada  halaman pencarian.  Bagian  ini  berisi  filter  untuk
mempermudah pencarisn, dengan menyortir daftar produk dan
mengurutkannya sesuai dengan kebutuhan user.
d. Footer Di  bawah  content  homepage  Laku6,, terdapat  bar  yang  menempatkan  logo- logo  situs  media  seperti  E27,  Info Komputer, Viva, Berita Satu, Pulsa, dan Selular.id.  Jika  diklik,  logo  tersebut menyediakan  direct  link  menuju  artikel yang  mengulas  dan  meng-endorse website Laku6 di media yang bersangkutan.  Media  yang  mengulas website  Laku6.  Di  bawah  bar  tersebut, tertera  Footer  yang  memberi  informasi mengenai website Laku6, lokasi dan peta lokasi  secretariat,  serta  external  link menuju  media  sosial  resmi  website tersebut.  Keberadaan  footer  ini  tidak terdapat di halaman pencarian.
Penerapan  Prinsip  Layout  dan  Warna  pada Elemen Desain Website
1. Prinsip Layout
a. Sequence Seperti yang terlihat di halaman beranda dan  halaman  lainnya  pada  website Laku6,  user  diarahkan  untuk  membaca dari  arah  kiri  kemudian  ke  kanan  serta dari arah atas kemudian ke bawah.
b. Emphasis Terdapat  sebuah  banner  yang  bersifat kontras  pada  halaman  beranda  website Laku6. Picture banner ini juga merupakan
point  of  interest yang  mengiklankan keunggulan  dan  fitur  keamanan  yang diberikan Laku6 sehingga menarik minat user untuk menggunakan situs ini.
Emphasis pada  produk  yang  ditawarkan juga  dilakukan  dengan  menerapkan tampilan  sederhana  dengan  sistem  grid dan latar putih.
c. Balance
d. Keseimbangan  yang  dihadirkan  pada homepage website  Laku6  merupakan keseimbangan  simetris,  memberikan kesan  kokoh,  terpercaya,  konvensional, dan  berpengalaman.  Akan  tetapi,  pada halaman content  browser menggunakan keseimbangan  asimetris  dengan  adanya sidebar di  sebelah  kiri  dan content di sebelah  kaligus  juga  memberi  peran kanan.
Keseimbangan
asimetris menunjukkan  kesan  yang  lebih  dinamis, sekaligus  juga  memiliki  sisi  fungsional yakni mempermudah user dalam memaksimal-kan pencarian.
e. Unity Prinsip unity berarti  kesatuan  atau kesesuaian  antara  konten  grafis  dengan maksud dan tujuan yang ingin diberikan kepada user. Seperti terlihat di salah satu konten  yang  ada  pada  halaman  beranda website  Laku6  menggambarkan  produk terlaris,  bertujuan  untuk  memberikan arahan  atau  pilihan  kepada  user  untuk mencari  barang  berdasarkan  kategori produk yang paling laris.
2. Gestalt Theory
a. Proximity
Kedekatan  posisi  antara  konten  seperti kolom  review,  serta  foto  dan  gambar dari  lokasi  office  Laku6  membentuk sebuah halaman contact.
b. Similiarity Pada  halaman  beranda  website  Laku6 terdapat  banner  dengan  bentuk  tiga persegi  panjang,  merupakan  sebuah tombola  tau button yang  berbeda  karena menjadi  satu  sehingga  membentuk sebuah persegi panjang yang lebih besar.
c. Closure
Meskipun  tidak  ada  batasan  garis berbentuk kotak yang membatasi bidang (containing  block), peletakan  informasi gambar  dan  teks  disusun  dalam  sistem grid yang teratur, sehingga mengesankan pengelompokan informasi.
d. Continuity
Konten  yang  ada  pada  website  Laku6 memiliki  kesinambungan  pola  yang sama.  Terlihat  pada  halaman  beranda website  Laku6,  antara  gambar  konten produk  terlaris  dan  bundle  pembelian barang memiliki susunan yang sama.
e. Figure Ground Ada salah satu konten yang menggunakan  konsep  figure  ground pada website Laku6, terlihat sebuah icon pada banner di halaman beranda website sebagai  foreground  dan  persegi  panjang dengan warna ungu sebagai background
kemudian  membentuk  sebuah  objek baru.
3. Warna
a. Kontras Pada  halaman  beranda  website  Laku6 terlihat  warna  kontras  sebagai  objek utama,  warna  dominan  yang  digunakan diantaranya yaitu, hijau, biru dan ungu.
b. Spirit
Konsep spirit dalam komposisi warna di
homepage terlihat  pada  kontras  antara warna putih pada latar belakang dengan warna-warna pada content. Untuk banner dan mayoritas ilustrasi, Laku6 menggunakan  dominasi  warna-warna dingin.  Namun,  pada  bagian  Hot  Item, website  ini  menggunakan  warna  panas sehingga user secara  langsung  akan menangkap warna tersebut.
c. Komplementasi Pada website Laku6 di salah dua banner menerapkan  konsep  warna  komple- mentasi  dimana  perpaduan  antar  warna untuk  menciptakan  suasana  yang menyenangkan untuk para pembaca.
Penerapan Prinsip User Interface pada Desain a. User Compatibility
User  Compatibility dapat  diartikan  sebagai kesesuaian tampilan dengan tipikal dari user.
Mayoritas user dari website Laku6 yaitu remaja hingga  dewasa  baik  laki-laki  ataupun perempuan. Pada Gambar 1, terlihat sebuah konten grafis yang menampilkan sosok pria
dewasa  dengan  ekspresi  gembira  karena barang  yang  di  jual  akan  cepat  laku  bila diposting  dalam website Laku6.  Warna  serta grafis yang diperlihatkan pun terkesan cerah, ceria  dan  kekinian  hal  tersebut  untuk menyesuaikan  tipikal  para user pengakses website Laku6.
Gambar 3. User Compatibility Product Compatibility Istilah  ini  berarti  bahwa  produk  aplikasi yang  dihasilkan  juga  harus  sesuai.  memiliki tampilan  yang  sama/serupa.  Dalam website Laku6, tampilan yang digunakan baik untuk para user awam  maupun user yang  telah  ahli dalam  bidang system perancangan website adalah sama.
Gambar 4. Task Compatibility
Task  Compatibility berarti  aspek  fungsi  dari task /tugas  yang  ada  harus  sesuai  dengan tampilannya.  Pada  (Gambar  3  19)  terlihat sebuah icon keranjang belanja yang dijelaskan melalui  tulisan  “jual  sekarang”  hal  itu menunjukan  bahwa  tampilan  tersebut  telah sesuai  dengan  fungsional/tugas  sebuah
button yang  berfungsi  untuk  ke  halaman selanjutnya,    yaitu  sebuah page khusus apabila user ingin
menjual produk/barangnya.
b. Work Flow Compatibility
Gambar 5. Work Flow Compatibility
Work  Flow  Compatibility berarti  aplikasi  bisa dalam  satu  tampilan  untuk  berbagai pekerjaan.  Pada  tampilan website Laku6 terlihat  sebuah  halaman  yang  menampilkan berbagai produk yang dijual serta di halaman tersebut  terdapat button  “shop  by  category” untuk  memudahkan  pencarian  barang  yang diinginkan misalnya saja berdasarkan brand, range harga,  kualitas  barang  dan  lain sebagainya.
c. Consistency.
Konsistensi  diperlihatkan  dalam  beberapa segi  antara  lain  penggunaan  dan  peletakan logo,  jenis  font,  penggunaan  istilah,  serta sistem  layout  grid.  Meskipun  layout  pada
homepage,  halaman  pencarian,  serta halaman  informasi  produk  berbeda  satu sama  lain,  terdapat  konsistensi  structural, yakni  halaman  yang  kedudukannya  setara menggunakan  layout  yang  sama.  serta kesamaan  layout  pada  setiap  halaman informasi produk.
d. Familiarity
Konsep  familiaritas  adalah  kemampuan sebuah  website  untuk  menerapkan  sebuah sistem  yang  telah  akrab  digunakan  dan dipahami oleh pengguna secara umum. Pada tampilan  website  Laku6,  hal  ini  diterapkan antara  lain  pada  penggunaan  icon  seperti keranjang  belanja  (sebagai  penanda  untuk msuk ke menu pembelian) dan media sosial (untuk menunjukkan pranala ke media sosial resmi  Laku6).  Konsep  familiaritas  juga diperlihatkan dengan penggunaan istilah dan sistem yang hampir sama dengan website e- Commerce lain,  misalnya  sistem  filter Shop  By Category .
Gambar 6. Familiarity
e. Simplicity, Berdasarkan
prinsip simplisitas (kemudahan),  aplikasi  harus  menyediakan pilihan default untuk  suatu  pekerjaan.  Pada tampilan  halaman website Laku6  telah diberikan  pilihan default berupa  apabila user
lalai  atau  salah  dalam  meng- input status order maka akan diberikan kejelasan berupa status pengiriman tidak ditemukan, kemudian user diharuskan  kembali  meng- input nomor order dengan benar.
Gambar 7. Simplicity
f. Direct Manipulation,
Manipulasi secara langsung biasanya dipakai pada  teks.  misalnya  untuk  mempertebal huruf,  cukup  dengan  ctrl+B.  Pada website Laku6, direct  manipulation terlihat  pada penggunaan fitur pencarian dan filter untuk membantu user mempersempit data pencarian.  Jika  login,  user  juga  dapat memasukkan  foto  dan  informasi  pribadi, baik buyer maupun seller.  Seller memiliki kemampuan  untuk  melakukan  manipulasi terbatas,  yakni  dapat  mengganti  foto  dan menyertakan keterangan pada lapak masing- masing, namun tidak dapat mengubah layout keseluruhan.
Gambar 8. Direct Manipulation

## g. Control
Kontrol  bagi user diberikan  dalam  pilihan cara  pembelian  dan  keberadaan  filter  untuk menyortir  hasil  pencarian,  sehingga  user dapat  melakukan  pencarian  sesuai  dengan kebutuhan.
h. WYSIWYG  (What  You  See  Is  What You Get),
Website Laku6  memberikan  tampilan  yang berdasarkan  kepada  kehidupan  nyata user. Ketika user ingin  mencari  sebuah  produk yang  diinginkan  maka  pada website Laku6 menampilkan list produk dengan gambar/foto  asli  dengan  daftar  harga  serta deskripsi  produk.  Hal  tersebut  seperti berbelanja offline dimana  kita  diperlihatkan barang  yang  dijual  beserta  spesifikasinya.
Jadi,  apa  yang user lihat  pada website (contohnya  produk  yang  akan  dibeli)  itulah yang akan didapatkan.
Gambar 9. WYSIWYG
i. Responsivenesse
Tampilan website Laku6  di desktop  PC akan berbeda  tampilannya  apabila website diakses melalui  perangkat mobile seperti smartphone
atau tablet.
Gambar 10 . Responsiveness Sayangnya, responsiveneess tidak  ditunjukan pada  halaman  navigasi  atau  menu.  Ketika kursor  diarahkan  untuk  menyorot  menu, tidak  ada  perubahan  warna  atau  tampilan (misalnya  garis  bawah)  untuk  meyakinkan user  bahwa  ia  akan  mengklik  tombol navigasi, yang tepat.
j. Flexibility
Pada website Laku6  terdapat  sebuah  tombol dengan icon tanda  panah  ke  arah  kiri  dan kanan  yang  berfungsi  untuk  menggeser konten pada halaman tersebut.
Gambar 11 . Flexibility
k. Invisible Technology.
Invisible  Technology  berarti user tidak penting  mengetahui  algoritma  apa  yang digunakan.  Dalam website Laku6, user tidak diperlihatkan  urutan  maupun  daftar coding yang  digunakan  pada website. Sehingga user yang  awam  dalam  bidang  pemrograman
tidak dipusingkan dengan proses coding yang terdapat pada sebuah website Laku6.
Gambar 12. Invisible Technology
l. Robustness
Prinsip Robustness alias handal berarti bahwa website dapat  mengakomodir  kesalahan user . jangan  sampai error, ataupun crash .  Pada website Laku6  belum  terdapat/ditemukannya kesa-lahan  maupun error yang  disebabkan oleh user.

## m. Protection
Prinsip  proteksi  berarti  melindungi user dari kesalahan  yang  umum  dilakukan.  Apabila user ingin  mencari  suatu  barang  di  kolom pencarian, maka akan diberikan sugesti agar dapat  meminimalisir  kesalahan user ketika mengetik  barang  yang  ingin  dicari.  Apabila user  salah  dalam  mengetik  kata/kalimat pada  kolom  pencarian,  hanya  dengan menekan  tombol  backspace  pada  keyboard maka tulisan akan terhapus.
n. Ease of Learning.

## Gambar 14. Ease of Learning
Tampilan  yang  ada  pada website Laku6 mudah  untuk  dipelajari  karena  terdapat berbagai penjelasan ataupun deskripsi dalam setiap  halaman  dengan  didukung  oleh pemberian icon yang  membantu user agar dapat lebih mudah dimengerti.
o. Ease of Use
Kemudahan  penggunaan  dan  pembelajaran website didukung  oleh  penerapan  prinsip- prinsip lain, seperti familiaritas dan proteksi, layout berkonsep grid yang bersih, rapi, dan menarik,  serta  sistem  yang  memudahkan para user berkat penerapan invisible technology.
Secara  lengkap,  keterkaitan  antara  elemen website dengan  Prinsip  User  Intarface  dapat dilihat pada tabel berikut:

## Tabel 1. Keterkaitan antara Web Page Anatomy dengan Prinsip User Intarface
Elemen Website
Prinsip User Inter- face Layout Logo Navigatio n Header banner Content Ilustrasi & Icon Warna White- space Font Footer User Compati -bility Layout grid memudah- kan user terletak di bagian atas halaman untuk memper- mudah user melakukan pencarian Mudah digunakan Model sesuai dengan target usia pengguna Sesuai dengan kebutuh- an Gambar- an produk yang ingin dicari Latar putih tampilan bersih, terlalu monoton Domina- si  warna putih sebagai latar untuk memper mudah user Font sans-serif mudah dibaca, sesuai target gaya hidup dan  usia user Infor- masi perusa- haan Product compati -bility Tampilan sama untuk semua level keahlian user Menayang kan keunggula n  website, ada  foto produk Foto produk Fokus pada produk Memberi emphasis pada gambar produk Modern sesuai dengan image produk Informa- si relevan Task Compati -bility Memudah- kan mengakses menu navigasi Kesesuai- an tampilan dan fungsi Link ke laman lain Kesesuai an tampilan dan fungsi Icon sesuai dengan fungsinya Memper- mudah navigasi dan pemilih- an produk Memu- dahkan navigasi dan memper- kuat fokus pada produk Mudah dibaca Informa- si relevan Work flow Compa- tibility User nudah berpindah dari satu pencarian ke pencarian lain Search box untuk memper- mudah pencarian di luar menu Link ke laman lain Memper mudah navigasi Memu- dahkan navigasi dan memper- kuat fokus pada produk Mudah dibaca Informa- si  mudah ditemu- kan Con- sistency Structural consistency Letak konsisten di  setiap halaman Posisi menu navigasi sama  pada struktur setara Warna sama dengan menu  lain pada content Warna latar sama pada  tiap halaman, skema warna sama pada iklan, banner, dan website Latar putih yang sama pada setiap halaman Font yang sama pada setiap halaman Hanya ada  pada home- page Famili- arity Pola  grid biasa  bagi website e- Commerce Letak  logo familiar bagi user Letak, jenis, istilah, serta sistem navigasi dan  filter umum ditemukan pada website lain Posisi banner umum ditemukan pada website lain,
Penggun aan istilah dan  jenis infor- masi yang familiar icon keran- jang belanja untuk pembeli- an Latar putih lazim ditemu- kan  pada website profesi- onal  dan e-sommerce Jenis font yang biasa ditemu- kan  pada website  e- Commerce Letak dan isi familiar dan dapat dipredik- si Simplicit y Sederhana Logo tidak rumit Sistem tick pada  filter, tampilan default Hanya informasi penting pada content daftar Kesan warna sederha- na Modern, seder- hana Layout sederha- na
produk
Direct Manipu- lation - - Filter untuk menyortir dan memper- sempit pencarian Link menuju halaman informasi lengkap produk - -
Control
- - User mengontr ol pencarian melalui searchbox dan filter Dapat disortir dengan filter - -
WYSIW YG (What You See is What You Get) -
- Infor- masi sesuai dengan produk yang dijual Foto bawang asli sesuai dengan produk yang dijual - Infor- masi perusaha an  dan media sosial
Respon- siveness Tampilan berbeda pada desktop pc dan mobile device Tidak  ada perubahan tampilan ketika disorot
Logo merupaka n  link  ke homepage Tidak ada perubaha n tampilan ketika disorot Link  ke laman informasi lengkap produk - Link menuju akun media sosial resmi Flexibili ty - - Beberapa metode/ sistem navigasi yang mengarah pada halaman yang sama
icon navigasi sehingga user tidak terpaku pada keyboard dan mouse - -
Invisible Techno- logy Klik  logo  kembali ke homepage Bahasa pemrogra man dalam mengurut kan produk tidak ditampilk an - Link menuju akun media sosial resmi Robust- ness Minimali- sasi kesalahan dengan pemberian sugesti pada kolom pencarian Memini malisasi kesalah- an produk yang dipilih Fokus pada produk dan  teks untuk meminim alisasi kesalah- an user Memini malisasi kesalah- an pembaca an Minimali sasi kesalah- an pembaca an Protecti on tombol backspace pada keyboard akan mengha- pus  tulisan per abjad Memini malisasi kesalah- an produk yang dipilih Fokus pada produk dan  teks untuk meminim alisasi kesalah- an user Memini malisasi kesalah- an pembaca an Minimali sasi kesalah- an pembaca an Ease of Learnin g Memudah kan user mempelaja User tahu bentuk produk Mudah dibaca Mudah dime- ngerti
ri  isi  dan sistem tanpa meng- ingat nama dan dipelajari Ease of Use Memudah kan user mengguna kan website Memper mudah pengenal an produk, link langsung ke informasi produk Mudah dibaca Mudah diguna- kan Dengan  melihat  tabel  di  atas,  dtemukan beberapa kelemahan website Laku6, khususnya  dalam  penerapan  prinsip  User Interface pada  desain  layout  dan  elemen desain, yakni:
a. Kurangnya responsiveness pada  menu navigasi.  Ketika user mengarahkan kursor  pada  tombol  navigasi,  tidak ada  perubahan  warna  atau  font, sehingga  kurang  meminimalisasi kesalahan klik.
b. Pola layout yang dibedakan berdasarkan struktur halaman website  dapat  menjadi  kelebihan (membedakan setiap tingkat navigasi) tetapi juga kurang konsisten.
c. Meski  simplisitas  dinilai  baik  dalam mendukung kinerja website,
kurangnya  animasi,  warna  yang monoton, dan tampilan yang mudah ditemukan  pada  situs-situs  lain menjadikan  situs  Laku6  kurang memiliki ciri khas dan menjemukan. Kesan modern muncul dari tampilan yang  sederhana  dan  sesuai  dengan image  produk smartphone, tetapi
terlalu kaku dan kurang humanis jika dikaitkan dengan target usia user

## D. KESIMPULAN DAN SARAN
Dari hasil penelitian terhadap desain website Laku6,  diperoleh  kesimpulan  sebagai berikut:
a. Website  Laku6  telah  menerapkan Prinsip User Interface pada layout dan elemen visual lain untuk mendukung kinerja  user  dalam  mengakses website
b. Kekurangan  pada  website  adalah pada  kurangnya  tampilan  yang responsif  dan  tampilan  yang  terlalu monoton  dan  kurang  memiliki  ciri khas.
Sejalan  dengan  kesimpulan  tersebut,  dalam pengembangan  website  ini,  disarankan untuk  menambahkan  aspek  responsivitas pada  menu  navigasi,  membuat  pendekatan desain  yang  lebih  humanis  dan  menarik untuk  mendekatkan  pada  target  usia konsumen,  serta  membuat  desain  tampilan visual  yang  memiliki  ciri  khas  untuk menciptaan  image/citra  produk  sehingga website Laku6 lebih mudah dikenali.

## E. DAFTAR PUSTAKA
Demmy,  P.  R.  (2014).  Persepsi User Terhadap Desain Website E-Commerce . Jakarta
Purbo.  O.  W.  (2000). Mengenal  E-Commerce . Jakarta: PT. Elex Media Komputindo.
Rustan,  S.  (2008). Layout:  Dasar  dan Penerapannya .  Jakarta:  PT  Gramedia
Pustaka Utama
Sandhya.  (2017). User  Interface  Design  in  E-
Commerce Website. Jakarta.
Nurlifa,  A.  (2014). Analisis  Pengaruh  User Interface  Terhadap  Kemudahan  Penggunaan Sistem Pendukung Keputusan. Semarang.
Santoso, O. A. (2016). Pengertian Website dan
Contohnya . Diambil
dari https://oliviaagnez.wordpress.com/20 16/02/18/pengertian-website-dan- contohnya/
Mataweb.  (2016). Mengenal  dan  Mendalami Teori Gestalt Desain Grafis . Diambil dari http://www.kursusdesaingrafis.net/m engenal-dan-mendalami-teori-gestalt- desain-grafis.html
Whitten,  J.  L.,  Bentley,  L.  D,  &  Dittman, K.C.  (2004). Metode  Desain  &  Analisis Sistem,  Edisi  6 .  Yogyakarta:  Penerbit Andi.
Maseteguh. (2015, November) Mengenal Teori Warna  Pada  Desain  Web .  Diambil  dari http://www.maseteguh.com/2015/11 /mengenal-teori-warna-pada-desain- web.html