User Interface
(UI)
& User
Experience
Model Design & Implementasi Antarmuka
(UX)
Kelompok 2: Intan Nurzari | Ermita Sari | Aldo Yuza | Darel
Revalino | Ari Hendrawan | Aditiya Pratama | Rofdan Azzaky |
Noviyanti | Bayu Gunawan | Irsyadul Fikri
Program Studi S1 Teknik Informatika | 2025
Latar
Belakang
Evolusi Interaksi: Perkembangan teknologi
mengubah cara manusia berinteraksi dengan
perangkat lunak.
Miskonsepsi Desain: Desain sering dianggap
hanya soal estetika, padahal merupakan proses
pemecahan masalah.
Gap Kebutuhan: Banyak produk berfungsi teknis
tapi sulit digunakan (User Experience buruk).
Solusi: Diperlukan model desain terstruktur (UCD,
Design Thinking) untuk menjembatani fungsi teknis
dan kebutuhan pengguna.
Model Proses Desain
Interaksi
Metodologi untuk menciptakan produk yang berpusat pada
pengguna
User Centered Design
(UCD)
Filosofi desain yang menempatkan pengguna sebagai pusat dari seluruh proses pengembangan.
Identify Needs Context Requirements Design Evaluate
Identifikasi pengguna Analisis lingkungan fisik Tetapkan kebutuhan Buat solusi dari konsep Uji langsung dengan
target dan masalah & sosial penggunaan. pengguna & bisnis. hingga purwarupa. pengguna.
mereka.
Stanford Design
Thinking
Empathi Defin Ideat Prototy Tes
ze e e pe t
Pahami perasaan Rumuskan Hasilkan ide Buat model nyata Uji coba untuk
& kebutuhan masalah yang sebanyak untuk mendapatkan
pengguna secara berpusat pada mungkin merepresentasika umpan balik.
mendalam. manusia. (Brainstorming). n ide.
Activity Centered Design
(ACD)
Fokus pada Tugas (Task)
Definisi: Berfokus pada "aktivitas" atau tugas
yang dilakukan pengguna untuk mencapai tujuan.
Penggunaan: Efektif untuk sistem dengan
kompleksitas tinggi atau fungsionalitas luas.
Metode: Memetakan tugas (tasks) secara rinci
untuk mengidentifikasi inefisiensi.
Konteks: Mempertimbangkan situasi penggunaan
(misal: penggunaan satu tangan).
Design Sprint (5
Hari)
Metodologi untuk memvalidasi ide dan memecahkan
masalah besar dalam waktu singkat.
Hari 1 (Understand): Memetakan masalah &
target.
Hari 2 (Diverge): Membuat sketsa solusi
alternatif.
Hari 3 (Decide): Memilih solusi terbaik untuk
diuji.
Hari 4 (Prototype): Membangun purwarupa
realistis.
Hari 5 (Validate): Uji coba dengan 5 pengguna
nyata.
Strategi Implementasi
Antarmuka
Responsive Design vs. Adaptive
Design
Responsive
Design
Fluid & Otomatis
Konsep: Tampilan beradaptasi secara otomatis
(fluid) terhadap berbagai ukuran layar.
Teknis: Menggunakan satu basis kode (single
codebase) dan CSS media queries.
Keunggulan: Efisiensi pengembangan (hanya 1
versi) dan pengalaman pengguna yang mulus
(seamless).
Fitur: Unit pengukuran relatif (%) dan lazy loading
untuk performa.
Adaptive
Design
Statis & Terstruktur
Konsep: Menggunakan beberapa versi tata letak
yang telah ditentukan sebelumnya (pre-defined
layouts).
Mekanisme: Sistem mendeteksi perangkat dan
memuat versi tampilan yang sesuai (Desktop,
Tablet, Mobile).Kontrol presisi terhadap pengalaman
Keunggulan:
pengguna (fitur spesifik per perangkat).
Kekurangan: Membutuhkan sumber daya lebih
besar untuk membuat dan mengelola banyak versi.
Kesimpulan &
Saran
Integra Implement Sara
si asi n
Pengembangan efektif memerlukan Pilihan antara Responsive dan Gabungkan empati Design Thinking
integrasi UI & UX melalui metode Adaptive Design krusial untuk dengan struktur UCD. Prioritaskan
terstruktur (UCD & Design Thinking). aksesibilitas di berbagai perangkat. Responsive Design untuk efisiensi.
Anggota
Kelompok 2
Intan Nurzari (2355201035) Ermita Sari (2355201024) Aldo Yuza Alfayet (2355201030)
Darel Revalino (2355201007) Ari Hendrawan (2355201035) Aditiya Pratama (2355201001)
Rofdan Azzaky (2355201015) Noviyanti (2355201014) Bayu Gunawan (2355201032)
Irsyadul Fikri (2355201029)
Image
Sources
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
Source: [Link]
[Link]
s=612x612&w=0&k=20&c=8NBFJu9NSiMWF6i512u3lO14NEKO3EU-ZTOxf785tcM=
Source: [Link]
[Link]
Source: [Link]