1. Pendahuluan

Pada era ini, game mobile semakin populer, dan juga berkembang pesat, sehingga menjadi bagian penting dalam industri hiburan digital. Dengan, ratusan hingga biliaran pengguna mobile di seluruh dunia. game mobile kini mampu menyaingi bahkan menggantikan sebagian pasar game tradisional. Menurut penelitian terbaru, game mobile telah membawa perubahan besar dalam industri game secara keseluruhan, mulai dari model bisnis hingga preferensi pemain[1]

Salah satu game yang dimainkan oleh jutaan pemain adalah Clash Royale, yang dikembangkan oleh Supercell. Clash Royale menggunakan elemen strategi Real-Time dengan sistem card-collector dalam perlawanan 1v1 atau 2v2, ataupun berbagai game mode lainnya. Kesuksesan Clash Royale tidak hanya berasal dari mekanisme gameplay yang adiktif, tetapi juga dari desain User Interface (UI) dan User Experience (UX) yang optimal.

Figure 1.Clash Royale App Logo

  1. Apa Itu UI/UX?

User interface atau disebut juga dengan UI, adalah tampilan visual yang berada pada halaman pertama sebuah website atau aplikasi yang memuat menu-menu ataupun informasi yang ada pada website atau aplikasi yang memiliki tujuan untuk memberikan pengguna tampilan yang nyaman untuk dilihat[2]. Sementara itu, User Experience atau UX, adalah konsep yang berfokus pada cara pengguna berinteraksi dengan produk atau layanan yang mereka gunakan. Proses desainnya bertujuan untuk menemukan cara yang paling mudah dan efisien bagi pengguna dalam memakai produk atau layanan tersebut[3].

UI (User Interface) dan UX (User Experience) adalah dua elemen penting dalam pengembangan game. UI merujuk pada tampilan visual dan elemen interaktif dalam game yang memungkinkan pengguna berinteraksi dengan sistem. Sementara itu, UX lebih menekankan pada pengalaman keseluruhan yang dirasakan oleh pengguna saat berinteraksi dengan game tersebut.

Dalam konteks game mobile, UI mencakup desain tombol, menu navigasi, warna, dan elemen grafis lainnya. UX, di sisi lain, mencakup aspek kenyamanan, kejelasan informasi, dan kemudahan kontrol dalam permainan. Kombinasi UI dan UX yang baik dapat meningkatkan keterlibatan pemain dan kenyamanan serta mempertahankan loyalitas mereka terhadap game.

 

  1. Apa Itu Clash Royale?

Clash Royale adalah game strategi real-time yang dirilis pada Maret 2016 oleh Supercell, salah satu perusahaan paling sukses di pasar game mobile, dengan pendapatan yang telah melebihi satu miliar dolar hingga saat ini. Clash Royale sendiri mengkombinasikan elemen permainan kartu dan pertarungan Player vs. Player.

Game Clash Royale dirancang untuk dimainkan dalam sesi singkat, biasanya satu game dapat berlangsung dalam 5 menit. Sehingga membutuhkan antarmuka yang cepat, intuitif, dan responsif. Supercell, sebagai pengembang game, telah mengoptimalkan Clash Royale agar dapat dimainkan dengan nyaman di perangkat mobile melalui pendekatan desain UI/UX yang efektif[4].

 

  1. Fitur Komponen-Komponen UI/UX dalam Clash Royale

a. Desain Antarmuka yang Sederhana dan Intuitif

Tata letak dalam Clash Royale dibuat sesederhana mungkin untuk memudahkan navigasi pemain. Elemen-elemen utama seperti “Battle”, “Cards”, “Guild”, dan “Shop” diletakkan di bagian bawah layar untuk memudahkan akses dengan satu tangan. Ikon-ikon memiliki desain yang jelas dan skema warna yang kontras agar mudah dikenali[5].

Figure 2. Clash Royale Home menu

Selain itu, UI dalam pertandingan juga dirancang secara efisien. Deck kartu berada di bagian bawah layar, sementara untuk memasuki arena perlawanan terletak di tengah atas. Penempatan ini memungkinkan pemain untuk tetap fokus pada strategi permainan tanpa terganggu oleh elemen UI yang berlebihan.

b. Gameplay yang Dapat Dimainkan dengan Satu Tangan
Kemudian UX unggulan dalam Clash Royale adalah kemampuannya dimainkan hanya dengan satu tangan. Clash Royale menggunakan portrait untuk membiarkan pemain bermain menggunakan ibu jari mereka, sehingga lebih fleksibel dibandingkan game – game strategi lain yang biasanya membutuhkan penggunaan kedua tangan.
Kemudahan kontrol ini diperkuat dengan mekanisme drag-and-drop untuk menempatkan kartu ke medan pertempuran. Dengan pendekatan ini, pemain dapat menikmati pengalaman bermain yang nyaman dan responsif[6].

Figure 3. Drag-and Drop clash Royale

c. Umpan Balik Visual dan Audio
Efek visual dan audio memainkan peran penting dalam meningkatkan UX Clash Royale. Setiap aksi yang dilakukan pemain mendapatkan umpan balik visual secara langsung melalui animasi yang menarik serta efek suara yang khas, yang menegaskan keberhasilan tindakan tersebut. Sebagai contoh, ketika seorang pemain menempatkan kartu di medan pertempuran, efek cahaya yang menyala serta suara yang khas akan muncul, memberikan konfirmasi visual dan auditif terhadap tindakan yang dilakukan[7].

Figure 4. Card placement confirmed

Selain itu, efek suara juga digunakan untuk memperjelas situasi permainan dan meningkatkan keterlibatan pemain. Suara dramatis muncul ketika menara dihancurkan, meningkatkan intensitas permainan dan memberikan petunjuk penting tanpa harus terus-menerus melihat layar. Efek suara lainnya, seperti suara langkah unit yang berjalan atau suara serangan yang berbeda untuk setiap jenis pasukan, membantu pemain memahami situasi permainan hanya melalui audio[8].

Figure 5. Tower Destroyed

d. Penggunaan Warna dan Tipografi yang Efektif
Supercell menggunakan warna dan tipografi yang efektif untuk memperkuat elemen visual dalam Clash Royale. Palet warna cerah digunakan untuk memberikan pengalaman bermain yang lebih dinamis dan intuitif. Warna merah digunakan untuk menunjukkan bahaya atau efek negatif seperti racun (poison) dan listrik (electricity), sedangkan warna biru sering digunakan untuk menandakan efek positif seperti pembekuan (freeze) atau klon (clone).

Tipografi dalam game dirancang agar tegas dan mudah dibaca, memastikan informasi penting seperti jumlah eliksir, cooldown kartu, dan status pertandingan dapat diakses dengan cepat tanpa mengganggu jalannya permainan. Elemen-elemen ini diperkuat dengan ikon dan animasi, seperti lingkaran jangkauan (spell range) atau indikator damage, untuk memberikan umpan balik visual yang jelas kepada pemain[9].

Figure 6. Tipe-tipe elemen dalam Clash Royale (Diambil dari The Rookies. (2020))

 

  1. Gameplay yang Didapatkan dari UI/UX

Desain UI/UX dalam Clash Royale sangat mempengaruhi pengalaman bermain. Kemudahan navigasi dan kontrol yang responsif memungkinkan pemain memahami mekanisme permainan dengan cepat. UX yang baik juga menciptakan pengalaman yang lebih imersif, memungkinkan pemain lebih fokus pada strategi permainan daripada menghadapi kendala teknis.

Selain itu, elemen visual dan audio memberikan kejelasan dalam pertandingan, memberikan umpan balik yang dibutuhkan agar pemain dapat bereaksi dengan cepat. Indikator efek seperti deployment delay, cooldown, serta jangkauan serangan memperjelas tindakan yang terjadi di medan perang. Misalnya, saat pemain menggunakan kartu yang memiliki jeda sebelum penempatan, ikon jam akan muncul untuk menunjukkan penundaan tersebut. Hal ini memungkinkan pemain untuk merencanakan strategi mereka dengan lebih baik. Kombinasi UI/UX yang dirancang dengan baik ini membuat gameplay lebih menarik dan adiktif.

Selain elemen visual dan navigasi, aspek komunikasi dalam game juga memainkan peran penting dalam pengalaman pengguna. Supercell membatasi komunikasi dalam arena hanya dengan emote dan teks bawaan untuk mengurangi toksisitas yang umum terjadi dalam game online. Dengan tidak adanya global chat, pemain lebih fokus pada strategi permainan daripada gangguan komunikasi negatif. Namun, dalam clan, pemain masih dapat berkomunikasi secara bebas sehingga interaksi sosial tetap ada tanpa mengganggu jalannya pertandingan. Keputusan ini membantu menciptakan lingkungan yang lebih positif bagi semua pemain.

 

  1. Tantangan dalam Desain UI/UX Clash Royale

Dalam pengembangan UI/UX Clash Royale, Supercell menghadapi beberapa tantangan utama, di antaranya:

  • Simplicity vs. Deep Gameplay: UI harus tetap sederhana dan intuitif tanpa mengorbankan elemen strategis yang membuat permainan menarik. Misalnya, meskipun hanya terdapat beberapa slot kartu yang dapat dimainkan, pemain tetap memiliki kebebasan untuk merancang strategi yang kompleks [10].
  • Kompatibilitas terhadap Perangkat: Game harus berjalan optimal di berbagai ukuran layar dan spesifikasi perangkat tanpa mengurangi kualitas pengalaman bermain. UI harus disesuaikan agar tetap nyaman digunakan di layar kecil maupun besar[11].
  • Kecepatan Akses Informasi: Pemain harus dapat memperoleh informasi tentang kartu, statistik pertandingan, dan lawan mereka dengan cepat tanpa merasa terganggu oleh desain yang berantakan. Oleh karena itu, Clash Royale menggunakan elemen visual yang jelas dan intuitif, seperti ikon status dan efek yang dapat dikenali dengan cepat[12].
  • Pengelolaan Kinerja dan Optimasi Teknis: Memastikan waktu loading yang cepat merupakan tantangan tersendiri dalam pengembangan game seluler. Clash Royale mengoptimalkan penggunaan aset dengan teknik seperti sprite mirroring dan pengurangan jumlah frame animasi untuk meningkatkan efisiensi memori. Selain itu, keputusan menggunakan sprite 2D yang dirender sebelumnya mengurangi konsumsi daya GPU, yang memungkinkan permainan berjalan lebih lama tanpa menguras baterai secara drastis[13].
  • Koneksi dan Stabilitas Jaringan: Mengingat Clash Royale adalah game daring, kehilangan koneksi bisa menjadi pengalaman yang frustrasi bagi pemain. Supercell mengatasi ini dengan memungkinkan pemain untuk segera kembali ke pertandingan jika mereka terputus, serta menghilangkan notifikasi tentang lawan yang mengalami gangguan jaringan agar permainan tetap adil dan tidak dimanfaatkan oleh pemain lain[14].

Supercell mengatasi tantangan ini dengan melakukan uji coba berulang serta mengumpulkan umpan balik dari komunitas pemain untuk terus memperbaiki pengalaman bermain mereka.

 

  1. Kesimpulan

Clash Royale merupakan salah satu game mobile yang sukses berkat kombinasi gameplay strategi real-time dan desain UI/UX yang optimal. UI/UX dalam game ini berperan penting dalam menciptakan pengalaman bermain yang imersif, intuitif, dan responsif. Desain antarmuka yang sederhana, navigasi yang mudah, serta elemen visual dan audio yang kaya memberikan pemain umpan balik yang jelas dan membantu dalam pengambilan keputusan strategis.

Keunggulan UI/UX Clash Royale terlihat dari berbagai aspek, seperti tata letak menu yang intuitif, gameplay yang dapat dimainkan dengan satu tangan, serta penggunaan warna dan tipografi yang efektif untuk meningkatkan keterbacaan informasi. Selain itu, pengelolaan komunikasi dalam game membantu menjaga lingkungan yang lebih positif bagi pemain.

Namun, pengembangan UI/UX dalam game ini juga menghadapi berbagai tantangan, seperti menjaga keseimbangan antara kesederhanaan dan kedalaman gameplay, optimasi untuk berbagai perangkat, serta memastikan stabilitas jaringan dan kinerja yang optimal. Supercell terus mengatasi tantangan ini melalui inovasi desain, pengujian berulang, dan umpan balik dari komunitas pemain.

Dengan desain UI/UX yang dirancang dengan baik, Clash Royale tidak hanya memberikan pengalaman bermain yang menyenangkan tetapi juga mempertahankan loyalitas pemain dalam jangka panjang. Hal ini membuktikan bahwa UI/UX yang efektif merupakan faktor krusial dalam keberhasilan sebuah game mobile.

 

Referensi

[1]SDLCCorp. (2024). The Impact of Mobile Games on the Traditional Gaming Industry. Diakses dari : https://sdlccorp.com/post/the-impact-of-mobile-games-on-the-traditional-gaming-industry/

[2]Coding Studio. (2023). User Interface Adalah: Pengertian dan Komponennya. Diakses dari https://codingstudio.id/blog/user-interface-adalah/

[3]Hostinger. (2023). User Experience (UX) Adalah: Pengertian dan Panduan Lengkap. Diakses dari https://www.hostinger.co.id/tutorial/user-experience-adalah

[4],[7],[8],[9],[10],[11],[12],[13],[14] The Rookies. (2020). Game Design UX Best Practices: Detailed Breakdown of Clash Royale. Diakses dari https://discover.therookies.co/2020/02/24/game-design-ux-best-practices-detailed-breakdown-of-clash-royale/

[5] Muhtar, K.. Clash Royale UX Case Study. Diakses dari https://karimmuhtar.com/ux-design/clash-royale/

Interface In Game. Clash Royale. Diakses dari https://interfaceingame.com/games/clash-royale/