Langsung ke konten utama

portopolio.aljanahwalia


Di era sekarang, manusia kerap sekali berhubungan dengan website dan aplikasi untuk menunjang aktivitasnya sehari-hari. Nah, tampilan dan pengalaman saat kamu berselancar di website atau aplikasi tersebut itulah terdapat UI dan UX Design yang dikerjakan oleh UI Designer dan UX Designer.
UX Design adalah bidang yang fokus terhadap interaksi manusia sebagai pengguna atau yang disebut user dengan produk layanan berbentuk website atau aplikasi. Bidang ini merupakan gabungan aspek-aspek dari ilmu lain seperti psikologi, bisnis, pemasaran, dan teknologi.
Tugas utama seorang UX Designer adalah untuk mendesain sebuah produk menjadi usable namun juga menyenangkan bagi penggunanya. Dalam mencapai tujuan tersebut, seorang UX designer diharuskan untuk berkolaborasi dengan tim lain. Ia juga berperan menjembatani celah antara user, tim development hingga stakeholder.
UX designer melihat suatu permasalahan dari berbagai angle dan perspektif agar desain yang mereka buat dapat diterima oleh pengguna yang datang dari berbagai latar belakang. UX designer juga bertanggung jawab untuk memastikan bahwa produk yang didesain sesuai dengan kepentingan bisnis perusahaan. Apakah produk tersebut mendatangkan keuntungan atau tidak dan apakah produk tersebut sudah sesuai dengan keinginan atasan, hal tersebut juga harus dipertimbangkan oleh UX designer.
UI designer sering kali dikaitkan dengan UX designer. Kamu tentunya lebih mengenal profesi UI/UX designer ketimbang dua profesi lainnya. Padahal, UI dan UX designer sejatinya adalah dua bidang yang berbeda, lho.
(UI) design atau desain antarmuka adalah proses yang digunakan desainer untuk membangun antarmuka dalam perangkat lunak yang berfokus pada penampilan. UI designer bertujuan untuk membuat tampilan antarmuka yang mudah digunakan dan menyenangkan pengguna.
Desain UI mengacu pada antarmuka pengguna grafis dan bentuk lainnya seperti tampilan antarmuka yang dapat dikendalikan suara. Tugas seorang UI designer adalah merancang semua layar tempat pengguna akan bergerak, dan menciptakan elemen visual dan sifat interaktif yang memfasilitasi pergerakan ini.
UI designer atau user interface designer itu sendiri bertugas untuk mendesain elemen interaktif di dalam produk seperti tombol, icon, typography, skema warna dan desain yang responsif. Tujuannya adalah agar dapat memberikan pedoman kepada user melalui interface produk. UI designer lebih memperhatikan apakan desain yang dibuat enak untuk dilihat.


Perbedaan UI dan UX Beserta Contohnya


perbedaan UI dan UX

Pengertian User Interface (UI) 

Seperti yang disebutkan sebelumnya, UI adalah bagian dari UX yang berupa tampilan visual design sebuah sistem. Tampilan tersebut memungkinkan pengguna terhubung dan berinteraksi dengan suatu produk. 

Selain berfungsi sebagai penghubung, UI juga berfungsi untuk memperindah tampilan sehingga dapat meningkatkan kepuasan pengguna. Namun, tak hanya harus indah, UI juga harus mudah digunakan. 

Beberapa komponen UI diantaranya adalah komponen tombol, ikon tipografi, tema, layout, animasi yang tampil pada produk, dan visual interaktif lainnya. Semua komponen UI tersebut didesain dengan berfokus pada keindahan dan kemudahan pengguna. Jadi, pengguna dapat menikmati produk Anda. 

Untuk mengetahui lebih detail mengenai user interface, silakan mampir ke artikel khusus tentang user interface.

Perbedaan User Interface (UI) dan User Experience (UX) 

Setelah mengetahui pengertian dari UI dan UX, apakah sekarang Anda sudah mengetahui perbedaan di antara keduanya? Jika belum, tenang saja. Berikut ini kami akan paparkan apa saja sebenarnya perbedaan UI dan UX.  

1. Tujuan Desain

Hal yang mendasar tentang perbedaan UI dan UX adalah tujuan desainnya. Fokus pembuatan desain UI dan UX sangatlah berbeda. Desain UI pada sebuah produk bertujuan untuk mempercantik tampilan produk. Sementara desain UX dirancang untuk memberikan pengalaman yang menyenangkan saat menggunakan produk. 

Fokus desain UI adalah keindahan tampilan, sementara fokus desain UX adalah kepuasan menggunakan produk. 

Sederhananya, desain UI akan mempengaruhi kesan pertama pengguna melihat produk Anda. Sementara itu, UX mempengaruhi bagaimana pengalaman pengguna saat menggunakan produk.  

2. Proses Desain

Tujuan desain yang berbeda juga mempengaruhi prosesnya. Oleh sebab itu, proses merancang UI dan UX pun berbeda. 

Karena berfokus pada user experience, proses desain UX berlandaskan riset pengguna sehingga menghasilkan produk yang disukai dan dibutuhkan oleh target pengguna. Prosesnya pun melalui banyak tahap dan membutuhkan peran banyak pihak, salah satunya yaitu UX researcher. Setelah melakukan riset, desainer merancang sketsa desain dengan wireframe dan prototype.

Sementara itu, desain UI juga memerlukan riset. Namun, riset yang dilakukan merupakan riset desain untuk membuat desain yang menarik dan sesuai dengan konsep. Di sini, desainer UI juga perlu merancang model desain yaitu dengan membuat mockup terlebih dahulu.

3. Komponen Desain

Komponen yang membangun Desain UI berfokus pada keindahan tampilan produksi. komponen UI tersebut di antaranya meliputi warna, gambar dan video animasi, typography, buttons, dan visual interaksi lainnya. 

Sementara itu, komponen desain UX meliputi hampir seluruh komponen pada suatu produk seperti fitur-fitur, struktur desain, dan navigasi. Termasuk juga tampilan interface, copywriting, hingga branding, sehingga diperlukan kolaborasi tim untuk menghasilkan desain produk yang baik. 

4. Tools yang Digunakan 

Proses pembuatan yang berbeda tentu membutuhkan tools yang berbeda. Untuk desainer UI, keindahan gambar sangatlah penting. Jadi mereka membutuhkan aplikasi yang mendukung pembuatan desain interface yang detail. 

Ada banyak aplikasi desain UI yang tersedia seperti Flinto, Principle, Frames X, Adobe illustrator, dll. Aplikasi tersebut dilengkapi beberapa tools pendukung desainer UI seperti tools menambahkan unique interaction icon, easy transitions, UI assets and kits, dll. 

Sementara itu, desainer UX lebih membutuhkan aplikasi prototyping desain agar mudah mendapatkan feedback dari pengguna. Beberapa aplikasi prototyping desain yang mendukung desainer UX adalah: Sketch, InVision, Figma, Adobe XD, Axure, dll. 

Beberapa fitur yang tersedia seperti tersedia fitur collaboration, real-time editing, easy to test design, dll. Fitur tersebut akan memudahkan desainer UX mendapatkan feedback untuk menghasilkan produk yang user-friendly

5. Skill yang Dibutuhkan 

Menjadi desainer UI dan desainer UX membutuhkan skill tersendiri. Beberapa skill yang dibutuhkan seorang desainer UI adalah desain grafis, design branding, creative thinking, dan convergent thinking. Skill tersebut harus dimiliki oleh desainer UI dalam mendesain tampilan produk agar terlihat menarik dan mudah untuk interaksi.

Tugas dan Tanggung Jawab

Adapun beberapa contoh tugas dan apa saja yang harus UI UX Designer kerjakan untuk merancang desain secara interaktif, antara lain:

1. Melakukan Riset UX

Pertama, anda dapat melakukan riset terkait kebutuhan UX dengan cara mempelajari lebih spesifik yang berkaitan dengan karakteristik dan kebutuhan pengguna. Data tersebut dapat berupa data kualitatif atau kuantitatif, berbeda berdasarkan cara memperoleh informasi dan hasil wawancara kepada narasumber (pengguna aplikasi).

2. Membuat Information Architecture (IA)

Kedua, membuat skema arsitektur informasi produk untuk kebutuhan website dan aplikasi. Proses ini sangat memudahkan untuk tim dalam memahami konsep dan beberapa bagian penting dari suatu produk. Untuk dapat membuat IA, anda membutuhkan bahan dari riset UX berupa card sorting yang berisi informasi penting terkait user persona dalam melihat perspektif perangkat lunak.

3. Merancang Wireframing dan User Flow

Ketiga, setelah berhasil membuat struktur IA, selanjutnya tim desainer masuk pada proses pengembangan wireframing. Terdapat dua jenis hasil wireframing yaitu LFW (Low Fidelity Wireframe) yang berarti membuat rancangan sketsa berupa tampilan elemen dan struktur outline-nya saja.

Di sisi lain, HFW (High Fidelity Wireframe) merupakan proses pembuatan sketsa desain yang lebih kompleks dengan tujuan untuk memberikan tampilan visual awal produk website atau aplikasi kepada klien. 

Setelah proses wireframing selesai, masuk pada tahapan user flow untuk memperoleh insight terkait merancang alur program yang nantinya dapat user gunakan. Flow tersebut mengutamakan pendekatan UX yang nantinya dapat membuat pengguna merasa nyaman dalam memanfaatkan software tersebut.

4. Membuat Prototype Desain UX

Selanjutnya, masuk pada proses prototyping produk desain dengan memanfaatkan berbagai tools yang ada, seperti Figma, Adobe XD, Marvel App, dan lain sebagainya. Proses ini sangatlah penting agar anda akan mendapat gambaran umum terkait proses transisi setiap elemen atau halaman pada aplikasi tersebut.

5. Mengembangkan Design System

Berikutnya, masuk pada proses pengembangan desain sistem untuk menyimpan berbagai komponen UI, seperti icon, font, color, button, dan lainnya pada sebuah library. Pada tahapan ini, diperlukan kolaborasi antara tim desainer dengan tim developer karena melibatkan beberapa komponen library pada bahasa pemrograman front end (HTML, CSS, dan JavaScript).

6. Merancang User Interfa

Selanjutnya, membuat desain UI dengan cara memperindah sketsa. Anda dapat menggunakan paduan warna, tipografi, serta transisi pada tiap halaman yang telah terdefinisi pada proses sebelumnya. Anda dapat menggunakan bantuan beberapa tools, seperti Adobe Illustrator, Sketch App, atau aplikasi lainnya.

7. Melakukan Usability Testing

Setelah proses perancangan UI dan UX selesai, hasil dari tampilan desain tersebut nantinya akan diterjemahkan ke dalam kode bahasa pemrograman yang dibuat oleh tim front end developer.  Setelah semua halaman telah terdistribusi dengan baik, anda perlu untuk melakukan tahap pengujian program sebelum masuk pada proses peluncuran produk.

Apabila terdapat beberapa issue, laporan bug, dan saran dari user, desain dapat anda revisi dan melakukan proses pengujian ulang untuk mendapatkan hasil yang maksimal sesuai dengan permintaan dan kenyamanan pengguna dalam mengakses aplikasi.


Komentar