7 pelajaran praktis tentang UX

Artikel ini akan menjadi analisis dari beberapa pelajaran UX / UI yang kami pelajari dengan hati-hati menonton beberapa ratus orang di pameran yang menguji coba game build awal Steamhound kami.


Untuk memahami konteksnya, saya akan mengatakan bahwa Steamhound adalah permainan berbasis giliran, campuran JRPG dan pertempuran taktis di grid. Pemain dapat bertarung melawan AI, tetapi kami mencoba memotivasi mereka untuk bermain melawan satu sama lain bila memungkinkan, duduk di sebelah monitor yang berbeda.

Secara umum, sebelum melakukan percobaan ini, tata letak dasar dan penyajian informasi dalam permainan kami tidak sepenuhnya mengerikan. Pemain berpengalaman dan pengguna yang terbiasa dengan genre biasanya biasanya berurusan dengan permainan tanpa campur tangan kita. Tetapi pada acara langsung seperti itu, ada orang-orang yang belum pernah melihat permainan seperti itu sebelumnya, dan para pemain ini banyak membantu kami, menunjukkan keanehan dan asumsi tersembunyi yang kami buat pada desain game.

Jadi, tanpa basa-basi, mari beralih ke pengamatan kami:

Masalah 1: orang tidak membaca teks


Saya pikir sebagian besar pengembang menyadari masalah ini. Anehnya, sebagian besar pemain melewatkan teks apa pun yang Anda perlihatkan kepada mereka. Kami menemukan bahwa sebagian besar (> 80%) pemain cukup mengklik layar instruksi yang kami tambahkan di awal demo, yang menggambarkan dasar-dasar permainan:


Menu dengan instruksi. Hanya 20% dari pemain yang bersusah payah membacanya (dan 100% dari mereka memenangkan pertarungan)

Kami juga berdosa - jujur, siapa yang membaca instruksi ketika membeli gadget baru? Kami berharap itu ramah pengguna, dan kami dapat lebih atau kurang belajar menggunakannya dengan bantuan intuisi dan eksperimen.

Kami sedang menunggu ini, masalah yang lebih serius adalah bahwa bahkan selama pertandingan, banyak pemain juga melewatkan petunjuk di layar . Ini paling memengaruhi pengalaman pengguna ketika mereka tidak melihat instruksi yang memberi tahu apa yang harus dilakukan selanjutnya:


Solusi


Kita tahu bahwa biasanya teks di layar adalah hal terakhir yang cenderung diubah oleh pemain saat mereka macet. Jadi mari kita buat mustahil untuk dilewatkan:


Kami menggunakan gerakan untuk menarik perhatian pada tooltip ketika itu muncul, dan kemudian terus menghidupkannya sampai pemain mengikuti instruksi .

Dulu sulit untuk diperhatikan. Setelah memaksa pemain untuk memperhatikannya, kami praktis menyingkirkan situasi ketika para pemain bertanya: "apa yang harus saya lakukan selanjutnya?".

Mungkin, kita dapat meningkatkan sistem dengan menggerakkan teks dan mengaturnya sehingga menarik perhatian ke ubin yang perlu Anda klik untuk memilih posisi.



Masalah 2: Objek Interaktif Harus Terlihat


Kami menghilangkan yang sudah jelas: tombol harus terlihat seperti tombol, dan pemain harus memahami opsi apa yang tersedia untuknya pada waktu tertentu.

Dalam Steamhound, pemain harus memilih aksi dari menu (beberapa kemampuan, misalnya, "menyerang dari kejauhan" atau "sikap bertahan") pada gilirannya. Ketika ini terjadi, sebuah menu muncul:


Ini bekerja sangat baik - prompt audio yang jelas dimainkan dan animasi rotasi yang menarik perhatian ketika menu diperluas ke bagian layar yang lebih besar. Tidak ada yang punya masalah memahami bahwa Anda perlu mengklik salah satu tombol ini. Masalahnya adalah bahwa, setelah memilih suatu tindakan, menu menghilang, dan pemain harus memilih tempat di medan perang di mana kemampuannya perlu ditargetkan.

Kami perhatikan bahwa pada tahap ini beberapa pemain macet, menjelajahi layar dengan mouse untuk mencari elemen yang dapat Anda gunakan untuk berinteraksi :


Pemain mencari apa yang bisa Anda klik di layar, dan kekesalannya meningkat setiap detik

Solusi


Meskipun kami menyoroti ubin yang dapat Anda klik, ubin ini terlihat agak lemah. Situasi ini diperparah oleh fakta bahwa pemain sering melihat sekilas lawan sebelum memilih tindakan, tidak memperhatikan bahwa alokasi ubin muncul. Inilah cara kami mengatasi masalah ini:


Ubin yang berkedip-kedip menarik perhatian pemain

Jika pemain tidak menggerakkan kursor di atas ubin yang sesuai untuk beberapa waktu, kami menghidupkan flicker.

Perubahan sederhana ini memiliki efek yang diinginkan - pada sesi pengujian berikutnya kami jarang harus memberi tahu pemain bahwa untuk melanjutkan ia perlu mengklik ubin. Kami kembali menerapkan prinsip yang terkenal - Anda dapat menggunakan gerakan / animasi untuk menarik perhatian . Ketika kelap-kelip menarik perhatian mereka, mereka mau tak mau memindahkan mouse ke atas salah satu ubin, dan seleksi selanjutnya menjadikan tujuannya jelas.



Masalah 3: ajakan untuk bertindak harus instan / kontekstual


Pengembang Indie sering berbicara tentang gagasan “ajakan bertindak” dalam pemasaran game - pengguna perlu “berlangganan buletin”, “tambahkan game ke wishlist!” atau "menulis ulasan tentang Steam!" Tetapi juga dalam permainan ada kalanya pemain harus membuat pilihan atau melakukan tindakan tertentu. Jadi mengapa tidak menerapkan beberapa prinsip ini untuk membuat klik atau keputusan pemain berikutnya sejelas mungkin?

Sebelum dimulainya pertempuran di Steamhound, pemain harus mengatur posisi awal dan rak ("formasi") untuk pasukan mereka. Proses pengaturan formasi tidak segera menjadi jelas bagi semua pemain.

Seperti apa tampilan layar itu:


Instruksi membosankan dan lisan untuk mengatur formasi pasukan

Meskipun memberitahu pemain segala yang perlu Anda ketahui untuk mengatur formasi, beberapa masalah muncul - (a) pemain tidak membaca teks dan (b) instruksi disajikan sebagai satu blok teks yang tidak terlihat seperti ajakan bertindak yang jelas . Hal yang buruk.

Solusi


Karena kami telah menerapkan teks yang indah dan menarik, mengapa tidak menerapkannya untuk memecahkan blok instruksi yang membosankan ini?


Sekarang kita memandu pemain langkah demi langkah - pertama dia perlu "klik pada karakter untuk mengatur raknya", kemudian "pilih rak", "pilih posisi", dll.

Gunakan petunjuk kontekstual untuk memberi tahu pemain apa yang perlu dilakukan saat ini . Dengan demikian, mereka melalui seluruh proses secara bertahap dan tidak takut dengan lembar instruksi yang panjang.



Masalah: terminologi singkat dan teknis harus digunakan dalam jumlah sedang


Kami mempelajari desain game dan menguasai bahasa yang sangat spesifik yang digunakan untuk menjelaskan aturan permainan. Kita tahu deskripsi dengan kata kunci yang dapat ditemukan pada kartu Magic: Gathering atau dalam buku aturan permainan papan - "serang satu makhluk" , "buang 3 kartu" , "menangani kerusakan pada semua karakter tetangga" . Jika Anda terbiasa dengan bahasa seperti itu, maka petunjuk ini benar-benar jelas dan jelas untuk Anda. Tapi saya yakin Anda bermain game dengan lebih banyak pemain kasual yang terkadang menafsirkan aturan dengan cara yang menurut otak desain Anda benar-benar tidak terduga.

Di Steamhound, sebagian besar teks dengan deskripsi aturan panjang ada di tooltips yang muncul ketika Anda memilih salah satu kemampuan karakter. Awalnya, kami ingin membuat uraian ini sekadat dan seketat mungkin - pada akhirnya, kami tidak perlu baris teks pop-up besar di tooltips ini. Oleh karena itu, kami mencoba menguranginya menjadi satu, paling banyak dua, kalimat pendek:


Deskripsi singkat yang menyenangkan namun bermasalah tentang kemampuan Fokus: "Beri Fokus"

Segalanya tampak benar, bukan? Tapi kami perhatikan bahwa pemain terlalu jarang menggunakan kemampuan ini .

Solusi


Kami berpikir bahwa alasan utama tidak populernya Fokus adalah karena para pemain yang tidak membaca aturan yang ditunjukkan kepada mereka sebelumnya, sama sekali tidak memiliki konteks yang diperlukan untuk memahami pentingnya atau kelebihan dari kemampuan . Banyak pemain melewatkan pengenalan dengan aturan, dan melayang di atas tombol ini, untuk pertama kalinya mereka menemukan penyebutan mekanisme Fokus. Karena itu, kami melakukan perubahan berikut:


Deskripsi yang sedikit lebih terperinci: “Memberikan fokus. Buka kunci kemampuanmu yang paling kuat. ”

Ya, deskripsinya menjadi sedikit bertele-tele. Tetapi kami memperhatikan bahwa proporsi orang yang menggunakan kemampuan ini telah meningkat. Teks baru secara bersamaan "menjual" kemampuan kepada pemain, dan memberikan konteks tambahan sehingga mereka dapat memahami pentingnya dari tooltip itu sendiri, bahkan jika mereka belum membaca aturan.

Dari masalah ini, kami mengekstraksi prinsip umum: untuk menggambarkan hal-hal dengan cara yang keren atau menarik, dan berusaha untuk membuat efek utama mekanika menjadi jelas bagi semua pemain, dan tidak hanya bagi mereka yang telah mempelajari informasi dari tempat lain .



Masalah 5: orang bias tentang kata-kata tertentu


Kami membuat pengamatan menarik tentang bagaimana bahasa yang kami gunakan membuat beberapa pemain menafsirkan aturan dengan cara yang tidak terduga. Kami merasa bahwa ini adalah hasil dari asosiasi yang mengakar dengan kata-kata yang mereka miliki.


Deskripsi lama Ramuan Vigor: “Pilih target. Serangan berikutnya akan membuat kerusakan ganda. "

Apa masalahnya di sini? Kata "target" memiliki konotasi yang agresif .

Kata "tujuan" sering digunakan dalam teks aturan sebagai istilah netral untuk segala sesuatu yang ditujukan untuk kemampuan itu. Pemain berpengalaman sudah bisa terbiasa dengan ini, dan memahami bahwa kemampuan yang dijelaskan di atas jelas merupakan peningkatan yang perlu Anda gunakan pada karakter Anda sendiri. Tetapi hubungan antara kata "target" dan serangan itu begitu kuat sehingga beberapa pemain berpikir bahwa kemampuan ini harus digunakan pada musuh, sehingga serangan berikutnya akan menyebabkan kerusakan tambahan.

Solusi


Sepertinya kami harus pindah dari menggunakan bahasa teknis seperti itu. Inilah cara kami memecahkan masalah:


Deskripsi yang ditingkatkan: “Memperkuat sekutu. Serangan berikutnya akan membuat kerusakan ganda. ”

Bagi perancang, pendekatan ini cukup menyakitkan - deskripsi ini tampaknya terlalu bertele-tele. Namun, kami perhatikan bahwa teks baru pada dasarnya menghilangkan kesalahpahaman tentang efek dari kemampuan ini, dan para pemain berhenti mencoba mengarahkannya ke musuh-musuh mereka. Pengembang harus mempertimbangkan nuansa makna dan target audiens, dan menemukan keseimbangan dalam hal yang sesuai. Teks aturan yang terlalu panjang jelas merupakan masalah, tetapi sedikit redundansi memungkinkan penekanan gaya dan karakter permainan.

Pelajaran yang berguna: saksikan penguji bermain untuk melihat apakah pilihan terminologi memiliki konsekuensi yang tidak terduga . Bahkan di antara pengguna berbahasa Inggris, ini bisa sangat bergantung pada budaya.



Masalah 6: orang memiliki asosiasi dengan warna-warna tertentu


Masalah ini mirip dengan topik sebelumnya tentang konotasi kata. Warna juga dikaitkan dengan perasaan atau konsep tertentu. Kami telah menggunakan ini dalam game, membuat highlight ubin untuk menunjukkan efek kemampuan. Merah - agresi, hijau - dukungan / pertahanan, dll.


Menyoroti ubin merah menakutkan

Dalam kebanyakan kasus, ini bekerja dengan sempurna. Tapi ada satu asosiasi yang kami tidak bisa ramalkan, dan itu membingungkan beberapa pemain. Mereka menghubungkan warna merah bukan dengan agresi , tetapi dengan tindakan yang salah . Oleh karena itu, ketika mereka melayang di atas target untuk menyerang, mereka bingung - mereka berpikir bahwa permainan memberitahu mereka tentang ketidakmungkinan membidik karakter ini (pada kenyataannya, permainan tidak menunjukkan ubin jika bukan target yang tepat).

Solusi


Kami mencoba menghindari "persimpangan" dari asosiasi yang saling bertentangan. Solusi kami:


Hampir sama (tetapi tidak cukup) ubin highlight merah-oranye

Kami hanya menggeser lampu latar merah lebih dekat ke rona sedikit oranye. Masih harus dilihat apakah ini benar-benar menyelesaikan masalah (yang sebenarnya hanya mempengaruhi beberapa pemain). Tapi lucunya, tidak ada orang lain yang salah dalam hal ini.

Karena itu, saya ulangi, periksa kembali bahwa interpretasi Anda tidak memengaruhi asosiasi yang ada di benak para pemain secara negatif .



Masalah 7: klik tambahan itu jahat


Kami sudah mengetahui hal ini, jadi kami merancang dan mengkonfigurasi UI untuk menghilangkan klik yang tidak perlu. Masalah muncul setelah add-on dibuat pada menit terakhir dalam perakitan permainan, yang dirancang khusus untuk demonstrasi di acara-acara.

Di akhir pertempuran, permainan fanfares dimainkan dan pesan besar "Victory" atau "Defeat" muncul di layar:


Kemudian pemain dapat mengklik di mana saja di layar untuk keluar dari pertempuran dan kembali ke menu utama. Kami mengubah unit demo sehingga setelah keluar dari pertempuran, pemain akan melihat dialog berlangganan milis.

Sepertinya ide yang bagus, tapi dia punya satu kesalahan fatal. Saat pesan "kemenangan" atau "kekalahan" muncul di layar adalah saat ketika para pemain berjabat tangan (atau mulai bertengkar) dan bangkit dari kursi mereka. Pertarungan berakhir, dan tidak ada lagi akal untuk duduk di depan komputer. Jadi mereka pergi tanpa melihat dialog milis .

Solusi


Permainan akan secara otomatis setelah beberapa detik menampilkan layar berlangganan buletin.


Sejujurnya, kita harus meramalkan ini sebelumnya, tetapi fungsinya ditambahkan pada saat terakhir. Namun, perubahan sederhana - menghilangkan klik opsional - meningkatkan jumlah langganan buletin kami sebanyak tiga kali dibandingkan dengan hasil sebelumnya. Persetan dengan klik opsional ini!



Kesimpulan


  • Gunakan gerakan / animasi untuk menarik perhatian pada petunjuk teks
  • Buat Elemen UI Interaktif Jelas
  • Pikirkan petunjuk sebagai panggilan untuk bertindak. Jadikan mereka instan dan kontekstual.
  • Jangan mencari dengan bahasa teknis dan berusaha menyampaikan konteks untuk membantu pemain memahami keputusan mereka
  • Periksa asosiasi mental yang tidak terduga dengan warna, kata, dll.
  • Navigasi UI lancar dengan menghilangkan klik opsional

Saya harap prinsip-prinsip yang dijelaskan dalam artikel ini akan berguna dalam permainan Anda sendiri. Namun yang terpenting, kami berharap kami dapat meyakinkan Anda tentang nilai pendekatan standar: awasi pemain baru, temukan momen ketika mereka mandek atau bingung, lalu turunkan prinsip-prinsip dasar dan terapkan mereka ke seluruh permainan.


Data dan observasi dikumpulkan di PlayExpo London. Saya suka spreadsheet.

Kami menambahkan kode koleksi metrik ke majelis demo tentang hasil pertempuran, frekuensi pilihan dan kemampuan setiap karakter, berbagai informasi tentang waktu menggunakan UI. Ini jelas membantu kami dan memungkinkannya, dari sudut pandang ilmiah, untuk mendekati pengukuran dampak dari perubahan yang kami buat. Tapi mungkin bagian utama dari pelajaran diterima dengan cara lama yang baik "mengawasi pemain dari samping dan menyimpan catatan tulisan tangan."

Tak satu pun dari kami adalah pakar UX (dan secara tidak resmi, artikel ini berjudul "7 Kesalahan UX yang Dapat Kami Hindari"). Seperti kebanyakan tim pengembang yang tidak memiliki spesialis UI / UX khusus, kami mencoba mengikuti akal sehat dan mematuhi rekomendasi paling sederhana. Tetapi ketika Anda begitu tenggelam dalam proyek Anda sendiri, sulit untuk secara objektif mengevaluasi semua kekasarannya. Tampilan segar dari tester permainan baru ini sangat berharga - gunakan sesering mungkin!

Source: https://habr.com/ru/post/id423637/


All Articles