## Perancangan Interaksi Pengguna (User Interaction Design) Menggunakan Metode Prototyping
Rina Candra Noor Santi 1 , Anida Fitriyah 2
1 Prodi Teknik Informatika, Universitas Stikubank, Semarang
2 Prodi Teknik Informatika, Universitas Islam Negeri Jakarta
Rina_cs@lec.unisbank.edu

## ABSTRAK
Maraknya  perdagangan  secara online menjadi  tantangan  bagi  pengembang  desain  antarmuka pengguna  untuk  mebuat  desain  yang  menarik  minat  pengunjung  untuk  melakukan  transaksi. Pendekatan User-Centered  Design (UCD)  melibatkan  pengguna  sejak  tahap  analisa,  desain, testing, build/redesign .  Pada  penelitian  ini  pengembang  menerapkan  8  aturan  emas  perancangan  antarmuka pengguna  sebagai  panduan  dalam  mendesain  antarmuka.  Model  konseptual  dibuat  dengan  orientasi proses  yang  terdiri  dari  proses  melihat  dan  memilih  produk  yang  diterapkan  dalam  bentuk gallery . Proses  pemesanan  produk  diterapkan  pada  menu Order .  Hasil  dari  perancangan  ini  adalah  sebuah prototipe yang memiliki ketepatan yang tinggi ( high f idelity prototype ), yang dibuat dengan software Coreldraw .
Kata kunci : UCD, high fidelity prototype, conceptual model, process-oriented.

## ABSTRACT
The rise of online trading is a challenge for developers of user interface design for producing designs that  attract  visitors  to  make  transactions.  Approach  of  User-Centered  Design  (UCD)  involve  users from the analysis stage, design, testing, build / redesign. In this study, developer applying the 8 golden rules of user interface design as a guide in designing the interface. The conceptual model is made with a process orientation which is composed of the view and choose products that are applied in the form of  gallery.  Product  ordering  process  applied  to  the  Order  menu.  The  results  of  this  design  is  a prototype that has a high accuracy (high fidelity prototype), made with CorelDraw software.
Keywords : UCD, high fidelity prototype, conceptual model, process-oriented

## I. PENDAHULUAN
Pada  era  modern  sekarang  ini  teknologi sangatlah memberi pengaruh yang cukup besar dalam  bidang  usaha.  Hal  ini  terlihat  pula dalam  bidang  penjualan  barang  –  barang,  hal ini  dikarenakan  karena  sistem  pemasaran  dari sebuah  penjualan  barang  jasa  maupun  yang lainnya  akan  terus  menerus  berkembang sehingga  persaingan  di  dunia  perdagangan menjadi  semakin  ketat.  Agar  dapat  bersaing dengan  para  pebisnis  lain  di  bidang  yang sama,  para  pengusaha  harus  bisa  memasarkan produknya  ke  setiap  kalangan  masyarakat dengan efisien. Salah satu cara yang dianggap cukup  efisien  dalam  memasarkan  sebuah produk  adalah  dengan  menggunakan  media internet.
Maka, CakeCorner.com pun  memanfaatkan internet ini untuk lebih memperluas jangkauan penjualannya.Toko  kue  ini  lebih  fokus  untuk mengenalkan produknya melalui website yang ia  bikin.  Website  ini  diharapkan  dapat memberikan  informasi  tentang  penjualan  dan melihat  daftar  pembeli  tanpa  harus  mencatat siapa sajakah pemesannya.
Banyak  sekali  website  yang  menyediakan beragam  informasi,  tetapi  banyak  diantaranya website yang tidak dapat memenuhi pengguna karena  berbagai  macam  hal  dan  tujuan  awal pembuatan  website  tersebut,  bahkan  ada  yang mengecewakan penggunanya dan tidak merasa puas.Untuk menghindari itu,maka CakeCorner.com menggunakan sudut pandang UCD ( user centered design ).[1].

## II. TINJAUAN PUSTAKA

## 2.1 User Centered Design
Salah  satu  pendekatan  dalam  merancang antarmuka  pengguna  adalah User  Centered Design (UCD)  yang  melibatkan  pengguna pada  proses  desain.  Pengguna  terlibat  sejak tahap analisis awal kebutuhan pengguna untuk pengujian dan evaluasi [1].
Konsep  UCD  yaitu  “ In  user  - centered  design,  the  users  are  the  center focus .”
Maksud dari pernyataan di atas adalah tujuan/ sifat-sifat, konteks, penguna, sifat konteks dan lingkungan  produk  semua  didasarkan  dari pengalaman  penguna.  Selanjutnya  ditetapkan model pekerjaan pengguna yang akan didukung sistem.
Tahapan dalam UCD mencakup [1] :
1.  Memahami kebutuhan user.
2.  Mendeskripsikan kebutuhan user.
3.  Merancang prototype sebagai alternatif
4.  Mengevaluasi perancangan.
Gambar 1. Proses User Centered Design [3]
IBM  UCD development  community , sebuah  komunitas  penelitian  terkemuka  yang berfokus  pada  UCD,  menjelaskan  bahwa prinsip  UCD  terdiri  dari  enam  [3].  (1) set  the business  goals ;    (2) understand  the  user ;  (3) Assessing  competitiveness ;  (4) designing  the total  user  experience ;  (5) Evaluating  the design (6) Maintenance and support .
Prinsip  pertama  ‘Menetapkan  tujuan bisnis'  berarti  mencakup  semua  aspek  bisnis perangkat lunak. Itu harus mempertimbangkan pasar  di  mana  sistem  akan  digunakan, pengguna  yang  akan  mengoperasikan  sistem atau yang disebut intended user, dan kompetisi pada sistem sejenis lainnya.
Prinsip yang kedua 'memahami
pengguna'. Hal ini berfokus pada mendengarkan kebutuhan pengguna dan permintaan  pasar.  Untuk  melakukan  hal  ini, pengembang software harus  menyertakan pengguna  dalam  proses  desain.  Dengan  kata lain  pengguna  harus  didengar  dan  dicermati kebutuhannya  karena  akan  menjadi  bahan utama  untuk  merancang  seluruh  sistem. Prinsip  ini  hampir  tidak  dipertimbangkan
dalam  pendekatan  lainnya,  karena  membutuh- kan usaha, uang, waktu, dan pengetahuan yang paling besar.
Prinsip 'menilai daya saing' berfokus pada pengujian  sistem  oleh  pengguna,  dengan melakukan perbandingan pengguna melaksana-kan tugas pada sistem yang sedang dirancang dengan milik pesaing. Perbandingan atau  pengujian  ini  dilakukan  dalam  rangka untuk menghasilkan sistem yang lebih baik.
Yang  keempat  adalah  prinsip  'merancang total  pengalaman  pengguna'  atau  membuat pengguna  senang  dengan  produk  dan  bangga memilikinya. Ini berfokus pada aspek  internal dan  eksternal  seperti  dokumentasi,  peningkat- an,  dukungan,  instalasi,  iklan  dan  lainnya.  Ini dimaksudkan  untuk  dipertimbangkan  oleh  tim desain  dan  penting  untuk  memberikan  yang baik  kesan  produk  ke  pelanggan  atau pengguna, sehingga kepuasannya.
Selanjutnya 'Mengevaluasi desain'. Pertama,  desain  lengkap  diberikan  kepada pengguna untuk mengetes. Ini disebut prototipe  perangkat  lunak.  Prototipe  dan  rilis selalu  diberikan  pada  iterasi  dan  umpan  balik yang  diterima  dari  pengguna  setelah  iterasi digunakan  untuk  memperbaiki  desain  dan pengembangan iterasi berikutnya atau rilis.
Yang terakhir ialah prinsip 'Pemeliharaan dan  dukungan'.  Ini  berfokus  pada  aspek  yang perlu  dipertimbangkan  setelah  produk  telah disampaikan. Kita semua tahu bahwa tidak ada hal  seperti  itu  sebagai  sempurna  perangkat lunak;  ini  adalah  mengapa  perawatan  dan dukungan harus ada bersama dengan dokumentasi  dalam  rangka  memecahkan masalah tak terduga. Ini juga harus mencakup mendengarkan pengguna dan menonton mereka  dan  menggunakan  umpan  balik mereka  untuk  membuat  sistem  yang  lebih baik.

## 2.2 Metode Prototyping
Prototyping merupakan  suatu  metode pengembangan  sistem  yang  menggunakan pendekatan  untuk  membuat  sesuatu  program dengan  cepat  dan  bertahap  sehingga  segera dapat  dievaluasi  oleh  pemakai  [2].  Prototipe mewakili  model  produk  yang  akan  dibangun atau  mensimulasikan  struktur,  fungsionalitas dan operasi sistem.
Dimensi  Prototyping  [2]  terdiri  dari  (1) Penyajian,  yaitu  bagaimana  desain  dilukiskan atau  diwakili?  Dapat  berupa  uraian  tekstual atau  dapat  visual  dan  diagram.  (2)  Lingkup,
yaitu  apakah  hanya  interface  atau  mencakup komponen  komputasi?;  (3) Executability (Dapat  dijalankan).  Jika  dikodekan,  apakah akan  ada  periode  saat  prototype  tidak  dapat dijalankan?  (4) Maturation yaitu  tahapan- tahapan pengembangan produk. Ada dua tahap yakni secara (a) revolusioner : mengganti yang lama. Jika dirasa sistem yang lama sudah tidak dapat  mengikuti  perkembangan  teknologi.  (b) Evolusioner : terus melakukan perubahan pada perancangan yang sebelumnya

## III. HASIL DAN PEMBAHASAN

## 3.1 Goal Statement
Website  ini  merupakan  jenis  website  e- commerce,  yang  ditujukan  sebagai  solusi untuk  membantu  perusahaan  atau  pengusaha dalam mengembangkan usahanya dan menghadapi tekanan bisnis. Website
CakeCorner.com  dibuat  untuk  memudahkan penjual mempro-mosikan produknya ke masyarakat yang lebih luas, dan memudahkan masyarakat  untuk  membeli  berbagai  jenis  kue tanpa  harus  keluar  rumah  ataupun  masyarakat yang waktu senggangnya sedikit.

## 3.2 Sudut Pandang Perancangan Desain
Dalam  membuat  prototype  untuk  website CakeCorner ini,  pembuat  memakai  sudut pandang  UCD  ( User  Centered  Design ), dimana  pengguna  ditempatkan  di  tengah proses  desain,  dari  analisis  awal  kebutuhan pengguna  untuk  pengujian  dan  evaluasi. Prototype ini  mendukung  tujuan  dengan memungkinkan pengguna melihat & mengalami  sistem  final  jauh  sebelum  itu dibangun.

## 3.3 Model Konseptual
Model konseptual yang digunakan adalah process  oriented ,  karena website ini bertujuan untuk tempat sarana menjual suatu produk [4]. Penjual mengarahkan pembeli atau pengunjung web melihat-lihat berbagai macam produk  yang  dijual  melalui  menu  ( button ) Gallery. Proses s elanjutnya  adalah    penjual atau  pengunjung  membeli  produk  melalui form Order .

## 3.4 Tools Yang Digunakan
Tools  yang  digunakan  dalam  pengerjaan prototype design adalah CorelDRAW X7

## 3.5 Desain User Interface Web
Pada perancangan antarmuka web CakeCorner.com ini  menerapkan  kaidah perancangan  ”8 Golden  Rules  User  Interface Design ”.    Aturan  yang  pertama  adalah Strive For  Consistency ,  diterapkan  pada  halaman web  yang  menggunakan  hanya  satu  warna utama yaitu Martian green , yang cukup netral sehingga cocok untuk semua kalangan.
Gambar 2. Halaman Home
Halaman utama terdiri dari menu Home , Gallery ,  dan Order. Pada  halaman  tersebut juga  terdapat  form  untuk login bagi member . Dibawah  tulisan Welcome  to  CC  “Cake Corner  021-7633654” terdapat  ruang  kosong untuk menampilkan galeri foto dan form untuk pesan (order).
Aturan yang kedua ialah Enable Frequent Users  to  Use  Shortcuts. Pengguna  diberikan kemudahan  untuk  menuliskan  nama  produk yang  akan  dipesan  tanpa  perlu  melihat-lihat galeri produk.
Gambar 3. Shortcut Untuk Memilih Produk
Aturan yang ketiga ialah Offer Informative Feedback. Salah satu umpan balik yang  informatif  bagi  pengguna  adalah  sistem memberitahukan  ketika  terjadi  kegagalan pendaftaran member .
Gambar 4. Umpan Balik Saat Gagal Sign Up
Aturan  yang  keempat  ialah Design Dialogs  to  Yields  Closure .  Prinsip  ini  adalah mengenai ‘adanya panduan yang memudahkan user  untuk  melewati  kegiatan  yang  memiliki banyak  tahap’.  Dan  adanya  keterangan  atau ‘ feedback’ di  setiap  tahap,  yang  dapat memberitahukan bahwa tahap ini sudah selesai dan komplit.
Gambar 5. Petunjuk Saat Berhasil Order
Aturan kelima ialah Offer error prevention & simple error handling . Pada saat terdapat  kesalahan  pada  login,  lupa  password, user  dapat  mengetahui  nya  kembali  dengan meng-klik ‘forgot  password’ .  Sistem  akan mengirimkan  ke  email  user,  username  dan password baru.
Gambar 6. Penanganan Ketika Pengguna Gagal Sign In
Aturan  keenam  adalah Permit  Easy Reversal  of  Action. Sistem  memberikan kemudahan bagi pengguna untuk membatakan tindakan  yang  sudah  dilakukan  dengan  meng-
klik  tombol ( Undo )  atau  menekan  secara bersamaan tombol Ctrl + Z .
Penerapan aturan berikutnya yaitu Support  Internal  Locus  of  Control ,  adalah adanya  menu-menu  yang  bebas  dipilih  user, sehingga  user  memiliki  kontrol  terhadap sistem
Gambar 7. Pilihan Menu
Aturan selanjutnya adalah Reduce Short- term  memory  load. Untuk  mengurangi  beban memori  jangka  pendek,  menu  –  menu  yang ditampilkan  didesain  dengan  sederhana  dan tidak banyak gambar yang ditampilkan. Hal ini membuat pengguna fokus pada proses pemilihan  produk  (menu gallery )  dan  proses pemesanan produk (menu order ).
Gambar 8. Halaman Gallerry
Pada  gambar  8  terdapat  tombol dengan  warna  lebih  terang  dan  mencolok sehingga  pengguna  dipastikan  mengetahui bahwa  tombol  tersebut  adalah  tombol Next (menuju halaman selanjutnya).
Gambar 9. Halaman Order
Icon yang terdapat di halaman order , bisa diklik hanya jika data-data penting sudah  terisi.  Posisi  icon  tersebut  diletakan disebelah  kanan  dari bubble 2  karena  icon  ini akan  diklik  setelah  data  penting  terisi semua,dan  umumnya  orang  melihat  dan mengisi  dari  sebelah  kiri  baru  ke  kanan. Pemilihan bentuk icon dengan panah, dimaksudkan  untuk  menegaskan  bahwa  akan ke  proses  selanjutnya  dari  rangkaian  order tersebut.
Setelah prototipe desain antarmuka tersebut  sudah selesai dilakukan maka dibuatlah  sebuah  pengujian  atau testing .  Pada pengujian tidak melibatkan real user melainkan  membuat  sebuah  skenario  tugas ( task-based  scenario )  yang  digunakan  oleh pengembang  desain  antarmuka  untuk  menguji apakah semua task yang dibutuhkan pengguna sudah tercakup pada desain tersebut.
IV. PENUTUP
Pendekatan user-centered  design (UCD) digunakan  untuk  membuat  prototipe  desain antarmuka  pengguna.  Proses  yang  dilakukan adalah melakukan analisa yang terdiri dari (1) menyusun goal statement dan model konseptual.  Selanjutnya  membuat  desain dengan  menerapkan  8  aturan  emas.  Langkah ketiga  adalah  melakukan  pengujian  dengan metode task-based  scenario ,  yaitu  pengujian yang  dilakukan  oleh  pengembang  tanpa melibatkan real  user .  Dari  pengujian  tersebut akan  dilakukan redesign jika  terdapat  revisi pada desain yang telah disepakati.

## V. DAFTAR PUSTAKA
[1]  Hanna  Strömberg,  Jaana  Leikas,  Veikko Ikonen. Netta Iivari, Timo Jokela, KariPekka,  Aikio,  et  all. UserCentred Design  Guidelines for Methods  and  Tools VTT Information , Finlandia: VTT Information  Technology  University  of Oulu,  Dept.  of  Information  processing science,  Philips  Research  Philips  Applied Technologies, 2005.
[2]  Jennifer  Preece,  Yvonne  Rogers,  Helen Sharp. Interaction design : beyond human- computer  interaction ,  America:  John Willey&Sons, 2002.
[3]  Ameri,  Shahriar. User-Centered  Design, Concordia University . 2003.
[4]  Kangas,  Eeva,  Timo  Kinnunen. Applying User-Centered Design to Mobile Application Developmentser-Centered Design, Communications  Of  The  Acm . 2005.