Arsitektur Proses Desain dalam IMK

Pendekatan Perancangan Desain

Dalam IMK, filosofi utama yang kita gunakan adalah User-Centered Design (UCD). Pendekatan ini menempatkan pengguna sebagai pusat dari seluruh proses pengembangan.

• User-Centered Design (UCD): Proses iteratif di mana desainer fokus pada pengguna dan kebutuhan mereka di setiap fase desain.

• Participatory Design: Melibatkan pengguna secara langsung ke dalam tim desain untuk memberikan masukan real-time.

https://share.google/DHilCTmRjc4UNMd60

Siklus Hidup Daya Guna (Usability Lifecycle)

Proses desain bukanlah garis lurus (linear), melainkan sebuah lingkaran yang terus berputar untuk mencapai kesempurnaan. Salah satu model yang populer adalah The Star Model atau ISO 9241-210. Secara umum, urutannya adalah:

1. Analisis Pengguna & Konteks: Siapa penggunanya? Apa yang ingin mereka capai?

2. Persyaratan (Requirements): Menentukan fitur apa yang wajib ada berdasarkan analisis awal.

3. Desain & Prototyping: Membuat sketsa (low-fi) hingga model interaktif (high-fi).

4. Evaluasi: Menguji desain kepada pengguna untuk menemukan hambatan (usability issues).

Model Aplikasi Desain Layout

Dalam mengorganisasikan proses desain ke dokumen kerja, kita menggunakan hirarki visual:

• Wireframe: Kerangka dasar (hitam-putih) untuk menentukan tata letak.

• Mockup: Desain statis yang sudah memiliki warna, tipografi, dan elemen visual.

• Prototype: Model yang sudah bisa diklik/diinteraksi untuk mensimulasikan alur kerja aplikasi.

User jouney map

Dalam Interaksi Manusia dan Komputer (IMK), User Journey adalah peta visual yang menggambarkan seluruh rangkaian pengalaman yang dilalui pengguna untuk mencapai tujuan tertentu saat menggunakan produk Anda.

Berbeda dengan User Flow yang hanya fokus pada klik-klik di layar, User Journey jauh lebih dalam karena mencakup aspek emosional, pikiran, dan hambatan pengguna.

Komponen Utama User Journey Map

Bayangkan sebuah tabel atau garis waktu yang memuat elemen-elemen berikut:

• Persona: Karakter fiktif yang mewakili target pengguna (Contoh: "Budi, mahasiswa yang sibuk").

• Fase Perjalanan: Tahapan besar (contoh: Awareness $\rightarrow$ Search $\rightarrow$ Transaction).

• Actions (Tindakan): Apa yang dilakukan pengguna di setiap tahap? (contoh: Mengetik nama produk di kolom pencarian).

• Touchpoints (Titik Kontak): Di mana interaksi terjadi? (contoh: Iklan Instagram, Halaman Checkout, Notifikasi Push).

• Emotions (Emosi): Bagaimana perasaan pengguna? Biasanya digambarkan dengan emoji (Senang 😄, Bingung 😐, Kesal 😡).

• Pain Points (Hambatan): Masalah yang dihadapi pengguna (contoh: "Proses verifikasi OTP terlalu lama").

• Opportunities (Peluang): Ide solusi untuk memperbaiki masalah tersebut.

FigJam tutorial: User journey mapping

Contoh Kasus: Aplikasi Pemesanan Kopi

Bayangkan Anda mendesain aplikasi kopi.

• Analisis: Pengguna adalah pekerja kantor yang terburu-buru.

• Dokumen Kerja: Anda membuat dokumen "User Flow" yang menunjukkan langkah dari memilih menu hingga pembayaran.

• Layout: Membuat wireframe tombol "Pesan Sekarang" yang diletakkan di area yang mudah dijangkau jempol.

Kuis Cepat (Check Point)

• Apa perbedaan mendasar antara Wireframe dan Mockup?

• Mengapa tahap "Evaluasi" harus dilakukan sebelum aplikasi diluncurkan ke pasar?

• Dalam UCD, siapakah yang menjadi penentu utama apakah sebuah desain "bagus" atau tidak?

Tantangan: Role Playing

Untuk memahami bagaimana mengorganisasikan proses desain, kita akan melakukan simulasi Role Playing.

Instruksi:

1. Bentuk kelompok berisi 3 orang.

2. Peran:

   • User: Orang yang memiliki masalah (misal: sulit mencari tempat parkir).

   • UX Researcher: Bertugas mewawancarai User dan mencatat kebutuhan.

   • UI Designer: Bertugas menggambar sketsa solusi (Wireframe) di kertas berdasarkan catatan Researcher.

3. Output: Dalam 15 menit, hasilkan satu lembar Dokumen Kerja yang berisi:

   • Daftar keluhan User.

   • Sketsa kasar solusi layout aplikasi.

PERBEDA PADA WIREFRAME - UI DESIGN TUTORIAL INDONESIA

Design Work Document

Nama Proyek: [Nama Aplikasi/Sistem]

Anggota Tim: [Nama 1, Nama 2, Nama 3]

Tanggal: [DD/MM/YYYY]

Bagian 1: Analisis Pengguna & Kebutuhan (Discovery)

Gunakan bagian ini untuk mendokumentasikan hasil wawancara atau pengamatan dari peran "User" dalam Role Play.

Bagian 2: Struktur & Alur (Information Architecture)

Visualisasikan bagaimana aplikasi bekerja secara logika sebelum masuk ke visual.

User Journey: Urutkan langkah-langkah pengguna (Langkah 1, Langkah 2, Selesai).

Daftar Fitur Prioritas:

[Fitur Utama]

1.

2.

3.

[Fitur Pendukung]

1.

2.

3.

Bagian 3: Desain Tata Letak (Wireframe/Layout)

Lampirkan atau gambar sketsa kasar (low-fidelity) di sini. Fokus pada penempatan elemen, bukan warna.

Catatan Desain:

Kenapa tombol diletakkan di tengah?

Apa informasi yang pertama kali dilihat pengguna?

Bagian 4: Lembar Evaluasi & Feedback

Gunakan bagian ini saat melakukan pengujian prototype kepada pengguna.

📝 Tips untuk Mahasiswa (Role Play):

Saat melakukan peran UX Researcher, pastikan Anda tidak hanya bertanya "Apa yang Anda mau?", tetapi tanyakanlah "Kenapa hal itu sulit bagi Anda?". Jawaban "Kenapa" adalah kunci desain yang baik.