Desain GrafisSemester 2Pertemuan 9 · 1 Pertemuan × 4 JP (180 menit)
Prinsip UX
Modul ajar Prinsip User Experience (UX) mencakup usability, hierarki visual, konsistensi, dan aksesibilitas dalam desain antarmuka aplikasi.
#ux#usability#hierarchy#consistency#accessibility
MODUL AJAR DESAIN GRAFIS — Prinsip UX
| Komponen | Keterangan |
|---|---|
| Penyusun | Guru Desain Grafis SMK Bina Rahayu |
| Jenjang | SMK/MAK |
| Sekolah | SMK Bina Rahayu |
| Kelas/Semester | X / 2 (Genap) |
| Tahun Pelajaran | 2026/2027 |
| Fase | E |
| Elemen | Wireframe, Prototype & Prinsip UX |
| Kode | DG-E2.9 |
| Topik | Usability, Hierarki Visual, Konsistensi, Aksesibilitas |
| Alokasi Waktu | 1 × 4 JP (180 menit) |
1. Identitas Modul
| Item | Keterangan |
|---|---|
| Nama Modul | Prinsip UX (User Experience) |
| Mata Pelajaran | Desain Grafis |
| Kelas/Semester | X PPLG / 2 Genap |
| Fase | E |
| Elemen Kompetensi | Wireframe, Prototype & Prinsip UX |
| Kode Kompetensi | DG-E2.9 |
| Jumlah Pertemuan | 1 Pertemuan |
| Alokasi Waktu | 4 JP (4 × 45 menit = 180 menit) |
| Tahun Pelajaran | 2026/2027 |
| Institusi | SMK Bina Rahayu |
2. Kompetensi Awal
Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi awal dari modul-modul sebelumnya:
- Modul 01 (Pengenalan Figma): Memahami antarmuka Figma, cara membuat file baru, mengelola layer, dan menggunakan tools dasar seperti Frame, Rectangle, Text, dan Pen.
- Modul 02 (Eksplorasi Tools Figma): Menguasai penggunaan Auto Layout, Components, Variants, dan plugins pendukung.
- Modul 03–06 (Desain UI Dasar sampai Elemen UI Navigasi): Mampu merancang elemen UI seperti tombol, form, kartu, navigasi, ikon, dan gambar dengan prinsip desain visual dasar.
- Modul 07 (Wireframe dan Alur Halaman): Mampu membuat wireframe statis dan mengalirkan alur halaman dari satu layar ke layar lain.
- Modul 08 (Prototype Interaktif): Mampu membuat prototype interaktif menggunakan Figma Smart Animate, prototype connections, dan conditional interactions.
3. Dimensi Profil Lulusan
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|---|
| Keimanan dan Ketakwaan | Menerapkan kejujuran dalam melaporkan hasil audit UX tanpa mengubah data evaluasi demi mendapat nilai lebih tinggi |
| Kewargaan | Memahami bahwa desain yang aksesibel merupakan bentuk tanggung jawab sosial agar semua orang dapat mengakses informasi dan layanan digital |
| Penalaran Kritis | Menganalisis kelemahan desain antarmuka berdasarkan empat prinsip UX (usability, hierarki visual, konsistensi, aksesibilitas) dan mengevaluasi solusi yang paling tepat |
| Kreativitas | Merancang solusi desain yang tidak hanya fungsional tetapi juga konsisten dan mudah diakses oleh berbagai pengguna |
| Kolaborasi | Bekerja dalam kelompok kecil untuk melakukan audit UX terhadap desain yang ada, mendiskusikan temuan, dan menyusun rekomendasi secara bersama |
| Kemandirian | Mengambil inisiatif untuk mengevaluasi desain pribadi maupun desain pihak lain secara mandiri menggunakan pedoman heuristik |
| Kesehatan | Memperhatikan aspek ergonomi digital seperti ukuran font yang nyaman dibaca, kontras warna yang tidak melelahkan mata, dan jarak antar elemen yang memadai |
| Komunikasi | Menyampaikan hasil audit UX secara lisan dan tertulis menggunakan istilah desain yang benar dan terstruktur |
4. Sarana dan Prasarana
| No | Sarana/Prasarana | Keterangan |
|---|---|---|
| 1 | Komputer/laptop dengan Figma terinstal | Untuk praktik audit UX dan membuat perbaikan desain |
| 2 | Koneksi internet | Untuk mengakses Figma (versi web/desktop) dan referensi daring |
| 3 | Proyektor/layar | Untuk presentasi hasil audit kelompok |
| 4 | LKPD Kartu Kerja Audit UX (Lampiran 1) | Lembar kerja tercetak untuk pencatatan hasil evaluasi |
| 5 | Kartu Heuristik Nielsen (Lampiran 5) | Kartu cetak ringkas 10 heuristik sebagai referensi cepat |
| 6 | Bahan Bacaan Siswa (Lampiran 4) | Ringkasan 4 prinsip UX untuk dibaca sebelum praktik |
| 7 | Contoh desain UI yang sudah ada | Screenshot atau file desain dari aplikasi populer untuk objek audit |
| 8 | Alat tulis (pensil, pulpen, highlighter) | Untuk mencatat dan menandai bagian penting |
5. Target Peserta Didik
| Kategori | Keterangan | Strategi |
|---|---|---|
| Peserta Didik Reguler | Peserta didik dengan pencapaian standar yang mengikuti seluruh kegiatan sesuai skenario | Mengikuti seluruh tahap Memahami, Mengaplikasi, dan Merefleksi sesuai alur |
| Peserta Didik Pencapaian Tinggi (Pengayaan) | Peserta didik yang telah menguasai materi dengan cepat dan membutuhkan tantangan lebih | Diberikan tugas tambahan menganalisis aksesibilitas lebih dalam menggunakan WCAG checklist lengkap |
| Peserta Didik Kesulitan Belajar (Pendampingan) | Peserta didik yang membutuhkan bimbingan lebih intensif dalam memahami konsep | Disediakan bahan bacaan bergambar dengan contoh visual per prinsip dan pendampingan guru secara individual |
6. Model Pembelajaran
| Aspek | Keterangan |
|---|---|
| Pendekatan | Student-Centered Learning (SCL) |
| Model | Inquiry-Based Learning (penemuan konsep melalui pertanyaan pemantik dan eksplorasi kasus) |
| Jigsaw (pertukaran ahli antar kelompok untuk memperdalam pemahaman lintas topik) | |
| Metode | Diskusi kelompok, studi kasus, presentasi, praktik menganalisis, refleksi tertulis |
1. Capaian Pembelajaran (CP)
Pada akhir Fase E, peserta didik mampu merancang wireframe dan prototype untuk memvalidasi konsep desain antarmuka aplikasi berbasis prinsip usability, hierarki visual, konsistensi, dan aksesibilitas yang sesuai dengan kebutuhan pengguna.
Catatan Verifikasi: CP di atas merupakan bagian dari elemen "Wireframe, Prototype & Prinsip UX" pada Fase E mata pelajaran Desain Grafis. Dokumen ini masih berstatus DRAFT — verifikasi ulang terhadap dokumen IKTP terbaru dari BKPDM perlu dilakukan sebelum digunakan sebagai acuan resmi kurikulum.
2. Tujuan Pembelajaran (TP)
| Kode | Tujuan Pembelajaran | Kode IKTP |
|---|---|---|
| TP-DG.2.17 | Menganalisis prinsip usability dalam desain antarmuka, termasuk heuristic evaluation dan usability metrics | IKTP-DG-E2.17 |
| TP-DG.2.18 | Menerapkan hierarki visual, konsistensi, dan aksesibilitas dalam desain UI berdasarkan standar WCAG dan best practice industri | IKTP-DG-E2.18 |
3. Pemahaman Bermakna
| No | Pemahaman Bermakna |
|---|---|
| 1 | Desain yang baik bukan sekadar terlihat menarik, tetapi harus mudah digunakan (usable) oleh pengguna sasaran. Prinsip usability menjamin bahwa antarmuka dapat digunakan secara efisien, efektif, dan memuaskan. |
| 2 | Hierarki visual membantu pengguna menentukan urutan perhatian terhadap elemen-elemen di layar. Tanpa hierarki yang jelas, pengguna akan kebingungan menentukan mana yang harus diperhatikan terlebih dahulu. |
| 3 | Konsistensi dalam desain membangun kebiasaan pengguna dan mengurangi beban kognitif. Ketika elemen serupa memiliki perilaku dan tampilan yang sama di seluruh antarmuka, pengguna tidak perlu belajar ulang setiap kali berpindah halaman. |
| 4 | Aksesibilitas memastikan desain dapat digunakan oleh semua orang, termasuk pengguna dengan keterbatasan penglihatan, pendengaran, motorik, atau kognitif. Desain yang tidak aksesibel secara tidak langsung mengecualikan sebagian pengguna. |
4. Pertanyaan Pemantik
| No | Pertanyaan Pemantik | Keterangan |
|---|---|---|
| 1 | Pernahkah kamu menggunakan aplikasi yang membingungkan sehingga kamu harus mencari tombol tertentu berulang kali? Apa yang membuatmu bingung? | Pertanyaan pemantik awal — akan ditinjau ulang di penutup |
| 2 | Jika sebuah website memiliki dua tombol "Beli" dengan warna berbeda di halaman yang sama, bagaimana pengguna akan bereaksi? Mengapa konsistensi penting? | Pertanyaan terkait konsistensi |
| 3 | Apakah desain yang indah menjamin kemudahan penggunaan? Berikan contoh dari pengalamanmu. | Pertanyaan terkait usability vs estetika |
| 4 | Bagaimana cara mengetahui apakah desain yang kamu buat sudah dapat digunakan oleh semua orang, termasuk penyandang disabilitas? | Pertanyaan terkait aksesibilitas — berulang, dijawab kembali di penutup |
Daftar Isi