Month: June 2021

Game Interface Design

Apa itu Game ?

• Permainan komputer adalah sebuah perangkat lunak, bukan board game atau sports.
• Sebuah game komputer melibatkan pemain.
• Bermain game adalah tentang membuat keputusan. Pemain juga menginginkan gameplay permainan yang menarik dan bagus.
• Game membutuhkan sebuah tujuan. Game yang panjang mungkin membutuhkan sebuah sub-tujuan.

Apa perbedaan antara mainan, puzzle, dan sebuah game ?

• Mainan atau Toys digunakan hanya untuk bermain, tidak ada peraturan atau tujuan.
• Puzzle memiliki sebuah tujuan akan tetapi biasanya tidak memiliki aturan, kecuali Rubik.
• Game memiliki ketiganya, bermain, tujuan dan aturan.

Game Interface Type

• Non-diegetic Representation
• Spatial Representation
• Meta Representation
• Diegetic Representation

Seven Stage of Action

• Goals ? Intention of Act ? Sequance fo Action ? Execution of Action Sequance ? The Game
  The Game ? Perceiving states ? Interpreting perceptions ? Evaluating interpretetaions ? Goals

Eksekusi

• Intention of act
• Sequance of action
• Execution of action sequence

Evaluasi

• Evaluating interpretations
• Interpreting perceptions
• Perceiving states

Goals atau Tujuan

• Memodelkan keadaan yang diinginkan
• Hasil yang diinginkan dari suatu tindakan

Intention of act

• Pernyataan spesifik tentang apa yang harus dilakukan

Sequence of action

• Perintah – perintah internal akan dilakukan

Execution of action sequence

• Pemain memanipulasi variabel kontrol

Perceiving state

• Variabel status terungkap melalui interface

Interpreting perceptions

• Interpretasi berdasarkan model sistem

Evaluates interpretations

• Keadaan saat ini dibandigkan dengan niat dan tujuan

Web Design Principles

Mendesain interface sistem berbasis web untuk membangun website dengan halaman yang efektif, berikut ini beberapa atribut yang perlu diperhatikan:

1. Textual Content
   Konten yang ditampilkan dalam sebuah website memiliki nilai yang lebih penting dibandingkan desain website itu sendiri, informasi yang sesuai merupakan hal yang sangat penting dalam sebuah website.
2. Graphics Design
   Tampilan grafik harus memperhatikan masalah konsistensi, susunan antara teks dan gambar, kontras, warna, dan fungsionalitas dari gambar yang ditampilkan.

   Pemilihan format gambar yang sesuai:

   • GIF atau Graphic Interchange Format (Compressed, lossless format, 8bit).
   • Memungkinkan warna transparan dan animasi, cocok untuk ikon atau gambar warna yang solid.
   • JPEG atau Joint Photographic Expert’s Group (Compressed, lossy, 24bit).
   • Memungkinkan memilih faktor kompresi dan menentukan kualitas gambar, cocok untuk fotografi dan gambar dengan warna kompleks.
   • PNG atau New Universal Format (Compressed, lossy, 24bit).
   • Lebih unggul untuk menampilkan warna transparan dibandingkan JPEG dan GIF.

3. Navigation
   Elemen kritis dalam menentukan efektivitas antarmuka sebuah website. Navigasi harus memberikan penjelasan tentang struktur informasi pada website, dengan menyediakan:
   • Daftar isi (site map)
   • Index
   • Navigation bar
   • Kemampuan searching

4. Struktur
   • Connectivity and compactness.
   • Branching factor
   • Page length
   • Number of links

   Struktur web

   • Homepage merupakan halaman yang terpenting dalam website
   • Berikan tampilan yang menarik pada homepage dan penjelasan tentang informasi apa saja yang ditemukan pada website.
   • Tampilkan beberapa real content maupun berita aktual pada homepage.
   • Jika link yang dibuat pada homepage menggunakan gambar, maka berikan pula label berupa teks.
   • Tampilkan informasi dinamis pada homepage.

5. Links
   Link harus memberikan penjelasan tentang apa yang dapat dilakukan pada halaman berikutnya.
   Sebuah link yang baik berpedoman pada:
   • Bagaimana user dapat memprediksi tujuan sebuah link.
   • Bagaimana user dapat membedakan antara sebuah link dengan link lainnya yang memiliki kemiripan.
   • Sesuai tidak konten yang ditampilkan oleh link.

Mobile Device User Interface
Yang berbeda pada perangkat mobile:

• Perbedaan input (one-handed, keypad, kamera, pen, soft keyboard)
• Digunakan pada tempat berbeda – beda.
• Daya energi terbatas
• Mudah rusak
• Bandwith yang rendah
• Layar yang kecil
• Sangat mungkin muncul desain interaksi baru dalam waktu dekat

Interface perangkat mobile

• Memungkinkan memakai penggunaan shortcut
• Menawarkan umpan balik informasi
• Mendesain analog yang mudah digunakan
• Mendukung kendali internal

Hal yang harus diperhatikan

• Pencegahan kesalahan dengan error handling yang sederhana

Efisiensi dan optimasi penggunaan internal

Stabilitas koneksi jaringan dan pemanfaatan akses jaringan yang seminimal mungkin

Prinsip desain antar muka perangkat mobile

• Desain konteks multiple dan dinamis
• Desain perangkat dengan ukuran kecil
• Desain dengan perhatian khusus
• Desain kecepatan dan recovery
• Desain interaksi top-down
• Desain personalisasi
• Desain yang menyenangkan

Organize and Layout Windows and Pages and Usability Testing

Organize and Layout Windows and Pages
Pengorganisasian Layout Windows dan halaman yang baik dapat mempercepat pemahaman informasi, mempercepat proses eksekusi task dan fungsi, dan meningkatkan User Acceptance.

Petunjuk Umum

• Amount of Information, telalu banyak informasi dapat membingungkan tapi terlalu sedikit juga tidak efisien.
• Flow, memberikan tata letak yang logis, berurutan, dan ritmis.
• Navigation, meminimalkan perjalanan kursor dan pointer termasuk juga tangan pengguna dari mouse ke keyboard.
• Usually pleasing composition, keseimbangan, pengelompokkan, dan penyelarasan.
• Consistency, memberikan konsistensi dengan pengalaman pengguna dan konversi budaya.
• Emphasis of element, sekunder, kritis, penting, dan periferal.

Petunjuk Organisasi

• Umum, memberikan pengelompokkan elemen terkait.
• White Space, berikan pemisahan pengelompokkan yang memadai melalui penggunaan ruang putih.
• Headings, berikan bagian judul dan bagian subjudul untuk pengelompokkan kontrol berganda.
• Borders, meningkatkan pengelompokkan melalui penggabungan batas di sekitar elemen kontrol tunggal, kelompok kontrol, atau bidang terkait.

Petunjuk Web Pages

• Umum, efisien serta logis dan konsisten
• Layout Grid, tetapkan kisi tata letak standar dan konsisten disetiap halaman.
• Element, untuk membuat halaman tetap sederhana, batasi jumlah elemen fungsional yang berbeda pada halaman.
• Size, minimalkan panjang halaman, batasi menjadi dua atau tiga layar informasi.
• Organization, penentuan posisi (elemen penting diatas).
• Formatting, Penyelarasan yang lebih baik dan koneksi visual antar elemen.
• Multiple Audience, sajikan informasi dalam tingkat detail yang berbeda.
• Platform, antisipasi layar dan resolusi yang khas serta tentukan area penyimpanan gambar pada layar yang akan selalu terlihat oleh sebagian besar penonton.
• Navigation Element, sediakan bilah navigasi global dibagian atas setiap halaman.
• Homepage, Identifikasi konten dan tujuan situs web dengan jelas.

Usability Testing
Evaluasi Usability
Pendekatan untuk mengevaluasi menurut Chandler & Hyatt:

• Metode Inspeksi, tidak melibatkan pelanggan.
• Metode Pengujian lab, melibatkan pengujian perwakilan pengguna.
• Metode Survey dan Pelaporan pelanggan, memberikan data subjektif dan didasarkan pada perasaan, sikap, dan persepsi yang diungkapkan tentang interaksi usability dan kualitas yang diinginkan secara keseluruhan.

Evaluasi Heuristik

• Berdasarkan keahlian kumpulan reviewer.
• Umumnya berlaku diseluruh situasi dan digunakan untuk memprediksi potensi masalah dalam interaksi.
• Memiliki keunggulan karena mudah digunakan dan tidak membutuhkan setting lab yang mahal.
• Kalbach (2007) mengindentifikasi 3 langkah untuk evaluasi heuristik:
  1. Persiapkan, setuju tentang siapa yang akan melakukan review.
  2. Jalankan, telusuri prototipe interaksi dengan fokus pada satu prinsip pada satu waktu.
  3. Konsolidasi, diskusikan temuan anda dengan reviewer lain.

Pengujian Usability

Pilot Test, memungkinkan untuk ‘men-debug’ pengujian dan mencari tahu apakah ada masalah awal

dengan interaksi yang sedang diuji.

Dapat dilakukan di laboratorium pengujian usability. Jika laboratorium tidak tersedia, solusi lain yang layak adalah pergi ke lokasi client.

User dapat diwawancara saat mereka melakukan tugas. Pastikan pertanyaan spesifik sehingga tester bisa mendapatkan jawabannya.

Create Meaningful Graphics, Icons, and Images & Choose the Proper Colors
Icon (Ikon)

Ikon adalah visualisasi gambar bergambar yang paling sering digunakan untuk mewakili objek dan tindakan yang dapat berinteraksi dengan pengguna atau yang dapat mereka manipulasi. Ikon berdiri sendiri di desktop atau di window atau bisa juga dikelompokkan bersama di toolbar.
Penggunaanya untuk memperkuat informasi penting. Gunakan ikon yang familiar, jelas, mudah, terbaca, sederhana, konsisten, langsung, efisien, dan diskriminatif.

Ikon menurut Marcus (1984)

Ikon, sesuatu yang terlihat seperti artinya.
Indeks, suatu tanda yang disebabkan oleh hal yang dirujuknya.
Simbol, sebuah tanda yang mungkin terlihat sangat sewenang – wenang dalam penampilannya.

Ikon yang berhasil

• Tampak berbeda dari semua ikon lainnya.
• Jelas apa yang dilakukannya atau diwakilinya.
• Dapat dikenali jika tidak lebih dari 16 piksel persegi.
• Terlihat bagus dalam warna hitam dan putih.

Memilih Ikon

• Gunakan ikon yang ada (jika tersedia).
• Gunakan gambar untuk kata benda, bukan kata kerja.
• Gunakan gambar tradisional.
• Pertimbangkan norma budaya dan sosial pengguna.

Multimedia

Fleksibilitas grafis dari Web memungkinkan dimasukannya media lain dilayar, termasuk gambar, foto, video, diagram, dan audio lisan.
Tujuan menambah multimedia adalah agar desain interaksinya bagus, bukan agar “berkilau”.

Graphics

• Melengkapi konten tekstual, bukan sebagai penggantinya.
• Sampaikan informasi yang tidak dapat diselesaikan secara efektif menggunakan teks.
• Menyajikan gambaran situs.
• Mengindentifikasi halaman situs.
• Mengidentifikasi area konten.
• Batasi penggunaan grafik yang membutuhkan waktu lama untuk dimuat (file terlalu besar).
• Koordinasi grafik dengan semua elemen halaman lainnya.

Jenis Grafik

• Navigasi, untuk mengidentifikasi tautan yang mungkin diikuti.
• Representasional, untuk mengilustrasikan item yang disebutkan dalam teks.
• Organisasi, untuk menghubungkan item yang disebutkan dalam teks.
• Penjelasan, untuk menunjukkan bagaimana sesuatu atau proses bekerja.
• Dekoratif, untuk memberikan daya tarik dan penekanan visual.

Warna

Warna menambahkan dimensi, atau realisme terhadap kegunaan layar. Warna juga dapat menarik perhatian pengguna, sehingga jika digunakan dengan benar, ini dapat menekankan pengaturan logis dari informasi, memfasilitasi diskriminasi komponen layar, menonjolkan perbedaan antar elemen, dan membuat tampilan lebih menarik dan atraktif.

Penggunaan Warna

Gunakan warna untuk membantu menginformasikan

• Mengaitkan atau mengikat elemen ke dalam pengelompokkan
• Memecah pengelompokkan informasi yang terpisah.
• Informasi terkait yang dipisahkan secara luas dilayar.
• Menyoroti atau menarik perhatian ke informasi penting dengan mematikannya dari informasi lain.

Gunakan warna sebagai kode visual:

• Komponen layar
• Struktur logis dari ide, proses, atau urutan.
• Sumber informasi
• Status informasi.

Gunakan warna untuk:

• Menggambarkan benda – benda alam secara realistis.
• Tingkatkan daya tarik layar.

Masalah yang berkaitan dengan warna

• Kapasitas mendapatkan perhatian tinggi.
• Gangguan dengan penggunaan layar tinggi.
• Memvariasikan sensitivitas mata terhadap warna yang berbeda.
• Kekurangan tampilan warna.

Memilih warna untuk halaman web

• Warna harus selalu memiliki tujuan yang jelas.
• Gunakan browser palet warna 216.
• Gunakan warna default untuk link.
• Jangan tampilkan teks non-tautan dalam warna tautan.
• Uji semua warna.

Penggunaan warna yang harus dihindari

• Mengandalkan warna secara ekslusif.
• Terlalu banyak warna dalam satu waktu atau halaman.
• Warna – warna yang sangat jenuh dan ekstrem secara spektral (merah dan biru, kuning dan ungu).
• Warna kecerahan rendah untuk penggunaan aplikasi yang lama atau user yang lebih tua.
• Warna di area kecil, atau untuk detail halus.
• Warna kurang kontras (kuning dan putih; hitam dan coklat; merah, biru, coklat).
• Warna jenuh penuh teks atau komponen layar lain yang sering dibaca.
• Biru murni untuk teks, garis tipis, dan bentuk kecil.
• Warna non-lawan (merah dan hijau dipinggiran layar berskala besar).
• Menggunakan warna dengan cara tidak terduga.
• Perbedaan satu warna untuk pengguna dengan kekurangan warna.
• Menggunakan warna untuk meningkatkan keterbacaan teks yang padat.
• Warna – warna yang berdekatan itu hanya berbeda pada besaran warna biru.

Internasionalisasi dan Kemudahan Akses
Internasionalisasi

Hari ini internet dan pasar perangkat lunak bersifat global. Itu melewati batas budaya dan bahasa yang tidak terhingga.
Pemahaman dan ingatan dapat ditingkatkan ketika informasi yang disajikan sesuai dengan budaya (Sprydakis dan Fukuoka, 2002).
Untuk membuat produk yang diterima oleh dunia, produk itu harus ter internasionalisasi. Sebuah sistem juga harus dirancang agar dapat digunakan oleh semua orang dan diakses oleh siapa saja yang ingin menggunakannya.
Konsep desain yang digunakan untuk mencapai tujuan itu disebut internasionalisasi dan aksesibilitas.

Pertimbangan Internasional

1. Localization
   • Kapan harus dilakukan:
     • Ketika pasar memliki sedikit atau tidak ada pembicara bahasa Inggris
     • Ketika terjemahan diwajibkan oleh penegak hukum.
     • Menginginkan pasar yang luas.
   • Kapan jangan lakukan itu:
     • Ketika pasar sudah mengerti bahasa Inggris.

Pertimbangan Budaya
Hofstede (1980, 1997, 2001) telah memvalidasi 5 dimensi independen dimana budaya bervariasi:

1. Jarak kekuasaan adalah tingkat penerimaan ketidaksertaan kekuasaan dan otoritas.
2. Individualisme (vs. Kolektivisme) mencerminkan seberapa baik integrasi seseorang dalam kelompok yang lebih besar.
3. Maskulinitas (vs. Feminitas) adalah keseimbangan antara ketegasan atau ketangguhan dan dukungan atau kepedulian
4. Penghindaran ketidakpastian adalah tingkat kenyamanan dengan tidak terstruktur dan kondisi yang berpotensi tidak terduga.
5. Orientasi jangka panjang (vs. Jangka pendek) adalah trade-off antara imbalan jangka panjang dan pengakuan langsung.

Kata – kata dan Teks

• Gunakan bahasa Inggris yang sangat sederhana
• Hindari akronim, singkatan, slang atau ungkapan yang tidak jelas, gaya penulisan telegrafis, dan contoh budaya tertentu
• Patuhi idiom bahasa pengguna lokal dan konteks budaya
• Pertahankan istilah aslinya untuk kata – kata yang tidak dapat diterjemahkan
• Posisi keterangan ikon diluar grafik
• Ubah mnemonik untuk akses keyboard

Gambar dan Simbol

• Mematuhi norma budaya dan sosial setempat
• Gunakan simbol yang diterima secara Internasional
• Kembangkan gambar umum
• Berhati – hatilah dengan simbol agama, tubuh manusia, perempuan, gerakan tangan, bendera, peta geografis yang kontroversial, dan tanda silang serta centang kotak.
• Tinjau gambar grafis yang diusulkan diawal siklus desain.

Warna, Urutan, dan Fungsionalitas

• Patuhi konotasi warna lokal dan konvensi
• Berikan informasi yang tepat urutan
• Menyediakan fungsionalitas yang tepat
• Hapus semua referensi ke fitur yang tidak didukung

Penentuan dan Pengujian Persyaratan

• Menetapkan persyaratan internasional di awal produk pengembangan.
• Jalin hubungan di dalam budaya sasaran.
• Uji produk seolah – olah baru