Tag: Aditya Denika Ramadhan

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

Screen-Based Control

Screen Control
Biasa disebut juga Widgetsadalah objek grafik yang merepresentasikan properti atau operasi dari objek lain.
Fungsi:

• Mengizinkan pemilihan nilai tertentu
• Mengizinkan suatu perubahan atau pengeditan nilai tertentu
• Hanya menampilkan bagian teks, nilai, atau grafik
• Membutuhkan perintah ketika dilakukan
• Memiliki pop-up windows

3 Prinsip Penting

1. Sebuah kontrol harus:
   • Lihat cara kerjanya
   • Bekerja seperti yang dilihat
2. Dipakai persis seperti yang dimaksudkan desainnya
3. Dipresentasikan dengan cara standar

Operable Buttons (Tombol yang dapat dioperasikan)

• Berbentuk persegi atau persegi panjang dengan label didalamnya
• Label terdiri dari teks, grafik atau bahkan keduanya

Tujuan

• Untuk memulai aksi
• Untuk mengubah properti
• Untuk menampilkan pop-up

Jenis

• Command Buttons
• Toolbar Buttons

Pada Windows

• Menampilkan jendela lain
• Menampilkan menu opsi
• Mengatur mode atau nilai properti

Pada Web

• Digunakan pada link untuk menampilkan informasi

Text Entry (Read-Only Control)
Biasanya disebut juga dengan Fieldatau Text Box.

• Biasanya berbentuk persegi panjang
• Memiliki keterangan atau label yang menjelaskan jenis informasi yang ada di dalamnya
• Ada dua tipe yaitu Single Line dan Multiple-Line

Selection Control
Menampilkan semua kemungkinan alternatif, kondisi, atau pilihan yang ada untuk entitas, properti, atau nilai di layar.

• Jenis:
  • Radio Button
  • Check Box
  • List box
  • List view control
  • Drop down atau Pop-up list box

Presentation Control

• Static Text Fields
• Group Box
• Column Headings
• Tool tip

Screen Text and Messages

Readability
Faktor yang mempengaruhi Keterbacaan atau Readability:

• Panjang kata
• Kesamaan kata
• Panjang kalimat
• Jumlah suku kata dalam sebuah kalimat
• Informasi terorganisasi, tata letak serta formatnya

Panduan Readability

• Tulis pada tingkat keterbacaan di bawah tingkat keterampilan audiens yang dituju
• Terapkan semua prinsip lainnya untuk penulisan yang jelas

Menulis Kalimat dan Pesan
Pesan adalah komunikasi yang disediakan layar untuk pengguna.

• Singkat dan sederhana
• Tidak lebih dari 20 kata perkalimat
• Tidak lebih dari 6 kalimat per paragraf
• Pernyataan afirmatif
• Tidak otoriter
• Tidak mengancam
• Tidak menggurui
• Tidak menghukum

Jenis Pesan
Pesan Layar

• Pesan Sistem
  Agar pengguna dapat mendapat informasi tentang status dan aktivitas sitem. (Status, Informational, Warning, Critical, Question)
• Pesan Instruksional
  Pesan yang memberi tahu pengguna cara kerja dengan, atau menyelesaikan layar yang ditampilkan.

Menulis Teks Kotak Pesan
Judul Bar

• Identifikasi sumber pesan dengan jelas
• Jangan memasukkan indikasi jenis pesan

Kotak Pesan

• Berikan gambaran yang jelas dan ringkas tentang penyebab kondisi tersebut
• Gunakan kalimat lengkap dengan tanda baca akhir
• Sebutkan masalah, kemungkinan penyebabnya (jika diketahui), dan apa pengguna dapat melakukannya
• Hindari kontraksi
• Jangan melebihi 2 sampai 3 garis
• Sertakan ikon yang berhubungan dengan pesan
• Posisi teks ada ditengah window

Window

Sebuah area dilayar berbentuk segi empat, memiliki batas – batas dan bagian yang menunjukkan aktivitas komputer atau bagian yang memungkinkan manusia berdialog dengan komputer.

Karakteristik Window

• Identitas window (nama atau judul)
• Ukuran (tinggi dan lebar)
• Status (aktif atau pasif)
• Visibilitas (bagian yang dapat dilihat atau tersembunyi dibalik window lain)
• Lokasi (relatif terhadap batas layar)
• Tampilan (tiled, overlap, cascading)
• Kemampuan Manajemen (metode manipulasi window pada layar)
• Highlight (bagian yang dipilih)
• Fungsi, task, atau aplikasi yang didukung

Dukungan Windows

• Harus dapat mendukung pekerjaan manusia yang memerlukan banyak sumber, berpindah – pindah dari satu tugas ke tugas lainnya, dapat dihentikan sewaktu – waktu, diulang, diubah, dan dilanjutkan lagi.
• Harus meringankan beban memori manusia

Tampilan Windows

• Menampilkan informasi dalam beberapa level
• Menampilkan berbagai jenis informasi
• Menampilkan beberapa level dan jenis informasi secara sekuensial
• Mengakses dan mengkombinasikan berbagai sumber informasi
• Melaksanakan lebih dari satu task
• Mengingatkan pengguna (pilihan menu, rencana)
• Mengawasi perubahan internal dan eksternal
• Menampilkan sebuah task dalam beberapa representasi yang berbeda
• Mengatasi pertimbangan historis, batasan perangkat keras, dan batasan manusia

Pertimbangan Historis

• Panduan desain yang ada biasanya hanya menyelesaikan masalah perangkat keras, tanpa memperhatikan usabilitas
• Standar desain yang ada sangat umum dan terbatas untuk lingkup produk tertentu
• Tiap pengembang memperkenalkan standar dan panduan desain baru yang sesuai dengan produk mereka.

Batasan Perangkat Keras dan Manusia

• Ukuran layar yang tersedia seringkali menjadi tantangan bagi pengguna untuk memanfaatkan window dengan optimal
• Kecepatan pemrosesan yang rendah dan ukuran memori yang kecil
• Kemampuan window yang terbatas

Komponen Windows

• Frame
• Title bar
• Title bar icon
• Window sizing buttons
• Help button
• Menu bar
• Status/Message bar
• Scroll bars
• Split box
• Tool/Command bar
• Command area
• Size grip
• Work area
• Message box
• Palette windows
• Pop-up windows

Gaya Tampilan Window

• Tiled Windows (gaya tertua, menampilkan semua windows hingga memenuhi layar)
• Overlapping (windows dapat saling bertumpuk acak)
• Cascading Windows (overlap secara teratur)

Tipe – tipe Window

• Primary windows (windows utama yang muncul di layar saat sebuak aktivitas atau aksi dimulai)
• Secondary windows (windows tambahan yang dapat berupa independent maupun dependent terhadap windows primary nya)
• Dialog box (untuk memperluas dan melengkapi interaksi dengan aksi tertentu yang sangat terbatas)

Interaction Device
Suatu mekanisme input atau device yang digunakan user untuk mengkomunikasikan keinginan dan kebutuhannya kepada komputer, dan/atau mekanisme Output atau device yang digunakan komputer untuk memberikan respond kepada user.

Karakteristik Input Device

• Untuk manipulasi data atau informasi
• Untuk memilih sebuah objek di layar
• Untuk mencari atau mengikuti objek yang bergerak
• Untuk membawa sebuah objek di layar
• Untuk membuat sesuatu dalam layar
• Untuk menjelaskan posisi objek
• Untuk memiliki objek atau identitas

Input Device

• Mouse
• Trackball
• Joystick
• Touch screen
• Graphic Tablet or Trackpad
• Keyboard
• Voice
• Gesture Recognition
• Facial Expression
• Eye Tracking
• Fingerprint
• Handwriting

Output Device

• Layar (gambar, warna, ukuran)
• Speaker (penggunaan sound bisa berupa simple beep, speech, music, dan sound effect)

Pemilihan Menu dan Pengisian Formulir

Desain interface dan layar yang baik:

• Mencerminkan kemampuan, kebutuhan, dan tugas penggunanya. Dikembangkan dalam batasan fisik yang dipaksa ditampilkan oleh perangkat lunak.
• Memanfaatkan kemampuan perangkat lunak pengendalian secara efektif.
• Mencapai tujuan bisnis dari sistem yang dirancang.

Pertimbangan manusia dalam desain interface dan layar:

• Cara mencegah timbul masalah dari pengguna, semua gangguan dan hal yang menyebabkan putus asa harus dihilangkan dalam desain.
• Apa yang pengguna inginkan, arah yang diinginkan adalah menuju kesederhanaan, kejelasan, dan dimengerti.
• Mengindentifikasi tugas yang harus dilakukan atau kebutuhan yang harus dicapai.
• Memutuskan bagaimana tugas akan diselesaikan atau kebutuhan terpenuhi.
• Komputer memanipulasi kontrol
• Mengumpulkan data yang diperlukan atau konten sementara menyaring data yang bermakna.
• Bentuk penilaian menghasilkan keputusan yang relevan dengan tugas atau kebutuhan.

Tujuan desain user interface

1. Dipahami secara kognitif
   • Konsisten
   • Dapat diprediksi
   • Dapat dikontrol
2. Diterima secara efektif
   • Penguasaan
   • Kepuasan
   • Tanggungjawab

3 Prinsip dasar desain (RES, 2001)

1. Konsistensi
   • Membuat interaksi yang dapat diprediksi
   • Interface harus menunjukkan konsitensi pada label yang digunakan.
   • Semua tindakan pengguna harus dapat dibalikkan (Undo).
2. Kesederhanaan
   • Menampilkan tidak lebih dari yang dibutuhkan
   • Membutuhkan input minimum dari pengguna
   • Jaga diantara pengguna dan tugas tetap fokus
   • Membuat konsep tertentu yang jelas
   • Gunakan representasi visual dengan manipulasi langsung (jika memungkinkan).
   • Jelas tidak nya sangat penting, seperti pernyataan informasi, organisasi, dan penamaan kontrol interface, tata letak layar
3. Konteks
   Mengenal kemampuan interaksi yang harus tampil sebagai urutan mengidentifikasi interface. Pedoman ini dibagi menjadi 6, yaitu:
   • Masukkan data
   • Tampilkan data
   • Urutan kontrol
   • Pedoman pengguna
   • Transfer data
   • Perlindungan data

Membangun menu sistem dan skema navigasi
Menu merupakan bentuk utama navigasi sistem, jika dirancang dengan benar akan membantu pengguna membangun model mental dari sistem.
Menu efektif karena menggunakan kelebihan manusia dalam hal Recognition (pengenalan) dan bukan kelemahannya, dalam hal ingatan.

Struktur Menu
Mendefinisikan tingkat kendali pengguna dalam melaksanakan sebuah Task (tugas).
Struktur menu yang dikenal:

• Menu tunggal
• Menu linier sekuensial
• Menu simultan
• Menu hirarki
• Menu terhubung
• Menu Event-Trapping

Fungsi menu

• Navigasi ke menu baru
• Mengeksekusi sebuah aksi atau prosedur
• Menampilkan informasi
• Memasukkan data

Isi menu
Sebuah menu yang terdiri atas 4 elemen, yaitu:

1. Konteks
2. Judul
3. Pilihan
4. Intruksi Penyelesaian

Format menu (Petunjuk)

1. Konsisten
   • Konsisten dengan ekspetasi pengguna
   • Konsisten dalam menu:
     1. Format: organisasi, presentasi, urutan pilihan
     2. Frasa: judul, deskripsi, pilihan, dan instruksi
     3. Cara Pilih
     4. Skema Navigasi
2. Tampil (permanen atau on demand)
3. Presentasi (sebuah menu dan pilihan – pilihannya dapat langsung dikenali sebagai sebuah menu)
4. Organisasi
   • Sediakan menu utama
   • Tampilkan, semua alternatif relevan, hanya alternatif relevan (hilangkan)
   • Sesuaikan struktur menu dengan struktur tugas
   • Minimalkan tingkat menu, untuk website batasi hingga 2 level
   • Jumlah Pilihan
   • Sediakan cara memendekkan Menu
   • Jangan sampai menu si scroll
5. Kompleksitas
   Sediakan menu sederhana
6. Susunan pilihan
7. Urutan pilihan
8. Pengelompokkan
9. Garis pembatas
10. Pemilihan menu pendukung
11. Bahasa atau kata yang digunakan
12. Intruksi menu
13. Intent indikator
14. Keyboard shortcuts
15. Memilih pilihan
16. Sediakan defaults
17. Pilihan yang tidak dapat dipilih
18. Tanda aktif atau non aktif sebuah pilihan
19. Toggled menu items

Navigasi untuk website
Navigasi adalah cara orang mencari apa yang mereka inginkan dari sebuah website.
Pencarian ini terdiri atas 4 langkah:

1. Orientasi
2. Keputusan rute
3. Monitoring rute
4. Pengenalan tujuan

Rancangan navigasi website

1. Pertolongan navigasi website
   1. Untuk membantu navigasi
      • Sediakan peta atau overview hirarki menu
      • Sediakan clickability cues
      • Sediakan pilihan – pilihan yang akan ada di level selanjutnya
      • Ganti warna sebuah link yang sudah diklik
   2. Sediakan umpan balik berkaitan dengan lokasi saat ini
      • Sediakan sejarah (history) navigasi
      • Cocokkan antara teks atau label sebuah link dengan judul halaman tujuan
2. Organisasi website
   1. Bagi isi menjadi fragmen – fragmen lojik
      • Hirarki generality atau kepentingan
      • Struktur relasi antar fragmen
3. Rancangan halaman navigasi
   1. Gunakan tipe menu yang cocok
      • Menu sekuensial untuk task yang sederhana
      • Menu simultan untuk task yang dapat balik
   2. Jaga halaman navigasi agar tetap pendek
   3. Batasi teks prosa
   4. Scrolling
      • Hindari scrolling halaman navigasi
      • Batasi scrolling untuk melihat semua link pada halaman daftar isi
      • Hindari horizontal scrolling