Tugas Kelompok ke-3
Week 8
1. Muhamad Januar Rismawan – 2502045891
2. Janice Anastasia Halim - 2502049990
3. Toni Suwendi - 2502044900
4. Dewi Agustina - 2502021115
Ketentuan umum:
Tugas kelompok akan dilakukan dalam bentuk Proyek perancangan UI/UX dari aplikasi atau
website. Setiap kelompok bebas menentukan proyek aplikasi/website yang akan dikerjakan.
Tugas proyek ini akan dilakukan berkelanjutan mulai dari tugas kelompok 1 – 4.
Carilah website atau mobile apps yang sejenis dengan proyek yang akan anda buat. Misalkan
anda diminta membuat website kementerian, maka beberapa contoh yang dapat ambil adalah
https://www.kominfo.go.id/, https://kemnaker.go.id/ dan lainnya.
1. Berdasarkan wesbite/apps yang sudah anda pilih, carilah contoh-contoh User
interface (UI) yang menurut anda sudah atau belum mengikuti pedoman Gestalt.
Jelaskan jawaban anda tipe pedoman gestalt yang sudah/belum diterapkan oleh UI
tersebut. (berikan minimal 5 contoh). (LO1, 50)
2. Berdasarkan website/apps yang anda pilih, berikan pendapat anda mengenai sistem
navigasi yang diterapkan pada website/apps tersebut. Berikan contoh sistem navigasi
minimal pencarian 2 menu dan kemudian sebutkan kelebihan serta kekurangan dari
sistem navigasi website tersebut (LO1, 50)
UX for Digital Business
Jawaban
1. Analisis UI Tokopedia Berdasarkan Pedoman Gestalt yang menurut kami sudah/belum
diterapkan.
Berikut adalah contoh penerapan pedoman Gestalt pada UI Tokopedia:
1) Proximity (Kedekatan):
Contoh: Di halaman utama, produk-produk yang terkait ditempatkan dalam
satu baris atau kotak kategori. Misalnya, produk fashion, elektronik, dan
lainnya dikelompokkan dalam area yang sama. Selain itu, produk dalam
kategori yang sama diberi ruang yang cukup untuk menunjukkan keterkaitan
antar elemen.
Evaluasi: Prinsip ini diterapkan dengan baik karena spasi dan visual grouping
(pengelompokan visual) membantu pengguna memahami bahwa produk yang
berdekatan secara spasial memiliki keterkaitan tanpa memerlukan penjelasan
tambahan.
2) Similarity (Kesamaan):
Contoh: Elemen tombol di Tokopedia, seperti “Beli” atau “Tambah ke
Keranjang”, memiliki warna dan bentuk yang serupa. Icon-icon lain yang
menunjukkan aksi, seperti “Like” atau “Share”, juga menggunakan ukuran
UX for Digital Business
dan gaya yang serupa, sehingga memudahkan pengguna mengenali tindakan-
tindakan yang dapat mereka lakukan.
Evaluasi: UI Tokopedia mengikuti prinsip kesamaan dengan baik, karena
elemen-elemen yang memiliki fungsi serupa diberikan desain yang konsisten.
Konsistensi ini menciptakan familiaritas yang membantu pengguna
memahami fungsi tanpa harus membaca teks secara detail.
3) Closure (Penutupan):
Contoh: Pada bagian kartu produk, kotak-kotak yang digunakan mungkin
tidak memiliki garis lengkap di sekelilingnya, tetapi mata pengguna tetap bisa
mengenali bentuk persegi karena elemen-elemen di dalamnya terorganisir
dengan baik, sehingga otak secara otomatis melengkapi bentuk tersebut.
UX for Digital Business
Evaluasi: UI Tokopedia memanfaatkan prinsip ini dengan baik untuk
memberikan tampilan yang bersih dan minimalis, sambil tetap memungkinkan
pengguna memahami elemen-elemen sebagai satu unit. Misalnya, meskipun
tidak ada batas garis penuh pada kartu produk, tata letaknya cukup kuat untuk
membentuk persepsi utuh.
4) Continuity (Kontinuitas):
Contoh: Slider promosi di halaman utama menggunakan elemen visual yang
sejajar dan terhubung secara horizontal, sehingga mata pengguna secara alami
mengikuti arah gerakan. Selain itu, dalam halaman detail produk, elemen-
elemen seperti harga, deskripsi, dan tombol pembelian disusun dalam urutan
yang logis untuk diikuti mata.
UX for Digital Business
Evaluasi: Prinsip kontinuitas diterapkan untuk menciptakan aliran yang halus
ketika pengguna menjelajahi penawaran atau produk yang ditampilkan. Slider
promosi dan penempatan elemen-elemen penting pada halaman detail produk
membuat navigasi menjadi lebih intuitif.
5) Figure/Ground (Gambar/Latar Belakang):
Contoh: Penggunaan warna yang kontras antara latar belakang putih dan
elemen tombol hijau membuat tombol aksi lebih menonjol dan mudah
ditemukan. Selain itu, bayangan (shadow) pada elemen kartu produk
memberikan kesan kedalaman dan membantu tombol-tombol menonjol dari
latar belakang.
Evaluasi: Tokopedia menerapkan prinsip figure/ground dengan baik,
memastikan elemen yang penting tetap menonjol di antara elemen lainnya.
Kontras yang kuat juga membantu dalam aspek aksesibilitas, membuat
elemen-elemen penting mudah diakses bahkan oleh pengguna dengan
gangguan penglihatan. Penggunaan bayangan dan outline juga semakin
mempertegas pemisahan antara elemen interaktif dan latar belakang.
2. Contoh sistem navigasi dari Tokopedia adalah:
UX for Digital Business
- Navigasi Berbasis Dropdown
Navigasi ini adalah menu dropdown yang muncul ketika pengguna mengklik atau
menyentuhnya, dapat memberikan pilihan tambahan, contohnya seperti saat kita
mengklik suatu barang di Tokopedia, maka akan terlihat jelas detail dari barang
tersebut.
Kelebihan:
o Ruang Hemat: Dropdown menghemat antarmuka, sehingga tampilan tetap
bersih dan teratur.
o Organisasi yang Jelas: Memudahkan pengelompokkan item yang berkaitan,
membantu pengguna menemukan opsi yang lebih mudah.
UX for Digital Business
o Fleksibilitas: Dapat digunakan untuk menampilkan banyak opsi tanpa
mengacaukan tampilan layar.
o Aksesibilitas: Dengan desain yang baik, dropdown dapat diakses dengan
mudah menggunakan mouse atau keyboard.
o Sederhana: Membuat navigasi terasa intuitif, terutama untuk pilihan yang
tidak sering digunakan.
Kekurangan:
o Interaksi Tambahan: Pengguna harus mengklik yang dapat menambah
waktu untuk mencapai tujuan.
o Kurang Terlihat: Opsi dalam dropdown tidak selalu terlihat secara langsung,
sehingga pengguna tidak menyadari semua pilihan yang tersedia.
o Responsive Issue: Pada perangkat seluler, dorpdown bisa sulit digunakan jika
tidak dioptimalkan dengan baik.
o Kesalahan Pemilihan: Pengguna bisa jadi akan salah memilih item jika
dropdown terlalu panjang atau tidak terorganisir dengan baik.
o Overload Informasi: Jika terlalu banyak opsi dimasukkan ke dropdown, bisa
membuat orang bingung dan sulit untuk menemukan barang yang mereka cari.
- Pencarian
Navigasi ini memudahkan pengguna untuk menemukan konten tertentu dengan
menggunakan fungsi pencarian, contohnya seperti saat kita mencari barang atau
produk tertentu, maka kita akan mengklik kolom Pencarian di bagian atas halaman
Tokopedia.
UX for Digital Business
Kelebihan:
o Efisien: Pengguna dapat mengetik kata kunci dari item yang mereka cari dan
akan langsung menemukan barangnya.
o Akses ke Konten Tersembunyi: Memudahkan pengguna untuk menemukan
konten yang tidak mudah dijangkau dengan navigasi tradisional.
o User-Friendly: Pengguna merasa lebih nyaman dan terbantu dengan cepat
hanya dengan mengetikkan kata kunci.
o Fleksibilitas: Dapat digunakan di berbagai jenis aplikasi.
o Saran Otomatis: Fitur saran pencarian sangan membantu pengguna untuk
menemukan barang yang serupa dengan apa yang mereka cari.
Kekurangan:
o Ketergantungan pada Kata Kunci: Pengguna harus mengetahui kata kunci
yang tepat agar menemukan barang yang mereka cari.
o Kualitas Pencarian: Hasil pencarian yang tidak relevan dapat membuat
pengguna merasa tidak puas.
o Overload Informasi: Jika terlalu banyak hasil, pengguna akan merasa
bingung dan kewalahan karena banyaknya informasi yang ada.
o Memerlukan Pemeliharaan: Sistem pencarian perlu diperbarui secara
berkala dan diperlihara agar tetap efektif, termasuk pengindeksan konten baru.
UX for Digital Business
---oOo---
UX for Digital Business
