Tugas Kelompok ke-3

Week 8

Team : Kelompok 4
Kelas : MBDE – Teknik Industri
1. Eka Sari Wulan Dhari 2402006145
2. Muhammad Dzikri 2402009916
3. Bayu Setiawan 2402003774
4. Keysha Nabilla 2402007715
5. Rendy Gunardy 2402002544

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
akan membuat website toko buku online, maka beberapa contoh yang dapat ambil adalah
gramedia.com dan amazon.com.
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 5 contoh)
Jawaban
Gestalt adalah sebuah teori yang menjelaskan proses persepsi melalui
pengorganisasian komponen-komponen sensasi yang memiliki hubungan, pola atau
kemiripan menjadi kesatuan. Teori Gestalt berupaya mengurangi pembagian sensasi
menjadi bagian-bagian kecil. Teori Gestalt banyak dipakai dalam proses desain
karena banyak menjelaskan bagaimana persepsi visual bisa terbentuk.
Dalam gestalt untuk desain UX, ada lima prinsip Gestalt: Proximity, Similarity,
Continuation, Figure/Ground, Focal Point dan Simplicity.

ISYS6619 -UX for Digital Business

1. Kedekatan (Proximity)
Aturan kedekatan dalam Prinsip Gestalt untuk desain UX menyatakan bahwa
Objek yang dekat satu sama lain tampak lebih berhubungan daripada yang terpisah
jauh. Pada desain UX, hal ini sering kita lihat, contohnya pada penempatan kolom
yang harus diisi.

Pada website https://m.21cineplex.com/ prinsip Kedekatan (Proximity) dimana kita

bisa mengelompokkan menu berdasarkan kategori dan jenisnya.

2. Kemiripan (Similarity)
Aturan kemiripan dalam Prinsip Gestalt untuk desain UX adalah di mana
benda-benda yang mirip dikelompokkan dan dianggap memiliki fungsi yang sama.
Ketika bentuknya mirip ataupun sama namun warnanya berbeda, kita langsung tahu
bahwa fungsinya berbeda. Jika mirip dan warnanya sama, pasti pikiran kita
menganggapnya kelompok yang sama. Pada desain UX, biasanya hal ini dapat dilihat
pada link yang berbeda warna dari teks biasa. Kita bisa langsung tahu meskipun sama-
sama teks, namun fungsinya berbeda karena warnanya tidak sama, yaitu biasanya biru.

ISYS6619 -UX for Digital Business

 Pada website https://m.21cineplex.com/ prinsip similarity terlihat diterapkan
pada tombol-tombol berikut sebagaimana gambar di bawah ini. Tombol PLAYING
AT, BUY TICKET dan TRAILER memiliki bentuk dan warna yang sama, di mana
hal tersebut menandakan ketiga bentuk tersebut berfungsi sama yaitu untuk di-klik.

3. Area yang sama (common region)

Hukum ini berkaitan dengan hukum kedekatan. Jika objek-objek berada di area
yang dekat, otak otomatis menganggapnya satu kelompok yang sama. Jika diberi
pembatas, akan langsung terlihat bahwa kelompok tersebut terpisah dari yang lainnya.
Pada desain UX, hal ini salah satunya digunakan untuk menciptakan card yang
mengelompokkan gambar dan teks pada satu area.

ISYS6619 -UX for Digital Business

 Pada gambar di bawah juga menerapkan prinsip common region di mana
tombol-tombol tersebut dipisahkan oleh jarak dengan gambar poster. Hal tersebut
menandakan kalau kedua bagian memiliki fungsi yang berbeda.

4. Titik fokus (focal point)

Apa pun yang tampil menonjol akan selalu menjadi pusat perhatian utama
siapa pun yang melihatnya. Aturan Prinsip Gestalt ini digunakan untuk desain UX
ketika ada hal yang penting untuk dilihat pertama oleh pengguna. Contoh hal ini adalah
tombol yang biasanya didesain dengan warna atau bentuk yang mencolok agar mudah
ditemukan.

Ketika pertama kali tampil halaman depan website https://m.21cineplex.com/

muncul tampilan yang menonjol dan warna yang mencolok dibagian atas berupa
informasi produk seperti promo makanan dan minuman ataupun informasi yang
berkaitan dengan protokol kesehatan covid19. Hal yang membuat penasaran pengguna
adalah informasi terkait dengan promo-promo apa saja yang sedang berlangsung dan
ditampilkan di display tersebut.

ISYS6619 -UX for Digital Business

5. Keberlanjutan (continuity)
Prinsip Gestalt selanjutnya adalah keberlanjutan, yaitu elemen untuk desain
yang dirancang pada garis lurus atau lengkungan cenderung dianggap berhubungan
dibanding yang tidak. Hal ini biasanya bisa kita temukan di drop-down menu pada
pilihan sekundernya untuk memudahkan navigasi.

Pada website https://m.21cineplex.com/ sudah diterapkan UI terkait dengan

continuity yaitu saling berhubungan antara Cinema XXI, The Premiere & IMAX Dan
sudah terdapat drop-down menu pada pilihan sekundernya yaitu dengan terdapat
pilihan lokasi tempat cinema di masing jenis (Cinema XXI, The Premiere, dan
IMAX) sehingga memudahkan dalam navigasi.

6. Penyimpulan (closure)
Ketika manusia melihat aturan elemen visual yang rumit, otak kita akan
berusaha untuk mencari satu pola yang dapat dipahami. Hal inilah yang disebut aturan
closure dalam prinsip gestalt untuk desain UX. Kita pasti langsung bisa menyimpulkan
sebuah pola bentuk dari penggunaan ruang negatif pada desainnya.
7. Figure/Ground
Prinsip figure/ground pada Gestalt menyatakan bahwa orang secara tanpa
sadar menempatkan sebuah objek di depan atau sebagai latar belakang. Biasanya, otak
manusia akan berfokus pada salah satunya saja.
Prinsip figure/ground belum diterapkan pada website
https://m.21cineplex.com/ sehingga UI nampak flat dan kurang dinamis.
ISYS6619 -UX for Digital Business
2. Berdasarkan website/apps yang anda pilih, berikan pendapat anda mengenai navigasi yang
diterapkan pada website/apps tersebut. Sebutkan kelebihan serta kekurangan dari navigasi
tersebut.
Navigasi artinya adalah petunjuk, secara bahasa navigasi merupakan petunjuk atau
arah perjalanan yang menggambarkan sebuah peta wilayah. Sedangkan pada sebuah website
/ apps navigasi merupakan menu yang tampil di atas halaman website hingga menu
pendukung biasanya tampil di bawah website. Dengan adanya navigasi pada website / apps,
maka pengunjung akan semakin mudah menemukan halaman – halaman lain dari menu
navigasi yang dibuat.

• https://m.21cineplex.com/?mod=mtix

Pada halaman Pada halaman utama website https://m.21cineplex.com/ sudah

terdapat komponen navigation berupa menu bar, yakni menu Now Playing, Theaters,
Up coming, Playing at (bioskop yang memutarkan film tersebut), serta Profile.

ISYS6619 -UX for Digital Business

Kelebihan:
• Pada menu bar ‘Produk’ terdapat fitur ‘filter’ untuk kategori dan harga,
sehingga dapat memudahkan pengguna untuk mencari produk yang sesuai.
• Terdapat komponen navigasi pencarian bioskop yang dapat membantu
pengguna mengetahui posisi mereka dan dapat membantu pengguna
kembali ke halaman awal dengan lebih mudah.

Kekurangan:
• Pengguna perlu ke halaman ‘Produk’ terlebih dahulu untuk dapat
menggunakan komponen search field.

• Pada navigasi website / apps dari yang kelompok kami terapkan adalah website / apps
yang digunakan untuk membeli tiket bioskop secara online. Navigasi yang diterapkan
contohnya fitur menu home, menu search, menu chat dan menu profile.

Pada bagian halaman awal apps terdapat cover film yang direkomendasikan, pada
bagian cover ini terdapat menu-menu yang mudah dipahami.
1. Menu Home

ISYS6619 -UX for Digital Business

 Ketika menu home diklik maka akan tampil semua film yang ada pada apps atau
yang sedang tayang,
2. Search
Pada menu search ini maka penggunaka akan diberi keleluasaan untuk mencari
film yang dituju agar tidak perlu scroll pada menu home.
3. Chat
Pada menu chat ini berfungsi untuk komunikasi dengan teman / kerabat yang
sedang janjian nonton di bioskop, sehingga tidak perlu harus buka media medsos
lagi untuk atur janjian.

4. Profile
Pada bagian profile ini berisi dengan data pribadi pengguna, Data ini mengikuti
input dari ketika login akses / daftar akun apps ini.

Pada apps yang dibangun pastinya mempunya kelebihan dan kekurang, dimana
perlu pengembangan lebih lanjut agar pengguna lebih nyaman dan mengikuti
perkembangan teknologi yang semakin cepat.
Kelebihan :
• Tampilan Apps mudah dimengerti dan mudah dipelajari
• Akses penggunaan mudah
• Sudah terdapat apps di mobile dimana tidak perlu harus membuka di
website.
• Terdapat fitur chat, dimana tidak perlu membuka apps lain untuk mengatur
janjian.
Kekurangan :
• Warna pada tampilan apps kurang menarik
• Gambar dan Tulisan masih pecah, sehingga tidak jelas

ISYS6619 -UX for Digital Business