## DESAIN USER INTERFACE GAME FAIRPLAY POKER MENGGUNAKAN METODE UCD (USER CENTERED DESIGN)
Henry Bastian 1 , Godham Eko Saputro 2 , Auria Farantikan Yogananti 3
Desain Komunikasi Visual, Universitas Dian Nuswantoro Semarang 123 Email: hnrbast@gmail.com 1 , godham.eko@gmail.com 2 , yogananti.au@dsn.dinus.ac.id 3 Paper received: 28-10-2020 revised: 25-10-2021 accepted: 12-11-2021
Abstract : In  Indonesia,  one  of  the  people’s  favorite  online  games  is  poker.  Poker  is  a  card  game  with some  rules  that  can  be  played  directly  or  via  the  internet.  Online  Poker  is  one  of  the  most  effective media  to  spend  time  and  amuse  pleasure  by  playing  poker  with  people.  The  Infamous  Poker  game 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.
Key Words : Game, User Interface, Fairplay
Abstrak: Salah satu permainan di Indonesia 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.  Dari  pencarian  data  yang  dilakukan  ditemukan  bahwasannya  permainan  tersebut  masih mempunyai  kekurangan  pada  bagian  user  interface  yang  berat  dan  memiliki  beberapa  kekurangan sehingga  penulis  mencoba  untuk  membuat User  Interface game  poker  online  sejenis  menggunakan metode UCD (User-Centered Design) dengan nama FairPlay Poker. Desain yang dihasilkan adalah desain ilustrasi 2D yang dapat digunakan dengan lebih ringan.

## Kata kunci: Game, User Interface, Fairplay

## 1. Pendahuluan
Aktivitas Berselancar di dunia maya sepertinya sudah bukan merupakan hal asing bagi kebanyakan  orang.  Mulai  dari  chatting,  aktif  di  sosial  media,  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  kesenangan 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  10  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 50juta kali pada laman googleplay. Dari  banyaknya  feedback  yang  memberikan  nilai  positif  (bintang  5)  untuk  aplikasi  zynga, peneliti juga menemukan bahwasanya terdapat pula feedback yang memberikan nilai negatif (bintang  1  atau  2).  Feedback  negative  sebagian  besar  mempermasalahkan  terlalu  beratnya aplikasi  untuk  dijalankan  karena  tampilan  yang  kompleks  serta  banyaknya  iklan  yang bertaburan pada aplikasi game.
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.

## 1.1 Game
Sejak  kemunculannya  pada  tahun  1952  (EDITORS,  2017)  game  /  permainan  terus berkembang  ke  berbagai  media  seperti  console, Personal  Computer maupun  mobile  phone. Dari segi tampilan game juga terus berkembang mulai dari 2D hingga 3D. Terdapat beberapa tipe  dan  genre  game,  tipe  game  lebih  mengarah  pada  deskripsi game  play sedangkan  genre game mengarah pada deskripsi narasi pada konten game (Lindsay, 2005).
Tipe game adalah sebagai berikut:
1.1.1. Action :  Game yang menawarkan intensitas utama perhatiannya pada action.
1.1.2. Adventure  /  Petualangan  :  Game  yang  menawarkan  eksplorasi  dan  menyelesaikan misi-misi sebagai daya tarik utama.
1.1.3. Puzzle:  Game yang menawarkan potongan-potongan objek sebagai daya tarik ugama.
1.1.4. Role  Playing:    Game  yang  menawarkan  pemain  untuk  berkesempatan  merasakan situasi menjadi karakter dalam game.
1.1.5. Simulation  /  Simulasi:    Game  yang  menawarkan  situasi  yang  hampir  sama  dengan kenyataan yang ada di dunia.
1.1.6. Strategy:    Game  yang  mengunggulkan  pemikiran  untuk  menyelesaikan  sebuah permasalah yang diberikan.
Untuk  genre  game  berikut  adalah  beberapa  jenisnya:  Drama,  Crime,  Fantasi,  Horror, Misteri, Science Fiction, Peperangan, dan lain-lain.

## 1.2 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 bagiandari sistem informasi yang membutuhkan interaksi pengguna untuk membuat inputs dan outputs .
Beberapa aspek yang berkaitan dengan User interface adalah sebagai berikut :
1.2.1. Aspek fisik, merupakan aspek yang berkaitan dengan perangkat keras yang digunakan oleh pengguna seperti layar sentuh mouse ataupun keyboard .
1.2.2. Aspek  perseptual,merupakan  aspek  yang  berkaitan  dengan  panca  indra  pengguna seperti segala sesuatu yang dapat dilihat, dirasakan dan didengar pengguna.
Aspek  konseptual,  merupakan  aspek  yang  berkaitan  dengan  tata  cara  penggunaan  seperti
contoh prosedur yang harus diikuti saat menjalankan sebuah sistem.

## 1.3 Desain User Interface
Terkadang tak  jarang pengguna menilai suatu sistem dengan hanya melihat tampilan luarnya  atau user  interface -nya  saja  sehingga  perancangan  user  interface  perlu  dipikirkan secara mendalam sehingga dapat menghasilkan interface yang efektif (Suteja & Harjoko, 2008) dengan berfokus pada desain user interface.
Berikut merupakan prinsip-prinsip dalam merancang desain user interface yang telah disesuaikan dengan bagaimana manusia dan komputer (sistem) berinteraksi (Mayhew, 1999).
1.3.1. User  compatibility :Sebuah  sistem  dalam  sebuah  aplikasi  dirancang  sedemikian  rupa sehingga mengenal karakteristik pengguna secara umum.
1.3.2. Product  compatibility :  Sebuah  sistem  aplikasi  diharapkan  dapat  memberikan  fungsi dan nilai sesuai fakta.
1.3.3. Task  compatibility :  Sebuah  sistem  aplikasi  diharapkan  dapat  membantu  pengguna dalam menyelesaikan tugas yang diberikan kepadanya.
1.3.4. Work flow compatibility : Sebuah sistem aplikasi dibangun dengan alur yang jelas saat penggunaannya sehingga pengguna dapat dengan mudah mengoperasikannya.
1.3.5. Consistency : Konsistensi diperlukan untuk sebuah interface suatu sistem aplikasi.
1.3.6. Familiarity :  Mengkondisikan  interface  aplikasi  game  dengan  tidak  jauh  berbeda dengan aplikasi game sejenis sebagai cara untuk membiasakan pengguna pada suatu game.
1.3.7. Simplicity : Desain interface perlu dibuat dengan simpel sehingga dapat dengan mudah dipahami.
1.3.8. Direct manipulation : Interface pada aplikasi diharapkan dapat membantu perubahan- perubahan tampilan.
1.3.9. Control :  Kontrol  digunakan  untuk  menyediakan  informasi  apabila  terjadi  kesalahan perintah pada sebuah aplikasi game.
1.3.10. WYSIWYG :  WYSIWYG  merupakan  kependekan what  you  see  is  what  you  get atau apabila diartikan adalah sebagai berikut “apa yang dilihat akan sama dengan apa yang didapat.
1.3.11. Flexibility :  User  Interface  sebuah  game  aplikasi  Antarmuka  perlu  dibuat  fleksibel sehingga apabila terdapat perubahan, aplikasi akan dengan mudah beradaptasi.
1.3.12. Responsiveness :  Sebuah  user  interface  dikondisikan  untuk  dapat  merespon  atau memberikan timbal balik secara langsung kepada pengguna
1.3.13. Invisible  Technology :  Teknologi  unggulan  yang  tidak  terlihat  namun  dapat mensupport secara keseluruhan sistem yang ada.
1.3.14. Robustness : Perintah dalam aplikasi game harus memiliki kata-kata yang baik sehingga menjadi aplikasi yang bersahabat dengan pengguna.
1.3.15. Protection :  Perlindungan  digunakan  saat  terjadi  kesalahan  yang  tidak  diinginkan pengguna. Disinilah perlu adanya opsi yang dapat membantu pengguna.
1.3.16. Ease Of Learning And Ease Of Use : Sebuah aplikasi game harus dapat dengan mudah dipelajari dan mudah digunakan dalam waktu singkat.
2. Metode Dalam penelitian ini penulis menggunakan metode kualitatif dengan alat analisa UCD (User  Centered  Design) (Abras,  et  al.,  2004)dalam  mengembangkan  desain User  Interface karena  memiliki  fokus  pada  kebutuhan  dan  pengalaman  pengguna.  UCD  sudah  digunakan dalam penelitian game antara lain dalam (Guo and Goh 2016; Lee et al. 2021; Mat Zain, Jaafar, and Abdul Razak 2015; Savazzi et al. 2018).
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

## 2.1. Understand Context of Use
Memahami  konteks  dari  penggunaan,  disini  perancang  perlu  paham  sikap  pengguna  dengan mengumpulkan data yang berkaitan dengan pengguna. 2.2. Specify User Requirements
Membuat spesifikasi kebutuhan pengguna, kebutuhan pengguna dapat dilihat dari tujuan yang hendak dicapai oleh pengguna.
2.3. Design Solutions
Solusi desain. Solusi desain didapat melalui beberapa tahapan mulai dari pembuatan konsep, pembuatan prototipe dan terakhir pembuatan desain akhir.

## 2.4. 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  pembuatan User  Interface  Wireframe sebagai landasan  pembuatan  desain. Wireframe digunakan  sebagai  acuan  dasar  layout  dari  desain game yang akan dibuat
Tahap I Understand Context of Use
Dari  hasil  observasi  yang  dilakukan  penulis  pada  salah  satu  game  poker,  diketahui bahwasanya User Interface yang digunakan membingungkan, hal ini diketahui dari beberapa point  yaitu:  Tidak  adanya  area  dalam  meminta  bantuan  atau  area  dimana  pengguna  dapat menemukan  informasi  mengenai  game.Tidak  adanya  keterangan  pada  beberapa  bagian seperti  informasi  tentang league. User  Interface  yang  berat  sehingga  terkadang  butuh beberapa saat untuk menampilkan keseluruhan desain interface.

## Tahap 2 Specify User Requirements
Dari  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.  Adapun  game  play  yang  akan  digunakan  lebih  simpel  dan minimalis yaitu: pertama Pemain masuk kedalam opening board; kedua 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.  Ketiga Pengguna baru yang melakukan registrasi akan diminta mengisi informasi tentang pengguna Keempat  pengguna dapat masuk ke home board setelah login baru kemudian dapat masuk ke
dalam.  Kelima  bila  terdapat  hal-hal  yang  tidak  diketahui  pengguna  juga  dapat  membuka halaman  informasi  mengenai  game.dan  keenam  kemudian  setelah  masuk  ke  dalam  main board pengguna dapat memilih 3 permainan yang ada yaitu casual game, kompetisi game dan Fun Game.

## Tahap 3 Desain 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.

## Gambar 2. Opening board wireframe
Gambar 2 merupakan halaman pembuka dimana didalamnya hanya terdapat logo dari game.

## Gambar 3. Login board wireframe
Setelah logo muncul maka akan ada login board yang akan mengarahkan pengguna ke dalam  board  utama  (gambar  3).  Halaman  login  tidak  memiliki  banyak  informasi  dan  button karena  meminimalisir  besar  game  dan  meminimalisir  kebingungan  pengguna  pada  saat menjalankan game.

## Gambar 4. Register board wireframe
Apabila pengguna merupakan user baru maka pengguna dapat masuk terlebih dahulu  ke dalamregistrasi board (gambar 4). Didalam registrasi board pengguna perlu memasukkan data-
data agar mendapatkan ID.

## Gambar 5. Home board wireframe
Dalam  Home  board  (gambar  5)  menu  dan  button  yang  digunakan  juga  sedikit  agar memudahkan pengguna dalam memulai permainan.

## Gambar 6. Information board wireframe
Information board Dalam Home board (gambar 6) menu dan button yang digunakan juga sedikit agar memudahkan pengguna dalam memulai permainan.

## Gambar 7. Information board wireframe
Halaman  utama  atau  main  board  dibuat  dengan  layout  yang  dibagi  menjadi  3  yaitu header, main body dan footer (gambar 7).

## 4. Desain User Interface
Setelah melakukan cognitive walkthrough langkah selanjutnya yang dilakukan penulis adalah  mengimplementasikan  ide  yang  berasal  dari  feedback  pengguna  dan  pihak pengembang untuk perancangan desain grafis secara visual.

## Gambar 8. Logo game Fairplay
Gambar 8 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 (gambar 9).

## Gambar 9. Code warna yang digunakan dalam game
Adapun  dalam  penggunaan  huruf  Fairplay  menggunakan  typeface  dengan  serif  yang  simpel dan tidak terkesan penuh.
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

## Gambar 10. Desain Opening board
Disesuaikan dengan wireframe yang telah ada, logo game diletakkan di bagian tengah dengan  menggunakan  latar  (gambar  10).  Tingkat  kejelasan  latar  diubah  agar  logo  terlihat dengan jelas. Adapun latar yang digunakan terdiri dari 2 jenis (gambar 11 dan gambar 12)
Gambar 12. Desain Latar 02
Gambar 13. Desain Login board

## Gambar 14. Desain Register board
Pada  gambar  13  dan  14  secara  garis  besar  latar  yang  digunakan  sama  namun perbedaan dapat dilihat pada list yang harus diisi oleh pengguna.

## Gambar 15. Desain Home board
Home  board  muncul  setelah  pengguna  melakukan  login  atau  setelah  melakukan registrasi.  Desain  home  board  sedikit  berbeda  dengan  adanya  ilustrasi  yang  dapat  menarik perhatian  pengguna.  Selain  hal  tersebut,  dalam  home  board  pengguna  juga  dapatmelihat profil  pengguna.Dalam  halaman  ini  terdapat  beberapa  tombol  yang  dapat  menghubungkan pengguna  ke  dalam  halaman-halaman  lain  seperti  mengetahui  informasi  mengenai pengembang.

## Gambar 16. Desain Information board
Pada  information  board  (gambar  16)  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.

## Gambar 17. Desain 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  di  sebelah  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 2 point 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. Simpulan
Berdasarkan tahapan yang telah dilakukan maka dapat disimpulkan bahwa :
4.1. Desain  user  interface  telah  dibuat  melalui  proses  yang  sesuai  dengan  spesifikasi  yang diharapkan oleh pengguna.
4.2. Penggunaan metode UDC dalam pembuatan user interface yang melibatkan pengguna dan pengembang sangat membantu dalam proses pembuatan User Interface yang diharapkan
4.3. Desain ilustrasi yang dibuat dapat mengurangi masalah besaran file.

## DAFTAR RUJUKAN
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] Available at: https://tekno.kompas.com/read/2013/07/16/1148114/10.igamei.facebook.terpopuler. di.indonesia [Accessed 20 10 2020]. EDITORS, H., 2017. Video Game History. [Online]
Available at: https://www.history.com/topics/inventions/history-of-video-games [Accessed 27 10 2020].
Guo, Yan Ru, and Dion Hoe-Lian Goh. 2016. “Library Escape: User-Centered Design of an
Information Literacy Game.” The Library Quarterly 86(3):330–55.
Lee, Seyeon, Hyunyoung Oh, Chung-Kon Shi, and Young Yim Doh. 2021. “Mobile Game Design Guide to Improve Gaming Experience for the Middle-Aged and Older Adult Population: User-Centered Design Approach.” JMIR Serious Games 9(2):e24449. Lindsay, G., 2005. Game Type and Game Genre. [Online] Available at: https://www.researchgate.net/publication/262250061_Game_Type_and_Game_Genre [Accessed 19 10 2020].
Mat Zain, Nurul Hidayah, Azizah Jaafar, and Fariza Hanis Abdul Razak. 2015. “A User-Centered Design: Methodological Tools to Design and Develop Computer Games for Motor-
Impaired Users.”
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.
Savazzi, Federica, Sara Isernia, Johanna Jonsdottir, Sonia Di Tella, Stefania Pazzi, and Francesca
Baglio. 2018. “Engaged in Learning Neurorehabilitation: Development and Validation of a Serious Game with User-Centered Design.” Computers & Education 125:53–61.
Suteja, B. R. & Harjoko, A., 2008. Perancangan User Interface E-Learning Berbasis Web.
Yograkarta, UPN ”Veteran” Yogyakarta, pp. 36 - 46.