USER CENTERED DESIGN (UCD) DAN PROSES

DESAIN UI

Kelompok 10:

- Afan Ramadhan (2311110064)

- Bara Aulia Attar (2311110053)
- Fahmi Hidayat (2311110063)

PROGRAM STUDI SAINS DATA

FAKULTAS INFORMATIKA
INSTITUT TEKNOLOGI TELKOM PURWOKERTO
2025

i
 DAFTAR ISI

DAFTAR ISI ........................................................................................................... ii

BAB I PENDAHULUAN ....................................................................................... 1
A. Definisi UCD .............................................................................................. 1
B. Proses Desain UI ......................................................................................... 2
BAB II ISI ............................................................................................................... 4
A. Langkah Termudah Dalam Desain UI ........................................................ 4
B. Langkah Tersulit Dalam Desain UI ............................................................ 4
C. Langkah Paling Mendasar Dalam Desain UI .............................................. 5
BAB III PENUTUP ................................................................................................ 6
A. Kesimpulan ................................................................................................. 6
DAFTAR PUSTAKA ............................................................................................. 7

ii
 BAB I
PENDAHULUAN

A. Definisi UCD

User-centered design (UCD) adalah proses desain yang dilakukan

secara iteratif dan menjadikan kebutuhan serta keinginan user sebagai fokus
utama dalam prosesnya sehingga desainer bisa menciptakan solusi yang
dapat digunakan secara nyaman oleh user. Pada umumnya, desainer akan
melakukan observasi dan pengembangan ide (brainstorming) berdasarkan
data yang didapatkan dari user. Dengan metode desain ini, maka user juga
turut terlibat dalam proses pengembangannya sehingga user-centered
design ini bisa menciptakan experience sesuai dengan kebutuhan user.
Pada dasarnya, terdapat 3 prinsip dalam pengembangan UI
berdasarkan metode UCD diantaranya:
1. Dengarkan pengguna: keterlibatan pengguna dalam desain UI
menggunakan metode UCD sangat penting. Pengguna sebagai fokus
utama dalam merancang desain akan memberikan masukan-masukan
mengenai design UI yang ideal. Oleh karena itu penting bagi desainer
dalam menganalisis kebutuhan dan tujuan pengguna.
2. Mitigasi error: dalam pengembangan UI, masalah error sering kali tidak
dapat dihindarkan. Kesulitan semacam ini biasanya disebabkan kurang
terhubungnya pemahaman desainer mengenai pengalaman pengguna.
Terdapat beberapa cara untuk mengatasinya, salah satunya yaitu
melakukan usability testing.
3. Gunakan data saintifik: proses UCD sangat bergantung pada data dan
sains. Dengan adanya data yang valid, dapat membantu desainer bekerja
sesuai dengan tujuan yang telah ditentukan. Desainer harus selalu
berpedoman pada data untuk membuat keputusan karena kebutuhan
pengguna dicerminkan dari data yang diperoleh.

1
 Dengan proses UCD, seorang desainer dapat menciptakan sebuah
produk/ layanan yang sesuai dengan keinginan user dan nyaman untuk
digunakan. Hal ini sesuai dengan tujuan utama dari UCD yang menciptakan
sebuah desain yang intuitif, mudah untuk digunakan, serta efektif.
Sebuah desain dapat dikatakan baik apabila dapat memberikan pengalaman
yang menyenangkan, seperti mudah dan cepat untuk digunakan.

B. Proses Desain UI

Menurut Lastiansah (2012) user interface (UI) adalah cara program

dan pengguna berinteraksi. UI juga sering kali disebut Human Computer
Interaction (HCI) dimana semua aspek saling berhubungan. Terdapat tujuh
tahapan yang harus dilakukan dalam mendesain UI yang ramah pengguna
yaitu sebagai berikut:

1. Riset
Pada tahapan pertama, penelitian dan pengumpulan informasi menjadi
Langkah yang penting untuk memahami kebutuhan pengguna. Proses
ini melibatkan beberapa Langkah kunci seperti mengidentifikasi target
audiens, analisis kebutuhan pengguna, pembuatan user persona, dan
mengumpulkan data kontekstual. Melalui tahapan ini, desainer UI dapat
membangun fondasi yang kuat untuk menciptakan UI yang sesuai
dengan kebutuhan dan harapan pengguna.
2. Pembentukan panduan desain
Setelah data berhasil didapat, Langkah selanjutnya adalah membuat
panduan desain untuk memastikan konsistensi dan efektivitas UI.
Panduan ini berisi aturan desain yang harus diikuti seperti warna,
tipografi, layout, dan lain-lain. Selain itu, fleksibilitas aturan desain juga
penting supaya UI dapat berfungsi optimal di berbagai perangkat.
3. Wireframe
Wireframe merupakan sketsa dasar yang menggambarkan kerangka
kerja interface. Kerangka kerja ini menetapkan bagaimana pengguna
akan berinteraksi dengan informasi tersebut. Komponen dari wireframe

2
 biasanya meliputi elemen-elemen seperti header, footer, area konten
utama, menu navigasi, dan tombol.
4. Mockup
Mockup adalah representasi visual UI yang lebih detail dan realistis.
Jika wireframe hanya fokus pada struktur dan layout, maka mockup
menunjukan desain sebenarnya dengan elemen-elemen seperti warna,
tipografi, ikon, dan gambar. Mockup digunakan untuk mendapatkan
feedback dari stakeholders dan pengguna tentang desain visual.
5. Prototype
Prototype adalah versi kerja dari desain yang dapat berinteraksi dan
digunakan untuk menunjukan fungsionalitas produk. Berbeda dari
mockup, prototype memungkinkan pengguna untuk berinteraksi dengan
antarmuka. Tujuan utama dari prototype adalah untuk menguji desain
dan fungsionalitasnya. Ini membantu mengidentifikasi masalah sebelum
pemgembangan final.
6. Pengujian
Tahapan ini melibatkan pengujian prototype UI dengan penggunaan
nyata. Pengujian dapat dilakukan dengan berbagai metode, seperti uji
kegunaan, wawancara pengguna, dan survey. Tujuannya adalah untuk
mengumpulkan informasi tentang bagaimana pengguna berinteraksi
dengan UI.
7. Iterasi
Setelah mendapat feedback dari tahap pengujian, desain UI akan
disempurnakan. Penyempurnaan ini biasanya melibatkan perubahan
kecil dan penyesuaian. Pengujian dan iterasi merupakan proses
berkelanjutan dan berulang hingga menciptakan UI yang optimal dan
disukai pengguna.

3
 BAB II
ISI

A. Langkah Termudah Dalam Desain UI

Dari Hasil Diskusi Kita Langkah Termudah untuk mendesain UI itu

adalah Riset, karena riset hanya mencari informasi yang sesuai dengan
desain tema yang mau kita buat, seperti desain tema otomotif, kita bisa
meriset seperti mobil,motor dll.
Melakukan riset jauh lebih gampang dari pada langkah-langkah
yang lain. Riset tidak membutuhkan keahlian teknis secara khusus. Selain
itu teknik-teknik dalam melakukan pengumpulan informasi juga beragam
dan mudah seperti melalui kuesioner, wawancara, dan lainnya. Riset juga
membantu kita untuk memahami kebutuhan pengguna, dan membantu
mengumpulkan inspirasi tanpa harus mulai dari nol. Selain itu, riset
memungkinkan kita untuk menghemat biaya dan waktu serta membuat
keputusan desain yang lebih terarah.

B. Langkah Tersulit Dalam Desain UI

Dari Hasil Diskusi Langkah Tersulit Adalah Wireframe dan

Mockup, Karena Menentukan Struktur Awal Itu Tidak Mudah Apabila
Membuat dengan Struktur sendiri tanpa menggunakan Template, jika kita
membuat Struktur dengan Asal Asalan Maka Untuk lanjut ke mockup dan
prototype akan menjadi aneh atau buruk.
Mockup menjadi Tersulit ke-2 karena wireframe dan mockup saling
berkesinambungan mockup juga termasuk yang sulit karena harus
mendesain sesuai tema dan menyesuaikan dengan User/Pengguna dari UI
yang akan digunakan, dan dalam mockup kita juga tidak bisa ngasal ngasal
dalam melakukan Desain karena ada kecocokan antara warna,element, dan
banyak lagi unsur unsur kecil yang membuat mockup/ desain akhir menjadi
enak dilihat dan gampang digunakan.

4
C. Langkah Paling Mendasar Dalam Desain UI

langkah paling mendasar sebelum mendesain UI salah satunya

adalah memahami mengenai masalah atau kebutuhan pengguna yang ingin
kita pecahkan melalui UI yang akan kita ciptakan. cara untuk memahami
masalah dan kebutuhan pengguna adalah dengan melakukan riset. dengan
riset kita dapat mengetahui kesulitan, preferensi, dan kesulitan pengguna.
selain itu, kemampuan teknikal juga penting untuk mewujudkan UI yang
ideal seperti pemahaman software yang digunakan. Selain itu, menguasai
kemampuan teknis seperti software desain (vidma,dll) juga penting. Dengan
menggabungkan riset dan kemampuan teknis kita bisa menciptakan desain
UI yang menarik dan sesuai kebutuhan pengguna.

5
 BAB III
PENUTUP

A. Kesimpulan

Desain UI yang efektif dan ramah pengguna memerlukan

pendekatan yang berfokus pada pengguna atau yang lebih dikenal dengan
User-Centered Design (UCD). Langkah paling mendasar dalam proses ini
adalah memahami kebutuhan dan masalah pengguna melalui riset. Riset
membantu desainer mengumpulkan informasi tentang preferensi, kesulitan,
dan harapan pengguna sehingga desain yang dihasilkan dapat memecahkan
masalah dengan tepat. Selain itu, kemampuan teknis seperti menguasai
software desain juga penting untuk mewujudkan UI yang ideal.
Proses desain UI terdiri dari beberapa tahapan penting, mulai dari
riset, pembuatan wireframe, mockup, prototype, hingga pengujian dan
penyempurnaan. Meskipun riset sering dianggap sebagai langkah termudah
karena tidak membutuhkan keahlian teknis yang rumit, tahapan seperti
wireframe dan mockup bisa menjadi tantangan tersendiri. Ini karena kedua
tahap tersebut menuntut kreativitas dan ketelitian dalam menentukan
struktur serta tampilan desain.

6
 DAFTAR PUSTAKA

Rahmalia, Nadiyah, “User-centered Design: Definisi, Manfaat, Prinsip, dan

Proses Perancangannya”, [Link], Sep. 29, 2022. [Online]. Avalilable:
[Link]
Agustiano, Steven, “PENTINGNYA USER CENTERED DESIGN DALAM
UI/UX”, [Link], Apr. 19, 2023. [Online]. Available: PENTINGNYA
USER CENTERED DESIGN DALAM UI/UX – School of Information Systems
Kamalia, Nadia L, “6 Tahapan Desain dalam Menciptakan UI yang Ramah
Pengguna”, [Link], Dec. 29, 2023. [Online]. Available: [Link] - 6
Tahapan Desain dalam Menciptakan UI yang Ramah Pengguna
Wiwesa, Ngurah Rangga (2021) "USER INTERFACE DAN USER
EXPERIENCE UNTUK MENGELOLA KEPUASAN PELANGGAN," Jurnal
Sosial Humaniora Terapan: Vol. 3: Iss. 2, Article 2. Available at:
[Link]