Artikel Tugas IMK : UCD Dan Proses Design UI
**Desain Berbasis Pengguna (UCD) dan Proses Desain Antarmuka Pengguna (UI)**
Desain Berbasis Pengguna (User-Centered Design, UCD) adalah pendekatan dalam pengembangan produk yang menempatkan pengguna sebagai fokus utama. Tujuan utama UCD adalah untuk memastikan bahwa produk yang dikembangkan benar-benar memenuhi kebutuhan, preferensi, dan kemampuan pengguna akhir. Dalam konteks desain antarmuka pengguna (UI), UCD memainkan peran penting dalam menciptakan antarmuka yang intuitif, mudah digunakan, dan memuaskan bagi pengguna.
**Proses Desain UI Berbasis UCD**
Proses desain UI berbasis UCD melibatkan serangkaian langkah-langkah yang berfokus pada pemahaman yang mendalam tentang pengguna dan kebutuhan mereka. Berikut adalah beberapa tahapan utama dalam proses desain UI berbasis UCD:
1. **Penelitian Pengguna**: Tahap awal dalam UCD adalah melakukan penelitian untuk memahami pengguna dan konteks penggunaan produk. Ini melibatkan identifikasi kebutuhan pengguna, preferensi, tantangan yang dihadapi, dan tujuan penggunaan produk.
2. **Pengumpulan Informasi**: Selama tahap ini, tim desain mengumpulkan informasi yang relevan melalui berbagai metode, seperti wawancara, observasi, survei, dan analisis kompetitif.
3. **Pembuatan Persona**: Berdasarkan informasi yang dikumpulkan, tim desain membuat persona atau representasi fiktif dari pengguna yang menggambarkan karakteristik, kebutuhan, dan tujuan pengguna yang berbeda.
4. **Pengembangan Konsep**: Berdasarkan pemahaman tentang pengguna dan tujuan mereka, tim desain mengembangkan konsep desain awal untuk antarmuka pengguna. Ini dapat berupa sketsa, wireframe, atau mockup interaktif.
5. **Prototyping**: Prototipe digunakan untuk menguji konsep desain dengan pengguna dan mendapatkan umpan balik. Prototipe dapat berupa prototipe tingkat rendah (sketsa atau wireframe) atau prototipe tingkat tinggi (mockup interaktif atau prototipe fungsional sederhana).
6. **Evaluasi Pengguna**: Prototipe dievaluasi oleh pengguna untuk mengidentifikasi masalah atau kekurangan dalam desain. Hasil evaluasi digunakan untuk melakukan iterasi dan perbaikan desain.
7. **Implementasi dan Pengujian**: Setelah desain dianggap memenuhi kebutuhan pengguna, desain tersebut diimplementasikan dalam produk akhir. Pengujian lanjutan dilakukan untuk memastikan kualitas dan konsistensi desain.
8. **Perbaikan Berkelanjutan**: Desain UI tidak berhenti pada tahap implementasi. Penggunaan produk oleh pengguna akhir terus dievaluasi, dan desain dapat diperbaiki melalui pembaruan dan iterasi berkelanjutan.
Dengan mengikuti proses desain UI berbasis UCD, pengembang dapat menciptakan antarmuka pengguna yang lebih intuitif, efisien, dan memuaskan bagi pengguna akhir. UCD membantu memastikan bahwa produk yang dikembangkan benar-benar memenuhi kebutuhan dan ekspektasi pengguna, sehingga meningkatkan pengalaman pengguna secara keseluruhan.
1. Konsep Singkat Metode UCD
User-Centered Design (UCD) adalah proses desain yang iteratif di mana para perancang berfokus pada pengguna dan kebutuhan mereka di setiap tahap proses desain. Dalam UCD, tim desain melibatkan pengguna sepanjang proses desain melalui berbagai teknik penelitian dan desain, untuk menciptakan produk yang sangat mudah digunakan dan dapat diakses bagi mereka
2. Langkah-langkah pada proses desain UI
2.1 Riset
Di tahapan pertama, penelitian dan pengumpulan informasi adalah langkah penting untuk memahami kebutuhan pengguna dan konteks penggunaan produk. Proses ini melibatkan beberapa langkah kunci:
- Mengidentifikasi Target Audiens Target
Mengetahui siapa pengguna produk akan membantu menentukan fitur dan desain yang relevan. Misalnya, desain interface untuk aplikasi kesehatan wanita akan berbeda dengan aplikasi e-commerce.
- Analisis Kebutuhan Pengguna
Melakukan survei atau wawancara dengan pengguna potensial untuk mengumpulkan informasi tentang apa yang mereka butuhkan dan inginkan dari produk. Contohnya, untuk membangun aplikasi perbankan maka harus memahami fitur keamanan yang penting bagi penggunanya (pihak bank maupun nasabah).
- Evaluasi Kompetitor
Menganalisis produk serupa di pasar untuk memahami standar industri dan mencari peluang untuk inovasi. Misalnya, memeriksa bagaimana aplikasi serupa mengatur menu navigasi, apa saja fitur mereka yang belum lengkap dan mencari cara untuk memperbaikinya.
- Mengumpulkan Data Kontekstual
Memahami bagaimana dan di mana produk akan digunakan. Misalnya, jika aplikasi seluler sering digunakan dalam perjalanan, maka desain harus mudah diakses dengan satu tangan.
2.2 Pembuatan Panduan Desain
Pembuatan panduan desain adalah proses penting untuk memastikan konsistensi dan efektivitas UI. Panduan ini berisi standar dan aturan desain yang harus diikuti. Berikut adalah komponen utama dari panduan desain:
- Warna
Menetapkan palet warna yang digunakan, mulai dari warna utama, warna pendukung, hingga warna aksen. Palet warna dibutuhkan untuk menciptakan identitas visual yang konsisten dan mengkomunikasikan suasana atau emosi tertentu.
- Tipografi
Mendefinisikan jenis font, ukuran, ketebalan, dan gaya. Pemilihan tipografi yang tepat dapat mempengaruhi keterbacaan dan suasana interface bagi penggunanya.
- Ikonografi
Menetapkan gaya ikon yang digunakan. Selain itu juga memastikan ikon mudah dikenali dan mampu tampil konsisten di seluruh aplikasi atau situs web.
- Layout & Spasi
Mengatur tata letak elemen seperti header, footer, dan konten utama serta menentukan spasi antar elemen untuk memastikan antarmuka yang terorganisir dan mudah dinavigasi.
- Komponen UI
Mendefinisikan tampilan dan perilaku standar untuk elemen UI seperti tombol, form, dan menu dropdown.
- Interaksi
Menentukan bagaimana reaksi elemen UI saat pengguna berinteraksi dengan interface. Reaksi bisa berupa transisi maupun animasi yang bertujuan meningkatkan pengalaman pengguna.
- Panduan Responsif
Tak kalah penting harus ada aturan desain untuk berbagai ukuran layar dan perangkat. Hal ini supaya UI dapat berfungsi dengan baik di berbagai perangkat.
Wireframe merupakan sketsa dasar yang menggambarkan kerangka kerja interface aplikasi atau situs web yang dibuat oleh desainer untuk merencanakan tata letak dan struktur informasi dari halaman web atau aplikasi. Kerangka kerja ini menetapkan bagaimana pengguna akan berinteraksi dengan informasi tersebut.
Komponen dari wireframe biasanya meliputi elemen-elemen seperti header, footer, area konten utama, menu navigasi, dan tombol. Elemen-elemen ini disajikan dalam bentuk kotak dan garis untuk menunjukkan posisi dan ukuran relatif. Wireframe digunakan pada tahap awal pengembangan produk untuk memfasilitasi komunikasi antara desainer UI, pengembang, dan pemangku kepentingan lainnya. Sehingga seluruh stakeholder bisa fokus pada fungsi dan penggunaan ruang tanpa terdistraksi oleh elemen desain visual.
Contohnya dalam aplikasi e-commerce, wireframe menampilkan layout dasar di halaman utama. Misalnya kotak untuk slider promosi di bagian atas, grid untuk produk unggulan, menu navigasi di bagian atas atau samping, dan area footer. Wireframe ini biasanya berbentuk sketsa hitam putih untuk menunjukkan struktur dan layout saja. Belum ada gambaran desain yang detail.
2.4 Mockup
Mockup adalah representasi visual UI yang lebih detail dan realistis. Jika wireframe hanya fokus pada struktur dan layout, maka mockup menunjukkan desain sebenarnya dengan elemen-elemen seperti warna, tipografi, ikon, dan gambar.
Mockup dibuat untuk menunjukkan tampilan dan nuansa akhir dari UI sebelum masuk ke tahap pengembangan. Dari sini bisa terlihat memberikan gambaran yang lebih akurat tentang bagaimana produk akan terlihat dan beroperasi dari segi visual. Komponen mockup meliputi semua aspek visual seperti palet warna, font, ukuran teks, gambar, dan elemen grafis lainnya. Mockup dapat menunjukkan efek visual tertentu seperti bayangan, gradien, atau animasi. Mockup digunakan untuk mendapatkan umpan balik dari stakeholders dan pengguna tentang desain visual. Selain itu, juga membantu developer untuk memahami hasil akhir yang perlu mereka ciptakan.
2.5 Prototype
Prototype adalah versi kerja dari desain yang dapat berinteraksi dan digunakan untuk menunjukkan dan menguji fungsionalitas produk. Berbeda dari mockup, prototype memungkinkan pengguna untuk berinteraksi dengan antarmuka. Sehingga prototype sudah mencakup navigasi antar halaman, klik tombol, dan interaksi lainnya yang mirip dengan produk akhir.
Tujuan utama dari prototype adalah untuk menguji desain dan fungsionalitasnya. Ini membantu mengidentifikasi masalah penggunaan dan mendapatkan umpan balik yang berharga dari pengguna atau pemangku kepentingan sebelum pengembangan final. Prototype bisa berkisar dari versi dasar dengan interaksi minimal hingga versi yang sangat detail dan hampir menyerupai produk akhir. Tingkat detailnya tergantung pada tujuan pengujian dan sumber daya yang tersedia.
Ada berbagai alat yang dapat digunakan untuk membuat prototype, seperti Figma, Adobe XD, dan Sketch. Alat-alat inilah yang memungkinkan desainer untuk membuat interaksi dan transisi yang realistis. Sebagai contoh, prototype untuk aplikasi e-commerce sudah bisa dilakukan interaksi. Sehingga dari desain yang ada sudah bisa melakukan proses menelusuri katalog produk, menambahkan item ke keranjang belanja, dan melakukan proses checkout. Hal ini memungkinkan tim desain untuk menguji dan menyempurnakan proses belanja sebelum aplikasi diluncurkan secara resmi.
2.6 Pengujian dan Iterasi
Pengujian dan iterasi adalah tahapan krusial dalam proses desain UI untuk meningkatkan dan menyempurnakan desain berdasarkan umpan balik pengguna.
- Pengujian
Tahap ini melibatkan pengujian desain UI yang telah dibuat dalam bentuk prototype dengan pengguna nyata. Pengujian ini dapat dilakukan melalui berbagai metode, seperti uji kegunaan, wawancara pengguna, survei, atau A/B testing. Tujuannya adalah untuk mengumpulkan informasi tentang bagaimana pengguna berinteraksi dengan UI. Informasi ini bisa berupa masalah yang ditemui, kebingungan saat mengoperasikan produk, hingga aspek-aspek yang mereka sukai.
- Iterasi
Setelah mendapatkan feedback dari tahap pengujian, desain UI akan disempurnakan. Penyempurnaan ini bisa melibatkan perubahan kecil seperti menyesuaikan warna atau font maupun perubahan besar seperti mengubah layout atau menambah dan menghilangkan fitur. Pengujian dan iterasi adalah proses berkelanjutan yang memastikan supaya desain UI tidak hanya berdasarkan asumsi, tetapi juga mendapatkan feedback nyata dari pengguna. Feedback inilah yang menjadi kunci untuk menciptakan produk yang sukses dan disukai pengguna.
3. Opini serta penjelasan mengenai langkah paling mudah dalam proses UI
Menurut kami, langkah termudah dalam desain UI adalah riset pengalaman pengguna dan testing UI. Hal ini dikarenakan yang pertama dan mudah dilakukan karena hanya mengumpulkan data dari berbagai sumber (contohnya yaitu survei, kuesioner, dan melalui platform lain). Lalu data yang telah terkumpul dianalisis agar dapat mengetahui apa yang harus dikerjakan. Serta hanya dengan mengetest design UI yang telah disediakan apakah dapat berjalan dengan baik ataupun tidak.
4. Opini serta penjelasan mengenai langkah paling sulit dalam proses UI
Menurut kami, langkah paling sulit dalam proses desain UI adalah pengujian dan iterasi. Hal ini dikarenakan menghadapi pengguna nyata dan mengidentifikasi masalah serta memperbaikinya, memerlukan pemahaman mendalam tentang kebutuhan pengguna dan kemampuan untuk mengubah desain berdasarkan umpan balik. Langkah ini adalah yang paling krusial karena harus memeriksa ulang serta menyempurnakan semua langkah agar hasil yang didapat akan lebih maksimal.
5. Opini serta penjelasan mengenai langkah paling mendasar dalam proses UI
Menurut kami, langkah paling mendasar dalam proses desain UI adalah membuat user persona dari target audiens yang ingin dibantu. Tanpa pemahaman yang baik tentang pengguna, konteks, dan kebutuhan, desain UI tidak akan efektif. Menganalisis serta membuat user persona membentuk dasar untuk keputusan desain yang lebih lanjut, dengan begitu target desain UI yang dicapai tentu akan sesuai dengan keinginan audiens.
Referensi
- https://dibimbing.id/blog/detail/tahapan-desain-dalam-menciptakan-ui-yang-ramah-pengguna
- https://sis.binus.ac.id/2019/05/31/user-centered-design/
- https://www.interaction-design.org/literature/topics/user-centered-design
Website Campus : https://jakarta.telkomuniversity.ac.id/
Website Prodi : https://bit-jkt.telkomuniversity.ac.id/
Credit to : Muhammad Haykal Qadhafi, Mayla SafanaU Nabila, Raihan Hidayat
