Site cover image

Site icon image Irvan Maulana Personal Blog

Thought and learning expressed in writing

Pengenalan terhadap User Interface (UI)

Halo semua!! pada kali ini saya akan melanjutkan bahasan saya mengenai beberapa teori di bidang UI/UX, langsung saja ke teori di bawah ini


Apa itu User Interface (UI)?

User Interface (UI) adalah sebuah konsep dimana menjelaskan mengenai cara kita berkomunikasi dengan sistem, sistem disini dapat berupa apa saja, seperti komputer, aplikasi, produk atau mesin.

analogi singkatnya bisa dianalogikan bahwa UI itu seperti Bahasa, dapat menjembatani untuk berkomunikasi dengan sesuatu sistem, produk, aplikasi atau layanan.


Komunikasi UI

Manusia menggunakan Komponen UI untuk berkomunikasi, komponen dalam UI berfungsi sebagai elemen dasar dari UI yang dapat digunakan untuk berinteraksi dengan sistem, produk, layanan dll, semua komponen UI digabungkan untuk menciptakan interaksi yang dapat digunakan oleh manusia untuk berinteraksi.


Kenapa UI ada?

secara singkatnya UI ada untuk mempermudah manusia berinteraksi dengan berbagai sistem, sistem disini mengacu seperti bahasan sebelumnya yaitu produk, layanan atau aplikasi. tanpa adanya UI, manusia akan kesulitan dalam mengoperasikan sistem, seperti mengingat banyak perintah atau simbol tertentu dalam mengoperasikan sesuatu, UI dapat mempermudah sistem digunakan oleh manusia.

Kita coba perlihatkan contohnya saja ya, contohnya pada dahulu kala saat perkembangan komputer masih di tahap awal untuk membuka aplikasi komputer saja masih menggunakan sistem yang berbentuk Command Line Interface (CLI) / perintah tertentu, seiring perkembangan zaman UI mulai berubah dan semakin dipermudah maka muncullah sistem dalam bentuk GUI (Graphical User Interface) dimana contohnya kita tidak perlu untuk mengetikkan perintah saat ingin membuka aplikasi, kita hanya perlu mengarahkan kursor pada aplikasi yang ingin dibuka.

jadi kesimpulannya UI ada untuk mempermudah manusia dalam berinteraksi dengan berbagai sistem, membuat sistem yang rumit menjadi lebih mudah untuk dipelajari atau di operasikan oleh manusia.


Implementasi dari UI

Image in a image block
Implementasi dari UI

UI dapat di implementasikan dalam beberapa bentuk, diantaranya dalam bentuk:

1. Graphical User Interface

Graphical User Interface (GUI) adalah bentuk implementasi UI yang ditampilkan dalam bentuk grafis sebagai representasi untuk control sistem digital, contoh dari implementasi UI ada pada tampilan desktop komputer.

2. Voice Controlled Interface / Voice User Interface (VUI)

Voice Controlled Interface adalah bentuk implementasi UI yang berinteraksi menggunakan media suara untuk mengontrol sistem, contoh dari implementasinya adalah Siri di Iphone, Alexa di perangkat amazon, Cortana di windows dll.

3. Gesture Based Interface

Gesture Based Interface adalah bentuk implementasi UI yang berinteraksi dengan menggunakan media gerakan badan baik itu berupa tap, swipe atau rotasi, contoh dari implementasi nya adalah game VR yang menggunakan sistem rotasi.


User Interface Design (UID)

masuk ke pembahasan User Interface Design (UID) dimana implementasi UI yang lebih berfokus pada elemen visual dari produk, aplikasi atau layanan, berfokus juga untuk memastikan bahwa UI yang dirancang mudah untuk diakses, dimengerti dan digunakan, desainer akan membuat tampilan dari layanan atau produk, layout, typography, color dan graphics yang digunakan.


Best Practice dalam merancang UI

Setelah kita membahas Konsep dari UI, Implementasi dari UI dan juga konsep UID lalu kita akan bahas mengenai langkah praktis membuat UI yang baik, dijelaskan secara sederhana, tentu ada materi lebih dalam mengenai konsep merancang ini pada materi Prinsip Gestalt, UX Law dll, namun untuk saat ini saya coba jelaskan dulu secara sederhana.

  1. Buat UI yang simpel, simpel disini merujuk pada penggunaan elemen yang sederhana, menghilangkan fitur yang tidak terlalu penting dan sederhana dalam penggunaan warna namun masih berfokus pada brand, penggunaan typography yang sederhana dan mudah untuk dibaca dan jelas dalam penyampaian kata-kata yang disajikan.
  2. Buat UI yang Konsisten dan Familiar, maksudnya kita harus konsisten dalam penerapan warna tentukan warna primary, secondary dan tertiary dalam desain sesuai dengan proporsi prioritas warna, penggunaan typography yg dibatasi max 2 typeface yang digunakan dalam satu desain UI, penggunaan komponen UI usahakan komponen yang pengguna sudah familiar dan cara kerja UI yang mirip dengan aplikasi yang sudah ada sesuai konsep Jakob’s Law.
  3. Perhatikan pengaturan layout UI, kita perlu memerhatikan elemen UI yang perlu di prioritaskan untuk ditonjolkan dalam sebuah produk/layanan, penentuan posisi letak arah desain misal kita gunakan F pattern agar konten mudah dibaca oleh pengguna atau penggunaan whitespace (jarak) antar tiap komponen agar UI lebih mudah untuk dibaca dan dibedakan dalam pengelompokannya.
  4. Gunakan prinsip desain, kalian bisa gunakan prinsip desain seperti Gestalt Principles, UX Laws untuk merancang UI yang lebih Teratur dan lebih konsisten, penggunaanya sesuaikan dengan tujuan dari produk yang dirancang karena mengatur mengenai komposisi, hierarki, jarak dll dalam perancangan desain.
  5. Informasikan setiap interaksi yang ada di UI, usahakan kalian rancang UI yang memang memudahkan pengguna tau bahwa sistem berjalan dengan lancar, tampilkan animasi loading saat load konten, beritahukan notifikasi jika ada error, notifikasi konfirmasi saat melakukan interaksi yang penting dan informasikan progress dalam desain yang bertahap.


Bagaimana dengan lingkup penerapan UI?

Lingkup penerapan UI juga cukup luas seperti UX, UI dapat diterapkan pada produk digital seperti aplikasi smartphone, website, aplikasi desktop atau produk fisik seperti mesin, peralatan dan juga bangunan. tentunya dari beragam produk yang ada memiliki tujuan yang berbeda-beda itu semua disesuaikan dengan tujuan dari produk atau layanan itu tersendiri.


Bagaimana jika penerapan UI kurang pada suatu produk?

Jika UI kurang penerapannya dalam sebuah produk/layanan tentu akan mempengaruhi pada interaksi yang ada, misal produknya akan lebih sulit untuk digunakan, pengguna tidak tahu cara menggunakan/mengoperasikannya, pengguna akan memakan waktu lama untuk mempelajari sistemnya dan dapat membuat pengguna frustrasi dan akhirnya meninggalkan tugasnya, dalam bisnis akan mempengaruhi ke tingkat penjualan, tingkat kepuasan terhadap produk dan juga pengguna akan meninggalkan produk tersebut.

jadi penerapan UI tersendiri sangat penting baik untuk pengguna yang memakainya maupun dari segi bisnis dari produk.


Kesimpulan yang dapat diambil

  • UI adalah konsep bagaimana kita berkomunikasi dengan sistem/produk/layanan.
  • UI ada untuk mempermudah manusia berinteraksi dengan berbagai sistem dalam kehidupannya melalui komponen UI.
  • Implementasi UI dapat diterapkan dalam bentuk Graphical User Interface (GUI), Voice User Interface (VUI) dan Gesture Based Interface menyesuaikan kebutuhan produk untuk menciptakan produk yang inclusive.
  • User Interface Design (UID) adalah implementasi untuk membuat UI lebih baik digunakan.
  • UI yang baik adalah UI yang simpel, konsisten, familiar kepada pengguna dan informatif.
  • Penerapan UI luas dan dapat dimanfaatkan pada beragam produk agar tercipta kemudahan bagi pengguna produk maupun bisnis.

sekian penjelasan dari saya, semoga bermanfaat.


Irvan Maulana - 2023