Dashboard / HCI / 6 Topik Materi Utama UTS
DIKTAT KOMPREHENSIF UTS SEMESTER 5

Human-Computer Interaction

Diktat teori mendalam dan komprehensif untuk persiapan ujian UTS Computer Science / Cyber Security. Mencakup fondasi User-Centered Design (UCD), prinsip Donald Norman, model mental, hukum kognitif Fitts & Hick, kerangka CSCW, psikologi emosional, dan evolusi ragam antarmuka modern.

1. Interaction Design: Prinsip, Goals & UCD

Interaction Design (IxD) adalah perancangan produk digital interaktif yang mendukung cara orang berkomunikasi dan berinteraksi dalam kehidupan sehari-hari maupun profesional. Fokus utamanya adalah menciptakan pengalaman yang bermakna dan berdaya guna tinggi bagi pengguna.

⚖️ Usability Goals (Tujuan Kegunaan Objektif)

Kriteria performa kuantitatif yang harus dipenuhi antarmuka:

  • Effectiveness: Seberapa baik produk dapat menyelesaikan tugas pengguna secara tuntas dan akurat.
  • Efficiency: Seberapa cepat pengguna dapat menyelesaikan pekerjaannya setelah menguasai alur sistem (minimal klik/langkah).
  • Safety: Melindungi pengguna dari bahaya kesalahan fatal (fungsi konfirmasi, undo, recovery data).
  • Utility: Apakah sistem menyediakan serangkaian fungsi yang memang dibutuhkan untuk tugas pengguna.
  • Learnability: Seberapa mudah bagi pemula untuk mempelajari operasi dasar sistem sejak awal interaksi.
  • Memorability: Seberapa mudah pengguna mengingat kembali cara mengoperasikan sistem setelah lama tidak menggunakannya.

✨ User Experience Goals (Tujuan Pengalaman Subjektif)

Perasaan afektif dan kesan emosional yang dialami pengguna:

  • Desirable (Positif): Memuaskan (satisfying), menyenangkan (enjoyable), seru (fun), menarik secara estetika (engaging), memotivasi (motivating), dan menantang secara kognitif (rewarding).
  • Undesirable (Harus Dihindari): Menjengkelkan (frustrating), membosankan (dull), mempermalukan (patronizing), membuat cemas (anxiety-inducing), dan membingungkan (confusing).

Prinsip Desain Fundamental Donald Norman

Donald Norman dalam bukunya The Design of Everyday Things merumuskan 6 prinsip esensial dalam rancang bangun antarmuka:

Prinsip Definisi Contoh Penerapan Nyata Efek Jika Dilanggar
1. Visibility Status fungsionalitas dan opsi kontrol harus dapat dilihat secara jelas dan eksplisit oleh pengguna. Menu utama terlihat jelas di navigasi, bukan tersembunyi tanpa indikator. Pengguna kebingungan mencari letak fitur ("Out of sight, out of mind").
2. Feedback Mengirimkan informasi balik kepada pengguna tentang aksi apa yang baru saja dilakukan dan apa hasilnya. Efek hover tombol, status spinner saat download, suara 'klik', toast notification sukses. Pengguna menekan tombol berulang kali karena menduga sistem macet (double submit).
3. Constraints Membatasi opsi interaksi yang mungkin dilakukan pengguna untuk mencegah terjadinya kesalahan langkah. Tombol 'Submit' dinonaktifkan (disabled) sampai semua form wajib diisi valid; date picker memblokir tanggal masa lalu. Terjadi runtime error sistem akibat input format tanggal atau karakter yang salah.
4. Consistency Menggunakan operasi dan elemen desain yang serupa untuk aksi-aksi yang setara di seluruh sistem. Warna tombol merah selalu berarti 'Delete/Cancel' di semua modul; shortcut Ctrl+S selalu 'Save'. Kurva belajar menjadi curam; pengguna salah mengira akibat fungsi yang bergeser.
5. Affordance Atribut mendasar suatu benda yang mengisyaratkan bagaimana benda tersebut dapat dioperasikan. Bentuk tombol fisik yang timbul mengundang jari untuk ditekan; kenop bulat mengundang untuk diputar. Objek tampak datar seperti teks biasa sehingga tidak disadari bisa diklik (flat design trap).
6. Signifiers Sinyal perseptual eksplisit yang memberitahukan pengguna *di mana* dan *bagaimana* suatu aksi harus dieksekusi. Ikon garis tiga hamburger, panah dropdown pada select menu, label teks "Klik Disini", garis bawah hyperlink. Pengguna ragu-ragu menentukan elemen mana yang interaktif.

💡 Siklus User-Centered Design (UCD):

Pendekatan UCD memastikan produk dirancang dengan menempatkan kebutuhan, kebiasaan, dan batasan pengguna sebagai titik tumpu utama melalui iterasi berulang:

  1. Understand Context of Use: Mengidentifikasi profil pengguna, tugas yang dikerjakan, dan lingkungan eksekusinya.
  2. Specify User Requirements: Menetapkan sasaran fungsional dan usability yang dapat diukur.
  3. Design Solutions: Membuat wireframe, sketsa konseptual, dan prototipe interaktif (low-fidelity hingga high-fidelity).
  4. Evaluate Against Requirements: Menguji prototipe kepada pengguna riil melalui usability testing, wawancara, dan evaluasi heuristik.

2. Conceptualizing Interaction: Model Konseptual & Paradigma

Sebelum mulai menggambar tombol visual atau menulis baris kode CSS/HTML, desainer harus merumuskan Conceptual Model — deskripsi abstraksi tingkat tinggi tentang bagaimana suatu sistem diorganisasikan dan dioperasikan.

Model Konseptual vs Mental Model

  • Design Model (Conceptual Model): Model sistem yang dirancang oleh desainer perangkat lunak secara sadar dan terstruktur.
  • User's Mental Model: Representasi psikologis dalam pikiran pengguna tentang cara kerja sistem tersebut, terbentuk dari pengalaman masa lalu dan analogi dunia nyata.
  • System Image: Wujud fisik aktual dari sistem (UI, pesan error, dokumentasi, manual). Jika System Image tidak mencerminkan Design Model secara jernih, User's Mental Model akan cacat dan berujung frustrasi.

Metafora Antarmuka (Interface Metaphors)

Meminjam pemahaman pengguna dari dunia nyata untuk memudahkan pemahaman terhadap konsep komputasi abstrak:

  • Desktop Metaphor: File disimpan dalam Folder, berkas yang tidak terpakai dibuang ke Tempat Sampah (Recycle Bin).
  • Shopping Cart: Memasukkan belanjaan ke keranjang sebelum menuju kasir (Checkout) di platform e-commerce.
  • Tabbed Notebook: Tab navigasi pada web browser dan formulir dialog meniru pembatas lembar binder fisik.

4 Tipe Interaksi Utama (Interaction Types)

1. Instructing (Memberi Perintah)

Pengguna mengeluarkan serangkaian perintah langsung ke sistem melalui tombol, shortcut, atau CLI. Cocok untuk operasi cepat berulang (misal: Ctrl+C, menekan tombol Print, mengetik perintah Shell).

2. Conversing (Bercakap-cakap)

Pengguna berdialog dua arah dengan sistem layaknya bercakap dengan manusia (Natural Language). Contoh: Chatbot layanan pelanggan, ChatGPT, asisten suara Apple Siri / Google Assistant.

3. Manipulating (Manipulasi Langsung)

Pengguna memanipulasi objek virtual secara spasial melalui aksi fisik (klik, drag-and-drop, zoom cubit). Memberikan umpan balik langsung yang instan dan reversibel (mudah di-undo). Contoh: Menggeser slider, drag folder ke folder lain.

4. Exploring (Menjelajah)

Pengguna bergerak menjelajahi lingkungan virtual 3D, sensor lingkungan, atau peta interaktif untuk menemukan informasi secara organik. Contoh: Google Street View, game 3D open-world, virtual showroom metaverse.

Gulf of Execution vs Gulf of Evaluation (Donald Norman)

Gulf of Execution: Kesenjangan antara niat pengguna (apa yang ingin dilakukan pengguna) dan tindakan fisik yang diizinkan oleh sistem (bagaimana pengguna melakukannya). Tugas desainer adalah memperkecil jurang ini agar pengguna langsung tahu apa yang harus ditekan.
Gulf of Evaluation: Kesenjangan antara status fisik sistem dan kemampuan pengguna untuk menginterpretasikan apakah tujuannya telah tercapai. Tugas desainer adalah memberikan umpan balik status yang transparan dan dapat dipahami secara instan.

3. Cognitive Aspects: Memori, Fitts' Law & Hick's Law

Memahami kapabilitas dan batasan kognitif otak manusia sangat vital dalam perancangan antarmuka agar sistem tidak membebani kapasitas pemrosesan pengguna (Cognitive Overload).

Kapasitas Memori & Beban Kognitif

  • Sensory Memory: Menyimpan impresi sensoris beberapa milidetik.
  • Working Memory (Short-Term): Menyimpan informasi aktif secara temporer. George Miller (1956) mencetuskan kaidah Miller's Magic Number 7 ± 2 (manusia hanya mampu mengingat 5 hingga 9 item sekaligus). Dalam UI modern direkomendasikan pengelompokan (Chunking).
  • Long-Term Memory: Penyimpanan jangka panjang tak terbatas, namun proses retrieval (pemanggilan ulang) membutuhkan asosiasi bermakna.
  • Recognition vs Recall: Manusia jauh lebih unggul mengenali sesuatu (Recognition) daripada mengingat dari ingatan kosong (Recall). Desain UI modern selalu menyajikan menu pilihan visual, bukan menyuruh pengguna mengetik dari ingatan!

Attention & Perception

  • Selective Attention: Kemampuan memfokuskan panca indera pada stimulus tertentu seraya mengabaikan stimulus lain.
  • Change Blindness: Ketidakmampuan pengguna menyadari perubahan visual yang terjadi jika tidak diberi isyarat gerak atau kontras yang cukup.
  • Gestalt Principles: Kecenderungan otak mengelompokkan elemen secara otomatis berdasarkan kedekatan jarak (Proximity), kemiripan rupa (Similarity), penutupan bidang (Closure), dan keberlanjutan garis (Continuity).

Hukum Kognitif Kuantitatif (Wajib UTS!)

📐 Fitts' Law (Movement Time)

RUMUS UTS

Memodelkan waktu yang dibutuhkan tangan/kursor untuk berpindah ke target tertentu: 

MT = a + b * log2(2D / W)
atau
MT = a + b * log2(1 + D / W)  [Formulasi Shannon]
  • MT: Movement Time (waktu gerak yang dibutuhkan).
  • D: Distance (jarak dari posisi kursor awal ke target).
  • W: Width (lebar dimensi target sepanjang sumbu gerak).
  • Index of Difficulty (ID): log2(2D / W) diukur dalam satuan bits.
  • Implikasi Desain: Buat tombol aksi utama berukuran besar (W diperbesar) dan dekatkan dengan posisi kursor pengguna (D diperkecil). Sudut dan tepi layar memiliki lebar target virtual tak terbatas (infinite width) karena kursor terhenti secara fisik!

⏱️ Hick's Law (Hick-Hyman Law)

RUMUS UTS

Memodelkan waktu reaksi yang dibutuhkan manusia untuk mengambil keputusan di antara sejumlah pilihan: 

RT = b * log2(n + 1)
  • RT: Reaction Time (waktu respon memilih).
  • n: Jumlah opsi alternatif yang setara.
  • b: Konstanta kognitif empiris (kecepatan pemrosesan otak).
  • Implikasi Desain: Mengurangi jumlah opsi yang ditampilkan sekaligus mempercepat pengambilan keputusan secara drastis. Gunakan teknik Progressive Disclosure, kategorisasi bertingkat, dan opsi default yang cerdas untuk mencegah kelumpuhan analisis pengguna.

4. Social Interaction: CSCW & Komunitas Online

Komputasi saat ini bukan lagi sekadar interaksi satu orang dengan satu mesin (single-user), melainkan media yang memfasilitasi komunikasi dan kolaborasi ribuan orang secara serentak.

Computer-Supported Cooperative Work (CSCW) Matrix

Diusulkan oleh Ellis, Gibbs, dan Rein (1991), taksonomi ini membagi kolaborasi manusia ke dalam matriks Waktu-Tempat (Time-Space Matrix):

Dimensi Kolaborasi Same Time (Synchronous) Different Time (Asynchronous)
Same Place (Colocated) Interaksi Tatap Muka:
Smart whiteboard (Google Jamboard), presentasi ruang rapat, layar sentuh meja bersama. 		Interaksi Asinkron Lokal:
Catatan sticky notes fisik di dinding lab, papan pengumuman kantor, terminal shift kerja bergilir.
Different Place (Remote) Kolaborasi Jarak Jauh Real-Time:
Video conference (Zoom, Teams, Google Meet), co-editing dokumen live (Google Docs, Figma live cursor), panggilan suara Discord. 		Komunikasi Terdistribusi Ditunda:
Email korporat, forum diskusi (Reddit, StackOverflow), pull request GitHub, ticketing Jira.

Konsep Kunci Kolaborasi Sosial

  • Social Presence: Derajat kesadaran bahwa partisipan lain hadir secara nyata dalam interaksi digital.
  • Telepresence: Sensasi psikologis pengguna merasa benar-benar berada di lokasi fisik lain melalui manipulasi sensoris.
  • Co-presence: Kesadaran timbal balik bahwa dua orang atau lebih sedang berada di satu ruang virtual bersama-sama.
  • Awareness Mechanisms: Mengetahui apa yang sedang dikerjakan rekan tim (misal: penunjuk kursor bernama di Figma, status "User is typing..." di WhatsApp).

Dinamika Komunitas Online

  • Social Loafing (Kemalasan Sosial): Kecenderungan seseorang mengerahkan usaha lebih sedikit saat bekerja dalam kelompok besar dibanding sendiri.
  • Online Disinhibition Effect: Orang cenderung berbicara lebih bebas, terkadang kasar atau agresif (toxic/flaming), karena merasa terlindung oleh tabir anonimitas digital.
  • Moderasi & Reputasi: Pentingnya sistem karma, lencana (badges), dan aturan perilaku untuk menjaga etika percakapan komunitas.

5. Emotional Interaction: Teori Don Norman & Affective Computing

Emosi manusia bukan sekadar perasaan acak, melainkan sistem pemrosesan informasi biologis yang menentukan bagaimana seseorang mengambil keputusan, memecahkan masalah, dan bereaksi terhadap situasi.

3 Tingkatan Desain Emosional (Donald Norman - Emotional Design)

Donald Norman mengidentifikasi bahwa otak manusia memproses pengalaman melalui 3 tingkat kognisi yang saling berkelindan:

1. Visceral Level

REAKSI OTOMATIS BAWAH SADAR

Tingkat pemrosesan biologis paling dasar dan instan. Bereaksi terhadap aspek visual sensoris (tampilan luar, bentuk, warna, tekstur, suara awal, keindahan simetri).

Contoh UI: Desain antarmuka modern yang memukau (dark theme, animasi glowing neon, tipografi tajam) memicu hormon dopamin seketika saat landing page pertama kali dimuat.

2. Behavioral Level

PENGALAMAN FUNGSI & KEGUNAAN

Tingkat operasional praktis. Berkaitan erat dengan usability dan ergonomi: seberapa mudah produk dikendalikan, ketepatan fungsi, keandalan sistem, dan respon balik yang memuaskan.

Contoh UI: Tombol copy code yang menyalin teks secara instan dalam 1 klik tanpa lag, navigasi menu keyboard yang mulus, alur form pendaftaran yang ringkas tanpa hambatan.

3. Reflective Level

MAKNA, CITRA DIRI & MEMORI

Tingkat kognitif tertinggi yang melibatkan kesadaran penuh, rasionalisasi, interpretasi budaya, kebanggaan personal, status sosial, dan memori masa lalu.

Contoh UI: Menggunakan platform StudyHub SOC memberikan sensasi bahwa pengguna adalah analis keamanan siber profesional ("Elite Hacker Aesthetic"), membangun identitas dan kebanggaan diri.

Affective Computing & Antropomorfisme

Affective Computing: Cabang ilmu komputer (dipelopori oleh Rosalind Picard di MIT) yang mengembangkan sistem yang mampu mengenali, menafsirkan, dan mensimulasikan afeksi manusia (misal: analisis ekspresi wajah pengguna lewat webcam, deteksi emosi dari intonasi suara mikrofon).
Antropomorfisme: Kecenderungan manusia memproyeksikan sifat-sifat kemanusiaan (perasaan, niat, karakter) kepada benda mati atau program komputer. Contoh: Desain asisten pintar dengan avatar wajah atau karakter virtual (Duolingo Owl). Desainer harus berhati-hati agar tidak terjerembap ke dalam fenomena Uncanny Valley (rasa ngeri saat objek buatan tampak hampir menyerupai manusia asli tetapi tidak sempurna).

6. Interface Types: Dari CLI hingga BCI

Evolusi antarmuka manusia-komputer mencerminkan pergeseran dari interaksi mekanik kaku menuju interaksi alami tanpa batas fisik.

Tipe Interface Mekanisme Interaksi Kelebihan Utama Kelemahan / Limitasi Contoh Sistem
1. CLI (Command Line) Mengetik string teks instruksi secara manual ke konsol prompt. Sangat hemat memori/resource, eksekusi scripting otomasi cepat bagi pakar. Kurva belajar curam, menuntut beban ingatan memori tinggi (Recall murni). Bash shell, PowerShell, GDB, Vim.
2. GUI (Graphical) WIMP paradigm (Windows, Icons, Menus, Pointer) dimanipulasi dengan mouse/keyboard. Intuitif, mengandalkan Recognition (mudah dipelajari), visualisasi langsung. Beban memori grafik lebih tinggi, screen real estate terbatas pada layar kecil. Windows 11, macOS, desktop web apps.
3. NUI (Natural User Interface) Sentuhan multi-touch, gestur tangan di udara, pelacakan mata (eye tracking). Sangat alami tanpa alat bantu perantara, tidak perlu belajar mekanik mouse. Kelelahan otot (Gorilla Arm syndrome), ketiadaan umpan balik haptik fisik. iPad Pro, Microsoft Kinect, Apple Vision Pro.
4. VUI (Voice User Interface) Pemrosesan perintah lisan (Speech Recognition & Synthesizer). Hands-free dan eyes-free (dapat dioperasikan saat menyetir mobil), aksesibel bagi difabel. Rentan gangguan noise sekitar, minim privasi suara di tempat umum, tanpa visibilitas menu. Amazon Alexa, Google Assistant, Siri.
5. AR / VR (Mixed Reality) Imersi spasial 3D: menumpuk grafik virtual di dunia nyata (AR) atau menutup total penglihatan (VR). Sensasi imersi spasial 360 derajat yang realistis untuk simulasi medis, militer, dan pelatihan. Motion sickness (cybersickness), bobot headset berat, isolasi dari ruang nyata. Meta Quest 3, Microsoft HoloLens, Magic Leap.
6. Tangible & Wearables Benda fisik nyata berpasangan dengan komputasi digital; perangkat menempel di tubuh. Interaksi sentuhan taktil alami, pemantauan kesehatan biologis kontinu secara real-time. Keterbatasan daya baterai, ukuran layar mikro, masalah privasi data biometrik. Apple Watch, Oura Ring, papan balok interaktif MIT Tangible Media.
7. BCI (Brain-Computer Interface) Menangkap sinyal gelombang listrik saraf otak (EEG non-invasif atau mikroskop elektroda invasif). Membuka kemampuan komunikasi bagi penderita kelumpuhan motorik total (Locked-in Syndrome). Signal-to-noise ratio rendah, butuh kalibrasi pelatihan intensif, dilema etika neuro-privacy. Emotiv EEG, Neuralink, BrainGate.