MODUL AKADEMIK
USER INTERFACE (UI) & USER EXPERIENCE (UX) DESIGN

IDENTITAS MATA KULIAH

Program Studi : Sistem Informasi
Mata Kuliah : UI/UX Design
Bobot SKS : 4 SKS
Semester :
Dosen Pengampu : TM Zaini, S.Kom.,M.Kom.

RENCANA PEMBELAJARAN SEMESTER (RPS) BERBASIS OBE / SN-DIKTI

A. CPL (Capaian Pembelajaran Lulusan) Prodi (Contoh Format SN-DIKTI)

CPL-1: Mampu menerapkan pemikiran logis, kritis, sistematis, dan inovatif dalam pengembangan IPTEK. CPL-2: Mampu menunjukkan kinerja mandiri dan terukur. CPL-3: Mampu mengambil keputusan secara tepat berdasarkan analisis data. CPL-4: Mampu merancang dan mengembangkan sistem/aplikasi berbasis kebutuhan pengguna.

B. CPMK (Capaian Pembelajaran Mata Kuliah)

CPMK-1: Mahasiswa mampu menjelaskan konsep dan prinsip UI/UX secara teoritis. CPMK-2: Mahasiswa mampu melakukan user research dan analisis kebutuhan pengguna. CPMK-3: Mahasiswa mampu merancang information architecture dan wireframe. CPMK-4: Mahasiswa mampu menghasilkan desain visual dan prototype interaktif. CPMK-5: Mahasiswa mampu melakukan usability testing dan menyusun laporan evaluasi.

C. Pemetaan CPL – CPMK

CPMK-1 → CPL-1
CPMK-2 → CPL-1, CPL-3
CPMK-3 → CPL-4
CPMK-4 → CPL-4
CPMK-5 → CPL-2, CPL-3

D. Bahan Kajian

1. Konsep UI/UX dan Human Centered Design

2. User Research dan Persona

3. Information Architecture

4. Visual & Interaction Design

5. Prototyping dan Usability Testing

6. Accessibility & Responsive Design

E. Metode Pembelajaran

• Student Centered Learning

• Project Based Learning

• Case Based Method

• Praktikum Terbimbing

F. Penilaian dan Bobot

Tugas Individu: 20% Project Kelompok: 30% UTS: 20% UAS (Project Akhir): 20% Partisipasi: 10%

RENCANA PEMBELAJARAN PER PERTEMUAN (14 PERTEMUAN)

Pertemuan 1

Topik: Pengantar UI/UX
Materi: Definisi, sejarah, ruang lingkup, peran UI/UX dalam industri.
Metode: Ceramah & diskusi

Pertemuan 2

Topik: Prinsip Dasar UX & Usability
Materi: Usability, heuristik, human-centered design.

Pertemuan 3

Topik: Design Thinking
Materi: Empathize, Define, Ideate, Prototype, Test.

Pertemuan 4

Topik: User Research
Materi: Interview, survey, observasi, affinity diagram.

Pertemuan 5

Topik: Persona & User Journey Map
Materi: Penyusunan persona, empathy map, customer journey.

Pertemuan 6

Topik: Information Architecture
Materi: Sitemap, struktur navigasi, card sorting.

Pertemuan 7

Topik: Wireframing
Materi: Low, mid, high fidelity wireframe.

Pertemuan 8 (UTS)

Ujian Tengah Semester (Teori & Praktik Wireframe)

Pertemuan 9

Topik: Visual Design
Materi: Typography, color theory, layout grid, visual hierarchy.

Pertemuan 10

Topik: Interaction Design
Materi: Microinteraction, feedback, state, animation.

Pertemuan 11

Topik: Prototyping
Materi: Clickable prototype, interactive prototype.

Pertemuan 12

Topik: Usability Testing
Materi: A/B testing, task scenario, pengukuran efektivitas.

Pertemuan 13

Topik: Accessibility & Responsive Design
Materi: WCAG, mobile-first, breakpoint.

Pertemuan 14 (UAS)

Presentasi Project Final dan evaluasi desain.

MATERI INTI PER BAB

BAB 1: Konsep Dasar UI/UX

UI adalah tampilan visual dan elemen interaktif sistem. UX adalah pengalaman menyeluruh pengguna saat menggunakan sistem.

Prinsip UX:

• Usability

• Consistency

• Accessibility

• Feedback

• Simplicity

Latihan

1. Jelaskan perbedaan UI dan UX.

2. Mengapa UX berorientasi pada pengguna?

BAB 2: User Research dan Persona

User research adalah proses pengumpulan data untuk memahami kebutuhan pengguna. Metode: Interview, Survey, Observasi, Usability Testing.

Persona adalah representasi fiktif pengguna berdasarkan data riset.

Latihan

1. Buat contoh persona aplikasi e-learning.

2. Jelaskan perbedaan data kualitatif dan kuantitatif.

BAB 3: Information Architecture & Wireframe

Information Architecture menyusun struktur informasi sistem. Wireframe adalah kerangka tampilan awal.

Latihan

1. Buat sitemap aplikasi perpustakaan.

2. Buat wireframe halaman login.

BAB 4: Visual & Interaction Design

Elemen visual: typography, warna, layout. Interaction: microinteraction, state, feedback.

Latihan

1. Jelaskan visual hierarchy.

2. Buat skema warna aplikasi edukasi.

BAB 5: Prototyping & Testing

Prototype adalah simulasi interaksi sistem. Testing mengukur efektivitas dan kepuasan pengguna.

Latihan

1. Buat skenario usability testing.

2. Jelaskan A/B testing.

BAB 6: Accessibility & Responsive Design

Accessibility memastikan sistem dapat digunakan semua orang. Responsive design menyesuaikan tampilan pada berbagai perangkat.

Latihan

1. Jelaskan mobile-first.

2. Sebutkan prinsip accessibility.

RUBRIK PENILAIAN PROJECT

Aspek Penilaian

1. Kesesuaian dengan user research (20%)

2. Struktur IA dan wireframe (20%)

3. Kualitas visual design (20%)

4. Interaksi dan prototype (20%)

5. Presentasi dan dokumentasi (20%)

Skor:

• 85–100: Sangat Baik

• 70–84 : Baik

• 60–69 : Cukup

• <60 : Kurang

KUNCI JAWABAN LATIHAN PER BAB

BAB 1

1. UI berfokus pada tampilan visual dan elemen interaksi, sedangkan UX berfokus pada pengalaman menyeluruh pengguna.

2. UX berorientasi pada pengguna karena menekankan kebutuhan, kenyamanan, dan efisiensi penggunaan sistem.

BAB 2

1. Persona harus memuat identitas, tujuan, kebutuhan, dan pain points berdasarkan data riset.

2. Data kualitatif berupa wawancara/observasi; kuantitatif berupa angka hasil survei.

BAB 3

1. Sitemap menggambarkan struktur navigasi; wireframe menggambarkan kerangka tampilan.

2. Wireframe login minimal memuat input email, password, tombol login, dan link lupa password.

BAB 4

1. Visual hierarchy adalah pengaturan elemen agar pengguna mengetahui prioritas informasi.

2. Skema warna edukasi biasanya menggunakan warna biru/hijau untuk kesan tenang dan terpercaya.

BAB 5

1. Skenario usability testing memuat tujuan, task pengguna, waktu pengerjaan, dan metrik keberhasilan.

2. A/B testing membandingkan dua versi desain untuk melihat performa terbaik.

BAB 6

1. Mobile-first adalah pendekatan desain yang memprioritaskan tampilan mobile terlebih dahulu.

2. Prinsip accessibility: perceivable, operable, understandable, robust.

STUDI KASUS INDUSTRI NYATA

Studi Kasus 1: Redesign Aplikasi E-Commerce

Permasalahan: Tingginya cart abandonment. Pendekatan:

• Melakukan user research melalui survey.

• Menyederhanakan proses checkout.

• Mengurangi jumlah langkah pembayaran. Hasil: Konversi meningkat dan waktu checkout berkurang.

Studi Kasus 2: Aplikasi Mobile Banking

Permasalahan: Pengguna lansia kesulitan membaca teks kecil. Solusi:

• Meningkatkan ukuran font.

• Menambahkan kontras warna tinggi.

• Menyederhanakan navigasi. Hasil: Tingkat kepuasan pengguna meningkat.

Studi Kasus 3: Platform E-Learning

Permasalahan: Dropout rate tinggi. Solusi:

• Mendesain ulang dashboard.

• Menambahkan progress tracking.

• Memberikan feedback visual. Hasil: Engagement meningkat.

PENUTUP

Modul ini disusun sesuai pendekatan OBE dan standar SN-DIKTI dengan orientasi pada capaian pembelajaran terukur dan berbasis proyek. Modul ini dirancang untuk memberikan pemahaman konseptual dan keterampilan praktis dalam merancang sistem berbasis user-centered design, serta menghasilkan prototype yang dapat diuji dan dievaluasi secara sistematis.