17 Jan 2025 20:26 - 7 minutes reading

Konsep Iceberg dalam UX Design

Dalam dunia desain UX, proses menciptakan pengalaman pengguna tidak hanya soal estetika visual yang terlihat di permukaan. Sama seperti gunung es, sebagian besar pekerjaan penting dalam UX design tersembunyi di bawah permukaan. Untuk menghasilkan desain yang efektif dan efisien, kita harus memahami struktur yang mendasarinya, yang terdiri dari lima lapisan: Strategy, Scope, Structure, Skeleton, dan Surface.

Artikel ini akan mengupas setiap lapisan dari bawah ke atas, menunjukkan bagaimana masing-masing lapisan berperan dalam menciptakan pengalaman pengguna yang sempurna.


1. Strategy (Strategi): Dasar dari Segalanya

Lapisan paling bawah dalam gunung es UX design adalah Strategy, yang menjadi fondasi dari semua keputusan desain. Tahap ini menjawab pertanyaan besar seperti:

  • Apa tujuan utama produk ini?
  • Siapa target pengguna?
  • Masalah apa yang ingin diselesaikan oleh produk ini?

Komponen Utama dalam Strategy:

  1. Tujuan Bisnis: Apa yang ingin dicapai oleh perusahaan melalui produk ini?
  2. Kebutuhan Pengguna: Apa yang dibutuhkan pengguna untuk memecahkan masalah mereka?
  3. Penelitian UX: Melibatkan metode seperti wawancara pengguna, survei, atau analisis kompetitor.

Tools yang Digunakan:

  1. Google Forms/Typeform: Untuk survei kebutuhan pengguna.
  2. Miro/MURAL: Untuk brainstorming dan pemetaan ide.
  3. Google Analytics: Untuk menganalisis perilaku pengguna.
  4. UXPressia: Untuk membuat persona pengguna.

Ilmu yang Digunakan:

  1. User Research: Metode penelitian untuk memahami kebutuhan dan perilaku pengguna.
  2. Business Analysis: Memastikan keselarasan antara tujuan bisnis dan kebutuhan pengguna.
  3. Design Thinking: Proses iteratif untuk menemukan solusi kreatif.
  4. Problem Framing: Mengidentifikasi masalah utama yang ingin diselesaikan.

Tanpa strategi yang jelas, desain akan kehilangan arah dan tujuan. Dalam tahap ini, desainer UX bekerja sama dengan pemangku kepentingan untuk memastikan keselarasan antara kebutuhan bisnis dan pengguna.


2. Scope (Lingkup): Menentukan Ruang Lingkup

Setelah strategi ditentukan, lapisan berikutnya adalah Scope. Ini mencakup fitur dan fungsi yang akan dimasukkan ke dalam produk. Lingkup adalah jembatan antara tujuan strategis dan elemen-elemen yang akan diimplementasikan.

Komponen Utama dalam Scope:

  1. Persyaratan Fungsional: Apa yang harus dilakukan oleh produk? Misalnya, fitur login, sistem pembayaran, atau personalisasi.
  2. Persyaratan Konten: Informasi apa yang harus disediakan kepada pengguna? Contohnya deskripsi produk, panduan penggunaan, atau FAQ.

Tools yang Digunakan:

  1. Notion/Trello: Untuk mencatat dan mengatur daftar fitur.
  2. Jira: Untuk manajemen proyek dan mengatur prioritas fitur.
  3. Lucidchart: Untuk membuat diagram alur kebutuhan fungsional.
  4. Microsoft Word/Excel: Untuk mendokumentasikan persyaratan teknis.

Ilmu yang Digunakan:

  1. Requirement Gathering: Proses mengumpulkan kebutuhan dari pengguna dan pemangku kepentingan.
  2. Prioritization Techniques:
    • MoSCoW (Must have, Should have, Could have, Won’t have).
    • Value vs. Effort Matrix.
  3. Agile Methodology: Membantu menentukan iterasi berdasarkan lingkup.
  4. Content Strategy: Mengidentifikasi dan mengatur kebutuhan konten.

Menentukan ruang lingkup membantu menghindari scope creep, yaitu ketika proyek meluas melebihi batas awal yang disepakati. Desainer UX dan tim produk bekerja untuk memastikan ruang lingkup realistis dan sesuai dengan strategi.


3. Structure (Struktur): Membentuk Alur Informasi

Setelah ruang lingkup ditentukan, tahap berikutnya adalah membangun Structure, yaitu bagaimana informasi dan fitur diorganisasi secara logis. Tujuannya adalah memastikan pengguna dapat menavigasi produk dengan mudah.

Komponen Utama dalam Structure:

  1. Arsitektur Informasi (Information Architecture):
    • Bagaimana informasi dikelompokkan, diurutkan, dan diberi label.
    • Contoh: Menentukan kategori produk di situs e-commerce.
  2. Alur Pengguna (User Flow):
    • Langkah-langkah yang diambil pengguna untuk mencapai tujuan tertentu.
    • Contoh: Dari halaman beranda hingga menyelesaikan pembelian.

Tools yang Digunakan:

  1. Sitemap Generator (Octopus/WriteMaps): Untuk membuat peta situs.
  2. Axure RP: Untuk prototipe interaktif.
  3. Overflow: Untuk memvisualisasikan alur pengguna (user flow).
  4. Card Sorting Tools (Optimal Workshop): Untuk pengelompokan informasi berdasarkan persepsi pengguna.

Ilmu yang Digunakan:

  1. Information Architecture (IA): Mencakup pengorganisasian, pengelompokan, dan pelabelan informasi.
  2. User Flow Design: Merancang langkah-langkah yang diambil pengguna untuk mencapai tujuan tertentu.
  3. Cognitive Psychology: Untuk memahami bagaimana pengguna memproses informasi.
  4. Navigation Design: Mendesain pola navigasi yang intuitif.

Struktur yang baik memastikan bahwa informasi mudah ditemukan dan pengguna tidak merasa frustrasi saat menjelajahi produk.


4. Skeleton (Kerangka): Merancang Detail Tata Letak

Lapisan keempat adalah Skeleton, yaitu tahap di mana kerangka kerja visual mulai dibentuk. Skeleton adalah rancangan detail dari setiap elemen di halaman atau layar.

Komponen Utama dalam Skeleton:

  1. Wireframe:
    • Kerangka tata letak halaman yang menunjukkan posisi elemen seperti tombol, gambar, atau teks.
    • Contoh: Tombol “Tambah ke Keranjang” ditempatkan di bawah deskripsi produk.
  2. Desain Interaksi:
    • Bagaimana elemen-elemen berinteraksi saat pengguna berinteraksi dengannya.
    • Contoh: Efek hover pada tombol atau animasi transisi antar halaman.

Tools yang Digunakan:

  1. Figma/Adobe XD: Untuk membuat wireframe dan prototipe awal.
  2. Balsamiq: Untuk wireframe low-fidelity.
  3. Sketch: Untuk desain kerangka yang lebih detail.
  4. Maze/UsabilityHub: Untuk menguji wireframe dengan pengguna.

Ilmu yang Digunakan:

  1. Interaction Design: Mendesain cara elemen di layar merespons interaksi pengguna.
  2. Visual Hierarchy: Menentukan prioritas elemen berdasarkan tata letak.
  3. Gestalt Principles: Prinsip-prinsip psikologi visual untuk menciptakan desain yang seimbang.
  4. Wireframing Techniques: Teknik untuk membuat kerangka tata letak dengan fokus pada fungsionalitas.

Skeleton memberikan panduan visual bagi pengembang untuk membangun antarmuka yang fungsional tanpa elemen dekoratif.


5. Surface (Permukaan): Menampilkan Keindahan

Lapisan paling atas dalam gunung es UX design adalah Surface, yaitu apa yang terlihat oleh pengguna. Ini adalah tahap di mana estetika visual dirancang untuk memberikan kesan pertama yang positif.

Komponen Utama dalam Surface:

  1. Desain Visual:
    • Warna, tipografi, ikonografi, dan elemen dekoratif lainnya.
  2. Interaktivitas:
    • Animasi halus yang membuat pengalaman pengguna lebih menyenangkan.
    • Contoh: Animasi saat produk dimasukkan ke keranjang belanja.

Tools yang Digunakan:

  1. Figma/Adobe XD: Untuk desain visual akhir.
  2. Adobe Photoshop/Illustrator: Untuk elemen grafis seperti ikon dan ilustrasi.
  3. LottieFiles: Untuk animasi ringan.
  4. InVision: Untuk prototipe interaktif dengan elemen desain visual lengkap.

Ilmu yang Digunakan:

  1. Visual Design: Termasuk warna, tipografi, dan ikonografi.
  2. Color Theory: Pemahaman tentang kombinasi warna yang harmonis.
  3. Typography: Memilih font yang sesuai untuk pengalaman pengguna.
  4. Motion Design: Menerapkan animasi untuk interaksi yang menarik.

Surface adalah hasil akhir dari seluruh proses desain. Namun, tanpa fondasi yang kuat dari lapisan sebelumnya, desain yang indah sekalipun tidak akan memberikan pengalaman pengguna yang optimal.


Mengintegrasikan Semua Lapisan

Keberhasilan UX design bergantung pada bagaimana kelima lapisan ini bekerja bersama. Berikut adalah langkah-langkah untuk memastikan integrasi yang mulus:

  1. Keterlibatan Tim yang Konsisten: Semua anggota tim harus memahami strategi produk untuk menjaga arah yang sama.
  2. Pengujian Berulang: Melibatkan pengguna dalam pengujian di setiap tahap untuk memastikan desain sesuai kebutuhan.
  3. Iterasi Berkelanjutan: Menyesuaikan desain berdasarkan umpan balik pengguna dan data penggunaan.

Studi Kasus: Penerapan Konsep Gunung Es

Sebagai contoh, bayangkan sebuah tim sedang mendesain aplikasi e-commerce untuk UMKM:

  1. Strategy: Tujuan aplikasi adalah membantu UMKM menjangkau pelanggan baru dan meningkatkan penjualan.
  2. Scope: Fitur utama termasuk katalog produk, sistem pembayaran, dan ulasan pelanggan.
  3. Structure: Produk dikelompokkan berdasarkan kategori seperti makanan, fashion, dan kerajinan tangan.
  4. Skeleton: Wireframe dibuat untuk memastikan tombol navigasi mudah diakses.
  5. Surface: Desain visual menampilkan tema yang menarik dengan warna-warna cerah yang mencerminkan kerajinan lokal.

Dengan pendekatan ini, aplikasi yang dihasilkan tidak hanya terlihat indah, tetapi juga efektif dan mudah digunakan.


Kesimpulan

Konsep gunung es dalam UX design mengajarkan bahwa keindahan antarmuka hanyalah puncak dari proses panjang yang melibatkan strategi, ruang lingkup, struktur, dan kerangka. Sebagai seorang desainer UX, penting untuk memahami bahwa desain yang baik dimulai dari dasar yang kuat. Dengan menerapkan pendekatan ini, kita dapat menciptakan pengalaman pengguna yang tidak hanya estetis, tetapi juga bermakna dan fungsional.

Dengan melibatkan tools dan ilmu yang relevan di setiap lapisan konsep gunung es UX Design, desainer dapat memastikan hasil akhir yang tidak hanya estetis, tetapi juga fungsional dan sesuai kebutuhan pengguna. Setiap lapisan memiliki tantangan dan fokus tersendiri, sehingga penting untuk menggunakan kombinasi alat dan metode yang tepat untuk mencapai hasil terbaik.

Referensi :

  1. Don’t Make Me Think: A Common Sense Approach to Web Usability
    Penulis: Steve Krug
    Tautan: Amazon Link
    Relevansi: Buku ini membahas dasar-dasar desain antarmuka pengguna dan pentingnya pendekatan berbasis pengguna dalam desain.
  2. The Design of Everyday Things
    Penulis: Don Norman
    Tautan: Amazon Link
    Relevansi: Membahas konsep desain yang berfokus pada pengalaman pengguna dengan pendekatan kognitif.