- Desain visual game UI & UX membahas pentingnya desain antarmuka pengguna atau user interface dalam game yang baik. Hal ini meliputi pendekatan desain berdasarkan pengalaman pengguna, pilihan kontroler, dan elemen visual seperti menu, HUD, dan tampilan informasi. - Faktor kunci yang perlu diperhatikan meliputi kemudahan penggunaan, konsistensi desain, umpan balik visual dan audio yang jelas, serta pilihan kontroler yang sesuai den

2. GAME DEVELOPMENT
PERTEMUAN 9
DESAIN VISUAL GAME UI & UX

3. Pengertian User Interface
Antarmuka pemakai (User Interface)
merupakan mekanisme komunikasi antara
pengguna (user) dengan sistem. Antarmuka
pemakai (User Interface) dapat menerima
informasi dari pengguna (user) dan
memberikan informasi kepada pengguna
(user) untuk membantu mengarahkan alur
penelusuran masalah sampai ditemukan
suatu solusi.

4. User Experience
 Berkaitan dengan kemampuan
pengguna.
 Pengguna dikategorikan dalam
kelompok yang berpengalaman
(experience) dan kelompok yang tidak
berpengalaman atau pemula (notice).
 Perancangan antar muka pengguna
harus memperhatikan dan
mengakomodasi kedua kelompok
pengguna tersebut.
7/1/2023

5. User Experience
 Kelompok pemula menaruh perhatian
pada kemudahan untuk dipelajari (ease
of learning) sedangkan kelompok
berpengalaman menaruh perhatian
pada kemudahan digunakan (ease of
use).
 Perlu memperhatikan sifat penggunaan
sistem bagi user. Digunakan sehari-hari
atau kadang-kadang.
 Mengapa perlu diperhatikan hal ini …. ?
 Menambahkan short-cut bagi
pengguna yang berpengalaman.
7/1/2023

6. User
Experience
7/1/2023

7. 7/1/2023

8. Intro
• Salah satu faktor penting untuk prototype digital
adalah desain dari USER INTERFACE
• User Interface berperan besar dalam memberikan
“user experiences” yang saat ini menjadi faktor
penting dalam kesuksesan sebuah game
• Munculnya variasi controller devices maupun model
dari user interaction semakin menambah
kompleksitas dari game, namun disisi lain
memberikan peluang yang besar pula

9. • Mendesain antarmuka. Antarmuka pengguna atau UI adalah
objek-objek seperti menu, HUD, dan sebagainya. Objek-objek
semacam ini haruslah mudah digunakan. Amati UI game-game yang
Anda sukai, tapi satu hal yang perlu diingat dalam pembuatan UI
adalah, semakin sederhana semakin baik. Jika UI game Anda dapat
dipahami oleh anak berusia 8 tahun, itu artinya UI tersebut cukup
baik.

10. Mendesain Aspek Visual
• Tampilan harus sesuai dengan game Anda. Tampilan game yang
segar, dengan warna warni mencolok, misalnya, akan merusak game
dengan tema serius.
• Pilih palet yang kohesif dan menarik. Tampilan visual yang menarik
merupakan bagian penting dalam game. Anda bisa membaca buku-
buku tentang teori warna, dan seperti biasa, bila ragu, gunakan
contoh dari game yang sudah ada.

11. • Gunakan petunjuk visual. Ada banyak
cara yang dapat dipergunakan agar game
Anda lebih mudah dijelajahi, di antaranya
adalah dengan memberikan petunjuk
visual agar player tetap tertarik
memainkannya. Dalam game Left4Dead2,
hampir dapat dikatakan tidak ada
petunjuk (instruksi tertulis) ke mana
player seharusnya bergerak. Namun game
tersebut selalu memberikan petunjuk
visual, di mana tempat-tempat yang
seharusnya dituju oleh player selalu
memiliki petunjuk visual (misalnya lampu
menyala, rambu lalu lintas, dan
sebagainya).

12. • Jangan membatasi hanya pada keindahan grafis.
Game dengan grafis yang menawan (seperti Mass
Effect) memang memukau, namun game-game
dengan grafis sederhana juga tidak kalah bagus.
Satu contoh di sini adalah game Journey atau
Bastion, yang meskipun memiliki grafis sederhana
namun sangat sukses.

13. Komponen
• Membuat tutorial. Bila konsep game Anda relatif baru, Anda perlu
memberikan tutorial (misalnya pada awal release game seri Age of
Empire). Tutorial ini juga dapat diberikan menggunakan instruksi
(seperti Mass Effect), atau memberikannya saat player memainkan
game Anda (Serious Sam BFE).

14. Interfaces
• Sarana komunikasi dengan pemain untuk mengetahui
progress mereka didalam game
• Selain progress juga media untuk hal lain seperti
pilihan game yang tersedia bagi mereka (cth: help,
option, exit, dsb)
• Desain interface yang bagus tidak mudah, tapi bukan
mustahil. Inovasi merupakan tujuan, tapi pembuktian
di lapangan yang sudah teruji lebih menjadi pilihan.

15. Studi Kasus: Angry Birds & PvsZ

16. Gunakan IKON yang intuitif dibanding
teks. Tujuannya agar layar tidak dipenuhi
teks yang menyempitkan pandangan

17. Penggunaan IKON
dan TEKS secara
berimbang akan
membuat pemain
cepat mengerti
cara bermain tanpa
kesulitan membaca
manual
Gunakan IKON yang sudah dikenal universal
agar pemain secara intuitif sudah mengetahui
fungsinya. Lihat ikon pause pada layar diatas,
cukup mudah menemukannya bukan?

18. TEKS dapat
dipadukan
dengan gambar
untuk
membentuk
unsur estetika
sekaligus
membantu
pemain
menggunakan
ikon terkait
Bila menggunakan banyak teks, gunakan ikon
dengan gambar/bentuk yang mewakili dari teks
tersebut. Pemain secara intuitif bisa memahami

19. Selalu berikan pilihan untuk kembali ke menu

20. Jangan memberikan alternatif pilihan terlalu banyak.
Hanya membuat perhatian pemain terpecah.

21. Menurut anda: Apakah ikon diatas sudah intuitif?

22. Tips:
• Kenapa menghindari teks? Bahasa masih menjadi
kendala di beberapa bagian dunia.
• Selain itu, manusia lebih cepat tertarik dan memahami
gambar/ikon dibanding teks.
• Dari sisi development, localization atau proses
penterjemahan game ke bahasa lokal akan terhindarkan
 hemat waktu dan biaya pengembangan.
Catatan: Perkembangan hardware game yang cenderung
mengecil dari ukuran dan lebar layar (mobile
phone/smartphone dan tablet PC)  limitation

23. Game yang
anda buat
akan
dikembangkan
pada hardware
jenis apa?

24. Teknik mendesain Interface
• Metaphor: penggunaan symbol atau grafis terkait
dengan tema dari game. Contoh: PvsZ menggunakan
metaphor batu nisan di welcome screen dan pause
screen.
• Visualization: penggunaan gambar secara detail
untuk memvisualisasikan kondisi yang ingin
ditampilkan kepada pemain. Contoh: user interface
dengan gaya tertentu untuk menambah “mood”
pemain.

26. Efek tampilan informasi di layar dengan transparansi,
membuat pemain seakan-akan menjadi agen intelijen
dengan kacamata canggih terhubung dengan
komputer pusat data.

27. Tips: Susun interface berdasarkan group / fungsionalnya

28. Tips: Susun dengan konsistensi, jangan berpindah-pindah

29. STRUKTUR NAVIGASI
29
• penuntun alur aplikasi multimedia
• menggambarkan dengan jelas hubungan dan rantai
kerja seluruh elemen yang akan digunakan dalam
aplikasi.

30. JENIS STRUKTUR NAVIGASI
30
• Linier
• Hirarki
• Jaringan
• Kombinasi

31. STRUKTUR LINEAR
31
Penggunaan :
• Presentasi
• Aplikasi computer based – training
• Aplikasi yang memerlukan informasi
berurutan

32. 32
STRUKTUR HIRARKI
• Masing–masing obyek menyediakan sebuah menu pilihan
yang memiliki lebih banyak menu dengan banyak pilihan.

33. 33
STRUKTUR JARINGAN
Desain yang paling kompleks dengan banyak
obyek dalam setiap arah pada setiap obyek dalam
aplikasi multimedia.

34. 34
STRUKTUR KOMBINASI
• Gabungan antara struktur linier dan menu, tidak ada
batas untuk menyediakan banyak pilihan dengan menu
utama dan sub menu yang ada

35. MEMBUAT MENU SESUAI ATURAN
INTERACTION DESIGN
• Desain interface merupakan suatu interface antara
kode dan user serta mengacu ke fungsi, perilaku dan
presentasi final. Tujuan dari desain interaksi adalah
tujuan akhir dari penelitian. Kebanyakan software
didesain untuk membuat suatu tugas sederhana
daripada untuk menyediakan tujuan.
Contoh :
• Tujuan : mendapatkan sesuatu untuk dimakan
• Task : pergi ke restoran, memesan makanan delivery
atau berbelanja bahan makanan untuk dimasak

36. Faktor Desain Interaksi
• Daya guna adalah tingkat produk
dapat digunakan yang ditetapkan
oleh user untuk mencapai tujuan
secara efektif dan tingkat kepuasan
dalam menggunakannya.
• Daya guna merupakan salah satu
faktor yang digunakan untuk
mengukur sejauh mana penerimaan
pengguna terhadap sistem.

37. Daya guna heuristik
1.Dialog yang sederhana dan alami (simple and natural dialogue)
2.Berbicara dengan bahasa user (speak the user language)
3.Mengurangi beban ingatan user (minimize user memory load)
4.Konsisten (consistency)
5.Sistem timbal balik (system feedback)
6.Jalan keluar yang jelas (clearly mark exit)
7.Jalan pintas (shortcut)
8.Pesan-pesan kesalahan yang baik (good error message)
9.Mencegah kesalahan (prevent errors)
10.Bantuan dan dokumentasi (help and documentation)

38. Dialog yang Sederhana dan Alami
• User interface harus seringkas mungkin dan bersifat natural. Setiap
dialog seharusnya menghindari perintah-perintah yang tidak perlu
dan tidak ada hubungannya dengan interface,
• Pendekatan yang harus digunakan adalah :
• Hanya menampilkan perintah yang diperlukan
• Bentuk elemen grafik dalam user interface modern
• Penggunaan warna yang baik dan tidak berlebihan
• Desain layar dalam bentuk yang lebih ringkas
• Dialog yang natural

39. Berbicara dengan Bahasa Pengguna
• Dialog seharusnya menggunakan bahasa
yang dipahami oleh user. Perintah-perintah
yang berorientasi mesin mestinya tidak
digunakan sama sekali. Selain itu frasa-
frasa yang digunakan harus mudah
dipahami kebanyakan user
• Penggunaan metafora merupakan salah
satu pendekatan yang boleh digunakan.
Objek yang tampil di layar, jenis perintah,
jenis interaksi pengguna, cara sistem
memberikan feedback dan sebagainya
adalah berdasarkan frasa yang biasa
digunakan, misalnya desktop, icon, menu,
cut, copy and paste.

40. Konsisten
• Ciri-ciri konsisten
adalah dapat
menghindarkan
user dari rasa
was-was atau
ragu-ragu di saat
menggunakan
suatu perintah
atau fungsi.

41. Sistem Timbal Balik
• Sistem seharusnya
memberitahu pengguna
segala aktifitas yang
sedang berlaku atau
status dari sistem. Status
sistem menunggu input
dari pengguna,
memproses input,
menampilkan output, dan
sebagainya.

42. Jalan Keluar yang Jelas
• Sistem seharusnya dapat memberikan penjelasan tentang kondisi dan
solusi untuk menghaindari user terperangkap dalam tampilan-
tampilan yang tidak diinginkan, aktivitas atau situasi dalam
berinteraksi dengan sistem.

43. Jalan Pintas
• Demi kemudahan dan
kecepatan interaksi di dalam
menggunakan suatu sistem
maka sudah seharusnya bila
tersedia shortcut yang
berguna untuk membantu
user agar dapat
menggunakan berbagai
fungsi dengan mudah

44. Pesan Kesalahan yang Baik
• Menyediakan mekanisme
pemberitahuan kesalahan dan
menunjukkan situasi bahwa user
berada dalam kondisi bermasalah
serta membantu user untuk lebih
memahami sistem.

45. Pesan Kesalahan yang Baik
• Terdapat empat peraturan yang harus diikuti dalam penggunaan
pesankesalahan, yaitu :
Pesan kesalahan yang digunakan harus jelas dan mudah dipahami,
disampaikan dalam bentuk teks, frasa atau konsep yang mudah dipahami
Pesan yang disampaikan bersifat khusus
Pesan kesalahan yang disampaikan sebaiknya menyediakan cadangan
penyelesaian atas kesalahan
Penyampaian kesalahan dilakukan secara sopan

46. Mencegah Kesalahan
• Rekayasa interface yang baik
seharusnya mampu membuat user
menghindari kesalahan, misalnya
interaksi dengan menggunakan menu.

47. Bantuan dan Dokumentasi
• Bantuan dan dokumentasi merupakan kemudahan yang diberikan
sistem untuk menjelaskan cara penggunaan, ciri-ciri khusus sistem
dan membolehkan user untuk mengendalikan sistem dengan lebih
baik, misalnya bantuan Help

48. Teknik Daya Guna Siklus Hidup
• Kenali Pengguna (Know the user)
• Daya guna Benchmarking
• Desain Interaksi Berorientasi Tujuan
(Goal-oriented interaction design)
• Iterative Design
• Studi Lanjutan (Follow up studies)

49. Kenali Pengguna
• Mempelajari, mengenali dan memahami pengguna yang akan
menggunakan sistem
• Merangkum keperluan user
• Kepuasan
• Kemahiran komputer

50. Kenali Pengguna
Masalah yang sering dihadapi adalah kesulitan untuk mendapatkan
sasaran. Oleh karena itu perlu dilakukan hal-hal sebagai berikut :
• Riset kualitatif seperti pengamatan dan wawancara
• Mengklasifikasikan user berdasarkan perilaku dan variabel demografis
(lingkungan)
• Identifikasi tujuan user dan attitude
• Menganalisa aliran kerja dan konteks kerja
• Menyusun tipikal skenario user

51. Kenali Pengguna
User dapat diklasifikasikan
menjadi sebagai berikut :
• Pengalaman
• Tingkat pendidikan
• Umur
• Statistik pengguna sistem
yang sudah ditraining

53. Feedback
Feedback atau umpan balik sangat penting bagi
pemain agar selalu mengetahui apakah aksinya
diterima atau tidak dan apa dampaknya.
Feedback secara visual harus mudah untuk
dimengerti. Misalnya jumlah peluru yang terus
berkurang ditandai dengan ikon peluru yang
menyusut. Kesehatan yang menurun ditandai dengan
warna tubuh yang semakin merah.
Feedback audio bisa membangun mood dan emosi
pemain jika digunakan dengan baik. Bahkan pada
jenis game tertentu bisa menutupi kekurangan dari
sisi art/grafis.

54. Penutup
• Pilih dan gunakan controller yang sesuai dengan
prototype game anda.
• Tentukan viewpoint yang terbaik untuk game ada
dengan mempertimbangkan faktor-faktor terkait.
• Rancang interface yang sesuai dengan tema dari
prototype game anda.

55. ALLHAMDULILLAH rengse
SADEREK SADAYA... !