Redesigning Del Institute of Technology Website by Exploring Other Campus Websites: Case Study — About Del and Study Programs [2]
DAFTAR ISI
- Tahap I: Evaluasi Website IT Del
- Tahap II: Evaluasi Website Universitas
- Tahap III: Merancang Ulang Website IT Del
- Usability Testing
TAHAP II: EVALUASI WEBSITE UNIVERSITAS
Evaluasi dilakukan dengan mengeksplorasi website perguruan tinggi lain, baik dari dalam negeri maupun luar negeri. Website yang akan dieksplorasi adalah website milik Universitas Indonesia [4], Institut Teknologi Bandung [5], Stanford University [6], dan Columbia University [7].
1.1 Universitas Indonesia
Pada halaman beranda, website ini menyajikan image slider yang berisi banner mengenai profil UI serta kebijakan baru. Kemudian berita, informasi penerimaan mahasiswa baru, pengumuman, informasi tentang international scholar serta kanal video. Pada menu Tentang UI terdapat lima klaster informasi, yaitu Selayang Pandang, Struktur UI, Fakta Prestasi, Lain Lain, dan Katalog Statistik. Banyaknya klaster informasi didorong oleh banyaknya informasi yang ingin disajikan kepada pengguna. Penggunaan bahasa yang jelas untuk mendeskripsikan isi menu, membuat struktur informasi pada menu Tentang UI ini menjadi sangat jelas dan baik. Desain yang didominasi warna putih dan highlight berwarna kuning konsisten pada setiap halaman dan pemilihan warna ini juga sangat tepat untuk merepresentasikan Universitas Indonesia.
Informasi mengenai program pendidikan yang terdapat pada Universitas Indonesia terdapat pada menu Akademik dan rinciannya ditempatkan pada sub-menu Fakultas. Dibawah sub menu Fakultas terdapat 14 sub menu, yaitu Fakultas Kedokteran, Fakultas Ekonomi & Bisnis, Fakultas Hukum, Fakultas Kedokteran Gigi, Fakultas Teknik, Fakultas Ilmu Peng. Budaya, Fakultas Psikologi, Fakultas Kesehatan Masy., Fakultas Matematika & IPA, Fakultas I. Sosial & I. Politik, Fakultas Ilmu Komputer, Fakultas Ilmu Keperawatan, Fakultas Fasmasi, Fakultas Ilmu Administrasi, dan Program Vokasi.
Desain antarmuka pada website Universitas Indonesia sudah menerapkan konsep UI yang baik, diantaranya adalah:
a. Pemilihan warna
Variasi warna yang diterapkap pada keseluruhan halaman pada website ini tidak terlalu banyak sehingga tidak menimbulkan kesan ‘heboh’ yang diantaranya adalah putih (dominan pada background), hitam (dominan pada iconography), abu tua (dominan pada header pada halamam tertentu), abu muda (dominan pada teks), dan kuning (dominan pada highlight).
b. Susunan informasi
Banyaknya informasi telah disusun menjadi klaster pada setiap menu. Pemilihan kata yang representatif membuat pencarian isi mudah diprediksi. Misalnya pencarian informasi fakultas mudah ditebak karena menggunakan kata ‘Akademik’.
c. Tombol ‘ke atas’
Informasi yang disajikan pada setiap halaman membutuhkan scroll dari pengguna. Untuk mengefisiensikan waktu pengguna untuk kembali ke konten paling atas, setiap halaman dilengkapi dengan tombol ‘ke atas’
d. Penggunaan Breadcrumb
Breadcrumb membantu pengguna untuk mengidentifikasi current page sehingga tidak memaksa pengguna untuk menghapal flow yang telah dilalui.
e. Melengkapi halaman dengan sitemap
Website ini dilengkapi dengan sitemap sehingga dapat membantu pengguna untuk melihat keseluruhan struktur informasi yang ada di dalam website ini.
Namun di beberapa hal masih terdapat praktik konsep UI yang belum tepat, diantara adalah:
a. Link infomasi klaster struktur informasi yang ambigu
Penempatan seperti ini membuat saya mengira bahwa Majelis Wali Amanat, Pimpinan Universitas, dan seterusnya adalah breadcrumb, padahal letak breadcrumb ada di sebelah kanan atas.
b. Pemilihan warna font
Pemilihan warna font pada menu yang kurang tajam membuat kesan menu tersebut disable. Sebaiknya memakai warna hitam pekat.
Selain itu, pemilihan warna pada saat menu dipilih juga kurang tepat. Latar putih dengan tulisan kuning membuatnya sulit dibaca. Selainnya memberikan highlight kuning dan tulisan hitam pekat.
1.2 Institut Teknologi Bandung
Pada halaman beranda, website ini menyajikan banner besar tergantung event yang sedang terjadi (saat ini mengenai Darurat COVID 19), FAQ, Sambutan, berita, video, dan kalender akademik. Pada menu Tentang ITB terdapat empat sum menu utama, yaitu Informasi Umum dan Sejarah, Administrasi, Mengunjungi ITB, dan Multi Kampus. Setiap sub menu yang berada dibawahnya akan disusun secara vertikal (deep). Apabila menu dipilih akan muncul hightlight berwarna ungu dan tulisan tetap berwarna putih.
Informasi mengenai program pendidikan yang terdapat pada Institut Teknologi Bandung berada pada menu Perkuliahan yang memiliki tiga sub-menu utama, yaitu Fakultas dan Sekolah, Program Studi Sarjana, dan Program Studi Pasca Sarjana. Setiap menu dibawahnya juga disusun secara vertikal atau deep.
Desain antarmuka pada website Institut Teknologi Bandung sudah menerapkan konsep UI yang baik, diantaranya adalah:
a. Melengkapi website dengan sitemap (Peta situs)
b. Penggunaan gambar flat design
Hal ini menjadi hal unik dan menarik untuk meningkatkan minat baca. Hal ini juga dapat menjadi ciri khas website ITB apabila diterapkan pada banner di halaman paling awal.
Namun di beberapa hal masih terdapat praktik konsep UI yang belum tepat, diantara adalah:
a. Banyak space yang tidak digunakan
Hal ini menyebabkan banyaknya scroll yang dibutuhkan pengguna untuk memperoleh informasi di akhir halaman.
b. Kata Perkuliahan pada menu
Pemilihan kata yang lebih tepat merepresentasikan isi menu adalah ‘Pendidikan’ atau ‘Akademik’.
c. Menu statis
Setelah scroll, menu tidak turut turun secara dinamis sehingga pengguna harus melakukan scroll up panjang.
1.3 Stanford University
Pada halaman About terdapat beberapa klaster informasi, diantaranya adalah Leadership (berisi profil para petinggi kampus yang pernah dan sedang menjabat), History (berisi informasi sejarah, perbedaan Stanford dulu dan sekarang, serta perkembangan Stanford), dan Visiting Stanford (berisi informasi layanan kunjungan Stanford secara langsung, virtual tours, dan other resources). Halaman yang didominasi warna putih dan merah ini dilengkapi dengan gambar yang mendukung informasinya. Halaman ini juga memiliki banyak whitespace sehingga mata tidak terlalu lelah untuk melihatnya.
Informasi mengenai program pendidikan terdapat pada menu Academics. Halaman ini membagi informasi menjadi tiga klaster, yaitu Undergraduate Studies (berisi informasi major serta fakta dan gambaran mahasiswa undergraduate), Graduate Studies (berisi informasi mengenai Kantor Wakil Provost untuk Pendidikan Pascasarjana serta fakta dan gambaran mahasiswa graduate). Halaman awal pada menu ini tidak serta merta menampilkan semua informasi di dalam halaman tersebut. Untuk memperoleh informasi, pengguna harus menuju halaman yang berisi informasi yang dibutuhkan melalui link yang dicantumkan pada setiap section yang terdapat pada halaman tersebut. Hal ini membuat halaman menjadi tidak panjang dan banyak whitespace.
Desain antarmuka pada website Stanford University sudah menerapkan konsep UI yang baik, diantaranya adalah:
a. Pemilihan warna yang baik
Warna yang dipakai dominan merah dan putih saling mengisi, baik sebagai highlight maupun latar. Tidak terlalu mencolok dan terkesan mewah.
b. Header menu dinamis
Header ini akan mengikuti pergerakan halaman seiring scroll yang dilakukan oleh user sehingga user tidak perlu melakukan scroll up untuk kembali menuju konten teratas.
Namun di beberapa hal masih terdapat praktik konsep UI yang belum tepat, diantara adalah:
a. Ukuran gambar dan tulisan yang terlalu besar
Ukuran item yang terlalu besar membuat user harus melakukan banyak scroll untuk menjelajahi halaman yang ada di dalam website ini.
b. Pemilihan gambar yang terlalu terang
Gambar dibawah ini merupakan gambar yang ditempatkan pada bagian bawah halaman di sebagian besar halaman di dalam website. Gambar ini menunjukkan gambar matahari yang memancarkan cahaya terang yang dapat merangsang psikologi user yang melihat gambar tersebut. Ada user yang akan spontan menyipitkan mata karena telah menetapkan bahwa gambar sinar matahari itu sangatlah terang.
1.4 Columbia University
Sama seperti website Stanford, website Columbia University juga memuat informasi mengenai Columbia University pada halaman About. Halaman ini diawali dengan video yang berisi profil Columbia University, kemudian disusul oleh enam klaster informasi, yaitu History, Statistic and Facts, Visiting Columbia’s Campuses, University Administration, Office of the President, dan University Senate. Selain itu terdapat pula section yang berisi peta kampus, identity guidelines, dan upcoming events.
Informasi mengenai program pendidikan terdapat pada halaman Academics. Halaman ini menyajikan lima klaster informasi, yaitu Schools, Departements, Centers and Institutes, Areas of Study, dan Office of the Provost. Selain itu terdapat section informasi mengenai Resource dengan menyajikan informasi Faculty of Arts and Science, Academic Calendar, Courseworks, Directory of Classes, Registrar, High School Programs, Libraries, dan University Life.
Desain antarmuka pada website Columbia University sudah menerapkan konsep UI yang baik, diantaranya adalah:
a. Pemilihan warna yang baik
Warna yang dipakai dominan biru dan putih saling mengisi, baik sebagai highlight maupun latar. Tidak terlalu mencolok dan terkesan mewah sama seperti website Stanford University.
b. Menggunakan tombol ‘ke atas’
Tombol ini membuat user tidak perlu melakukan scroll up untuk kembali menuju konten teratas apabila halaman yang dibuka terlalu panjang.
Namun di beberapa hal masih terdapat praktik konsep UI yang belum tepat, diantara adalah:
a. Ukuran gambar dan tulisan yang terlalu besar
Ukuran item yang terlalu besar membuat user harus melakukan banyak scroll untuk menjelajahi halaman yang ada di dalam website ini.
b. Header tidak dinamis
Hal ini menyebabkan user harus kembali ke bagian atas halaman untuk memulai interaksi baru. Hal ini mengurangi keefektifitasan website tersebut.
DAFTAR PUSTAKA
[4] “Universitas Indonesia,” [Online]. Available: https://www.ui.ac.id/. [Accessed May 2020].
[5] “Institut Teknologi Bandung,” [Online]. Available: https://www.itb.ac.id/. [Accessed May 2020].
[6] “Stanford University,” [Online]. Available: https://www.stanford.edu/. [Accessed May 2020].
[7] “Columbia University,” [Online]. Available: https://www.columbia.edu/. [Accessed May 2020].
