Bab 1: Tiga Pilar Utama Apple HIG 🌟
Memahami 3 filosofi fundamental Apple Human Interface Guidelines (HIG) yang membuat aplikasi terasa premium dan intuitif.
Penjelasan Kelas Bayi 🍼
Clarity artinya mainan bayi harus jelas fungsinya (kancing bulat dipencet, tuas ditarik).
Deference artinya latar mainan tidak boleh terlalu ramai warna-warni sampai bayinya tidak bisa melihat mainan intinya. Biarkan mainan intinya yang menonjol!
Depth artinya mainan itu seperti tumpukan balok lego. Balok yang di atas menutupi balok di bawah, membuat bayi tahu mana yang lebih dekat dengan tangannya.
Filosofi Desain Apple:
- Clarity (Kejelasan): Teks harus mudah dibaca, ikon harus familiar, dan tujuan UI harus mudah dipahami secara instan.
- Deference (Kepatuhan Konten): Antarmuka UI harus halus dan tidak bersaing dengan konten pengguna. Penggunaan ruang putih (white space) membantu fokus.
- Depth (Kedalaman Visual): Transisi layar dan bayangan (shadow) menciptakan kesan ruang bertumpuk yang logis (contoh: sheet modal muncul dari bawah layar).
Pertanyaan Ujian HIG:
Apple sangat menekankan bahwa UI yang bagus adalah UI yang membantu pengguna menyelesaikan tugas mereka secara efisien, bukan UI dengan hiasan berlebihan. Jika ada pilihan jawaban yang mengutamakan ornamen grafis vs kepraktisan navigasi, selalu pilih yang mengutamakan kepraktisan dan kesederhanaan konten.
Bab 2: HIG Layout, Safe Area & Touch Targets 📐
Mengetahui standar tata letak layar iOS, ukuran minimum target tombol, dan penerapan Safe Area Layout Guide.
Penjelasan Kelas Bayi 🍼
Pernahkah kamu kesulitan memencet tombol kecil di layar HP? Itu karena tombolnya kekecilan! Apple menyarankan agar tombol mainan di layar berukuran minimal sebesar jempol bayi pintar agar tidak salah pencet. Ukuran ini dinamakan **44x44 points**!
Aturan Tata Letak & Ukuran iOS:
- Target Sentuh Minimum (iOS): Tombol interaktif minimal harus memiliki area sentuh berukuran 44x44 pt.
- Safe Area Layout Guide: Batasan wilayah layar aman yang terbebas dari lekukan fisik ponsel (rounded corners), kamera depan (Notch/Dynamic Island), dan Home Indicator di bagian bawah layar.
Jebakan Soal: Home Indicator Gestur Clash
Jika kamu meletakkan tombol aksi utama menempel langsung di dasar layar bawah iPhone tanpa Safe Area, tombol tersebut akan **tertimbun garis Home Indicator** sistem.
Akibatnya, ketika pengguna mencoba memencet tombol aplikasi, sistem iOS justru akan salah mengira pengguna ingin menggeser keluar aplikasi (*Home Gesture*). Tombol menjadi sangat sulit ditekan!
Bab 3: Spatial Computing (visionOS) & Layouts 🕶️
Memahami standar desain spatial target pada visionOS, layout navigasi kolom, dan adaptasi UI layar lebar.
Penjelasan Kelas Bayi 🍼
Di dunia kacamata ajaib visionOS, kita tidak memencet layar dengan jari, tapi **melihat dengan mata**! Agar matamu tidak lelah membidik target yang terlalu rapat, Apple membuat tombolnya lebih besar yaitu **60x60 pt** dan memberi jarak pemisah antartombol sebesar **16 pt**!
Aturan Desain Spasial & Navigasi iPad/Mac:
- visionOS Visual Target: Tombol visual minimal berukuran 60x60 pt untuk kemudahan pelacakan pandangan mata (*eye-gaze selection*).
- Target Separation / Padding: Jarak antar pusat tombol minimal harus memiliki pemisah sebesar 16 pt agar tidak terjadi tabrakan fokus mata.
- iPad & macOS Navigation: Untuk struktur bercabang dalam (misalnya: Client → Proyek → Tugas), gunakan pola Three-Column Navigation Split View (Sidebar - Master - Detail). Pola ini memaksimalkan layar lebar sehingga user tidak perlu klik tombol back berkali-kali.
Mengapa Flat Navigation Kurang Cocok di iPad/Mac?
Flat navigation seperti Tab Bar didesain untuk layar HP yang sempit. Jika dipaksakan di iPad atau Mac, tampilannya akan sangat kosong dan tidak efisien. Apple HIG sangat menyarankan sidebar berkolom agar alur navigasi terkesan profesional dan produktif.
Bab 4: System Integration (Widgets, Symbols, Haptics & Detents) 📳
Integrasi fitur sistem iOS seperti widget Lock Screen, rendering warna simbol, getaran haptik, modal detents, dan Live Activities.
Penjelasan Kelas Bayi 🍼
Getaran di HP itu seperti mainan krincingan bayi. Ada getaran halus saat kamu memutar roda tanggal (`Selection Haptics`), ada widget bunder kecil di layar kunci HP (`Accessory Widget`), dan ada laci modal yang bisa kamu tarik setengah layar saja (`Detents`)!
Ringkasan Integrasi Sistem iOS:
- Modal Presentation Sheet Detents: Batas ketinggian laci modal. iOS menyediakan `.medium()` (setengah layar), `.large()` (layar penuh), atau ukuran piksel kustom.
- Widget Families:
- *Home Screen*: Menggunakan `systemSmall`, `systemMedium`, `systemLarge`.
- *Lock Screen*: Menggunakan keluarga `accessory` (contoh: `accessoryCircular` untuk lingkaran bulat kecil baterai, `accessoryRectangular` untuk cuaca). - SF Symbols Multicolor Rendering: Mode rendering ikon agar warna aslinya tetap dipertahankan untuk mengomunikasikan arti secara dinamis (merah = kritis, hijau = aman).
- Selection Haptics: Menggunakan getaran bertipe `UISelectionFeedbackGenerator` untuk memberi umpan balik getar halus berulang (seperti saat scroll *date picker*).
- Live Activities: Pelacakan data real-time di layar terkunci. Ditampilkan di **Lock Screen bagian bawah** saat terkunci, dan mengecil ke **Dynamic Island** saat layar dibuka.
Bedakan Jenis Haptik:
- `UIImpactFeedbackGenerator` digunakan untuk tabrakan fisik visual (misal game bola menabrak gawang).
- `UINotificationFeedbackGenerator` digunakan untuk sukses/gagal/peringatan transaksi.
- `UISelectionFeedbackGenerator` digunakan khusus untuk perubahan nilai pemilihan yang cepat dan berulang.
Bab 5: Design Thinking & VoiceOver Accessibility 🗣️
Memahami metodologi riset pengguna, rasio kontras WCAG, dan kegunaan label aksesibilitas untuk tunanetra.
Penjelasan Kelas Bayi 🍼
Jika bayimu tidak bisa melihat tombol belanja bergambar keranjang belanjaan di layar, HP-mu harus bisa berbicara membacakan fungsinya dengan suara nyaring! Kita harus menuliskannya di label khusus bernama **`accessibilityLabel`**!
Kontras Warna & Aksesibilitas VoiceOver:
- 5 Tahap Design Thinking: Empathize → Define → Ideate → Prototype → Test.
- Rasio Kontras Warna WCAG 2.1:
- **4.5:1** → Rasio minimum kontras teks normal dengan latar belakangnya.
- **3:1** → Rasio minimum untuk komponen non-teks grafis (seperti garis border kotak input, ikon menu, status indikator visual). - VoiceOver `accessibilityLabel`: Atribut wajib diisi developer pada elemen yang hanya berupa gambar (misal ikon keranjang belanja 🛒 tanpa teks) agar VoiceOver dapat membacakan nama fungsi tombol tersebut secara verbal kepada tunanetra.
Pentingnya accessibilityLabel:
Jangan pernah mengisi `accessibilityLabel` dengan kata "Tombol" atau format nama file seperti "keranjang_button.png". Isilah dengan nama tindakan fungsional yang ramah manusia seperti `"Keranjang belanja"`. VoiceOver otomatis akan membacakan jenis elemennya secara cerdas di akhir kalimat.
Bab 6: UX Research — Journey Map, Wireframe & Usability Testing 🔬
Menguasai metode riset pengguna yang digunakan profesional: dari memetakan perjalanan pengguna hingga menguji prototype dengan 5 orang.
Penjelasan Kelas Bayi 🍼
Usability Testing itu seperti meminjamkan mainan baru ke 5 anak kecil dan mengamati cara mereka memakainya. Kamu tidak boleh membantu! Cukup perhatikan di mana mereka bingung dan catat. Dari 5 anak saja, kamu sudah bisa menemukan 85% masalah mainanmu (kata Jakob Nielsen)!
Wireframe → Mockup → Prototype adalah proses seperti membangun rumah: Wireframe = denah coretan pensil, Mockup = gambar render 3D cantik, Prototype = model rumah mini yang bisa dibuka pintunya.
User Journey Map — Peta Petualangan Pengguna:
- Apa itu? Visualisasi semua langkah, emosi, dan pain points yang dialami pengguna dari Awareness sampai Loyalty.
- 5 Komponen Utama:
- Persona: Siapa penggunanya (karakter fiktif berdasarkan riset nyata).
- Phases: Tahapan perjalanan (Awareness → Consideration → Purchase → Use → Loyalty).
- Actions: Apa yang dilakukan pengguna di setiap tahap.
- Thoughts: Apa yang dipikirkan/dirasakan pengguna.
- Pain Points: Di mana pengguna mengalami hambatan atau frustrasi.
Fidelity Design: Wireframe vs Mockup vs Prototype:
| Level | Nama | Deskripsi | Tools |
|---|---|---|---|
| Low-fi | Wireframe | Kerangka hitam-putih tanpa warna. Fokus pada layout & struktur. | Kertas, Balsamiq |
| High-fi Static | Mockup | Desain visual final dengan warna, font, dan aset nyata. Tidak bisa diklik. | Figma, Sketch |
| Interactive | Prototype | Bisa diklik, simulasi interaksi & navigasi nyata antar layar. | Figma Prototype, InVision |
Qualitative vs Quantitative Research:
- Qualitative (Kualitatif) — Memahami "Mengapa?"
Metode: Wawancara mendalam, observasi, focus group.
Contoh: "Kenapa pengguna tidak mau tap tombol Checkout?" → Wawancara 10 orang. - Quantitative (Kuantitatif) — Mengukur "Berapa banyak?"
Metode: Analytics, A/B testing, survei berskala besar.
Contoh: "43% user drop di halaman Checkout" → Data analytics 10.000 sesi.
Heuristic Evaluation — 5 dari 10 Heuristik Nielsen yang Paling Sering Diuji:
- Visibility of System Status: App harus selalu memberi tahu pengguna apa yang sedang terjadi (loading spinner, progress bar).
- Match Real World: Gunakan bahasa dan ikon yang familiar di kehidupan nyata, bukan jargon teknis.
- Error Prevention: Desain UI yang mencegah kesalahan sebelum terjadi (disable tombol jika form belum lengkap).
- Recognition over Recall: Tampilkan pilihan, jangan paksa pengguna mengingat (menu terlihat vs. command line).
- Aesthetic & Minimalist Design: Hapus informasi yang tidak relevan — setiap elemen ekstra bersaing dengan informasi penting.