Redesigning Del Institute of Technology’s website

~ Eksplorasi dan Analisis

Daftar isi

1. Introduction
2. Redesign

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.

1. Institut Teknologi Bandung

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.

Gambar 1. Cuplikan konten yang diisi pada slider website Institut Teknologi Bandung

Namun, ada konten yang mencolok sehingga sedikit mengganggu pengguna, yaitu warna yang digunakan pada tombol Search dan tombol Login. Dapat dilihat pada Gambar 2.

Gambar 2. Cuplikan header web

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.

Gambar 3. Cuplikan halaman website Institut Teknologi Bandung

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.

Gambar 4. Cuplikan fitur yang disertai dengan objek pada website Institut Teknologi Bandung

Flow

Flow untuk task mengakses halaman Interior Design pada website Universitas Bina Nusantara dapat dilihat pada Gambar 5.

Gambar 5 Flow untuk mengakses halaman Informasi Umum website Institut Teknologi Bandung

2. Universitas Bina Nusantara

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.

Gambar 6. Cuplikan halaman website Universitas Bina Nusantara untuk 1 kelompok konten

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.

Gambar 7 Cuplikan fitur pada halaman website Universitas Bina Nusantara

Flow

Flow untuk task mengakses halaman Interior Design pada website Universitas Bina Nusantara dapat dilihat pada Gambar 8.

Gambar 8 Flow mengakses halaman Interior Design Universitas Bina Nusantara

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.

Gambar 9 Cuplikan bagian bawah halaman website TU Delft

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.

Gambar 10 Cuplikan hover menu Education pada websitu TU Delft

Flow untuk task mengakses halaman PhD Programmers pada website TU Delft dapat dilihat pada Gambar 11.

Gambar 11 Flow mengakses halaman PhD Programmers pada website TU Delft

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.

Gambar . Cuplikan halaman Berkeley University of California

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.

Gambar 13, Cuplikan interaksi pada website Berkeley University of California

Flow

Flow untuk task mengakses halaman Overview pada website Berkeley University of California dapat dilihat pada Gambar 14.

Gambar 14 Flow mengakses halaman Overview pada website Berkeley University of California

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.

Gambar 15 Cuplikan menu pada halaman website Institut Teknologi Bandung dengan sub-menu

Gambar 16 Cuplikan menu pada halaman website Universitas Bina Nusantara dengan sub-menu

Gambar 17 Cuplikan menu pada halaman website Institute of Technology (TU Delft) dengan sub-menu

Gambar 18 Cuplikan menu pada halaman website Berkeley University of California dengan sub-menu

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

1. TU Delf University, “Tudelf University” 2020. [Online]. Available: https://www.tudelft.nl/en/ [Accessed: 13 May 2020]
2. Institut Teknologi Bandung, (undated). [Online]. Available: https://www.itb.ac.id/ [Accessed: 15 Mei 2020]
3. BINUS Higher Education, Binus University, (undated). [Online]. Available: https://binus.ac.id/ [Accessed: 15 May 2020].
4. Berkeley University of California, 2020. [Online]. Available: https://www.berkeley.edu/ [Accessed: May 2020].
5. Oz. 2018. “UXBeginner Glossary”, (online). Dapat diakses pada: https://www.uxbeginner.com/