User Interface

Element
By: Aprilia Sulistyohati, S.Kom.,M.Eng
 Pendahuluan
• Dalam mendesain interface, anda harus konsisten dan mampu
memprediksi pilihan elemen antarmuka system/aplikasi.
• Pemilihan elemen yang tepat dapat membantu menyelesaikan tugas
mendesain interface dengan cepat, mudah, dan efisien

ELEMEN UTAMA USER INTERFACE

Input Navigation Information
control control components Containers

• checkboxes, • breadcrumb • Tool tips • accordions

• radio buttons, • slider,
• dropdown lists,
• Progress bar
• pencarian
• list boxes, • Notification/
• pagination
• buttons, toggles, pemberitahuan
• text fields, • Slider
• ikon • Message box
• date field

www.themegallery.com
 Input Controls
a) checkboxes, A. CHECK BOX B. RADIO BUTTONS
b) radio buttons, • Check box digunakan untuk memilih • Tombol radio digunakan untuk memilih
c) ButtonS/tombol satu/lebih opsi pilihan. satu item pada suatu waktu.
d) List boxes • Penyajian check box sebaiknya dalam
daftar vertikal.
e) Dropdown button
f) toggles,
g) text fields,
h) date field

D. DROPDOWN LISTS/LIST BOX C. BUTTON/TOMBOL

• Digunakan untuk menunjukkan tindakan saat disentuh dan

memilih satu item pada
satu waktu, mirip
biasanya diberi label menggunakan teks,
dengan tombol radio, ikon, atau keduanya.
tetapi lebih menghemat
ruang/tata letak.

www.themegallery.com
 Input Controls
a) checkboxes, F. TOOGLES G. TEXT FIELDS
b) radio buttons,
• mengubah pengaturan antara • Digunakan user untuk memasukkan
c) ButtonS/tombol teks.
d) List boxes dua pilihan. • Hal ini dapat memungkinkan baik satu
e) Dropdown button • Button sangat efektif ketika baris atau beberapa baris teks.
f) Toggles, on/off
g) Text fields,
h) Date field

E. DROPDOWN MENU H. CALENDAR/ TIME PICKER

• Digunakan untuk
• Tombol dropdown terdiri dari tombol yang
memilih tanggal
ketika diklik menampilkan daftar drop-down
dan/atau waktu.
item yang saling eksklusif.
• Setelah waktu dipilih,
maka informasi
secara konsisten
diformat dan
masukan ke dalam
sistem.

www.themegallery.com
 Navigation control
a) Search field A. SEARCH FIELDS B. BREADCRUMB
b) Breadcrumb
• untuk memasukkan kata kunci atau • untuk mengidentifikasi lokasi saat ini
c) Slider
frase dan mengirimkannya untuk dalam sistem dengan menyediakan
d) Pagination
mencari indeks dengan jejak halaman yang diklik
e) Image carousel
maksud/diinginkan
f) Ikon

C. SLIDER/TRACK BAR D. PAGINATION

• untuk mengatur atau menyesuaikan nilai. • Untuk membagi konten menjadi halaman,
• Ketika pengguna mengubah nilai, tapi itu tidak • Pengguna dapat melewatkan dan memilih
mengubah format/tata letak antarmuka di halaman sistem yang ingin dia kunjungi.
layar

www.themegallery.com
 Navigation control
a) Search field F. ICON
b) Breadcrumb
• Gambar sederhana yang berfungsi sebagai
c) Slider
simbol intuitif yang digunakan untuk
d) Pagination
membantu pengguna untuk menavigasi
e) Image carousel
sistem.
f) Icon
• gambar berupa hyperlink.

E. IMAGE CAROUSEL
• menelusuri konten system melalui gambar yang telah
disediakan
• gambar berupa hyperlink.

www.themegallery.com
 Information Components
a) Tool tips A. TOOL TIPS
b) Progress bar
• untuk melihat petunjuk ketika mereka
c) Notification/
hover di atas item yang menunjukkan nama
pemberitahuan
atau tujuan dari item
d) Message box

B. PROGRESS BAR
• menunjukkan kemajuan langkah-langkah yang sudah dilakukan user
• Biasanya, Progress Bar tidak dapat diklik

www.themegallery.com
 Information Components
a) Tool tips
b) Progress bar D. MESSAGE BOX
c) Notification
• Sebuah jendela kecil yang memberikan
d) Message box
informasi kepada pengguna
• untuk mengambil tindakan sebelum mereka
dapat bergerak maju.
C. NOTIFICATION • Biasanya berupa peringatan/validasi
• pesan pembaruan yang mengumumkan sesuatu
yang baru bagi pengguna untuk dilihat.
• Pemberitahuan biasanya digunakan untuk
menunjukkan item seperti, berhasil
menyelesaikan tugas, atau peringatan.

www.themegallery.com
 Container
ACCORDIONS
• Akordeon adalah daftar item yang ditumpuk secara vertikal yang menggunakan fungsionalitas show /
hide.
• Ketika label diklik, maka akan memperluas bagian yang menunjukkan konten di dalamnya.
• Bagian perluasan tersebut dapat memiliki satu atau lebih item yang ditampilkan pada satu waktu

www.themegallery.com
Alhamdulillah 