DAFTAR ISI
Tahap 1 : Evaluasi Website IT Del
1.1 Heuristic Evaluation
Tahap 2 : Eksplorasi dan Analisis
2.1 User Flow
2.1.1 Website Universitas Luar Negeri
2.1.2 Website Universitas Dalam Negeri
2.2 Task Flow
2.2.1 Website Universitas Luar Negeri
2.2.2 Website Universitas Dalam Negeri
2.3 Arsitektur Informasi
2.3.1 Website Universitas Luar Negeri
2.3.2 Website Universitas Dalam Negeri
Tahap 3: Merancang Ulang Website IT Del
3.1 Daftar Masalah
3.1 Deskripsi
3.2 Rancangan UI
3.2.1 Tentang Del
3.2.2 Program Pendidikan
Analysis of User Experience in University Websites
Tahap II : Evaluasi Website Universitas
Website perguruan tinggi merupakan hal yang cukup populer dicari oleh calon mahasiswa. Website universitas bukan sekedar sumber informasi mengenai profil dan kegiatan kampus. Melainkan juga tampilan yang menarik dan struktur penyusunan navigasi akan membuat website disukai pengujung yang bukan hanya calon mahasiswa saja. Terdapat beberapa perbedaan pengalaman pengguna dalam mengakses website perguruan tinggi dalam dan luar negeri. Perbedaan ini berdasarkan struktur informasi sitemap, task flow dan user flow.
Website Universitas Dalam Negeri
Hampir semua univesitas di Indonesia memiliki website untuk memudahkan orang dalam mengetahui informasi dan profil kampus tanpa harus datang ke kampus secara langsung.
Universitas Indonesia
Berikut merupakan tampilan halaman utama website Universitas Indonesia. Gambar background yang digunakan sesuai dengan konten pada setiap fungsi website.
Berdasarkan struktur penyusunan menu bar sudah cukup baik, setiap menu merepresentasikan konten yang terdapat didalamnya. Information Architecture website Universitas Indonesia menggunakan bentuk deep. Hal ini dapat dilihat pada struktur menu bar pada website Universitas Indonesia.
Kombinasi pemilihan warna tulisan (font) dengan background sesuai lambang universitas Indonesia. Setiap menu dan konten dapat dibaca dengan jelas dan tidak membingungkan user yang mengakses website mereka. Salah satu yang menarik dari website UI adalah slider yang dapat memberikan infroamsi terkini terkait kampus secara dinamis, sehingga terkesan tidak membosankan. Hal ini dapat dijadikan sebaga referensi dalam memulai redesign website IT Del pada bagian berita terkini terkait kampus.
Header merupakan komponen yang terletak pada bagian paling atas dalam tampilan website. Semua website universitas yang telah saya eksplorasi sebelumnya memiliki header dan navigasi pada websitenya. Salah satunya adalah website Universitas Indonesia pada gambar berikut.
Salah satu website dengan struktur menu yang cukup baik adalah Universitas Indonesia. Penyusunan setiap menu dimulai dari informasi yang paling umum yang biasanya diakses user hingga informasi khusus terkait kampus. Namun, penempatan logo Universitas Indonesia tidak sesuai diletakkan dibawah ikon sosial media. Dikarenakan sosial media pada umumnya, akan diakses oleh user ketika ingin mengetahui informasi lebih lanjut mengenai kampus. Sehingga lebih baik diletakkan dibagian footer website.
Berikut adalah task flow dan user flow yang dilakukan user ketika mengakses halaman informasi penerimaan mahasiswa baru pada website Universitas Indonesia.
Ketika user ingin mengetahui informasi penerimaan mahasiswa baru Universitas Indonesia, maka user perlu mengakses halaman informasi seleksi pada sub menu penerimaan berdasarkan task flow yang terdapat pada gambar 9.
Hampir semua website universitas di dalam negeri memiliki user flow yang sama untuk menemukan informasi penerimaan mahasiswa baru. Setiap menu akan dicek oleh user untuk menemukan penerimaan.
Website Institut Teknologi Bandung
Berikut merupakan tampilan halaman utama website Institut Teknologi Bandung. Pemilihan warna dengan jenis tulisan sudah sesuai. Namun penempatan ikon sosial media lebih baik ditempatkan dibagian footer.
Logo Institut Teknologi Bandung sesuai dengan kombinasi warna background yang digunakan. Ditambah lagi dengan informasi slide bar yang bersifat dinamis dalam menampilkan informasi.
Struktur menu disusun berdasarkan tingkat kepentingan informasi yang diberikan hingga informasi yang bersifat khusus. Bagian Footer pada website Institut Teknologi Del sangat baik, dikarenakan menambahkan Peta Situs yang memudahkan user untuk mengetahui informasi yang terdapat dalam website.
Selain site map, website Institut Teknologi Bandung juga menerapkan breadcrumbs. Fungsi dari breadcrumbs ini untuk mengetahui posisi halaman user saat ini ketika mengakses salah satu halaman.
Berikut adalah adalah task flow dan user flow yang dilakukan ketika user ingin mengetahui visi misi dari kampus Institut Teknologi Bandung.
Ketika user ingin mengakses halaman visi misi Institut Teknologi Bandung task flow pada gambar 15 memperlihatkan beberapa menu yang perlu dikunjungin oleh user hingga menampilkan halaman visi misi.
Dalam task flow terdapat beberapa user flow yang dilakukan oleh user ketika menuju ke halaman visi dan misi Institut Teknologi Bandung. Apabila menu pada task flow tidak ditemukan pada halaman awal website, maka user akan mencari lagi menu visi misi pada setiap menu yang terdapat dalam Navigasi Bar.
Website Universitas Luar Negeri
Pada umumnya website universitas luar negeri memiliki sitemap dan information architecture menggunakan model deep.
Website Deflt Institute of Technology
Deflt Institute of Technology merupakan sebuah universitas yang terletak di Deflth Belanda. Tampilan website ini secara umum sangat menarik dan responsive. Struktur penyusunan menunya cukup simpel sesuai dengan tingkat hierarkinya.
Website Deflt Institute of Technology menggunakan elemen User Interface Breadcrumbs untuk menginformasikan kepada user terkait halaman yang diaksesnya.
Hanya beberapa website yang menerapkan breadcrumb seperti website Delft Institute of Technology (TU Delft). Ketika user ingin kembali ke halaman awal dari halaman tertentu, maka user dapat menggunakan breadcrumb pada website sehingga user tidak tersesat ketika menjelajahi websitenya.
Pada tampilan halaman utama website Deflt Institute of Technology terdapat whitespace yang terlalu banyak, sehingga terlihat kosong karena tidak ada konten yang mengisinya. Berikut merupakan task flow dan user flow untuk mengetahui alumni dari universitas Deflt Institute of Technology.
Ketika user ingin mengakses halaman informasi alumni, seperti tempat mereka bekerja dan jenis pekerjaan mereka, maka user perlu melakukan beberapa task pada gambar 21 untuk menuju ke halaman informasi alumni.
Dalam melakukan Task flow pada gambar 21, user perlu melakukan beberapa langkah-langkah yang digambarkan dalam gambar 22. Pertama sekali user mengakases website TU Deflt dan mencari menu About pada Navigasi Bar, setelah ditemukan, maka user memilih sub menu Alumni dan user akan menuju informasi alumi TU Deflt.
Website Stanford University
Website Stanford University sangat bagus dan sederhana. Kombinasi warna dan jenis tulisan yang digunakan sesuai sehingga setiap menu dan tulisan dalam website dapat terlihat dengan jelas. Layout websitenya yang memudahkan pembaca untuk mencerna aliran informasi dengan menggunakan susunan layout paling umum adalah atas-bawah-kiri-kanan.
Selain tampilannya yang menarik, website stanford university menyediakan akses cepat kesetiap konten dalam website melalui indeks pada website. Tentu fitur ini memudahkan user untuk mengetahui informasi yang terdapat dalam website.
Untuk website universitas Luar Negeri, task flow dan user flow sama. Namun yang membedakannya adalah struktur penyajian informasi yang diberikan melalui masing masing website. Berikut merupakan task flow dan user flow yang dilakukan ketika user ingin mengakses halaman program studi.
Ketika user mengkases halaman program studi pada website Stanford University, maka user perlu menuju menu Academic yang terdapat pada Navigasi Bar, seperti yang diperlihatkan dalam gambar 25. Maka user akan melihat daftar program studi yang tersedia pada kampus Stanford University.
Dalam melakukan Task flow pada gambar 26, user perlu melakukan beberapa langkah-langkah yang digambarkan dalam gambar 26. Pertama sekali user mengkases website Stanford University dan mencari menu Academics pada Navigasi Bar apabila user tidak menemukannya maka user kembali pada navigasi bar, setelah ditemukan, maka user memilih sub menu informasi program pendidikan yang diinginkan pada halaman Program Studi.
Referensi
[1]
R. Sianturi, “User Research [1],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-1/.
[2]
R. Sianturi, “User Research [2],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-2/.
[3]
R. Sianturi, “Persona,” 2020. [Online]. Available: https://riyanthisianturi.com/persona/.
[4]
R. Sianturi, “Design Principles,” 2020. [Online]. Available: https://riyanthisianturi.com/design-principles/.
[5]
J. Nielsen, “How to Conduct a Heuristic Evaluation,” 1 November 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/.
[6]
R. Sianturi, “Information Architecture,” April 2020. [Online]. Available: https://riyanthisianturi.com/information-architecture/.
[7]
Institut Teknologi Del, “Institut Teknologi Del,” 2020. [Online]. Available: https://www.del.ac.id/. [Accessed May 2020].
[8]
R. Sianturi, “Heuristic Evaluation,” 2020. [Online]. Available: https://riyanthisianturi.com/heuristic-evaluation/.
[9]
Stanford University, “Stanford University,” 2020. [Online]. Available: https://www.stanford.edu/. [Accessed May 2020].
[10]
Universitas Indonesia, “Universitas Indonesia,” 2020. [Online]. Available: https://ui.ac.id/. [Accessed May 2020].
[11]
R. Sianturi, “Design Testing [1],” May 2020. [Online]. Available: https://riyanthisianturi.com/design-testing/.
[12]
R. Sianturi, “Wireframe, Annotation and Prototyping,” May 2020. [Online]. Available: https://riyanthisianturi.com/wireframe-annotation-and-prototyping/.
[13]
I. o. T. Deflt, “Defl Institute of Technology,” 2020. [Online]. Available: : https://www.tudelft.nl/en/. [Accessed June 2020].
[14]
ITB, “Institut Teknologi Bandung,” 2020. [Online]. Available: https://www.itb.ac.id/. [Accessed May 2020].
