wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Untitled Quizzz

Total questions: 38

Worksheet time: 21mins

Name
Class
Date
1.

Kepanjangan dari HTML adalah

a)

HyperTell Markup Language

b)

HyperText Markup Language

c)

HyperText Markup Link

d)

HyperTell Markup Language

2.

Media query yang digunakan untuk menentukan gaya CSS yang akan diterapkan pada perangkat dengan lebar layar maksimum 768px adalah

a)

@media (max-width: 768px)

b)

@media (min-width: 768px)

c)

@media (max-device-width: 768px)

d)
  1. @media (min-device-width: 768px)

3.

Properti CSS yang digunakan untuk mengatur warna latar belakang sebuah elemen adalah

a)

`color`

b)

`font-size`

c)

`background-color`

d)

`text-align`

4.

Properti CSS mana yang digunakan untuk mengatur jarak di dalam elemen?

a)

`margin`

b)

`padding`

c)

`border`

d)

`display`

5.

Apa perbedaan utama antara User Interface (UI) dan User Experience (UX) dalam desain produk digital?

4 lines
6.

Sebutkan 3 metode User Experience yang sudah diajarkan pada pertemuan ke 2

4 lines
7.

Apa tujuan utama dari desain antarmuka pengguna?

a)

Meningkatkan performa sistem

b)

Menciptakan tampilan yang estetis dan memudahkan interaksi pengguna dengan produk

c)

Mengurangi biaya pengembangan

d)

Menyimpan data pengguna dengan aman

8.

Prinsip desain UI mana yang membantu pengguna dalam memahami cara menggunakan antarmuka dengan lebih cepat?

a)

Konsistensi

b)

Kecepatan akses

c)

Keamanan

d)

Penggunaan warna

9.

Apa yang dimaksud dengan "responsive design" dalam konteks UI? 

a)

Desain yang hanya bekerja di perangkat desktop

b)

Desain yang dapat menyesuaikan dengan berbagai ukuran layar perangkat

c)

Desain yang fokus pada animasi

d)

Desain yang menggunakan teknologi terbaru

10.

Apa itu wireframe dalam desain UI?

a)

Desain akhir dari sebuah aplikasi

b)

 Representasi dasar dari tata letak dan struktur halaman tanpa detail visual

c)

Alat untuk menguji kinerja aplikasi

d)

Teknik untuk optimasi SEO

11.

Elemen UI apa yang digunakan untuk menunjukkan status atau progres suatu tugas kepada pengguna?

a)

Formulir

b)

Tooltip

c)

Progress bar

d)

Menu

12.

Apa itu "affordance" dalam konteks desain UI?

a)

Penggunaan warna yang mencolok

b)

Desain yang intuitif dan menunjukkan bagaimana suatu elemen seharusnya digunakan

c)

Teknik untuk meningkatkan kecepatan aplikasi

d)

Proses pengumpulan data pengguna

13.

Apa peran dari "contrast" dalam desain antarmuka?

a)

 Untuk mengurangi ukuran file gambar

b)

Untuk meningkatkan visibilitas dan keterbacaan elemen-elemen di antarmuka

c)

Untuk menambah animasi

d)

Untuk meningkatkan kecepatan loading

14.

Apa yang dimaksud dengan "clickable area" dalam desain UI?

a)

Area yang berisi teks informasi

b)

Area di mana pengguna dapat mengklik untuk melakukan aksi atau navigasi

c)

Area untuk menampilkan gambar

d)

Area yang hanya berisi konten statis

15.

Elemen UI mana yang membantu pengguna dalam menavigasi halaman dengan cepat? 

a)

Tabel

b)

Tooltip

c)

Breadcrumb

d)

 Formulir

16.

Apa tujuan dari menggunakan "color theory" dalam desain UI?

a)

Untuk membuat kode lebih efisien

b)

Untuk memastikan penggunaan warna yang tepat untuk meningkatkan estetika dan fungsionalitas

c)

Untuk meningkatkan kecepatan aplikasi

d)

Untuk menambahkan lebih banyak teks

17.

 Apa itu "user feedback" dalam konteks desain antarmuka?

a)

Umpan balik dari sistem ke pengguna tentang hasil dari tindakan mereka

b)

Umpan balik dari pengembang kepada pengguna

c)

Dokumentasi teknis aplikasi

d)

Desain visual dari aplikasi


18.

Apa yang dimaksud dengan "visual hierarchy" dalam desain UI?

a)

Urutan langkah untuk mengembangkan aplikasi

b)

Pengaturan elemen-elemen visual untuk menunjukkan prioritas dan hubungan antar elemen

c)

Teknik pengumpulan data pengguna

d)

Proses debugging aplikasi

19.

Apa itu "prototyping" dalam desain antarmuka pengguna?

a)

Menulis kode akhir aplikasi

b)

Membuat model interaktif awal dari antarmuka untuk pengujian dan umpan balik

c)

Teknik untuk meningkatkan SEO

d)

Proses pengumpulan data pengguna

20.

Elemen UI apa yang memberikan bantuan tambahan atau informasi saat pengguna melayang di atasnya dengan kursor?

a)

Modal

b)

Dropdown

c)

Slider

d)

Tooltip

21.

Apa yang dimaksud dengan "modal" dalam desain UI?

a)

Sebuah halaman penuh yang berisi informasi tambahan

b)

Bagian dari footer

c)

Jendela pop-up yang menampilkan konten atau meminta tindakan dari pengguna

d)

Bentuk lain dari hyperlink

22.

Apa yang dimaksud dengan "interaction design" dalam UI?

a)

Desain visual dari elemen-elemen statis

b)

Desain bagaimana pengguna berinteraksi dengan elemen-elemen antarmuka

c)

Pengaturan warna dan font

d)

Pengaturan server untuk aplikasi

23.

Elemen UI apa yang digunakan untuk memungkinkan pengguna memilih dari beberapa pilihan?

a)

Dropdown menu

b)

Teks statis

c)

Breadcrumb

d)

Tooltip

24.

Apa yang dimaksud dengan "microinteraction" dalam desain antarmuka?

a)

Interaksi kecil seperti notifikasi atau animasi yang meningkatkan pengalaman pengguna

b)

Desain untuk layar kecil

c)

Proses pengembangan perangkat lunak

d)

Teknik optimasi kinerja

25.

Apa fungsi utama dari "grid system" dalam desain UI?

a)

Untuk mempercepat proses pengembangan

b)

Untuk mengatur dan menyelaraskan elemen-elemen pada halaman secara konsisten

c)

Untuk meningkatkan kecepatan loading

d)

Untuk menambahkan lebih banyak konten

26.

Elemen UI apa yang sering digunakan untuk menampilkan informasi tambahan atau bantuan tanpa meninggalkan halaman?

a)

Sidebar

b)

Tooltip

c)

Dropdown

d)

Tab

27.

Apa yang dimaksud dengan "user-centered design"?

a)

Desain yang berfokus pada kemudahan pengembang

b)

Desain yang menggunakan teknologi terbaru

c)

Desain yang hanya fokus pada estetika

d)

Desain yang berpusat pada kebutuhan dan tujuan pengguna

28.

Apa yang dimaksud dengan "call to action" dalam desain UI?

a)

Tindakan yang dilakukan oleh sistem secara otomatis

b)

Elemen yang mendorong pengguna untuk melakukan aksi tertentu, seperti mengklik tombol atau mengisi formulir

c)

Elemen yang menampilkan informasi tambahan

d)

Desain untuk layar kecil

29.

Tahap terakhir pada saat merancang interface adalah

a)

Memikirkan tentang default

b)

Mempertimbangkan page layout berdasarkan suatu tujuan tertentu

c)

Memastikan bahwa sistem berjalan sesuai dengan apa yang terjadi saat itu juga

d)

Menjaga antarmuka yang sederhana

30.

Elemen UI apa yang digunakan untuk memungkinkan pengguna memilih beberapa opsi dari daftar?

a)

Checkbox

b)

Radio button

c)

Teks statis

d)

Breadcrumb

31.

User kata lain dari?

a)

Pengguna

b)

Pembeli

c)

Penjual

d)

Pembuat

32.

Bagaimana cara menyertakan file CSS eksternal dalam HTML?

a)

`<style src="styles.css">`

b)

`<link rel="stylesheet" type="text/css" href="styles.css">`

c)

`<css href="styles.css">`

d)

`<script src="styles.css">`

33.

Properti CSS mana yang digunakan untuk mengatur bayangan elemen?

a)

`text-shadow`

b)

`shadow`

c)

`element-shadow`

d)

`box-shadow`

34.

Tag HTML mana yang digunakan untuk membuat tombol submit dalam formulir?

a)

`<input type="button">`

b)

`<button type="button">`

c)

`<input type=”input">`

d)

`<button type="submit">`

35.

Tag HTML mana yang digunakan untuk membuat kotak centang dalam formulir?

a)

`<input type="checkbox">`

b)

`<input type="radio">`

c)

`<input type="text">`

d)

`<input type="button">`

36.

Tag HTML mana yang digunakan untuk membuat menu dropdown dalam formulir?

a)

`<select>`

b)

`<option>`

c)

`<input>`

d)

`<textarea>`

37.

Properti CSS mana yang digunakan untuk mengatur tampilan elemen menjadi tersembunyi?

a)

`visibility: hidden;`

b)

`opacity: 0;`

c)

`z-index: -1;`

d)

`display: none;`

38.

Apa yang dimaksud dengan elemen semantik dalam HTML? Berikan contoh tiga elemen semantik dan jelaskan fungsinya.

4 lines