Design Basics, Design Principle & Design Process

Hello Explorers! Kali ini kita mau bahas nih tentang UI/UX, yang pastinya ga bakal ngebosenin deh! aku yakin kalian semua pasti udah sering banget denger tentang UI/UX, apalagi buat kalian yang sering main aplikasi atau website. Tapi tahukah kalian, sebenernya UI/UX itu ga cuma soal tampilan yang keren dan menarik aja, tapi juga tentang pengalaman pengguna yang optimal. Nah, dalam studi independen kali ini kita akan bahas lebih dalam lagi tentang konsep UI/UX, serta tahap-tahap dalam proses desain UI/UX yang penting untuk diketahui. Yuk, simak terus ya!

 

User Interface (UI):

UI adalah tampilan yang bikin kita bisa menyentuh layar dan main aplikasi atau produk dengan mudah. Ada tombol, ikon, font, warna, dan desain keren lain yang bikin kita betah buat main aplikasi.

User Experience (UX):

UX itu pengalaman kita selama pake aplikasi atau produk, kayak gimana rasanya, gimana caranya, dan gimana enaknya. UX juga penting karena bikin produk lebih fungsional dan bikin kita seneng pake produk tersebut.

Inget sama dinosaurus ini? Google bikin game sederhana ini biar emosi kamu menurun biarpun jaringanmu lagi jelek

 

●    Design Basics

Jadi, design basics itu adalah elemen dan prinsip dasar yang digunakan buat bikin desain yang oke punya. Nah, elemen-elemennya itu antara lain:

1.    Layout: gimana susunannya di layar atau halaman.

 

2.    Tipografi: gimana cara nulisnya dan gayanya.

 

3.    Warna: gunain warna buat bikin desain lebih menarik dan bisa ngasih tau maknanya.

 

4.    Kontras: gunain perbedaan ukuran, warna, atau bentuk buat bikin yang penting lebih keliatan.

 

5.    Keseimbangan: bagiin elemen-elemen visual biar terlihat stabil.

 

6.    Kedekatan: tempatkan elemen yang berhubungan dekat-dekat biar keliatan satu kesatuan.

 

Dengan paham design basics, designer bisa bikin desain yang keren dan memenuhi kebutuhan pengguna dengan tampilan yang menyenangkan.

 

●    Design Principle

 

Nah, ada juga nih prinsip-prinsip desain yang perlu dipegang teguh buat bikin desain yang bagus dan bermanfaat buat pengguna. Simak yuk!

1.    Consistency: Bikin desain yang konsisten biar nggak bikin bingung pengguna pas ngeliat elemen-elemennya di semua halaman atau layar.

2.    Simplicity: Bikin desain yang sederhana dan mudah dimengerti. Jangan bikin ribet yang nggak perlu.

3.    Visibility: Pastiin elemen penting keliatan jelas dan mudah ditemukan biar nggak bingung pengguna.

4.    Feedback: Kasih umpan balik yang jelas dan bermakna buat tindakan yang dilakukan pengguna biar mereka tahu apa yang terjadi.

5.    Accessibility: Bikin desain yang bisa diakses oleh semua orang, termasuk mereka yang punya disabilitas, biar semua bisa pake aplikasi atau situs web mu.

6.    Flexibility: Bikin desain yang fleksibel dan bisa menyesuaikan ukuran layar atau perangkat yang berbeda.

7.    Error Prevention: Kasih opsi buat ngubah pilihan kalau pengguna salah atau bikin kesalahan. Jangan bikin pilihan permanen tanpa opsi buat ngubahnya.

8.    Prioritization: Utamakan fitur dan tindakan yang paling penting dan mudah diakses.

9.    User-Centered: Pertimbangkan kebutuhan, tujuan, dan perilaku pengguna dalam bikin desain.

10. Usability: Pastikan aplikasi atau situs webmu mudah dipake dan sesuai sama kebutuhan pengguna.

Dengan ngikutin prinsip-prinsip desain ini, kamu bisa bikin desain yang oke dan bermanfaat buat pengguna.

 

●    Design Process

 

Kamu pernah denger UX design process? Nah, itu singkatan dari user experience yang artinya pengalaman pengguna. Nah, UX design tuh berkaitan banget sama bikin pengalaman (dalam bentuk produk atau layanan) yang bisa membantu pengguna memecahkan masalah. Proses UX design itu kayak struktur yang digunakan buat bantu mengidentifikasi dan menyelesaikan masalah itu.

 

Misalnya, masalah umum di kalangan target kamu mungkin adalah susah ngecek dan mengatur budget bulanan. Kamu bakal menjalankan UX design process untuk memahami jenis solusi yang dibutuhkan untuk mengatasi masalah tersebut, menghasilkan ide, mendesain, mengujinya, dan pada akhirnya membangun produk yang live (contohnya, aplikasi smart budgeting). Keren banget, kan, bro/sis?

Nah, proses UX design ini penting banget buat bikin produk yang bener-bener berguna buat orang-orang. Jadi tim kita harus ngehargai banget kebutuhan pengguna dalam setiap langkah pembuatan produknya.

 

Nah, kalo kamu mau tahu, ini nih langkah-langkahnya dari mulai ide sampe launching produknya:

1.    Riset dulu tentang kebutuhan dan masalah pengguna

Research dalam UI/UX adalah proses penting untuk memahami pengguna dan kebutuhan mereka dalam menggunakan produk atau aplikasi. Beberapa hal yang perlu kamu ketahui tentang research UI/UX antara lain:

a.    User Research: Pelajari siapa pengguna, apa yang mereka butuhkan, dan bagaimana cara mereka berinteraksi dengan produkmu melalui wawancara, survei, dan observasi.

b.    Competitive Research: Pelajari produk pesaing dan tren industri untuk memahami bagaimana kamu dapat membuat produkmu lebih menonjol.

c.    Data Analysis: Analisis data yang telah dikumpulkan untuk memahami tren dan pola yang dapat membantu kamu membuat keputusan yang tepat dalam mendesain produkmu.

d.    Usability Testing: Tes desain produkmu dengan pengguna untuk mengidentifikasi masalah dan mengetahui cara memperbaikinya.

e.    A/B Testing: Tes dua versi desain produkmu untuk melihat mana yang lebih efektif dalam mencapai tujuan bisnis dan memenuhi kebutuhan pengguna.

 

2.    Tentuin masalah yang pengguna punya

Di tahap ini, perancang harus memahami tujuan bisnis, target pengguna, dan masalah yang perlu dipecahkan untuk menciptakan desain produk yang efektif. Berikut adalah beberapa hal yang dilakukan dalam tahap Define:

a.    Menetapkan Tujuan Bisnis: Menentukan tujuan bisnis produk seperti meningkatkan penjualan atau jumlah pengguna.

b.    Analisis Pengguna: Melakukan riset tentang pengguna target untuk memahami kebutuhan, masalah, dan preferensi mereka.

c.    Membuat Persona: Membuat profil pengguna ideal yang mencakup informasi tentang latar belakang, kebutuhan, dan preferensi pengguna.

d.    Menentukan Fitur Produk: Menentukan fitur dan fungsi yang akan diintegrasikan ke dalam produk untuk memenuhi kebutuhan pengguna dan mencapai tujuan bisnis.

e.    Membuat User Flow: Membuat diagram yang menjelaskan bagaimana pengguna akan berinteraksi dengan produk mulai dari awal hingga akhir.

f.     Membuat User Story: Membuat narasi singkat tentang pengalaman pengguna menggunakan produk.

Tahap Define sangat penting dalam proses desain UI/UX karena membantu perancang memahami tujuan dan kebutuhan pengguna sehingga mereka dapat menciptakan desain produk yang efektif dan memuaskan pengguna.

3.    Desain solusinya (Wireframing)

Wireframing adalah saat kita bikin sketsa kasar dari tampilan yang nantinya dibuat untuk produk. Ini membantu perancang untuk memvisualisasikan tata letak elemen-elemen di layar dan bagaimana pengguna akan berinteraksi dengan produknya. Wireframe biasanya berupa gambar 2D dengan tampilan sederhana yang fokus pada struktur dan layout. Dalam proses wireframing, perancang dapat mengeksplorasi berbagai opsi desain sebelum memulai desain yang lebih rinci. Hal ini memastikan bahwa desain yang akhirnya dibuat sudah dipikirkan secara matang sebelumnya.

 

4.    Bikin prototype (bentuk kasarnya sih produknya udah dibikin, tapi masih bisa diedit)

Prototyping adalah tahap penting dalam proses desain UI/UX di mana perancang membuat model interaktif dari antarmuka pengguna yang akan dibuat. Dengan prototyping, perancang dapat menguji dan mengevaluasi desain produk sebelum produk tersebut dikembangkan dan dirilis. Dalam proses ini, perancang dapat memvisualisasikan ide-ide desain secara visual dan fungsional, dan memungkinkan pengguna untuk mencoba pengalaman pengguna yang dihasilkan. Dengan demikian, perancang dapat mengevaluasi desain produk dan melakukan perubahan yang diperlukan sebelum produk akhir diluncurkan. Prototyping dapat dilakukan menggunakan berbagai alat, seperti aplikasi desain prototyping atau bahkan benda-benda fisik seperti kertas dan pena.

5.    Validasi prototype-nya sama pengguna

Validasi prototipe dengan pengguna merupakan tahap penting dalam proses desain UI/UX yang perlu dilakukan agar produk yang dirilis dapat memenuhi kebutuhan dan preferensi pengguna. Setelah perancang membuat prototipe interaktif, mereka harus mengujinya dengan pengguna yang mewakili target pasar produk. Dalam uji coba ini, perancang dapat memperoleh umpan balik dan data yang berguna untuk memperbaiki desain produk. Validasi prototipe juga membantu mengidentifikasi masalah potensial yang mungkin muncul saat produk diluncurkan ke pasar, sehingga perancang dapat mengambil tindakan preventif sebelum produk dirilis secara resmi. Teknik yang dapat digunakan dalam tahap validasi prototipe antara lain user testing, focus group, dan wawancara pengguna untuk mengumpulkan umpan balik dan data yang relevan. Hal ini memungkinkan perancang untuk mengoptimalkan desain produk sebelum diluncurkan ke pasar.

 

6.    Bangun produknya (Build)

Tahap Build dalam proses desain UI/UX itu saatnya para desainer mulai bikin produknya sesuai desain dan prototipe yang udah dibuat sebelumnya. Jadi, desainer bakal mulai bikin desain yang lebih detil dan bikin antarmuka pengguna yang sesuai sama spesifikasi yang udah ditetapin. Biasanya, desainer bakal kolaborasi sama tim pengembang untuk implementasi desainnya dan pastiin kualitas produknya sesuai standar yang ditetapin.

 

Tapi, dalam tahap Build, desainer harus perhatiin banyak hal, kayak layout, warna, font, sama elemen-elemen interaktif lainnya yang pengaruhin pengalaman pengguna. Desainer juga harus pastiin antarmuka pengguna yang dibuat bisa jalan di berbagai platform dan perangkat, dan ga lupain soal masalah keamanan dan privasi.

 

Tahap Build itu lumayan butuh waktu dan usaha, tapi penting banget buat bikin produk yang kualitasnya oke dan bikin pengalaman pengguna jadi makin enak.

 

7.    Test produknya (QA Test) biar makin oke

Tahap Quality Assurance (QA) Test dalam proses desain UI/UX itu seperti asuransi produk. Di sini, tim perancang dan pengembang bekerja sama untuk memastikan bahwa produk yang telah dirancang dan di-prototyping berfungsi dengan lancar dan memenuhi standar kualitas yang telah ditetapkan. Dalam tahap ini, setiap fitur dan fungsi produk diuji secara menyeluruh, dipastikan kompatibel dengan berbagai perangkat dan platform, serta memenuhi standar keamanan dan privasi yang berlaku. Setiap bug atau masalah yang ditemukan akan diidentifikasi dan diperbaiki hingga produk memenuhi standar kualitas yang diharapkan. Tahap ini sangat penting untuk memastikan produk yang dirilis ke publik siap memberikan pengalaman pengguna terbaik.

 

8.    Luncurkan produknya!

Setelah melewati semua tahap sebelumnya dan melalui tahap pengujian dan evaluasi, produk akhirnya siap untuk dirilis ke publik pada tahap peluncuran. Perancang bekerja sama dengan tim pengembang untuk memastikan bahwa produk diluncurkan dengan benar dan dapat diakses oleh pengguna. Peluncuran produk mencakup pengujian ulang dan pemeriksaan kualitas terakhir sebelum produk diunggah ke platform atau situs web yang sesuai. Di samping itu, pada tahap ini, perancang dapat memantau penggunaan produk, menerima umpan balik dari pengguna, dan melakukan penyesuaian yang diperlukan untuk meningkatkan kinerja dan pengalaman pengguna. Tahap peluncuran ini juga dapat mencakup kampanye pemasaran produk untuk meningkatkan kesadaran pengguna dan membantu mendorong adopsi produk.

Tapi inget ya, ga selalu harus berurutan kayak gitu. Misalnya pas udah bikin prototype, ternyata ide awalnya masih ada kekurangan atau ga memenuhi kebutuhan pengguna. Jadi bisa balik lagi ke tahap desain buat ngebuat solusi baru, atau ke tahap definisi masalah buat pastiin kalo kita fokus sama masalah pengguna yang paling penting.

 

Jadi, proses UX design tuh dimulai dari riset dulu. Di sini kita harus ngobrol atau lihat-lihat pengguna asli atau orang-orang yang mewakili pengguna kita untuk tahu masalah apa yang mereka hadapi dan apa yang mereka inginkan dari solusinya.

 

Terus, dari riset ini, kita bikin ringkasan masalah yang pengen dipecahin. Terus, kita bikin pertanyaan-pertanyaan "How Might We?" untuk mulai berpikir solusi.

 

Nah, setelah itu, kita bisa mulai mendesain solusi yang cocok. Desain ini meliputi pembuatan sketsa, menentukan bagaimana cara kerja dari solusi baru, dan membuat diagram jalur pengguna untuk memastikan solusi baru bisa dipahami dan digunakan oleh pengguna.

 

Setelah desain selesai, kita bikin prototipe buat simulasi bagaimana pengguna bakal berinteraksi dengan produk kita. Dari prototipe ini, kita bisa testing lagi ke pengguna asli untuk memastikan produk kita bisa memberikan solusi yang tepat buat masalah mereka.

 

Jadi intinya, proses UX design ini fokus banget pada kebutuhan pengguna dan bikin produk yang bermanfaat buat mereka.

 

Proses desain UX melibatkan tim yang berbeda-beda. Setiap orang memiliki peran yang berbeda pada setiap tahapannya. Proses ini berjalan dengan dinamis dan kolaboratif, serta dapat berubah mengikuti kebutuhan bisnis.

 

Berikut adalah peran-peran yang ada dalam proses desain UX:

 

Peneliti bekerja pada tahap Penelitian dan Validasi

-       Content Experts memastikan teks dan desain selalu selaras pada setiap tahapan

-       UX Designer memimpin tahap Desain dan Validasi namun juga memiliki peran penting pada seluruh tahapan

-       UI Designer bekerja sama dengan Desainer UX pada tahap Prototype dan Validasi - kamu bisa pelajari lebih lanjut tentang bagaimana Desainer UX dan UI bekerja sama di sini

-       Developer bergabung pada tahap Validasi, di mana mereka mengubah prototipe menjadi produk yang siap digunakan

Di perusahaan kecil dengan sumber daya yang terbatas, biasanya terdapat generalis yang bekerja di seluruh tahapan proses.

 

 

 

 

 

 

Contoh UI UX Design

Wah, siapa sih yang ga kenal sama Instagram? Aplikasi ini udah jadi primadona banget di dunia media sosial. Desainnya yang oke punya bikin penggunanya betah scroll terus-menerus, tanpa bikin bosen sama sekali. Mungkin kalian juga ga bisa ngejelasin kenapa Instagram enak banget dipake, tapi faktanya, tata letak visualnya itu sangat berimbang dan estetis.

 

Gara-gara Instagram berisi konten visual yang banyak, wajar banget kalau sebagian besar layar dipakai untuk menampilkan postingan dari pengguna. Ini menunjukkan bahwa tata letak umum di dalam Instagram dibikin dengan matang untuk memamerkan konten sebanyak-banyaknya dan tetep ada ruang untuk fitur lainnya. Ga ada bising visual, ga ada elemen yang ga penting sama sekali. Instagram bisa jadi contoh desain pengalaman pengguna yang luar biasa dengan memaksimalkan ruang yang ada. Padahal, semua fitur dan pengaturan tetep ada di aplikasi, cuma digabungin dengan baik-baik supaya ga mengganggu tampilan minimalis yang indah ini. Desain tim Instagram udah pintar banget menyimpan opsi-opsi tersebut, dan masih tetep bisa dijangkau pengguna dengan gampang. Misalnya, dengan pake hamburger menu yang familiar banget buat kebanyakan orang. Jadi, bisa dibilang Instagram itu tuh aplikasi yang desainnya cakep banget dan bikin pengalaman pengguna jadi enak banget.

 

 

 

REFERENSI :

20 UX design examples to get inspired - Justinmind

User Interface Design Guidelines: 10 Rules of Thumb | IxDF (interaction-design.org)

UI UX Design Fundamental. Fundamental | by Tiara Puspita | Medium

10 Fundamental UI Design Principles You Need to Know | Dribbble

What is the UX design process? A step-by-step guide - UX Design Institute