BAB I DEFINISI UI UX

Sasaran Pembelajaran

Mahasiswa mampu menguraikan dan menjelaskan definisi User Interface dan User Experience
(UI/UX)

Kemampuan mahasiswa yang menjadi prasyarat

Mahasiswa sudah menguasai materi Interaksi Manusia Komputer dan menguasai tools untuk
mendesain

Keterkaitan bahan pembelajaran dengan pokok bahasan lainnya

Materi ini sebagai dasar untuk mempelajari pokok bahasan lainnya

Manfaat atau pentingnya bahan pembelajaran ini

Memberi pemahaman pengertian UI UX

1.1 Definisi User Interface

UI atau User Interface merupakan mekanisme komunikasi antara pengguna (user) dengan
sistem pada sebuah program, baik itu aplikasi website, mobile, ataupun software. Mekanisme
itu disesuaikan dengan kebutuhan pengguna terhadap program yang tengah dikembangkan.
Cakupan UI itu meliputi tampilan fisik, penggunaan warna, tampilan animasi, hingga pola
komunikasi suatu program dengan penggunanya.

Biasanya, seorang desainer UI akan membuat desain yang kiranya memudahkan pengguna
programnya. Adapun, desain itu disesuaikan dengan tingkat kebutuhan dasar pengguna
terhadap program aplikasi web ataupun mobile tersebut. Output dari hasil desainer UI ialah
program dengan segala fitur yang kiranya sesuai dengan kebutuhan pengguna dalam
menggunakan program tersebut.

1.2 Definisi User Experience

Pengertian UX atau User Experience memang tidak terlalu jauh berbeda dengan UI.
Perbedaannya terletak pada fokus utama hubungan komunikasi antara pengguna dengan
programnya, yakni berfokus pada pengalaman penggunanya.

Seorang desainer UX akan merancang program aplikasi web atau mobile berdasarkan
pengalaman dari pengguna atau user setelah menggunakan aplikasi web atau mobile tersebut.
Dengan begitu, program yang dirancang menjadi lebih mudah digunakan oleh penggunanya.

5
User experience (UX) sesuai artinya dalam bahasa indonesia “pengalaman pengguna” adalah
pengalaman yang diberikan website atau software kepada penggunanya agar interaksi yang
dilakukan menarik dan menyenangkan. Kalau dulu aplikasi mempunyai usability yang bagus
saja sudah cukup. Sekarang sebuah aplikasi juga harus memiliki user experience yang bagus.

Seperti apa user experience itu? Saat membuka Instagram sampai berjam-jam tanpa bosan, saat
chatting menggunaan WhatApp tanpa henti, saat berlama-lama mencari barang-barang jualan
di toko online, berarti sudah menikmati user experience yang sudah diberikan oleh Instagram,
WhatsApp dan juga toko online. Kenapa juga bisa berjam-jam sibuk dengan smartphone? Itu
semua karena penerapan user experience dalam smartphone sudah sangat baik.

1.3 Perbedaan UI dan UX

Sebelumnya sudah disinggung bahwa perbedaan antara UI dan UX berada pada fokus
utamanya. Bila UI fokus pada interaksi pengguna dengan programnya, maka UX fokusnya pada
pengalaman pengguna dalam menggunakan suatu aplikasi web atau mobile.

Seorang desainer UI akan mendesain program aplikasi web atau mobile sesuai dengan
kebutuhan pengguna. Sehingga, ketika menggunakan program tersebut pengguna lebih mudah
dan tidak kesulitan.

Sedangkan, desainer UX membuat program berdasarkan pengalaman dari penggunanya. Apa

saja yang dirasakan dan kesulitan apa saja yang dihadapi ketika menggunakan program
tersebut.

Sebenarnya, keduanya memiliki tujuan yang sama dalam mendesain program aplikasi web
ataupun mobile, yakni memudahkan penggunannya. Oleh sebab itu, seringkali dalam proses
perancangan sebuah program, desainer UI dan UX selalu berada dalam satu tim. Sebab, dengan

6
perpaduan keduanya, sebuah program aplikasi web ataupun mobile menjadi sangat mudah
digunakan oleh pengguna tanpa harus membaca panduan. Seringkali, desainer UI dan UX
bertukar data analisis untuk menyempurnakan program yang tengah dibuatnya.

Jadi, UI dan UX sebenarnya berbeda. Perbedaannya pada fokus utama. UI fokus pada
kebutuhan pengguna terhadap program aplikasi aplikasi web atau mobile, sedangkan UX fokus
pada pengalaman pengguna.

Pada dasarnya, User Experience adalah tentang “memahami pengguna”. Tujuan UX adalah
mencari tahu siapa mereka, apa yang mereka capai dan apa cara terbaik bagi mereka untuk
melakukan “sesuatu”.

UX berkonsentrasi pada bagaimana sebuah produk terasa dan apakah itu memecahkan masalah
bagi pengguna.

Sedangkan User Interface adalah bagaimana suatu website atau aplikasi yang dibuat terlihat
dan berbentuk seperti apa. Hal tersebut mencakup Layout (tata letak), Visual Design (desain
visual) dan Branding.

Mengerti perbedaan antara UI Design dan UX Design, bukan sekedar untuk teori, tapi akan
berpengaruh pada proses design. Beberapa orang (kalau bukan kebanyakan) menganggap
design itu hanya terkait warna, pemilihan font, gambar/foto, dan icon. Padahal UX Design itu
jauh melebihi warna dan sebagainya.

1.4 UI Design
Seperti namanya, (UI) User Interface. Maka ada 2 hal yang harus diperhatikan oleh seorang
designer saat membuat UI, yaitu User dan Interface. Berikut gambarannya:

7
Untuk menghasilkan UI (User Interface) yang baik, Anda harus memperhatikan 2 hal diatas.
Kata User ditempatkan di depan kata Interface, karena UI yang baik selalu memperhatikan dan
mengutamakan user. UI yang baik akan membantu user. Dan, UI yang baik akan membuat user
nyaman menggunakannya.

1.5 Memulai Menjadi UI Designer

Untuk memulai menjadi UI Designer Anda boleh men-skip bagian User-nya dan fokus di
Interface-nya dulu. Dalam pembuatan UI, Anda harus memikirkan tentang bagaimana nanti
user memakainya. Contohnya: Sebuah Tombol.

Saat men-desain sebuah tombol, Anda harus memikirkan “Apakah user tahu kalau ini tombol
yang bisa di-klik?”. Tapi, hal yang tidak kalah penting adala Anda harus tahu bagaimana bentuk
tombol itu. Maka dari itu, sebagai permulaan UI untuk fokus di bagian Interface-nya terlebih
dahulu agar Anda familiar dengan bentuk-bentuk UI.

Apakah Anda familiar dengan Photoshop? GIMP? atau software sejenis lainnya?. Jika belum,
maka sebaiknya Anda mulai belajar menggunakan software tersebut.

Langkah pertama untuk menjadi UI Designer adalah mencoba untuk membuat UI. Tidak perlu
bingung mau mulai dari mana atau mau mendesain apa. Anda cukup memilih desain-desain
interface yang ada di internet. Pilih yang Anda suka lalu jiplaklah, buat semirip mungkin.

Anda bisa browsing di situs seperti dribbble.com, behance.net atau kreavi.com. Banyak sekali
desain UI disana.

Kenapa harus menjiplak desain?

Hal ini untuk membuat Anda familiar dengan UI. Bagaimana bentuk tombol, ukuran teks, jarak
antar baris kalimat, jarak tiap elemennya.

8
Jadi, Semakin sering Anda menjiplak sebuah desain, maka Anda akan semakin familiar dengan
ukuran setiap elemen UI. Tapi ingat, jiplak menjiplak ini hanya untuk kepentingan belajar.
BUKAN untuk diupload di sosial media ataupun situs portfolio.

Jika Anda telah menjiplak UI berkali-kali, maka Anda sudah terbiasa membuat tombol, terbiasa
membuat dropdown, input text, dan elemen-elemen UI lainnya. Kini, saatnya Anda untuk
membuat UI Anda sendiri.

Caranya gampang, Pertama, tentukan platform terlebih dahulu. Anda ingin membuat apa?
design untuk mobile app (Android/iOS), design untuk web, atau bahkan design untuk
smartwatch app?

Setelah itu, tentukan tema design-nya. Anda ingin membuat tampilan untuk aplikasi kesehatan?
website artikel teknologi? atau tampilan untuk aplikasi pemesanan makanan?

Setelah platform dan tema sudah dipilih, kini saatnya Anda browsing lagi design-design yang
Anda sukai. Tapi kali ini, carilah design yang sesuai dengan platform dan tema yang Anda pilih
tadi.

Lalu pilih 2 design yang paling Anda sukai, dan coba buat sesuatu yang baru dari hasil
kombinasi dua design tersebut.

Contohnya seperti ini:

Saat mendesain sebuah UI, pikirkanlah bagaimana nanti user memakainya. Untuk melatih hal
itu, biasakanlah mendesain dengan sebuah alasan. Apa artinya? Design yang Anda buat,

9
komponen yang Anda buat, sebaiknya memiliki alasan yang kuat kenapa diletakkan seperti itu
atau berbentuk seperti itu.

Contoh 1:

Kenapa menu nya ada dibawah?

Karena app ini memiliki 3 menu utama. Dan dalam penggunaan app ini, user cenderung
berpindah-pindah dari menu satu ke menu utama lain-nya dalam selang waktu relatif singkat.
Maka dari itu, untuk mempermudah user, 3 menu utama ditaruh di bawah dan sisanya ditaruh
di menu more yang terletak di paling kanan.

Kenapa ada tulisan yang tebal dan ada yang tidak tebal?

Ini adalah menu Inbox, tulisan yang tebal sebagai penanda belum dibaca. Dan yang tidak tebal
sebagai penanda sudah pernah dibaca. Sehingga memudahkan user untuk membedakannya.

Contoh 2:

10
Ada dua inputan tanggal, tapi kenapa beda? Padahal kan sama-sama memilih tanggal.

Coba bayangkan jika Anda menjadi user. Untuk mengisi tanggal lahir, lebih mudah
memakaiformat pengisian yang atas atau yang bawah? Tentu lebih mudah memakai format
yang atas. Karena, Anda ingat tanggal lahir Anda. Dan dengan cepat akan mengisi hari, bulan
dan tahunnya. Tapi, coba bayangkan jika menggunakan format pengisian yang bawah, berapa
kali Anda harus mengklik tombol back untuk menuju bulan Maret 1980.

Lalu untuk inputan tanggal pembayaran, kenapa format pengisian-nya harus seperti itu?

Ini adalah form konfirmasi pembayaran, setelah user melakukan pembayaran, biasanya user
akan langsung mengkonfirmasikan pembayaran-nya. Coba bayangkan, jika user harus mengisi
dengan format pengisian seperti tanggal lahir. Cukup merepotkan user, karena dia harus
mengingat hari ini tanggal berapa. Tapi dengan format pengisian seperti di design, ketika user
memilih tanggal, maka akan terbuka kalender bulan ini, dengan tanggal hari ini ditandai biru.
Sehingga user dengan mudah memilih tanggal pembayarannya.

Contoh 3:

Kenapa menu nya ada di kiri dan ke bawah? apakah karena ini dashboard yang tren-nya selalu
menaruh menu di sebelah kiri?

Menaruh menu di kiri dan vertical ke bawah, pertimbangannya adalah skalabilitas. Sebelum
merancang design ini, kami menganalisa bahwa kedepannya, menu menu di dashboard ini akan
bertambah dan pertambahannya bisa cukup banyak. Jika membuat design menu-nya secara
horizontal, maka kelak jika menunya sangat banyak, akan terjadi masalah pada layout-nya.

11
Tentu Anda tidak ingin melihat 2 baris menu terletak di bagian atas. Maka dari itu, diputuskan
untuk membuat design menu-nya secara vertical ke bawah. Jadi, jika ada pertambahan menu,
tidak akan terjadi masalah pada layout-nya.

1.6 Mengapa User Experience Itu Penting?

Memudahkan pengguna

Penerapan user experience akan memudahkan pengguna dalam menggunakan aplikasi. Karena
didalamnya sudah ada penilaian aspek usability. Setiap aplikasi pastilah dibuat agar para
pengguna mudah untuk menggunakannya.

Menarik minat pengguna

Selain faktor kemudahan penggunaan, penerapan user experience juga untuk menarik minat
pengguna. Tujuan aplikasi dibuat sudah pasti ingin penggunanya selalu menggunakan
aplikasinya. Jika aplikasi tidak menarik untuk pengguna, sudah pasti bisa dengan mudah akan
ditinggalkan.

Berdampak pada faktor kesuksesan

Seperti pada poin diatas, pengguna akan mudah meninggalkan aplikasi yang tidak memberikan
pengalaman menarik. Contoh aplikasi chatting WhatsApp. Aplikasi ini makin hari makin
banyak penggunanya karena memberikan pengalaman pengguna yang menarik. Kita bisa
bandingan dengan aplikasi sejenis yang penggunanya semakin menurun setiap hari. Oleh
karena itu, user experience penting diterapkan pada sebuah aplikasi untuk meningkatkan
kesuksesan atau minimal mempertahankan kesuksesan.

Menghasilkan UI yang bagus

User interface itu merupakan keluaran dari penerapan user experience. Jika user experience
pada sebuah aplikasi benar-benar diperhatikan penerpannya, maka akan menghasilkan desain
UI yang bagus. Bagus disini tidak harus warna-warni dan bling-bling, namun secara tampilan
akan elegan dan menarik.

Untuk memenangkan persaingan

Apakah Anda mengetahui mengapa toko ritel seperti indomaret dan alfamart bisa
memenangkan persainan dari toko di sekelilingnya? Itu karena mereka menerapkan user
experience yang bagus. Padahal barang yang dijual sama, secara harga bisa lebih mahal, tapi
secara pengalaman yang mereka berikan itu tidak ada di toko biasa.

Contoh lain lagi yaitu antara Android dan IOS. Mengapa orang mau bayar mahal smartphone
ini? Karena user experience yang mereka berikan memang terbaik. Berikut beberapa hasil
penelitian mengenai pentingnya UX:

12
 1. Menurut penelitian dari Imaginovation, sebuah lembaga penelitian berbasis di Amerika:
Jika konten Anda tidak dioptimalkan dengan baik, sebanyak 79% pengunjung akan
keluar dari website Anda dan mencari konten/produk lainnya.
2. Menurut penelitian dari lembaga riset HubSpot: pengguna ponsel 5X lebih punya
kecenderungan untuk meninggalkan website Anda jika website tidak dioptimalkan agar
sesuai dengan perangkat yang mereka punya. (Gawat kalau setidaknya ada 2/3
pelanggan yang akses website Anda dari ponsel mereka sebenarnya ingin melakukan
pembelian pada hari itu juga)
3. Menurut penelitian dari lembaga riset MindTouch: Ini kasus nyata, pendapatan dari
website ESPN.com melonjak 35% setelah mereka mendengarkan keluhan pengguna
mereka dan mendesain ulang homepage mereka.
4. Menurut Adobe: 39% orang akan berhenti mengakses website jika gambar tidak dimuat-
muat atau terlalu lama loading-nya.

Jadi intinya, website Anda sekarang ini fungsinya mirip seperti toko. Bayangkan user sebagai
seorang calon pembeli yang masuk ke toko Anda. Jika mereka mengalami pengalaman yang
buruk, contohnya si calon pembeli ini tidak bisa menemukan apa yang mereka butuhkan. Tak
hanya itu, bisa juga pihak toko tidak berhasil menjangkau calon pembelinya, maka si calon
pembeli pasti akan pergi dan tidak akan kembali lagi.

13