Embedded Files
webtmzaini
UI / UIX Design
USER INTERFACE (UI) & USER EXPERIENCE (UX) DESIGN
USER INTERFACE (UI) & USER EXPERIENCE (UX) DESIGN
Materi
MODUL | Download
Canva
ui-ux-design-powerpoint
Pikbest
Ui virtual reality (freepik)
https://tmzaini.blogspot.com/
https://desty.page/tmzaini
Youtube@tmzaini
Tur VR Rumah Adat Lampung | Web Design | PPT
Bumper Logo IIB Darmajaya | Download
FIGMA | tools design | Learning SIGMA - Youtube
SURAT EDARAN | KALENDER SIAKAD
KOMPONEN PENILAIAN
RPS UI/UX Design | download
MATERI SIF25411 - UI/UX Design
SESI 1-2
BAB-1 Pengantar UI/UX Design
MATERI [klik untuk lihat materi]
MATERI [klik untuk lihat materi]
SESI-1 : Prinsip dasar UX : Kontrak Kuliah, Introduction, Usability, Accessibility & Consistency
SESI-2 : Prinsip dasar UX : Instalasi aplikasi UI/UX, Feedback & Simplicity
Materi
SESI-1 : Prinsip dasar UX : Kontrak Kuliah, Introduction, Usability, Accessibility & Consistency
SESI-2 : Prinsip dasar UX : Instalasi aplikasi UI/UX, Feedback & Simplicity
Materi
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
Soal Latihan
Soal Latihan
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?
SESI-3 : Interview, Survey & Observasi
SESI-4 : Design Thinking & User Pesona
Materi
SESI-3 : Interview, Survey & Observasi
SESI-4 : Design Thinking & User Pesona
Materi
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?
BAB 3 – Information Architecture & Wireframing
SESI-5 & SESI-6
BAB 3 – Information Architecture & Wireframing
SESI-5 & SESI-6
SESI-5 : Information Architecture (IA)
SESI-6 : Wireframe (Low , fidelity & High fidelity) , Tools (Figma, Adobe XD, dll)
Materi
SESI-5 : Information Architecture (IA)
SESI-6 : Wireframe (Low , fidelity & High fidelity) , Tools (Figma, Adobe XD, dll)
Materi
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
B. Soal Latihan
B. Soal Latihan
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!
BAB 4 – Visual Design & Interaction Design
SESI-7 & SESI-8
BAB 4 – Visual Design & Interaction Design
SESI-7 & SESI-8
Materi
Materi
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
Soal Latihan
Soal Latihan
Jelaskan prinsip visual hierarchy!
Apa itu microinteraction?
Mengapa warna penting dalam UI?
Jelaskan Fitts’s Law!
Apa saja 10 Heuristik Nielsen?
BAB 5 – Prototyping & Usability Testing
SESI-9 & SESI-10
BAB 5 – Prototyping & Usability Testing
SESI-9 & SESI-10
Materi
Materi
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?
BAB 6 – Accessibility & Responsive Design
SESI-11 & SESI-12
BAB 6 – Accessibility & Responsive Design
SESI-11 & SESI-12
Materi
Materi
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
Soal Latihan
Soal Latihan
Apa itu WCAG?
Mengapa responsive design penting?
Jelaskan konsep mobile-first!
Sebutkan 3 prinsip accessibility!
Bagaimana cara menguji aksesibilitas website?
MODUL AKADEMIK - RPS
MODUL AKADEMIK - RPS
MODUL AKADEMIK | USER INTERFACE (UI) & USER EXPERIENCE (UX) DESIGN
MODUL AKADEMIK | USER INTERFACE (UI) & USER EXPERIENCE (UX) DESIGN
IDENTITAS MATA KULIAH
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
RENCANA PEMBELAJARAN SEMESTER (RPS) BERBASIS OBE / SN-DIKTI
A. CPL (Capaian Pembelajaran Lulusan) Prodi (Contoh Format 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)
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
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
D. Bahan Kajian
Konsep UI/UX dan Human Centered Design
User Research dan Persona
Information Architecture
Visual & Interaction Design
Prototyping dan Usability Testing
Accessibility & Responsive Design
E. Metode Pembelajaran
E. Metode Pembelajaran
Student Centered Learning
Project Based Learning
Case Based Method
Praktikum Terbimbing
F. Penilaian dan Bobot
F. Penilaian dan Bobot
Tugas Individu: 20% Project Kelompok: 30% UTS: 20% UAS (Project Akhir): 20% Partisipasi: 10%
RENCANA PEMBELAJARAN PER PERTEMUAN (32 SESI)
Metode: Ceramah & diskusi
1-2 : Pengantar UI/UX | Materi: Definisi, sejarah, ruang lingkup, peran UI/UX dalam industri.
3-4 : Prinsip Dasar UX & Usability | Materi: Usability, heuristik, human-centered design.
5-6 : Design Thinking | Materi: Empathize, Define, Ideate, Prototype, Test.
7-8 : User Research | Materi: Interview, survey, observasi, affinity diagram.
9-10 : Persona & User Journey Map : Materi: Penyusunan persona, empathy map, customer journey.
11-12 : Information Architecture | Materi: Sitemap, struktur navigasi, card sorting.
13-14 : Wireframing | Materi: Low, mid, high fidelity wireframe.
15-16 (UTS) : Ujian Tengah Semester (Teori & Praktik Wireframe)
17-18 : Visual Design | Materi: Typography, color theory, layout grid, visual hierarchy.
19-20 : Interaction Design | Materi: Microinteraction, feedback, state, animation.
21-22 : Prototyping | Materi: Clickable prototype, interactive prototype.
23-24 : Usability Testing | Materi: A/B testing, task scenario, pengukuran efektivitas.
25-26 : Accessibility & Responsive Design | Materi: WCAG, mobile-first, breakpoint.
27-28 , 29-30 : Presentasi Project Final dan evaluasi desain
31-32 (UAS) : Ujian Akhir Semester.
RENCANA PEMBELAJARAN PER PERTEMUAN (32 SESI)
Metode: Ceramah & diskusi
1-2 : Pengantar UI/UX | Materi: Definisi, sejarah, ruang lingkup, peran UI/UX dalam industri.
3-4 : Prinsip Dasar UX & Usability | Materi: Usability, heuristik, human-centered design.
5-6 : Design Thinking | Materi: Empathize, Define, Ideate, Prototype, Test.
7-8 : User Research | Materi: Interview, survey, observasi, affinity diagram.
9-10 : Persona & User Journey Map : Materi: Penyusunan persona, empathy map, customer journey.
11-12 : Information Architecture | Materi: Sitemap, struktur navigasi, card sorting.
13-14 : Wireframing | Materi: Low, mid, high fidelity wireframe.
15-16 (UTS) : Ujian Tengah Semester (Teori & Praktik Wireframe)
17-18 : Visual Design | Materi: Typography, color theory, layout grid, visual hierarchy.
19-20 : Interaction Design | Materi: Microinteraction, feedback, state, animation.
21-22 : Prototyping | Materi: Clickable prototype, interactive prototype.
23-24 : Usability Testing | Materi: A/B testing, task scenario, pengukuran efektivitas.
25-26 : Accessibility & Responsive Design | Materi: WCAG, mobile-first, breakpoint.
27-28 , 29-30 : Presentasi Project Final dan evaluasi desain
31-32 (UAS) : Ujian Akhir Semester.
STUDI KASUS INDUSTRI NYATA | Rubrik Penilaian Project
Studi Kasus 1: Redesign Aplikasi E-Commerce
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
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
Studi Kasus 3: Platform E-Learning
Permasalahan: Dropout rate tinggi.
Solusi:
- Mendesain ulang dashboard.
- Menambahkan progress tracking.
- Memberikan feedback visual. Hasil: Engagement meningkat.
PENUTUP
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.
Youtube | Contoh
Page updated
Report abuse