🎯 Tujuan 🕹️ Evolusi CLI ke NUI ✨ 4 Prinsip UI/UX 🎮 Interface Evolution Simulator 📝 Evaluasi Formatif ✨ Rangkuman & Refleksi
Learn / Informatika / Sistem Komputer / 05. Interaksi Manusia-Komputer
🖥️ Sistem Komputer · Modul 05

Interaksi Manusia-Komputer & Seni Desain UI/UX

Komputer yang hebat adalah komputer yang mudah dan menyenangkan untuk digunakan manusia! Pelajari bagaimana antarmuka berevolusi dari ketikan teks hitam-putih CLI, grafis klik GUI, layar sentuh NUI, hingga prinsip desain antarmuka ramah disabilitas (Aksesibilitas).

⏱️ Waktu: 45 Menit 🧠 Studi: HCI & Usability Principles 📝 Evaluasi: 20 Soal (4 Bagian)
🎯

Tujuan Pembelajaran

Kompetensi yang akan kamu kuasai setelah menyelesaikan modul ini

01.
Memahami Konsep Dasar HCI

Menjelaskan pentingnya Interaksi Manusia-Komputer (HCI) dalam menjembatani kebutuhan pengguna dengan kemampuan sistem mesin.

02.
Menelusuri Evolusi Antarmuka

Membedakan karakteristik Command Line Interface (CLI), Graphical User Interface (GUI), dan Natural User Interface (NUI - sentuh, suara, gestur).

03.
Menerapkan 4 Prinsip UI/UX

Menguasai prinsip Konsistensi, Umpan Balik (Feedback), Visibilitas Opsi, dan Kesederhanaan (Simplicity) dalam aplikasi.

04.
Aksesibilitas & Pengujian Usability

Merancang aplikasi inklusif untuk pengguna disabilitas (screen reader, kontras warna) dan melakukan uji kemudahan pakai.

1

Evolusi Cara Manusia Berkomunikasi dengan Komputer

Dari menghafal perintah teks hitam-putih hingga asisten suara pintar

📟

1. CLI (Command Line Interface)

Pengguna mengetik teks perintah baku melalui keyboard (seperti dir, cd, mkdir). Cepat dan hemat memori, namun sulit untuk pemula karena harus hafal sintaks.

🖱️

2. GUI (Graphical User Interface)

Menggunakan metafora visual: Desktop, Jendela (Window), Icon folder, dan Pointer Mouse. Pengguna tinggal klik dan geser tanpa perlu menghafal baris kode perintah.

🗣️

3. NUI (Natural User Interface)

Interaksi alami manusia: Layar sentuh multi-touch (pinch to zoom), Perintah suara (Siri / Google Assistant), Lensa AR/VR, dan sensor gestur tubuh.

2

4 Pilar Desain Antarmuka yang Nyaman

Prinsip usability yang membuat aplikasi terasa intuitif dan mudah dipelajari

🔄 1. Konsistensi

Tombol 'Simpan' selalu berwarna biru dan berada di posisi yang sama di semua halaman aplikasi.

🔔 2. Feedback Instan

Sistem selalu memberi respon balik: animasi loading saat mengunggah atau centang hijau saat berhasil.

👁️ 3. Visibilitas Opsi

Menu penting diletakkan di tempat yang mudah dilihat, bukan tersembunyi di dalam 5 sub-menu terisolasi.

♿ 4. Aksesibilitas

Mendukung teks deskripsi gambar (Alt-Text) untuk pembaca layar tunanetra dan kontras warna yang ramah buta warna.

🎮

Interface Evolution Interactive Tester

Coba sendiri bagaimana menyelesaikan tugas "Membuat Folder Baru" di 3 generasi antarmuka yang berbeda!

📝

Evaluasi Formatif: Interaksi Manusia-Komputer

Uji pemahaman prinsip antarmuka, ergonomi visual, dan usability testing (Total Skor: 100)

Target Kelulusan Minimal 70 Poin
Bagian A

Pilihan Ganda (5 Soal · Bobot: 25 Poin)

1. Antarmuka yang memungkinkan pengguna berinteraksi dengan komputer melalui icon grafis, jendela klik mouse, dan tombol visual disebut...

2. Ketika kamu menekan tombol 'Download' lalu muncul animasi bar persentase unduhan (0% - 100%), prinsip UI/UX apa yang sedang dipenuhi aplikasi?

3. Contoh teknologi antarmuka Natural User Interface (NUI) yang memanfaatkan suara manusia adalah...

4. Fitur aksesibilitas digital yang sangat membantu pengguna penyandang tunanetra untuk bernavigasi di smartphone adalah...

5. Proses menguji rancangan aplikasi kepada pengguna nyata untuk mengetahui seberapa mudah dan nyaman aplikasi tersebut digunakan disebut...

Bagian B

Benar atau Salah (5 Soal · Bobot: 25 Poin)

1. Desain antarmuka (UI) yang baik adalah antarmuka yang membingungkan pengguna agar mereka membaca buku panduan tebal.
2. UI (User Interface) berfokus pada tampilan visual aplikasi, sedangkan UX (User Experience) berfokus pada kenyamanan dan pengalaman pengguna saat memakai aplikasi.
3. Menjaga letak tombol 'Batal' dan 'OK' tetap konsisten di seluruh jendela aplikasi membantu pengguna tidak salah klik.
4. Perintah CLI sama sekali tidak digunakan lagi oleh para insinyur software di era modern sekarang.
5. Gerakan gestur dua jari merenggang (Pinch to Zoom) pada smartphone adalah contoh interaksi NUI multi-sentuh yang intuitif.
Bagian C

Menjodohkan Konsep IMK & Contoh Nyata (5 Pasangan · Bobot: 25 Poin)

Bagian D

Urutan Siklus Perancangan Antarmuka UI/UX (Bobot: 25 Poin)

Urutkan langkah perancangan aplikasi dari analisis pengguna hingga peluncuran:

A. Membuat sketsa draf wireframe tata letak di atas kertas (Low-Fidelity)
B. Meriset kebutuhan pengguna (User Research) dan masalah yang dihadapi
C. Merancang desain visual berwarna lengkap dengan warna dan icon di Figma
D. Melakukan uji coba kemudahan (Usability Testing) kepada calon pengguna
E. Memperbaiki kendala desain dan menyerahkan aset ke tim programmer koding
✨

Rangkuman Materi & Refleksi Belajar

Tuliskan pemahaman dan pengalaman belajarmu pada materi ini

1. Human-Centered Design: Teknologi harus menyesuaikan diri dengan pola pikir manusia, bukan sebaliknya memaksa manusia beradaptasi dengan kerumitan mesin.

2. Evolusi Alami: Perkembangan dari CLI ke GUI hingga NUI membuat teknologi dapat diakses oleh semua usia dari balita hingga kakek-nenek.

3. Inklusivitas: Antarmuka digital masa kini wajib ramah aksesibilitas agar teman-teman penyandang disabilitas memiliki kesempatan setara dalam belajar dan berkarya.