84| Universitas Multi Data Palembang
PERANCANGAN UI/UX WEBSITE SMK N 1 PALEMBANG MENGGUNAKAN METODE DESIGN THINKING
Bondan Wijayas1*), D. Tri Octafian2
12Program Studi Teknik Informatika, Institut Teknologi dan Bisnis Palcomtech
1[email protected], 2[email protected],
Kata kunci:
design thingkin; user
interface; user
experience;ueq.
Abstract: SMK N 1 Palembang is one of the Vocational High Schools in the city of Palembang. has a website that can be accessed by all school users but the website has a less attractive appearance and rarely updates news or announcements on the website. To provide an interesting experience in that regard. So SMKN 1 Palembang designed ui / ux design with the design thinking method. The use of design thinking methods can affect the attractive appearance and adaptive layout of information and answer the needs and can solve user problems when using the school website. The application of the design thinking method starts from the Emphatize, Define, Ideate, Prototype, and Test processes in the case study of SMKN 1 Palembang. After successfully finding and understanding these problems, website design results are obtained including User Interface (UI) and User Experience (UX) which can be a solution to the problems of needs of existing school users.
Abstrak: SMK N 1 Palembang merupakan salah satu Sekolah Menengah Kejuruan di kota Palembang. memiliki sebuah website yang sudah bisa diakses oleh semua pengguna sekolah namun website tersebut memiliki tampilan yang kurang menarik dan jarang melakukan update berita ataupun pengumuman di website. Untuk memberikan pengalaman menarik dalam hal tersebut. Maka SMKN 1 Palembang melakukan perancangan desain ui/ux dengan metode design thinking. Penggunaan metode design thinking dapat berpengaruh terhadap tampilan yang menarik serta tataletak informasi yang adaptif serta menjawab kebutuhan dan dapat menyelesaikan permasalahan pengguna saat menggunakan website sekolah. Penerapan metode design thinking dimulai dari proses Emphatize, Define, Ideate, Prototype, dan Test pada studi kasus SMKN 1 Palembang. Setelah berhasil menemukan dan memahami permasalahan tersebut didapatkan hasil desain website mencakup User Interface (UI) dan User Experience (UX) yang mampu menjadi solusi dari permasalahan kebutuhan pada pengguna sekolah yang ada
Wijaya & Octafian. (2023). Perancangan UI/UX Website SMK N 1 Palembang Menggunakan Metode Design Thinking. MDP Student Conference 2023
Universitas Multi Data Palembang | 85 PENDAHULUAN
Perkembangan teknologi informasi berkembang begitu cepat sehingga dalam penyampaian informasi dapat diakses dengan cepat tanpa dibatasi ruang dan lokasi penyampaian, khususnya dalam menyampaikan informasi adalah bagaimana penyampaian informasi yang cepat dan tepat dapat tersampaikan kepada masyarakat. Website adalah salah satu media penyedia informasi yang keberadaannya saat ini sangatlah penting di dalam dunia era digital, sehingga lembaga pendidikan maupun instansi seperti sekolah telah mengembangkan website dalam hal menyebarkan informasi. Website juga memiliki user interface & user experience. User interface adalah cara pengguna untuk berinteraksi dengan komputer, smartphone, tablet atau perangkat lainnya yang berbentuk visual, mampu dimengerti oleh pengguna aplikasi tersebut, dan diprogram sedemikian rupa agar dapat terbaca oleh sistem dan dapat menjalankan perintah yang tepat [7].
Sedangkan user exprerience adalah pengalaman yang dialami pengguna terhadap setiap interaksi yang sedang pengguna hadapi dengan apa yang ada di depan pengguna saat menggunakannya [5]. SMKN 1 Palembang merupakan salah satu sekolah di kota Palembang beralamat Jl. Letnan Jaimas No.100 30129.
Sekolah ini memiliki sebuah website yang sudah bisa diakses oleh semua pengguna internet. Akan tetapi, berdasarkan wawancara kepada sebagian siswa dan staff admin didapatkan permasalahan bahwa website tersebut memiliki tampilan yang kurang menarik dan jarang melakukan update pada berita ataupun pengumuman di website nya.
METODE
Data yang digunakan oleh penulis adalah data yang terkait dengan judul yang diteliti data kemudian dikumpulkan dan diambil sampel memakai rumus slovin dengan metode simple random sampling. Pada tahapan ini penulis melakukan studi pustaka dengan cara mengumpulkan teori-teori ataupun konsep dengan cara meneliti jurnal-jurnal yang terkait dari beberapa sumber tentang permasalahan yang sedang diteliti. Dalam setiap aspek, setengahnya dimulai dengan pernyataan positif dan setengahnya lagi dengan negatif.
Gambar 1. Tahapan Metode Design Thinking (Sumber: Dokumen Pribadi)
Design thinking adalah metode atau proses desain dalam penyelesain suatu masalah dengan berfokus pada user atau pengguna. Dalam sebuah website atau produk desain tidak hanya sekedar membuat website dan produk memiliki esensi yang menarik dan indah, mudah dibuat namun memperhatikan tentang tahapan dan proses tahapan dan proses dari design itu sendiri [6]. Dalam desain thinking memiliki 5 tahapan yaitu:
(1)Emphatize, Sebuah kebutuhan pengguna yang teridentifikasi dan teramati didasari atas wawancara . (2)Define, Sebuah pendapat atas dasar dari sebuah desain website yang dibuat. (3)Ideate, Ideate merupakan solusi yang diperlukan, agar dievaluasi serta penggabungan kreativitas dari setiap desain website. (4) Prototype, Ide-ide dari sebelumnya ditransformasikan kedalam sebuah desain yang akan diuji. Pada hasil tahap ini sudah jadi dalam bentuk design yang akan dibuat. (5).Testing, Tahapan yang terakhir dimana pengalaman dengan pengguna, dalam mencoba produk atau website yang sudah jadi. Berdasarkan pengalaman pengguna tersebut,penulis mendapatkan berupa saran dan masukan yang membangun agar bisa disempurnakan dikemudian hari.
86| Universitas Multi Data Palembang
HASILDANPEMBAHASAN
Proses Empathize
Pada Tahapan ini peneliti langsung ke SMK N 1 Palembang dan melakukan wawancara ke salah satu staff admin dan siswa untuk mendapatkan informasi yang dibutuhkan dalam permasalahan di SMK N 1 Palembang. Berikut merupakan pertanyaan-pertanyaan yang diguanakan dalam proses pengumpulan data pada tabel 1:
Tabel 1. Daftar Pertanyaan Wawancara
No PERTANYAAN
1 Apa yang anda rasakan Ketika mengelolah Website SMK N 1 Palembang?
2 Apakah anda mengalami kesulitan dalam menggunakan Website SMK N 1 Palembang?
3 Jika memiliki kesulitan, kesulitan apa yang kamu anda hadapi?
4 Media apa yang biasanya digunakan ketika menggunakan website SMK N 1 Palembang?
5 Apakah perlu adanya perancangan ulang website SMK N 1 Palembang?
6 Apa fitur yang anda inginkan dari website SMK N 1 Palembang?
Proses Define
Pada tahapan ini setelah peneliti mewawancarai narasumber salah satu staff di SMK N 1 Palembang tentang bagaimana permasalahan tersebut diperoleh dan dapat mengetahui kebutuhan pada calon pengguna.
Berikut beberapa permasalahan terdapat pada tabel 2:
Tabel 2. Daftar permasalahan Pengguna
No DAFTAR PERMASALAHAN PENGGUNA
1 Tampilan website yang kurang menarik dan ada beberapa tampilan yang harus dibuang dan ditambahkan.
2 Beberapa responden kesulitan dalam mendapatkan informasi.
3 Beberapa responden kesulitan untuk mendapatkan data atau berkas yang diperlukan.
Proses Ideate
Pada tahapan ideate yaitu setelah mengetahui masalah tersebut, maka penulis mendapatkan ide gagasan solusi berdasarkan permasalahan yang ada, bisa dilihat pada tabel 3.
Tabel 3. Daftar Kebutuhan Pengguna
No DAFTAR KEBUTUHAN PENGGUNA
1 Dibutuhkan sebuah website yang dapat membantu dalam pengolaan informasi akademik.
2 Dibutuhkan website yang memiliki tampilan yang simple dan nyaman.
3 Dibutuhkan website yang memiliki fitur untuk bisa mendapatkan informasi keberadaan lokasi sekolah.
4 Dibutuhkan website yang memiliki fitur untuk mengunduh data yang diperlukan seperti jadwal pelajaran, jadwal mengajar dan berkas-berkas lainnya.
Proses Prototype
Setelah melakukan beberapa tahapan seperti emphatize,define,ideate, selanjutnnya membuat proses pembuatan prototype UI/UX website pada SMK N 1 Palembang. Hasil desain prototype dapat dilihat pada gambar 2:
Universitas Multi Data Palembang | 87 Gambar 2. Hasil Desain Website SMK N 1 Palembang
Pada bagian ini disampaikan semua hasil atau temuan penelitian penulis. Perlu untuk digaris bawahi bahwa penyampaian hasil penelitian berbeda dengan diskusi. Hasil penelitian sebagian besar menampilkan informasi dan penyajian data yang dikumpulkan dalam bentuk grafik atau tabel. Perancangan pertanyaan indikator dan variabel User Experience pada perancangan website SMK N 1 Palembang dilakukan dengan penyebaran kuesioner kepada siswa SMK N 1 Palembang. Pada kuesioner ini memiliki 26 petanyaan dengan 7 likert poin yang akan diberikan kepada responden
Setelah penyebaran data secara luring terkumpul, selanjutnya analisis data, peneliti melakukan analisis data berdasarkan jenis kelamin. Kedua hasil pengujian data pada validitas, reliabilitas menggunakan analysis tool UEQ di program aplikasi excel. Uji validitas tersebut melihat nilai rhitung atau person correlation per masing-masing item variabel sedangkan uji reliabilitas dilakukan dengan melihat nilai conrbach alpha permasing variabel penelitian tersebut. Uji benchmark dapat menvisualisasikan tentang relative dari website lama SMK N 1 Palembang di bandingkan lainnya. Dalam uji benchmark terbagi menjadi 5 kelompok yaitu: Sempurna,Bagus,Diatas Rata-Rata,Dibawah Rata-Rata, serta Buruk. Setelah hasil perhitungan reliabilitas di website lama dibawah sedangkan didapati bahwa nilai Cronbach’s Alpha diatas itu menandakan secara reliabel.
88| Universitas Multi Data Palembang
Gambar 3. Hasil Benchmark Penilaian pada Web Lama
Gambar 2. Hasil Benchmark Penilaian pada Web Baru
Dari disimpulkan uji validitas pada web lama dan web baru kemudian reliabilitas, indicator pengukuran secara keseluruhan pada variabel UI dan UX dan dapat dipercaya bisa mengungkapkan informasi secara terang terangan . Maka penulis menggunakan statistik deskriptif agar analisis UI dan UX bisa teruji diketahui website baru SMK N 1 Palembang mendapatkan nilai diatas rata rata sedangkan untuk untuk website baru mendapatkan nilai (Bagus). Nilai antara web lama dan web baru cukup signifikan, seperti pada daya tarik memiliki selisih 0.22, kemudian kejelasan pada 0.11, efisiensi selisih 0.16, ketepatan dengan selisih 0.14 dan yang terakhir pada kebaruan dengan nilai selisih 0.38. Penulis juga membuat grafik perbedaan pada seluruh aspek terutama aspek kebaruan dan ketepatan.
Tabel 4. Hasil Perbandingan Skala Penilaian pada Web Lama & Web Baru
Skala Web Lama Web Baru Selisih
Daya Tarik 1,56 1,78 0,22
Kejelasan 1,53 1,64 0,11
Efisiensi 1,44 1,6 0,16
Ketepatan 1,25 1,71 0,46
Stimulasi 1,56 1,7 0,14
Kebaruan 1,12 1,5 0,38
Dengan demikian setelah melakukan pengujian data ueq tersebut dapat disimpulkan bahwa pengujian ui/ux pada website SMK N 1 Palembang dengan menggunakan metode design thinking telah mendapatkan perubahan signifikan pada hasil penilaian di setiap variabel pengujian dan penulis telah menyimpulkan
-1,00 0,00 1,00 2,00
Daya tarik Kejelasan Efisiensi Ketepatan Stimulasi Kebaruan
Excellent Good
Above Average Below Average Bad
Mean
-1,00 0,00 1,00 2,00
Daya tarik Kejelasan Efisiensi Ketepatan Stimulasi Kebaruan
Excellent Good
Above Average Below Average Bad
Mean
Universitas Multi Data Palembang | 89 bahwa SMK N 1 Palembang dinyatakan layak dan mendapatkan nilai “BAGUS” yang dilakukan perubahan pada User Interface tersebut serta pada User Exprerience.
SIMPULAN
Berdasarkan hasil pembahasan yang telah dilakukan oleh penulis maka didapatkan kesimpulan sebagai berikut Kesesuaian data dari setiap aspek UEQ didapatkan bahwa website lama pada SMK N 1 Palembang berada dikategori «Diatas Rata-Rata» sehingga membuat pengguna mendapatkan pengalaman yang kurang selama mengakses penelusuran informasi di website. Berdasarkan hasil Benchmark menggunakan UEQ data analysis tool, didapat bahwa desain baru pada aspek daya tarik, efisiensi, kejelasan, stimulasi dan kebaruan berada dikategori «Bagus», sedangkan website lama berada dilevel diatas rata-rata. Juga perbandingan terhadap mean mendapatkan penilaian lebih dari > 0.5 pada setiap aspek seperti aspek daya tarik memiliki selisih 0.22, kemudian aspek kejelasan diangka 1, pada efisiensi selisih 0.16, 0.14 didapatkan pada aspek ketepatan dan yang terakhir pada aspek kebaruan mendapatkan penilaian di 0.38.
DAFTARPUSTAKA
[1] Adinegoro, & Teguh, A. L. (2018). Analisis Pengalaman Pengguna pada Website E-commerce Dengan Menggunakan Usability Testing dan User Experience Questionnaire (UEQ) (Studi pada Lazada.co.id, Blibli.com dan JD.id). In Teknologi Informasi (Vol. 2, Issue 11, pp. 5862–5870).
Fakultas Ilmu Komputer, Universitas Brawijaya.
[2] Dewa Made Widia, S. R. A. (2021). Cara Cepat dan Praktis Membangun Web Dinamis Dengan PHP dan MySQL. Penerbit : Universitas Brawijaya Press.
[3] Fitriana, E., D., & Yanto, A. F. (2020). Analisis User Experience (UX) Fitur Marketplace Facebook.
Jurnal Ekonomi dan Teknik Informatika.
[4] Hartzani, A. G. (2021). Evaluasi User Experience pada Dompet Digital OVO Menggunakan User Experience Questionnaire.
[5] Henim, S. R., & Sari, R. P. (2020). Evaluasi User Experience Sistem Informasi Akademik Mahasiswa pada Perguruan Tinggi Menggunakan User Experience Questionnaire. Jurnal Komputer Terapan, 6(Vol. 6 No. 1 (2020)), 69–78.
[6] Mursyidah, A., Aknuranda, I., & Muslimah Az-Zahra, H. (2019). Perancangan Antarmuka Pengguna Sistem Informasi Prosedur Pelayanan Umum Menggunakan Metode Design Thinking (Studi Kasus:
Fakultas Ilmu Komputer Universitas Brawijaya). Jurnal Pengembangan Teknologi lxxvi Informasi Dan Ilmu Komputer, 3(4), 3931–3938.
[7] Pandusarani, G., Brata, A. H., & Jonemaro, E. M. A. (2018). Analisis User Experience pada Game CS:GO Dengan Menggunakan Metode Cognitive Walkthrough dan Metode Heuristic Evaluation.
Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2(3), 940–950.
[8] Wijaya, F., Wijaya, A., Elevan, R. T., Putra, R., & Pribadi, M. R. (2022, January). Universitas Multi Data Palembang Perancangan Ui/Ux pada Aplikasi We-Care Menggunakan Metode Design Thinking.
In MDP Student Conference (Vol. 1, No. 1, pp. 465-471).
90| Universitas Multi Data Palembang
[9] Erwi, S. V. K., Feriyanto, F., Fernando, F., Chandra, Y. F. M., & RizkyPribadi, M. (2022, January).
Perancangan Ui/Ux pada Aplikasi V&F Menggunakan Metode Design Thinking. In MDP Student Conference (Vol. 1, No. 1, pp. 361-368).
[10] Pandusarani, G., Brata, A. H., & Jonemaro, E. M. A. (2018). Analisis User Experience pada Game CS:GO Dengan Menggunakan Metode Cognitive Walkthrough dan Metode Heuristic Evaluation.
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2(3), 940–950.
[11] Rosita, E., Hidayat, W., & Yuliani, W. (2021). Uji Validitas dan Reliabilitas Kuesioner Perilaku Prososial. FOKUS (Kajian Bimbingan & Konseling Dalam Pendidikan), 4(4), 279.
