USER INTERFACE

By
RINIANTY, S.Kom.,M.TI
User Interface?

User Interface adalah tampilan visual sebuah produk yang

menjembatani sistem dengan pengguna (user). Tampilan
UI dapat berupa bentuk, warna, dan tulisan yang didesain
semenarik mungkin. Secara sederhana, UI adalah
bagaimana tampilan sebuah produk dilihat oleh pengguna.
“User Interface yang baik ialah UI yang tidak memerlukan
pelatihan dalam pengoperasiannya, efisien dan user
friendly”
User Interface?

User Interface menyatukan konsep-konsep dari desain interaksi, desain

visual, dan arsitektur informasi. User Interface meliputi elemen seperti
teks, link, tombol dan gambar.
Tujuan akhir dari sebuah UI adalah untuk menjamin kemudahan
penggunaan, aksesibilitas fitur, dan User Experience yang memuaskan.
Dengan kata lain, UI yang efektif memudahkan pengguna menikmati
semua fitur dan fungsi yang ditawarkan oleh sebuah produk digital.
Pentingnya User Interface
 Memudahkan Interaksi pengguna dengan produk UI merupakan
elemen visual sistem produk. Hal itu termasuk desain layar, tombol,
ikon, gambar, teks, dan semua elemen visual lainnya berperan
sebagai jembatan produk dengan pengguna. Jika interaksi pengguna
berjalan baik, kebutuhan dan tujuan pengguna menggunakan produk
dapat terpenuhi.
 Meningkatkan Penjualan dan Pertumbuhan Bisnis UI berfokus pada
kepuasan dan kesenangan pengguna, maka UI berperan penting
dalam kesuksesan bisnis Anda. UI yang baik juga akan membangun
reputasi produk lebih baik
Pentingnya User Interface

 Meningkatkan Kualitas Branding

a. Tampilan UI juga bisa menjadi ciri khas sebuah produk(branding)
b. Desain UI secara langsung akan mencerminkan nilai dan kualitas
produk
Contoh: a. website produk fashion, kuliner, dan teknologi.
b. sistem operasi iOS dan Android
Penggunaan Elemen dalam UI
 Kontrol input seperti tombol, toogles, dan checkbox
 Sistem navigasi misalnya slider, kolom search, ikon, danlain-lain.
 Sistem informasi seperti tooltips, notifikasi, kotak pesan, dan progress bar
 Elemen Call to Action (CTA).
Semua elemen dalam cakupan UI bisa dikategorikan dalam 4 komponen dasar
meliputi:
• Tata letak
• Warna
• Tipografi
• Grafik
Komponen Pembentuk User Interface (UI)

 Tata letak : penempatan atau pengaturan posisi semua elemen grafis. UI yang baik
pada dasarnya bersifat sederhana, dalam arti elemen grafis – terutama untuk
navigasi dan akses fitur – harus tertata dengan baik sehingga mudah dilihat dan
digunakan. Pengguna bisa dengan cepat memahami pilihan fungsi yang ada.
 Warna : pilihan warna memiliki pengaruh besar dalam desain antarmuka
pengguna. Penggunaan warna yang berbeda untuk setiap tombol dan ikon
memudahkan pengguna menemukan fitur yang dicari dan ingin digunakan.
Secara umum, prinsip utama adalah menggunakan skema warna yang sesuai
dengan jenis alat/aplikasi dan simbol atau logo perusahaan.
Komponen Pembentuk User Interface (UI)

 Tipografi : penggunaan jenis huruf yang tepat juga sangat penting

karena elemen ini berperan dalam menentukan tingkat keterbacaan.
Huruf atau teks di situs online, aplikasi, game, atau alat digital tidak
hanya harus mudah dibaca tapi juga enak dilihat dan unik.
 Grafik : elemen visual terutama gambar dan ikon bisa menjadi poin
utama. Sebuah logo perusahaan harus memberi fungsi representatif
pada model bisnis atau industri yang digeluti perusahaan tersebut.
Karakteristik User Interface

 Jelas dan Ringkas

 Desain Responsive
 Informasi Terstruktur
 Konsisten
 Kontras Warna Yang Baik
 Intuitif
Karakteristik User Interface

1. Jelas dan Ringkas:

• Pengguna bisa menggunakan dan berinteraksi dengan sistem secara
mudah.
• Buatlah penjelasan yang ringkas dan tidak terlalu panjang.
2. Desain Responsive
Desain website yang responsif membuat pengunjung dapat mengakses
website di berbagai perangkat seperti PC desktop dan mobile dengan
baik.
Karakteristik User Interface
3. Informasi Terstruktur
• Membuat tampilan UI dengan informasi yang terstruktur
• Memilih jenis dan warna font yang senada.
• Untuk beberapa informasi yang ditonjolkan, bisa menambah ukuran font.
• Tidak memasukkan banyak elemen yang tidak terlalu penting sehingga membuat
tampilan berantakan/tumpang tindih.
4. Konsisten
Konsistensi desain berupa layout, warna, dan font yang digunakan, serta fungsi-
fungsi tombol, icon, maupun tabs yang ada. Contoh: Microsoft Office.
Karakteristik User Interface
5. Kontras Warna Yang Baik
• Gunakan kombinasi warna yang sesuai agar terlihat jelas
informasi yang ingin disampaikan.
• Hindari penggunaan warna yang mirip antara background dan
tulisan.
6. Intuitif
• Tidak membuat user berpikir bagaimana menggunakannya.
• Meminimalisir waktu dalam mempelajari cara menggunakan
Mockup
Mockup adalah rancangan yang menunjukkan contoh bagaimana penampilan dari input maupun
output yang mengandung data sebenarnya. mockup menyampaikan aspek desain visual, termasuk
gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk
dibuat. Mock up sendiri terdiri dari dua kategori, yakni low fidelity dan juga high fidelity.
Kategori low fidelity mock up ini merupakan sebuah rancangan desain yang masih sangat
sederhana. Sementara untuk yang high fidelity mock up merupakan rancangan yang sudah cukup
kompleks dalam menampilkan produknya.
Kelebihan mockup:
• Mengorganisir detail dari proyek
• Menemukan error
• Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders
• Menyampaikan ide kepada anggota tim
• Implementasi desain
• Perspektif user
Mockup
Hal-hal yang harus dilakukan dalam membuat Mockup:
1. Buat Mockup asli dari awal
• Dapat dilakukan dengan menggunakan kombinasi foto / gambar
sendiri
2. Gunakan Smart Object untuk menerapkan desain ke template
• Smart Objects “mempertahankan konten dan sumber gambar
sesuai dengan karakteristik aslinya sehingga memungkinkan
melakukan pengeditan tanpa merusaknya”.
3. Gunakan Photoshop untuk mockup 3D.
Tools Mockup
 Figma
Aplikasi Figma akan membantu kamu untuk melakukan wireframing. Selain
gratis, aplikasi ini juga menyediakan berbagai fitur dan juga kemudahan
untuk para web designer untuk membuat desain mockup mereka. Tak hanya
itu saja, tampilan dan juga fitur Figma juga cukup sederhana. Sehingga
sangat cocok untuk digunakan para pemula.
 Canva
Canva merupakan salah satu aplikasi mockup paling populer karena
kemudahannya dalam digunakan. Terdapat berbagai macam template yang
tersedia untuk membantu kamu untuk membuat prototipe website ataupun
sebuah produk. Beberapa aset yang tersedia di Canva bisa digunakan secara
gratis dan berbayar.
Tools Mockup
• Mockflow
Mockflow adalah salah satu aplikasi mockup yang memungkinkan
kamu untuk membuat wireframes yang interaktif dan prototipe UI.
Selain itu, Mockflow ini juga memungkinkan kamu untuk saling
berkolaborasi dalam proses pengerjaan.
 Proto.io
Proto.io adalah sebuah platform prototyping yang dirancang khusus
untuk membuat mockup aplikasi mobile. Terdapat berbagai fitur yang
tersedia untuk menunjang proses pembuatan mockup yang menarik
dan juga kompleks, Proto.io ini juga bisa diakses di banyak jenis
perangkat, seperti iPad, iPhone, dan juga Android.
Tools Mockup

 Wirefy
Wirefy adalah salah satu software wireframing online yang
dibuat khusus untuk proses pembuatan website dan
pengembangan alat. Dengan menggunakan aplikasi yang
satu ini, kamu bisa mempercepat proses desain karena
software ini akan menciptakan transisi yang lebih halus
antara sketsa awal dan hasil kerjanya.
Contoh Mockup

 Mockup Website atau Aplikasi

 Mockup Logo
 Mockup Kemasan
Contoh Mockup
Latihan Kasus
 Buatlah mockup menggunakan salah satu aplikasi.
 Tema Mockup : Aplikasi E-commerce
 Mockup aplikasi terdiri dari 3 halaman
a. Halaman Login (ada nama aplikasi, logo, kotak input
nama user, kotak password, kotak konfirmasi password
dan tombol untuk login)
b. Halaman About (berisi tentang penjelasan aplikasi)
c. Halaman Produk (berisi tentang nama produk, foto
produk, harga produk, tombol keranjang, tombol bayar dll