Program Studi Teknik Informatika

Universitas 17 Agustus 1945 Surabaya

Gestalt & Hirarki Visual UI

Memahami bagaimana penglihatan manusia bekerja, dan pemanfaatannya dalam desain UI

4616223 | Interaksi Manusia-Komputer

Agyl A. Rahmadi, S.Kom. M.A

R&D Group: Intelligent Mobile & Creative Computing
Sub-Topik dan Capaian Pembelajaran
▪ Teori dan Prinsip Gestalt
Menjelaskan penerapan prinsip gestalt dalam desain UI
▪ Pola Desain UI
Menerapkan berbagai pola desain dalam pembuatan UI
▪ Hirarki Visual
Menerapkan konsep hirarki visual, pemanfaatan ruang
kosong, penjajaran objek, dan ukuran relatif dalam
desain UI
▪ Wirefarming
Menerapkan wireframing untuk prototyping atau
mempelajari desain sebuah UI
Teori dan Prinsip Gestalt
Bagaimana psikolgi penglihatan manusia bekerja
“Our Vision is Optimized to See Structure”
Jeff Johnson, Designing with the Mind in Mind – Ch. 2

“Penglihatan Kita Teroptimalkan dalam Melihat Struktur”

Gestalt Principle of Visual Perception
Merupakan hasil penelitian persepsi visual manusia oleh
sekelompok ahli psikologi dari Jerman (Gestalt = “bentuk utuh”
dalam bahasa Jerman). Hasil penelitiannya: sistem visual kita
secara otomatis menentukan struktur dari yang kita lihat, dan
selalu mempersepsikan keseluruhan bentuk dan objek –bukan
bentuk-bentuk terpisah seperti tepi, garis, atau wilayah.
Terdapat 4 sifat utama (properties) dari persepsi visual kita dalam
“The whole is other than
teori Gestalt: the sum of the parts”
1. Emergence – bentuk utuh dikenali sebelum detailnya. Kita — Kurt Koffka
melihat dan mengenali bentuk sederhana lebih cepat.
2. Reification – pikiran kita selalu mengisi bagian yang hilang.
Kita melihat dan mengenali objek walau pun tidak utuh.
3. Multi-Stability – pikiran kita cenderung menghindari
ketidakpastian, sehingga fokus melihat dengan satu cara
4. Invariance – kita sangat baik dalam mengenali kesamaan dan
perbedaan visual
Emergence
Apa yang Anda lihat dari
pola acak berwarna
hitam di samping?
Emergence
Anjing dalmatian yang
sedang mengendus-
endus di kebun
Emergence – the whole is identified before the parts
Walau pun disusun dari banyak
bulatan dengan berbagai ukuran, kita
akan langsung membaca gambar di
samping sebagai “UX”.
Cara kita mengenali wajah seseorang
juga seperti itu – tidak melihat dahulu
organ tubuh di kepala satu per satu,
tapi wajah secara keseluruhan kita
kenali terlebih dahulu.
Diambil dari https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/

Karena itu jika ada perubahan “pola”

dari wajah seseorang yang kita kenal,
kita akan “pangling” – mencoba
mengenal kembali
Reification - our mind fills in the gaps
Berbagai bentuk dengan bagian yang hilang, tapi sifat
reification membuat kita berpikir (dari kiri atas):
a) Bentuk lingkaran
b) Ada sebuah segitiga putih di tengah
c) Bentuk hewan panda
d) Ada 2 garis panjang berwarna oranye & ungu yang
tertutup lingkaran di tengahnya
e) Ular yang sedang berenang dengan sebagian badannya
di bawah permukaan air
f) Bola berduri
Multi-stability - the mind seeks to avoid uncertainty
Berbagai bentuk yang bisa dilihat dengan 2 cara
tergantung fokus, tapi tidak sekaligus (dari kiri atas):
a) Kubus dari kanan atas, atau kiri bawah
b) Piala atau dua wajah orang
c) Impossible object: trisula 3 kaki tapi pangkal
hanya 2
d) Bentuk pohon, atau kepala gorila dan singa
betina
e) Orang mengendarai kuda yang keduanya
berwarna hitam, atau keduanya berwarna putih
Invariance - we’re good at recognizing similarities and differences
Berbagai variasi bentuk dari bentuk dasar (A) –
yang juga terdapat variasi rotasi.

Dari bentuk dasar ini kita bisa tetap mengenali:

(B) Berbagai bentuk yang hampir mirip namun
berbeda dengan bentuk dasar
(C) Bentuk dasar yang diberi berbagai derajat
rotasi dan distorsi (skewed)
(D) Bentuk dasar yang diberi berbagai gaya visual
Gestalt Principles
Dari 4 sifat utama dalam teori gestalt tersebut, masing-masing bisa
dijabarkan lagi dalam berbagai aturan (laws) dengan bentuk aturan
umum (generalized law) disebut dengan law of prägnanz (good figure)
atau law of simplicity: persepsi kita cenderung menyederhanakan
bentuk kompleks yang kita lihat menjadi bagian bentuk yang lebih
sederhana.
Untuk prinsip lain yang lebih spesifik, berikut berbagai prinsip gestalt
yang bisa diterapkan dalam desain UI:
Emergence Reification
▪ Proximity ▪ Closure
▪ Common Region ▪ Continuity
▪ Periodicity

Multi-stability Invariance
▪ Figure-Ground ▪ Similarity
▪ Focal Point ▪ Common Fate
▪ Past Experience
Prinsip-Prinsip Gestalt
Simplicity (Law of Pragnanz) & Symmetry
menjelaskan persepsi kita yang cenderung menyederhanakan bentuk kompleks yang
kita lihat, dan cenderung memberinya bentuk yang simetri
Simplicity (Law of Pragnanz) & Symmetry
Law of Pragnanz (good figure)
atau Law of Simplicity
merupakan bentuk umum
dari berbagai prinsip gestalt.
Secara spesifik prinsip ini
yang membantu persepsi kita
yang memberi interpretasi
bentuk 3D terhadap bentuk
2D kompleks.
Symmetry (Penerapan)
Bentuk yang simetri akan lebih nyaman bagi pengguna (kanan) dibanding yang tidak (kiri)
Proximity
• Proximity menjelaskan bahwa
jarak antar benda
mempengaruhi persepsi kita
apakah mereka tergolong
dalam satu kelompk atau
tidak
• Benda-benda yang dekat
cenderung kita persepsikan
menjadi satu kelompok, yang
jauh tidak
Proximity (Baik)
Tombol fungsi add, remove, Tombol untuk fungsi ada di kanan yang mengelompok jadi satu
properties mengelompok di kanan
Proximity (Penerapan)
Jarak antar komponen bisa lebih memudahkan kita fokus melihat konten
Proximity (Buruk)
Radio button yang terlalu dekat menjadi seakan-akan satu kelompok
Common Region
benda yang memiliki kemiripan
dan dikelilingi oleh suatu batas,
akan kita persepsikan sebagai
satu kelompok yang lebih
khusus.
Common Region (Penerapan)
Dalam UI akan membantu untuk menentukan prioritas informasi yang diberikan, atau menarik perhatian
pengguna bahwa ada hal khusus yang terjadi
Periodicity
Kita cenderung mengenali pola
dari bentuk yang diulang-ulang
dan menjadi bentuk utuh
secara keseluruhan.
Periodicity (Penerapan)
Dalam UI, menu navigasi atau konten (tab, list, dsb) adalah salah satu bentuk
periodicity. Prinsip ini bisa digunakan untuk membuat “ritme” dari penggunaan UI.
Similarity
benda yang berbentuk sama cenderung
kita kelompokkan menjadi satu, atau kita
anggap berbeda dengan yang serupa jika
ada sedikit perbedaan
Similarity (Baik)
Pengaturan orientasi printer di Mac memiliki Pengaturan kesamaan panjang dalam form bisa
bentuk yang sama sehingga mudah dibedakan memudahkan pengguna membedakan
dengan yang lain
Similarity (Penerapan)
Membedakan gaya tampilan tombol dengan fungsi yang berbeda akan memudahkan pengguna mengambil
keputusan
Continuity
menjelaskan persepsi kita yang cenderung mengisi “data yang hilang” dari sebuah
bentuk sehingga seakan-akan bentuk tersebut utuh
Continuity (Penerapan)
Slider cenderung kita lihat sebagai satu rel panjang dengan satu pegangan (handle)
Continuity (Penerapan)
Menu navigasi yang “menyambung” akan memudahkan pengguna dalam menggunakan
Closure
yaitu persepsi kita yang cenderung mengisi “data yang hilang” dari sebuah bentuk
sehingga seakan-akan bentuk tersebut utuh
Closure (Penerapan)
Penerapan dalam loading/progres bar (kanan) akan lebih membantu pengguna dalam
mengetahui “kapan selesai” dibanding desain yang kreatif (kiri)
Common Fate
menjelaskan persepsi kita yang cenderung mengelompokkan benda-benda yang
“bernasib” sama
Common Fate (Penerapan)
Akan sangat membantu
dalam desain visualisasi
informasi.
Di kanan setiap negara
direpresentasikan sebagai
bentuk bulatan yang berbeda
ukuran untuk menunjukkan
nilai tertentu
Common Fate (Penerapan)
Konsistensi desain terkait daftar produk atau galeri akan mempermudah pengguna
(kanan) dibanding yang terlalu kreatif (kiri)
Figure/Ground
Menjelaskan persepsi kita yang cenderung memisahkan antara benda di latar depan
(foreground) dengan benda di latar belakang (background). Benda yang lebih kecil
cenderung kita taruh di depan (foreground)
Figure/Ground
Penglihatan kita tidak selalu dengan benar memisahkan, terkadang tergantung dari
bentuk yang ada dan fokus kita kemana
Figure/Ground (Penerapan)
Latar belakang yang transparan akan memberi nuansa yang menguatkan
Figure/Ground (Penerapan)
Komponen UI bentuk “Modal” memanfaatkan prinsip ini untuk membantu fokus
Figure/Ground (Penerapan)
Salah satu implementasinya adalah membuat “latar belakang” menjadi berbeda
Focal Point
persepsi visual kita cenderung mengenali lebih cepat benda yang berbeda di dalam
satu kelompok, atau yang memiliki warna yang lebih menyolok.
Focal Point (Penerapan)
Di situs berita bisa digunakan untuk membuat pembaca memahami bagian yang khusus
(eksklusif, terpopuler, dsb). Dalam situs e-commerce biasanya digunakan untuk menarik
perhatian pembeli terkait promo yang sedang berjalan.
Past Experience
persepsi visual kita cenderung mengenal atau mempolakan bentuk yang kita lihat
berdasarkan pengalaman visual di masa lalu. Contoh: Gambar di bawah akan kita
persepsikan sebagai bentuk lampu lalu lintas di perempatan jalan raya.
Past Experience (Penerapan)
Penerapan dalam desain UI yaitu terkait pemanfaatan berbagai pola desain UI (UI
Design Patterns) agar UI yang kita buat lebih mudah digunakan.
Pola Desain UI
Solusi-sousi yang sudah dicoba dan teruji
Pola Desain UI
Adalah komponen UI yang bisa digunakan ulang
(reusable) atau sering digunakan (recurring) yang
digunakan desainer untuk membuat solusi dari berbagai
masalah umum dalam desain UI.
Secara sederhana: pola desain adalah solusi dari
masalah yang selalu muncul dalam desain UI. Sehingga
memakai pola desain akan membuat UI lebih “intuitif”
bagi pengguna – dalam arti pengguna sudah tahu
bagaimana cara menggunakannya.
Contoh:
Breadcrumbs digunakan untuk memberi informasi ke
pengguna sedang berada di halaman mana, sekaligus
memberi akses ke halaman-halaman sebelumnya.
Kenapa memakai Pola Desain?
Pola desain bukan sekadar UI yang bisa di-copy
paste, tapi juga strategi untuk mendesain UI dengan
cepat dan efisien untuk masalah dalam proses
desain.
Berdasarkan prinsip gestalt past experience, pola
desain akan membantu pengguna mengenal dan
lebih cepat mengerti dalam menggunakan UI yang
ada – sehingga beban kognitif pengguna rendah,
dan kebergunaan (usability) dari UI meningkat.
Yang perlu diperhatikan adalah konteks dari masalah
desain UI: apakah memang cocok dengan pola
tertentu atau harus memakai yang lain – tidak asal
menjiplak pola yang ada
Jenis Umum Pola Desain UI
Setidaknya terdapat beberapa jenis umum dalam pola
desain UI yang mendasar:
▪ Tata Letak (Layouting) – terkait dengan di mana sebuah
informasi sebaiknya diletakkan dalam sebuah halaman
▪ Navigasi (Navigation) – terkait dengan bagaimana
pengguna mengeksplorasi isi dan mencapai tujuannya
▪ Konten (Content) – terkait dengan pengelolaan dan
penayangan informasi kepada pengguna
▪ Masukan Pengguna (User Input) – terkait dengan
proses ketika pengguna perlu memberikan masukan ke
sistem
▪ Pengenalan (Onboarding) – terkait dengan proses awal
pengguna mulai menggunakan
Contoh Pola Desain (1)
Berdasarkan Jovanoniv (2009), setidaknya ada 10 pola desain
yang sebaiknya dipertimbangkan dalam desain UI, antara lain:
1. Lazy Registration – mengizinkan pengguna menggunakan
aplikasi secara penuh tanpa harus mendaftar menjadi
anggota atau membuat login. Contoh: di toko online bisa
membeli tanpa harus mendaftar dulu
2. Progressive Disclosure – secara perlahan mengungkap
informasi sehingga tampilan UI tidak terlalu padat. Contoh:
komentar di media sosial tidak semuanya ditampilkan
3. Forgiving Format – ketika meminta input dari pengguna,
jangan batasi pengguna dengan format yang terlalu ketat.
Contoh: ketika memasukkan nama kota bisa dengan nama
yang “populer”
4. Clear Primary Actions – tindakan utama harus lebih jelas
dari tindakan lainnya. Contoh: warna tombol untuk
“submit” harus lebih jelas dari “cancel”
Contoh Pola Desain (2)
5. Breadcrumbs – sebuah peta jalan bagi pengguna untuk
memberitahu sedang berada di mana . Contoh: di toko
online pengguna bisa tahu berada dalam “kategori” apa
ketika mencari produk
6. Account Registration – ketika pengguna harus melakukan
login untuk menggunakan fitur tertentu, maka mudahkan
pengguna dalam mendaftar dengan menyaratkan informasi
yang minimal. Contoh: hanya email atau nomor ponsel dan
password
7. Required Field Marker – dalam web form dan pengguna
harus memasukkan data, maka petunjuk mana yang harus
dimasukkan harus jelas bagi pengguna
8. Steps Left – jika pengguna harus menjalani tahapan dalam
menggunakan, maka perjelas seberapa jauh pengguna
harus menjalani tahapan itu
Contoh Pola Desain (3)
9. Subscription Plan – ketika pengguna harus berlangganan
dalam menggunakan sebuah layanan, maka setiap paket
langganan harus jelas isinya apa saja, apa yang didapatkan
oleh pengguna, dan bagaimana jika pengguna mau
berhenti berlangganan
10. Hover Controls – terkadang komponen UI yang terlalu
banyak justru akan membuat tampilan menjadi penuh dan
padat. Komponen tersebut bisa disembunyikan dahulu dan
baru dimunculkan ketika pengguna menggerakkan
petunjuk di atas area tertentu. Contoh: tombol edit dari
suatu data dalam tabel baru muncul ketika pointer
digerakkan di atas data itu
Berbagai Pustaka Pola Desain
Untuk mempelajari berbagai pola desain UI, banyak
situs web atau sumber yang bisa dibaca. Beberapa
yang bisa menjadi acuan adalah sebagai berikut:
User Interface Design Patterns (http://ui-
patterns.com) – berbagai pola desain UI yang dibagi
menjadi banyak jenis dan kasus
UI Patterns (http://uipatterns.io) – kumpulan pola
desain yang umum digunakan untuk aplikasi
perangkat bergerak (mobile apps)
UI Garage (https://uigarage.net) – berbagai
kumpulan pola desain yang diambil dari berbagai
aplikasi yang ada
Dark UI Pattern
Terdapat pola desain yang dikatakan “dark” atau
gelap /jahat karena bisa membuat pengguna tertipu.
Biasanya digunakan untuk “menjebak” pengguna
yang tidak sadar ketika akan melakukan
pembayaran untuk layanan atau produk.
Pola-pola ini dibuat dengan sengaja dengan
memanfaatkan celah dalam proses kognitif manusia
dan diterapkan dalam sebuah desain UI.
Berbagai contoh Dark UI Pattern juga telah
didokumentasikan dan bisa dibaca diberbagai
sumber. Salah satunya: Dark Patterns
Hirarki Visual
Sebagai pemandu persepsi visual pengguna
“We Seek and Use Visual Structure”
Jeff Johnson, Designing with the Mind in Mind – Ch. 3

“Kita Mencari dan Menggunakan Struktur Visual”

Hirarki Visual
Penerapan mendasar dari berbagai prinsip gestalt dan
pola desain adalah hirarki visual yang sangat penting
untuk diperhatikan dalam pembuatan UI.
Fungsi hirarki visual adalah untuk memandu persepsi
visual pengguna agar pengguna mengerti alur informasi,
dan memahami maksud dari UI, sehingga merasa mudah
dan nyaman dalam menggunakan
Hirarki visual secara mendasar ditentukan oleh 3 aspek
visual:
▪ Ruang kosong (white space)
▪ Penjajaran (alignment)
▪ Ukuran Relatif (size)
Dengan memanfaatkan 3 aspek tersebut, kita
menentukan struktur informasi dan tata letak yang
ditampilkan dalam UI.
Contoh Hirarki Visual
Informasi yang terstruktur dengan hanya memasukkan informasi yang relevan akan
lebih mudah dipahami dibandingkan satu paragraf berisi kalimat penjelasan.
Contoh Hirarki Visual
Redudansi informasi mempersulit, apalagi dengan pengaturan white space yang tidak
memberi ruang antar baris di pilihan yang ada .
Contoh Hirarki Visual
Redudansi informasi dihilangkan dan diatur penayangannya dengan:
▪ Memanfaatkan ruang kosong di antara pilihan (vertikal dan horizontal)
▪ Pengaturan ukuran judul yang lebih tebal dan besar (“Licenses & ID Cards...”)
▪ Penjajaran yang memperjelas mana yang label dan pilihan yang bisa diklik
Contoh Hirarki Visual

Penggunaan ruang kosong yang tidak tepat Penjajaran yang sama (jika perlu sampai
(besarnya sama antar jumlah uang dan label) titik koma) sehingga jelas bahwa di kanan
justru akan membingungkan adalah informasi finansial
Contoh Hirarki Visual
Pengelompokkan informasi akan memudahkan dalam membaca dan mengingat. Nomor
telpon sebaiknya dikelompokkan dalam 3 atau 4 angka.

Memberi ruang kosong untuk

membuat pengelompokkan angka
agar lebih mudah diingat dan dibaca
Contoh Hirarki Visual
Format dalam web form akan berpengaruh dalam mudah tidaknya pengguna menggunakan.
Dengan memberi ruang kosong atau pemisah dari nomor kartu bank, akan memudahkan
penggunaan form tersebut tanpa harus memusingkan pengguna

❌
Contoh Hirarki Visual
Untuk informasi lain dalam form, dengan memisahkan “field” juga akan membantu proses
pengisian tanpa membuat pengguna bingung – contoh: pemasukan tanggal dan alamat email
Contoh Hirarki Visual
Hirarki visual dalam teks akan lebih meningkatkan readability (keterbacaan) dan
memberikan kemudahan bagi pengguna
Ukuran huruf
lebih besar dan
lebih tebal

Poin-poin
penjelasan
memiliki
penjajaran
(alignment) yang
sama
Wireframing
Mengenali kerangka desain UI
Wireframing?
Langkah awal dari proses desain UI adalah
penentuan tata letak dan hirarki visual secara
umum dari setiap halaman yang dibuat.
Wireframing adalah proses pembuatan
wireframe, yang menjadi kerangka dari desain
sebuah laman (page) dari situs web atau
aplikasi yang hanya berisi di mana komponen UI
diletakkan, ukurannya, dan gambaran isinya.
Sebuah wireframe tidak harus sama persis
dengan desain akhir sebuah UI karena fokusnya
memang ke tata letak dan hirarki visual, tanpa
mempedulikan dahulu detail tampilan dan
nuansanya (look and feel) seperti warna dan
tipografi.

Perbandingan wireframe dan desain akhir. Diambil dari studi kasus:

http://www.wireframeshowcase.com/wireframes/detail/greenlight_app_design
Notasi Wireframe WIREFRAME TEKS
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas porttitor congue
Isi dari wireframe adalah bentuk-bentuk dasar yang massa. Fusce posuere, magna sed pulvinar
ultricies, purus lectus malesuada libero, sit
mewakili atau menggambarkan komponen UI seperti amet commodo magna eros quis urna.

tombol, paragraf berisi teks, textfield, foto, ilustrasi, Garis-garis Dummy text
ikon, dsb. Universitas 17 Agustus 1945 surabaya
(Untag) Surabaya merupakan perguruan
Untuk komponen GUI seperti tombol atau untuk form tinggi swasta pertama di Jawa Timur,
didirikan pada tanggal 17 agustus 1958.
biasanya seperti bentuk dasarnya (segi empat, label
Teks Konten
teks, dsb). Namun untuk teks dan gambar punya
tingkat detail yang berbeda.
WIREFRAME MULTIMEDIA
Untuk teks sendiri biasanya direpresentasikan
Foto/Gambar Video Ikon
sebagai garis-garis, dummy teks, atau teks yang asli.
Untuk gambar atau video, biasanya berupa kotak
yang disilang, atau kotak dengan tombol play untuk
mewakili video. Ikon bisa dengan kotak silang atau
dengan bentuk ikon yang minimalis.
Warna yang dipakai dalam wireframe hanya hitam,
putih, atau abu-abu.
Contoh Wireframe
Kenapa Wireframe Dulu?
Dengan fokus kepada tata letak, wireframe akan membantu
pengembang tetap fokus dalam mengembangkan UI yang mudah
bagi pengguna
Wireframe bisa langsung diperlihatkan kepada klien untuk
memberi gambaran awal bagaimana bentuk (UI) dari produk
akhir – tanpa harus repot membuat desain akhir.
Wireframe & Prototyping
Wireframe juga merupakan langkah awal dari
pemurwarupaan (prototyping) yaitu pembuatan
purwarupa yang dipakai dalam proses desain
iteratif hingga menjadi desain akhir.
Sebuah purwarupa yang mendasar adalah
purwarupa kertas (paper prototype) yang
berupa sketsa dengan pensil/pulpen atau
disebut juga dengan proses sketching.
Setelah dari kertas, kemudian bisa dibuat versi
purwarupa digital (digital prototype) yang dibuat
dengan kakas pemurwarupaan (prototyping
tools) yang kemudian ditambahkan dengan
interaktivitas untuk menjadi purwarupa
interaktif (interactive prototype)
Prototyping Tools
Berbagai prototyping tools yang bisa dipakai sudah tersedia
banyak (kebanyakan berbayar). Yang direkomendasikan dalam
mata kuliah ini adalah sebagai berikut:
▪ Figma (https://www.figma.com) – merupakan layanan aplikasi
berbasis web untuk pembuatan desain dan purwarupa interaktif.
Untuk kepentingan pendidikan mereka menyediakan Education Plan
(https://www.figma.com/education) yang bisa diajukan melalui Apply
Education Plan (https://www.figma.com/education/apply) yang
memungkinkan mendapatkan fitur profesional selama 2 tahun
untuk mahasiswa atau pengajar di Perguruan Tinggi.
▪ Lunacy (https://icons8.com/lunacy) – merupakan perangkat lunak
desain untuk membuat desain UI atau purwarupa yang bisa diunduh
gratis tanpa ada batasan fitur. Mengklaim sebagai alternatif
software Sketch (hanya tersedia di Mac dan berbayar) di Windows.
Jika Anda minim dalam kuota internet, Anda bisa memakai Lunacy
karena Figma harus memiliki sambungan internet untuk memakainya.