Redesigning Del Institute of Technology Website by Exploring Other Campus Websites: Case Study — About Del and Study Programs [3]
DAFTAR ISI
- Tahap I: Evaluasi Website IT Del
- Tahap II: Evaluasi Website Universitas
- Tahap III: Merancang Ulang Website IT Del
- Usability Testing
TAHAP III: MERANCANG ULANG WEBSITE IT DEL
Bagian ini akan menjelaskan daftar masalah dan rekomendasi perbaikan, information architecture, prototype baru website IT Del, dan Usability Testing.
1.1 Daftar Masalah dan Rekomendasi Perbaikan
Pada bab 1 Evaluasi Website IT Del, telah dilakukan evaluasi menggunakan 10 Heuristic Evaluation oleh Jacob Nielsen. Dari hasil evaluasi tersebut, masalah yang diperoleh adalah sebagai berikut:
a. Penyusunan informasi yang belum tepat
Susunan informasi pada menu perlu ditinjau ulang untuk menghasilkan susunan informasi yang baik. Oleh karena itu penulis menyarankan penyusunan Information Architecture yang baru.
b. Bahasa yang tidak sesuai konfigurasi
Untuk meningkatkan konsistensi bahasa, penulis menyarankan perbaikan pada konfigurasi bahasa (mengizinkan teks untuk diterjemahkan pada berkas HTML).
c. Terlalu banyak scroll pada halaman dengan konten yang banyak
Untuk ‘mengistirahatkan’ pengguna, penulis menyarankan untuk membagi informasi yang memiliki konteks yang sama ke dalam beberapa halaman. Pembatasan jumlah item pada halaman membuat hirarki elemen lebih jelas dan membuat tindakan utama menjadi menonjol [8]. Selain itu, untuk teks yang panjang, penulis menyarankan untuk menambahkan tombol ‘ke atas’ pada halaman dalam website.
d. Ukuran item tidak sesuai
Untuk meningkatkan estetika dan kenyaman pengguna, penulis menyarankan untuk mengatur ukuran item sedemikian rupa sehingga konten menjadi jelas dan tidak membutuhkan usaha lebih untuk memahaminya.
e. Penempatan dan jarak yang kurang baik
Jarak yang terlalu rapat atau terlalu jauh dapat memberikan kesan misleading. Oleh karena itu, penulis menyarankan untuk mengatur jarak dan menentukan orientasi sedemikian rupa agar tidak terjadi kesalahpahaman oleh pengguna.
f. Tidak ada penghubung antar halaman yang masih satu konteks
Hal ini diperlukan agar flow tetap linear sehingga tidak mengharuskan pengguna untuk kembali ke halaman semula atau mengulang flow dengan mengingat setiap langkahnya. Oleh karena itu, penulis menyarankan untuk menambahkan breadcrumb.
1.2 Information Architecture
Information Architecture (AI) adalah ide untuk menyusun struktur pada sekelompok informasi yang dimiliki [9]. Dibandingkan keempat website yang telah dieksplorasi diatas, website IT Del menyajikan informasi yang tidak terlalu banyak. Hal ini masih memungkinkan kemudahan untuk menyusunnya ke dalam information architecture baru. Untuk menggambarkan information architecture yang baru pada website IT Del, penulis telah merancang sitemap. Berikut merupakan bagan sitemap berdasarkan information architecture yang baru pada website IT Del rancangan penulis.
Dengan sitemap yang baik, kita dapat menggambarkan diagram yang mengidentifikasi jalur atau proses yang akan diambil user ketika mereka berjalan melalui suatu website [10]. Misalnya, task: “Menemukan halaman Sistem Informasi”
Berbeda dengan task flow, user flow merupakan segala kemungkinan langkah yang dilewati untuk menyelesaikan suatu task, tidak harus linear atau boleh bercabang sesuai kondisi.
1.3 Prototype Baru Website IT Del
Prototype halaman website IT Del pada bagian Beranda, Tentang Del, dan Program Pendidikan dibuat dalam bentuk high fidelity prototype menggunakan Adobe XD. Desain website IT Del yang baru tetap mempertahankan beberapa hal, antara lain pemilihan warna yang sudah sangat tepat, baik header, footer, background, dan lain-lain. Perubahan signifikan hanya terjadi pada struktur informasi dan penempatan beberapa item. Apabila implementasi benar dilakukan, maka menu akan dinamis seiring scroll yang dilakukan pengguna. Namun karena keterbatasan, ide ini belum bisa di terapkan pada prototipe yang akan diserahkan. Berikut rincian dan setiap halaman yang telah dirancang ulang.
1.3.1 Beranda
Halaman beranda dirancang dengan memberikan beberapa informasi, yaitu sambutan ketua pembina yayasan del, berita, kegiatan, penerimaan mahasiswa baru, pengumuman, dan testimonial.
Pada bagian header terdapat logo IT Del, pilihan konfigurasi bahasa (Bahasa Indonesia dan Bahasa Inggris), dan search bar. Dibawahnya terdapat dropdown menu yang terdiri dari Tentang Del, Program Pendidikan, Prestasi, Fasilitas, Regulasi, Lembaga, dan Karir. Kemudian Image slider yang menampilkan beberapa gambar mengenai IT Del. Section Berita, Kegiatan Penerimaan Mahasiswa Baru terdiri dari empat box informasi terbaru dan dibawahnya terdapat bagian pengumuman dan testimonial. Pada bagian footer terdapat informasi untuk menghubungi Institut Teknologi Del, dan beberapa link yang berisi informasi yang mungkin diperlukan oleh sebagian kecil pengguna (peta situs, beasiswa, pusat karir, agenda kegiatan dan kalender akademik).
1.3.2 Tentang Del
Menu Tentang Del yang baru terdiri dari enam sub menu, yaitu Sejarah Del, Visi dan Misi, Sambutan Rektor IT Del, Keunggulan IT Del, Struktur Organisasi, serta Fakta dan Angka.
a. Sejarah Del
Halaman Sejarah Del didominasi oleh teks yang panjang sehingga agar tidak terlalu banyak scroll, teks dibagi menjadi tiga (Yayasan Del, Politeknik Informatika Del, dan Institut Teknologi Del). Ketiga bagian ini dihubungkan oleh link yang ditempatkan pada box di sebelah kanan halaman agar dekat dengan scroll bar. Walaupun telah dibagi menjadi tiga bagian, setiap halaman tetap dilengkapi dengan tombol ‘ke atas’ agar cepat menuju konten teratas.
b. Visi dan Misi
Halaman ini berisi informasi visi, misi, makna Del, dan makna simbol Del. Desain halaman ini mirip dengan halaman sebelumnya.
c. Sambutan Rektor IT Del
Halaman ini berisi teks pidato sambutan oleh Rektor IT Del dan desainnya juga mirip dengan halaman sebelumnya.
d. Keunggulan IT Del
Halaman ini berisi penjelasan dari beberapa poin keunggulan IT Del. Desain halaman ini juga mirip dengan halaman sebelumnya.
e. Struktur Organisasi
Halaman ini berisi bagan dari tiga struktur organisasi. Desain halaman ini juga mirip dengan halaman sebelumnya.
f. Fakta dan Angka
Halaman ini berisi visualisasi data jumlah mahasiswa yang diterima setiap tahun beserta profil mahasiswa cum laude. Desain halaman ini mirip seperti halaman sebelumnya dan dilengkapi dengan bingkai pada setiap gambar mahasiswa cum laude.
1.3.3 Program Pendidikan
Menu Program Pendidikan terdiri dari empat sub-menu, yaitu Fakultas Informatika dan Teknik Elektro, Fakultas Manajemen Industri, dan Fakultas Bioteknologi. Sub-menu Fakultas Informatika dan Teknik Elektro terdiri dari tujuh sub-menu, yaitu Profil FITE, D3 Teknologi Informasi, D3 Teknologi Komputer, D4 Teknologi Rekayasa Perangkat Lunak, Sarjana-Informatika, Sarjana-Sistem Informasi, Sarjana-Teknik Elektro.
a. Fakultas Informatika dan Teknik Elekro
Halaman ini berisi informasi mengenai visi misi Fakultas Informatika dan Teknik Elektro serta link yang menuju ke halaman program studi yang dinaungi fakultas ini. Ini dari setiap link pada halaman Profil FITE sama dengan halaman yang didapat dengan flow dari submenu dari dropdown menu. Misalnya, halaman pada link Sarjana-Sistem Informasi sama dengan halaman dengan flow Program Pendidikan -> Fakultas Informatika dan Elektro -> Sarjana — Sistem Informasi.
b. Fakultas Manajemen Industri
Halaman ini berisi tentang deskripsi program studi Sarjana — Manajemen Rekayasa, Prospek, Kompetensi, dan capaian pembelajaran. Desain halaman ini juga mirip dengan halaman sebelumnya.
c. Fakultas Bioteknologi
Halaman ini berisi mengenai deskripsi program studi Sarjana — Teknik Bioproses. Desain halaman ini juga mirip dengan halaman sebelumnya.
DAFTAR PUSTAKA
[8] R. Sianturi, “Design Principles,” 2 April 2020. [Online]. Available: https://riyanthisianturi.com/design-principles/. [Accessed May 2020].
[9] R. Sianturi, “Information Architecture,” 19 April 2020. [Online]. Available: https://riyanthisianturi.com/information-architecture/. [Accessed May 2020].
[10] R. Sianturi, “Information Architecture [2],” 23 April 2020. [Online]. Available: https://riyanthisianturi.com/information-architecture-2/. [Accessed May 2020].
