BAB II TINJAUAN PUSTAKA 2.1 Studi Sebelumnya Proses awal dalam pengembangan perangkat lunak sangatlah vital, dan salah satu tahap kunci yang tidak dapat diabaikan adalah proses desain. Desain tidak hanya sekadar tentang menciptakan antarmuka yang indah secara visual, tetapi juga harus mempertimbangkan secara mendalam kebutuhan pengguna serta fungsionalitas yang sesuai. Oleh karena itu, para peneliti seringkali merujuk pada penelitian-penelitian sebelumnya sebagai pedoman dan acuan selama proses penelitian mereka [6]. Sementara itu, penelitian yang dilakukan oleh Fadhil M et al bertujuan untuk menciptakan aplikasi yang menghubungkan UMKM dan start up dengan investor melalui mekanisme bagi hasil dengan fitur donasi dan transfer bank. Setelah melalui serangkaian uji coba dengan metode System Usability Scale terhadap 20 responden, hasil yang diperoleh adalah sebesar 75%, yang menunjukkan bahwa aplikasi tersebut diterima dengan baik oleh sebagian besar pengguna [7]. Salah satu penelitian yang menarik adalah yang dilakukan oleh Achmad et al. Mereka memiliki tujuan yang sangat jelas, yaitu untuk mengatasi masalah pembajakan buku dengan merancang pengalaman pengguna yang optimal dan menciptakan prototipe Aplikasi Publikasi Buku Digital yang dapat menjadi solusi bagi mahasiswa yang mencari buku digital atau referensi dengan biaya terjangkau. Metode yang digunakan dalam penelitian ini adalah Five Planes. Hasil dari penelitian mereka menunjukkan bahwa prototipe aplikasi yang dibuat berhasil meraih skor 78.5 dalam System Usability Scale, yang menandakan bahwa aplikasi tersebut berhasil dalam kategori yang ditentukan [8]. Dalam penelitian oleh Alvi Syahrina & Tien Fabrianti Kusumasari, telah berhasil merancang dan membangun pengalaman pengguna dari situs web ISTIH dengan menggunakan metode Five Planes. Mereka menegaskan bahwa tujuan utama pengembangan situs web dari tingkat strategis tercermin dalam antarmuka yang dibangun. Mereka menyoroti bahwa setiap bidang memiliki elemen penting yang berkontribusi dalam membangun antarmuka situs web tersebut. Namun, mereka juga 7
mencatat bahwa tidak dilakukan uji pengguna (user testing) setelah rancangan selesai [9]. Mahatva et al, dalam penelitiannya, juga menggunakan metode Five Planes dengan tujuan merancang aplikasi marketplace untuk petani. Hasil penelitian mereka menunjukkan bahwa aplikasi yang dirancang berhasil mencapai tingkat kepuasan pengguna yang tinggi [10]. Penelitian oleh Luthfi Hardiansyah, Khalid Iskandar, dan Harliana juga mengenai perancangan pengalaman pengguna situs web profil BP3K Kecamatan Mundu menggunakan metode The Five Planes. Mereka mengklaim bahwa hasil evaluasi menunjukkan bahwa prototipe yang dibuat cukup dipahami dan diterima oleh pengguna dengan baik. Namun, dari sisi uji kelayakan penggunaan, penelitian ini menyatakan bahwa uji pengguna (usability testing) menjadi membingungkan dan tidak terstruktur [11]. Dari semua penelitian tersebut, dapat disimpulkan bahwa proses desain yang matang dan berbasis pada penelitian yang teliti merupakan kunci keberhasilan dalam pengembangan aplikasi yang memenuhi kebutuhan pengguna dan memecahkan masalah yang dihadapi. 8
Tabel 2. 1 Studi Sebelumnya No Peneliti Judul Penelitian Joang Perancangan User Pratama Experience Aplikasi Achmad, Publikasi Buku Digital 1. Komang menggunakan Candra Brata, Metode Five Planes Lutfi Fanani [6] Perancangan UI/UX Muhammad Aplikasi "Salur" Fadhil, Umar Berbasis Android Ali Ahmad, R. 2. Menggunakan Rogers Metode Dwiputra UserCentered-Design Setiady [7] Tahun 2021 2019 Tujuan Merancang User Experience Aplikasi Publikasi Digital agar menjadi solusi murah bagi mahasiswa dalam mencari buku digital atau referensi pendukung saat melakukan penelitian. Membuat aplikasi yang memberikan pendanaan dengan mempertemukan UMKM maupun start up dengan investor dalam bentuk bagi hasil dengan fitur donasi dan transfer bank 9 Metode Five Planes User Centered Design Hasil Hasil desain menggunakan System Usability Scale didapatkan skor 78.5 atau B+ yang berarti prorotipe aplikasi termasuk dalam kategori berhasil. Setelah dilakukan usability testing dengan metode System Usability Scale dan jumlah responden 20 orang mendapatkan hasil sebesar 75% dimana hasil ini adalah acceptable dan marginal 25% dengan arti bahwa 9 responden dapat memahami dan menerima aplikasi ini.
No 3. 4. Peneliti Alvi Syahrina, Tien Fabrianti Kusumasari Mahatva Zenggi Maggenta, Riswan Septriayadi Sianturi, Agi Putra Kharisma Judul Penelitian Designing User Experience and User Interface of a B2B Textile e-Commerce using Five Planes Framework [8] Perancangan User Experience Website Marketplace dan Pemetaan Hasil Pertanian menggunakan Metode Five Planes [9] Tahun 2020 2021 Tujuan Tujuan dari penelitian ini adalah untuk menciptakan platform e-commerce yang memenuhi kebutuhan industri tekstil Indonesia dan meningkatkan konektivitas antarindustri. Menghasilkan perancangan User Experience yang dapat membuat petani mudah dalam memasarkan hasil pertanian. 10 Metode Five Planes Five Planes Hasil Output yang dihasilkan dalam penelitian ini adalah desain antarmuka e-commerce tekstil pada versi alpha situs website. Hasil penelitian dengan menggunakan metode testing System usability Scale adalah mendapatkan hasil dari sisi pengguna sebesar 91,5 dan dari sisi penjual mendapatkan nilai sebesar 85 dengan grade A sehingga dapat ditarik kesimpulan perancangan aplikasi berhasil dibuat berdasarkan kebutuhan pengguna ini
No 5. Peneliti Luthfi Hardiansyah, Khalid Iskandar Harliana Judul Penelitian Perancangan User Experience Website Profil Dengan Metode The Five Planes [11] Tahun 2019 Tujuan Tujuan penelitian ini adalah untuk merancang sebuah website profil yang memperhatikan aspek user experience dengan menggunakan metode the five planes pada website BP3K mandu 11 Metode Five Planes Hasil Hasil pengujian menunjukkan bahwa website profil memiliki tingkat usability yang sangat baik sehingga dapat diterima dan siap digunakan oleh pengguna dengan fitur yang tersedia.
2.2 Dasar Teori Berikut merupakan dasar teori yang menjadi acuan terhadap pembuatan rancangan UI/UX website Family Kost dari PT Arzsenna Jaya Abadi. 2.2.1 User Interface User Interface (UI) merupakan aspek visual yang sangat penting dalam suatu perangkat lunak, memungkinkan pengguna untuk berinteraksi dengan sistem secara visual, dapat disentuh, dan dapat dimengerti. UI berperan sebagai antarmuka antara manusia dan sistem, menciptakan pengalaman pengguna yang dapat terlihat [11]. Dalam perancangan UI, panduan atau prinsip-prinsip tertentu diperlukan untuk menciptakan produk atau aplikasi yang baik dan menarik. Don Norman, seorang pakar desain, menyusun enam prinsip desain UI yang sangat berharga diantaranya yaitu, visibility, feedback, affordance, mapping, constraints, concistency [12]. Prinsip-prinsip ini tidak hanya menjadi panduan bagi desainer UI tetapi juga memastikan bahwa antarmuka pengguna memberikan pengalaman yang optimal bagi pengguna akhir[13]. Dengan memahami dan mengimplementasikan prinsip-prinsip tersebut, desainer dapat menciptakan UI yang tidak hanya estetis menarik tetapi juga efektif dalam memenuhi kebutuhan dan ekspektasi pengguna. Dengan demikian, prinsip-prinsip desain UI Don Norman menjadi landasan penting dalam menciptakan antarmuka pengguna yang sukses dan efisien [13]. 2.2.2 User Experience User Experience (UX) merupakan konsep yang menggambarkan pengalaman pengguna dalam berinteraksi dengan suatu produk atau sistem komputer, yang meliputi persepsi terhadap aspek praktis seperti kegunaan, kemudahan penggunaan, dan efisiensi sistem yang ada(). Dalam desain user experience (UX), terdapat enam komponen inti yang perlu dipahami agar dapat mengimplementasikan desain UX dengan baik, yakni usability, interaction design, visual design, information architecture, content strategy, dan user research [14]. Dengan memahami keenam komponen tersebut, pengembang dapat mengimplementasikan desain UX yang unggul, meningkatkan kualitas produk, dan memenuhi kebutuhan serta ekspektasi pengguna dengan lebih baik [14]. 11
2.2.3 Five Plans Five Planes adalah suatu kerangka desain yang dikembangkan oleh James Garrett untuk menyajikan cara merancang user interface dan user experience (pengalaman pengguna) secara efektif [14]. Metode ini memfasilitasi pengembangan user interface dan user experience dalam bentuk model konseptual, baik dalam menanggulangi masalah maupun dalam proses perancangannya. Karakteristik umumnya menunjukkan bahwa bidang yang terletak di paling bawah bersifat lebih abstrak, sementara bidang yang terletak di paling atas bersifat lebih konkret dan jelas. Five Planes terdiri dari lima tahapan kunci, yaitu strategy (strategi), scope (lingkup), structure (struktur), skeleton (kerangka), dan surface (permukaan) [15]. 1. Strategy (Strategi): Tahap pertama dalam Five Planes adalah strategi. Pada tahap ini, perencanaan makro untuk proyek user interface dan user experience dibuat. Ini melibatkan identifikasi tujuan bisnis, target audiens, dan cara mencapai keberhasilan proyek secara keseluruhan. Pemahaman yang mendalam tentang kebutuhan dan tujuan merupakan dasar bagi pengembangan user interface dan user experience yang sukses [15]. 2. Scope (Lingkup): Tahap kedua, yaitu lingkup, berkaitan dengan menentukan cakupan proyek secara spesifik. Ini mencakup mengidentifikasi fitur dan fungsionalitas yang akan disertakan dalam user interface dan user experience. Dengan memahami batasan dan ruang lingkup proyek, desainer dapat fokus pada elemen-elemen yang paling relevan dan signifikan.[2] 3. Structure (Struktur): Tahap ketiga adalah struktur, di mana desainer merancang organisasi dan hubungan antara elemen-elemen dalam user experience. Ini mencakup pengaturan informasi, navigasi, dan hubungan antara berbagai bagian aplikasi atau situs website. Struktur ini menjadi landasan bagi pembentukan kerangka umum yang akan mengarah pada pengalaman pengguna yang terstruktur dan mudah dipahami.[17] 4. Skeleton (Kerangka): Tahap keempat, kerangka, fokus pada rancangan visual dan representasi konkret dari struktur yang telah dirancang sebelumnya. Desainer mulai menentukan tata letak, warna, tipografi, dan elemen grafis 12
lainnya yang akan membentuk penampilan visual dari user experience. Ini memberikan gambaran lebih jelas tentang bagaimana pengguna akan berinteraksi dengan elemen-elemen tersebut.[18] 5. Surface (Permukaan): Tahap terakhir, yaitu permukaan, mencakup detail terkait estetika dan presentasi visual. Desainer menyesuaikan aspek-aspek seperti warna, gambar, dan gaya visual untuk menciptakan tampilan akhir yang memukau dan sesuai dengan identitas merek atau tujuan estetika yang ditetapkan. Gambar 2. 1 Five Planes Model [15] Dengan menggunakan Five Planes, desainer dapat mengembangkan user interface dan user experience secara sistematis, memastikan bahwa setiap tahap membangun satu sama lain secara kohesif. 2.2.4 Material Design Material Design adalah seperangkat aturan dan pedoman yang dirancang untuk membimbing pembuatan antarmuka pengguna (user interface) yang efektif dan estetis. Konsep ini dikembangkan oleh Google sebagai hasil dari riset mendalam, dan secara khusus diarahkan untuk penggunaan pada platform Android dan iOS [16]. Material Design memberikan panduan desain yang komprehensif untuk menciptakan 13
pengalaman pengguna yang konsisten dan menarik di berbagai aplikasi dan situs website. Aturan-aturan dan panduan yang diterapkan dalam material desain bukan hanya sekadar estetika visual, tetapi juga memperhatikan fungsi dan interaksi pengguna. Panduan tersebut merinci prinsip-prinsip desain, warna, tipografi, ikon, dan elemen-elemen UI lainnya yang bekerja bersama untuk menciptakan pengalaman yang bersifat kohesif dan intuitif. Konsep ini diakui sebagai cara yang efektif untuk menyediakan antarmuka yang bersih, mudah dipahami, dan responsif [17]. 2.2.5 High Fidelity High fidelity dalam desain UI/UX mengacu pada tahap pengembangan desain yang menekankan pada detail-detail halus, presisi, dan akurasi yang tinggi. Ini berarti bahwa desain tersebut mencerminkan versi akhir atau mendekati produk atau layanan yang sebenarnya [16]. Dalam konteks UI (User Interface), high fidelity menekankan pada aspek visual seperti warna, tipografi, layout, dan elemen-elemen interaktif dengan tingkat detail yang tinggi. Sedangkan dalam konteks UX (User Experience), high fidelity berarti bahwa desain sudah mencakup pengalaman pengguna yang mendekati produk atau layanan yang sebenarnya, termasuk interaksi pengguna, navigasi, dan respons sistem terhadap tindakan pengguna [16]. Kunci dari high fidelity dalam UI/UX adalah menyampaikan pengalaman yang mendekati produk atau layanan yang sebenarnya kepada pengguna. Hal ini membantu untuk menguji dan memvalidasi desain dengan lebih efektif sebelum produk atau layanan diluncurkan. Dengan high fidelity, tim desain dapat memperoleh umpan balik yang lebih akurat dari pengguna, mengidentifikasi masalah potensial, dan melakukan perbaikan sebelum produk atau layanan diimplementasikan secara penuh [17]. 2.2.6 Low Fidelity Low fidelity dalam desain UI/UX mengacu pada tahap awal dalam pengembangan desain yang menekankan pada kesederhanaan, kerangka dasar, dan representasi konsep yang lebih kasar. Ini berarti bahwa desain tersebut lebih fokus pada struktur dasar daripada detail-detail visual yang rumit [18]. Dalam konteks UI, low fidelity mungkin melibatkan penggunaan sketsa, wireframe, atau prototipe yang 14
sederhana untuk menggambarkan tata letak umum, hierarki informasi, dan alur interaksi [18]. Sedangkan dalam konteks UX, low fidelity menekankan pada pengembangan ide awal mengenai pengalaman pengguna tanpa memperhatikan detail-detail implementasi yang lebih rumit. Salah satu tujuan dari low fidelity dalam UI/UX adalah untuk secara cepat mengeksplorasi dan menguji berbagai konsep desain tanpa terjebak pada detail-detail yang tidak perlu. Dengan low fidelity, tim desain dapat dengan mudah melakukan iterasi dan perbaikan pada struktur dasar desain tanpa harus menghabiskan waktu dan sumber daya yang banyak [18]. memungkinkan untuk penyesuaian yang lebih fleksibel dan efisien pada tahap awal pengembangan. 2.2.7 Metode Perancangan Metode perancangan merupakan serangkaian pendekatan, teknik, dan prosedur yang digunakan dalam proses merancang produk, layanan, atau pengalaman pengguna [18]. Tujuan dari metode perancangan adalah untuk mengarahkan dan membimbing tim desain dalam menciptakan solusi yang efektif dan memuaskan bagi pengguna. Metode perancangan sering kali mencakup beberapa tahapan, mulai dari pemahaman tentang masalah dan pengguna, ideasi, prototyping, hingga pengujian dan iterasi. Pada dasarnya, metode perancangan bertujuan untuk memastikan bahwa solusi yang dihasilkan memenuhi kebutuhan dan tujuan yang telah ditetapkan dengan memperhatikan perspektif pengguna [18]. Dalam proses ini, berbagai pendekatan dapat digunakan, termasuk metode-metode yang terstruktur UCD (User Centered Design), Five Planes, Design Sprint, Design Thinking. Adapun perbandingan dari beberapa metode tersebut dapat dilihat melalui tabel berikut. 15 Ini
Tabel 2. 2 Perbandingan Metode Perancangan Aspek Fokus Proses penelitian Siklus Penekanan Metode Metode Five Planes aspek Analisis visi, utama pelanggan, peluang, model bisnis, dan model teknis [14]. Pendekatan analisis rapi dan terstruktur terpisah pada lima aspek langkah metode [14]. Cenderung linear dan terstruktur, dimulai dari analisis visi produk hingga implementasi teknis, dengan sedikit ruang untuk perbaikan di tahapan- antara tahapannya [14]. Fokus analisis dan menyeluruh pemahaman mendalam aspek-aspek terhadap mempengaruhi yang produk [14]. lima produk: lebih pada Design Thinking Pemahaman mendalam terhadap masalah pengguna, kreativitas dalam mencari solusi yang inovatif [15]. Fleksibel, dan berorientasi pada pengguna [15]. iteratif, Sering melibatkan ideasi, pengujian [15]. kali tidak linear, pemahaman, dan prototyping, Menekankan pada kreativitas dan ideasi inovatif [15]. 16 UCD Memahami kebutuhan dan pengalaman pengguna untuk menghasilkan yang memenuhi kebutuhan mereka [16]. Setiap proses memastikan agar desain dengan sesuai kebutuhan pengguna [16]. solusi Melibatkan pemahaman, desain, pengembangan, dan evaluasi berulang [16]. Menekankan pada pengalaman pengguna yang memuaskan [16]. Design Sprint Pengembangan dan prototyping solusi secara cepat dalam waktu terbatas [17]. ide Pendekatan intensif dalam waktu singkat untuk menciptakan solusi [17]. Terstruktur dalam waktu singkat, biasanya 1-2 minggu [17]. Menekankan pada penyusunan ide dan prototyping yang cepat [17].
Selama proses perancangan, metode perancangan juga mengedepankan siklus iteratif, di mana solusi yang dirancang terus diuji, dievaluasi, dan diperbaiki berdasarkan umpan balik yang diterima [18]. Hal ini memungkinkan untuk penyesuaian yang lebih baik dengan kebutuhan dan harapan pengguna, serta perubahan yang mungkin terjadi selama proses pengembangan. Dengan menerapkan metode perancangan yang tepat, organisasi dapat menciptakan produk dan layanan yang lebih inovatif, efektif, dan memuaskan bagi pengguna, sehingga meningkatkan kepuasan pengguna dan keberhasilan bisnis secara keseluruhan. 2.2.8 Metode Evaluasi Metode evaluasi desain UI/UX adalah serangkaian pendekatan yang digunakan untuk menilai kualitas dan efektivitas antarmuka pengguna serta pengalaman pengguna secara keseluruhan [18]. Tujuannya adalah untuk mengidentifikasi kelemahan dalam desain, memperbaiki masalah yang mungkin ada, dan meningkatkan kesesuaian dengan kebutuhan pengguna serta tujuan bisnis. Beberapa metode evaluasi yang umum digunakan meliputi pengujian pengguna, analisis heuristik, wawancara pengguna, A/B testing, dan eye tracking [19]. Pengujian pengguna melibatkan partisipasi langsung pengguna dalam menyelesaikan tugas tertentu menggunakan antarmuka yang dievaluasi, sementara analisis heuristik dilakukan oleh pakar desain untuk menilai desain berdasarkan prinsip-prinsip desain yang telah ditetapkan sebelumnya. Wawancara pengguna membantu dalam memahami pengalaman dan preferensi pengguna, sedangkan A/B testing membandingkan dua versi atau lebih dari sebuah desain untuk menentukan yang lebih efektif dalam mencapai tujuan tertentu [19]. Eye tracking menggunakan teknologi untuk memantau gerakan mata pengguna saat berinteraksi dengan antarmuka. 17