PENGERTIAN UI/UX
UI atau User Interface adalah proses dimana menampilkan sebuah hasil dalam bentuk
tampilan yang dapat dilihat oleh pengguna (user). Lebih tepatnya adalah bagian visual
dari website, software, maupun hardware untuk user dapat berinteraksi. Tujuan dari
User Interface sendiri adalah untuk meningkatkan fungsionalitas serta user experience
dari pengguna.
UX atau User Experience adalah proses dimana pengguna dapat berinteraksi dengan
interface secara baik dan nyaman. Yang terpenting disini, tujuan dari UX adalah
untuk meningkatkan kepuasan pengguna saat mengakses sebuah tampilan, baik dari
sisi website, mobile, maupun desktop. UX sendiri menjadi sebuah penghubung antara
pengguna dengan produk.
PERANAN UI/UX
ugas dari posisi tersebut tentunya tidak hanya sekedar ahli dalam membuat sebuah
desain maupun tampilan kasar dari aplikasi. Akan tetapi, UI/UX Designer juga harus
memperhatikan mengenai fungsionalitas dan tampilan dari desain awal yang akan
dibuat untuk perangkat lunak.
Perbedaan UI UX Adalah
1. Tujuan Desain
Hal yang paling mendasar terkait perbedaan UI UX adalah tentang tujuannya. Fokus
pembuatan desain UI UX sangat berbeda. Desain UI di dalam suatu produk bertujuan
untuk memperindah tampilan suatu produk. Disisi lain, desain UX dibuat agar bisa
memberikan pengalaman yang menyenangkan bagi pengguna ketika menggunakan
produk tersebut.
2. Proses Desain
Dengan adanya perbedaan tujuan desain, maka prosesnya pun akan berbeda. Untuk
itu, proses dalam membuat UI UX pun berbeda.
Karena lebih fokus pada UX, maka proses desain UX akan berdasarkan riset
pengguna hingga mampu menghasilkan produk yang dibutuhkan dan juga disenangi
oleh target audiens. Prosesnya juga harus melalui banyak tahapan dan juga
memerlukan peran dari beberapa pihak, seperti UX Researcher.
Setelah melakukan kegiatan riset, para desainer pun akan merancang sketsa desain
dengan menggunakan wireframe dan prototype.
Sementara itu, desain UI juga membutuhkan riset yang mendalam. Tapi, riset yang
dilakukan adalah riset desain agar mampu membuat desain yang cukup menarik dan
sesuai dengan konsepnya. Dalam hal ini, maka para desainer UI harus membuat
model desain dengan cara membuat mockup lebih dulu.
Bagaimana UI UX berkolaborasi?
UX Designer akan bertugas untuk memutuskan bagaimana user interface bekerja,
sementara UI Designer akan memutuskan bagaimana tampilan interface terlihat.
Kolaborasi pada dua posisi ini sangat dibutuhkan, dimana UX Designer akan fokus
pada alur dari sebuah produk, seperti alur jika kamu menekan tombol tertentu dan UI
Designer berfokus pada tampilannya elemen-elemen seperti tombol tadi.
Jika diibaratkan sebagai kue, UI akan bertindak sebagai “pemanis” dan UX adalah
kuenya itu sendiri. Contohnya adalah ketika kamu akan membuat sebuah produk yang
sudah diriset oleh UX Researcher dan sudah memutuskan dengan baik alur seperti apa
yang akan ditempuh oleh pengguna sehingga mencapai tujuan bisnis. Namun,
ternyata, UI tidak bisa mengakomodasi ide itu dengan baik seperti dengan mendesain
tombol dengan warna yang kontras, tulisan yang terlalu kecil atau objek gambar yang
terlalu berdempetan. Tentunya, user tidak akan betah berlama-lama menggunakan
produkmu dan beralih ke kompetitor.
Skill yang dibutuhkan untuk menjadi desainer UI UX sangat berbeda. Beberapa skill
yang diperlukan untuk menjadi seorang UI adalah design branding, graphic design,
creative thinking, serta convergent thinking.
Berbagai skill tersebut harus dimiliki oleh Anda para desainer UI dalam membuat
tampilan produk agar bisa terlihat lebih menarik dan juga memudahkan para
pengguna dalam melakukan interaksi.
Di sisi lain, seorang desainer UX bertugas dalam membuat desain produk dengan
berdasarkan pendekatan pengguna agar lebih mudah untuk digunakan. Untuk itu,
mereka harus mempunyai skill analytical thinking, riset, critical thinking, problem
solving, serta creative thinking.
Workflow Design UI UX
1. Riset UX
Riset yang dilakukan dalam UX adalah langkah awal yang penting dalam membuat
desain yang baik. Banyak riset yang dilakukan untuk memahami apa yang diperlukan
oleh para pengguna.
Setiap UX researcher harus melakukan riset UX lewat sejumlah cara, baik itu dengan
cara user interview ataupun survey secara online. Data yang dikumpulkan juga bisa
menggunakan data kuantitatif dan kualitatif.
Bila riset UX berhasil dilakukan, maka tahap selanjutnya adalah dengan membuat
information Architecture atau IA produk. IA adalah proses dalam menyusun struktur
berbagai bagian website dan juga aplikasi. IA akan mempermudah tim untuk bisa
memahami konsep produk.
Dalam membuat IA, maka Anda memerlukan hasil riset UX. Hasil tersebut bisa
diperoleh dengan cara card sorting, yakni dengan memilah dan juga menentukan
persona pembeli atau yang disebut dengan buyers persona. Hasil riset tersebut mampu
membantu Anda dalam membuat struktur produk dengan berdasarkan perspektif para
pengguna.
3. Membuat Wireframe
Proses selanjutnya adalah proses wireframing yang merupakan sketsa visual dari
suatu suatu produk tertentu. Sketsa ini pun akan menunjukkan alur informasi untuk
para pengguna agar bisa menggunakan produk tersebut. Di sinilah UX Desainer
berperan dalam membuat rancangan desain.
4. Mengatur UX flows
Selanjutnya, Anda harus mengatur alur suatu produk yang digunakan oleh para
pengguna. Alur ini dibuat dengan berdasarkan pendekatan UX agar nantinya
pengguna bisa nyaman dalam menggunakan produk. Alur atau flow ini nantinya harus
didokumentasikan agar para developer bisa dengan mudah mengembangkan
produknya.
Tahap selanjutnya adalah membuat prototipe desain yang sesuai dengan desain
wireframe dan flow atau alur yang sebelumnya sudah dibuat. Dalam membuat
prototipe desain, Anda bisa memanfaatkan aplikasi MockPlus, Adobe XD, Invision,
dan masih banyak lagi.
Sistem desain dibuat agar bisa menyimpan berbagai komponen desain di dalam suatu
library tertentu. Dalam tahapan ini, diperlukan kolaborasi antar desainer UI dan tim
developer. Desainer UI akan mulai membuat elemen desain dan tim developer akan
membuat komponen library, seperti menggunakan Javascript, CSS, HTML, dll.
Dengan kehadiran sistem ini, maka proses pembuatan desain akan berjalan lebih
efisien dan lebih efektif karena elemen desain yang sudah tersedia.
Dalam tahapan ini, seorang UI designer akan mulai bekerja mendesain tampilan
produk yang menarik. Dalam tahap ini, dilakukan juga implementasi dari proses
wireframe yang sebelumnya sudah dibuat.
Mereka bisa menggunakan aplikasi Adobe Photoshop, Adobe Illustrator, Sketch App,
dan berbagai aplikasi desain lainnya.
Lalu, tahap pengembangan produk dilakukan oleh developer. Dalam tahapan ini,
desain yang sebelumnya sudah lulus uji coba dan didesain oleh desainer UI akan
mulai dikembangkan oleh tim pengembang atau developer.
Jika suatu produk sudah bisa dibuat dengan tampilan yang baik, maka produk tersebut
pun sudah mulai bisa dirilis. Tapi sebelum benar-benar dirilis ke publik, produk
tersebut harus melalui proses uji coba dengan memberikan skor di setiap fitur desain
produk tersebut.
Bila proses uji coba sudah dilakukan, desain tersebut akan memperoleh saran dan
kritik dari para pengguna. Desain tersebut selanjutnya akan dites dan direvisi hingga
menjadi suatu desain yang nyaman dan juga diperlukan oleh para pengguna.
Keberadaan dari user interface maupun user experience tentu saja tidak dapat
dipisahkan. Masing – masing memiliki keterkaitan yang erat dalam memberikan
pengalaman kepada pengguna dalam mengakses aplikasi. Terdapat beberapa
komponen dalam UI/UX yang berperan dalam mengarahkan perilaku dari user dalam
menggunakan aplikasi tersebut.
1. Informasi Arsitektur
Informasi arsitektur adalah struktur dari segala bentuk informasi yang ditampilkan
kepada pengguna. Sebelum membahas rancangan aplikasi, kita harus tahu terlebih
dahulu apa yang dibutuhkan oleh user. Berikut ini, kami akan menjelaskan metode
apa saja yang dibutuhkan dalam mengorganisir informasi arsitektur.
a. Hierarki
b. Sekuensial
Metode sekuensial ini lebih menekankan pada proses break-down setiap
informasi menjadi beberapa tahapan yang nantinya akan digunakan oleh user. Fungsi
dari metode ini, agar pengguna dapat mengingat lebih baik informasi yang diberikan.
Contohnya, menu pada e – commerce yang memiliki produk informasi.
c. Matriks
Metode matriks ini banyak melimpahkan tanggung jawab kepada sisi pengguna.
Tanggung jawab disini, dalam mengorganisir informasi. Sebagai contoh, sorting
merupakan fitur yang menggunakan metode matriks.
2. Interaksi Desain
Aplikasi dibuat tidak hanya untuk dipandang dan dinikmati saja tampilannya. Tetapi,
interaksi dari aplikasi tersebut juga sangat berperan penting. Interaksi juga didukung
dengan desain yang baik pula.
Interaksi pada desain dapat berupa cara mengklik, menggeser, menekan fitur maupun
tombol dalam aplikasi. Interaksi desain sangatlah penting untuk mengetahui kebiasaan
(behavior) dari pengguna.
3. Fungsionalitas
4. Prototype
Setelah menyusun ketiga komponen di atas, selanjutnya yang perlu dilakukan adalah
membuat sebuah prototype kasar berupa Wireframe. Output dari prototype tersebut
akan dijadikan layout. Yang mana, nantinya akan diserahkan kepada tim pengembang
untuk proses pembuatan software.
5. Desain Visual
Setelah hasil wireframe telah dibuat, barulah bagi seorang visual designer untuk
membuat tampilan visual dari rancangan tersebut. Dengan penambahan dan
perubahan pada warna, style, font, dll. Fungsinya supaya memberikan gambaran yang
lebih jelas mengenai desain awal dari aplikasi yang akan dibuat.
Tools yang digunakan dalam pembuatan desain visual ini adalah Adobe XD, Figma,
dll. Anda bisa menggunakan salah satu tools tersebut sesuai dengan kebutuhan anda.
Dengan menggunakan Figma, anda dapat mengerjakan proyek secara online tanpa
perlu menginstall terlebih dahulu software seperti pada Adobe XD.
Bagaimana UI dan UX yang Baik?
Mudah untuk
didapatkan (Adoptability). Sebuah
Jelas dan Ringkas. Tampilan website produk yang bernilai seharusnya
Anda harus terlihat jelas dan ringkas agar mudah untuk didapatkan, mudah
pengguna dapat memahami informasi dibeli, dan mudah diunduh sehingga
aplikasi atau website Anda. pengguna bisa dengan mudah untuk
memulai menggunakan produk
tersebut.
Untuk memperdalam pengetahuan Anda tentang desain UI dan UX, di bab ini kami
akan memberikan beberapa contoh produk yang telah menerapkan desain UI UX.
1. Aplikasi Gojek
Aplikasi Gojek merupakan aplikasi yang bergerak di bidang jasa transportasi, jasa
antar makanan, barang, dan lain-lain. Desain aplikasi ini banyak mendapatkan
apresiasi dari para penggunanya. Penasaran bagaimana penerapan UI UX di aplikasi
Gojek? Yuk simak selengkapnya!
Penggunaan Ikon
Aplikasi Gojek didesain dengan model ikon untuk memudahkan pengguna
menggunakan aplikasi.
Jika ingin memesan GoRide, pengguna hanya tinggal klik ikon motor. Ingin memesan
makanan atau minuman, tinggal klik ikon sendok garpu. Ikon-ikon gojek ini akan jadi
lebih mudah dikenali oleh pengguna.
Penggunaan ikon ini juga membuat pengguna mudah mengenali fitur-fitur dari Gojek.
Pengguna jadi lebih cepat menyelesaikan kebutuhannya. Dengan begitu, pengguna
akan lebih puas menggunakan Gojek.
Konsistensi Desain
Jika diperhatikan, desain tampilan setiap fitur tidak jauh berbeda. Misalnya layout
pada fitur GoRide, GoCar, dan GoSend.
Tampilan layout ketiga layanan ini hampir sama. Yang membedakan hanyalah ikon
motor untuk pesanan GoRide atau Gosend dan ikon mobil untuk pesanan GoCar.
Desain yang konsisten membuat pengguna jadi lebih familiar dengan setiap fitur.
Pengguna pun jadi lebih mudah dan cepat dalam memenuhi kebutuhannya.
Gojek menyediakan banyak fitur yang menjadi favorite para penggunanya, seperti
GoRide (ojek motor), GoCar (taxi mobil), dan GoFood (pesan antar makanan).
Terbukti Gojek telah diunduh sebanyak 142 juta kali dan memiliki 2 juta mitra
pengemudi.
Dari segi kenyamanan pengguna, Gojek menampilkan flow fitur yang mudah
digunakan secara natural. Mari simak flow dari fitur GoRide berikut ini.
Dan secara otomatis, akan muncul hasil rencana perjalanan Anda lengkap dengan
biaya pemesanannya. Kemudahan ini membuat pengguna dapat memesan GoRide
tanpa effort yang berlebih. Terlebih terdapat fitur tombol dan copy wording di setiap
langkahnya untuk menggiring alur pemesanan.
2. Google
Hampir semua orang menggunakan layanan Google Search. Layanan ini memiliki
desain yang sederhana dan mudah digunakan. Nah, untuk lebih memahami bagaimana
penerapan UI UX pada Google search, simak uraian berikut ini.
Interface Google ini sangatlah simple. Di halaman awal Google Search, Anda hanya
akan melihat background putih dan kolom pencarian Google.
Tampilan Google Search simple, jelas, dan sangat berfokus pada tujuan pengguna,
yaitu melakukan pencarian. Pengguna jadi dapat dengan mudah menyelesaikan
kebutuhannya.
Berbeda dengan mesin pencarian lain, yang menampilkan banyak konten sehingga
pengguna bisa terdistraksi oleh konten tersebut.
Konsisten Warna dan layout
Jika pengguna ingin klik halaman website di hasil pencarian, pengguna akan klik font
yang berwarna biru. Jadi pengguna lebih cepat memenuhi kebutuhannya.
Jika di perangkat mobile, pengguna tidak tetap bisa melihat informasi secara presisi
menyesuaikan bentuk perangkat. Pengguna jadi tetap bisa menggunakan layanan
Google di mana saja dan kapan saja dengan mudah.
2. User Experience
Desain fitur Google membuat pengguna lebih cepat mempelajari setiap fitur dan
menyelesaikan kebutuhan. Misalnya, jika pengguna ingin mencari perkiraan cuaca
hari ini, pengguna cukup mengetik kalimat tersebut. Google akan menampilkan
informasi tentang perkiraan cuaca hari ini.
Pengguna cukup klik halaman website dan informasi yang dibutuhkan akan
didapatkan. Saking mudahnya pengguna dapat melakukan pencarian apa saja, Google
disebut sebagai “Advanced Search”.
Desain Adaptif
Desain adaptif berarti setiap pencarian yang dilakukan setiap pengguna akan
menampilkan hasil informasi yang dirancang khusus. Misalnya pengguna mencari
“Indonesia”, hasil yang muncul dimunculkan adalah berita, maps, dan gambar.
Sementara jika mencari “IHSG”, hasil yang ditampilkan berupa trafik saham karena
IHSG merupakan istilah dalam saham. Oleh sebab itu, hasil pencarian yang muncul
adalah tentang finance, berita, gambar, dll.
Dengan dirancang secara adaptif, pengguna dapat langsung menemukan informasi
yang dibutuhkan. Pengguna jadi tidak perlu kesulitan dan berlama-lama mencari
informasi, sehingga kepuasan pengguna akan meningkat.
Proses yang cepat dan no errors akan meningkatkan kenyamanan pengguna dalam
menggunakan produk.
Prinsip tersebut diadaptasi oleh Google. Apa saja yang dicari oleh pengguna akan
ditampilkan oleh Google. Misalnya mencari “kucing”, maka Google akan
menampilkan 121.000.000 hasil dalam 0.39 detik. Bahkan mencari dengan kata kunci
apapun.
Namun, jika kata yang kita cari sangat diluar logika, Google tidak dapat menampilkan
hasilnya. Misalnya “zxxxxxzzzzzzyyzyy” maka Google akan menampilkan bahwa
pencarian tersebut tidak cocok dengan dokumen web yang ada.
PERTANYAAN USER INTERFACE (UI) DAN USER EXPERIENCE (UX)
Tugas kelompok
1. Buatlah kelompok dengan anggota minimal 2 orang lakukan analisa ui /ux nya dari
sebuah web atau aplikasi. Kemudian dari hasil analisa tersebut dibuat dalam bentuk
laporan.
2. Buatlah sebuah desain tampilan web atau aplikasi sesuai dengan kreatifitas kamu.