1. Pengertian User Experience

User Experience (UX) adalah pengalaman yang dirasakan pengguna ketika menggunakan sebuah produk, aplikasi, website, atau sistem.

UX tidak hanya membahas apakah tampilan aplikasi terlihat bagus, tetapi juga:

• Apakah aplikasi mudah digunakan?
• Apakah pengguna memahami cara menggunakannya?
• Apakah pengguna dapat menyelesaikan tugas dengan cepat?
• Apakah pengguna merasa nyaman?
• Apakah pengguna merasa puas?
• Apakah pengguna mengalami kesulitan atau kebingungan?

Contoh sederhana

Bayangkan kita memiliki aplikasi pemesanan makanan.

Secara UI, aplikasi tersebut mungkin memiliki:

• Warna menarik
• Tombol bagus
• Icon modern
• Font yang rapi
• Foto makanan berkualitas

Tetapi jika pengguna harus melewati 10 halaman hanya untuk membeli makanan, maka UX-nya belum tentu baik.

Jadi:

UI membuat produk terlihat dan terasa menarik, sedangkan UX memastikan produk mudah, jelas, dan nyaman digunakan.

---

2. Perbedaan UI dan UX

UI	UX
User Interface	User Experience
Fokus pada tampilan	Fokus pada pengalaman pengguna
Warna	Kemudahan penggunaan
Typography	Alur pengguna
Button	Navigasi
Icon	Penyelesaian masalah
Layout	Kepuasan pengguna
Visual Design	User Journey

Contoh

Pada tombol “Beli Sekarang”:

UI:

• Warna tombol
• Ukuran tombol
• Bentuk tombol
• Font
• Icon

UX:

• Apakah tombol mudah ditemukan?
• Apakah pengguna tahu fungsi tombol?
• Apakah setelah diklik proses pembelian jelas?
• Apakah pengguna mendapatkan feedback?
• Apakah proses checkout mudah?

---

3. Tujuan UX Design

UX Design bertujuan menciptakan produk yang:

1. Useful

Produk memiliki manfaat bagi pengguna.

2. Usable

Produk mudah digunakan.

3. Accessible

Produk dapat digunakan oleh sebanyak mungkin pengguna, termasuk pengguna dengan keterbatasan tertentu.

4. Desirable

Produk memberikan pengalaman yang menyenangkan dan menarik.

5. Findable

Informasi dan fitur mudah ditemukan.

6. Credible

Pengguna merasa produk dapat dipercaya.

---

4. Prinsip Dasar User Experience

Ada beberapa prinsip penting dalam UX.

A. Simplicity

Buat sistem sesederhana mungkin.

Contoh:

❌ Form pendaftaran:

• Nama lengkap
• Nama panggilan
• Tempat lahir
• Tanggal lahir
• Alamat lengkap
• Kode pos
• Nomor rumah
• Hobi
• Pekerjaan
• Status
• Dan lain-lain

Padahal pengguna hanya perlu membuat akun.

Lebih baik meminta informasi yang benar-benar diperlukan.

---

5. Consistency

Elemen yang memiliki fungsi sama sebaiknya memiliki tampilan dan perilaku yang konsisten.

Contoh:

Jika tombol utama menggunakan:

Biru + rounded + teks putih

maka tombol utama di halaman lain sebaiknya menggunakan pola yang sama.

Contoh:

[ Simpan ]

[ Simpan ]

[ Simpan ]

Jangan membuat:

[ Simpan ]

( SAVE )

{ Simpan Data }

dengan desain berbeda-beda tanpa alasan.

---

6. Visibility

Fitur penting harus mudah terlihat.

Misalnya website toko online.

Pengguna harus mudah menemukan:

• Search
• Keranjang
• Login
• Kategori
• Checkout

Jangan menyembunyikan fungsi penting terlalu dalam.

---

7. Feedback

Sistem harus memberikan informasi kepada pengguna setelah pengguna melakukan tindakan.

Contoh:

Pengguna menekan tombol:

Simpan

Sistem memberikan feedback:

✅ Data berhasil disimpan.

Atau:

❌ Data gagal disimpan.

Feedback membuat pengguna mengetahui apa yang terjadi.

---

8. Error Prevention

UX yang baik tidak hanya menangani error, tetapi juga berusaha mencegah error terjadi.

Contoh:

Form nomor telepon.

Jika pengguna memasukkan:

abcdefgh

sistem sebaiknya memberikan informasi:

Nomor telepon hanya boleh berisi angka.

Lebih baik daripada pengguna baru mengetahui kesalahan setelah menekan tombol submit.

---

9. User Control

Pengguna harus merasa memiliki kontrol terhadap sistem.

Contoh:

Ketika pengguna menghapus data:

Hapus data mahasiswa?

Tampilkan:

[ Batal ]    [ Hapus ]

Jangan langsung menghapus data tanpa konfirmasi jika tindakan tersebut sulit dibatalkan.

---

10. Learnability

Produk harus mudah dipelajari oleh pengguna baru.

Contoh aplikasi kasir.

Pengguna baru sebaiknya dapat memahami:

Tambah Barang
      ↓
Masukkan Jumlah
      ↓
Hitung Total
      ↓
Bayar
      ↓
Cetak Struk

tanpa harus membaca manual yang panjang.

---

11. Accessibility

Accessibility berarti membuat produk dapat digunakan oleh berbagai kelompok pengguna.

Contohnya:

• Ukuran teks cukup besar
• Kontras warna cukup jelas
• Jangan hanya menggunakan warna untuk membedakan informasi
• Gambar memiliki alternative text
• Tombol memiliki label yang jelas
• Navigasi dapat digunakan dengan keyboard

Contoh:

❌

Klik ikon ini

Lebih baik:

Download Laporan

Karena pengguna langsung mengetahui fungsi tombol.

---

12. User Research

Salah satu bagian penting UX adalah User Research.

User Research dilakukan untuk memahami:

• Siapa pengguna?
• Apa kebutuhan pengguna?
• Apa masalah pengguna?
• Bagaimana pengguna menggunakan produk?
• Apa yang membuat pengguna kesulitan?

Metode User Research

Beberapa metode yang dapat digunakan:

1. Interview
2. Survey
3. Observation
4. Focus Group
5. Usability Testing
6. User Testing
7. Competitor Analysis

---

13. User Persona

User Persona adalah representasi pengguna berdasarkan hasil penelitian.

Contoh:

Persona

Nama: Andi
Umur: 21 tahun
Pekerjaan: Mahasiswa
Teknologi: Smartphone Android
Tujuan: Membeli tiket bioskop secara online
Masalah: Tidak suka proses checkout yang terlalu panjang

Kebutuhan

Andi membutuhkan:

• Search film
• Pilihan bioskop
• Pilihan kursi
• Pembayaran sederhana
• E-ticket langsung

Dengan persona ini, designer dapat membuat desain berdasarkan kebutuhan pengguna, bukan sekadar berdasarkan selera pribadi.

---

14. User Journey

User Journey menggambarkan perjalanan pengguna ketika menggunakan produk.

Contoh aplikasi pemesanan makanan:

Membuka aplikasi
       ↓
Mencari makanan
       ↓
Memilih restoran
       ↓
Memilih makanan
       ↓
Masuk keranjang
       ↓
Checkout
       ↓
Pembayaran
       ↓
Pesanan dikonfirmasi
       ↓
Makanan diterima

Pada setiap tahap kita dapat mencari:

• Apa yang dilakukan pengguna?
• Apa yang dipikirkan pengguna?
• Apa yang dirasakan pengguna?
• Apa masalah yang dialami pengguna?

---

15. User Flow

User Flow menggambarkan langkah-langkah pengguna untuk menyelesaikan sebuah tujuan.

Contoh:

Login

START
  ↓
Halaman Login
  ↓
Masukkan Email
  ↓
Masukkan Password
  ↓
Klik Login
  ↓
Validasi
  ↓
Berhasil?
 ↙     ↘
Ya      Tidak
↓         ↓
Dashboard  Pesan Error

User Flow membantu designer memahami bagaimana pengguna berpindah dari satu halaman ke halaman lainnya.

---

16. Information Architecture

Information Architecture (IA) adalah cara mengorganisasi informasi agar mudah dipahami dan ditemukan.

Contoh website toko online:

HOME
│
├── Produk
│   ├── Laptop
│   ├── Smartphone
│   └── Accessories
│
├── Promo
│
├── Tentang Kami
│
└── Kontak

Struktur yang baik membuat pengguna tidak bingung mencari informasi.

---

17. Wireframe

Wireframe adalah rancangan awal sebuah halaman sebelum dibuat menjadi desain visual.

Contoh:

----------------------------------
| LOGO        SEARCH       CART  |
----------------------------------
|                                |
|       BANNER PRODUK            |
|                                |
----------------------------------
| KATEGORI                       |
|                                |
| [Laptop] [HP] [Tablet]         |
----------------------------------
| PRODUK                         |
|                                |
| [IMG]   [IMG]   [IMG]          |
| Produk  Produk  Produk         |
----------------------------------

Wireframe fokus pada:

• Struktur
• Layout
• Navigasi
• Posisi elemen

Bukan fokus pada warna dan dekorasi.

---

18. Prototype

Prototype adalah simulasi produk yang memungkinkan pengguna mencoba alur aplikasi sebelum produk benar-benar dibuat.

Contoh:

Home
 ↓
Detail Produk
 ↓
Keranjang
 ↓
Checkout
 ↓
Pembayaran
 ↓
Selesai

Prototype dapat dibuat menggunakan berbagai aplikasi desain.

---

19. Usability Testing

Usability Testing dilakukan untuk mengetahui apakah pengguna dapat menggunakan produk dengan mudah.

Contoh pengujian aplikasi toko online.

Berikan tugas kepada pengguna:

“Silakan cari produk laptop, masukkan ke keranjang, kemudian lanjutkan sampai halaman pembayaran.”

Kemudian amati:

• Apakah pengguna menemukan search?
• Apakah pengguna memahami kategori?
• Apakah pengguna bingung?
• Berapa lama pengguna menyelesaikan tugas?
• Apakah pengguna melakukan kesalahan?

---

20. Usability

Usability biasanya berkaitan dengan beberapa aspek:

Effectiveness

Apakah pengguna berhasil menyelesaikan tugas?

Efficiency

Seberapa cepat pengguna menyelesaikan tugas?

Learnability

Apakah pengguna baru mudah mempelajari sistem?

Memorability

Apakah pengguna dapat mengingat cara menggunakan sistem?

Error

Seberapa sering pengguna melakukan kesalahan?

Satisfaction

Apakah pengguna merasa puas?

---

21. Contoh UX Buruk

Bayangkan sebuah website pembayaran.

Pengguna harus:

Home
 ↓
Login
 ↓
Dashboard
 ↓
Menu
 ↓
Transaksi
 ↓
Pembayaran
 ↓
Pilih Produk
 ↓
Checkout

Padahal seharusnya:

Produk
 ↓
Checkout
 ↓
Pembayaran

Jika alurnya terlalu panjang, pengguna dapat merasa:

• Bingung
• Bosan
• Tidak nyaman
• Meninggalkan website

---

22. Contoh UX yang Lebih Baik

Misalnya aplikasi pemesanan makanan.

Sebelum

Pilih makanan
↓
Login
↓
Isi profil
↓
Pilih alamat
↓
Konfirmasi
↓
Keranjang
↓
Checkout

Sesudah

Pilih makanan
↓
Keranjang
↓
Checkout
↓
Pilih alamat
↓
Bayar

Prinsipnya:

Kurangi langkah yang tidak diperlukan.

---

23. UX dan Emotional Design

UX juga berkaitan dengan emosi pengguna.

Produk dapat dirancang agar pengguna merasa:

• Aman
• Nyaman
• Percaya
• Senang
• Puas
• Tidak khawatir

Contoh:

Ketika pembayaran berhasil:

🎉 Pembayaran Berhasil!

Pesanan Anda sedang diproses.

Feedback tersebut memberikan rasa kepastian kepada pengguna.

---

24. UX Metrics

UX dapat diukur menggunakan beberapa indikator.

Task Success Rate

Berapa persen pengguna berhasil menyelesaikan tugas.

Time on Task

Berapa lama pengguna menyelesaikan tugas.

Error Rate

Berapa banyak kesalahan yang dilakukan pengguna.

Conversion Rate

Berapa banyak pengguna yang melakukan tindakan yang diharapkan.

Contoh:

100 orang membuka halaman kursus.

20 orang mendaftar.

Maka:

Conversion Rate = 20%

---

25. UX Design Process

Proses UX secara sederhana:

RESEARCH
   ↓
DEFINE
   ↓
IDEATE
   ↓
WIREFRAME
   ↓
PROTOTYPE
   ↓
TESTING
   ↓
IMPROVEMENT
   ↓
FINAL DESIGN

Research

Memahami pengguna.

Define

Menentukan masalah utama.

Ideate

Mencari solusi.

Wireframe

Membuat struktur halaman.

Prototype

Membuat simulasi.

Testing

Menguji dengan pengguna.

Improvement

Memperbaiki berdasarkan hasil testing.

---

26. Studi Kasus: Website Kursus Komputer

Misalnya kita ingin membuat website:

Rumah Belajar Komputer Privat

Masalah pengguna

Calon siswa ingin mengetahui:

• Kursus apa yang tersedia?
• Berapa biaya?
• Berapa lama kursus?
• Lokasi?
• Materi?
• Cara pendaftaran?

User Goal

Pengguna ingin menemukan kursus komputer yang sesuai dan mendaftar dengan mudah.

User Flow

Landing Page
     ↓
Pilih Kursus
     ↓
Detail Kursus
     ↓
Lihat Biaya
     ↓
Klik Daftar
     ↓
WhatsApp

UX yang baik

Informasi penting harus langsung terlihat:

KURSUS KOMPUTER PRIVAT

1 Guru : 1 Peserta

✓ Microsoft Office
✓ Excel
✓ Web Programming
✓ Networking
✓ Digital Marketing

[ DAFTAR SEKARANG ]

Pengguna tidak perlu mencari-cari informasi utama.

---

27. Latihan untuk Siswa

Studi Kasus

Buat rancangan UX untuk:

Aplikasi Sewa Lapangan Badminton

Tugas 1 — Tentukan pengguna

Contoh:

• Pelajar
• Mahasiswa
• Karyawan
• Komunitas badminton

Tugas 2 — Tentukan masalah

Contoh:

Pengguna kesulitan mengetahui jadwal lapangan yang masih tersedia.

Tugas 3 — Buat User Persona

Tentukan:

• Nama
• Umur
• Pekerjaan
• Tujuan
• Masalah
• Kebutuhan

Tugas 4 — Buat User Flow

Home
 ↓
Pilih Lapangan
 ↓
Pilih Tanggal
 ↓
Pilih Jam
 ↓
Cek Ketersediaan
 ↓
Booking
 ↓
Pembayaran
 ↓
Booking Berhasil

Tugas 5 — Buat Wireframe

Buat minimal:

1. Halaman Home
2. Halaman Pilih Lapangan
3. Halaman Booking
4. Halaman Pembayaran
5. Halaman Booking Berhasil

---

28. Kesimpulan

UX bukan hanya tentang membuat desain yang cantik.

UX berfokus pada bagaimana pengguna:

Menemukan → Memahami → Menggunakan → Menyelesaikan tugas → Merasakan pengalaman

Prinsip sederhananya:

“Design for the user, not for the designer.”

Seorang UI/UX Designer harus mampu melihat produk dari sudut pandang pengguna, bukan hanya dari sudut pandang pembuatnya.