Redesigning Del Institute of Technology’s website
~ Eksplorasi dan Analisis
Daftar isi
2.1. TAHAP I: EVALUASI WEBSITE IT DEL
2.1.1. Temuan
2.1.2. Rekomendasi
2.2. TAHAP II: EVALUASI WEBSITE UNIVERSITAS
2.2.1. Institut Teknologi Bandung
2.2.2 Universitas Bina Nusantara
2.2.3 Delf Institute of Technology (TU Delft)
2.2.4 Berkeley University of California
2.3. TAHAP III: MERANCANG ULANG WEBSITE IT DEL
2.3.1 Daftar Masalah dan Rekomendasi Perbaikan
2.3.2 Information Architecture
2.3.3 Prototype Baru Website IT Del
2.3.4 Usability Testing
2.2. TAHAP II: EVALUASI WEBSITE UNIVERSITAS
Tahapan selanjutnya adalah Eksplorasi dan Analisis terhadap website universitas dalam dan luar negeri yang telah dibahas pada artikel 5 Elemen User Experience Design.
Desain
Informasi pada website Institut Teknologi Bandung dikategorikan berdasarkan fungsi objek-objek yang digunakan atau yang dikenal dengan penggunaan konsep Unity. Pada bagian atas website, tepatnya pada slider, website Institut Teknologi Bandung menyajikan informasi berdasarkan 3 pilar pendidikan yang ditekankan oleh mereka, yaitu Exellence in Teaching, Exellence in Research, dan Exellence in Inovation dapat dilihat pada Gambar 1.
Namun, ada konten yang mencolok sehingga sedikit mengganggu pengguna, yaitu warna yang digunakan pada tombol Search dan tombol Login. Dapat dilihat pada Gambar 2.
Perpaduan warna oranye dan warna putih pada tombol search dan warna kuning pada tombol login menjadikan desain yang terlihat seperti sedikit mengganggu pandangan pengguna.
Disisi lain, saya masih kurang sepemahaman terkait dengan layout yang ada pada website. Dimana, masih terdapat tata letak yang kurang efektif dan efisien seperti contohnya pada Gambar 3.
Sebaiknya, layout yang digunakan bukanlah 1 konten untuk baris. Ada baiknya jika disisi kiri diletakkan konten ITBTalks, lalu diikuti dengan konten Quick Access seperti Kalender Akademik, Darurat Covid, Berita terbaru, ataupun konten prioritas yang lainnya.
Interaksi
Website Institut Teknologi Bandung menerapkan affordance pada fitur yang diberikan, dimana fitur-fitur disertai dengan objek untuk memperjelas bahwasannya objek tersebut adalah fitur dapat digunakan, dapat dilihat seperti pada Gambar 4.
Flow
Flow untuk task mengakses halaman Interior Design pada website Universitas Bina Nusantara dapat dilihat pada Gambar 5.
Desain
Desain website Universitas Bina Nusantara cenderung lebih fit kepada jendela halaman website, dimana konten dimaksimalkan ditampilkan pada website sehingga meminimalisir whitespaces. Namun, penerapannya juga sedikit terlihat seperti tidak seimbang, sehingga untuk 1 konten tidak dioptimalkan dalam satu pandangan pada halaman saja, pengguna harus memberi usaha untuk men-scroll halaman. Seperti pada Gambar 6.
Interaksi
Website Universitas Bina Nusantara juga menerapkan affordance pada fitur yang diberikan, dimana fitur-fitur disertai dengan objek untuk memperjelas bahwasannya objek tersebut adalah fitur dapat digunakan dan dapat menarik perhatian pengunjung, dapat dilihat seperti pada Gambar 7 fitur yang disertai dengan gambar.
Flow
Flow untuk task mengakses halaman Interior Design pada website Universitas Bina Nusantara dapat dilihat pada Gambar 8.
3. Delf Institute of Technology (TU Delft)
Desain
Desain pada website TU Delft berbeda dari 3 website yang dikaji dalam laporan ini. Website TU Delft menyediakan menu yang posisinya fix pada bagian bawah halaman website seperti pada Gambar 9. Namun ada 2 sisi pandangan terhadap fitur ini, ada yang menganggap tidak sesuai dengan Heuristic Match Between System and The Real World dan ada juga yang menganggap bahwa desain ini adalah hasil inovasi yang perlu diapresiasi.
Interaksi
Pada website TU Delft khususnya pada bagian menu utama, pengguna tidak diharuskan untuk memilih menu untuk mengetahui apa submenu dari tiap menu yang diberikan. Seperti pada Gambar 10, submenu ditampilkan pada saat pengguna meletakkan kursor diatas menu. Dengan kata lain, submenu ditampilkan pada saat hover menu sedang aktif.
Flow untuk task mengakses halaman PhD Programmers pada website TU Delft dapat dilihat pada Gambar 11.
4. Berkeley University of California
Desain
Tata letak informasi yang diterapkan pada website Berkeley University of California sudah baik dengan peletakan yang cukup efisien dan efektif, dimana pada bagian kanan website, disisipkan konten events yang dapat diketahui oleh pengguna tanpa mengakses fitur tertentu. Dapat dilihat pada Gambar 12.
Interaksi
Interaksi antara pengguna dan website pada Website Berkeley University of California sudah terlihat perbedaan objek yang berinteraksi dengan pengguna dan objek yang tidak berinteraksi dengan pengguna. Seperti pada Gambar 12, objek sebelah kanan adalah objek yang berinteraksi dengan pengguna, dan website memberikan perbesaan dengan konsep hover pada objek yang berinteraksi.
Flow
Flow untuk task mengakses halaman Overview pada website Berkeley University of California dapat dilihat pada Gambar 14.
Cara Menyajikan Informasi
Website Institut Teknologi Bandung, Universitas Bina Nusantara, Delf Institute of Technology (TU Delft), dan Berkeley University of California menggunakan site map dengan susunan menu deep karna setiap menu disertai dengan sub-menu dan pengguna memerlukan banyak aksi untuk mencapai setiap sub-menu dan sub-menu yang paling dalam seperti pada Gambar 15, Gambar 16, Gambar 17, Gambar 18.
Hal tersebut jelas adanya dikarenakan website universitas pada umumnya menyajikan informasi yang cukup luas terkait universitas tersebut, sehingga penyusunan menu yang tepat adalah menu deep yang dapat mempermudah pengguna mencari informasi.
Referensi
- TU Delf University, “Tudelf University” 2020. [Online]. Available: https://www.tudelft.nl/en/ [Accessed: 13 May 2020]
- Institut Teknologi Bandung, (undated). [Online]. Available: https://www.itb.ac.id/ [Accessed: 15 Mei 2020]
- BINUS Higher Education, Binus University, (undated). [Online]. Available: https://binus.ac.id/ [Accessed: 15 May 2020].
- Berkeley University of California, 2020. [Online]. Available: https://www.berkeley.edu/ [Accessed: May 2020].
- Oz. 2018. “UXBeginner Glossary”, (online). Dapat diakses pada: https://www.uxbeginner.com/