Human-Computer
Interaction — Midterm

Apa Itu Desain Interaksi?

Desain interaksi (Interaction Design / IxD) adalah disiplin yang berfokus pada perancangan produk dan layanan interaktif yang memfasilitasi interaksi antara manusia dengan sistem — bukan hanya soal tampilan, tetapi soal perilaku dan pengalaman. John Kolko mendefinisikannya sebagai "penciptaan dialog antara seseorang dan produk, layanan, atau sistem." IxD memadukan prinsip teknik, psikologi, dan desain agar sistem terasa intuitif, efisien, dan menyenangkan.

Definisi Kunci & Terminologi

Istilah	Definisi & Konteks
Usability core	Kemudahan sistem dipelajari, digunakan, dan diingat; mencakup efektivitas, efisiensi, dan kepuasan.
User Experience (UX)	Pengalaman keseluruhan pengguna sebelum, selama, dan sesudah interaksi — meliputi emosi, estetika, dan nilai personal. Lebih luas dari usability.
Human-Computer Interaction (HCI)	Studi ilmiah tentang bagaimana manusia berinteraksi dengan komputer. Multidisiplin: psikologi, ilmu komputer, desain.
Affordance	Hubungan antara properti objek dan kemampuan pengguna — apa yang objek itu bisa dilakukan. Bukan properti objek semata, melainkan relasional.
Signifier	Sinyal yang mengomunikasikan di mana dan bagaimana berinteraksi. Bisa disengaja (label, handle) atau tidak (pola aus). Signifier lebih penting dari affordance dalam desain karena visibilitas.
Feedback	Respons sistem terhadap aksi pengguna — konfirmasi bahwa aksi telah dilakukan dan apa hasilnya.
Constraint	Pembatas yang memandu pengguna — membatasi tindakan yang bisa dilakukan sehingga mengurangi error.
Mapping	Hubungan antara kontrol dan efeknya; good mapping = intuitif (misalnya, stir mobil diputar ke kiri → mobil belok kiri).

Dimensi Usability (ISO 9241)

Proses Desain Interaksi (Double Diamond)

Desain interaksi mengikuti proses iteratif. Pola yang paling umum adalah Double Diamond yang membagi proses menjadi empat fase divergen-konvergen:

Human Error & Toleransi

Sistem yang baik tidak mengandalkan pengguna untuk tidak membuat kesalahan — melainkan dirancang untuk meminimalkan dan mentoleransi error. Ada dua jenis error utama:

• Slip (slips): Aksi yang tidak disengaja — tahu apa yang harus dilakukan tapi salah melakukannya (misalnya typo). Solusi: better affordance, confirmation steps.
• Mistake: Keputusan yang salah — model mental yang keliru sehingga tindakan yang dipilih adalah tindakan yang salah. Solusi: feedback yang informatif, clear mapping.

Problem Space vs. Solution Space

Konseptualisasi interaksi membantu kita memberi struktur pada pengalaman, memisahkan keluhan pengguna dari diagnosis yang tepat, dan menjelaskan kegagalan tanpa menyalahkan pengguna. Fokusnya adalah memahami masalah (problem space) sebelum merancang solusi (solution space).

Gulf of Execution & Gulf of Evaluation (Norman)

Norman mengidentifikasi dua "jurang" yang terjadi antara pengguna dan sistem. Kedua jurang ini harus dijembatani agar interaksi terasa mulus:

Tiga Model dalam Desain

Model	Apa itu?	Contoh
System Model desainer	Cara sistem sebenarnya bekerja — implementasi aktual di balik layar.	Algoritma pemrosesan di server
System Image interface	Apa yang ditampilkan sistem kepada pengguna — UI, dokumentasi, label.	Tombol "Kirim", progress bar
Mental Model pengguna	Gambaran pengguna tentang cara sistem bekerja — mungkin tidak akurat!	"Email saya langsung terkirim saat klik kirim"

Pengguna tidak pernah melihat system model — mereka selalu bertindak melalui system image sambil membawa mental model mereka sendiri. Tugas desainer: membuat system image yang menjembatani gap antara system model dan mental model pengguna.

Paradigma Interaksi

• Command-line Interface (CLI): Teks perintah — efisien untuk expert, kurva belajar tinggi.
• Graphical User Interface (GUI): WIMP — Windows, Icons, Menus, Pointer. Paradigma dominan dekade 1980-2010.
• Direct Manipulation: Aksi langsung pada representasi visual objek (drag-drop, resize). Continuous feedback.
• Tangible UI: Interaksi dengan objek fisik yang merepresentasikan data digital.
• Natural User Interface (NUI): Touch, gesture, voice — interaksi seperti dunia nyata.
• Conversational UI: Chatbot, asisten AI — dialog berbasis bahasa alami.

Interaction Types

Mengapa User Research?

User research membantu kita: menginspirasi desain (apa yang benar-benar dibutuhkan pengguna?), mengevaluasi solusi (apakah desain ini mudah digunakan?), dan mengukur dampak (seberapa besar perbaikan yang dicapai?). Tanpa riset, desainer cenderung merancang berdasarkan asumsi diri sendiri — yang sering kali keliru.

Landscape Metode Riset Pengguna

NN/g memetakan metode riset berdasarkan dua dimensi utama:

Metode Pengumpulan Data — Detail

Metode	Tipe	Kapan digunakan	Kelemahan
Interviews	Kualitatif, Attitudinal	Awal proses; memahami motivasi, konteks, dan opini mendalam.	Time-consuming, data sulit dikuantifikasi.
Surveys	Kuantitatif, Attitudinal	Validasi temuan, mengukur opini skala besar.	Respons bias, tidak bisa menggali 'mengapa'.
Usability Testing	Behavioral, Scripted	Evaluasi prototipe/produk dengan task tertentu.	Lab setting ≠ real context.
Field Studies / Contextual Inquiry	Behavioral, Natural	Observasi pengguna di konteks nyata mereka.	Mahal, membutuhkan waktu lama.
A/B Testing	Behavioral, Kuantitatif	Membandingkan dua versi desain secara statistik.	Butuh traffic besar; tidak menjelaskan 'mengapa'.
Card Sorting	Attitudinal, Kualitatif/Kuantitatif	Merancang information architecture / navigasi.	Tidak selalu mencerminkan behavior nyata.
Eye-tracking	Behavioral, Kuantitatif	Memahami visual attention dan gaze patterns.	Butuh alat khusus; lab setting.

Persona

Persona adalah deskripsi kaya pengguna tipikal yang disintesis dari riset nyata — bukan karakter fiktif sembarangan. Persona membantu tim tetap fokus pada pengguna nyata saat membuat keputusan desain.

Cara membuat persona yang baik: (1) Wawancara/observasi sejumlah pengguna nyata → (2) Temukan pola dari respons → (3) Buat archetypical models → (4) Beri nama, foto, dan narrative yang menghidupkan persona → (5) Bagikan ke seluruh tim.

Scenario & Use Case

Scenario adalah narasi singkat yang menggambarkan bagaimana pengguna menggunakan produk dalam konteks nyata. Use case lebih formal: mendefinisikan aktor, tujuan, dan langkah-langkah interaksi secara sistematis. Keduanya membantu tim memvalidasi apakah desain menjawab kebutuhan pengguna.

Proses Kognitif Utama

Kognisi adalah segala aktivitas mental yang terlibat saat manusia berinteraksi dengan sistem. Ada 6 proses utama yang relevan untuk HCI:

Memory: Working Memory vs. Long-Term Memory

Tipe Memori	Kapasitas	Durasi	Implikasi Desain
Sensory Memory	Besar	~0.25–1 detik	First impression penting; pergerakan dan warna menarik perhatian
Working Memory	7 ± 2 chunks	~20 detik tanpa rehearsal	Jangan minta pengguna mengingat banyak hal; gunakan external representation
Long-Term Memory	Sangat besar	Permanen (dengan retrieval)	Manfaatkan mental models; consistent UI agar pengguna transfer pengetahuan

Cognitive Frameworks

Framework kognitif digunakan untuk menjelaskan dan memprediksi perilaku pengguna di interface:

• Mental Models: Representasi internal pengguna tentang cara sistem bekerja. Makin akurat mental model pengguna → makin sedikit error. Desainer harus membuat system image yang membangun mental model yang benar.
• Gulfs of Execution & Evaluation: Lihat Part 2. Dua jurang antara pengguna dan sistem yang harus dijembatani.
• Distributed Cognition: Kognisi tidak hanya ada di kepala — tersebar ke artefak, lingkungan, dan orang lain. Desain harus mendukung external cognition (notes, checklists, visual representations).
• External Cognition: Menggunakan dunia luar sebagai perpanjangan memori — sticky notes, to-do list, calendar. Interface yang baik menyediakan scaffolding ini.
• Embodied Cognition: Tubuh dan aksi fisik berperan dalam kognisi. Gesture-based interface dan tangible UI mengeksploitasi ini.

Prinsip Gestalt untuk UI

Mengapa Emosi Penting dalam Desain?

Penelitian Don Norman menunjukkan bahwa emosi mempengaruhi kognisi secara langsung. Pengguna yang merasa positif lebih toleran terhadap kekurangan UI (misalnya loading lambat) selama hasil akhirnya memuaskan. Sebaliknya, emosi negatif (frustrasi, cemas) mempersempit kemampuan berpikir dan menurunkan toleransi terhadap error.

Ortony et al. (2005) — Model Tiga Level Emotional Design

Expressive & Emotional Interface

Interface ekspresif menggunakan warna, ikon, suara, animasi, dan elemen grafis untuk menyampaikan state emosional dan mempengaruhi perasaan pengguna. Namun hati-hati: terlalu banyak elemen ekspresif bisa terasa intrusif dan menjengkelkan. Keseimbangan adalah kunci.

Affective Computing & Emotional AI

Affective computing (Picard, 1998) adalah bidang yang meneliti bagaimana komputer dapat mengenali dan mengekspresikan emosi. Teknologinya mencakup: pengukuran GSR (Galvanic Skin Response), analisis ekspresi wajah, gesture recognition, dan voice sentiment analysis. Aplikasinya berkembang pesat di healthcare, education, dan customer service.

Persuasive Technology

Teknologi persuasif dirancang untuk mengubah perilaku atau sikap pengguna melalui desain. Contoh: streak di Duolingo (gamification), social proof di e-commerce ("1.234 orang melihat ini"), progress bars. Pertimbangan etis penting: kapan persuasi menjadi manipulasi?

Anthropomorphism dalam Desain

Manusia cenderung memberikan sifat manusia pada benda — ini disebut antropomorfisme. Dalam desain: avatar, chatbot dengan nama manusia, error messages yang empatik ("Ups! Kami tidak bisa menemukan halaman itu"). Hasilnya pengguna lebih engaged, tetapi juga bisa menciptakan ekspektasi yang tidak realistis.

Social Interaction dalam HCI

Kita hidup, bekerja, bermain, dan bersosialisasi bersama. Teknologi sosial dikembangkan agar kita tetap bisa berinteraksi sosial saat berjauhan secara fisik. Namun tidak semua teknologi mendukung interaksi sosial yang sehat — beberapa justru berdampak negatif pada percakapan sehari-hari (Turkle, 2015: efek "phones on the table").

Face-to-Face Communication

Komunikasi tatap muka melibatkan dua lapisan yang saling melengkapi:

• Verbal: Konten percakapan — apa yang dikatakan. Percakapan adalah aktivitas yang sangat terkoordinasi dengan turn-taking mechanisms: nods, eye contact, pauses.
• Non-verbal: Gestur, mimik, kontak mata, postur, jarak fisik (proxemics). Memberi nuance dan konteks pada komunikasi verbal — sering kali lebih ekspresif daripada kata-kata.

Koordinasi dalam Kerja Kelompok

Saat sekelompok orang bekerja bersama, mereka membutuhkan mekanisme koordinasi:

Mekanisme	Contoh	Teknologi Pendukung
Verbal Communication	Rapat, diskusi, briefing	Video call, voice chat, phone
Non-verbal Communication	Nods, winks, hand signals	Emoji, reactions, virtual avatars
Schedules & Rules	Agenda rapat, SOP, deadline	Calendar apps, project management tools
Shared Representations	Whiteboard, dokumen bersama	Google Docs, Figma, Miro

CSCW — Computer-Supported Cooperative Work

CSCW adalah studi tentang bagaimana teknologi dapat mendukung kerja kolaboratif. Matrik CSCW (time-space) mengklasifikasikan teknologi berdasarkan kapan dan di mana kolaborasi terjadi:

Social Presence & Awareness

Social presence adalah perasaan bahwa orang lain "ada" meskipun berinteraksi secara digital. Teknologi seperti video call memiliki social presence lebih tinggi dari email. Desainer harus mempertimbangkan: apakah medium yang dipilih memberikan cukup social presence untuk tugas yang ingin diselesaikan?

Awareness dalam sistem kolaboratif: siapa yang sedang online? siapa yang sedang mengedit dokumen yang sama? fitur "typing..." indicator, presence indicators (dot hijau/merah).

Sharable Interfaces

Interface yang dirancang untuk digunakan bersama-sama secara fisik (mis. interactive tabletops) menunjukkan: partisipasi lebih merata, lebih natural saat duduk melingkar dibanding berdiri di depan layar, lebih nyaman untuk kolaborasi informal.

Apa Itu UI Guidelines?

UI Guidelines adalah dokumen yang merangkum prinsip, pola, dan aturan desain antarmuka yang telah divalidasi melalui riset dan praktik industri. Mereka bukan hukum wajib, melainkan "hipotesis teruji": dalam situasi X, pendekatan Y berhasil berdasarkan riset Z. Tugas desainer adalah menilai apakah situasinya cocok dengan X, bukan sekadar mengikuti aturan secara buta.

Major UI Guideline Systems

Guideline System	Platform / Audience	Karakteristik Kunci
Apple HIG	iOS, macOS, watchOS, tvOS	Metaphors from real world; direct manipulation; see-and-point; consistency; user control
Material Design	Android, Web (Google)	Material metaphor (surfaces & shadows); motion as communication; bold colors
Fluent UI	Windows, Microsoft apps	Light, depth, motion; adaptive across devices; accessibility-first
USWDS	U.S. Government web services	Accessibility untuk semua; operasionalisasi riset kognitif (Miller's Law → component selection)
Carbon Design System	Enterprise/IBM products	Complex data-heavy interfaces; dark theme; developer-oriented

Apple HIG — Lima Prinsip Dasar

• Metaphors from the real world: Gunakan metafora yang pengguna sudah pahami dari dunia fisik (folder, trash, book).
• Direct manipulation: Pengguna berinteraksi langsung dengan objek di layar, bukan melalui intermediary.
• See-and-point interaction: Pengguna melihat objek dan menunjuknya — recognition over recall (lihat H6).
• Consistency: Gunakan elemen dan behavior yang konsisten agar pengguna bisa transfer pengetahuan.
• User control: Pengguna yang memimpin interaksi, bukan sistem.

USWDS — Component Decision Logic (Miller's Law in Action)

Lyft Decision Tree — "Dropdown as Last Resort"

Lyft mendokumentasikan decision tree untuk pemilihan komponen form:

• Tabs: Expose semua opsi → mendukung recognition
• Toggle/Switches: Feedback langsung → direct manipulation
• Radio buttons: Opsi terlihat jelas, pilihan mutually exclusive
• Dropdown: Sembunyikan opsi → meningkatkan cognitive load — gunakan hanya sebagai last resort

Prinsip-Prinsip Mix (Universal)

Memilih Guideline Secara Kritis — 4 Faktor

Faktor	Pertanyaan yang Harus Dijawab
Platform Conventions	iOS/macOS? Android? Web? Pengguna sudah terbiasa dengan konvensi platform apa?
User Expertise	Novice (perlu forgiveness)? Expert (perlu efficiency)? Both (perlu customization)?
Context & Domain	Government? E-commerce? Enterprise? Konteks budaya (Rakuten vs. Apple HIG)?
Accessibility	Apakah perlu WCAG compliance? Siapa pengguna dengan kebutuhan khusus?

1. Minimize Cognitive Load

Cognitive load di mobile lebih tinggi karena pengguna sering menggunakan aplikasi sambil melakukan aktivitas lain. Strategi:

• Offloading: Simpan informasi di sistem, bukan di memori pengguna (auto-fill, smart suggestions).
• Chunking: Kelompokkan informasi terkait agar lebih mudah diproses.
• Progressive disclosure: Tampilkan hanya informasi yang relevan saat itu, sembunyikan detail sampai dibutuhkan.
• One primary action per screen: Setiap layar harus memiliki satu tujuan yang jelas.

2. Decluttering, Visual Weighting & Consistency

• Decluttering: Hapus semua elemen yang tidak menambah nilai. Whitespace adalah desain, bukan kekosongan.
• Visual hierarchy: Gunakan ukuran, berat, dan kontras warna untuk menunjukkan hierarki informasi. Yang paling penting harus paling menonjol.
• Consistency: Gunakan design tokens — warna, tipografi, spacing yang sama di seluruh aplikasi. Pengguna membangun ekspektasi berdasarkan konsistensi.

3. Optimasi Konten untuk Mobile

• Gunakan font yang cukup besar — minimum 16px untuk body text (terlebih dengan variasi kondisi cahaya outdoor).
• Line length: 45–75 karakter per baris untuk kenyamanan membaca.
• Image optimization: Kompres, gunakan lazy loading, sediakan placeholder.
• Content-first: Pengguna datang untuk konten, bukan chrome (navigation, headers, footers). Maksimalkan area konten.

4. Design for Touch — Fitt's Law

5. Optimasi untuk Mobile Context

• Performance: Target load time < 3 detik. 53% pengguna meninggalkan halaman yang load lebih dari 3 detik.
• Offline support: Graceful degradation saat koneksi hilang — cache data penting.
• Battery-aware: Hindari animasi berlebihan dan proses background yang tidak perlu.
• Adaptive layouts: Desain untuk berbagai ukuran layar dan orientasi (portrait/landscape).
• Gesture support: Swipe, pinch-to-zoom, pull-to-refresh — tapi selalu sediakan alternative untuk pengguna yang tidak familiar.

6. Humanize Digital Experience

UX bukan hanya tentang usability — ini tentang perasaan. Cara menghuminaisasi pengalaman digital:

• Personalized Experience: Gunakan nama pengguna, tampilkan konten yang relevan, simpan preferensi.
• Delightful Animation: Micro-interactions yang merespons aksi pengguna — confetti saat sukses, shake saat error, bounce saat item ditambah ke keranjang.
• Empatik copy: Hindari error messages yang dingin ("Error 404"). Ganti dengan bahasa manusiawi ("Ups! Halaman ini sedang bersembunyi. Coba kembali nanti.").
• Gamification (jika sesuai): Progress bars, badges, streaks untuk memotivasi pengguna menyelesaikan task.

Navigation Patterns Mobile

Heuristics Quick-Fire Table

#	Heuristic	Satu Kalimat	Contoh Violasi
H1	Visibility of Status	Selalu beri tahu pengguna apa yang sedang terjadi.	Loading tanpa progress indicator
H2	Real World Match	Gunakan bahasa dan konsep yang familiar bagi pengguna.	Error code teknis ditampilkan ke end user
H3	User Control & Freedom	Selalu ada jalan keluar / undo.	Tidak ada tombol cancel saat menghapus file
H4	Consistency & Standards	Hal yang sama harus terlihat dan berperilaku sama.	Tombol "Submit" di satu form, "Send" di form lain
H5	Error Prevention	Rancang agar error tidak terjadi.	Tidak ada konfirmasi sebelum operasi destruktif
H6	Recognition > Recall	Tampilkan pilihan; jangan minta pengguna mengingat.	Pengguna harus hafal command untuk CLI tanpa help
H7	Flexibility & Efficiency	Sediakan shortcut untuk power users.	Tidak ada keyboard shortcut untuk frequent actions
H8	Aesthetic & Minimal	Hapus info yang tidak relevan saat itu.	Form panjang dengan banyak field opsional terlihat sekaligus
H9	Help Recover Errors	Pesan error harus plaintext, spesifik, dan konstruktif.	"An error occurred" tanpa penjelasan
H10	Help & Documentation	Sediakan help yang mudah dicari, task-focused.	Manual 200 halaman tanpa search