Kenali Lebih Jauh Perbedaan User Interface dan User Experience

Selama ini kita mungkin mengira bahwa User Interface dan User Experience merupakan hal yang sama. Hal tersebut tidak sepenuhnya salah, tetapi juga tidak bisa dikatakan akurat dan benar seratus persen, sebab ada perbedaan-perbedaan mendasar yang membedakan antara kedua hal tersebut. Dalam penulisan artikel kali ini, akan dibahas secara lebih mendalam mengenai perbedaan-perbedaan yang ada pada User Interface dan User Experience.

Pertama-tama, kita perlu mengetahui terlebih dahulu mengenai User Interface. User Interface adalah bidang yang memfokuskan pada desain tampilan antarmuka (interface) yang digunakan oleh pengguna sehingga lebih mengutamakan pada keindahan dari suatu tampilan, baik itu dari segi tata letak (layout) maupun pemilihan warna yang menarik. Tujuan utama dari User Interface adalah untuk membuat supaya tampilan dari suatu website atau aplikasi menjadi lebih enak dipandang mata dan menciptakan loyalitas pengunjung atau pengguna (pengunjung atau pengguna semakin betah untuk berlama-lama menggunakan website atau aplikasi yang bersangkutan). Dengan kata lain, User Interface bertujuan untuk menciptakan ikatan emosional dengan pengunjung atau pengguna melalui adanya desain yang indah dan menarik.

Sedangkan untuk User Experience, User Experience adalah bidang yang memfokuskan pada peningkatan kepuasan dan kemudahan pengunjung atau pengguna dalam menggunakan website atau aplikasi tersebut. Tujuan utama dari User Experience adalah untuk menciptakan kemudahan dan interaktivitas dari website atau aplikasi tersebut sehingga tidak membingungkan penggunanya. Biasanya, cakupan User Experience lebih luas dari User Interface, yakni mencakup keseluruhan elemen yang ada dalam suatu website ataupun aplikasi dan selain itu juga harus memastikan bahwa website dan aplikasi tersebut telah tersusun dengan baik sehingga pengguna akan mudah mengoperasikan dan mudah berpindah dari satu item ke item yang lain ataupun dari satu halaman ke halaman yang lainnya.

Berdasarkan penjelasan di atas, dapat kita ketahui bahwa perbedaan utama dari User Interface dan User Experience adalah bahwa User Interface berfokus pada desain tampilan, sedangkan User Experience berfokus pada pengalaman pengguna.

Selain perbedaan utama di atas, terdapat perbedaan-perbedaan lainnya, seperti misalnya:

1. Dari segi desain

Dilihat dari segi desain, User Interface lebih berfokus pada visual, yakni bertujuan supaya mampu menciptakan tampilan yang menarik sehingga pengguna terus tertarik untuk menggunakan website atau aplikasi tersebut, sedangkan User Experience lebih berfokus pada interaksi, yakni bertujuan untuk menciptakan tampilan yang bisa memudahkan pengguna dalam pengoperasiannya.

2. Dari segi dasar

Dilihat dari segi dasar, User Interface berdasarkan pada tren desain dan juga brand guideline, yang mana berarti bahwa User Interface cenderung hanya mengutamakan fungsionalitas saja, yang terpenting aplikasi tersebut bisa digunakan dan tampilannya menarik, sedangkan User Experience berdasarkan pada data pengguna (penelitian terhadap karakteristik dan perilaku pengguna) sehingga dalam User Experience, dapat dikatakan tampilan yang dibuat untuk suatu website atau aplikasi benar-benar disesuaikan dengan kebutuhan dan karakteristik penggunanya, karena seorang ahli User Experience akan melakukan penelitian dan analisis terlebih dahulu terhadap orang-orang yang menggunakan aplikasi tersebut, seperti misalnya bagaimana latar belakangnya, apa kebutuhannya, apa yang biasanya dilakukan berkaitan dengan aplikasi, dan sebagainya.

3. Dari segi lingkup rancangan

Dilihat dari segi lingkup rancangan, User Interface biasanya meliputi warna, tipografi, dan juga tata letak (layout), sehingga dapat dikatakan secara garis besar User Interface memang benar-benar berfokus pada tampilan karena yang menjadi lingkup rancagan dari seorang ahli User Interface adalah penggunaan kombinasi warna yang menarik, penggunaan jenis huruf yang baik sehingga dapat dengan mudah untuk dibaca namun tetap menarik, serta penempatan ikon-ikon atau button yang ada pada suatu website atau aplikasi, sedangkan User Experience, ruang lingkup rancangannya lebih luas karena mencakup wireframe, sitemap, dan juga user persona.

Setelah membahas mengenai perbedaan-perbedaan mendasar antara User Interface dengan User Experience, maka dapat disimpulkan bahwa User Interface dan User Experience memiliki perbedaan-perbedaan dalam aspeknya tetapi sebenarnya memiliki tujuan yang sama dan keduanya harus saling melengkapi agar bisa menghasilkan website dan aplikasi yang memiliki tampilan yang baik sekaligus memiliki fungsionalitas yang baik.

Dalam hal ini, User Interface dan User Experience sebenarnya tidak dapat dipisahkan satu sama lain. Suatu ilustrasi mudah yang bisa menggambarkan antara User Interface dan User Experience adalah User Interface sebagai hiasan atau topping kue sedangkan User Experience adalah kuenya itu sendiri. Misalnya, kita sebagai pembuat kue tersebut, kita hanya membuat kue yang enak tetapi hiasan atau topping-nya tidak kita perhatikan dengan baik, maka tentunya orang-orang tidak akan tertarik untuk membeli kue tersebut sekalipun rasanya enak, karena orang sudah memiliki pandangan bahwa tampilannya saja tidak menarik, maka pasti rasanya pun pasti biasa saja. Demikian pula halnya dengan suatu website atau aplikasi. Kita sebagai pembuat website atau aplikasi tersebut, misalnya kita membuat website atau aplikasi yang keren dan bisa memudahkan pengguna, tetapi ternyata desain atau tampilannya sangat buruk, misalnya warnanya yang bertabrakan satu sama lain sehingga tidak nyaman dipandang mata, lalu letak tombol yang saling berdekatan satu sama lain sehingga membuat pengguna sering salah tekan. Hal ini tentu tidak akan membuat pengguna senang dan puas dalam menggunakan website atau aplikasi yang kita buat. Atau contoh sebaliknya, misalnya kita hanya mengutamakan tampilan yang indah dan menarik, tetapi ternyata website atau aplikasi tersebut tidak responsif akibat animasi yang terlalu berat sehingga pada akhirnya kinerja website atau aplikasi tersebut menjadi lamban dan memakan banyak kuota, maka hal ini tentunya juga tidak akan menyenangkan pengguna.

Dengan demikian, meski User Interface dan User Experience merupakan hal yang berbeda, tetapi keduanya harus diperhatikan dengan baik dan dijalankan secara berkesinambungan supaya website dan aplikasi yang baik dan berkualitas. Berikut ini adalah langkah kerja (workflow) yang biasanya dilakukan pada saat mengerjakan User Interface dan User Experience :

1. Melakukan riset terkait dengan User Experience

Riset atau penelitian terhadap User Experience adalah langkah pertama yang perlu dilakukan untuk membuat desain yang baik. Riset atau penelitian ini ditujukan agar perusahaan bisa memahami apa yang menjadi kebutuhan pengguna. Sebagai contoh, pada saat kita hendak membuat website atau aplikasi terkait toko online, maka kita harus melakukan riset terlebih dahulu mengenai kebiasaan orang dalam berbelanja, barang-barang apa yang menjadi kebutuhan pokok bagi mayoritas orang, dan bagaimana metode pembayaran yang disenangi oleh pengguna, dan sebagainya. Dalam hal ini, User Experience Researcher dapat melakukan penelitian atau riset dengan melalui berbagai cara, seperti misalnya kuisioner, wawancara terhadap pengguna, dan sebagainya.

2. Membuat Information Architecture

Langkah yang kedua yang harus dilakukan setelah melakukan penelitian atau riset User Experience adalah membuat Information Architecture. Adapun yang dimaksud dengan Information Architecture adalah proses penyusunan struktur bagian-bagian yang ada pada suatu website ataupun aplikasi. Tujuan dari adanya Information Architecture ini adalah untuk membantu tim kerja dalam memahami konsep dari suatu produk yang akan dibuat. Dalam membuat Information Architecture, maka diperlukan hasil penelitian mengenai User Experience yang telah dilakukan sebelumnya. Hasil penelitian User Experience ini didapatkan melalui metode yang dikenal dengan nama card sorting, yakni metode dalam memilah dan menentukan buyers persona yang sesuai. Hasil penelitian ini akan membantu dalam membuat struktur produk yang sesuai dengan kebutuhan dan didasarkan dari perspektif pengguna.

3. Membuat wireframe

Langkah yang ketiga adalah membuat wireframe. Wireframe adalah sketsa desain dari suatu produk dalam bentuk visual. Sketsa desain ini menunjukkan alur informasi pada saat pengguna hendak mengoperasikan produk. Dari sinilah, seorang User Experience Designer akan mulai merancang desain-nya. Biasanya, sketsa desain atau wireframe ini dibuat dalam Low Fidelity Wireframe (LFW), barulah kemudian akan dilanjutkan dengan versi yang lebih baik yaitu High Fidelity Wireframe (HFW). Terdapat banyak tools yang bisa digunakan untuk membuat wireframe ini, diantaranya adalah Adobe XD, Figma, Axure, dan sebagainya.

4. Mengatur User Experience Flows

Langkah yang keempat dalah mengatur User Experience Flow. User Experience Flow ini adalah flow atau aliran tentang bagaimana suatu produk akan digunakan oleh penngguna. Flow ini akan dibuat dengan menggunakan pendekatan User Experience sehingga pengguna merasa nyaman dalam mencoba produk.

5. Membuat prototype dari desain User Experience

Langkah yang kelima adalah membuat prototype sesuai dengan wireframe dan juga User Experience Flows yang sebelumnya telah dibuat. Dalam hal ini, prototype dapat dibuat dengan tools seperti Invision, Adobe XD, MockPlus, dan sebagainya. Pertama-tama, prototype biasanya akan diuji oleh tim internal dan langsung diperbaiki apabila masih terdapat hal-hal yang kurang memuaskan. Setelah prototype tersebut dirasa sudah menjadi lebih baik, maka prototype bisa diujicoba ke pengguna secara langsung untuk mendapatkan feedback yang bisa digunakan sebagai sarana perbaikan kedepannya.

6. Membuat Design System

Langkah yang keenam adalah membuat design system. Design system ini cenderung lebih berkaitan dengan User Interface karena menyimpan berbagai komponen-komponen desain seperti misalnya ikon, font, palet warna, dan sebagainya. Dalam hal ini, seorang User Interface Designer akan perlu bekerja sama dengan developer untuk membuat design system, yakni User Interface Designer akan membuat elemen desain sedangkan developer akan membuat komponen library melalui HTML, Javascript, CSS, dan lainnya.

7. Membuat desain User Interface

Langkah yang ketujuh adalah membuat desain User Interface, atau dengan kata lain dalam tahap ini kita akan mendesain “tampilan” dari suatu produk, baik itu website ataupun aplikasi. User Interface Designer akan membuat tampilan menjadi lebih indah dengan memadukan warna, membuat tipografi, dan transisi setiap halamannya dengan elemen-elemen yang telah dibuat di tahap sebelumnya. Selain mempercantik tampilan, User Interface Designer harus senantiasa memperhatikan prinsip-prinsip desain User Interface yang baik supaya tidak hanya sekedar indah dan menarik tetapi tetap baik dan lancar saat dioperasikan pengguna. Tools yang dapat digunakan untuk melakukan desain adalah Adobe Illustrator, Sketch App, Adobe Photoshop, dan sebagainya.

8. Proses mengembangkan produk oleh developer

Langkah yang kedelapan adalah mengembangkan produk. Langkah ini biasanya dilakukan oleh developer secara langsung, dimana desain yang sudah lolos uji coba dan telah didesain oleh User Interface Designer akan mulai dikembangkan oleh developer. Dalam proses pengembangan, developer dapat meminta bantuan kepada User Experience Designer dan User Interface Designer apabila terdapat kendala atau permasalahan yang perlu dipecahkan bersama-sama.

9. Melakukan Design Usability Test

Setelah selesai melakukan pengembangan produk, maka langkah terakhir yang perlu dilakukan sebelum produk diluncurkan ke pengguna adalah melakukan design usability test untuk mengetahui apakah produk (website atau aplikasi) tersebut sudah baik dari segi desain dan kegunaan, apakah sudah berjalan sesuai dengan yang diharapkan sebelumnya, dan sebagainya. Uji coba ini akan melibatkan pemberian skor pada setiap fitur desain sehingga fitur-fitur yang mendapatkan skor rendah bisa diperbaiki dan dikembangkan lagi sampai benar-benar menjadi desain yang nyaman dan sesuai dengan keinginan serta kebutuhan pengguna.

Contoh dari perusahaan di Indonesia yang mengimplementasikan User Interface dan User Experience dengan cukup baik adalah Grab.

Menurut saya, User Interface dan User Experience dari Grab sudah cukup baik, dimana dari segi tampilan, Grab telah menggunakan visualisasi yang baik dan dekat dengan nuansa lokal. Selain itu, sebagaimana yang bisa dilihat di atas, desain pada splash screen Grab telah menggambarkan situasi sekarang dimana Indonesia tengah menghadapi pandemi Covid-19, setiap orang harus memakai masker dan menjaga jarak. Dengan menggunakan ilustrasi orang yang memakai masker, secara tidak langsung Grab telah memberikan himbauan kepada masyarakat Indonesia (khususnya pengguna Grab itu sendiri) untuk senantiasa menjaga protokol kesehatan dengan senantiasa memakai masker dan menjaga jarak.

Selain itu, halaman utama yang terbuka setelah splash screen langsung menunjukkan saldo OVO, poin OVO, dan berbagai fitur-fitur utama yang ada di Grab seperti pesan makanan, belanja di supermarket, pesan ojek mobil dan motor, pengiriman barang, jasa titip, paket diskon, dan sebagainya. Cukup dengan sekali klik pada fitur yang ingin digunakan, pengguna bisa langsung diarahkan untuk melakukan pemesanan yang diinginkan. Di bagian bawah juga terdapat navigasi seperti misalnya Beranda (layar utama), Aktivitas (untuk mengetahui kegiatan atau transaksi apa saja yang sudah kita lakukan melalui Grab selama rentang waktu tertentu), Pembayaran (untuk melakukan pembayaran dengan cara QR OVO ataupun melakukan pengisian ulang OVO), Kotak Masuk (untuk mengetahui penawaran-penawaran yang diberikan Grab kepada kita), dan Akun (untuk pengaturan profil serta akun kita).

Pertama, kita bisa dengan mudah mengatur ke mana pesanan hendak diantarkan, caranya dengan memilih alamat pada bagian “Antar Ke”. Selain itu, di bagian bawah kotak tersebut terdapat berbagai fitur-fitur seperti Resto Sekitar, yang memudahkan kita untuk mencari makanan-makanan yang terdekat dengan lokasi kita sehingga kita tidak perlu menunggu waktu lama. Ada pula pengkategorian makanan-makanan yang Diskon 60%, Mulai 10 Rb, dan sebagainya. Jika di antara kategori-kategori tersebut tidak ada satupun yang menarik minat kita, kita bisa langsung mencari makanan yang kita inginkan di kolom Search dengan tulisan “Kamu lagi mau makan apa nih?”.

Selain itu, dengan menggulirkan layar ke bagian bawah, maka kita akan bisa melihat makanan-makanan yang sering kita pesan, yakni yang berjudul “Pesan makanan lagi”, dari sini kita bisa memesan makanan yang dahulu sudah pernah kita pesan. Ada juga kategori “Restoran yang kamu sukai”, yaitu makanan-makanan yang biasanya sudah sangat sering kita pesan sehingga bila kita mau memesan, kita tidak perlu susah-susah lagi mencari di kolom Search.

Pada saat kita sudah memesan makanan pun, Grab akan memberikan informasi dan notifikasi secara berkala mengenai pesanan kita. Misalnya, pada saat pesanan kita masih ada di dapur, maka Grab akan memberikan notifikasi kepada kita dan tampilannya juga belum berubah ke tampilan Maps. Hal ini sudah baik karena apabila Maps sudah ditampilkan sebelum makanan diantarkan kepada kita, maka Maps tersebut tidak akan berguna dan malah mengakibatkan kinerja aplikasi menjadi berat, dan ponsel pengguna menjadi panas atau hang. Pada saat driver sudah mengambil pesanan dari restoran dan siap mengantarkan makanan  ke lokasi kita, barulah Maps ditampilkan, supaya kita tahu driver sudah dekat atau belum, dan biasanya pada saat driver sudah mencapai jarak 500m dari lokasi kita, Grab akan memberikan notifikasi bahwa pesanan akan segera sampai dan siapkan uang untuk pembayaran (apabila pembayaran dilakukan secara tunai). Dengan demikian, berdasarkan pengalaman saya pada saat menggunakan aplikasi Grab khususnya dalam hal memesan makanan, saya sudah puas dengan aplikasi Grab ini dan menurut saya UI/UX dari Grab juga sudah baik, sebab tidak hanya dari segi tampilannya yang menarik, tetapi secara kegunaan dan fungsionalitas setiap fiturnya juga sudah memudahkan para pengguna Grab.

Berdasarkan pemaparan-pemaparan di atas mengenai perbedaan User Interface (UI) dan User Experience (UX) serta contoh nyata penerapan keduanya dalam aplikasi Grab, maka saya menyimpulkan bahwa sangat penting untuk memastikan User Interface dan User Experience telah diaplikasikan dengan baik, misalnya dari segi tampilan, ilustrasi, warna yang digunakan sudah aman, tata letak juga sudah baik sehingga memudahkan pengguna, dan dari segi website ataupun aplikasinya itu sendiri sudah berjalan dengan lancar (smooth) serta sesuai dengan kebutuhan penggunanya. Kesimpulan yang berikutnya adalah bahwa dengan memperhatikan dan mengaplikasikan User Interface dan User Experience dalam pembuatan website atau aplikasi akan mampu memberikan hasil yang baik dan memuaskan, dalam artian sesuai dengan kebutuhan pengguna dan memudahkan pengguna dalam memenuhi kebutuhannya sehingga pengguna merasa senang dan terus tertarik dalam menggunakan website atau aplikasi tersebut.

DAFTAR REFERENSI

Aprilia, P. (2020). Perbedaan UI dan UX Beserta Contohnya. Diakses melalui https://www.niagahoster.co.id/blog/perbedaan-ui-dan-ux/

Jessica, C. (2020). Sering Tertukar, Begini Sebenarnya Perbedaan Utama UI dan UX. Diakses melalui https://glints.com/id/lowongan/perbedaan-ui-dan-ux/#.YYE3Wp5BzIU

Yuniar, M. (2021). UI UX : Pengertian, 4 Perbedaan Utama, Serta Kaitan Antara Satu Sama Lainnya. Diakses melalui https://www.ekrut.com/media/ini-lho-bedanya-ui-dan-ux