webtmzaini
UI (User Interface) adalah tampilan visual dan elemen interaktif yang digunakan pengguna untuk berinteraksi dengan sistem.
UX (User Experience) adalah keseluruhan pengalaman pengguna saat menggunakan produk, termasuk aspek kegunaan, efisiensi, dan kepuasan.
Perbedaan UI dan UX:
UI → Fokus pada tampilan (warna, layout, tombol, tipografi)
UX → Fokus pada pengalaman (alur, kemudahan, kenyamanan)
Tokoh penting:
Don Norman (memopulerkan istilah UX)
Jakob Nielsen (prinsip usability)
Prinsip dasar UX:
1. Usability
2. Accessibility
3. Consistency
4. Feedback
5. Simplicity
Jelaskan perbedaan UI dan UX secara konseptual!
Mengapa UX lebih luas dibanding UI?
Sebutkan 5 prinsip dasar UX!
Berikan contoh kasus buruknya UX dalam aplikasi sehari-hari!
Siapa yang mempopulerkan istilah UX?
User Research adalah proses memahami kebutuhan pengguna melalui:
Interview
Survey
Observasi
Usability testing
Metode populer:
Design Thinking (Empathize → Define → Ideate → Prototype → Test)
Persona adalah representasi fiktif pengguna berdasarkan data riset.
Komponen Personal:
Nama
Usia
Pekerjaan
Goals
Pain points
Behavior
Soal Latihan
Apa tujuan utama user research?
Jelaskan tahapan Design Thinking!
Mengapa persona penting dalam UI/UX?
Buat contoh persona untuk aplikasi e-learning!
Apa perbedaan survey dan interview dalam riset UX?
Information Architecture (IA) adalah struktur pengorganisasian informasi dalam sistem.
Komponen IA:
Sitemap
Navigation
Hierarki konten
Labeling
Wireframe adalah kerangka dasar tampilan sebelum desain visual dibuat, Jenis Wireframe:
Low fidelity
Mid fidelity
High fidelity
Tools populer:
Figma
Adobe XD
Balsamiq
Jelaskan perbedaan sitemap dan wireframe!
Mengapa IA penting dalam UX?
Buat struktur sitemap aplikasi perpustakaan digital!
Apa kelebihan low-fidelity wireframe?
Sebutkan 3 tools untuk membuat wireframe!
Elemen Visual Design:
Typography
Color theory
Layout & grid
Iconography
Visual hierarchy
Interaction Design:
Microinteraction
Feedback system
Button states
Animation
Prinsip desain visual:
Contrast
Alignment
Repetition
Proximity
Hukum UX terkenal:
Nielsen’s Heuristics (oleh Jakob Nielsen)
Fitts’s Law
Hick’s Law
Jelaskan prinsip visual hierarchy!
Apa itu microinteraction?
Mengapa warna penting dalam UI?
Jelaskan Fitts’s Law!
Apa saja 10 Heuristik Nielsen?
Prototype adalah simulasi interaksi sistem.
Jenis:
Clickable prototype
Interactive prototype
Usability Testing bertujuan mengukur:
Effectiveness
Efficiency
Satisfaction
Metode testing:
A/B Testing
Remote testing
Moderated testing
Tools testing:
Maze
Hotjar
Soal Latihan
Apa perbedaan wireframe dan prototype?
Mengapa usability testing penting?
Jelaskan A/B Testing!
Buat skenario usability testing untuk aplikasi marketplace!
Apa indikator keberhasilan UX?
Accessibility memastikan sistem dapat digunakan oleh semua orang termasuk penyandang disabilitas.
Standar global:
World Wide Web Consortium (W3C)
WCAG (Web Content Accessibility Guidelines)
Responsive Design:
Mobile-first
Breakpoints
Flexible grid
Media queries
Apa itu WCAG?
Mengapa responsive design penting?
Jelaskan konsep mobile-first!
Sebutkan 3 prinsip accessibility!
Bagaimana cara menguji aksesibilitas website?
Program Studi : Sistem Informasi
Mata Kuliah : UI/UX Design
Bobot SKS : 4 SKS
Semester :
Dosen Pengampu : TM Zaini, S.Kom.,M.Kom.
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.
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.
CPMK-1 → CPL-1
CPMK-2 → CPL-1, CPL-3
CPMK-3 → CPL-4
CPMK-4 → CPL-4
CPMK-5 → CPL-2, CPL-3
Konsep UI/UX dan Human Centered Design
User Research dan Persona
Information Architecture
Visual & Interaction Design
Prototyping dan Usability Testing
Accessibility & Responsive Design
Student Centered Learning
Project Based Learning
Case Based Method
Praktikum Terbimbing
Tugas Individu: 20% Project Kelompok: 30% UTS: 20% UAS (Project Akhir): 20% Partisipasi: 10%
Topik: Pengantar UI/UX
Materi: Definisi, sejarah, ruang lingkup, peran UI/UX dalam industri.
Metode: Ceramah & diskusi
Topik: Prinsip Dasar UX & Usability
Materi: Usability, heuristik, human-centered design.
Topik: Design Thinking
Materi: Empathize, Define, Ideate, Prototype, Test.
Topik: User Research
Materi: Interview, survey, observasi, affinity diagram.
Topik: Persona & User Journey Map
Materi: Penyusunan persona, empathy map, customer journey.
Topik: Information Architecture
Materi: Sitemap, struktur navigasi, card sorting.
Topik: Wireframing
Materi: Low, mid, high fidelity wireframe.
Ujian Tengah Semester (Teori & Praktik Wireframe)
Topik: Visual Design
Materi: Typography, color theory, layout grid, visual hierarchy.
Topik: Interaction Design
Materi: Microinteraction, feedback, state, animation.
Topik: Prototyping
Materi: Clickable prototype, interactive prototype.
Topik: Usability Testing
Materi: A/B testing, task scenario, pengukuran efektivitas.
Topik: Accessibility & Responsive Design
Materi: WCAG, mobile-first, breakpoint.
Presentasi Project Final dan evaluasi desain.
UI adalah tampilan visual dan elemen interaktif sistem. UX adalah pengalaman menyeluruh pengguna saat menggunakan sistem.
Prinsip UX:
Usability
Consistency
Accessibility
Feedback
Simplicity
Jelaskan perbedaan UI dan UX.
Mengapa UX berorientasi pada pengguna?
User research adalah proses pengumpulan data untuk memahami kebutuhan pengguna. Metode: Interview, Survey, Observasi, Usability Testing.
Persona adalah representasi fiktif pengguna berdasarkan data riset.
Buat contoh persona aplikasi e-learning.
Jelaskan perbedaan data kualitatif dan kuantitatif.
Information Architecture menyusun struktur informasi sistem. Wireframe adalah kerangka tampilan awal.
Buat sitemap aplikasi perpustakaan.
Buat wireframe halaman login.
Elemen visual: typography, warna, layout. Interaction: microinteraction, state, feedback.
Jelaskan visual hierarchy.
Buat skema warna aplikasi edukasi.
Prototype adalah simulasi interaksi sistem. Testing mengukur efektivitas dan kepuasan pengguna.
Buat skenario usability testing.
Jelaskan A/B testing.
Accessibility memastikan sistem dapat digunakan semua orang. Responsive design menyesuaikan tampilan pada berbagai perangkat.
Jelaskan mobile-first.
Sebutkan prinsip accessibility.
Kesesuaian dengan user research (20%)
Struktur IA dan wireframe (20%)
Kualitas visual design (20%)
Interaksi dan prototype (20%)
Presentasi dan dokumentasi (20%)
Skor:
85–100: Sangat Baik
70–84 : Baik
60–69 : Cukup
<60 : Kurang
UI berfokus pada tampilan visual dan elemen interaksi, sedangkan UX berfokus pada pengalaman menyeluruh pengguna.
UX berorientasi pada pengguna karena menekankan kebutuhan, kenyamanan, dan efisiensi penggunaan sistem.
Persona harus memuat identitas, tujuan, kebutuhan, dan pain points berdasarkan data riset.
Data kualitatif berupa wawancara/observasi; kuantitatif berupa angka hasil survei.
Sitemap menggambarkan struktur navigasi; wireframe menggambarkan kerangka tampilan.
Wireframe login minimal memuat input email, password, tombol login, dan link lupa password.
Visual hierarchy adalah pengaturan elemen agar pengguna mengetahui prioritas informasi.
Skema warna edukasi biasanya menggunakan warna biru/hijau untuk kesan tenang dan terpercaya.
Skenario usability testing memuat tujuan, task pengguna, waktu pengerjaan, dan metrik keberhasilan.
A/B testing membandingkan dua versi desain untuk melihat performa terbaik.
Mobile-first adalah pendekatan desain yang memprioritaskan tampilan mobile terlebih dahulu.
Prinsip accessibility: perceivable, operable, understandable, robust.
Permasalahan: Tingginya cart abandonment. Pendekatan:
Melakukan user research melalui survey.
Menyederhanakan proses checkout.
Mengurangi jumlah langkah pembayaran. Hasil: Konversi meningkat dan waktu checkout berkurang.
Permasalahan: Pengguna lansia kesulitan membaca teks kecil. Solusi:
Meningkatkan ukuran font.
Menambahkan kontras warna tinggi.
Menyederhanakan navigasi. Hasil: Tingkat kepuasan pengguna meningkat.
Permasalahan: Dropout rate tinggi. Solusi:
Mendesain ulang dashboard.
Menambahkan progress tracking.
Memberikan feedback visual. Hasil: Engagement meningkat.
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.