Desain UI dan UX

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.


Antarmuka pengguna (UI) menggabungkan desain visual artistik dengan desain informasi berfokus pada komunikasi untuk menghasilkan menu, tata letak toko, tampilan kepala (HUD) dan antarmuka lain yang dimanfaatkan pemain.Pengalaman pengguna (UX) terkait dengan bagaimana pemain berinteraksi dengan game, bagaimana mereka membuat pilihan mereka dikenal oleh game, dan bagaimana mereka pindah dari satu pilihan ke pilihan berikutnya.Sementara UI dan UX sering bekerja sama, UX membawa fokus yang lebih signifikan pada interaktivitas dan pengalaman pemain daripada desain visual dan informatif UI.

UI

UI berbagi informasi penting seperti hit point, tujuan pencarian, dan harga yang memungkinkan pemain untuk membuat keputusan dan menavigasi game.Karena seringkali merupakan cara utama di mana permainan berkomunikasi dengan pemain, UI sangat penting untuk pengalaman pemain.UI yang buruk dirancang dapat meninggalkan pemain bingung dan frustrasi dan menyebabkan retensi yang buruk, sementara UI yang dirancang secara ahli dapat berkontribusi pada keterlibatan dan Monetisasi.UI yang dirancang efektif menggunakan prinsip berikut:

  • Prioritasi
  • Peringatan
  • Bahasa Visual
  • Konvensi
  • Konsistensi

Prioritasi

Berbagi informasi paling signifikan terlebih dahulu dikenal sebagai Hierarki Informasi .Ini sangat penting dalam permainan di mana pemain sering membuat keputusan langsung berdasarkan set informasi terbatas.Saat menyeleksi UI, identifikasi apa yang penting atau paling relevan dengan pengalaman pemain dan pastikan itu mudah diakses dan mudah ditemukan.Pertimbangkan pertanyaan-pertanyaan ini:

  • Apa yang dilakukan pemain saat ini?
  • Apa hal yang paling penting bagi mereka untuk menyadari, atau memiliki akses ke?
  • Pilihan apa yang harus mereka buat?
  • Informasi apa yang mereka butuhkan untuk membuat pilihan itu?
  • Seberapa sering mereka akan terlibat dalam pilihan-pilihan itu?

Informasi dan fitur penting berubah selama jalannya game, tergantung pada faktor seperti peran yang diambil pemain, lokasi mereka di dunia permainan, dan item yang mereka pegang.UI dapat dirancang untuk menampilkan hanya apa yang penting secara kontekstual - bertukar tombol dan informasi tergantung pada apa yang berguna di setiap konteks.Ini memastikan bahwa pemain selalu memiliki apa yang mereka butuhkan, tanpa kekacauan dari semua yang tidak mereka miliki.

Contoh

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

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
Item sebelum dipilih di Spellbound RPG >
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
Item setelah seleksi di Spellbound RPG >

Di Liga Penyerang Super , interaksi pemain bervariasi tergantung pada apakah mereka mengendalikan bola.Tanpa bola, pemain dapat Berlari dan Menangkap untuk mendapatkan kembali kontrol.Setelah dimiliki, tombol beralih ke Deke dan Pass, memungkinkan pemain menghindari lawan dan mengoper bola.Dengan bergantian tombol ini, UI tetap berguna secara konteks, menghindari gangguan yang tidak perlu.

Tombol konteks di Super Striker League >
Tombol konteks di Super Striker League >

Di Permainan Bertahan Hidup, pemain perlu menyadari statuskesehatan dan kelaparan mereka, dan memiliki akses cepat ke peta, inventaris, dan alat mereka.Informasi ini memungkinkan mereka untuk membuat keputusan dan men prioritaskan tindakan untuk bertahan hidup.Jika informasi atau alat ini sulit ditemukan atau hilang, kelangsungan hidup menjadi lebih menantang dan tidak perlu frustrasi.

Fitur HUD di Permainan Bertahan Hidup

Peringatan

Meskipun UI minimalis, prioritas, dan konteks, pemain mungkin masih membutuhkan bantuan untuk menemukan apa yang mereka butuhkan.Desainer UI dapat menggunakan beberapa alat visual untuk menangkap dan memandu perhatian pemain, seperti:

  • Warna: Warna cerah menarik perhatian lebih dari yang membosankan.Gunakan warna cerah untuk teks penting, tombol, dan elemen lain, dan warna meredam untuk yang kurang signifikan.Kontras ini meningkatkan visibilitas dan mengurangi gangguan.
  • Ukuran: Elemen yang lebih besar lebih menonjol dan dianggap penting dibandingkan dengan yang lebih kecil.
  • Ruang: Elemen yang dikelilingi oleh ruang negatif atau penyangga yang cukup adalah menarik mata.
  • Kekuatan: Elemen terkelompok berarti koneksi.Dengan menempatkan fitur dan item terkait di dekat satu sama lain, pemain dapat memahami asosiasi mereka dan menemukannya lebih mudah.
  • Gerakan: Elemen beranimasi menarik perhatian.Bahkan gerakan ringan pun dapat membuat elemen menonjol di antara rekan statis.Efek partikel, tombol goyang, dan panah beranimasi sering digunakan dalam tutorial untuk panduan.

Moderasi adalah kunci dengan alat ini. Penggunaan berlebihan dari elemen cerah dan bergerak mungkin membuat pemain kewalahan dan bingung daripada membantu mereka.

Contoh

Di dalam Jailbreak UI pas musim, garis kuning emas terletak di bawah ikon eksklusif pas musim, menarik perhatian pada hadiah premium dan membuatnya berbeda secara visual dari yang gratis.

UI pas musim di Peretasan penjara

Di Petualangan Naga, prioritas visual diberikan ke bundel koin nilai tertinggi dengan meningkatkan ukurannya dan memisahkannya dengan lebih banyak ruang, untuk membedakannya dari bundel yang lebih kecil.

Bundel koin di Petualangan Naga

Di Simulator Pertahanan Menara , kedua ukuran dan jarak digunakan untuk menggrup dan membedakan Kulit Menara Harian dari Peti Harian.

Toko di Simulator Pertahanan Menara

Bahasa visual

Selain membimbing perhatian pemain ke elemen paling penting di layar, desainer UI mengembangkan bahasa visual untuk membantu pemain memahami apa yang mereka lihat.Bahasa visual adalah serangkaian pilihan desain sadar dan konsisten yang memberikan informasi sekilas tentang tujuan, status, asosiasi, dan relevansi elemen.Bahasa dibangun dari alat seperti bentuk, warna, dan gaya.Beberapa penggunaan untuk bahasa visual termasuk:

Simbol

Ikon dapat menggunakan identitas visual yang menyampaikan makna dan asosiasi.Sebagai kejadian, ikon terkait dengan statistik tertentu dapat berbagi palet warna dan bentuk serupa, memungkinkan pemain untuk mengenali dan memahami fungsi mereka.

Statistik Pemain di Angin Keberuntungan

Tombol

Sebagai bentuk input pemain yang umum, tombol harus mudah diidentifikasi.Tombol perumahan di dalam wadah, seperti warna yang mengelilingi teks atau ikon, membedakannya dari latar belakang, membuatnya tampak interaktif.Menambahkan sorotan atau bayangan dapat meningkatkan daya tarik taktil mereka dengan menyarankan kedalaman 3D.

Tombol di Simulator BotClash

Teks

Header dan judul yang berisi informasi tingkat tinggi yang signifikan harus lebih besar dan berani daripada teks tubuh.Warna yang sangat mudah dibaca dan kontras dengan baik terhadap warna latar belakang yang akan ditampilkan harus dipertimbangkan.Pilihan gaya seperti warna dan bolding dapat menyoroti informasi penting seperti item dalam game, statistik, atau kemampuan.Selalu prioritaskan legibilitas saat memilih font.

Toko Pakaian di Angin Keberuntungan

Setelah bahasa visual telah dirancang, itu dapat dicatat dalam Panduan Gaya, sekumpulan aturan dan contoh yang membantu semua orang di tim memahami cara menerapkan bahasa secara konsisten di seluruh game.

Konvensi

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

  • Simbol X pada tombol yang menutup dialog saat ditekan
  • Warna abu-abu diterapkan pada tombol yang saat ini tidak dapat digunakan
  • Overlay ikon kunci di atas tombol atau fitur untuk menunjukkan bahwa pemain belum mendapatkannya atau belum membukanya

Karena penggunaan mereka yang luas, pemain biasanya akrab dengan konvensi seperti itu.Memanfaatkan ken familiar ini dapat membuat antarmuka lebih intuitif dan mengurangi kebutuhan untuk instruksi khusus permainan.Bermain game dalam genre target Anda dapat membantu mengidentifikasi konvensi pemain yang dapat diakui.Seorang desainer UI dapat memilih pendekatan unik untuk lebih sesuai dengan permainan mereka, tetapi mengetahui konvensi ini menginformasikan proses pengambilan keputusan mereka.

X Tutup Tombol di Angin Keberuntungan , Petualangan Naga , BotClash Simulator , dan PINTU >

Konsistensi status "Kesehatan" hijau di Arcane Odyssey >

Konsistensi

Apapun keputusan yang dibuat oleh desainer UI, mereka harus konsisten menerapkannya di seluruh game.Konsistensi membantu pemain belajar untuk menavigasi permainan lebih efisien dan mencegah kebingungan dan frustrasi.

Berikut adalah beberapa contoh konsistensi UI dalam game:

  • Statistik "Kesehatan" muncul dalam hijau di semua teks, ikon terkait, dan bilah kesehatan.
  • Setiap kali dialog NPC menyebutkan item dalam game, itu disorot dengan tebal.
  • Tombol tutup selalu berbentuk kotak, merah, dan berisi X putih, hanya muncul di sudut kanan atas dialog.
  • Setiap kali pemain tidak mampu membeli barang di belanja, harga ditampilkan dalam merah.

Pilihan ini disengaja, bertujuan untuk memudahkan pemahaman dan navigasi pemain.Dengan menerapkannya secara konsisten, mereka memungkinkan pemain untuk mengaitkan elemen terkait, mengidentifikasi item penting, mengembangkan memori otot, membuat keputusan tertib informasi, dan menghabiskan lebih banyak waktu tenggelam dalam game.

UX

Desain UX terkait dengan bagaimana pemain berinteraksi dengan game, bagaimana mereka membuat pilihan mereka dikenal oleh game, dan bagaimana mereka bergerak dari satu pilihan ke pilihan berikutnya.Meskipun UX sering bekerja sama dengan antarmuka pengguna (UI), ia lebih fokus pada interaktivitas dan pengalaman pemain daripada desain visual dan informasi UI.

Memahami pemain

Tujuan utama desainer UX adalah untuk membuat interaksi dan alur yang intuitif, tidak mengganggu, dan nyaman bagi pemain untuk digunakan.Proses itu dimulai dengan pemahaman tentang pemain itu sendiri, audiens yang dituju untuk sebuah game.Saat mengidentifikasi pemain dari pengalaman, pertimbangkan hal mengikuti:

  • Demografi: Demografi membantu memberi informasi pilihan desain dengan mengungkapkan informasi umum tentang gruppemain.Sebagai contoh, pemain yang lebih muda umumnya lebih mungkin bermain di perangkat seluler atau tablet daripada komputer pribadi, jadi game yang ditujukan untuk audiens itu sering memprioritaskan merancang dan memoles pengalaman pengguna seluler.

  • levelpengalaman: Pengembang dapat memilih untuk merancang untuk pemain dengan sedikit pengalaman bermain, jumlah yang signifikan, atau di suatu tempat di antaranya.Interaksi yang akrab dengan pemain berpengalaman, seperti mengetuk tombol angka untuk melengkapi item di bilah alat, atau menekan c untuk menunduk, mungkin tidak jelas bagi pemain yang tidak berpengalaman, dan memerlukan pesan atau pelatihan tambahan.

  • Kemahiran genre: Mirip dengan levelpengalaman umum, kemahiran genre mencerminkan tingkat pengalaman pemain dengan jenis gametertentu.Permainan yang masuk ke genre populer di Roblox, seperti Roleplay, Survival Horror, dan Penembak Orang Pertama, kemungkinan memiliki banyak pemain potensial yang telah memainkan permainan serupa sebelumnya.Permainan di genre lain mungkin memiliki lebih sedikit pemain berpengalaman, tetapi celah pengalaman itu dapat diatasi melalui tutorial dan kemudahan penggunaan.

  • Gaya permainan: Pemain sering memilih jenis permainan tertentu, berkisar dari kompetisi dan pengumpulan prestasi hingga eksplorasi dan kerjasama.Preferensi ini tidak hanya tercermin dalam mekanik permainan yang dipilih pemain tetapi juga mempengaruhi keputusan UX.Desainer mempertimbangkan interaksi mana yang harus diprioritaskan, mana yang harus dipoles, dan mana yang harus disajikan kepada pemain.Mereka juga mempertimbangkan pola pikir yang akan dimiliki pemain saat mereka terlibat dengan interaksi ini dan emosi yang mereka tuju untuk membangkitkannya.

Setelah mempertimbangkan faktor-faktor ini dan memilih kelompok pemain target (atau kelompok), kenali mereka dengan bertemu mereka, bermain dengan mereka, dan belajar tentang tujuan dan preferensi mereka untuk lebih menginformasikan pilihan desain.

Desain interaksi

Interaksi adalah fitur yang memungkinkan pemain untuk mengalami dan berkomunikasi pilihan mereka dalam game.Desainer UX ingin interaksi tersebut menjadi intuitif, dan memerlukan penjelasan sedikit mungkin.Untuk melakukan ini mereka menggunakan:

  • Konvensi
  • Metaphor
  • Umpan balik

Konvensi

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

"E" peringatan jarak dekat di Kehidupan Putri Mermaid >

Contoh konvensi termasuk:

  • Prompt jarak "E" yang digunakan oleh pengembang Roblox untuk memberi sinyal kepada pemain bahwa suatu item dapat berinteraksi jika mereka berdiri cukup dekat untuk muncul.
  • Tombol "C" memungkinkan avatar pemain untuk berlutut sehingga mereka dapat menyelip di bawah penghalang atau masuk ke ruang sempit.
  • Tombol nomor melengkapi item dari bilah alat ke tangan avatar sehingga dapat digunakan.
  • Berjalan ke lingkaran di tanah untuk mengantri untuk mencocokkan.

Konvensi dibangun ketika implementasi atau pilihan desain tertentu tumbuh dalam popularitas karena kemudahannya digunakan.“C” untuk menunduk, misalnya, mudah diingat karena merupakan huruf pertama dalam kata menunduk, dan dengan mudah ditempatkan di sebelah WASD, tombol yang digunakan pemain untuk menavigasi.Ini adalah interaksi mudah untuk dilakukan dengan cepat dan di bawah tekanan, yang ideal karena mencoba menyembunyikan atau melarikan diri dari ancaman yang mendekat adalah kasus penggunaan umum untuk menunduk.

Metaphor

Metaphor terkait konsep abstrak dengan yang lebih akrab, menciptakan pintasan untuk pemahaman.Dalam contoh ini dari Spellbound Wizard RPG, tindakan melemparkan mantra sihir dilakukan dengan menggambar kartu dari dek.UI/UX berbasis dek mendasari tindakan abstrak melemparkan mantra, yang tidak memiliki ekspresi kehidupan nyata, menjadi sesuatu yang pemain dapat terhubung dengan lebih mudah dan lebih cepat mengerti.

Pemesanan mantra sebagai kartu di RPG Spellbound

Umpan balik

Komunikasi dari permainan ke pemain dikenal sebagai masukan .Umpan balik membantu pemain memahami bahwa tindakan yang telah mereka ambil memiliki efek dalam game.Ini dapat berkontribusi untuk mempelajari bagaimana fungsi permainan dan menambahkan lapisan Polandia ekstra yang membuat fitur lebih memuaskan untuk digunakan.Beberapa contoh umpan balik termasuk:

  • Sebuah musuh memainkan animasi reaksi "hit" untuk menunjukkan bahwa ia telah menerima kerusakan dari senjata pemain
  • Tombol yang mengubah warna untuk menunjukkan status hover, depresi, dan dilepaskan (dipilih)
  • Efek suara kasir "cha-ching!" bermain saat pemain menyelesaikan pembelian
  • Sebuah bilah kemajuan terisi saat pemain menyelesaikan tujuan pencarian

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

Alur desain

Banyak interaksi sering diperlukan agar seorang pemain menyelesaikan tujuan.Desainer UX khawatir dengan bagaimana pemain menavigasi dari satu tindakan atau layar UI atau pilihan ke berikutnya dan memastikan bahwa jalur ini logis dan nyaman.

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

  • Temukan dan ketuk tombol Avatar
  • Pilih kategori item (wajah, kepala, leher, dll)
  • Gulir untuk menemukan item yang menarik
  • Ketuk item untuk melengkapinya di avatar mereka
  • Temukan dan ketuk tombol Selesai untuk keluar dari kustomisasi avatar
Aliran kustomisasi avatar di Berry Avenue RP

Langkah-langkah ini diambil bersama-sama mewakili aliran kustomisasi avatar.Alur ini sederhana dan mudah, dengan langkah sebanyak mungkin diperlukan untuk melengkapi item.Karena pemain tidak perlu melakukan banyak tindakan atau berpikir terlalu banyak tentang apa yang perlu mereka lakukan, aliran ini rendah di gesekan , pengukuran usaha yang diperlukan untuk mencapai tujuan.

Mendesain aliran yang efisien dan bergesekan rendah membutuhkan pertimbangan hati-hati atas kasus penggunaan. Kasus penggunaan tersebut dapat diungkapkan sebagai tujuan pemain seperti:

  • Ingin dapat dengan cepat memodifikasi avatar
  • Menemukan item dengan mudah saat memodifikasi
  • Mempratinjau item sebelum dipilih
  • Pengeliminasi item mudah setelah dipilih

Tujuan ini kemudian memandu desain UI dan UX fitur:

  • Pemain mengakses fitur kustomisasi avatar melalui tombol terkemuka di HUD, dan dapat segera mulai melengkapi item ke avatar mereka
  • Tab mengatur item ke dalam kategori yang nyaman, dan bidang pencarian memungkinkan pemain untuk mencari item secara langsung
  • Item diprediksi pada avatar secara instan
  • Pemain dapat menghapus item dengan mengetuknya lagi untuk menghapus pilihan, atau mengetuknya di daftar item yang dilengkapi

Desainer kemudian dapat mulai merancang UI dan merencanakan langkah-langkah yang akan diambil pemain untuk menyelesaikan tujuan memodifikasi avatar mereka.Proses ini dapat dipercepat dengan penggunaan bagan alir , yang secara visual menunjukkan tindakan pemain saat mereka menavigasi UI.Diagram ini dapat membantu mengidentifikasi langkah yang terlewatkan, titik nyeri di mana langkah tidak jelas atau tidak nyaman, dan gesekan berlebih.

Contoh bagan alir.