WorksheetsTes Pemahaman UI/UX
Total questions: 100
Worksheet time: 50mins
Apa yang dimaksud dengan UX (User Experience) menurut Jeff Wang?
Membuat produk berguna
Membuat produk mahal
Membuat produk sulit digunakan
Membuat produk tidak menarik
Apa yang dimaksud dengan UI (User Interface) menurut Jeff Wang?
Membuat produk indah dan komunikatif
Membuat sistem keamanan jaringan
Mengembangkan algoritma pencarian data
Mengelola basis data perusahaan
UX adalah struktur / logika / alur penggunaan, sedangkan UI adalah...?
tampilan akhir yang dilihat pengguna
proses pengembangan aplikasi
cara kerja sistem backend
alur navigasi pengguna
Berdasarkan analogi yang diberikan, UX diibaratkan sebagai...
denah rumah
pintu rumah
warna cat rumah
jumlah kamar mandi
Berdasarkan analogi yang diberikan, UI diibaratkan sebagai...
interior, warna cat, furnitur
pondasi, struktur bangunan, rangka atap
jendela, pintu, ventilasi
halaman, pagar, taman
Plane 1 — Strategy dalam Model 5-Plane Garrett menjawab pertanyaan berikut, kecuali:
A. Masalah apa yang dipecahkan
B. Kebutuhan pengguna
C. Konteks bisnis
D. Cara membuat produk indah
Plane 2 — Scope dalam Model 5-Plane Garrett berfokus pada:
Menentukan fitur dan batasan produk
Membuat produk berguna
Menentukan warna cat
Membuat denah rumah
Terlalu banyak fitur dapat menurunkan kualitas UX karena:
Pengguna menjadi bingung dan kesulitan menemukan fitur yang dibutuhkan.
Semua fitur akan selalu digunakan oleh pengguna.
UX akan selalu meningkat dengan banyak fitur.
Fitur yang banyak membuat aplikasi lebih ringan.
Apa yang dimaksud dengan information architecture (IA) dalam konteks Plane 3 — Structure?
Information architecture (IA) adalah pengorganisasian dan struktur informasi agar pengguna dapat bergerak dan menyelesaikan tugas dengan efisien.
Information architecture (IA) adalah proses mendesain tampilan visual dari sebuah website.
Information architecture (IA) adalah teknik untuk meningkatkan kecepatan loading halaman web.
Information architecture (IA) adalah metode untuk mengatur warna dan font pada aplikasi.
Sebutkan dua komponen utama yang disusun pada Plane 3 — Structure!
information architecture (IA) dan user flow
visual design dan branding
content strategy dan usability
wireframe dan prototyping
Apa inti dari usability pada Plane 3 — Structure?
Bagaimana pengguna bergerak dan menyelesaikan tugas dengan efisien.
Bagaimana tampilan visual dari aplikasi.
Bagaimana data disimpan di server.
Bagaimana aplikasi diakses oleh developer.
Pada Plane 4 — Skeleton, sebutkan tiga elemen yang mulai dikonkretkan!
layout element, navigasi, penempatan tombol
warna, font, gambar
animasi, suara, video
database, server, API
Apa yang harus dikuasai mahasiswa TRMG pada level wireframing menurut Plane 4 — Skeleton?
Pembuatan wireframe low fidelity.
Pembuatan aplikasi mobile secara lengkap.
Pengembangan backend server.
Desain grafis tingkat lanjut.
Tahap UI pada Plane 5 — Surface terdiri dari beberapa elemen. Pilih salah satu yang bukan bagian dari tahap UI berikut:
visual design
warna
tipografi
navigasi
iconografi
Mengapa mahasiswa biasanya hanya fokus pada tahap UI menurut penjelasan pada Plane 5 — Surface?
Karena UI adalah tahap akhir, bukan awal, namun mahasiswa sering hanya fokus pada tahap ini.
Karena tahap UI adalah yang paling mudah dipahami oleh mahasiswa.
Karena tahap UI memerlukan lebih sedikit waktu dibandingkan tahap lain.
Karena tahap UI tidak membutuhkan pemikiran mendalam tentang proses desain.
Menurut artikel, berapa prinsip fundamental yang diberikan Jeff untuk UI designer?
5 prinsip fundamental
3 prinsip fundamental
7 prinsip fundamental
10 prinsip fundamental
Materi kuliah pertemuan berapa saja yang sangat cocok untuk prinsip dasar UI menurut artikel?
Materi kuliah pertemuan 4–8.
Materi kuliah pertemuan 1–3.
Materi kuliah pertemuan 9–12.
Materi kuliah pertemuan 13–16.
UI harus langsung dipahami. Manakah di bawah ini yang merupakan ciri UI yang jelas?
tombol jelas fungsinya
navigasi mudah
tidak ambigu
semua benar
Prinsip 2 — Clear & Meaningful Feedback Setiap aksi harus ada reaksi. Contoh feedback yang baik pada UI adalah...
hover button berubah warna
loading skeleton
progress bar
semua benar
Desain harus konsisten dalam hal berikut, kecuali...
warna
font
loading skeleton
layout grid
Mengapa penting menggunakan pola desain yang sudah dikenal?
Agar pengguna tidak bingung dan lebih mudah memahami UI.
Agar desain terlihat lebih rumit dan eksklusif.
Supaya pengembang bisa mengabaikan kebutuhan pengguna.
Agar aplikasi menjadi lebih lambat dan sulit digunakan.
Contoh pattern: Tombol hijau = ______
ok
batal
hapus
mulai
Contoh pattern: Tombol merah = ______
error
benar
mulai
selesai
Contoh pattern: Logo selalu di ______ atas
kiri
kanan
bawah
tengah
Contoh pattern: Search bar di ______ atas
kanan
kiri
bawah
tengah
Pedoman desain UI yang harus dipahami mahasiswa adalah:
iOS Human Interface Guidelines
Google Material Design
Keduanya benar
Tidak ada yang benar
Prinsip 5 — Visual Hierarchy mengatur:
urutan informasi
fokus pengguna
kontras
ukuran teks
Semua benar
Komponen pembentuk hierarchy yang berhubungan dengan readability & legibility adalah ______
Typography
Warna
Layout
Gambar
Komponen pembentuk hierarchy yang berfungsi untuk membuat area 'bernapas' adalah ______
Whitespace
Grid
Typography
Color
Komponen pembentuk hierarchy yang menarik perhatian atau membuat elemen mundur adalah ______
Color
Shape
Texture
Size
Artikel memberikan contoh efektif: Line-height besar → ______
lebih mudah dibaca
lebih sulit dibaca
teks menjadi kecil
warna teks berubah
Artikel memberikan contoh efektif: Warna hangat (merah/oranye) digunakan untuk ______
CTA
Judul artikel
Background halaman
Teks isi
Artikel memberikan contoh efektif: Warna dingin digunakan sebagai ______
background
judul
ikon
garis tepi
Jelaskan apa itu F-Pattern Reading Behavior dan untuk apa pola ini cocok digunakan dalam desain UI/UX?
F-Pattern Reading Behavior adalah cara mata membaca halaman, cocok untuk desain web, layouting berita atau landing page.
F-Pattern Reading Behavior adalah pola navigasi menu, cocok untuk aplikasi mobile dan game.
F-Pattern Reading Behavior adalah teknik pemilihan warna, cocok untuk desain grafis dan ilustrasi.
F-Pattern Reading Behavior adalah metode penempatan tombol, cocok untuk aplikasi desktop dan perangkat lunak.
Penggunaan whitespace dapat meningkatkan pemahaman sampai berapa persen?
20%
5%
50%
80%
Bagaimana warna mempengaruhi persepsi UI menurut prinsip color psychology?
Warna mempengaruhi persepsi UI secara langsung.
Warna tidak berpengaruh pada persepsi UI.
Warna hanya berpengaruh pada elemen non-UI.
Warna mempengaruhi UI hanya pada perangkat tertentu.
Apa prinsip utama dari 'Less is more' dalam desain UI/UX?
Prinsip minimalisme agar tidak distraksi.
Menggunakan sebanyak mungkin elemen visual.
Menambahkan fitur sebanyak mungkin.
Membuat desain yang rumit dan kompleks.
Apa yang dimaksud dengan UI (User Interface) Design?
UI Design adalah proses merancang antarmuka pengguna: tampilan visual, elemen interaksi, tata letak, warna, tipografi, ikon, dan secara keseluruhan bagaimana sebuah aplikasi atau website 'terlihat dan terasa'.
UI Design adalah proses pengembangan backend aplikasi agar berjalan lebih cepat dan efisien.
UI Design adalah teknik untuk mengoptimalkan database agar aplikasi dapat menyimpan data dengan aman.
UI Design adalah metode untuk menguji keamanan jaringan pada aplikasi dan website.
Apa yang dimaksud dengan UX (User Experience)?
UX adalah pengalaman pengguna secara menyeluruh ketika menggunakan produk digital: bagaimana ia merasa, seberapa mudah tugas dilakukan, dan bagaimana produk memenuhi kebutuhan pengguna.
UX adalah proses pengembangan perangkat lunak tanpa memperhatikan kebutuhan pengguna.
UX adalah desain visual dari sebuah aplikasi atau website.
UX adalah fitur keamanan yang melindungi data pengguna.
Sebutkan salah satu prinsip dasar UI Design yang berkaitan dengan urutan perhatian pengguna!
Hierarchy (hirarki visual): menentukan elemen mana yang paling penting dan memastikan pengguna tahu urutan perhatian.
Alignment: memastikan semua elemen berada pada garis yang sama.
Consistency: menggunakan elemen yang sama secara berulang.
Simplicity: membuat desain sesederhana mungkin.
Prinsip dasar UI Design yang menekankan agar elemen UI yang serupa harus berperilaku serupa agar pengguna tidak bingung disebut...
Consistency (konsistensi)
Affordance (kemudahan penggunaan)
Feedback (umpan balik)
Simplicity (kesederhanaan)
Prinsip dasar UI Design yang memastikan antarmuka bisa digunakan oleh berbagai pengguna termasuk dengan kebutuhan khusus disebut...
Accessibility (aksesibilitas)
Usability (kegunaan)
Responsiveness (respon cepat)
Aesthetics (estetika)
Tahapan pertama dalam alur kerja desain UI adalah...
Penelitian pengguna (user research) & pengumpulan kebutuhan.
Membuat prototipe akhir produk.
Melakukan pengujian usability.
Mendesain visual interface.
Tahapan kedua dalam alur kerja desain UI adalah...
Pembuatan persona & skenario penggunaan.
Pembuatan wireframe.
Pengujian usability.
Pembuatan prototipe.
Tahapan ketiga dalam alur kerja desain UI adalah...
Wireframing (kerangka tata letak kasar) untuk menguji struktur.
Membuat prototipe interaktif untuk pengujian pengguna.
Menentukan palet warna dan tipografi.
Melakukan riset pengguna secara mendalam.
Prinsip dasar UI Design yang menekankan agar UI memberikan respon saat pengguna melakukan aksi disebut...
Feedback (umpan balik)
Consistency (konsistensi)
Simplicity (kesederhanaan)
Visibility (visibilitas)
Sebutkan salah satu alat populer yang sering digunakan untuk prototyping dalam desain UI!
Figma
Microsoft Word
CorelDRAW
Paint
Salah satu tantangan umum dalam desain UI adalah fokus pada estetika saja tanpa memperhatikan ________.
kegunaan (usability)
warna (color)
ukuran layar (screen size)
font (typeface)
Mengapa penting untuk menghubungkan desain dengan metrik bisnis dan pengguna dalam UI/UX?
Karena desain UI yang baik dapat meningkatkan konversi, retensi pengguna, kepuasan pelanggan, dan loyalitas.
Karena desain UI hanya berpengaruh pada estetika aplikasi saja.
Karena metrik bisnis tidak relevan dengan pengalaman pengguna.
Karena desain UI/UX tidak mempengaruhi hasil bisnis sama sekali.
UI adalah ________, UX adalah ________.
UI adalah antarmuka, UX adalah pengalaman
UI adalah pengalaman, UX adalah antarmuka
UI adalah desain, UX adalah warna
UI adalah kode, UX adalah gambar
Prinsip desain UI yang harus diinternalisasi oleh mahasiswa antara lain: hirarki visual, konsistensi, affordance, feedback, ________, dan minimalisme.
aksesibilitas
kecepatan
warna primer
animasi
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
User persona & journey map
Laporan keuangan perusahaan
Analisis struktur atom
Teori relativitas khusus
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
Wireframe untuk website/mobile
Laporan keuangan perusahaan
Resep makanan tradisional
Jadwal pertandingan sepak bola
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
Prototype interaktif Figma
Laporan keuangan perusahaan
Analisis pasar saham
Desain logo perusahaan
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
UI Design System (versi sederhana)
Laporan Keuangan Tahunan
Analisis Pasar Saham
Proposal Penelitian Kimia
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
Mini usability testing report
Laporan keuangan tahunan
Proposal bisnis baru
Jadwal perkuliahan semester depan
Sebutkan salah satu hasil yang diharapkan setelah menyelesaikan mata kuliah ini.
Final UI/UX case study (siap portofolio kerja)
Sertifikat pelatihan bahasa Inggris
Pengalaman magang di perusahaan teknologi
Publikasi jurnal internasional
Apa yang dimaksud dengan proses desain iteratif dalam UI/UX?
Dari penelitian → wireframe → prototype → uji coba → iterasi → implementasi.
Dari implementasi → uji coba → wireframe → penelitian → iterasi → prototype.
Dari wireframe → implementasi → penelitian → prototype → uji coba → iterasi.
Dari uji coba → penelitian → iterasi → wireframe → implementasi → prototype.
Kolaborasi lintas disiplin dalam UI/UX melibatkan siapa saja?
Desainer grafis, pengguna, developer, bisnis.
Desainer grafis, penulis, editor, fotografer.
Developer, tester, analis data, penulis.
Pengguna, pemilik produk, editor, fotografer.
Mengapa fokus pada pengguna dan tugas mereka penting dalam desain UI/UX?
Agar desain relevan dengan konteks pengguna dan mendukung efisiensi serta efektivitas.
Agar desain terlihat lebih menarik secara visual tanpa memperhatikan kebutuhan pengguna.
Supaya proses desain menjadi lebih cepat tanpa mempertimbangkan pengalaman pengguna.
Karena mengikuti tren desain terbaru lebih penting daripada kebutuhan pengguna.
Ukuran kesuksesan desain bukan hanya estetika. Sebutkan salah satu ukuran lain yang penting dalam desain UI/UX.
Berhasil menyelesaikan tugas, seberapa cepat, seberapa sedikit kesalahan, seberapa puas pengguna.
Warna yang digunakan harus selalu cerah.
Animasi yang menarik perhatian pengguna.
Desain harus selalu mengikuti tren terbaru.
Teknologi dan tren terus berubah, tapi prinsip dasar UI/UX tetap relevan. Sebutkan salah satu device yang disebutkan dalam konteks ini.
Mobile, wearable, IoT.
Laptop, desktop, server.
Printer, scanner, fax.
Smart TV, DVD player, radio.
Identifikasi strategi UX yang harus dimasukkan dalam dokumen ringkasan artikel.
Menentukan tujuan pengguna dan kebutuhan bisnis
Menambahkan gambar tanpa penjelasan
Mengabaikan riset pengguna
Fokus hanya pada desain visual
Identifikasi strategi UX yang tepat berdasarkan ringkasan artikel yang telah diberikan.
Menentukan tujuan pengguna dan kebutuhan bisnis
Mengembangkan fitur tanpa riset pengguna
Mengabaikan feedback pengguna
Fokus hanya pada desain visual
Baca ulang ringkasan artikel yang telah diberikan. Pilih langkah pertama yang harus dilakukan dalam membuat dokumen UX Strategy.
Identifikasi UX Strategy
Menganalisis kompetitor
Membuat wireframe
Melakukan usability testing
Gunakan metode “Must-Have vs Nice-to-Have”: Lengkapi alasan dari fitur berikut: Login (Kategori: Must, Alasan: _____)
akses pengguna
tampilan menarik
fitur tambahan
kecepatan loading
Gunakan metode “Must-Have vs Nice-to-Have”: Lengkapi alasan dari fitur berikut: Browse content (Kategori: Must, Alasan: _____)
kebutuhan utama
fitur tambahan
opsional saja
untuk estetika
Gunakan metode “Must-Have vs Nice-to-Have”: Lengkapi alasan dari fitur berikut: Wishlist (Kategori: Nice, Alasan: _____)
nilai tambah
fitur utama
wajib ada
penghambat
Sebutkan tiga halaman aplikasi yang harus dibuat pada wireframe low-fidelity sesuai instruksi!
Login Page, Homepage, Detail Page
Profile Page, Settings Page, About Page
Contact Page, FAQ Page, Gallery Page
Cart Page, Checkout Page, Order History Page
Salah satu prinsip UI adalah Clarity. Sebutkan dua hal yang harus diperhatikan agar prinsip ini tercapai!
Semua label tombol/judul jelas, Navigasi mudah ditemukan
Animasi berlebihan, Warna mencolok
Penggunaan font acak, Layout tidak konsisten
Teks terlalu kecil, Informasi tersembunyi
Sebutkan tiga hal yang perlu ditambahkan pada prinsip Feedback!
Hover state, Pressed state, Loading skeleton (opsional)
Primary button, Secondary button, Tertiary button
Grid layout, Card layout, List layout
Font size, Font color, Font family
Pada prinsip Consistency, font apa yang disarankan untuk digunakan?
Inter / Roboto
Arial
Times New Roman
Comic Sans
Prinsip Consistency menyarankan penggunaan warna utama tetap.
Benar
Salah
Sebutkan tiga hal yang perlu diperhatikan pada prinsip Design Patterns!
Logo di kiri atas, Navigation/top-bar mengikuti pola umum, CTA warna mencolok (warm color)
Logo di kanan bawah, Navigation/top-bar acak, CTA warna netral
Logo di tengah, Navigation/top-bar tidak konsisten, CTA warna gelap
Logo tidak perlu, Navigation/top-bar dihilangkan, CTA warna pastel
Pada prinsip Visual Hierarchy, sebutkan empat aspek yang harus diperhatikan!
ukuran, warna, kontras, whitespace
ukuran, bentuk, tekstur, bayangan
warna, garis, pola, tekstur
kontras, bayangan, garis, bentuk
Berapa jumlah halaman yang harus didesain pada Output High-Fi?
3 halaman
2 halaman
4 halaman
5 halaman
Halaman apa saja yang harus didesain pada Output High-Fi?
Login (dengan feedback), Homepage, Detail Page
Login, Register, Profile
Homepage, About Us, Contact
Detail Page, FAQ, Settings
Pada bagian Prototyping, transisi interaktif apa yang harus dibuat?
Login → Homepage
Homepage → Profile
Homepage → Settings
Login → Register
Sebutkan bobot penilaian untuk aspek 'Penerapan prinsip UI/UX' sesuai rubrik penilaian praktikum!
30%
10%
50%
70%
Sebutkan bobot penilaian untuk aspek 'Struktur wireframe & user flow' sesuai rubrik penilaian praktikum!
20%
10%
30%
40%
Sebutkan bobot penilaian untuk aspek 'Kualitas visual (hierarchy, clarity, spacing)' sesuai rubrik penilaian praktikum!
20%
10%
30%
40%
Sebutkan bobot penilaian untuk aspek 'Prototype interaktif' sesuai rubrik penilaian praktikum!
20%
10%
30%
40%
Sebutkan bobot penilaian untuk aspek 'Presentasi' sesuai rubrik penilaian praktikum!
10%
20%
30%
40%
Siapa pengguna yang dituju dalam presentasi masalah?
Pengguna yang mengalami masalah terkait topik yang dipresentasikan
Pengguna yang tidak terkait dengan masalah
Pengguna dari negara lain
Pengguna yang tidak menggunakan produk
Prinsip UI mana yang paling sering diterapkan dalam desain antarmuka?
Konsistensi
Kompleksitas
Ambiguitas
Ketidakteraturan
Tangkapan layar apa yang menunjukkan proses dari wireframe ke UI final?
Perbandingan antara wireframe dan UI final
Hanya wireframe saja
Hanya UI final saja
Tangkapan layar kode program
Demo prototype biasanya dilakukan untuk:
Menunjukkan fitur dan fungsi produk
Menjual produk secara langsung
Membuat desain grafis
Menguji keamanan jaringan
Apa itu Figma?
Software desain UI/UX berbasis cloud
Software pengolah kata
Aplikasi edit video
Aplikasi pemutar musik
Sebutkan dua keunggulan utama Figma untuk mahasiswa!
Gratis untuk mahasiswa, Tidak perlu install (web-based)
Berbayar untuk mahasiswa, Memerlukan instalasi
Hanya tersedia untuk pengguna Mac, Tidak mendukung kolaborasi
Tidak dapat digunakan secara online, Fitur terbatas
Figma dapat digunakan untuk mendesain antarmuka (UI).
Benar
Salah
Figma memungkinkan kolaborasi secara real-time.
Benar
Salah
Figma kompatibel di sistem operasi berikut, kecuali:
Windows
Mac
Linux
Android
Mahasiswa TRMG menggunakan Figma untuk membuat layout website dan mobile.
Benar
Salah
Langkah pertama untuk membuat akun Figma adalah:
Mengunduh aplikasi Figma
Membuka https://figma.com
Mengisi data diri
Menghubungi admin
Setelah membuka https://figma.com, langkah berikutnya untuk membuat akun adalah _______.
Klik Sign Up
Klik Login
Klik Download
Klik Help
Figma adalah aplikasi berbasis cloud.
Benar
Salah
Salah satu kegunaan Figma dalam UI/UX adalah membuat prototype aplikasi.
Benar
Salah
Apa fungsi dari Move Tool (V) pada Top Bar Figma?
Memindahkan objek
Mengubah warna objek
Menambahkan teks
Menghapus layer
Apa nama tool pada Top Bar Figma yang digunakan untuk membuat artboard (mobile/web)?
Frame Tool (F)
Move Tool (V)
Pen Tool (P)
Slice Tool (S)
Pen Tool (P) pada Top Bar Figma digunakan untuk _________
Menggambar bentuk bebas
Membuat tabel
Menambahkan gambar
Mengatur warna latar belakang
