Desain UI dan UX

Antarmuka pengguna (UI) menggabungkan desain visual artistik dengan desain informasi yang berfokus pada komunikasi untuk menghasilkan menu, tata letak toko, tampilan kepala (HUD), dan antarmuka lainnya yang berinteraksi dengan pemain. Pengalaman pengguna (UX) berkaitan dengan bagaimana pemain berinteraksi dengan permainan, bagaimana mereka menyampaikan pilihan mereka, dan bagaimana mereka bergerak dari satu pilihan ke pilihan berikutnya. Meskipun UI dan UX sering bekerja sama, UX memiliki fokus yang lebih signifikan pada interaktivitas dan pengalaman pemain daripada desain visual dan informasi dari UI.

UI

UI membagikan informasi penting seperti titik kesehatan, tujuan misi, dan harga yang memungkinkan pemain membuat keputusan dan menavigasi permainan. Karena sering kali merupakan cara utama di mana permainan berkomunikasi dengan pemain, UI sangat penting untuk pengalaman pemain. UI yang dirancang dengan buruk dapat membuat pemain bingung dan frustrasi serta menyebabkan retensi yang buruk, sedangkan UI yang dirancang dengan baik dapat berkontribusi pada keterlibatan dan monetisasi. UI yang dirancang secara efektif menerapkan prinsip-prinsip berikut:

• Prioritas
• Perhatian
• Bahasa Visual
• Konvensi
• Konsistensi

Prioritas

Menyampaikan informasi yang paling signifikan terlebih dahulu dikenal sebagai Hierarki Informasi. Ini sangat penting dalam permainan di mana pemain sering kali mengambil keputusan instan berdasarkan sekumpulan informasi yang terbatas. Saat memprioritaskan UI, identifikasi apa yang penting atau paling relevan dengan pengalaman pemain dan pastikan itu dapat diakses dan mudah ditemukan. Pertimbangkan pertanyaan-pertanyaan berikut:

• Apa yang sedang dilakukan pemain saat ini?
• Apa hal terpenting yang perlu mereka ketahui, atau akses?
• Pilihan apa yang harus mereka buat?
• Informasi apa yang mereka butuhkan untuk membuat pilihan tersebut?
• Seberapa sering mereka akan terlibat dalam pilihan itu?

Informasi dan fitur penting berubah tergantung pada faktor-faktor seperti peran yang dimainkan pemain, lokasi mereka di dunia 3D, dan item yang mereka pegang. UI dapat dirancang untuk menyajikan hanya apa yang penting secara kontekstual – menukar tombol dan informasi tergantung pada apa yang berguna di setiap konteks. Ini memastikan bahwa pemain selalu memiliki apa yang mereka butuhkan, tanpa kekacauan dari segala sesuatu yang tidak mereka butuhkan.

Contoh

Elemen yang tidak relevan dapat menyebabkan kebingungan dan gangguan. Spellbound RPG memiliki UI yang bersih dan minimalis yang sangat penting untuk antarmuka seluler, karena layar kecil dapat dengan mudah kewalahan dengan tombol, layar, dan teks yang berlebihan.

Di Super Striker League, interaksi pemain bervariasi tergantung pada apakah mereka mengontrol bola. Tanpa bola, pemain dapat Berlari dan Menyergap untuk mendapatkan kembali kendali. Setelah menguasai, tombol beralih menjadi Deke dan Pass, memungkinkan pemain untuk menghindari lawan dan mengoper bola. Dengan menyelingi tombol ini, UI tetap kontekstual berguna, menghindari gangguan yang tidak perlu.

Di The Survival Game, pemain perlu menyadari status kesehatan dan kelaparan mereka, dan memiliki akses cepat ke peta, inventaris, dan alat mereka. Informasi ini memungkinkan mereka untuk membuat keputusan dan memprioritaskan tindakan untuk bertahan hidup. Jika informasi atau alat ini sulit ditemukan atau hilang, bertahan hidup menjadi lebih sulit dan tidak perlu frustrasi.

Perhatian

Meskipun UI yang minimalis, diprioritaskan, dan kontekstual, pemain mungkin masih memerlukan bantuan untuk menemukan apa yang mereka butuhkan. Desainer UI dapat menggunakan beberapa alat visual untuk menangkap dan mengarahkan perhatian pemain, seperti:

• Warna: Warna cerah lebih menarik perhatian dibandingkan warna kusam. Gunakan warna cerah untuk teks penting, tombol, dan elemen lainnya, dan warna lembut untuk elemen yang kurang signifikan. Kontras ini meningkatkan visibilitas dan mengurangi gangguan.
• Ukuran: Elemen yang lebih besar lebih mencolok dan dipersepsikan sebagai penting dibandingkan yang lebih kecil.
• Ruang: Elemen yang dikelilingi oleh ruang negatif atau padding yang cukup menarik perhatian.
• Proksimitas: Elemen yang dikelompokkan menunjukkan adanya hubungan. Dengan menempatkan fitur dan item terkait berdampingan, pemain dapat memahami asosiasi mereka dan menemukannya lebih mudah.
• Gerakan: Elemen animasi menarik perhatian. Bahkan gerakan kecil dapat membuat elemen menonjol di antara yang statis. Efek partikel, tombol bergetar, dan panah yang dianimasikan sering digunakan dalam tutorial untuk bimbingan.

Moderasi adalah kunci dengan alat-alat ini. Penggunaan berlebihan elemen cerah dan bergerak dapat membuat pemain kewalahan dan bingung bukannya membantu mereka.

Contoh

Di UI season pass Jailbreak, sebuah garis kuning emas terletak di bawah ikon eksklusif season pass, menarik perhatian ke hadiah premium dan membuatnya secara visual berbeda dari yang gratis.

Di Dragon Adventures, prioritas visual diberikan kepada bundel koin bernilai tinggi dengan meningkatkan ukurannya dan memisahkannya dengan lebih banyak padding, untuk membedakannya dari bundel kecil.

Di Tower Defense Simulator, baik ukuran maupun proksimitas digunakan untuk mengelompokkan dan membedakan Daily Tower Skins dari Daily Crates secara visual.

Bahasa visual

Selain mengarahkan perhatian pemain ke elemen terpenting di layar, desainer UI mengembangkan bahasa visual untuk membantu pemain memahami apa yang mereka lihat. Bahasa visual adalah seperangkat pilihan desain yang disengaja dan konsisten yang memberikan informasi sekilas tentang tujuan, status, asosiasi, dan relevansi suatu elemen. Bahasa ini dibangun dari alat seperti bentuk, warna, dan gaya. Beberapa penggunaan bahasa visual mencakup:

Ikon

Ikon dapat menggunakan identitas visual yang menyampaikan makna dan asosiasi. Misalnya, ikon yang terkait dengan statistik tertentu mungkin memiliki palet warna yang sama dan bentuk yang serupa, memungkinkan pemain untuk mengenali dan memahami fungsinya.

Tombol

Sebagai bentuk input pemain yang umum, tombol harus mudah diidentifikasi. Menempatkan tombol dalam wadah, seperti warna yang mengelilingi teks atau ikon, membedakannya dari latar belakang, membuatnya terlihat interaktif. Menambahkan sorotan atau bayangan dapat meningkatkan daya tarik taktilnya dengan mengisyaratkan kedalaman 3D.

Teks

Judul dan tajuk yang mengandung informasi tingkat tinggi yang signifikan harus lebih besar dan lebih tebal daripada teks badan. Warna yang sangat terbaca dan memiliki kontras baik terhadap warna latar belakang yang akan ditampilkan harus dipertimbangkan. Pilihan gaya seperti warna dan penebalan dapat menyoroti informasi penting seperti item dalam permainan, statistik, atau kemampuan. Selalu utamakan keterbacaan saat memilih font.

Sekali bahasa visual telah dirancang, itu dapat didokumentasikan dalam Panduan Gaya, seperangkat aturan dan contoh yang membantu semua orang dalam tim memahami cara menerapkan bahasa tersebut secara konsisten di seluruh permainan.

Konvensi

Konvensi adalah pilihan desain yang umum diterapkan yang terlihat di banyak permainan yang berbeda. Beberapa contoh meliputi:

• Simbol X pada sebuah tombol yang menutup dialog saat ditekan
• Warna abu-abu diterapkan pada tombol yang saat ini tidak dapat digunakan
• Ikon kunci yang menutupi tombol atau fitur untuk menunjukkan bahwa pemain belum mendapatkan atau membuka item tersebut

Mengingat penggunaan yang luas, pemain biasanya familiar dengan konvensi semacam itu. Memanfaatkan ketenaran ini dapat membuat antarmuka lebih intuitif dan mengurangi kebutuhan akan instruksi spesifik permainan. Bermain game dalam genre target Anda dapat membantu mengidentifikasi konvensi yang mungkin dikenali pemain. Seorang desainer UI mungkin memilih pendekatan unik untuk lebih sesuai dengan game mereka, tetapi mengetahui konvensi ini memberi informasi pada proses pengambilan keputusan mereka.

Konsistensi

Apa pun keputusan yang dibuat seorang desainer UI, mereka harus menerapkannya secara konsisten di seluruh permainan. Konsistensi membantu pemain belajar menavigasi permainan dengan lebih efisien dan mencegah kebingungan serta frustrasi.

Berikut ini adalah beberapa contoh konsistensi UI dalam sebuah permainan:

• Statistik "Kesehatan" muncul dalam warna hijau di semua teks, ikon terkait, dan bilah kesehatan.
• Setiap kali dialog NPC menyebutkan item dalam permainan, item tersebut ditebalkan.
• Tombol tutup selalu berbentuk persegi, merah, dan berisi X putih, hanya muncul di sudut kanan atas dialog.
• Setiap kali pemain tidak dapat membeli item di toko, harga ditampilkan dalam warna merah.

Pilihan ini disengaja, bertujuan untuk memfasilitasi pemahaman dan navigasi pemain. Dengan menerapkannya secara konsisten, mereka memungkinkan pemain mengasosiasikan elemen terkait, mengidentifikasi item penting, mengembangkan memori otot, membuat keputusan yang cepat dan terinformasi, serta menghabiskan lebih banyak waktu terlibat dalam permainan.

UX

Desain UX berkaitan dengan bagaimana pemain berinteraksi dengan permainan, bagaimana mereka menyampaikan pilihan mereka, dan bagaimana mereka bergerak dari satu pilihan ke pilihan berikutnya. Meskipun UX sering bekerja beriringan dengan antarmuka pengguna (UI), ia lebih fokus pada interaktivitas dan pengalaman pemain daripada desain visual dan informasi UI.

Memahami pemain

Salah satu tujuan utama desainer UX adalah menciptakan interaksi dan alur yang intuitif, tidak mengganggu, dan nyaman untuk digunakan oleh pemain. Proses itu dimulai dengan pemahaman tentang pemain itu sendiri, audiens yang dimaksud untuk sebuah permainan. Saat mengidentifikasi pemain dari sebuah permainan, pertimbangkan hal-hal berikut:

• Demografi: Demografi membantu memberikan informasi yang berguna untuk pilihan desain dengan mengungkapkan informasi umum tentang kelompok pemain. Misalnya, pemain yang lebih muda cenderung bermain lebih banyak di perangkat seluler atau tablet dibandingkan dengan komputer pribadi, sehingga permainan yang ditujukan untuk audiens tersebut sering memprioritaskan desain dan pemolesan pengalaman pengguna seluler.

• Tingkat pengalaman: Pengembang mungkin memilih untuk mendesain untuk pemain dengan sedikit pengalaman bermain game, sejumlah besar, atau di antara kedua perspektif tersebut. Interaksi yang sudah familiar bagi pemain berpengalaman, seperti menekan tombol angka untuk membekali item di bilah alat, atau menekan c untuk berjongkok, mungkin tidak jelas bagi pemain yang kurang berpengalaman dan memerlukan pesan tambahan atau pelatihan.

• Keterkenalan genre: Mirip dengan level pengalaman umum, keterkenalan genre mencerminkan tingkat pengalaman pemain dengan jenis permainan tertentu. Permainan yang jatuh dalam genre populer di Roblox, seperti peran, horor bertahan hidup, dan tembak-menembak orang pertama, cenderung memiliki banyak pemain potensial yang telah memainkan genre serupa sebelumnya. Permainan dalam genre lain mungkin memiliki lebih sedikit pemain berpengalaman, tetapi kesenjangan pengalaman itu dapat diatasi melalui tutorial dan kegunaan.

• Gaya permainan: Pemain sering kali menyukai jenis permainan tertentu, berkisar dari kompetisi dan pengumpulan pencapaian hingga eksplorasi dan kerja sama. Preferensi ini tidak hanya tercermin dalam mekanika permainan yang disukai pemain tetapi juga mempengaruhi keputusan UX. Desainer mempertimbangkan interaksi mana yang akan diprioritaskan, mana yang akan dipoles, dan mana yang akan disajikan kepada pemain. Mereka juga mempertimbangkan pola pikir yang akan dimiliki pemain saat mereka terlibat dengan interaksi ini dan emosi apa yang ingin mereka timbulkan dari mereka.

Setelah mempertimbangkan faktor-faktor ini dan memilih sekelompok pemain target (atau kelompok), kenali mereka dengan menemui mereka, bermain bersama mereka, dan mempelajari tujuan serta preferensi mereka untuk lebih memandu pilihan desain.

Mendesain interaksi

Interaksi adalah fitur yang memungkinkan pemain mengalami dan menyampaikan pilihan mereka dalam sebuah permainan. Desainer UX ingin interaksi tersebut menjadi intuitif dan memerlukan sedikit penjelasan. Untuk melakukan ini mereka memanfaatkan:

• Konvensi
• Metafora
• Umpan balik

Konvensi

Konvensi adalah desain UX dan prinsip yang mungkin sudah dikenal oleh pemain dari permainan lain.

Contoh-contoh konvensi termasuk:

• Prompt proksimitas "E" yang digunakan oleh pengembang Roblox untuk memberi sinyal kepada pemain bahwa sebuah item dapat diinteraksikan jika mereka berdiri cukup dekat agar muncul.
• Tombol "C" yang memungkinkan avatar pemain untuk berjongkok sehingga mereka dapat merunduk di bawah rintangan atau masuk ke ruang sempit.
• Tombol angka yang membekali item dari bilah alat ke tangan avatar sehingga dapat digunakan.
• Berjalan ke lingkaran-lingkaran di tanah untuk mendaftar untuk sebuah pertandingan.

Konvensi menjadi mapan ketika suatu implementasi atau pilihan desain tertentu tumbuh dalam popularitas karena kemudahan penggunaannya. "C" untuk berjongkok, misalnya, mudah diingat karena merupakan huruf pertama dalam kata berjongkok, dan terletak dengan nyaman di samping WASD, tombol yang digunakan pemain untuk bernavigasi. Ini adalah interaksi yang mudah dilakukan dengan cepat dan dalam tekanan, yang ideal karena usaha untuk bersembunyi atau melarikan diri dari ancaman yang mendekat adalah kasus penggunaan umum untuk berjongkok.

Metafora

Metafora menghubungkan konsep abstrak dengan yang lebih familiar, menciptakan jalan pintas menuju pemahaman. Dalam contoh ini dari Spellbound Wizard RPG, tindakan merapal mantra sihir dilakukan dengan menarik kartu dari dek. UI/UX berbasis dek menggrounding tindakan abstrak merapal mantra, yang tidak memiliki ekspresi nyata dalam kehidupan, menjadi sesuatu yang dapat lebih mudah dipahami dan dihubungkan oleh pemain.

Umpan balik

Komunikasi dari permainan kepada pemain dikenal sebagai umpan balik. Umpan balik membantu pemain memahami bahwa suatu tindakan telah diambil. Ini dapat berkontribusi pada pembelajaran tentang cara kerja permainan dan menambahkan lapisan keluwesan yang ekstra yang membuat sebuah fitur lebih memuaskan untuk digunakan. Beberapa contoh umpan balik meliputi:

• Musuh memainkan animasi reaksi "terkena" untuk menunjukkan bahwa ia telah menerima kerusakan dari senjata pemain
• Tombol yang berubah warna untuk menunjukkan status hover, ditekan, dan dibebaskan (terpilih)
• Efek suara "cha-ching!" dari kasir ketika pemain menyelesaikan pembelian
• Bilah kemajuan terisi saat pemain menyelesaikan tujuan misi

Ketika umpan balik hilang atau tidak mencukupi, pemain mungkin tidak tahu apa yang telah mereka capai, memahami apakah efeknya baik atau buruk, atau bahkan mengetahui apakah fitur yang mereka gunakan berfungsi dengan benar atau mengalami bug.

Mendesain alur

Beberapa interaksi sering diperlukan bagi pemain untuk menyelesaikan tujuan. Desainer UX memperhatikan bagaimana pemain menavigasi dari satu aksi atau layar UI atau pilihan ke yang berikutnya dan memastikan bahwa jalur ini logis dan nyaman.

Sebagai contoh, untuk membekali item pada avatar di Berry Avenue RP, pemain harus:

• Menemukan dan mengetuk tombol Avatar
• Memilih kategori item (wajah, kepala, leher, dll.)
• Menggulir untuk menemukan item yang diminati
• Mengetuk item tersebut untuk membekalinya pada avatar mereka
• Menemukan dan mengetuk tombol Selesai untuk keluar dari kustomisasi avatar

Langkah-langkah ini diambil bersama-sama mewakili alur kustomisasi avatar. Alur ini sederhana dan langsung, dengan sesedikit mungkin langkah yang diperlukan untuk membekali sebuah item. Karena pemain tidak perlu melakukan banyak tindakan atau berpikir terlalu banyak tentang apa yang perlu mereka lakukan, alur ini rendah dalam friction, ukuran usaha yang diperlukan untuk mencapai tujuan.

Mendesain alur yang efisien dan rendah friction memerlukan pertimbangan yang cermat terhadap kasus penggunaan. Kasus penggunaan tersebut dapat dinyatakan sebagai tujuan pemain seperti:

• Ingin dapat dengan cepat memodifikasi avatar
• Menemukan item dengan mudah saat memodifikasi
• Melihat pratayang item sebelum pemilihan
• Penghapusan item yang mudah setelah pemilihan

Tujuan-tujuan ini kemudian memandu desain UI dan UX dari fitur:

• Pemain mengakses fitur kustomisasi avatar melalui tombol yang menonjol di HUD, dan dapat segera mulai membekali item ke avatar mereka
• Tab mengatur item ke dalam kategori yang nyaman, dan bidang pencarian memungkinkan pemain mencari item secara langsung
• Item ditampilkan segera pada avatar
• Pemain dapat menghapus item dengan mengetuknya lagi untuk membatalkan pemilihan, atau mengetuknya di daftar item yang dibekali

Desainer kemudian dapat mulai menyusun UI dan merencanakan langkah-langkah yang akan diambil pemain untuk menyelesaikan tujuan memodifikasi avatar mereka. Proses ini dapat didukung dengan penggunaan diagram alur, yang menggambarkan secara visual tindakan pemain saat mereka menavigasi UI. Diagram ini dapat membantu mengidentifikasi langkah-langkah yang terlewat, titik kesakitan di mana langkah-langkah tidak jelas atau tidak nyaman, dan friction yang berlebihan.