Fakultas Ilmu Komputer
Universitas Brawijaya 2505
Evaluasi dan Perbaikan Alur dan Navigasi Website Event Surabaya Menggunakan Pendekatan Human Centered Design (HCD)
Nadia Humairo1, Hanifah Muslimah Az-Zahra2, Niken Hendrakusma Wardani3
1,2Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya
3Program Studi Agrobisnis Perikanan, Fakultas Perikanan dan Ilmu Kelautan, Universitas Brawijaya Email: 1[email protected], 2[email protected], 3[email protected]
Abstrak
Event Surabaya merupakan media website online yang bertujuan untuk memberikan informasi seputar acara atau event apa saja yang akan diselenggarakan di Kota Surabaya dan sekitarnya yang sudah berdiri sejak tahun 2010. Dalam melakukan wawancara, ditemukan permasalahan yaitu konten yang peletakannya tidak tepat, penamaan navigasi yang rancu, serta susah untuk langsung menemukan infromasi yang dicari sehingga berdampak pada pengoperasian website. Tujuan dari penelitian ini adalah untuk mengetahui apakah terjadi peningkatan nilai kepuasan pengguna sebelum dilakukan evaluasi dan setelah dilakukan evaluasi desain solusi. Berdasarkan permasalahan yang ditemukan, dilakukan Tree Testing untuk evaluasi awal website Event Surabaya. Aspek yang diukur saat melakukan metode Tree Testing meliputi Success Rate, Directness, Time Spent, First Click, dan Destination. Dalam pembuatan desain solusi, digunakan metode Close Card Sorting sebagai peletakan alur yang sesuai dengan ekspektasi pengguna, dengan hasil akhir berupa sitemap dan sesuai dengan usability guidelines lalu dilanjutkan dengan penerapan Information Architecture. Keseluruhan penelitian ini menggunakan pendekatan Human Centered Design yang pada setiap tahapannya sudah disetujui oleh stakeholder dan pengguna. Hasil akhir yang didapatkan pada penelitian ini adalah rekomendasi alur dan navigasi website dan peningkatan nilai kepuasan pengguna. Lalu, kesimpulan yang didapatkan dari penelitian ini menyatakan bahwa terdapat kenaikan nilai kepuasan pengguna yang sangat signifikan.
Kata kunci: Human Centered Design, Tree Testing, Card Sorting, Information Architecture, Alur dan Navigasi, Event Surabaya
Event Surabaya is an online media website that aims to provide information about any event that will be held in Surabaya and surroundings which was established since 2010. In order to obtain information, several problems were found during the interview; content incorrectly placed, naming ambiguous navigation, and hard time to find information directly and it also impact the website operations. The purpose of this research is to find out whether there is an improvement of the value from satisfaction users prior before doing evaluation and after evaluation design solution. Based on the problems found, Tree Testing was applied as the first evaluation for website Event Surabaya. Tree Testing method measure some aspects; Success Rate, Directness, Time Spent, First Click, and Destination. In making design solutions, the researcher used a method of Close Card Sorting as the laying of the mechanism in line with user expectations, with the final result of sitemap and based on a standard usability guidelines and continued with the Information Architecture. The whole research used by Human Centered Design (HCD) and in all levels has been approved by stakeholders and users. The final result in this research stated that the recommendation flow and navigation website showed the improvement of the value from satisfaction users was very significant.
Keywords: Human Centered Design, Tree Testing, Card Sorting, Information Architecture, Alur dan Navigasi, Event Surabaya
1. PENDAHULUAN
Event Surabaya merupakan media website online yang bertujuan untuk memberikan
informasi seputar event apa saja yang akan diselenggarakan di Kota Surabaya dan sekitarnya. Event Surabaya memanfaatkan media website sejak tahun 2010 hingga
sekarang. Informasi yang terdapat pada website Event Surabaya meliputi event yang tersedia hari ini, event yang tersedia minggu ini, event yang akan datang, dan kalender pencarian event.
Dalam penggalian informasi, ditemukan beberapa permasalahan yaitu konten yang peletakannya tidak tepat, penamaan navigasi yang rancu membuat informasi susah untuk ditangkap yang akan berdampak pada pengguna sehingga merasa kesulitan dalam pengoperasian website. Dalam penelitian website Event Surabaya ini, stakeholder menginginkan adanaya penambahan fitur yaitu dapat melakukan pembelian tiket secara direct melalui website tersebut.
Human Centered Design (HCD) memiliki 4 tahapan. Tahap pertama yaitu memahami dan menspesifikasikan konteks penggunaan. Tahap kedua, memahami dan menspesifikasikan kebutuhan pengguna. Tahap ketiga, untuk membuat desain solusi, dan tahap keempat, melakukan evaluasi desain solusi kembali (International Standards Office 2010). Penelitian ini juga berkaitan dengan Information Architecture, tujuan dari Information Arcitecture adalah untuk mengklasifikasikan konten secara jelas dan mudah dimengerti dan mengaturnya sesuai dengan hubungan antara potongan konten, yang memungkinkan pengguna untuk menemukan apa yang pengguna butuhkan (Usability 2015).
Dalam melakukan Evaluasi, metode Tree Testing digunakan untuk memberikan penglihatan untuk memahami apa yang pengguna inginkan pada website (Young 2019).
Selanjutnya, melakukan pembuatan sitemap guna mengetahui perbedaan tata letak konten.
Sitemap juga dibuat untuk menguji tentang tata letak navigasi dengan pengguna untuk memvalidasi (Interaction 2019). Sitemap digunakan sebelum wireframe dan pembuatan interface yang membantu dalam pengorganisasian halaman agar terstruktur dan dibantu dengan melibatkan Card Sorting. Dalam penggunaan Card Sorting¸ pengguna mengatur topik ke dalam kategori sesuai dengan perspektif pengguna serta berperan dalam pengkategoriaan serta pelabelan (Pandey 2019). Card Sorting terbagi menjadi dua, Open Card Sorting dan Close Card Sorting. Pada penelitian ini peneliti menggunakan Close Card Sorting, yaitu partisipan diminta untuk mengurutkan topik dari konten dalam website ke dalam kategori yang telah ditentukan sebelumnya. Target pengguna dalam penelitian ini adalah orang yang pernah
mengakses website Event Surabaya.
Berdasarkan dari penjabaran latar belakang diatas, maka penulis melakukan penelitian dengan judul “Evaluasi dan Perbaikan Alur dan Navigasi Website Event Surabaya dengan Menggunakan Pendekatan Human Centered Design (HCD)”.
2. METODOLOGI
Gambar 1. Diagram Alur Penelitian
Pada Gambar 1. Terdapat alur Penelitian yang menjelaskan keseluruhan penelitian ini.
Tahap pertama yang dilakukan ialah Studi Literatur, tahap ini digunakan untuk mencari referensi sumber, dasar teoti, serta ilmu yang relevan dengan penelitian ini.
Tahap kedua ialah Memahami dan Menspesifikasikan Konteks Penggunaan, tahap ini dilakuakn wawancara kepada pengguna dan stakeholder mengenai daftar penggunaan, karakteristik pengguna, dan lingkungan sistem.
Tahap ketiga ialah, Memahami dan Menspesifikasikan Kebutuhan Pengguna. Pada
tahap ini akan dilakukan Tree Testing evaluasi awal website Event Surabaya. Aspek yang diukur saat melakukan Tree Testing menurut (Schroder 2017) meliputi Success Rate, Directness, Time Spent, First Click, dan Destination.
Tahap keempat ialah Membuat Desain Solusi. Sebelum melakukan pembuatan desain solusi, permasakahan yang ditemukan saat evaluasi awal, dijabakan dan dilakukan pembuatan desain solusi yang sudah sesuai dengan Guideline. Metode Close Card Sorting digunakan dalam tahap ini yang bertugas sebagai peletakan alur sesuai dengan ekspektasi pengguna, dengan hasil akhir berupa sitemap.
Pada tahapan ini juga terdapat Information Architecture yang membahas Organizing System, Labeling System, Navigation System dan Search System.
Tahap kelima ialah Melakukan Evaluasi Desain Solusi. Tahap ini akan melakukan Tree Testing evaluasi desain solusi website Event Surabaya. Aspek yang diukur saat melakukan Tree Testing menurut sama seperti sebelumnya meliputi Success Rate, Directness, Time Spent, First Click, dan Destination. Dengan adanaya evaluasi kembali, diharapkan dapat mengetahui apakah semua kebutuhan pengguna terpenuhi.
Tahap keenam yaitu Melakukan Analisis dan Pembahasan. Tahapan ini dilakukan guna mengetahui apakah ada peningkatan nilai hasil evaluasi awal dan hasil evaluasi desain solusi.
Terakhir, tahap ketujuh ialah pembuatan kesimpulan dan saran.
3. HASIL
Pada Tabel 1. Tabel Tugas merupakan tugas yang dikerjakan oleh pengguna yang didapatkan dari hasil kebutuhan pengguna saat memahami dan menspesifikasikan konteks penggunaan.
Pada Gambar 2. Sitemap Awal merupakan bagaimana struktur website sebelum dilakuaknnya evaluasi. Selanjutnya pada Gambar 3. Persona merupakan persona pengguna website Event Surabaya.
Tabel 1. Daftar Tugas
NO TUGAS
1 Mencari informasi Tentang Event Surabaya
2 Mencari informasi acara seminar 3 Mencari informasi acara berdasarkan
tanggal yang diinginkan 4 Mencari informasi acara festival
5 Mencari informasi syarat dan ketentuan klien
6 Mencari informasi kebijakan
Gambar 2. Sitemap Awal
Gambar 3. Persona
Berikut hasil Tree Testing awal website Event Surabaya;
Tugas 1, success rate sebesar 33,33%, directness sebesar 33,33%, time spent selama 23,6 detik, first click sebesar 13,33%, dan
destination sebesar 26,67%.
Tugas 2, success rate sebesar 86,67%, directness sebesar 66,67%, time spent selama 12,1 detik, first click sebesar 73,33%, dan destination sebesar 80%.
Tugas 3, success rate sebesar 66,67%, directness sebesar 60%, time spent selama 10,2 detik, first click sebesar 55,35%, dan destination sebesar 86,67%.
Tugas 4, success rate sebesar 86,67%, directness sebesar 66,67%, time spent selama 11,4 detik, first click sebesar 73,33%, dan destination sebesar 73,33%.
Tugas 5, success rate sebesar 66,67%, directness sebesar 26,67%, time spent selama 14,3 detik, first click sebesar 20%, dan destination sebesar 53,33%.
Tugas 6, success rate sebesar 53,33%, directness sebesar 46,67%, time spent selama 20,3 detik, first click sebesar 46,67%, dan destination sebesar 53,33%.
Selanjutnya, memberikan pertanyaan kepada pengguna guna memperdalam pengetahuan mengenai kebutuhan pengguna yang hasilnya berupa daftar masalah dan daftar saran yang akan digunakan dalam pembuatan rekomendasi desain solusi di tahap selanjutnya.
Daftar masalah dan saran yang diterima kemudian dikaji sedemikian rupa yang merujuk kepada usability guidelines, yang selanjutnya akan dilakukan pembuatan rekomendasi perbaikan menggunakan Card Sorting dengan keluaran sitemap desain solusi.
Tabel 2. Daftar Masalah
NO Masalah
M1
Suka tersesat dan hilang arah saat menggunakan website karena tidak mempunyai navigasi
M2 Tidak terlihat kategori acara apa saja yang ada pada tanggal tersebut M3 Informasi yang diberikan pada konten
tidak lengkap bahkan kosong M4
Peletakan Informasi mengenai navigasi Event Surabaya yang susah untuk ditemukan
M5
Penamaan yang rancu membuat pengguna kesusahan untuk menemukan informasi yang dicari M6 Informasi kontak event Surabaya tidak
lengkap
Tabel 3. Daftar Saran
NO Saran
S1 Menambahkan navigasi pada bagian atas website.
S2
Menambahkan kategori acara apa saja yang ada pada tanggal tersebut dengan menambahkan tanda.
S3 Dilengkapi informasi yang sekiranya dibutuhkan oleh pengguna website S4
Meletakan navigasi kategori yang mudah terlihat oleh pengguna agar meminimalisir waktu pencarian S5 Penamaan konten disesuaikan dengan
informasi
S6 Diberikan berupa detail kontak kami dalam website Event Surabaya Tabel 4. Hasil Card Sorting
Kode Konten
Category About Us
Contact More
KK1 1 1 13
KK2 12 3
KK3 13 2
KK4 12 3
KK5 13 2
KK6 13 2
KK7 13 2
KK8 13 2
KK9 10 1 4
KK10 11 1 3
KK11 13 2
KK12 1 3 11
KK13 5 1 1 8
KK14 3 1 11
KK15 5 2 8
KK16 6 1 8
KK17 1 4 2 8
KK18 5 1 1 8
KK19 6 1 8
KK20 1 14
KK21 1 13 1
Gambar 4. Sitemap Desain Solusi
Pada saat melakukan Card Sorting, terdapat pengurangan konten, penambahan konten. Label yang diganti. Semua yang dilakukan sudah mendapat persetujuan dari stakeholder dan pengguna.
Selanjutnya, dilakukan pembuatan desain solusi sesuai dengan masalah dan saran yang sudah susai dengan standar usability guidelines, dan dilanjutkan dengan penerapan Information Architecture.
4. HASIL REKOMENDASI DESAIN Berikut merupkan hasil desain solusi berupa mockup menggunakan tools Figma
Gambar 5. Homepage Desain Solusi
Gambar 6. About Us Desain Solusi
Gambar 7. Contact Desain Solusi
Gambar 8.Kebijakan Desain Solusi
Gambar 9. Syarat dan Ketentuan Klien Desain Solusi
Gambar 10. Pembelian Tiket Desain Solusi
Organizing System, penelitian ini mengambil cara Topic Schemes. Topic Schemes merupakan konten yang sudah diatur sedemikian rupa sesuai dengan subjek tertentu dan saling berhubungan (Studio 2017)
Labeling System, perancangan desain solusi dibuat berdasarkan hasil wawancara kepada pengguna, analisis evaluasi awal website Event Surabaya menggunakan Tree Testing kepada pengguna, dan pertimbangan serta kesepakatan dari stakeholder.
Navigation System, yang digunakan ialah global karena navigasi terletak pada bagian atas website.
Search System¸ ialah Indexing by topic karena kita dapat mencari topic acara pada
website Event Surabaya sesuai dengan ekspektasi pengguna dengan memasukan nama acara tersebut pada bar pencarian (Rosenfeld 2015).
Tahap terakhir, melakukan evaluasi kembali Tree Testing Desain Solusi website Event Surabaya yang sudah dilakuakn rekomendasi perbaikan menggunakan tugas yang sama dengan eveluasi awal.
Tugas 1, success rate sebesar 93,33%, directness sebesar 80%, time spent selama 7,37 detik, first click sebesar 73,33%, dan destination sebesar 100%.
Tugas 2, success rate sebesar 100%, directness sebesar 86,67%, time spent selama 7,83 detik, first click sebesar 86,67%, dan destination sebesar 100%.
Tugas 3, success rate sebesar 100%, directness sebesar 80%, time spent selama 6,92 detik, first click sebesar 80%, dan destination sebesar 100%.
Tugas 4, success rate sebesar 100%, directness sebesar 86,67%, time spent selama 8,07 detik, first click sebesar 86,67%, dan destination sebesar 100%.
Tugas 5, success rate sebesar 93,33%, directness sebesar 66,67%, time spent selama 7,02 detik, first click sebesar 73,33%, dan destination sebesar 93,33%.
Tugas 6, success rate sebesar 93,33%, directness sebesar 80%, time spent selama 7,09 detik, first click sebesar 80%, dan destination sebesar 93,33%.
5. KESIMPULAN DAN SARAN 5.1 KESIMPULAN
Kesimpulan dari penelitian ini, terdapat peningkatan nilai kepuasa pengguna dari evaluasi awal dan evaluasi desain solusi.
1. Hasil dari Tree Testing awal website Event Surabaya untuk 6 tugas yang mencakup Success Rate, Directness, Time Spent, First Click, dan Destination adalah:
• Success Rate, nilai yang didapatkan dari pengujian evaluasi awal
menggunakan tree testing medapatkan nilai sebesar 65,5%
• Directness, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 46,6%
• Time Spent, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 15,3%
• First Click, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 46,6%
• Destination, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 62,2%
2. Perbaikan tampilan antarmuka website Event Surabaya yang menggunakan pendeketan Human Centered Design (HCD) mengalami beberapa perbedaan dari sebelum dan sesudah dilakukannya pembuatan desain solusi. Pertama, penambahan dan pengurangan navigasi seperti About Us, Contact, dan More. Kedua, perubahan penamaan yang sebelumnya Kategori menajadi Category, Tentang Event Surabaya menjadi About Us, dan Kontak Kami menajadi Contact. Perbaikan yang dilakukan berdasarkan pengujian menggunakan Card Sorting dan mendapatkan keluaran Sitemap dimana dapat terlihat perbedaan struktur tata letak dari desain awal dan desain solusi.
3. Hasil dari Tree Testing kedua Desain Solusi website Event Surabaya mencakup Success Rate, Directness, Time Spent, First Click, dan Destination adalah:
• Success Rate, nilai yang didapatkan dari pengujian evaluasi awal
menggunakan tree testing medapatkan nilai sebesar 96,6%
• Directness, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 80,1%
• Time Spent, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 7,3%
• First Click, nilai yang didapatkan dari pengujian evaluasi awal menggunakan tree testing medapatkan nilai sebesar 80%
• Destination, nilai yang didapatkan dari pengujian evaluasi awal menggunakan
tree testing medapatkan nilai sebesar 97,7%
• Pada evaluasi awal Success Rate, nilai yang didapatkan dari pengujian evaluasi awal menggunakan Tree Testing medapatkan nilai sebesar 65,5%.
Kemudian pada evaluasi desain solusi mengalami peningkatan nilai menjadi 96,6%.
• Pada evaluasi awal Success Rate, nilai yang didapatkan dari pengujian evaluasi awal menggunakan Tree Testing medapatkan nilai sebesar 62,2%.
Kemudian pada evaluasi desain solusi mengalami peningkatan nilai menjadi 97,7%.
5.2 SARAN
Saran yang diberikan oleh peneliti;
diharapkan, penelitian yang akan datang akan membahas mengenai tampilan antarmuka pengguna website Event Surabaya agar mengetahui apakah terdapat perbedaan nilai kepuasan pengguna antara tampilan sebelum dan tampilan sesudah dilakukannya perbaikan desain solusi dan terdapat penelitian yang akan membahas bagaimana nilai apabila dilakukan dengan judul yang sama dan berfokus pada mobile website Event Surabaya agar mengetahui apakah terdapat perbedaan nilai kepuasan pengguna antara tampilan sebelum dan tampilan sesudah dilakukan perbaikan desain solusi.
6. DAFTAR PUSTAKA
Every. 2019. What is Sitemap? Accessed February 5, 2020.
https://www.everyinteraction.com/definitio n/sitemap/.
International Standards Office. 2010. ISO 9241- 210 Ergonomics of Human-System
Interaction Part 210: Human-Centered Design For Interactive Systems.
Switzerland: ISO.
Pandey, Saurav. 2019. Card Sorting — what, how & the perks. Accessed Maret 29, 2020. https://uxdesign.cc/card-sorting- what-how-the-perks-29f6cb020270.
Rosenfeld, L., Morville, P. & Arango, J. 2015.
Information Architecture For the Web and Beyond. 4th. Canada: O'Reily Media.
Schroder, Alana. 2017. Tree Testing: Making Navigation Menus More Intuitive & Easier to Use. Accessed February 5, 2020.
https://uxplanet.org/tree-testing-making- navigation-menus-more-intuitive-easier-to- use-fbdc5be2e6bf.
Studio, Tubik. 2017. Information Architecture.
Basics for Designers. Accessed May 15, 2020. https://uxplanet.org/information- architecture-basics-for-designers- b5d43df62e20?gi=6a24342a7154.
Usability, gov. 2015. Information Architecture Basics. Accessed 3 31, 2020.
https://www.usability.gov/what-and- why/information-architecture.html#.
Young, Neil. 2019. What is Tree Testing?
Accessed February 8, 2020.
https://www.experienceux.co.uk/faqs/what -is-tree-testing/.
