## DESAIN USER INTERFACE GAME FAIRPLAY POKER MENGGUNAKAN METODE UCD (USER CENTERED DESIGN)
Henry Bastian 1 , Godham Eko Saputro 2
12 Desain Komunikasi Visual, Universitas Dian Nuswantoro Semarang hnrbast@gmail.com 1 , godham.eko@gmail.com 2

## Abstrak
Di Indonesia, salah satu permainan yang menjadi kegemaran adalah bermain game Poker. Poker merupakan  permainan  kartu  aturan  yang  dapat  dimainkan  secara  langsung  maupun  lewat internet. Game Poker online adalah  salah  satu  sarana  efektif  untuk  menghabiskan  waktu sekaligus hiburan kesenangan bermain poker dengan banyak orang. Salah satu game Poker yang terkenal adalah Zynga Poker. Pencarian data yang ditemukan bahwasannya permainan tersebut mempunyai kekurangan pada bagian user interface yang berat saat digunakan sehingga penulis mencoba untuk membuat user interface game online sejenis menggunakan metode UCD (User- Centered  Design) dengan  nama game FairPlay  Poker.  Desain  yang  dihasilkan  adalah  desain ilustrasi 2D yang digunakan dengan lebih ringan.
Kata kunci: Game , metode UCD, User interface , Poker,

## Abstract
In Indonesia, one of the favorite online games is poker. Poker is a card game with some rules that can be played directly or via the internet. Online Poker game is one of the effective media to spend  time  and  amuse  pleasure  by  playing  poker  with  peoples.  The  Infamous  Poker  game  is known  as  Zynga  Poker.  From  the  data  search  that  had  been  done,  the  game  still  has  a  few weaknesses in the heavy User Interface that the authors try to develop a similar user interface poker game. Which name the Fairplay Poker using UCD (User-Centered Design) methodology. A design resulted in an illustration designed in 2D that can improve loading with lighter.
Keywords : Game, UCD Method, User interface, Fairplay
http://publikasi.dinus.ac.id/index.php/andharupa
_________________________ Available online at: bit.do/andharupa 28 February 2021

## 1. PENDAHULUAN
Aktivitas berselancar di dunia maya sepertinya sudah bukan merupakan hal asing bagi kebanyakan  orang.  Mulai  dari chatting ,  aktif  di  media  sosial,  hingga  bermain game online banyak diminati oleh semua kalangan dan usia. Di dunia maya banyak ditemukan game online dengan berbagai tema seperti balap, perang, simulasi, dan poker. Game - game tersebut yang dimainkan oleh banyak penikmat game di Indonesia. Game Poker merupakan  permainan  kartu  aturan  yang  dapat  dimainkan  secara  langsung  maupun lewat internet. Game Poker online adalah salah satu sarana efektif untuk menghabiskan waktu sekaligus hiburan bermain poker dengan banyak orang. Reward yang ditawarkan oleh game ini adalah menguji kemampuan melawan para master poker di seluruh dunia dan menjadi dewa judi terhebat di dunia maya. Salah satu tempat bermain game poker online bagi  penikmat game ini  adalah  situs  Itupoker.com.  Sebuah  agen  poker online Indonesia  terpercaya  yang  banyak  menelurkan reward berupa  bonus jackpot jutaan rupiah.
Zynga poker dan Texas Hold'em Poker merupakan contoh kecil dimana permainan poker yang dibuat versi game dalam berbagai platform dan menjadi populer. Texas Hold'em Poker  adalah  salah  satu game poker online yang  dapat  dimainkan  di  jejaring  sosial Facebook,  dan  menduduki  peringkat  teratas  dari  sepuluh game yang  paling  banyak dimainkan  di  Indonesia  pada  Juni  2013  menurut  lembaga  analisis  MetricsMonk (Deliusno,  2013).  Sedangkan  Zynga  poker  menjadi game aplikasi  yang  telah  diunduh lebih  dari  50  juta  kali  pada  laman google  play .  Dari  banyaknya feedback yang memberikan  nilai  positif  (bintang  5)  untuk  aplikasi  zynga,  pulis  juga  menemukan bahwasannya terdapat pula feedback yang memberikan nilai negatif (bintang 1 atau 2). Feedback negatif  sebagian  besar  mempermasalahkan  terlalu  beratnya  aplikasi  untuk dijalankan karena tampilan yang kompleks serta banyaknya iklan yang bertaburan pada aplikasi game .  Hal  ini  karena    pengguna  menilai  suatu  sistem  hanya  dengan  melihat tampilan  luarnya  atau user  interface sehingga  perancangan user  interface perlu dipikirkan secara mendalam sehingga dapat menghasilkan interface yang efektif (Suteja & Harjoko, 2008) dengan berfokus pada desain user interface.
User  interface adalah  wilayah  tempat  terjadinya  interaksi  antara  program  dan pengguna,  yang  memungkinkan  sistem  menerima input (masukan  informasi)  dari pengguna sehingga muncul output (luaran) dari sistem (Mcleod, 1995). Sehingga dapat dikatakan pula bahwa user interface juga merupakan sistem yang digunakan pengguna untuk  berinteraksi  dengan  objek  rancangan,  sehingga  tidak  hanya  berwujud  visual namun juga dapat berwujud suara (Olga, 2015).
Sama halnya dengan Mcleod,  Sani  (2014) juga berpendapat bahwa user interface (UI) merupakan bagian dari sistem informasi yang membutuhkan interaksi pengguna untuk membuat inputs dan outputs . User interface meliputi a) aspek fisik, merupakan aspek yang  berkaitan  dengan  perangkat  keras  yang  digunakan  oleh  pengguna  seperti  layar sentuh mouse ataupun keyboard; b) aspek perseptual,merupakan aspek yang berkaitan dengan panca indra pengguna seperti segala sesuatu yang dapat dilihat, dirasakan dan didengar pengguna; c) Aspek konseptual, merupakan aspek yang berkaitan dengan tata
cara penggunaan seperti contoh prosedur yang harus diikuti saat menjalankan sebuah sistem. (Sani, 2014)
Dalam penelitian ini penulis mencoba untuk membuat user interface game poker online sejenis dengan nama FairPlay Poker dengan menggunakan metode UCD (User Centered Design) . FairPlay Poker dibuat untuk dapat digunakan dengan lebih ringan namun tetap dirancang  semenarik  mungkin  sehingga  mudah  digunakan  saat  dimainkan. User interface sendiri adalah tampilan luar atau visual desain dari sebuah aplikasi yang dapat dilihat secara kasat mata dan mencakup didalamnya adalah layout.

## 2. METODE PENELITIAN
Dalam penelitian ini penulis menggunakan metode kualitatif dengan alat analisis UCD (User  Centered  Design) (Abras,  et  al.,  2004) dalam  mengembangkan  desain User interface karena memiliki fokus pada kebutuhan dan pengalaman pengguna.
Dalam  UCD  beberapa  prinsip  seperti  pentingnya  memahami  pengguna  secara  jelas, desain dibuat berdasarkan evaluasi dan pengalaman pengguna serta keikutsertaan klien dalam  merancang  desain.  Dalam  prosesnya  UCD  dibagi  menjadi  4  tahapan  seperti terlihat pada gambar 1
Gambar 1. Empat tahapan proses dalam UCD [Sumber : https://www.interaction-design.org/literature/topics/user-centered-design]
Tahap 1 yaitu Understand Context of Use; memahami konteks dari penggunaan, disini perancang yaitu penulis perlu paham sikap pengguna dengan mengumpulkan data yang berkaitan  dengan  pengguna.  Tahap  2 yaitu Specify  User  Requirements; menspesifikasikan kebutuhan pengguna, kebutuhan pengguna dapat dilihat dari tujuan yang  hendak  dicapai  oleh  pengguna.  Tahap  3  yaitu Design  Solutions ;  Solusi  desain didapat melalui beberapa tahapan mulai dari pembuatan konsep, pembuatan prototype dan terakhir pembuatan desain akhir. Tahap 4 yaitu Evaluation Against Requirements ; Evaluasi  akan  dilakukan  dengan  melibatkan  pengembang  yang  akan  menggunakan, evaluasi dilakukan mulai dari 1 proses dan dilanjutkan ke proses berikutnya.

## 3. HASIL DAN PEMBAHASAN
Proses  perancangan  dimulai  dari User  interface  Wireframe sebagai  landasan perancangan desain. Wireframe digunakan sebagai acuan dasar layout dari desain game yang akan dirancang.
Tahap I Understand Context of Use
Dari  hasil  observasi  yang  dilakukan  penulis  pada  salah  satu game poker,  diketahui bahwasannya user  interface yang  digunakan  masih  tampak  membingungkan,  hal  ini diketahui dari beberapa poin yaitu:
a. User  interface terlihat  berat  sehingga  terkadang  perlu  beberapa  saat  untuk menampilkan keseluruhan desain interface .
b. Tidak adanya area dalam meminta bantuan atau area pengguna dapat menemukan informasi mengenai game .
c. Tidak adanya keterangan pada beberapa bagian seperti informasi tentang league.

## Tahap 2 Specify User Requirements
Berdasarkan  Informasi  yang  didapat,  penulis  menspesifikasikan  kebutuhan  pengguna pada  desain  yang  tidak  menghasilkan  file  yang  berat.  Hal  tersebut  bisa  didapat  dari penggunaan desain yang clean dan simple , ilustrasi yang tidak terlalu komplek dalam pewarnaannya.  Adapun game play  yang  akan  digunakan  akan  lebih  sederhana  dan minimalis yaitu
1. Pemain masuk kedalam opening board
2. Setelah  itu login  board akan  muncul.  Bagi  pengguna  yang  telah  memiliki  akun, pengguna dapat langsung masuk melalui laman ini namun jika belum pengguna baru perlu melakukan registrasi.
3. Pengguna  baru  yang  melakukan  registrasi  akan  diminta  mengisi  informasi  tentang pengguna
4. Pengguna  dapat  masuk  ke home  board setelah  login  baru  kemudian  dapat  masuk kedalam.
5. Bila  terdapat  hal-hal  yang  tdk  diketahui  pengguna  juga  dapat  membuka  halaman informasi mengenai game .
6. Kemudian setelah masuk kedalam main board pengguna dapat memilih 3 permainan yang ada yaitu casual game , kompetisi game dan Fun Game.

## Tahap 3 Design solution
Proses perancangan dimulai dari pembuatan user interface wireframe sebagai landasan pembuatan desain. Wireframe digunakan sebagai acuan dasar layout dari desain game yang akan dibuat.
Tabel 1. Tahap desain dalam user interface wireframe
[Sumber: Henry Bastian, 2020] No Jenis Interface User Interface Wireframe Keterangan 1 Opening board merupakan halaman pembuka dimana didalamnya hanya terdapat logo dari game . 2 Login Board Halaman login tidak memiliki banyak informasi dan button karena meminimalisir besar game dan meminimalisir kebingungan pengguna pada saat menjalankan game . 3 Register board Apabila pengguna merupakan user baru maka pengguna dapat masuk terlebih dahulu ke dalam registrasi board . Di dalam registrasi board pengguna perlu memasukkan data-data agar mendapatkan ID 4 Home board Dalam Home  board menu  dan button yang  digunakan  juga sedikit agar memudahkan pengguna dalam memulai permainan. 5 Information board Information  board dalam Home board menu  dan button yang digunakan  juga  sedikit  agar memudahkan  pengguna  dalam memulai permainan.
No Jenis Interface User Interface Wireframe Keterangan 6 Main board Halaman  utama  atau main  board dibuat dengan layout yang dibagi menjadi 3 yaitu header , main body dan footer .

## 4. Desain User Interface
Setelah  melakukan cognitive  walktrough langkah  selanjutnya  yang  dilakukan  penulis adalah  mengimplementasikan  ide  yang  berasal  dari  feedback  pengguna  dan  pihak pengembang untuk perancangan desain grafis secara visual.
Gambar 2. Logo game Fairplay [Sumber: Henry Bastian, 2020]
Gambar 2 merupakan logo dari Fair Play Poker sebagai identitas dari game . Logo akan banyak digunakan adalah halaman game selain sebagai identitas namun juga sebagai pengingat agar pengguna mengingat dan mengenali identitas game . Warna utama yang digunakan dalam game adalah hijau, merah, hitam dan putih. Warna merah, hitam dan putih  dipilih  pertama  kali  berdasarkan  warna  yang  ada  pada  kartu  kemudian,  warna hijau  muncul  dari  warna  komplementer  merah  sehingga  warna  benar  benar  kontras (gambar 3).
Gambar 3. Code warna yang digunakan dalam game
[Sumber: Henry Bastian, 2020]
Adapun  dalam  penggunaan  huruf  Fairplay  menggunakan typeface dengan  serif  yang sederhana dan tidak terkesan penuh sehingga tingkat keterbacaan menjadi lebih tinggi. Beberapa ilustrasi juga dibuat untuk memaksimalkan desain UI yang ada, namun desain- desain  yang  dibuat  tetap  menggunakan  ilustrasi  2D  yang  memungkinkan  hasil  desain tidak berat. Adapun ilustrasi tambahan digunakan pada bagian latar game , latar board dan  ilustrasi  perempuan  sebagai  ilustrasi  yang  dapat  menarik  perhatian  pengguna.
Berikut desain dari beberapa board yang akan digunakan dalam game Fairplay Poker
Tabel 2. Desain User Interface game Fairplay Poker [Sumber: Henry Bastian, 2020] No Jenis Interface User Interface Wireframe Keterangan 1 Opening board Logo yang diletakkan di tengah akan mudah  terlihat.  Tingkat  kejelasan latar  diubah  menjadi  lebih  rendah agar logo terlihat dengan jelas. 2 Login Board secara garis besar latar yang digunakan sama namun perbedaan dapat dilihat pada list yang haris di isi oleh pengguna. Jenis latar menggunakan 2 desain dasar yaitu
3 Register
board 4 Home board
Desain home board sedikit berbeda dengan adanya ilustrasi yang dapat menarik perhatian pengguna. Selain hal tersebut, dalam home board pengguna juga dapat melihat profil pengguna. Dalam halaman ini terdapat beberapa tombol yang dapat menghubungkan pengguna ke dalam halaman-halaman lain seperti mengetahui informasi mengenai pengembang.
No Jenis Interface User Interface Wireframe Keterangan 5 Information board desain latar board dibuat menyerupai desain board pada login dan registrasi board sebagai konstanta  desain  namun  variabel yang  digunakan  adalah  dengan menambahkan  ilustrasi  piala  dalam board.  Informasi  yang  diletakkan  di dalamnya  juga  berisi  cara  bermain, informasi  pemenang  dan  informasi mengenai hadiah yang akan didapatkan. 6 Main board Desain mainboard dibagi  menjadi  3 bagian  dengan  penggunaan  warna dan  ilustrasi  yang  berbeda.  Pada bagian  tengah  terdapat  desain utama  untuk  permainan  dengan menggunakan warna kuning kemudian  disebelah  kiri  terdapat berita-berita terkini dan sebelah kiri terdapat informasi mengenai pengguna.
Tahap 4 . Evaluation Against Requirements Setelah  desain user  interface dibuat,  evaluasi  dilakukan  dengan  melibatkan pengembang dan calon pengguna yang akan menggunakan game tersebut. Dari evaluasi yang dilakukan terdapat dua poin yang perlu dilakukan untuk memaksimalkan  desain game yang ada point pertama ada pada user interface yang perlu disempurnakan dan yang  kedua  adalah  menganimasikan  ilustrasi  yang  ada.  Animasi  diharapkan  dapat menambahkan kesan hidup dalam game yang dibuat.

## 4. KESIMPULAN
Berdasarkan tahapan yang telah dilakukan maka dapat disimpulkan bahwa desain user interface telah  dibuat  melalui  proses  yang  sesuai  dengan  spesifikasi  yang  diharapkan oleh  pengguna  sehingga  menghasilkan  desain  UI  dalam  bentuk  ilustrasi  2D  sehingga desain ilustrasi yang dibuat dapat mengurangi masalah besaran file. Desain yang dibuat diharapkan dapat menambah referensi desain yang ringan untuk game yang serupa.
Penggunaan metode UDC dalam pembuatan user interface yang melibatkan pengguna dan  pengembang  sangat  membantu  dalam  proses  pembuatan User  interface yang diharapkan  namun  perlu  penggunaan  metode  yang  berbeda  apabila  desain  yang  ada akan  diaplikasikan  kedalam  bentuk prototipe. Pembuatan  desain  yang  telah  ada terbatas pada perancangan desain halaman-halaman utama saja, desain mungkin akan dapat ditambah dan dikembangkan apabila game kedepannya lebih berkembang.

## DAFTAR PUSTAKA
Abras, C., Maloney-Krichmar, D. & Preece, J. (2004). User-centered design. Bainbridge, W. Encyclopedia of Human-Computer Interaction., 37(4), pp. 445-456.
Deliusno.  (2013). 10  Game  Facebook  Terpopuler  di  Indonesia. [ Online ]  url: https://tekno.kompas.com/read/2013/07/16/1148114/10.i game i.facebook .terpopuler.di.indonesia. [Accessed 20 10 2020].
EDITORS, H. (2017). Video Game History. [ Online ] url:
https://www.history.com/topics/inventions/history-of-video- game s.
[Accessed 27 10 2020]. Lindsay, G. (2005). Game Type and Game Genre. [ Online ] url: https://www.researchgate.net/publication/262250061_ Game _Type_and_ Game _Genre [Accessed 19 10 2020]. Mayhew, D. J. (1999). The Usability Engineering Lifecycle: A Practitioner's Handbook for User  interface  Design  (Interactive  Technologies). 1st  Edition  ed.  United Stated: Morgan Kaufmann.
Mcleod, R. (1995). Sistem Informasi Management. Jakarta: PT. Prenhalindo.
Olga, R. (2015). Website Redesign: Improving User Experience and User interface on the Havusport Website (Thesis), Finland: University of Applied Science. Sani,  K.  (2014).  Perceptual  Human  Computer  Interaction  / Interface Menggunakan Teknik Computer.
Suteja, B. R. & Harjoko, A. (2008). Perancangan User interface E-Learning Berbasis Web. Yograkarta, UPN ”Veteran” Yogyakarta, pp. 36 - 46