UI & UX Desain

Sebelum kita jauh melangkah, sepakati terlebih dahulu tentang kata yang ada dalam judul.

UI adalah User Interface (Tampilan Antarmuka Pengguna) sedangkan UX adalah User

Experience (Pengalaman Pengguna), sedangkan desain adalah suatu perencanaan atau
perancangan yang dilakukan sebelum pembuatan suatu objek, sistem, komponen, atau
struktur. Jadi secara garis besar UI & UX Desain yaitu ilmu yang mempelajari tentang
bagaimana merancang sebuah tampilan antarmuka yang mudah digunakan dan memberikan
pengalaman berkesan bagi pengguna.
 Daftar Isi

Konten
Daftar Isi...................................................................................................................................... 2
PROLOGUE UI UX DESAIN .......................................................................................................... 3
BAB 1: Pengenalan UI/UX Design dan Peranannya dalam Pengembangan Sistem Informasi
................................................................................................................................................... 12
Bagian 1.1: Pengenalan UI/UX Design dan Peranannya dalam Pengembangan Sistem
Informasi ............................................................................................................................... 12
Bagian 1.2: Pengenalan Figma sebagai Alat Desain UI/UX ................................................... 14
Bagian 1.3: Pentingnya Pengalaman Pengguna (User Experience) dalam Sistem Informasi15
Bab 2: Prinsip-prinsip Dasar UI/UX Design .............................................................................. 17
Bagian 2.1: Prinsip-prinsip Desain Antar Muka yang Efektif ................................................. 17
Bagian 2.2: Pemahaman tentang User-Centered Design (Desain Berpusat pada Pengguna)
............................................................................................................................................... 18
Design Thinking dalam Proses UI/UX Design .................................................................... 20
Bagian 2.3: Mengenal Pola Desain dan Standar UI/UX ......................................................... 22
Bab 3: Tahapan Desain UI/UX dengan Figma .......................................................................... 24
Bagian 3.1: Analisis Kebutuhan Pengguna dan Tujuan Desain ............................................. 24
Bagian 3.2: Pembuatan Sketsa Awal (Wireframe) untuk Tata Letak Antarmuka ................. 26
Bagian 3.3: Desain Visual Antarmuka ................................................................................... 27
Bagian 3.4: Uji Coba (User Testing) dan Pengumpulan Umpan Balik ................................... 29
Bagian 3.5: Evaluasi Akhir dan Peluncuran Sistem ............................................................... 30
Bagian 4.3: Pelatihan dan Pendampingan Pengguna ........................................................... 32
BAB 4. Tutorial Desain Menggunakan FIGMA ......................................................................... 34
BAB 5. Pengukuran Efektifitas UI UX Desain dengan Metode UEQ dan SUS ......................... 35
Bagian 1: User Experience Questionnaire (UEQ) .............................................................. 35
Bagian 2: System Usability Scale (SUS) ............................................................................. 36
Contoh Jurnal dengan Pengukuran UEQ dan SUS ............................................................. 37

2
 PROLOGUE UI UX DESAIN

Istilah UX sendiri ditemukan pertama kali

pada tahun 1993 oleh seorang psikolog
dan ilmuan kognitif, Donald Arthur
Norman

Namun sebenarnya dalam

pengimplementasian konsepnya sudah
ada sejak lama, kita akan coba bahas
singkat terkait masa ke masa.
Figure 1. Donald Arthur Norman

Penggunaan User Experience dari Masa ke Masa

Sumber: [Link]

Figure 2. Evolusi UX

4000 SM: Feng Shui & Tiongkok Kuno

Figure 3. Sketsa Feng Shui

Prinsip paling dasar dari UX dapat dilihat dari filosofi Feng Shui dalam peradaban Tiongkok
Kuno yang udah ada sejak 4000 tahun SM. Feng Shui mengacu pada pengaturan spasial objek
berdasarkan aliran energi. Dalam praktiknya, Feng Shui mengatur lingkungan dengan cara yang
paling optimal, harmonis, dan ramah pengguna.

Nah, UX designer juga menganut prinsip yang sama nih! Yaitu bagaimana mengatur sesuatu
atau membuat suatu produk yang optimal dan ramah bagi pengguna.

3
500 SM: Ergonomi & Yunani Kuno

Figure 4. Unit Ergonomi

Prinsip UX juga dapat ditemukan pada peradaban Yunani Kuno di abad ke-5 SM. Waktu itu,
masyarakat Yunani Kuno merancang alat dan tempat kerja mereka berdasarkan prinsip
ergonomis. Ergonomi adalah disiplin ilmu yang mempertimbangkan bagaimana manusia
berinteraksi dengan elemen lain dari suatu sistem. Sederhananya, ergonomi ini digunakan
untuk meningkatkan produktivitas, kenyamanan, dan keselamatan dalam bekerja.

Lalu kaitannya dengan UX dimana?

Menurut catatan Hippocrates, masyarakat Yunani Kuno menerapkan prinsip ergonomi dalam
kehidupan mereka. Misalnya dalam praktek ahli bedah. Hippocrates menjelaskan bagaimana
tempat ahli bedah harus diatur sedemikian rupa. Seperti pengaturan alat-alat bedah harus
diposisikan agar tidak menghalangi ahli bedah dan mudah dijangkau bila diperlukan. Itu
merupakan salah satu prinsip dari UX.

Awal 1900-an: Frederick Winslow Taylor dan efisiensi tempat kerja

Figure 5. Cover Buku Prinsip Manajemen Ilmiah oleh Frederick Winslow Taylor

Pada tahun 1911, Frederick Winslow Taylor, seorang insinyur mesin dan pelopor Taylorisme,
menulis ‘The Principles of Scientific Management’ yang menjelaskan prinsip dan metode ilmiah
untuk menentukan cara terbaik dalam menyelesaikan suatu pekerjaan. Taylor memiliki misi
untuk membuat kerja manusia menjadi lebih mudah dan efisien.

Misi Taylor ini sejalan sama UX Design, yaitu bagaimana menciptakan suatu produk yang
efisien dan memudahkan manusia.

4
1940-an: Toyota dan pentingnya masukan para pengguna!

Figure 6. Toyota

Pada tahun 1940-an, perusahaan otomotif Jepang, Toyota, mengembangkan sistem produksi
yang berpusat pada pengguna.

Sistem produksi yang dikembangkan pada waktu itu didasarkan pada rasa hormat dan
pentingnya masukan dari pengguna.

Misal, pekerja pabrik Toyota dapat menghentikan proses perakitan jika ada masukan atau
saran dari pengguna. Hal ini sama seperti yang dilakukan UX Designer saat melakukan
pengujian penggunaan produk.

1955: Henry Dreyfuss dan seni mendesain untuk manusia

Figure 7. Henry Dreyfuss

Tokoh penting lainnya dalam sejarah UX Design adalah Henry Dreyfuss, seorang insinyur
industri dari Amerika Serikat yang terkenal karena merancang produk-produk ikonik, seperti
penyedot debu Hoover dan telepon meja.

Gak cuma itu, di tahun 1955, Dreyfuss juga menulis buku Designing for People yang
menjelaskan secara singkat tentang UX Design: Kalo mau jadi desainer sukses, bikin produk
yang menarik, nyaman dipake, dan bisa bikin orang happy!

5
1966: Walt Disney, UX designer pertama?

Figure 8. Walt Disney

Apakah kamu familiar dengan film seperti The Lion king, Cinderella, atau Frozen? Tahukah
kamu jika rumah produksi dari film-film tersebut, yaitu Walt Disney, dianggap memiliki UX
Designer pertama dalam sejarah?

Yap, Walt Disney berhasil menciptakan Disney World yang imajinatif, intuitif, dan berhasil
menggugah para penontonnya. Hal itu tidak terlepas dari keberadaan tim insinyur Walt Disney
yang berhasil menciptakan animasi-animasi dengan perpaduan warna dan karakter yang
ciamik.

1970-an: Xerox, Apple, dan era PC

Figure 9. Xerox Alto

Era personal computer (PC) dimulai pada tahun 1970-an. Pada tahun-tahun tersebut, para
psikolog dan insinyur bekerja sama untuk meningkatkan User Experience. Lahir beberapa
inovasi dalam dunia komputer, salah satunya dari pusat penelitian PARC Xerox, seperti
penciptaan UI grafis dan mouse. Dari sinilah sejarah UI design dimulai, yang bakal kita bahas
lebih detail pada bagian selanjutnya. Gak cuma itu, di tahun 1984, Apple merilis PC massal
pertama, yaitu Apple Macintosh yang menampilkan User Interface, layar dan mouse built-in.
Sejak saat itu, Apple menjadi inovator sejati dalam pengembangan User Interface.

6
1993: Donald Norman memperkenalkan istilah UX Design

Figure 10. Donald Norman

Penggunaan UX Design di tahun 1990-an sudah sangat marak, namun belum memiliki label
atau istilah. Barulah pada tahun 1993, seorang psikolog dan ilmuwan kognitif, Donald Norman,
memperkenalkan istilah UX Design. Norman menggunakan istilah atau label UX pada
jabatannya saat bekerja di Apple Computers.

Penggunaan User Interface dari Masa ke Masa

Figure 11. Evolusi UI

1960 - 1980: Era komputer pribadi (PC)

Figure [Link] PC

7
Kaya yang udah dibahas pada bagian sejarah UX, era PC dimulai pada tahun 1970-an. Pada era
PC inilah, User Interface (UI) mulai marak digunakan. Seperti inovasi dari pusat penelitian PARC
Xerox, melalui UI grafis dan mouse. Gak cuma itu, di tahun 1984, Apple merilis PC massal
pertama, yaitu Apple Macintosh yang menampilkan User Interface. Sejak saat itu, Apple
menjadi inovator sejati dalam pengembangan User Interface.

1984: Inspirasi dari Xerox

Figure 13. Inspirasi dari Xerox

Pada tahun 1979, pendiri Apple, Steve Jobs, mengunjungi PARC Xerox dan menemukan
inspirasi dari GUI (Graphical User Interface) yang dikembangkan Xerox.

Kemudian, Jobs mengaplikasikan inspirasi tersebut untuk menciptakan PC Apple Macintosh

pada tahun 1984. Penggunaan GUI di Macintosh memiliki tampilan lebih menarik dan simple
dibandingkan GUI versi lainnya. Misal, penggunaan ikon-ikon pada tampilan komputer. So,
wajar aja kalo Apple disebut inovator sejati dalam pengembangan User Interface.

1994-1997: Komputer mulai mengecil

Figure 14. Perangkat yang bisa touch

Pada tahun 1990-an, komputer terus mengalami perubahan. Dari PC cembung berukuran
besar, laptop, hingga perangkat yang dapat digenggam. Seperti PalmPilot, sebuah perangkat
dengan User Interface yang keren, stylus pen, dan bisa touchscreen!

8
1997-an: Suara untuk interaksi

Figure 15. Speech Recognition

Kamu pasti familiar dengan google assistant atau siri pada handphone kamu, kan? Tahukah
kamu kalo penggunaan speech recognition kaya gitu udah ada sejak tahun 1997. Dragon
(sekarang Nuance), sebuah perusahaan software Amerika Serikat, mengembangkan software
bernama Dragon Naturally Speaking yang memungkinkan komputer membaca suara dari
penggunanya. Sejak saat itu, penggunaan speech recognition menjadi populer pada
komputer hingga telepon genggam.

2000-an: Pengembangan User Interface

Figure 16. Pengembangan UI

Memasuki tahun 2000-an, User Interface makin canggih! Pengembangan UI ini sejalan dengan
popularitas smartphone pada waktu itu. Pengembangan UI dan smartphone dipimpin oleh
Apple melalui pengembangan iPhone pada tahun 2007 dan iPad pada tahun 2010 dengan fitur
touchscreen.

9
2011 - sampai sekarang

Figure 17. UI now

Dan boomm! User Interface terus berkembang hingga saat ini. Mulai dari tampilan layar
smartphone yang makin ciamik hingga fitur touchscreen yang makin canggih. Bahkan, nggak
cuma pada smartphone, mesin ATM aja udah touchscreen, lho!

Nggak cuma itu, fitur speech atau voice recognition juga makin canggih. Seperti peluncuran Siri
oleh Apple pada tahun 2011, Google Now pada tahun 2012, hingga Amazon Alexa pada tahun
2014.

Okeh, dari evolusi yang sudah dipaparkan, apakah bisa membuat kesimpulan dari UI UX?

User Interface (UI) User Experience (UX)

Secara istilah, UX berarti pengalaman
Secara istilah, UI berarti antarmuka
pengguna. Yaitu bagaimana pengguna dari
pengguna . Yaitu bentuk tampilan grafis yang
suatu produk berinteraksi dengan produk
ada pada perangkat atau produk yang dilihat
tersebut. Misal, Sabrina lebih nyaman
dan berhubungan dengan pengguna. Misal,
menggunakan produk A karena simple,
tampilan beranda aplikasi B sangat
mudah digunakan, dan dapat sesuai dengan
simple dan enak dipandang.
kebutuhannya.
Dari statement di atas, kita tahu betapa pentingnya UI&UX dalam sebuah produk untuk
memastikan bahwa pengguna benar nyaman saat menggunakan produk kita dan tentunya
membuat pengguna closing dengan produk kita.

Lalu bagaimana dengan UI&UX di masa sekarang?

UI di masa sekarang hadir dengan bentuk dan fitur yang sangat menarik. Seperti ilustrasi
berupa gambar-gambar yang ciamik dan animasi atau motion design yang sangat menghibur!
Nggak cuma itu, juga ada fitur font custom.

Kalo kamu bosen sama model tulisan kaya gini di handphone kamu,

bisa diganti sama yang lain!

10
Eitss, kalo kamu xilauu, gelapin dulu cahaya nya sob! Kan ada fitur dark mode~

Terus, juga ada yang namanya neumorfisme. Yaitu desain ikon

aplikasi yang memadukan beragam tekstur, kedalaman, dan
bayangan sehingga makin elegan dan enak
dipandang. Neumorfisme ini merupakan
Figure 18. Neumorfisme UI tren baru dalam User Interface yang
dipopulerkan Apple pada tahun 2020.

UX nya juga nggak kalah keren!

Nggak cuma UI, UX juga punya beragam inovasi di masa sekarang.

Misal, penerapan storytelling untuk menggugah orang secara
emosional pada suatu produk.

Terus, kalo kamu lagi nge-scroll sesuatu di website, pasti ada

progress bar yang bergerak kan? Yap~ itu adalah bentuk
microinteractions dimana kamu sebagai pengguna seolah
berinteraksi dengan website atau aplikasi tersebut.
Microinteractions ini merupakan salah satu bentuk inovasi dalam
UX.
Figure 19. Contoh Storytelling UX

Ada yang nggak kalah keren nih pada inovasi UX di

masa sekarang, yaitu fitur air gesture control. Fitur
ini memungkinkan pengguna untuk menggunakan
perangkat tanpa menyentuh.
Figure 20. Air Gesture Control

Okey, bagaimana, sudah mengerti apa itu UI UX Desain?

Mari kita bahas lebih rincinya…

11
 BAB 1: Pengenalan UI/UX Design dan Peranannya dalam
Pengembangan Sistem Informasi

Bagian 1.1: Pengenalan UI/UX Design dan Peranannya dalam Pengembangan

Sistem Informasi

Pengantar:

Dalam bagian ini, kita akan memahami konsep dasar tentang UI/UX Design dan bagaimana
peranannya dalam pengembangan sistem informasi. Pengenalan ini akan memberikan dasar
yang kuat untuk memahami mengapa desain antarmuka pengguna (UI) dan pengalaman
pengguna (UX) sangat penting dalam lingkungan teknologi informasi.

Definisi UI/UX Design:

UI (User Interface) Design merujuk pada proses merancang tampilan visual dari sebuah aplikasi
atau sistem, yang meliputi elemen-elemen seperti layout, warna, tipografi, dan ikon.
Sementara itu, UX (User Experience) Design fokus pada bagaimana pengguna berinteraksi
dengan sistem dan bagaimana pengalaman pengguna dapat dioptimalkan untuk mencapai
tujuan mereka dengan efektif.

Peran UI/UX Design dalam Pengembangan Sistem Informasi:

UI/UX Design memiliki peran sentral dalam pengembangan sistem informasi. Berikut adalah
beberapa alasan mengapa hal ini sangat penting:

1. Meningkatkan Kepuasan Pengguna: Desain antarmuka yang baik dan pengalaman

pengguna yang positif dapat meningkatkan kepuasan pengguna. Pengguna yang puas
lebih cenderung menggunakan sistem dengan lebih sering dan lebih lama.

12
2. Mengurangi Kesalahan dan Kebingungan: Desain yang baik dapat mengurangi risiko
terjadinya kesalahan dan kebingungan bagi pengguna saat berinteraksi dengan sistem.
Antarmuka yang intuitif membantu pengguna menggunakan sistem dengan lebih efisien.
3. Meningkatkan Efisiensi dan Produktivitas: UI/UX Design yang baik dapat membantu
pengguna menemukan informasi atau menyelesaikan tugas dengan lebih cepat. Ini
berkontribusi pada peningkatan efisiensi dan produktivitas.
4. Mendukung Tujuan Bisnis: Desain yang baik dapat membantu mencapai tujuan bisnis,
seperti peningkatan penjualan, retensi pelanggan, atau partisipasi pengguna dalam fitur
tertentu.
5. Mengurangi Pelatihan Pengguna: Dengan antarmuka yang mudah dipahami dan
digunakan, pelatihan yang intensif bagi pengguna baru dapat dikurangi.
6. Meningkatkan Reputasi dan Kepercayaan: Antarmuka yang menarik dan pengalaman
pengguna yang positif dapat meningkatkan reputasi perusahaan atau organisasi di mata
pengguna.

Hubungan dengan Sistem Informasi:

UI/UX Design bukan hanya tentang estetika, tetapi juga tentang

bagaimana pengguna berinteraksi dengan sistem informasi.
Dalam konteks sistem informasi, UI/UX Design membantu
menjembatani kesenjangan antara teknologi dan pengguna
akhir. Sebuah sistem informasi yang kuat dengan desain
antarmuka yang baik dapat memberikan nilai tambah kepada
pengguna dan organisasi.

Penutup:

Pemahaman tentang UI/UX Design dan peranannya dalam pengembangan sistem informasi
merupakan langkah awal yang penting dalam membangun dasar pengetahuan yang kuat
tentang desain antarmuka dan pengalaman pengguna yang efektif. Dalam bagian selanjutnya,
kita akan menjelajahi lebih dalam tentang alat utama yang digunakan dalam UI/UX Design,
yaitu Figma.

13
Bagian 1.2: Pengenalan Figma sebagai Alat Desain UI/UX

Pengantar:

Dalam bagian ini, kita akan memperkenalkan Figma sebagai alat utama dalam desain UI/UX.
Figma adalah platform desain kolaboratif yang populer, digunakan oleh profesional desain
untuk membuat antarmuka pengguna yang menarik dan interaktif. Kami akan menjelaskan
mengapa Figma menjadi alat yang pilihan untuk desain UI/UX, serta beberapa manfaatnya.

[Link]

Pengenalan Figma:

Figma adalah alat desain berbasis web yang memungkinkan tim desain bekerja secara
kolaboratif pada proyek UI/UX. Salah satu keunggulan utama Figma adalah kemampuannya
untuk mendukung kolaborasi secara real-time, yang memungkinkan anggota tim bekerja
bersama pada proyek yang sama tanpa perlu memikirkan versi yang berbeda.

Fitur Utama Figma:

1. Real-time Collaboration: Anggota tim dapat bekerja bersama pada proyek secara
bersamaan. Perubahan yang dilakukan oleh satu anggota tim akan terlihat secara instan
oleh yang lain.
2. Prototyping Interaktif: Figma memungkinkan pembuatan prototype interaktif yang dapat
diuji oleh pengguna. Ini membantu untuk menguji aliran kerja, navigasi, dan interaksi
sebelum mengembangkan aplikasi yang sebenarnya.
3. Komponen dan Library: Figma memungkinkan pembuatan komponen yang dapat
digunakan ulang dalam proyek, mempercepat proses desain dan memastikan konsistensi
antara berbagai halaman.

14
4. Penyimpanan Cloud: Semua proyek disimpan di awan, memungkinkan akses dari berbagai
perangkat dan tempat. Tidak perlu khawatir tentang kehilangan data.
5. Desain Responsif: Figma mendukung desain responsif, memungkinkan Anda untuk
membuat desain yang sesuai dengan berbagai ukuran layar.
6. Plugin dan Integrasi: Figma memiliki ekosistem plugin yang kaya, memungkinkan
penambahan fungsionalitas tambahan sesuai kebutuhan proyek. Selain itu, Figma juga
dapat terintegrasi dengan alat-alat lain seperti Slack, Trello, dan lainnya.

Keuntungan Menggunakan Figma:

1. Kolaborasi yang Mudah: Figma memungkinkan anggota tim bekerja bersama dalam waktu
nyata, tanpa batasan geografis.
2. Efisiensi dalam Desain: Fitur komponen dan library membantu mengurangi redundansi
dan mempercepat proses desain.
3. Pengujian Prototipe: Dengan fitur prototyping, Anda dapat menguji konsep sebelum
implementasi, mengurangi risiko kesalahan desain yang mahal.
4. Aksesibilitas: Karena berbasis web, Figma dapat diakses dari berbagai perangkat dengan
koneksi internet.

Penutup:

Pengenalan Figma sebagai alat desain UI/UX adalah langkah penting dalam mempersiapkan
mahasiswa untuk memahami dan menguasai prinsip-prinsip desain dan pengalaman
pengguna. Pada bagian selanjutnya, kita akan melangkah lebih dalam ke dalam tahapan-
tahapan desain UI/UX dengan Figma.

Bagian 1.3: Pentingnya Pengalaman Pengguna (User Experience) dalam Sistem

Informasi

Pengantar:

Dalam bagian ini, kita akan menjelaskan mengapa pengalaman pengguna (User Experience
atau UX) memiliki peran yang sangat penting dalam pengembangan sistem informasi. Kita akan
menggali lebih dalam tentang apa itu UX, mengapa itu relevan dalam konteks sistem informasi,
dan bagaimana faktor-faktor UX dapat memengaruhi keberhasilan sebuah proyek.

Definisi Pengalaman Pengguna (User Experience):

Pengalaman Pengguna (UX) merujuk pada keseluruhan pengalaman dan persepsi pengguna
saat berinteraksi dengan sebuah produk, layanan, atau sistem. Ini mencakup aspek-aspek
seperti kemudahan penggunaan, efisiensi, kepuasan, dan emosi yang dirasakan pengguna
selama interaksi.

Relevansi UX dalam Sistem Informasi:

15
Dalam konteks sistem informasi, UX memiliki peran yang sangat krusial. Alasan-alasan berikut
menjelaskan mengapa UX penting:

1. Meningkatkan Penerimaan Pengguna: Sistem informasi yang memiliki UX yang baik

cenderung lebih diterima oleh pengguna. Pengalaman positif dapat mengurangi resistensi
terhadap perubahan dan mendorong adopsi sistem.
2. Pengguna yang Lebih Produktif: UX yang baik membantu pengguna menemukan informasi
dan menyelesaikan tugas dengan lebih cepat dan efisien, meningkatkan produktivitas
mereka.
3. Mengurangi Kesalahan dan Pelatihan: Pengalaman pengguna yang intuitif dan mudah
dipahami dapat mengurangi risiko kesalahan dan kebutuhan akan pelatihan yang intensif.
4. Memenuhi Kebutuhan Pengguna: UX yang terfokus pada pengguna membantu
memastikan bahwa sistem informasi benar-benar memenuhi kebutuhan dan preferensi
pengguna.
5. Meningkatkan Retensi Pengguna: UX yang positif dapat membantu mempertahankan
pengguna dan mencegah mereka beralih ke solusi lain.

Faktor-faktor Pengaruh UX:

a) Beberapa faktor yang memengaruhi pengalaman pengguna dalam sistem informasi

meliputi:
b) Kemudahan Penggunaan: Sejauh mana sistem mudah dipahami dan digunakan oleh
pengguna?
c) Konsistensi Antar Muka: Apakah desain dan interaksi antar muka konsisten di seluruh
sistem?
d) Kinerja: Seberapa cepat dan responsif sistem dalam merespons tindakan pengguna?
e) Estetika Visual: Bagaimana tampilan visual sistem? Apakah desainnya menarik dan
profesional?
f) Navigasi: Seberapa mudah pengguna dapat berpindah antara halaman dan fitur?
g) Respon terhadap Umpan Balik: Bagaimana sistem merespons tindakan pengguna dan
memberikan umpan balik yang informatif?

Studi Kasus:

Contoh kasus nyata tentang peran UX dalam sistem informasi adalah meningkatnya adopsi
platform e-commerce berdasarkan kualitas pengalaman pengguna. Platform dengan navigasi
yang sederhana, pencarian yang efisien, dan proses checkout yang lancar cenderung memiliki
lebih banyak pelanggan dan transaksi sukses.

Penutup:

Pengalaman Pengguna (UX) adalah elemen yang tidak boleh diabaikan dalam pengembangan
sistem informasi. Memahami dan mengintegrasikan prinsip-prinsip UX dalam proses desain
dan pengembangan dapat berdampak signifikan pada keberhasilan proyek dan kepuasan
pengguna akhir. Pada bagian selanjutnya, kita akan mulai menjelajahi prinsip-prinsip dasar
desain antarmuka yang efektif.

16
 Bab 2: Prinsip-prinsip Dasar UI/UX Design

Bagian 2.1: Prinsip-prinsip Desain Antar Muka yang Efektif

Pengantar:

Dalam bagian ini, kita akan memperkenalkan prinsip-prinsip dasar desain antarmuka yang
efektif. Prinsip-prinsip ini adalah panduan penting dalam merancang antarmuka yang intuitif,
menarik, dan mudah digunakan oleh pengguna. Memahami dan menerapkan prinsip-prinsip
ini adalah kunci untuk menciptakan pengalaman pengguna yang positif.

Kejelasan dan Kesederhanaan: Prinsip pertama adalah kejelasan dan kesederhanaan.

Antarmuka yang terlalu rumit atau penuh dengan elemen yang membingungkan dapat
membuat pengguna kesulitan dalam menavigasi dan berinteraksi. Desain yang sederhana dan
jelas membantu pengguna fokus pada tugas utama mereka.

Konsistensi Antar Muka: Konsistensi adalah prinsip krusial dalam desain antarmuka. Pengguna
harus merasa bahwa elemen-elemen seperti tombol, ikon, dan tata letak memiliki pola yang
sama di seluruh sistem. Ini mempermudah pengguna dalam berpindah antara halaman dan
fitur, dan mengurangi kebingungan.

Hierarki Visual: Penting untuk mengatur elemen-elemen antarmuka berdasarkan hierarki

visual. Elemen-elemen yang lebih penting atau mendesak harus lebih menonjol, sedangkan
yang kurang penting harus ditempatkan dengan lebih sederhana. Ini membantu pengguna
memahami aliran informasi dan tindakan yang diharapkan.

Kemudahan Navigasi: Navigasi yang baik adalah kunci untuk memberikan pengalaman
pengguna yang lancar. Prinsip ini melibatkan penggunaan tata letak yang konsisten, tautan
yang jelas, dan menu yang terstruktur dengan baik. Pengguna harus dapat dengan mudah
menemukan halaman dan fitur yang mereka cari.

17
Feedback yang Jelas: Memberikan umpan balik yang jelas kepada pengguna saat mereka
berinteraksi dengan sistem adalah prinsip penting. Saat pengguna melakukan tindakan
tertentu, seperti mengklik tombol atau mengisi formulir, sistem harus memberikan tanggapan
visual atau audio yang sesuai.

Adaptasi Konteks: Prinsip terakhir adalah adaptasi konteks. Antarmuka harus dapat
beradaptasi dengan konteks penggunaan. Misalnya, pada perangkat seluler, antarmuka harus
responsif terhadap ukuran layar yang berbeda. Prinsip ini membantu memastikan bahwa
penggunaan sistem tetap nyaman dan efektif di berbagai situasi.

Studi Kasus:

Sebuah contoh nyata penerapan prinsip-prinsip ini adalah antarmuka aplikasi mobile banking.
Kejelasan dalam menampilkan saldo dan riwayat transaksi, konsistensi dalam tata letak tombol
dan ikon, serta kemudahan navigasi antara rekening dan layanan merupakan elemen-elemen
penting untuk menciptakan pengalaman yang positif.

Penutup:

Pemahaman tentang prinsip-prinsip dasar desain antarmuka yang efektif adalah langkah
penting dalam membentuk keahlian dalam UI/UX Design. Dalam bagian berikutnya, kita akan
melanjutkan dengan pembahasan tentang pendekatan desain berpusat pada pengguna (User-
Centered Design) dalam konteks sistem informasi.

Bagian 2.2: Pemahaman tentang User-Centered Design (Desain Berpusat pada

Pengguna)

Pengantar:

Dalam bagian ini, kita akan menjelaskan konsep User-Centered Design (UCD) atau desain
berpusat pada pengguna. UCD adalah pendekatan dalam desain yang menempatkan pengguna
sebagai fokus utama dalam setiap tahap pengembangan. Memahami konsep ini penting dalam
memastikan bahwa antarmuka dan pengalaman pengguna yang dihasilkan benar-benar
relevan dan efektif.

Definisi User-Centered Design:

User-Centered Design (UCD) adalah pendekatan dalam desain yang menekankan

pengumpulan wawasan dan umpan balik pengguna secara berkesinambungan. Proses ini
mengintegrasikan pengguna dalam semua tahap pengembangan, mulai dari pemahaman
kebutuhan hingga evaluasi hasil akhir.

Tahapan dalam User-Centered Design:

18
 1. Pemahaman Pengguna dan Kebutuhan: Proses dimulai dengan mendengarkan dan
memahami pengguna serta tujuan mereka. Melalui wawancara, survei, atau observasi,
tim desain mengumpulkan wawasan tentang kebutuhan, preferensi, dan tantangan
pengguna.
2. Pendefinisian Permasalahan: Berdasarkan wawasan yang diperoleh, tim desain
mendefinisikan permasalahan yang akan dipecahkan. Tujuan ini membantu dalam
menetapkan fokus desain dan menghindari solusi yang tidak relevan.
3. Ideasi dan Desain Awal: Pada tahap ini, tim desain menghasilkan berbagai konsep
desain yang mungkin. Mereka merancang sketsa awal, wireframe, atau prototipe kasar
untuk menggambarkan potensi solusi.
4. Prototyping dan Pengujian: Prototipe interaktif dibangun berdasarkan konsep desain
awal. Pengujian dilakukan dengan pengguna potensial untuk mengukur seberapa baik
solusi ini memecahkan permasalahan mereka dan bagaimana mereka berinteraksi
dengannya.
5. Iterasi dan Peningkatan: Berdasarkan hasil pengujian, desain diperbaiki dan
ditingkatkan. Iterasi ini dilakukan berulang kali untuk memastikan bahwa antarmuka
dan pengalaman pengguna semakin baik seiring waktu.
6. Pengembangan dan Implementasi: Setelah desain dinyatakan sesuai dengan
kebutuhan pengguna, tahap pengembangan dan implementasi dimulai. Desain akhir
diintegrasikan ke dalam sistem informasi yang sebenarnya.

Keuntungan User-Centered Design:

1. Relevansi dengan Kebutuhan Pengguna: UCD memastikan bahwa desain antarmuka

dan pengalaman pengguna benar-benar relevan dengan kebutuhan pengguna,
mengurangi risiko pemborosan sumber daya pada fitur yang tidak diperlukan.
2. Peningkatan Kepuasan Pengguna: Dengan melibatkan pengguna dalam proses desain,
kepuasan mereka meningkat karena mereka merasa didengar dan perlu.
3. Reduksi Kesalahan Desain: Pengujian berulang dan umpan balik pengguna membantu
mengurangi risiko kesalahan desain yang mahal dan merugikan.
4. Peningkatan Adopsi Sistem: Dengan desain yang sesuai dengan preferensi dan
kebutuhan pengguna, adopsi sistem oleh pengguna menjadi lebih lancar.

Studi Kasus:

Contoh studi kasus UCD adalah perusahaan streaming musik yang mewawancarai dan
mengamati pengguna untuk memahami bagaimana mereka berinteraksi dengan layanan
mereka. Hasilnya digunakan untuk merancang ulang antarmuka dan meningkatkan fitur
berdasarkan wawasan pengguna.

Penutup:

User-Centered Design (UCD) adalah pendekatan yang sangat penting dalam menghasilkan
desain antarmuka dan pengalaman pengguna yang efektif. Dalam bagian selanjutnya, kita akan
menjelajahi konsep-konsep lain dalam UI/UX Design yang berkaitan dengan pola desain dan
standar UI/UX.

19
Selain Human Centered Design, ada juga yang popular lainnya yaitu Design Thinking

Design Thinking dalam Proses UI/UX Design

Pengantar:

Design Thinking adalah pendekatan kreatif dan kolaboratif dalam memecahkan masalah
kompleks dengan fokus pada kebutuhan pengguna. Dalam UI/UX Design, Design Thinking
digunakan untuk mengembangkan solusi yang berorientasi pada pengguna, inovatif, dan
efektif. Dalam bagian ini, kita akan membahas secara rinci tentang konsep Design Thinking
dalam konteks UI/UX Design.

Empati:

Pertama-tama, dalam tahap "Empati", tim desain berusaha untuk memahami pengguna
dengan lebih mendalam. Ini melibatkan wawancara, observasi, dan interaksi langsung dengan
pengguna. Dengan menggali kebutuhan, tantangan, dan preferensi pengguna, tim dapat
mengidentifikasi peluang untuk menciptakan pengalaman yang lebih baik.

Definisi Masalah:

Setelah memahami pengguna, tahap "Definisi Masalah" melibatkan merumuskan secara jelas
masalah yang harus dipecahkan. Tim desain menguraikan masalah menjadi pernyataan yang
lebih spesifik, yang membantu mengarahkan proses desain ke arah yang benar.

Ideasi:

Tahap "Ideasi" melibatkan pembuatan banyak ide potensial untuk memecahkan masalah yang
ditemukan. Anggota tim secara bebas mengemukakan gagasan, tanpa menghakimi atau
membatasi kreativitas. Ini dapat melibatkan brainstorming, sketsa cepat, atau metode lain
untuk merangsang imajinasi.

Prototyping:

20
Dalam tahap "Prototyping", tim mengambil beberapa ide yang paling menjanjikan dan
mengubahnya menjadi prototipe. Prototipe ini bisa berupa model visual, wireframe interaktif,
atau bahkan model fisik tergantung pada konteks proyek. Tujuannya adalah untuk menguji
konsep-konsep ini dengan pengguna untuk mendapatkan umpan balik awal.

Pengujian:

Setelah memiliki prototipe, tim memasuki tahap "Pengujian" di mana mereka menghadapkan
pengguna potensial terhadap prototipe tersebut. Melalui pengujian ini, tim dapat mengukur
bagaimana pengguna berinteraksi dengan prototipe, menemukan potensi masalah, dan
mengidentifikasi perbaikan yang dapat dilakukan.

Iterasi:

Tahap "Iterasi" melibatkan penggunaan umpan balik dari pengujian untuk memperbaiki dan
meningkatkan prototipe. Ini mungkin melibatkan perubahan desain, penyesuaian fitur, atau
perubahan pendekatan keseluruhan. Iterasi ini berlanjut sampai tim merasa mereka telah
mencapai solusi yang sesuai dengan kebutuhan dan harapan pengguna.

Implementasi:

Setelah beberapa iterasi, tahap "Implementasi" dimulai. Solusi yang dihasilkan dari proses
Design Thinking diintegrasikan ke dalam sistem informasi yang sebenarnya. Pengembangan
dilakukan dengan mempertimbangkan pengalaman pengguna yang telah dirancang.

Keuntungan Design Thinking dalam UI/UX Design:

1. Fokus pada Pengguna: Design Thinking memastikan bahwa pengguna berada di pusat
perhatian, sehingga solusi yang dihasilkan lebih relevan dan berorientasi pada
kebutuhan pengguna.
2. Inovasi: Pendekatan yang terbuka terhadap eksplorasi ide baru dan pemecahan
masalah kreatif membantu menghasilkan solusi inovatif yang mungkin tidak
terpikirkan sebelumnya.
3. Reduksi Risiko: Dengan melibatkan pengguna dalam setiap tahap, risiko kesalahan
desain yang mahal dapat dikurangi, karena perbaikan dilakukan sejak awal.
4. Kolaborasi Tim: Design Thinking mendorong kolaborasi tim lintas disiplin, membantu
melibatkan pandangan yang beragam dan pengetahuan dalam proses desain.

Penutup:

Design Thinking adalah alat penting dalam UI/UX Design yang memastikan solusi yang
dihasilkan relevan, inovatif, dan sesuai dengan kebutuhan pengguna. Dalam bab selanjutnya,
kita akan menjelajahi lebih dalam tentang pembuatan sketsa awal (wireframe) dan desain
visual dalam proses UI/UX Design.

21
Bagian 2.3: Mengenal Pola Desain dan Standar UI/UX

Pengantar:

Dalam bagian ini, kita akan menjelaskan tentang pentingnya mengenal pola desain dan standar
UI/UX dalam pengembangan sistem informasi. Pola desain adalah solusi yang telah terbukti
efektif dalam berbagai situasi, sementara standar UI/UX adalah panduan yang membantu
memastikan konsistensi antarmuka dan pengalaman pengguna.

Pola Desain (Design Patterns):

Pola desain adalah solusi berulang yang telah terbukti efektif dalam merancang antarmuka dan
mengatasi masalah umum dalam desain. Misalnya, "Tombol Aksi Utama" yang menonjol
adalah pola desain yang umum digunakan untuk menarik perhatian pengguna terhadap
tindakan penting.

Keuntungan Pola Desain:

1. Efisiensi Desain: Menggunakan pola desain mempercepat proses desain karena Anda
tidak perlu menciptakan solusi dari awal setiap kali.
2. Konsistensi Antar Muka: Pola desain membantu menciptakan konsistensi visual dan
fungsional di seluruh sistem.
3. Pengenalan Pengguna: Pengguna familiar dengan pola desain umum lebih mudah
memahami cara berinteraksi dengan antarmuka.

Standar UI/UX (Design Guidelines):

Standar UI/UX adalah panduan yang menjelaskan bagaimana desain antarmuka harus diatur
agar konsisten dan sesuai dengan prinsip-prinsip desain yang efektif. Misalnya, standar
mungkin mencakup ukuran tombol, tata letak halaman, dan palet warna yang harus digunakan.

22
Keuntungan Standar UI/UX:

1. Konsistensi Antar Halaman: Standar membantu menciptakan konsistensi antara

berbagai halaman dalam sistem.
2. Meminimalkan Kesalahan Desain: Dengan mengikuti standar, risiko kesalahan desain
yang signifikan dapat dikurangi.
3. Pemeliharaan yang Mudah: Perubahan dan pembaruan dalam antarmuka lebih mudah
dilakukan ketika ada panduan yang jelas.

Penerapan Pola Desain dan Standar UI/UX:

Dalam pengembangan UI/UX, penerapan pola desain dan standar UI/UX melibatkan:

1. Penelitian Pola Desain: Mengetahui pola desain umum yang relevan dengan jenis
sistem yang sedang dibangun.
2. Adaptasi Pola: Mengadaptasi pola desain untuk sesuai dengan kebutuhan unik sistem
dan pengguna.
3. Pembuatan Standar UI/UX: Membuat panduan yang mencakup tata letak, warna,
tipografi, dan elemen antarmuka lainnya.
4. Pelatihan Tim: Mengedukasi tim desain dan pengembangan tentang pola desain dan
standar yang harus diikuti.

Studi Kasus:

Contoh implementasi yang baik adalah Material Design dari Google. Ini adalah panduan desain
komprehensif yang mencakup prinsip-prinsip desain, pola desain, dan standar UI/UX yang
diterapkan di berbagai produk Google.

Penutup:

Mengenal pola desain dan standar UI/UX merupakan bagian penting dari desain antarmuka
yang sukses. Dalam bab berikutnya, kita akan melangkah lebih jauh dengan menjelajahi
tahapan analisis kebutuhan pengguna dan pembuatan sketsa awal (wireframe).

23
 Bab 3: Tahapan Desain UI/UX dengan Figma
Bagian 3.1: Analisis Kebutuhan Pengguna dan Tujuan Desain

Pengantar:

Dalam bagian ini, kita akan membahas pentingnya analisis kebutuhan pengguna dan tujuan
desain dalam pengembangan UI/UX. Analisis ini membantu tim desain memahami dengan
lebih mendalam siapa pengguna akhir sistem dan apa yang mereka butuhkan, yang akan
membentuk dasar untuk merancang pengalaman pengguna yang efektif.

Pengumpulan Informasi Kebutuhan Pengguna:

Pada tahap ini, tim desain mengumpulkan data dan informasi yang diperlukan untuk
memahami kebutuhan pengguna. Ini melibatkan wawancara dengan pengguna potensial,
observasi, dan analisis data yang ada.

Segmentasi Pengguna:

Dalam analisis ini, pengguna dibagi menjadi segmen berdasarkan karakteristik, tujuan, atau
preferensi yang berbeda. Ini membantu tim desain memahami perbedaan dalam kebutuhan
dan ekspektasi antara kelompok pengguna yang berbeda.

Definisi Personas:

Personas adalah gambaran fiksi tentang pengguna yang mewakili segmen tertentu. Setiap
persona memiliki nama, gambar, karakteristik, dan tujuan yang spesifik. Personas membantu
tim desain dalam memahami dan memvisualisasikan siapa yang mereka rancang untuk.

User Stories:

24
User stories adalah pernyataan singkat yang mendeskripsikan tindakan atau kebutuhan
pengguna dalam sistem. Misalnya, "Sebagai pengguna, saya ingin dapat mengubah kata sandi
saya dengan mudah."

Tujuan Desain:

Dalam tahap ini, tim desain menetapkan tujuan desain yang ingin dicapai dengan sistem.
Tujuan ini harus berfokus pada kepuasan pengguna, efisiensi, dan kesesuaian dengan konteks
penggunaan.

Penentuan Ruang Lingkup:

Berdasarkan analisis kebutuhan dan tujuan desain, tim desain menentukan ruang lingkup
proyek. Ini menghindari pemborosan sumber daya pada fitur yang tidak penting.

Pemodelan User Journey:

User journey adalah representasi visual tentang bagaimana pengguna akan berinteraksi
dengan sistem dari awal hingga akhir. Ini membantu mengidentifikasi titik-titik kunci dalam
pengalaman pengguna dan potensi masalah yang dapat terjadi.

Studi Kasus:

Misalnya, dalam pengembangan aplikasi e-commerce, analisis kebutuhan dapat melibatkan

wawancara dengan calon pembeli untuk memahami preferensi mereka dalam mencari produk,
melakukan pembelian, dan mendapatkan dukungan.

Penutup:

Analisis kebutuhan pengguna dan tujuan desain adalah langkah awal yang penting dalam
merancang pengalaman pengguna yang efektif. Dalam bab selanjutnya, kita akan menjelajahi
pembuatan sketsa awal (wireframe) untuk merancang tata letak antarmuka.

25
Bagian 3.2: Pembuatan Sketsa Awal (Wireframe) untuk Tata Letak Antarmuka

Pengantar:

Dalam bagian ini, kita akan membahas langkah-langkah dalam pembuatan sketsa awal atau
wireframe untuk merancang tata letak antarmuka. Wireframe adalah representasi visual
sederhana yang menggambarkan struktur dan tata letak elemen-elemen antarmuka tanpa
memperhatikan desain visual yang mendalam.

Pemahaman Konsep Wireframe:

Wireframe adalah kerangka awal dari antarmuka yang menampilkan posisi dan hierarki
elemen-elemen seperti teks, gambar, dan tombol. Ini membantu tim desain dan
pengembangan untuk merancang struktur tanpa terlalu terikat pada detail visual.

Definisikan Tata Letak Halaman:

Tim desain harus memutuskan tata letak umum untuk setiap halaman dalam sistem. Ini
mencakup posisi header, konten utama, sidebar, dan footer. Definisi ini membantu dalam
menyusun wireframe.

Penempatan Elemen:

Dalam wireframe, elemen-elemen seperti teks, gambar, tombol, dan formulir ditempatkan
sesuai dengan tata letak halaman yang telah ditentukan. Perhatian diberikan pada hierarki
visual dan kemudahan navigasi.

Fokus pada Fungsionalitas:

Wireframe fokus pada fungsionalitas daripada desain visual. Tujuannya adalah untuk
memastikan bahwa elemen-elemen penting dan interaksi antarmuka sudah diatur dengan baik
sebelum masuk ke tahap desain visual yang lebih mendalam.

Simulasi Interaksi Sederhana:

Dalam beberapa kasus, elemen-elemen pada wireframe dapat disimulasikan dengan interaksi
sederhana. Misalnya, menunjukkan bagaimana tautan akan berperilaku saat diklik.

Iterasi dan Pengujian:

26
Setelah pembuatan wireframe awal, tahap iterasi dan pengujian dilakukan. Wireframe
disajikan kepada pengguna atau pemangku kepentingan untuk mendapatkan umpan balik
awal. Ini membantu mengidentifikasi masalah dan perbaikan yang diperlukan.

Studi Kasus:

Misalnya, dalam pengembangan aplikasi perjalanan, wireframe dapat menggambarkan tata

letak halaman pemesanan tiket dengan jelas menunjukkan posisi elemen-elemen seperti
tanggal, tujuan, dan tombol pemesanan.

Keuntungan Wireframe:

1. Fokus pada Fungsionalitas: Wireframe memungkinkan fokus pada struktur dan fungsi
antarmuka tanpa terganggu oleh desain visual yang rumit.
2. Kolaborasi Tim: Wireframe membantu anggota tim berkomunikasi dan berkolaborasi
tentang tata letak dan elemen-elemen yang diperlukan.
3. Umpan Balik Awal: Pengujian wireframe awal dengan pengguna membantu
mengidentifikasi masalah lebih awal dalam proses desain.

Penutup:

Pembuatan wireframe adalah langkah penting dalam merancang antarmuka yang efektif.
Dalam bab selanjutnya, kita akan menjelajahi tahap desain visual untuk menghias tampilan
antarmuka dengan estetika yang menarik.

Bagian 3.3: Desain Visual Antarmuka

Pengantar:

Dalam bagian ini, kita akan membahas langkah-langkah dalam proses desain visual antarmuka.
Desain visual mengubah wireframe yang telah dibuat sebelumnya menjadi tampilan yang
estetis dan menarik, dengan perhatian khusus pada elemen desain seperti warna, tipografi,
dan grafis.

Pemilihan Palet Warna:

Langkah pertama adalah memilih palet warna yang sesuai dengan branding dan tujuan desain.
Warna memiliki pengaruh besar terhadap suasana hati dan persepsi pengguna terhadap
antarmuka.

Pemilihan Tipografi:

Pemilihan jenis huruf atau tipografi yang tepat juga penting. Tipografi harus mudah dibaca dan
sesuai dengan karakter sistem yang diinginkan (misalnya, formal atau santai).

Desain Logo dan Grafis:

27
Jika sistem memiliki logo atau grafis khusus, tahap ini melibatkan desain atau penyempurnaan
elemen-elemen tersebut untuk menyatu dengan tampilan antarmuka.

Perancangan Tombol dan Elemen Interaktif:

Desain tombol dan elemen-elemen interaktif lainnya perlu mempertimbangkan aspek visual
seperti efek bayangan, animasi saat diarahkan, dan perubahan tampilan saat diklik.

Tata Letak Halaman yang Menarik:

Desain visual menggabungkan tata letak halaman yang telah ditetapkan sebelumnya dengan
elemen desain visual. Tujuannya adalah untuk menciptakan antarmuka yang menarik, tetapi
tetap mempertahankan konsistensi dan kemudahan navigasi.

Penerapan Prinsip Desain:

Selama proses desain visual, prinsip-prinsip desain seperti kesederhanaan, konsistensi, dan
hierarki visual tetap harus dipegang erat. Ini membantu menjaga kualitas dan efektivitas
antarmuka.

Pengujian Visual:

Sebelum langkah implementasi, desain visual diuji dengan pengguna atau anggota tim yang
tidak terlibat dalam proses desain. Umpan balik awal membantu mengidentifikasi masalah
visual atau perubahan yang perlu dilakukan.

Iterasi dan Perbaikan:

Berdasarkan umpan balik, iterasi dan perbaikan terhadap desain visual dilakukan. Ini dapat
mencakup penyesuaian warna, ukuran, atau posisi elemen-elemen.

Studi Kasus:

Misalnya, dalam desain visual aplikasi media sosial, pemilihan warna yang cerah dan tampilan
yang bersih dapat menciptakan atmosfer positif dan mengundang pengguna untuk
berinteraksi.

Keuntungan Desain Visual yang Efektif:

1. Daya Tarik Visual: Desain visual yang menarik dapat membuat pengguna lebih tertarik
dan terlibat dalam antarmuka.
2. Pengenalan Branding: Desain visual yang konsisten dengan branding membantu
membangun pengenalan merek yang kuat.
3. Kepuasan Pengguna: Desain visual yang memperhatikan estetika membantu
meningkatkan kesan positif pengguna terhadap sistem.

Penutup:

28
Desain visual antarmuka merupakan langkah penting dalam menciptakan pengalaman
pengguna yang menarik dan efektif. Dalam bagian selanjutnya, kita akan membahas
pentingnya uji coba (user testing) dalam memvalidasi desain antarmuka.

Bagian 3.4: Uji Coba (User Testing) dan Pengumpulan Umpan Balik

Pengantar:

Dalam bagian ini, kita akan menjelaskan pentingnya uji coba (user testing) dalam validasi
desain antarmuka dan bagaimana pengumpulan umpan balik dari pengguna dapat membantu
meningkatkan pengalaman pengguna secara keseluruhan.

Tujuan Uji Coba:

Uji coba adalah proses di mana pengguna sebenarnya menginteraksi dengan antarmuka yang
telah dirancang. Tujuan utama uji coba adalah untuk mengidentifikasi masalah, kesulitan, atau
potensi perbaikan dalam pengalaman pengguna.

Pemilihan Pengguna Uji:

Pengguna yang mewakili kelompok target sistem dipilih untuk mengikuti uji coba. Mereka
harus mewakili berbagai tingkat pengalaman dan karakteristik yang mungkin.

Pembuatan Tugas Uji:

Tugas-tugas spesifik diberikan kepada pengguna selama uji coba. Tugas ini dapat berkisar dari
tugas dasar seperti "Cari produk tertentu" hingga tugas yang lebih kompleks seperti
"Selesaikan proses pemesanan dengan metode pembayaran tertentu."

Observasi dan Pengumpulan Data:

Selama uji coba, anggota tim desain mengamati pengguna saat mereka menjalankan tugas-
tugas yang telah ditentukan. Data yang dikumpulkan meliputi reaksi pengguna, kesulitan yang
dihadapi, serta waktu yang dibutuhkan untuk menyelesaikan tugas.

Analisis Hasil:

Setelah uji coba selesai, hasilnya dianalisis. Masalah dan tantangan yang ditemui oleh
pengguna diidentifikasi. Data juga digunakan untuk mengukur keberhasilan desain dalam
mencapai tujuan yang ditetapkan.

Umpan Balik dari Pengguna:

29
Selain observasi, umpan balik langsung dari pengguna juga sangat berharga. Setelah uji coba,
pengguna diundang untuk memberikan komentar, saran, dan kesan pribadi mereka tentang
antarmuka.

Perbaikan dan Iterasi:

Berdasarkan hasil uji coba dan umpan balik pengguna, tim desain melakukan perbaikan dan
iterasi terhadap desain antarmuka. Solusi yang lebih baik dikembangkan untuk mengatasi
masalah yang diidentifikasi.

Studi Kasus:

Misalnya, dalam uji coba aplikasi e-learning, pengguna dapat menghadapi kesulitan saat
mencari materi tertentu. Ini dapat mengindikasikan masalah dalam tata letak navigasi atau
pencarian.

Keuntungan Uji Coba dan Umpan Balik:

1. Validasi Desain: Uji coba menguji desain antarmuka di dunia nyata, memvalidasi
apakah desain tersebut efektif dan intuitif bagi pengguna.
2. Identifikasi Masalah: Uji coba membantu mengidentifikasi masalah dan kesulitan yang
tidak terdeteksi selama proses desain.
3. Peningkatan Pengalaman Pengguna: Umpan balik dari pengguna memungkinkan
perbaikan yang sesuai untuk menciptakan pengalaman pengguna yang lebih baik.

Penutup:

Uji coba dan pengumpulan umpan balik dari pengguna merupakan tahap penting dalam
mengukur kualitas desain antarmuka dan mengidentifikasi area perbaikan. Dalam bagian
berikutnya, kita akan menjelaskan tentang tahap evaluasi akhir dan peluncuran sistem.

Bagian 3.5: Evaluasi Akhir dan Peluncuran Sistem

Pengantar:

Dalam bagian ini, kita akan menjelaskan tahap evaluasi akhir dan peluncuran sistem setelah
proses desain UI/UX selesai. Evaluasi akhir adalah langkah untuk memastikan bahwa
antarmuka telah berhasil mengatasi masalah dan mencapai tujuan yang telah ditetapkan
sebelumnya.

Pengujian Akhir (Final Testing):

30
Sebelum peluncuran, pengujian akhir dilakukan untuk memastikan bahwa semua aspek
antarmuka berfungsi dengan baik. Ini mencakup pengujian fungsionalitas, navigasi, dan
interaksi secara menyeluruh.

Verifikasi Desain:

Selama tahap ini, desain visual dan tata letak halaman dievaluasi kembali untuk memastikan
bahwa mereka sesuai dengan standar UI/UX yang telah ditetapkan.

Uji Kinerja:

Jika sistem melibatkan interaksi dengan server atau pemrosesan data yang signifikan, uji
kinerja juga dilakukan untuk memastikan bahwa sistem dapat menangani beban kerja yang
diharapkan.

Pemecahan Masalah Terakhir:

Jika masalah atau bug terdeteksi selama pengujian akhir, mereka diperbaiki sebelum
melanjutkan ke tahap peluncuran.

Peluncuran Sistem:

Setelah semua pengujian dan perbaikan selesai, sistem siap untuk diluncurkan. Ini melibatkan
penerapan antarmuka yang telah dirancang ke dalam lingkungan produksi yang sebenarnya.

Pemantauan Awal:

Setelah peluncuran, tim harus memantau kinerja antarmuka secara aktif. Ini memungkinkan
mereka untuk mendeteksi masalah segera dan meresponsnya dengan cepat.

Evaluasi Akhir:

Beberapa waktu setelah peluncuran, tahap evaluasi akhir dilakukan. Pengguna dan pemangku
kepentingan diundang untuk memberikan umpan balik lebih lanjut tentang pengalaman
mereka dalam menggunakan antarmuka.

Perbaikan Pasca-Peluncuran:

Berdasarkan umpan balik evaluasi akhir, perbaikan lebih lanjut dapat dilakukan untuk
memastikan bahwa pengalaman pengguna terus meningkat.

Studi Kasus:

31
Misalnya, dalam peluncuran aplikasi pemesanan makanan, pengguna mungkin menghadapi
kesulitan saat memasukkan alamat pengiriman. Ini dapat mengarah pada perbaikan pada tata
letak formulir alamat.

Keuntungan Evaluasi Akhir dan Peluncuran:

1. Pengujian Intensif: Pengujian akhir memastikan bahwa sistem telah diuji secara
menyeluruh sebelum peluncuran.
2. Penghindaran Masalah: Evaluasi akhir membantu mengidentifikasi dan memperbaiki
masalah sebelum pengguna akhir mengalaminya.
3. Penyesuaian Lanjutan: Evaluasi pasca-peluncuran memungkinkan perbaikan lebih
lanjut untuk menjaga pengalaman pengguna yang optimal.

Penutup:

Tahap evaluasi akhir dan peluncuran adalah langkah penting dalam menyelesaikan proses
desain UI/UX dan memastikan bahwa antarmuka siap untuk digunakan oleh pengguna akhir.
Dengan demikian, siklus pengembangan UI/UX selesai dan sistem siap untuk memberikan
pengalaman pengguna yang efektif.

Bagian 4.3: Pelatihan dan Pendampingan Pengguna

Pengantar:

Dalam bagian ini, kita akan membahas tentang pentingnya pelatihan dan pendampingan
pengguna setelah peluncuran sistem. Meskipun desain antarmuka mungkin intuitif,
memberikan panduan kepada pengguna akhir tentang cara menggunakan sistem dapat
meningkatkan adopsi dan pengalaman mereka.

Perencanaan Pelatihan:

Tim harus merencanakan pelatihan yang efektif untuk memastikan bahwa pengguna akhir
memahami cara menggunakan antarmuka dengan benar. Ini bisa melibatkan sesi pelatihan
daring atau tatap muka, tergantung pada kompleksitas sistem.

Materi Pelatihan:

Materi pelatihan harus mencakup tutorial, panduan langkah demi langkah, dan sumber daya
lain yang membantu pengguna mengerti fungsionalitas sistem.

Pelatihan Pengguna Akhir:

Pada tahap ini, pengguna akhir diberikan pelatihan tentang berbagai aspek sistem, termasuk
cara melakukan tugas-tugas penting dan berinteraksi dengan antarmuka.

32
Pendampingan Awal:

Setelah pelatihan, tim dapat menyediakan pendampingan awal untuk membantu pengguna
saat mereka mulai menggunakan sistem secara mandiri. Ini membantu mereka merasa lebih
nyaman dan mengatasi masalah awal.

Pendampingan Lanjutan:

Selama beberapa minggu setelah peluncuran, tim dapat tetap tersedia untuk memberikan
dukungan tambahan. Ini bisa melalui email, forum dukungan, atau layanan pelanggan.

Studi Kasus:

Misalnya, dalam peluncuran sistem manajemen tugas, pelatihan dapat mencakup cara
membuat dan mengelola tugas, mengatur tenggat waktu, dan berkolaborasi dengan anggota
tim.

Keuntungan Pelatihan dan Pendampingan:

1. Peningkatan Adopsi: Pelatihan membantu pengguna merasa lebih percaya diri dalam
menggunakan sistem, meningkatkan adopsi.
2. Pengurangan Ketidakpastian: Dengan dukungan awal dan pendampingan, pengguna
merasa lebih nyaman menjelajahi sistem dan mengatasi hambatan awal.
3. Meningkatkan Penggunaan Efektif: Pelatihan membantu pengguna memahami
fungsionalitas sistem dan menggunakan fitur-fitur dengan lebih efektif.

Penutup:

Pelatihan dan pendampingan pengguna merupakan langkah penting untuk memastikan bahwa
pengguna akhir dapat menggunakan sistem dengan percaya diri dan efektif. Dengan demikian,
proses pengembangan UI/UX lengkap dengan memberikan pengguna alat yang mereka
butuhkan untuk berinteraksi dengan sistem secara efektif.

33
 Sign in Get started

Insight GENERAL BISNIS INTERVIEWS DESIGN TUTORIAL TIPS RENUNGAN

Insight
UI, UX, Bisnis Design
Tutorial design menggunakan Figma
Follow Dwinawan Follow
Jul 30, 2019 · 7 min read

567

Pada tutorial kali ini kita akan menggunakan Figma sebagai design tool.

Apa itu Figma?

Figma adalah salah satu design tool dan keunggulan dari Figma adalah web
based. Sehingga jika kamu pengguna windows, linux ataupun mac, kamu
bisa menggunakan design tool ini.

. . .

Untuk menggunakan tool ini, Kamu cukup membuka [Link]

. . .

Lalu melakukan registrasi

. . .

Dan kamu siap untuk menggunakan nya

. . .

Mari kita membuat UI untuk mobile app seperti design dibawah ini

. . .

Kita mulai dengan membuat Frame terlebih dahulu. Klik icon frame di
pojok kiri atas

. . .

Lalu pilih iPhone 8 (375 x 667) untuk frame nya

. . .

Tampilan nya sudah seperti dibawah ini?

. . .

Setelah itu, masukkan tulisan dengan memencet icon Teks di sebelah kiri
atas. Lalu klik di sembarang tempat pada frame nya.

. . .

Kita buat tulisan “Discover” sebagai title. Untuk informasi nama font,
ukuran, dan warna nya sudah ada di sebelah kanan ya.

. . .

Setelah itu tempatkan tulisan “based on your streaming activity” sebagai

description. Untuk informasi nama font, ukuran, dan warna nya sudah ada
di sebelah kanan ya.

. . .

Setelah itu kita buat kotak dengan menekan icon kotak diatas

. . .

Lalu tempatkan di frame

. . .

Setelah itu kita ubah sudut kotak menjadi melengkung, dengan mengubah
border-radius nya menjadi 8

. . .

Sehingga tampilan nya menjadi seperti ini

. . .

Setelah itu kita masukan gambar. Situs favorit saya adalah [Link].

Memasukkan gambar cukup mudah:

1. Hanya dengan meng-klik kanan pada gambar

2. Lalu pilih copy image

3. Setelah itu paste pada frame dengan menekan command+V (pada Mac)
atau ctrl + V (pada windows)

. . .

Agar gambar bisa masuk ke dalam kotak, kita masking kotakan nya dengan
cara:

1. mengklik kanan kotakan nya

2. Lalu pilih “Use as Mask”

. . .

Sehingga tampilan nya menjadi seperti ini

. . .

Setelah itu posisikan gambar agar aduhai

. . .

Setelah itu kita tempatkan teks “Health is the best Investment” sebagai
judul di card tersebut. Untuk informasi nama font, ukuran, dan warna nya
sudah ada di sebelah kanan ya

. . .

Setelah itu kita masukan lingkaran dengan menekan icon pada pojok kiri
atas seperti berikut

. . .

Lalu tempatkan di atas card. Ingat, saat menggambar lingkaran nya, selalu
tekan tombol Shift agar lingkaran nya bulat sempurna. Untuk informasi
lebar dan tinggi lingkaran, warna lingkaran dan lain nya ada di sebelah
kanan ya.

. . .

Setelah itu kita masukan segitiga, dengan menekan tombol seperti berikut

. . .

Lalu tempatkan di atas lingkaran

. . .

Agar segitiga bisa menjadi tombol play, lakukan langkah berikut:

Perkecil segitiga nya

Beri warna putih dengan mengubah Fill nya

Putar segitiga 150 derajat ke arah kanan

Ubah sudut segitiga agar tumpul dengan mengganti corner radius nya

Semua settingan bisa kamu lihat di sebelah kanan

. . .

Setelah itu kita buat lingkaran untuk tempat avatar

. . .

Setelah itu cari gambar untuk avatar, lalu paste

. . .

Gunakan teknik “Use as mask” untuk memasukkan gambar avatar ke dalam

lingkaran

. . .

Mari kita ke bagian layer dulu. Berikut adalah layer layer yang kita punya.
Mari rapikan terlebih dahulu.

. . .

Untuk avatar, jadikan satu folder, agar layer diatas nya tidak ikut masuk ke
dalam lingkaran. Select Lingkaran dan Foto nya seperti dibawah ini

. . .

Klik kanan — lalu pilih Group Selection

. . .

Sehingga akan tampak seperti dibawah ini

. . .

Mari kita lanjutkan mendesain nya. Kini tambahkan teks “by Samantha” di
samping avatar. Untuk informasi nama font, ukuran, dan warna nya sudah
ada di sebelah kanan ya

. . .

Setelah itu tambahkan garis, sebagai pemisah Judul Card dengan Avatar.
Cara nya klik menu seperti dibawah ini

. . .

Setelah itu gambar garis di frame. Pencet shift agar garis nya lurus. Tebal
garis bisa 0.5 agar tampak tipis

. . .

Sejauh ini, berikut yang kita punya

. . .

Mari kita rapikan dulu layer nya agar nyaman. Berikut adalah pengaturan
layer saya

. . .

Mari kita lanjut mendesain. Kita tambahkan teks “Popular” di bawah card.
Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah
kanan ya.

. . .

Setelah itu kita tambahkan kotakan di bawah nya. Spesifikasi nya bisa
dilihat di kanan ya

. . .

Setelah itu tambahkan teks “How music can boost my mood” di samping
card. Untuk informasi nama font, ukuran, dan warna nya sudah ada di
sebelah kanan ya.

. . .

Setelah itu tambahkan teks “Angela Smith” di bawah nya. Untuk informasi
nama font, ukuran, dan warna nya sudah ada di sebelah kanan ya.

. . .

Setelah itu cari foto yang clean dan colorful, untuk mengisi kotak nya

. . .

Ulangi langkah diatas untuk membuat konten dibawah nya

. . .

Lalu tambahkan garis sebagai pemisah. Spesifikasi garis nya ada di sebelah
kanan ya.

. . .

Sejauh ini kita telah memiliki design seperti berikut

. . .

Mari kita lanjutkan untuk mendesign menu di sebelah kanan atas. Pertama
gambar garis (Line). Untuk spesifikasi nya ada di sebelah kanan ya

. . .

Setelah itu gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan
ya

. . .

Setelah itu, gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan
ya

. . .

Setelah itu, gambar lingkaran merah untuk tanda notifikasi. Spesifikasi nya
ada di sebelah kanan ya

. . .

Ulangi langkah-langkah diatas hingga menjadi design seperti dibawah ini

. . .

Semoga bermanfaat :)

Tutorial

567 claps

WRITTEN BY

Dwinawan Follow

Co-Founder Paperpillar • UI Designer • Love to create design

exploration on [Link]/dwinawan • Have a question? nd
me on [Link]/dwinawan_

Insight Follow

UI, UX, Bisnis Design

See responses (5)

More From Medium

Related reads Related reads Related reads

UI Case Study: App Design & The garden of life: a UX/UI story Public Speaking for Introverts
Development — Bike Locker Victor Criado in UX Collective Matt Eland in The Startup
Sep 6, 2018 · 9 min read 113 Sep 9, 2019 · 5 min read 82
Phoebe Chou
May 23, 2019 · 7 min read 204

Discover Medium Make Medium yours Become a member

Welcome to a place where words matter. On Medium, smart Follow all the topics you care about, and we’ll deliver the Get unlimited access to the best stories on Medium — and
voices and original ideas take center stage - with no ads in best stories for you to your homepage and inbox. Explore support writers while you’re at it. Just $5/month. Upgrade
sight. Watch

About Help Legal

BAB 5. Pengukuran Efektifitas UI UX Desain dengan Metode UEQ
dan SUS

Pengantar:

Dalam materi ini, kita akan menjelaskan dua metode populer yang digunakan untuk mengukur
efektivitas User Interface (UI) dan User Experience (UX), yaitu metode User Experience
Questionnaire (UEQ) dan System Usability Scale (SUS). Kedua metode ini membantu dalam
mengumpulkan data kuantitatif tentang bagaimana pengguna merasakan antarmuka dan
pengalaman pengguna.

Bagian 1: User Experience Questionnaire (UEQ)

Pendahuluan tentang UEQ:

Penjelasan tentang apa itu UEQ dan tujuannya dalam mengukur pengalaman pengguna.

Pemaparan mengapa pengukuran kuantitatif penting untuk memahami pengalaman pengguna

secara objektif.

Komponen UEQ:

Penjelasan tentang dimensi atau komponen yang diukur oleh UEQ, seperti perspektif hedonik
(rasa senang) dan perspektif pragmatis (efisiensi).

Penggunaan Skala UEQ:

Penjelasan tentang skala Likert yang digunakan dalam UEQ untuk mengukur setiap dimensi.

Contoh pertanyaan atau pernyataan yang terkait dengan setiap dimensi.

Proses Pengumpulan Data:

Langkah-langkah yang harus diikuti untuk mengumpulkan data UEQ dari pengguna.

Bagaimana mengelola data dan menganalisis hasilnya.

Interpretasi Hasil:

Bagaimana menginterpretasi skor UEQ untuk mendapatkan wawasan tentang kekuatan dan
kelemahan antarmuka.

Menghubungkan hasil dengan perbaikan desain yang mungkin.

35
Bagian 2: System Usability Scale (SUS)

Pendahuluan tentang SUS:

Penjelasan tentang apa itu SUS dan bagaimana ini menjadi metode standar dalam mengukur
kegunaan sistem.

Struktur Skala SUS:

Penjelasan tentang skala Likert yang digunakan dalam SUS, yang mencakup pernyataan positif
dan negatif.

Penggunaan Skala SUS:

Contoh pernyataan dalam skala SUS dan bagaimana pengguna diminta untuk menilai setiap
pernyataan.

Perhitungan Skor SUS:

Bagaimana menghitung skor SUS berdasarkan respons pengguna terhadap pernyataan.

Interpretasi Hasil:

Mengartikan skor SUS dan cara mengukur tingkat kegunaan sistem.

Bagaimana menghubungkan skor dengan interpretasi kualitatif tentang pengalaman

pengguna.

Bagian 3: Penerapan dalam Praktik

Memilih Metode yang Tepat:

Kapan sebaiknya menggunakan UEQ dan kapan sebaiknya menggunakan SUS dalam proyek
pengembangan UI/UX.

Proses Pengukuran:

Langkah-langkah praktis dalam mengumpulkan data menggunakan UEQ atau SUS.

Pengolahan data dan pelaporan hasil.

Peningkatan Desain Berdasarkan Hasil:

36
Bagaimana hasil UEQ atau SUS dapat membantu tim desain mengidentifikasi area perbaikan.

Proses iteratif dalam merancang pengalaman pengguna yang lebih baik.

Penutup:

Dengan memahami dan menerapkan metode UEQ dan SUS, tim desain dan pengembangan
dapat mengukur secara efektif efektivitas antarmuka dan pengalaman pengguna. Pengukuran
ini membantu dalam membuat keputusan yang didasarkan pada data dan meningkatkan
keseluruhan kualitas UI/UX.

Contoh Jurnal dengan Pengukuran UEQ dan SUS

37
Jurnal Infortech
Volume 5 No. 1 Juni 2023
E-ISSN: 2715-8160

Penerapan UI/UX dengan Metode Design Thinking

(Studi Kasus: Warung Makan)

Faruq Aziz1, Daniati Uki Eka Saputri2, Nurul Khasanah3, Taopik Hidayat4

e-mail: [Link]@[Link], [Link]@[Link], [Link]@[Link],

4
[Link]@[Link]
1,2,3,4
Universitas Nusa Mandiri

Diterima Direvisi Disetujui

29-01-2023 11-05-2023 31-05-2023

Abstrak - Pemesanan makanan di warung tradisional masih sering dilakukan secara manual, yang dapat
menyebabkan kesalahan dan menurunkan kepuasan terhadap pelanggan. Tren teknologi aplikasi dalam industri
F&B telah berkembang pesat dalam beberapa tahun terakhir. Oleh karena itu, penerapan teknologi aplikasi dengan
User Interface (UI) dan User Experience (UX) dalam pengembangan produk digital menjadi semakin penting.
Penelitian ini bertujuan untuk mengevaluasi dan meningkatkan pengalaman pengguna melalui penerapan metode
Design Thinking pada desain aplikasi pemesanan makanan di warung makan berbasis mobile sebagai fokus utama
dalam proses desain. Metode evaluasi dengan System Usability Scale (SUS) dan User Experience Questionnaire
(UEQ) digunakan untuk menguji kepuasan pengguna terhadap aplikasi yang dikembangkan dengan menggunakan
metode Design Thinking. Hasil penelitian menunjukkan bahwa aplikasi yang dikembangkan dengan kombinasi
metode Design Thinking dan pengujian menggunakan metode SUS dan UEQ mendapatkan tingkat kepuasan
pengguna yang tinggi. Penelitian ini memberikan rekomendasi untuk pengembangan aplikasi pemesanan makanan
guna meningkatkan kepuasan pengguna dan daya saing warung.

Kata Kunci: User Interface, User Experience, Aplikasi Mobile, Design Thinking

Absract - Ordering food at traditional stalls is still often done manually, which can cause errors and reduce
customer satisfaction. Application technology trends in the F&B industry have grown rapidly in recent years.
Therefore, the application of application technology with User Interface (UI) and User Experience (UX) in the
development of digital products is becoming increasingly important. This study aims to evaluate and improve user
experience through the application of the Design Thinking method to the design of food ordering applications in
mobile-based food stalls as the main focus in the design process. Evaluation methods using the System Usability
Scale (SUS) and User Experience Questionnaire (UEQ) are used to test user satisfaction with applications
developed using the Design Thinking method. The results showed that applications developed using a combination
of the Design Thinking method and testing using the SUS and UEQ methods achieved a high level of user
satisfaction. This study provides recommendations for the development of food ordering applications to increase
user satisfaction and stall competitiveness.

Keyword: User Interface, User Experience, Mobile Application, Design Thinking

PENDAHULUAN warung, sehingga dapat menurunkan tingkat

kepuasan pelanggan (Arifin et al., 2022).
Pada warung makan tradisional, seringkali Tren teknologi aplikasi dalam industri F&B
pemesanan makanan masih dilakukan secara manual telah berkembang pesat dalam beberapa tahun
dengan mencatat pesanan pelanggan ke dalam buku terakhir. Aplikasi pemesanan makanan dan minuman
atau nota secara manual (Hasyimy & Hidajat, 2021). seperti GoFood, GrabFood, dan Foodpanda telah
Hal ini dapat menyebabkan terjadinya kesalahan menjadi semakin populer dan banyak digunakan oleh
dalam pemesanan, seperti kesalahan dalam mencatat konsumen di Indonesia. Penggunaan aplikasi ini
pesanan, terlambatnya pengiriman pesanan, atau membantu dalam pengelolaan pesanan, penjadwalan
bahkan terjadinya duplikasi pesanan. Selain itu, pengiriman, dan pengembangan program loyalitas
proses pemesanan yang manual juga dapat pelanggan. Menurut survei yang dilakukan oleh
menyebabkan terjadinya antrian yang panjang di Nielsen pada tahun 2019, sekitar 44% konsumen di

[Link] 1
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

Indonesia menggunakan aplikasi pemesanan pelanggan dalam melakukan pemesanan, serta

makanan dan minuman, dan 78% di antaranya memenuhi kebutuhan warung dalam mengelola
membeli makanan secara online setidaknya satu kali pesanan. Metode Design Thinking dapat digunakan
dalam sebulan. Berdasarkan hasil riset Tenggara untuk menyelesaikan masalah ini, yaitu dengan
Strategics, mayoritas penduduk Indonesia memiliki mengidentifikasi kebutuhan pelanggan dan warung,
lebih dari 1 aplikasi untuk memesan makanan secara mengembangkan berbagai alternatif solusi, serta
online yaitu mencapai 72% penduduk Indonesia. melakukan uji coba terhadap solusi yang telah
sementara hanya sekitar 28% penduduk Indonesia dikembangkan.
yang memiliki 1 aplikasi untuk memesan makanan Angelina, dkk (Teknologi et al., 2023)
secara online (Annur, 2022) melakukan penelitian dengan judul “Desain UI UX
Selain itu, penggunaan aplikasi dalam dunia F&B Aplikasi Penjualan dengan Menyelaraskan
tidak hanya membantu pengelolaan pesanan dan Kebutuhan Bisnis menggunakan Pendekatan Design
penjadwalan pengiriman, tetapi juga dapat Thinking”. Metode penelitian yang digunakan adalah
meningkatkan efisiensi dan kualitas layanan. Sebuah Design Thinking. Hasil pengujian dapat disimpulkan
studi yang dilakukan oleh Universitas Hasanuddin bahwa desain sudah baik, selaras dengan kebutuhan
pada tahun 2019 menunjukkan bahwa penggunaan bisnis, serta dapat diterima oleh para calon pengguna.
aplikasi pemesanan makanan dapat meningkatkan Penelitian juga dilakukan oleh (Utan Sufandi et al.,
kepuasan pelanggan dan meningkatkan pendapatan 2020) dengan judul “Peluang Penelitian UI/UX pada
warung makan tradisional (Agustina Zakaria, 2021). Pengembangan Aplikasi Mobile: Systematic
Permasalahan yang sering dihadapi dalam desain literature review”. Penelitian ini menerapkan metode
aplikasi atau website adalah kurangnya kesesuaian Systematic Literature Review (SLR) untuk
antara kebutuhan pengguna dan desain yang memberikan tinjauan literatur secara sistematis
diterapkan (Hutagalung, 2020). Hal ini dapat mengenai studi yang telah dilakukan terhadap
mempengaruhi penggunaan aplikasi atau website aplikasi mobile dalam konteks UI/UX di UI/UX
tersebut oleh pengguna. Dalam industri F&B, hal ini aplikasi mobile. Feri, dkk (Fariyanto & Ulum, 2021)
menjadi sangat penting karena penggunaan aplikasi melakukan penelitian dengan judul “Perancangan
yang mudah dan intuitif dapat membantu pelanggan Aplikasi Pemilihan Kepala Desa Dengan Metode Ux
dalam memesan makanan dan minuman dengan Design Thinking (Studi Kasus: Kampung Kuripan)”.
mudah. Namun, meskipun penggunaan aplikasi telah Perancangan ini menggunakan metode Design
meningkat dalam industri F&B, masih ada beberapa Thinking, yang mencakup tahap Empathize, Define,
tantangan dalam penerapannya, terutama di daerah Ideate, Prototype dan Testing. Hasil pengujian
pedesaan atau pinggiran kota di mana akses terhadap kegunaan dengan perhitungan SUS diperoleh hasil
teknologi mungkin terbatas. Selain itu, ada juga 77.00, nilai ini berada pada tingkatan baik (grade B).
tantangan dalam hal keamanan data dan privasi Hasil pengujian UEQ untuk mendapatkan
pelanggan yang harus diatasi oleh pengembang pengalaman pengguna yaitu tingkat daya tarik yang
aplikasi (Prayoga et al., 2022). Kurangnya kesesuaian diperoleh adalah 1,967 pada tingkat yang luar biasa,
antara kebutuhan pengguna dan desain yang dan tingkat kejelasan adalah mencapai 2,075, yang
diterapkan juga merupakan masalah yang tidak bisa berada di atas level luar biasa, pada tingkat efisiensi
dianggap lumrah (Eugenia et al., 2022). Design 1,800 pada level yang baik, level ketepatan 1,975
thinking merupakan metode yang dapat digunakan berada pada level dan skala yang luar biasa, tingkat
untuk mengatasi masalah tersebut dengan cara stimulasi 2,000 dan tingkat keterkinian 1,250 di level
menempatkan kebutuhan dan empati pada pengguna yang luar biasa.
sebagai fokus utama dalam proses desain. Studi kasus Tujuan dari penelitian adalah untuk
yang digunakan adalah sebuah warung makan yang mengevaluasi dan meningkatkan pengalaman
ingin meningkatkan pengalaman pengguna melalui pengguna melalui penerapan metode design thinking
aplikasi atau website yang dirancang dengan baik pada desain aplikasi atau website warung makan.
(Lutfi & Sukoco, 2019). Penelitian ini bertujuan untuk mengetahui bagaimana
Untuk mengatasi masalah tersebut, cara menempatkan kebutuhan dan empati pada
diperlukan suatu aplikasi pemesanan makanan yang pengguna sebagai fokus utama dalam proses desain,
dapat membantu pelanggan untuk memesan makanan serta untuk mengetahui dampak dari penerapan
secara cepat dan tepat sesuai dengan keinginan metode ini terhadap peningkatan pengalaman
pelanggan (Shadiq & Ratu Lolly, 2020). Aplikasi pengguna. Untuk mengetahui seberapa baik hasil
tersebut juga dapat membantu warung untuk aplikasi dari metode tersebut, perlu dilakukan
mengelola pesanan dengan lebih efisien, sehingga pengujian. Dalam penelitian ini, metode System
dapat meningkatkan tingkat kepuasan pelanggan dan Usability Scale (SUS) dan User Experience
meningkatkan daya saing warung (Ayuningtyas, Questionnaire (UEQ) digunakan untuk menguji
2020). kepuasan pengguna terhadap aplikasi yang
Namun, dalam pembuatan aplikasi tersebut, dikembangkan dengan menggunakan metode Design
perlu dilakukan suatu desain yang tepat agar aplikasi Thinking.
tersebut dapat memberikan kemudahan bagi

[Link] 2
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

4. Prototype: Langkah ini melibatkan pembuatan

METODE PENELITIAN prototype dari ide-ide yang dibuat sebelumnya
untuk diuji coba dan diperbaiki. Langkah ini
dirancang sebuah low-fidelity yang
menggambarkan ide-ide dasar dari aplikasi yang
dirancang dan tidak memiliki detail yang lengkap,
hal tersebut digunakan untuk mengevaluasi dan
mengumpulkan umpan balik dari pengguna
sebelum melanjutkan ke tahap perancangan yang
lebih detail. Setelah dirancang low-fi kemudian
membuat desain high-fidelity yaitu prototipe yang
memiliki detail yang lengkap dan menampilkan
tampilan yang sesuai dengan produk akhir. desain
low-fi dan hi-fi dirancang menggunakan aplikasi
desain figma.
5. Test: Langkah ini melibatkan pengujian prototype
yang telah dibuat untuk mengetahui tingkat
kepuasan pengguna dan perbaikan yang perlu
dilakukan. Langkah pengujian dilakukan dengan
metode System Usability Scale (SUS) dan User
Sumber: (Pande & dkk, 2020) Experience Questionnaire (UEQ) yang
Gambar 1. Metode Penelitian melibatkan 80 responden dengan menyebarkan
questioner secara online.
Metode Design Thinking adalah sebuah
metode inovatif yang digunakan untuk merancang Melalui penerapan metode design thinking,
produk atau layanan yang sesuai dengan kebutuhan penelitian ini bertujuan untuk menciptakan sebuah
dan harapan pengguna (Aulia Putri Prasetyo et al., aplikasi pemesanan makanan yang memenuhi
2022). Dalam penelitian ini, metode design thinking kebutuhan dan harapan pengguna. Dengan demikian,
digunakan untuk merancang aplikasi pemesanan diharapkan dapat meningkatkan pengalaman
makanan yang sesuai dengan kebutuhan dan harapan pengguna serta kualitas aplikasi secara keseluruhan.
pengguna.
Langkah-langkah dalam metode design thinking HASIL DAN PEMBAHASAN
untuk merancang aplikasi pemesanan makanan Proses penelitian ini mengikuti langkah-
adalah sebagai berikut (Lim & Setiyawati, 2022) langkah proses Design Thinking dengan
seperti terlihat pada Gambar 1: menggunakan metode Design Thinking untuk
menghasilkan temuan dan hasil penelitian yang
1. Empathize: Langkah ini melibatkan pemahaman sesuai dengan prosedur kerja Design Thinking.
yang mendalam tentang masalah yang ada dalam 1. Proses Empathize
proses pemesanan makanan saat ini melalui Tahap pertama dari proses yang digunakan
observasi dan wawancara. Melakukan wawancara untuk mengerti kebutuhan dan harapan mitra serta
dan observasi dimaksudkan untuk mengetahui konsumen. Pada mitra warung makan Bi Unah,
warung tersebut memiliki 3 cabang di Bekasi Kota,
lebih lanjut tentang keluhan, kebutuhan dan
Karawang Kota, dan Subang. Rencananya akan
harapan mereka dalam proses pemesanan bertambah kembali di 2 kota yaitu Jakarta Timur
makanan. dan Cikarang Selatan. Bi Unah selaku mitra
2. Define: Langkah ini dilakukan untuk menyusun menemukan keresahan yaitu daftar menu yang
dan menyederhanakan informasi yang didapatkan terdapat pada katalog setiap cabang memiliki
dari tahap sebelumnya untuk menentukan harga asli yang tidak relevan sehingga sering
masalah utama yang akan dipecahkan oleh menerima komplain dari pelanggan dan tidak
aplikasi yang akan dirancang. Langkah ini jarang terdapat pelanggan yang menanyakan
melibatkan definisi masalah dan membuat sebuah tentang diskon makanan, karena diskon adalah
user goals serta menentukan konsep yang jelas. sesuatu yang ditunggu-tungu oleh para pelanggan.
3. Ideate: Langkah ini melibatkan pembuatan ide-ide Warung makan Bi Unah dominan untuk kalangan
yang inovatif untuk mengatasi masalah yang anak muda, khususnya anak sekolah dan anak
kuliah, karena setiap warung makannya berlokasi
didefinisikan sebelumnya. Pada Langkah ini
dengan sekolah dan kampus. Dari keresahan
dirancang sebuah Brainstroming & Arsitektur
tersebut dapat diambil kesimpulan seperti pada
Informasi untuk menuangkan ide-ide yang ada. table 1 di bawah ini.

[Link] 3
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

Tabel 1. Daftar Keresahan

No. Daftar Keresahan
Daftar menu setiap cabang berbeda
1
harganya
Perlu adanya harga yang menarik minat
2
pelanggan
Market mayoritas adalah anak muda
3
yang umumnya cashless
Sumber: Penelitian, 2023

2. Proses Define
Proses Define merupakan tahap yang Gambar 1. Rancangan Low Fidelity
Aplikasi Warung Makan
bertujuan untuk mengubah ide atau pandangan
pengguna menjadi landasan utama dalam
Gambar 1 menunjukkan rancangan low fidelity atau
pengembangan produk aplikasi. Tabel 2
prototipe awal dari sebuah aplikasi pemesanan
mencantumkan daftar kebutuhan pengguna yang
makanan untuk warung makan. Rancangan ini terdiri
diidentifikasi dalam proses tersebut.
dari beberapa halaman yang dapat diakses oleh
pengguna aplikasi. Berikut adalah penjelasan tentang
Tabel 2. Daftar Kebutuhan Pengguna
No. Daftar Kebutuhan Pengguna
setiap halaman dalam rancangan tersebut:
1. Harga produk perlu bersifat Realtime
2. Terdapat pembayaran secara elektronik 1. Halaman Awal: merupakan halaman pertama
3. Aplikasi dapat diakses menggunakan smartphone yang akan muncul ketika pengguna membuka
4. Perlu adanya diskon atau potongan harga aplikasi. Pada halaman ini, terdapat beberapa
5. Daftar produk yang tampil haruslah tersedia stok menu utama dan tombol untuk masuk ke
6. Deskripsi jelas tentang produk halaman login/register.
7. Terdapat alamat setiap cabang
2. Menu Utama: merupakan halaman di mana
8. Perlunya halaman bantuan bagi pengguna
Sumber: Penelitian, 2023
pengguna dapat melihat daftar menu yang
tersedia di warung makan. Pada halaman ini,
3. Proses Ideate terdapat daftar kategori makanan seperti nasi,
Proses Ideate merupakan tahap di mana mie, ayam, ikan, dan lain-lain. Pengguna dapat
solusi-solusi yang diperlukan dikemukakan memilih kategori yang diinginkan dan melihat
dengan melibatkan evaluasi tim desain dan daftar menu yang tersedia di kategori tersebut.
menggabungkan kreativitas dari setiap desainer 3. Detail Produk: merupakan halaman di mana
aplikasi. Dalam penelitian ini, solusi-solusi pengguna dapat melihat detail produk makanan
tersebut diwujudkan dalam bentuk gambar dengan yang dipilih, seperti gambar makanan, nama
menggunakan kerangka desain rendah (low- makanan, deskripsi, harga, dan pilihan untuk
fidelity) sebagai langkah awal untuk menambahkan ke keranjang belanja.
mempermudah proses pembuatan tata letak 4. Halaman Keranjang: merupakan halaman di
(layout) aplikasi mobile berbasis Android. mana pengguna dapat melihat daftar produk
Gambar-gambar berikut adalah beberapa contoh yang telah dipilih dan jumlah harga total
hasil desain UI/UX yang dihasilkan pada tahap belanja. Pada halaman ini, pengguna juga dapat
Ideate ini. Sebelum pembuatan tata letak desain menambah atau menghapus produk dari
yang sebenarnya, mockup desain ini keranjang belanja.
dikonsultasikan terlebih dahulu dengan mitra 5. Halaman Login/Register: merupakan halaman
untuk menghindari perubahan yang signifikan. di mana pengguna dapat melakukan login atau
registrasi untuk mengakses fitur-fitur tambahan
seperti melihat riwayat belanja dan mengatur
profil.
6. Halaman Pencarian: merupakan halaman di
mana pengguna dapat mencari makanan atau
menu yang diinginkan menggunakan kata kunci
tertentu.

Rancangan low fidelity atau prototipe awal ini

biasanya digunakan untuk mengevaluasi dan menguji
fitur-fitur dasar aplikasi sebelum dilakukan
pengembangan lebih lanjut. Dalam pengembangan
selanjutnya, rancangan ini dapat diubah atau
disesuaikan berdasarkan feedback dan kebutuhan
pengguna.

[Link] 4
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

4. Proses Prototype menu 3 kelola pelanggan, menu 4 lihat

Proses Prototype yaitu proses laporan, menu 5 kelola kotak masuk,
mengimplementasikan ide yang sudah didapatkan dan menu 6 yaitu logout.
dari tahapan sebelumnya menjadi sebuah aplikasi 3) Apabila admin memilih menu 1 maka
dan produk yang dapat diuji coba. Tahapan ini admin dapat mengelola data produk
menghasilkan skenario penggunaan aplikasi seperti menambah, mengubah dan
berupa high fidelity. Gambar di bawah ini menghapus data.
merupakan hasil desain protototipe produk yang 4) Admin dapat memilih menu 2 maka
diimplementasikan. admin dapat mengelola toko seperti
perbaharui alamat toko, nomor telepon,
nomor rekening virtual, dan lain
sebagainya yang berkaitan dengan
identitas toko. Pada menu ini juga admin
dapat mengatur promo apa yang sedang
berlangsung.
5) Admin dapat memvalidasi data pelanggan
dan evaluasi data pelanggan seperti follow
up pelanggan, broadcast promo pada
pelanggan pada menu 3, namun pada menu
ini admin hanya bisa tambah data
pelanggan namun tidak bisa hapus dan
ubah data.
6) Admin dapat mengakses laporan
keuangan guna evaluasi transaksi.
7) Menu 5 yaitu kotak masuk, dimana admin
bisa mengirim pesan dan respon dari
pertanyaan pelanggan.
8) Setelah selesai menggunakan aplikasi,
admin memiliki kemungkinan untuk
melakukan logout dengan memilih opsi
menu nomor 6. Setelah logout dilakukan,
aplikasi dapat ditutup.

b. Pelanggan
1) Untuk terdaftar dalam sistem, pelanggan
harus melakukan registrasi terlebih dahulu
sebagai persyaratan yang harus dipenuhi.
Gambar 2. Hasil Desain High Fidelity UI/UX 2) Pelanggan dapat melihat dengan rinci
Aplikasi Warung Makan daftar produk secara realtime.
3) Pelanggan memilih produk yang akan
Proses bisnis akan digambarkan dalam dipesan lalu daftar pesanan yang akan
bentuk aktifitas diagram berdasarkan level dibayar akan muncul pada menu keranjang
pengguna aplikasi yaitu admin dan pelanggan. 4) Pelanggan dapat mengklaim diskon,
seperti diskon ulang tahun, diskon hari
a. Admin besar, diskon pengguna baru, dan lain
1) Untuk mengakses aplikasi, admin perlu sebagainya
melakukan login menggunakan username 5) Pelanggan melakukan pembayaran melalui
dan password. Jika username atau QR Code dan melakukan scan atau ada
password yang dimasukkan salah, alternatif lain yaitu pembayaran via virtual
aplikasi akan meminta untuk akun.
6) Pelanggan juga bisa melihat rincian toko
memasukkan kembali informasi tersebut.
serta bantuan pelanggan.
Jika admin lupa password yang
digunakan untuk login, terdapat opsi
layanan "forgot password" yang dapat
digunakan.
2) Setelah admin berhasil melakukan login,
admin dapat memilih menu untuk
mengelola aplikasi. Terdapat 6 menu
pada aplikasi warung makan yaitu: menu
1 kelola produk, menu 2 kelola toko,

[Link] 5
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

orang teknis untuk dapat menggunakan

fitur desain aplikasi ini.
Saya menemukan bahwa terdapat berbagai
5 macam fitur desain aplikasi yang
terintegrasi dengan baik dalam sistem.
Saya rasa banyak hal yang tidak konsisten
6 terdapat pada fitur desain aplikasi desain
aplikasi ini.
Saya rasa mayoritas pengguna akan dapat
7 mempelajari fitur desain aplikasi ini
dengan cepat.
Saya menemukan bahwa fitur desain
8 aplikasi ini sangat tidak praktis ketika
digunakan.
Saya sangat yakin dapat menggunakan fitur
9
desain aplikasi ini.
Saya harus belajar banyak hal terlebih
10 dahulu sebelum saya dapat menggunakan
fitur desain aplikasi ini.
Gambar 4. Skenario penggunaan sistem Sumber: Penelitian, 2023
5. Proses Test
Proses Pengujian sistem lainnya dilakukan Metode UEQ (User Experience
dengan melakukan Component testing yaitu Questionnaire) adalah metode yang digunakan untuk
pengujian terhadap komponen sistem. Komponen mengevaluasi desain aplikasi atau produk
yang diuji pada penelitian ini adalah komponen berdasarkan pengalaman pengguna. Dalam konteks
antarmuka. Pengujian component testing yang aplikasi warung makan, UEQ dapat digunakan untuk
dilakukan untuk mengetahui fungsionalitas mengevaluasi desain aplikasi dengan cara
antarmuka yang telah dibuat apakah berfungsi mengumpulkan umpan balik dari pengguna tentang
sesuai dengan yang diharapkan atau tidak. Dari aspek-aspek seperti kemudahan navigasi, kejelasan
hasil pengujian komponen antarmuka, dapat informasi, dan kepuasan pengguna secara
disimpulkan bahwa semua komponen menu dan keseluruhan. Evaluasi desain dengan metode UEQ
tombol yang ada pada aplikasi telah mengarah dapat membantu perusahaan dalam meningkatkan
pada halaman yang tepat dan telah berjalan sesuai kualitas aplikasi dan memenuhi kebutuhan pengguna.
dengan yang fungsinya. Metode untuk melakukan Pengujian sendiri dilakukan kepada calon pelanggan
pengujian ini digunakan dengan gabungkan 2 yang mayoritas tidak asing dengan aplikasi serupa,
metode yaitu Metode SUS (System Usability kalangan anak muda serta yang terbiasa
Scale) adalah metode yang digunakan untuk menggunakan qr code, yang dikumpulkan melaui
mengevaluasi tingkat kemudahan penggunaan kuesioner online menggunakan google formulir.
suatu sistem atau aplikasi. Metode ini Untuk pertanyaan metode UEQ dapat dilihat pada
menggunakan kuesioner yang terdiri dari 10 tabel di bawah ini:
pertanyaan yang mengukur tingkat kepuasan
pengguna terhadap sistem atau aplikasi yang Tabel 4. Daftar pertanyaan metode UEQ
dinilai. Skor yang diperoleh dari kuesioner ini No. Pertanyaan
kemudian digunakan untuk menentukan tingkat
kemudahan penggunaan sistem atau aplikasi 1 Menyusahkan
tersebut. Dalam kasus aplikasi warung makan, Menyenangkan
metode SUS dapat digunakan untuk mengevaluasi Tidak dapat difahami
desain thinking aplikasi tersebut dan mengetahui 2 Dapat
bagaimana kemudahan penggunaan aplikasi ini di difahami
pandang oleh pengguna. Untuk pertanyaan metode
SUS dapat dilihat pada tabel di bawah ini: 3 Kreatif
Tabel 3. Daftar Pertanyaan SUS Monoton
No. Pertanyaan Mudah dipelajari
Saya pikir saya akan sering menggunakan 4
1 Sulit dipelajari
fitur desain aplikasi ini.
Saya merasa fitur desain aplikasi ini terlalu 5 Bermanfaat
2 Kurang bermanfaat
rumit padahal dapat dibuat lebih sederhana.
Saya rasa fitur desain aplikasi ini mudah Membosankan
3 6
untuk digunakan. Mengasyikan
4 Saya pikir saya membutuhkan bantuan dari

[Link] 6
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

kejelasan 1.552, efisiensi 1.354, ketepatan 1.377,

7 Tidak menarik
stimulasi 1.346 dan kebaruan 0.855.
Menarik
Tidak dapat diprediksi KESIMPULAN
8 Dapat
diprediksi Kesimpulan yang dapat diambil dari penelitian ini
9 adalah bahwa aplikasi Warung BI Unah yang
Cepat Lambat dikembangkan dengan metode Design Thinking dan
10 Berdaya cipta dievaluasi menggunakan metode SUS dan UEQ telah
Konvensional berhasil dilakukan tahap testing dengan baik. Dari
hasil tes yang dilakukan dengan mengirimkan
11 Menghalangi kuesioner secara online, didapatkan hasil yang cukup
Mendukung positif dengan skor rata-rata 82 dari 100 responden
12 Baik Buruk untuk metode SUS dan skor rata-rata yang cukup
tinggi untuk setiap aspek UEQ (daya tarik, kejelasan,
13 Rumit efisiensi, ketepatan, stimulasi dan kebaruan). Dari
Sederhana temuan penelitian ini, disarankan untuk melakukan
Tidak disukasi pengembangan lebih lanjut untuk meningkatkan skor
14 UEQ pada aspek kebaruan dan juga perlu
Menggembirakan
diperhatikan aspek keamanan dan privasi data
15 Lazim pengguna dalam pengembangan aplikasi selanjutnya.
Terdepan Selain itu, perlu diperluas jangkauan tes untuk
mengikutsertakan responden yang lebih beragam
16 Tidak nyaman
seperti dari kalangan yang lebih spesifik serta dari
Nyaman
berbagai usia.
17 Aman Tidak
aman REFERENSI

18 Memotovasi
Termotivasi Agustina Zakaria. (2021). Analisis Pendapatan
Memenuhi ekspetasi Pelaku Usaha Kuliner Yang Menerapkan
Sistem Online Di Kota Makassar ( Studi
19 Tidak Komparatif Layanan Gofood). In
memenuhi ekspetasi [Link]
Tidak efisien /A11116530_skripsi_05-11-
20
Efisien 2021%20Bab%[Link].
Annur, C. M. (2022). 7 dari 10 Konsumen Indonesia
21 Jelas Punya Lebih dari 1 Aplikasi Pesan Antar
Membingungkan
Makanan. Databoks.
22 Tidak praktis [Link]
Praktis 2/06/16/7-dari-10-konsumen-indonesia-punya-
lebih-dari-1-aplikasi-pesan-antar-makanan
23 Terorganisasi
Berantakan Arifin, A., Heriyantoro, R. D., & Safitri, F. I. (2022).
Sistem E-Order Makanan dan Minuman
24 Atraktif Tidak dengan Client Server Berbasis Web. Jurnal
atraktif Tren Bisnis Global, 2(1), 46.
Ramah pengguna [Link]
25 Tidak ramah Aulia Putri Prasetyo, Z., Virgantara Putra, O., &
pengguna Harmini, T. (2022). Implementasi Metode
Design Thinking pada Perancangan UI/UX
26 Konservatif Situs Olah-Oleh TPS3R Kota Batu. Ikraith-
Innovatif
Informatika, 7(2), 1–10.
Sumber: Penelitian, 2023
[Link]
informatika.v7i2.2245
Kuesioner terisi oleh 100 responden dengan 58%
laki-laki, dan 42% Wanita dengan 80% responden Ayuningtyas, F. J. (2020). Strategi Branding Dan
adalah mahasiswa, 20% lainnya adalah umum. Untuk Promosi Online “Warung Sembako Arfa” Di
metode SUS didapat hasil yaitu 82 dari 100 Masa Pandemi Covid-19. Managemen Kualitas
responden. Kemudian untuk metode UQE diperoleh Pelayanan, 6.
untuk setiap aspek UEQ adalah daya tarik 1.375, Eugenia, M. P., Abdurrofi, M., Almahenzar, B., &

[Link] 7
 Jurnal Infortech, Volume 5 No. 1 Juni 2023
E-ISSN 2715-8160

Khoirunnisa1, A. (2022). Pendekatan Metode 1–11.

User-Centered Design dan System Usability Pande, M., & More, S. V. B. S. (2020). Theoretical
Scale dalam Redesain dan Evaluasi Antarmuka foundations of design thinking – A
Website. Seminar Nasional Official Statistics constructivism learning approach to design
2022 Interface., [Link] 573–584. thinking. Thinking Skills and Creativity, 36.
Fariyanto, F., & Ulum, F. (2021). Perancangan [Link]
Aplikasi Pemilihan Kepala Desa Dengan abs/pii/S1871187119303104
Metode Ux Design Thinking (Studi Kasus: Prayoga, D., Hayati, F., Putra, H. A. Y., Rizki, I. N.,
Kampung Kuripan). Jurnal Teknologi Dan & Fitroh. (2022). Risiko Keamanan Data
Sistem Informasi (JTSI), 2(2), 52–60. Pribadi Pelanggan Dalam Penggunaan Big
Hasyimy, M. afaf, & Hidajat, R. (2021). Implikasi Data. Jurnal Nasional Komputasi Dan
Tata Kelola Produksi terhadap Kualitas pada Teknologi Informasi, 5(3), 459–463.
Gerabah Desa Pagelaran Kabupaten Malang [Link]
Jawa Timur. Mudra Jurnal Seni Budaya, 36(3), ew/4381/pdf
396–404. Shadiq, J., & Ratu Lolly, R. W. (2020). Sistem
[Link] Informasi Kasir pada Restoran Siap Saji
Hutagalung, H. M. (2020). Pengaruh Desain User FoodPanda Berbasis Desktop. INFORMATION
Interface dan Desain User Experience Aplikasi MANAGEMENT FOR EDUCATORS AND
E-Commerce pada Perilaku Pembelian PROFESSIONALS : Journal of Information
Implusif (Studi pada Shope Indonesia). Management, 5(1), 85.
[Link] [Link]
938/NDU0NjU3/Pengaruh-Desain-User- Teknologi, I., Angelina, K., Sutomo, E., &
Interface-dan-Desain-User-Experience- Nurcahyawati, V. (2023). Jurnal Desain UI UX
Aplikasi-E-Commerce-pada-Perilaku- Aplikasi Penjualan dengan Menyelaraskan
Pembelian-Impulsif-Studi-pada-Shopee- Kebutuhan Bisnis menggunakan Pendekatan
[Link] Design Thinking using Design Thinking
Lim, K. H., & Setiyawati, N. (2022). Perancangan Approach. 5, 70–78.
User Experience Aplikasi Mobile Majuli Utan Sufandi, U., Trihapningsari, D., Mellysa, W., &
Menggunakan Metode Design Thinking. Layanan Bahan Ajar, P. (2020). Peluang
Journal of Information Technology Ampera, Penelitian UI/UX pada Pengembangan
3(2), 108–123. Aplikasi Mobile: Systematic literature review
[Link] UI/UX Research Opportunities in Mobile
sue2.year2022.page108-123 Application Development: Systematic
Lutfi, L., & Sukoco, I. (2019). Design Thinking Literature Review. Agustus, 21(3), 411–433.
David Kelley & Tim Brown: Otak Dibalik
Penciptaan Aplikasi Gojek. Organum Jurnal
Saintifik Manajemen Dan Akuntansi, 02(01),

[Link] 8
 Daftar Pustaka
[1] F. Aziz, D. U. E. Saputri, N. Khasanah, and T. Hidayat, “Penerapan UI/UX dengan
Metode Design Thinking (Studi Kasus: Warung Makan),” Jurnal Infortech, vol. 5, no. 1, pp. 1–
8, Jun. 2023, doi: 10.31294/infortech.v5i1.15156.

[2] A. Koubaa, “GPT-4 vs. GPT-3.5: A Concise Showdown,” Apr. 2023, doi:
10.36227/techrxiv.22312330.v2.

[3] J. Villareale, G. Cimolino, and D. Gomme, “Playing with Dezgo: Adapting Human-AI
Interaction to the Context of Play,” Proceedings of the 18th International Conference on the
Foundations of Digital Games, Apr. 2023, doi: 10.1145/3582437.3587198.

[4] A. K. Darmawan, Moh. A. Hamzah, B. Bakir, M. Walid, A. Anwari, and I. Santosa,

“Exploring Usability Dimension of Smart Regency Service with Indonesian Adaptation of The
System Usability Scale (SUS) and User Experience Questionnaire (UEQ),” 2021 International
Conference on Computer Science, Information Technology, and Electrical Engineering
(ICOMITEE), Oct. 2021, doi: 10.1109/icomitee53461.2021.9650086.

38