Rangkuman Materi IF3151 IMK (CPMK1 Fokus)
1. Pengantar dan Tujuan Mata Kuliah
1.a Enam Tujuan Mata Kuliah (CPMK)
- Menjelaskan konsep penting, prinsip, dan aspek manusia dalam desain interaksi.
- Menyebutkan perbedaan isu desain dan riset terkait berbagai tipe interaksi dan antarmuka.
- Menjelaskan permasalahan usability dan UX dalam kehidupan sehari-hari.
- Membangun produk bermanfaat secara berkelompok dengan menerapkan konsep dan prinsip desain interaksi.
- Melaksanakan ujicoba usability dan evaluasi analitik secara berkelompok.
- Menyajikan ide desain secara lisan dan tertulis.
Bukan Tentang Apa Mata kuliah ini bukan tentang keterampilan desain grafis, penguasaan CSS/Figma, elemen estetika/dekoratif, atau creative freedom. Fokusnya adalah bagaimana sebuah desain bekerja, bukan sekadar bagaimana tampilannya.
1.b Apa Itu Desain?
Tiga pandangan kunci tentang desain yang sering dikutip:
- Steve Jobs menekankan bahwa desain bukan sekadar tampilan, melainkan cara kerja sesuatu.
- Charles Eames mendefinisikan desain sebagai rencana penataan elemen untuk mencapai tujuan tertentu.
- Buckminster Fuller berpendapat bahwa solusi yang benar-benar berhasil akan tampak indah, karena fokus utama desain adalah memecahkan masalah, bukan estetika semata.
2. Desain Interaksi dan Faktor Manusia
2.a Definisi Desain Interaksi
Desain interaksi adalah disiplin yang merancang produk dan layanan interaktif agar memfasilitasi interaksi antara manusia dan sistem. Fokusnya pada perilaku dan pengalaman, bukan hanya estetika, dengan memadukan prinsip teknik, psikologi, dan desain agar sistem terasa intuitif, efisien, dan menyenangkan.
Key Insight Interaction design is about enabling people, not just operating machines.
John Kolko mendefinisikan desain interaksi sebagai penciptaan dialog antara seseorang dengan produk, layanan, atau sistem, menekankan hubungan fisik dan emosional serta konteks penggunaan.
2.b Usability vs UX
| Aspek | Usability | UX |
|---|---|---|
| Fokus | Objektif, performance-oriented | Lebih luas: emosi, estetika, nilai pribadi |
| Cakupan | Effectiveness, efficiency, safety, utility, learnability, memorability | Seluruh perjalanan pengguna sebelum, selama, sesudah interaksi |
| Pengukuran | Seberapa cepat dan akurat goal tercapai | Seberapa capable dan confident pengguna merasa |
Usability goals (Effectiveness, Efficiency, Safety, Utility, Learnability, Memorability) bersifat objektif dan performance-oriented. UX mencakup aspek desirable (fun, satisfying, engaging) dan undesirable (boring, frustrating, gimmicky).
2.c Affordances dan Signifiers
Definisi Affordance adalah relasi antara properti objek dan kapabilitas pengguna (misalnya kursi memberi affordance untuk diduduki). Affordance bukan properti tunggal objek, melainkan relasional; sebuah kursi berat tidak memberi affordance “diangkat” bagi anak kecil.
Signifier adalah sinyal yang mengkomunikasikan di mana dan bagaimana harus bertindak, bisa disengaja (label, pegangan) atau tidak disengaja (bekas pakai, jejak kaki).
Key Insight Signifiers lebih penting daripada affordances dalam desain karena yang menentukan adalah visibilitas. Desain yang buruk adalah desain yang membutuhkan tanda seperti “PUSH” pada pintu karena affordance-nya tidak terlihat jelas.
2.d Mapping, Feedback, dan Constraints
- Mapping adalah relasi antara kontrol dan efeknya. Natural mapping mengikuti korespondensi spasial atau kultural; mapping yang buruk menyebabkan kebingungan, misalnya tombol kompor yang tidak selaras dengan posisi burner.
- Feedback adalah respons segera dan jelas terhadap aksi pengguna, harus informatif, tepat waktu, dan tidak berlebihan. Feedback yang buruk contohnya tombol lift yang tidak memberi sinyal sehingga orang menekan berulang kali; feedback berlebihan contohnya dishwasher yang berbunyi tengah malam.
- Constraint membatasi kemungkinan aksi (fisik, logis, kultural, semantik) untuk mencegah kesalahan, misalnya bentuk konektor USB Type A/B yang hanya bisa masuk satu arah.
2.e Conceptual Models
Conceptual model adalah penjelasan mental pengguna tentang cara kerja sesuatu, dibangun dari system image (apa yang dikomunikasikan produk melalui desain, manual, dst). Model yang baik menghasilkan penggunaan yang dapat diprediksi dan troubleshooting yang mudah; model yang buruk menghasilkan frustrasi, contohnya kulkas dengan dua kontrol saling tergantung berlabel “Freezer” dan “Fridge” yang membingungkan pengguna.
2.f Gestalt dan Antarmuka
Key Insight People see structure, not pixels. Struktur visual memandu pemahaman pengguna.
Prinsip Gestalt yang relevan untuk desain antarmuka:
- Similarity: elemen serupa dipersepsikan sebagai satu kelompok.
- Proximity: elemen yang berdekatan dipersepsikan sebagai satu kelompok.
- Closure: otak melengkapi bentuk yang tidak lengkap.
- Continuity: perhatian mengikuti garis yang halus.
Navigasi harus jelas dan konsisten, tata letak memanfaatkan grid, hierarki informasi dibangun melalui ukuran-warna-posisi, dan whitespace meningkatkan keterbacaan serta mengurangi beban kognitif (Krug).
2.g Model Mental, Kognisi, dan Dua Jurang (Gulfs)
Norman membedakan dua jenis kesulitan interaksi:
- Gulf of Execution: kesulitan mencari tahu bagaimana menggunakan sesuatu, dijembatani oleh signifiers, constraints, mappings, dan conceptual models.
- Gulf of Evaluation: kesulitan memahami apa yang terjadi setelah bertindak, dijembatani oleh feedback dan conceptual model yang baik.
2.h Fitts’s Law dan Hick’s Law
Definisi Fitts’s Law: waktu untuk mencapai target meningkat dengan jarak dan berkurang dengan ukuran target. Time (ms) = a + b log2(D/S + 1). Implikasi desain: buat target besar dan dekat, gunakan tepi layar untuk target “tak terbatas”, minimalkan perjalanan pointer.
Definisi Hick’s Law: semakin banyak dan kompleks pilihan, semakin lama waktu yang dibutuhkan untuk memutuskan. Time (ms) = a + b log2(n + 1). Implikasi desain: batasi jumlah opsi, pecah tugas kompleks, highlight opsi rekomendasi, gunakan progressive disclosure.
2.i Human-Centered Design (HCD) dan Double Diamond
Filosofi HCD: teknologi harus melayani manusia, bukan sebaliknya. Mindset shift dari “user error” menjadi “design failure”, dari menyalahkan orang menjadi memperbaiki sistem.
Double-Diamond Model (British Design Council) terdiri dari dua fase:
- First Diamond (Find the Right Problem): diverge untuk eksplorasi luas, converge untuk mendefinisikan masalah inti.
- Second Diamond (Find the Right Solution): diverge untuk ideation luas, converge untuk memilih dan menyempurnakan solusi terbaik.
Empat siklus iteratif HCD dalam double-diamond:
- Observation: studi orang dalam konteks alami (applied ethnography), fokus pada aktivitas bukan demografi.
- Idea Generation: brainstorming tanpa judgement, kuantitas sebelum kualitas.
- Prototyping: bangun mockup low-fidelity cepat, gunakan teknik Wizard of Oz untuk mensimulasikan sistem kompleks.
- Testing: amati pengguna target berinteraksi dengan prototype, gunakan pasangan (satu mengoperasikan, satu menyuarakan pikiran), 5 pengguna per iterasi biasanya cukup.
2.j Tasks vs Activities
Activity adalah goal level tinggi (misalnya “menikmati musik”), sedangkan task adalah aksi komponen (misalnya “membeli lagu”, “membuat playlist”). Desain yang baik mendukung seluruh activity, bukan hanya task terisolasi; kesuksesan iPod adalah contoh integrasi hardware, software, toko, dan ekosistem untuk mendukung satu activity utuh.
2.k Human Error dan Toleransi
Dua jenis error fundamental:
- Slips: aksi yang benar tetapi eksekusinya gagal, terjadi pada level bawah sadar (misalnya menuangkan susu ke kopi lalu memasukkan cangkir kopi ke kulkas).
- Mistakes: goal atau plan yang salah, terjadi pada level kognisi sadar (contoh: kasus Boeing 767 “Gimli Glider” yang salah menggunakan pound bukan kilogram untuk bahan bakar).
Penyebab sistemik error: tuntutan tugas yang tidak natural, interupsi yang memutus siklus aksi, time pressure, feedback yang buruk, dan tekanan sosial-institusional (contoh: bencana penerbangan Tenerife 1977 akibat tekanan waktu dan cuaca).
Strategi desain untuk mencegah dan mengurangi error:
- Tambahkan constraints (fisik, logis, semantik, kultural).
- Gunakan forcing functions: interlocks (microwave tidak jalan jika pintu terbuka), lock-ins (dialog save-before-quit), lockouts (childproof caps).
- Sediakan Undo dengan banyak level.
- Sensibility checks untuk menolak input yang tidak masuk akal.
- Minimalkan mode errors, buat mode aktif sangat terlihat.
- Dukung interupsi dengan menjaga konteks agar pengguna mudah melanjutkan.
3. Konseptualisasi Desain Interaksi
3.a Dari Keluhan ke Diagnosis
Keluhan umum seperti “aplikasinya ribet” atau “user-nya salah pakai” bermasalah karena tidak menjelaskan apa dan di mana kegagalan terjadi, sehingga tidak berguna untuk desain. Konseptualisasi interaksi membantu memberi struktur pada pengalaman, memisahkan keluhan dari diagnosis, dan menjelaskan kegagalan tanpa menyalahkan pengguna.
3.b System Model, System Image, dan Mental Model
- System model: cara sistem sebenarnya bekerja.
- System image: apa yang ditampilkan sistem kepada pengguna.
- Mental model: gambaran pengguna tentang sistem.
Common Mistake Pengguna tidak pernah melihat system model secara langsung; mereka selalu bertindak lewat system image dan membawa mental model sendiri. Implikasinya, tujuan desain bukan menyamakan mental model dengan system model secara persis (tidak feasible dan tidak perlu), melainkan mencapai keselarasan fungsional agar pengguna bisa bertindak, menafsirkan respons, dan mencapai goal tanpa usaha berlebihan.
3.c Goal, Task, dan Action
Bahasa dasar analisis interaksi terdiri dari tiga level:
- Goal: keadaan akhir yang ingin dicapai pengguna, berorientasi hasil, tidak bergantung pada antarmuka. Contoh: “saya ingin mengirim uang”.
- Task: aktivitas terstruktur untuk mencapai goal, mulai dipengaruhi sistem, masih konseptual. Contoh: mengisi formulir transfer.
- Action: operasi konkret pada antarmuka, sepenuhnya bergantung pada desain. Contoh: menekan “Submit”.
Common Mistake Kesulitan interaksi hampir selalu muncul di peralihan antar level (goal ke task, task ke action, action ke evaluasi). Kesalahan umum adalah menyebut task atau action sebagai goal, misalnya menyatakan “goal saya mengisi formulir” padahal mengisi formulir adalah task.
3.d Norman’s Seven Stages of Action
Interaksi sebagai siklus dengan dua fase:
Fase eksekusi (doing):
- Membentuk tujuan.
- Membentuk niat.
- Menentukan aksi.
- Mengeksekusi aksi.
Fase evaluasi (interpreting):
- Mempersepsi keadaan sistem.
- Menafsirkan keadaan tersebut.
- Mengevaluasi apakah tujuan tercapai.
Sebagian besar tahapan berlangsung bawah sadar untuk task rutin, dan baru terasa jelas ketika terjadi kesalahan atau pengguna menghadapi situasi baru.
3.e Gulf of Execution dan Gulf of Evaluation (Diperluas)
Key Insight Setiap interaksi memiliki jarak kognitif antara manusia dan sistem. Jurang ini selalu ada; desain tidak menghilangkan jurang, melainkan menyediakan jembatan dengan memperhitungkan 7 stages of action.
- Gulf of Execution: jarak antara goal/task pengguna dan action yang tersedia di sistem. Masalah muncul ketika action sulit ditemukan atau hubungan niat-aksi tidak jelas. Dijembatani oleh affordance, signifier, dan mapping.
- Gulf of Evaluation: jarak antara perubahan keadaan sistem dan pemahaman pengguna terhadap status goal. Masalah muncul ketika respons sistem tidak jelas. Dijembatani oleh feedback, status, dan representasi sistem.
3.f Diagnosis Berbasis Goal-Task-Action
Urutan analisis untuk mendiagnosis masalah interaksi secara sistematis:
- Goal pengguna: keadaan akhir yang ingin dicapai.
- Task yang dibayangkan: aktivitas yang menurut pengguna perlu dilakukan.
- Action yang dipilih: operasi konkret pada antarmuka.
- Ekspektasi: apa yang pengguna kira akan terjadi setelah action.
- Respons sistem: apa yang benar-benar terjadi (system image).
- Interpretasi: bagaimana pengguna memahami respons tersebut terhadap goal.
Setelah itu baru bisa dinyatakan apakah gulf of execution yang lebar (goal/task jelas tapi action tidak jelas) atau gulf of evaluation yang lebar (action dilakukan tapi status goal tidak bisa dinilai).
Shortcut Contoh diagnosis: keluhan “Form ini ribet” → goal: mengirim data, task: mengisi dan mengirim formulir, action: tekan Submit, respons: halaman reload tanpa pesan, interpretasi: status goal tidak jelas → kesimpulan: Gulf of evaluation.
3.g Asumsi Desain
Setiap desain mengandung asumsi implisit tentang goal pengguna, task yang dibayangkan, dan action yang dianggap “jelas/obvious”. Asumsi ini sering implisit, jarang disadari, dan selalu terwujud dalam system image. Membuat asumsi eksplisit (misalnya “desain ini mengasumsikan pengguna punya goal X”) membantu menjadikannya objek analisis yang dapat diuji dan direvisi.
4. Nielsen’s 10 Usability Heuristics
4.a Design Guidelines vs Design Heuristics
Design guidelines bersifat spesifik, sering terkait platform atau konteks tertentu. Design heuristics adalah prinsip umum (rules of thumb) yang berlaku lintas sistem dan konteks. Keduanya digunakan untuk mendukung kualitas interaksi dan membantu pengambilan keputusan desain.
Heuristics Nielsen dikembangkan dari observasi banyak sistem, temuan usability testing, dan teori persepsi-kognisi manusia, dirancang agar jumlahnya kecil, mudah dipelajari, dan dapat diterapkan lintas sistem.
4.b Sepuluh Heuristik
| No | Heuristik | Inti |
|---|---|---|
| 1 | Visibility of system status | Sistem selalu memberi tahu apa yang terjadi melalui feedback, indikator status, progress |
| 2 | Match between system and real world | Gunakan bahasa pengguna, logika dunia nyata, hindari istilah teknis internal |
| 3 | User control and freedom | Sediakan jalan keluar jelas, undo dan redo |
| 4 | Consistency and standards | Hal yang sama harus terlihat dan berperilaku sama |
| 5 | Error prevention | Cegah kesalahan lebih baik daripada menanganinya, gunakan constraint dan validasi |
| 6 | Recognition rather than recall | Minimalkan kebutuhan mengingat, buat opsi terlihat dan mudah dikenali |
| 7 | Flexibility and efficiency of use | Dukung pemula dan expert melalui shortcut dan personalisasi |
| 8 | Aesthetic and minimalist design | Hindari informasi tidak relevan yang bersaing dengan informasi penting |
| 9 | Help users recognize, diagnose, recover from errors | Pesan error jelas, bahasa pengguna, sertakan saran perbaikan |
| 10 | Help and documentation | Idealnya tanpa bantuan; jika perlu, mudah dicari dan berorientasi tugas |
Penggunaan Heuristics digunakan untuk mengidentifikasi masalah usability, menjelaskan penyebab masalah, dan membandingkan alternatif desain. Heuristics bukan ceklis pass/fail dan bukan resep solusi; tujuan evaluasi adalah memahami masalah, bukan langsung membenarkan desain.
5. Requirements, Goals, dan Context of Use
5.a Requirement vs Feature
Definisi Requirement adalah apa yang dibutuhkan agar goal tercapai dalam konteks tertentu (alasan). Feature adalah bagaimana kebutuhan tersebut diwujudkan dalam sistem (bentuk).
Jika requirement dan feature tercampur, diskusi berubah menjadi debat preferensi dan evaluasi kehilangan pijakan. Requirement berbicara tentang kapabilitas sistem, bukan kontrol UI spesifik, teknologi, atau detail visual.
Contoh: requirement “pengguna harus dapat membandingkan produk” bisa diwujudkan dengan berbagai feature: tombol “Compare” dengan tabel, tampilan berdampingan, highlight otomatis, ringkasan naratif, atau visualisasi grafik. Requirement membuka ruang kemungkinan, feature memilih satu realisasi.
5.b Jenis-Jenis Requirement
- Functional requirements: sistem mampu mendukung task.
- Data requirements: informasi tersedia untuk pengambilan keputusan.
- User characteristics requirements: selaras dengan kemampuan dan mental model pengguna.
- Context-of-use requirements: respons terhadap lingkungan fisik, sosial, teknis, organisasi.
- Usability goals: efektivitas, efisiensi, error rate.
- UX goals: trust, confidence, engagement.
5.c Context of Use sebagai Constraint
Konteks bersifat multidimensional (fisik, sosial, teknis, organisasi). Requirement = f(Goal, Context); goal yang sama bisa menghasilkan requirement berbeda pada konteks berbeda. Contoh: goal dokter mengakses data pasien menghasilkan requirement berbeda di ruang operasi (cepat, minim distraksi) dibanding ruang administrasi (detail, dokumentasi lengkap).
Studi kasus Tokopedia vs Bol.com menunjukkan goal yang sama (membeli produk dengan aman) menghasilkan requirement berbeda karena konteks sosio-teknis berbeda: Tokopedia mengkomunikasikan mekanisme escrow secara eksplisit karena risiko transaksi marketplace yang lebih tinggi, sementara Bol.com fokus pada prosedur retur karena trust dibangun lewat sistem hukum dan regulasi konsumen yang kuat.
5.d Isu Riset vs Isu Desain
Isu riset menjawab “apakah pemahaman kita benar?”, isu desain menjawab “bagaimana solusi terbaik diwujudkan?”. Problem space diperdalam melalui riset, solution space dieksplorasi melalui desain.
5.e Metode User Research
Wawancara (structured, semi-structured, unstructured), observasi, kuesioner, focus group, diary study, log dan analytics. Prinsip data gathering: pertanyaan riset jelas, partisipan relevan, metode sesuai, etika dijaga, triangulasi. Requirement adalah inferensi yang harus dapat ditelusuri ke data, bukan hanya intuisi atau asumsi.
6. Scenario dan Use Case
6.a Mengapa Requirement Saja Tidak Cukup
Daftar requirement yang benar secara struktural tetap bersifat abstrak, tidak menghadirkan pengguna konkret, dan tidak memperlihatkan tekanan fisik atau sosial. Requirement perlu “dihidupkan” dengan menghadirkan pengguna secara konkret dan konteks fisik-sosial melalui dua artefak: Scenario dan Use Case.
6.b Scenario dan Persona
Scenario adalah narasi informal tentang seseorang menggunakan sistem dalam situasi nyata, bersifat eksploratif dan membantu memperdalam problem space serta mengungkap kebutuhan tersembunyi. Scenario yang kuat tetap menampilkan goal, task, action, dan context of use secara terstruktur.
Persona adalah deskripsi kaya tentang pengguna tipikal (bukan orang tertentu), disintesis dari riset pengguna nyata, membantu desainer mengambil keputusan desain dan mengingatkan tim siapa yang akan menggunakan produk.
Contoh dari materi: skenario “Rina keluar kantor pukul 18.30 saat hujan deras, membuka aplikasi ride-hailing dengan satu tangan” memunculkan implikasi desain konkret seperti keterbacaan, ukuran kontrol, kecepatan respons, dan kejelasan estimasi.
User story adalah bentuk minimal scenario dengan struktur “As a [role], I want [goal], so that [reason]”, namun kehilangan detail konteks dan constraint situasional.
6.c Use Case
Use case adalah deskripsi langkah demi langkah antara aktor dan sistem untuk mencapai goal, lebih dekat ke solution space dibanding scenario. Struktur use case mencakup actor, goal, preconditions, main success scenario, alternative flows, dan postconditions.
Dua gaya penulisan: Essential Use Case (fokus niat pengguna dan tanggung jawab sistem secara abstrak) dan Fully-Dressed Use Case (lebih rinci dan operasional, termasuk alternative courses jika terjadi error).
6.d Scenario vs Use Case
| Dimensi | Scenario | Use Case |
|---|---|---|
| Bentuk | Naratif | Struktural |
| Fokus | Kontekstual | Fungsional |
| Orientasi | Problem space | Struktur interaksi |
| Sifat | Eksploratif | Preskriptif |
Scenario memperdalam pemahaman, use case mengorganisasi struktur interaksi. Tanpa scenario, use case bisa kering dan terlepas dari konteks; tanpa use case, scenario bisa berhenti pada narasi tanpa struktur operasional.
7. Aspek Kognitif
7.a Apa Itu Kognisi
Cara mengklasifikasi kognisi pada level tinggi: experiential vs reflective cognition (Norman, 1993), atau fast vs slow thinking (Kahneman, 2011). Proses kognitif utama meliputi attention, perception, memory, learning, reading/speaking/listening, serta problem-solving/planning/reasoning/decision-making.
7.b Attention dan Perception
Attention adalah seleksi hal yang difokuskan dari massa stimuli sekitar; melibatkan indera audio dan visual. Implikasi desain: strukturkan informasi untuk menangkap perhatian menggunakan perceptual boundaries, warna, reverse video, suara, lampu berkedip; hindari kekacauan informasi berlebihan.
Perception adalah cara informasi diperoleh dari dunia dan ditransformasi menjadi pengalaman. Implikasi desain: teks harus legible, ikon harus mudah dibedakan dan dibaca, gunakan kontras warna yang tepat.
7.c Memory
Memory melibatkan encoding lalu retrieval pengetahuan; manusia tidak mengingat semuanya karena melibatkan filtering. Recognition jauh lebih cepat dan andal dibanding recall.
Common Mistake Teori klasik “7 ± 2” (Miller, 1956) tentang kapasitas memori jangka pendek sering disalahgunakan sebagai aturan kaku (misalnya “hanya 7 item di menu”). Padahal recognition memungkinkan lebih dari 9 item karena pengguna men-scan, bukan mengingat dari memori. Jumlah ideal bergantung pada task dan ruang layar yang tersedia.
Implikasi desain untuk memory: kurangi cognitive load dengan menghindari prosedur panjang, promosikan recognition daripada recall, berikan berbagai cara melabeli informasi (folder, kategori, warna, flagging, time stamping).
7.d Learning dan Reading/Speaking/Listening
Dua jenis learning: incidental (tidak disengaja, misal mengenali wajah) dan intentional (disengaja, misal belajar untuk ujian); intentional learning jauh lebih sulit. Orang lebih suka belajar dengan melakukan (learning by doing) dibanding mengikuti instruksi manual.
Kemudahan membaca, mendengar, dan berbicara berbeda-beda antar individu; mendengar membutuhkan effort kognitif lebih rendah dibanding membaca atau berbicara.
7.e Cognitive Frameworks
Framework kognitif digunakan untuk menjelaskan dan memprediksi perilaku pengguna di antarmuka, yang paling terkenal: mental models, gulfs of execution and evaluation, distributed cognition, serta external and embodied cognition.
Definisi Mental model adalah pemahaman pengguna tentang sistem yang dibangun dari belajar dan menggunakannya, digunakan untuk membuat inferensi tentang cara melakukan task.
Distributed cognition mempelajari fenomena kognitif yang menyebar lintas individu, artefak, dan representasi internal-eksternal (Hutchins, 1995). External cognition menjelaskan bagaimana manusia berinteraksi dengan representasi eksternal (peta, catatan, diagram) untuk memperluas kemampuan kognisi, termasuk computational offloading (misalnya menghitung dengan pena-kertas lebih mudah daripada di kepala meskipun soalnya identik).
Shortcut Limitasi mental model: berbasis pemodelan aktivitas mental yang terjadi eksklusif di dalam kepala, sehingga tidak cukup menjelaskan bagaimana orang berinteraksi dengan komputer di dunia nyata — inilah alasan distributed/external cognition dikembangkan sebagai pelengkap.
8. Interaksi Emosional
8.a Tiga Level Desain Emosional (Ortony et al., 2005)
- Visceral design: membuat produk terlihat, terasa, dan terdengar baik (respons cepat, bawah sadar).
- Behavioral design: tentang penggunaan, setara dengan nilai usability tradisional.
- Reflective design: tentang makna dan nilai personal produk (respons sadar, jangka panjang).
Key Insight Keadaan emosional mengubah cara berpikir. Saat takut atau marah, fokus menyempit dan tubuh tegang, sehingga orang menjadi kurang toleran. Saat senang, fokus melebar dan tubuh relaks, sehingga orang lebih cenderung mengabaikan masalah kecil dan lebih kreatif.
8.b Expressive Interfaces dan Frustrating Interfaces
Warna, ikon, suara, dan animasi membentuk look and feel yang menyampaikan keadaan emosional, yang pada gilirannya mempengaruhi usability; pengguna bersedia menoleransi kekurangan (misalnya unduhan lambat) jika hasil akhirnya estetis dan menyenangkan.
Penyebab frustrasi: aplikasi tidak bekerja/crash, sistem tidak melakukan yang diinginkan, ekspektasi tidak terpenuhi, informasi tidak cukup, pesan error yang samar/menggurui, tampilan yang berisik/gimmicky, dan langkah berlebihan yang berujung pada kesalahan harus diulang dari awal.
Shneiderman’s guidelines untuk pesan error: hindari kata FATAL/INVALID/BAD, hindari huruf kapital dan kode panjang, pesan harus presisi bukan samar, sediakan context-sensitive help.
8.c Affective Computing dan Persuasive Technology
Affective computing (Picard, 1998) menggunakan teknologi sensing (GSR, ekspresi wajah, gestur) untuk mengenali dan mengekspresikan emosi. Emotional AI mengotomasi pengukuran perasaan dari ekspresi wajah dan suara untuk memprediksi perilaku pengguna.
Persuasive technology (Fogg, 2003) adalah sistem interaktif yang dirancang mengubah sikap dan perilaku pengguna, sering disebut nudging, melalui pop-up, reminder, prompt personalisasi, atau rekomendasi.
Anthropomorphism adalah pemberian kualitas manusiawi pada objek mati (mobil, komputer), dieksploitasi dalam HCI agar interaksi terasa menyenangkan dan mengurangi kecemasan. Penelitian Reeves dan Naas (1996) menunjukkan bahwa komputer yang memberi pujian pada software edukasi berdampak positif: pengguna lebih bersedia melanjutkan exercise.
9. Interaksi Sosial
9.a Conversational Mechanisms
Sacks et al. (1978) mengusulkan tiga aturan dasar percakapan: (1) pembicara saat ini memilih pembicara berikutnya melalui pertanyaan/permintaan, (2) orang lain memutuskan untuk mulai berbicara, (3) pembicara saat ini melanjutkan berbicara. Turn-taking dan back-channeling (uh-uh, umm) digunakan untuk mengoordinasikan percakapan.
9.b Telepresence dan Social Presence
Telepresence merujuk pada satu pihak yang hadir secara virtual bersama pihak lain di ruang fisik (misalnya melalui robot telepresence di sekolah atau konferensi). Social presence merujuk pada perasaan kehadiran bersama orang nyata saat berada dalam virtual reality.
9.c Coordination Mechanisms
Saat sekelompok orang bertindak bersama, mereka mengoordinasikan diri melalui komunikasi verbal-nonverbal, jadwal/aturan/konvensi, dan representasi eksternal bersama. Pada pertemuan formal, struktur eksplisit seperti agenda dan notulen digunakan untuk koordinasi.
9.d Social Engagement
Social engagement merujuk pada partisipasi dalam aktivitas kelompok sosial, bersifat sukarela, tidak dibayar, dan sering altruistik; website sering menjadi hub untuk menghubungkan orang (contoh: retweeting yang menghubungkan jutaan orang dalam waktu singkat).
10. Prototyping dan Evaluasi Prototype
10.a Apa Itu Prototype
Prototype adalah representasi desain sebelum solusi final dibuat (Bill Moggridge). Empat fungsi utama prototyping: reification (membuat ide nyata), reflection (menilai arah desain), communication (menyamakan pemahaman tim), dan assessment (memungkinkan evaluasi).
10.b Fidelity Levels
Prototype dapat berbentuk deskripsi verbal, sketsa, storyboard, flow diagram, model fisik, video, atau spesifikasi desain. Seiring fidelity meningkat (low ke high), biaya meningkat dan fleksibilitas berkurang.
Low-fidelity berfokus pada fungsi sistem, struktur tugas, dan alur interaksi, mengabaikan warna/tipografi/grafika. Keuntungannya cepat, murah, mudah dibuang dan direvisi, sehingga mendorong kritik yang lebih jujur karena tidak terasa “precious” (Moggridge).
Premature Commitment Risiko desain berupa premature commitment, yaitu terlalu cepat berinvestasi pada satu solusi, yang berdampak pada peningkatan biaya, kesulitan mengubah arah, dan keterikatan tim pada desain yang mungkin tidak sesuai kebutuhan. Low-fidelity prototyping memaksimalkan jumlah iterasi sebelum komitmen pada kode/manufaktur.
10.c Metode Evaluasi Prototype
- Paper Prototype Testing: mensimulasikan interaksi dengan prototype kertas, cocok untuk low-fidelity.
- Cognitive Walkthrough: menelusuri langkah interaksi secara sistematis dengan empat pertanyaan: apakah pengguna memiliki goal yang benar, apakah pengguna melihat tindakan yang tersedia, apakah pengguna memahami tindakan tersebut, apakah feedback sistem dipahami.
- Heuristic Evaluation: menggunakan prinsip usability untuk menilai desain tanpa melibatkan pengguna nyata.
- Usability Testing: pengguna nyata diminta menyelesaikan tugas, mengamati perilaku secara langsung.
Evaluasi yang sistematis mengikuti tiga tahap: persiapan (tentukan tujuan dan tugas), pelaksanaan (pengguna berinteraksi, evaluator mengamati), dan analisis (identifikasi masalah desain). Siklus desain interaksi bersifat iteratif: prototype → evaluate → redesign.
11. UI Design Guidelines
11.a Guidelines sebagai Hipotesis Teruji
Definisi UI guideline adalah dokumen yang merangkum prinsip, pola, dan aturan desain antarmuka yang telah divalidasi melalui riset dan praktik industri, berbentuk hipotesis: “Dalam situasi X, pendekatan Y berhasil berdasarkan riset Z.”
Skill yang dibutuhkan bukan menghafal aturan, melainkan tahu guideline mana digunakan kapan dan mengapa. Manfaat guidelines: menghemat waktu, mengurangi risiko, mendukung konsistensi, dan menyediakan bahasa bersama untuk tim.
11.b Contoh Sistem Guidelines
- Apple HIG: lima prinsip dasar (metaphors from real world, direct manipulation, see-and-point interaction, consistency, user control), berstruktur tiga tingkat (prinsip kognitif, rules konkret, spesifikasi piksel/warna).
- USWDS: contoh operasionalisasi Miller’s Law (7±2) menjadi aturan konkret pemilihan komponen (kurang dari 7 opsi pakai radio button, 7-15 pakai dropdown, lebih dari 15 pakai combo box dengan filter).
- Lyft Decision Tree: prinsip “dropdown as last resort” karena dropdown menyembunyikan opsi dan meningkatkan cognitive load dibanding tabs (recognition) atau switches (direct manipulation).
11.c Memilih Guideline Secara Kritis
Empat faktor pemilihan guideline: platform conventions, user expertise (novice vs expert vs both), context dan domain, serta accessibility requirements. Konteks budaya juga berperan; Rakuten yang mengadopsi desain padat informasi sesuai preferensi pengguna Asia Timur justru gagal di pasar lain yang lebih menyukai desain minimal seperti Apple HIG.
Shortcut Saat melihat deviasi dari guideline (misalnya Gojek memakai icon grid bukan radio button meski opsinya kurang dari 7), tanyakan apakah itu violation atau justified deviation — icon grid pada Gojek adalah justified deviation karena mendukung visual recognition bagi pengguna dengan literasi terbatas.
12. Mobile App Design
12.a Enam Rekomendasi Praktis
- Minimize cognitive load: minimalkan informasi dan input pengguna, hindari jargon, pecah task, offload task, antisipasi kebutuhan pengguna.
- Decluttering, visual weighting, consistency: gunakan functional minimalism, beri bobot visual pada elemen penting, jaga konsistensi visual/fungsional/eksternal.
- Optimize content for mobile: teks harus readable (minimal 16px, kontras cukup, hindari all caps, 30-40 karakter per baris).
- Design for touch: target sentuh harus cukup besar dan berjarak, pertimbangkan thumb zone (zona hijau untuk aksi sering, zona merah untuk aksi berisiko seperti delete), berikan feedback instan pada setiap interaksi.
- Optimize for mobile: desain untuk interupsi (simpan state), manfaatkan sensor device (kamera, lokasi, biometrik), multi-channel experience, antisipasi konektivitas buruk dan data terbatas, perhatikan local aesthetic dan kekhususan regional.
- Humanize digital experience: personalisasi konten berdasarkan lokasi/riwayat, gunakan delightful animation untuk membangun koneksi emosional.
PyTorch Equivalent Filosofi penutup: jangan mencoba membangun aplikasi sempurna pada percobaan pertama; perlakukan aplikasi sebagai proyek yang terus berkembang, gunakan data dari testing dan feedback pengguna untuk terus memperbaiki pengalaman.
13. Evaluation (Lanjutan)
13.a Inspection Methods
Inspections melibatkan expert yang menggunakan pengetahuan tentang pengguna dan teknologi untuk mereview usability software, bisa formal atau informal. Dua jenis utama:
- Heuristic Evaluation: review terpandu oleh heuristik, dikembangkan Nielsen berdasarkan analisis empiris 249 masalah usability. Prosedur: briefing, evaluasi 1-2 jam oleh masing-masing expert secara terpisah (dua pass: feel umum lalu fokus fitur spesifik), lalu debriefing bersama untuk memprioritaskan masalah.
- Cognitive Walkthrough: fokus pada ease of learning, expert menelusuri skenario sambil dipandu tiga pertanyaan: apakah aksi yang benar cukup jelas bagi pengguna, apakah pengguna akan menyadari aksi tersebut tersedia, apakah pengguna akan mengasosiasikan dan menafsirkan respons dengan benar.
Kelebihan inspection: sedikit isu etis-praktis karena tidak melibatkan pengguna nyata. Kekurangan: masalah penting bisa terlewat, banyak masalah trivial teridentifikasi, dan expert memiliki bias.
13.b Usability Testing
Usability testing merekam performa pengguna tipikal melakukan tugas tipikal dalam kondisi terkontrol, biasanya 5-10 partisipan, tugas sekitar 30 menit, kondisi sama untuk setiap partisipan, dengan informed consent. Data dikumpulkan melalui rekaman video, key logging, kuesioner kepuasan, dan wawancara.
Perbedaan usability testing untuk riset vs untuk perbaikan produk: riset membutuhkan banyak partisipan, hasil divalidasi statistik, harus replicable, dan dilaporkan ke komunitas ilmiah; sedangkan untuk perbaikan produk cukup sedikit partisipan, hasil menginformasikan desain, tidak harus replicable sepenuhnya, dan dilaporkan ke developer.
13.c Analytics, A/B Testing, Field Studies, Predictive Models
- Web analytics: melacak aktivitas pengguna di website (jumlah pengunjung, durasi, halaman dikunjungi) untuk memberi big picture performa situs.
- A/B Testing: eksperimen skala besar yang membandingkan dua versi desain pada dua grup pengguna, bisa melibatkan ribuan pengguna, namun berpotensi menimbulkan dilema etis jika pengguna tidak tahu mereka bagian dari tes.
- Field studies: dilakukan dalam setting alami (“in the wild”) untuk memahami bagaimana orang berinteraksi dengan teknologi di dunia nyata, sering menghasilkan temuan tak terduga dibanding studi lab terkontrol.
- Predictive models (Fitts’s Law): mengevaluasi produk tanpa melibatkan pengguna langsung, lebih murah, namun cakupannya terbatas pada sistem dengan task yang dapat diprediksi (misalnya voicemail, smartphone).
14. Exam Tips & Quick Reference (Fokus CPMK1)
What to Memorize untuk CPMK1
- Tiga level analisis interaksi: Goal → Task → Action, dan di mana letak kesulitan biasanya muncul (peralihan antar level).
- Dua jurang (gulfs): Execution (dijembatani signifier/constraint/mapping) dan Evaluation (dijembatani feedback).
- Tiga konsep desain inti: Affordance, Signifier, Mapping, dan bagaimana ketiganya berbeda dari Feedback dan Constraint.
- Norman’s 7 Stages of Action, dan kapan tahapan ini terasa (saat error atau situasi baru).
- Sepuluh heuristik Nielsen (urutan dan inti masing-masing).
- Tiga level desain emosional Ortony et al.: visceral, behavioral, reflective.
- Perbedaan Usability vs UX, dan System Model vs System Image vs Mental Model.
- Human error: Slips (eksekusi gagal, bawah sadar) vs Mistakes (goal/plan salah, sadar).
Tabel rujukan istilah cepat:
| Istilah | Makna Singkat |
|---|---|
| Affordance | Relasi properti objek dan kapabilitas pengguna |
| Signifier | Sinyal lokasi/cara bertindak |
| Mapping | Relasi kontrol dan efek |
| Feedback | Respons sistem terhadap aksi |
| Constraint | Pembatas kemungkinan aksi |
| Gulf of Execution | Jarak goal/task ke action |
| Gulf of Evaluation | Jarak respons sistem ke pemahaman goal |
| Mental Model | Pemahaman pengguna tentang sistem |
| System Image | Apa yang ditampilkan sistem |
| Slip | Aksi benar, eksekusi gagal |
| Mistake | Goal/plan salah |
References
- Preece, Sharp, Rogers - Interaction Design: Beyond Human-Computer Interaction
- Norman, D. - The Design of Everyday Things
- Krug, S. - Don’t Make Me Think, Revisited
- Raskin, J. - The Humane Interface
- Nielsen, J. - 10 Usability Heuristics (revised 2014)
- Ortony, Norman, Revelle (2005) - Model Emotional Design (Visceral, Behavioral, Reflective)
- Hutchins, E. (1995) - Distributed Cognition
- Miller, G. (1956) - The Magical Number Seven, Plus or Minus Two
- Fogg, B.J. (2003) - Persuasive Technology
- Materi Slide 01a-07b, IF3151 Interaksi Manusia-Komputer, Semester 2 2025/2026, Adi Mulyanto / Fitra Arifiansyah / Satrio Adi Rukmono / Haning Nanda Hapsari