Analisis dan Redesign Information Architecture — Konsep Melakukan Desain Ulang Website Institut Teknologi Del

6 min readApr 30, 2020

Daftar Isi :

3. Analisis dan Redesign IA Website Institut Teknologi Del

4. Usability Testing on Redesign of The Del Institute of Technology Webpage

Berdasarkan hasil eksplorasi pada beberapa halaman website universitas pada artikel Eksplorasi Information Architecture, selanjutnya kita akan meninjau halaman website Institut Teknologi Del.

Pada halaman website Institut Teknologi Del tersebut, banyak informasi yang ingin disampaikan kepada masyrakat. Oleh karena itu, butuh pengkategorian yang jelas, label yang jelas serta penataan informasi yang jelas sehingga user dapat dengan mudah menemukan informasi yang mereka butuhkan.

Penyajian informasi pada halaman website Institut Teknologi Del sudah tergolong baik, namun terdapat beberapa hal yang harus diperbaiki serta disusun ulang sehingga pembaca tidak bingung dengan informasi yang disampaikan. Oleh karena itu pada artikel ini, kita akan menganalisis halaman website ini terlebih dahulu sebelum melakukan desain ulang.

Site Map

Sekarang, mari kita lihat Site Map dari Website Institut Teknologi Del.

Institut Teknologi Del menggunakan Site Map tipe Deep, dikarenakan setiap menu memiliki beberapa submenu hingga submenu level 3.

Dari Site Map tersebut dapat kita lihat terdapat beberapa submenu yang tidak saling berkaitan dengan label kategori maupun terhadap submenu lainnya pada kategori. Contohnya :

Sub menu Penerimaan Mahasiswa Baru pada kategori Sivitas. Menurut saya Penerimaan Mahasiswa Baru dapat dibuat menjadi satu menu/kategori baru, dikarenakan sebenarnya penerimaan mahasiswa baru belum termasuk menjadi kategori Sivitas dan Penerimaan Mahasiswa Baru merupakan salah satu informasi terpenting yang umumnya dicari oleh masyarakat. Submenu penerimaan mahasiswa baru pada kategori Sivitas dapat diganti menjadi Ikatan Alumni IT Del.
Sub menu pada kategori Tentang Del dapat dipersempit dan disesuaikan agar lebih sesuai dengan label kategori Tentang Del dan saling berkaitan antar submenu.
Label Program Pendidikan saya ganti menjadi Akademik, dikarenakan informasi yang disediakan pada submenu tidak hanya program pendidikan saja sehingga diganti menjadi Akademik agar lebih sesuai dikarenakan memang berkaitan dengan kegiatan akademik.
Sub menu pada kategori Akademik yang telah saya ganti namanya juga saya susun ulang urutannya menjadi Kalender Akademik yang paling atas dikarena ifnformasi tersebut sering dilihat atau dicari pembaca.

Berdasarkan dari hasil evaluasi Site Map diatas, maka saya menyusun ulang Site Map sehingga menurut saya lebih sesuai dan lebih mudah dipahami susunannya agar dapat menemukan informasi dengan lebih mudah. Hasil perbaikan ini merupakan pendapat saya, sehingga memungkinkan masih terdapat kekurangan.

Perubahan Site Map ini juga akan mempengaruhu penyajian informasi pada setiap submenu nya. Sehingga dibutuhkan juga penyesuaian konten terhadap setiap halaman.

Evaluasi Heuristic

Evaluasi dapat menggunakan teknik yang dikemukakan oleh Jakob Nielsen yaitu 10 Heuristic Evaluation.

Berikut adalah tabel hasil heuristic evaluation yang dilakukan dengan ketentuan severy rating-nya adalah:

· 0 = Bukan termasuk masalah usability

· 1 = Cosmetic problem: cukup mengganggu user, tapi tidak terlalu menyebabkan masalah pada proses penyelesaian task user. Perbaikan tidak terlalu dibutuhkan

· 2 = Minor usability problem: berpotensi menyebabkan user mengalami kesulitan dalam proses penyelesaian task. Dibutuhkan perbaikan, tingkat prioritas rendah

· 3 = Major usability problem: sangat penting untuk diperbaiki, tingkat prioritas tinggi

· 4 = Usabillity catasthrope: wajib diperbaiki sebelum dapat digunakan

Saya akan membahas evaluasi pada halaman Tentang Del dan Program Pendidikan.

1.Tentang Del

Pada halaman Tentang Del, informasi yang disajikan ialah mengenai sejarah, visi dan misi, berbagai kata sambutan, struktur organisasi serta keunggulan dari Institut Teknologi Del.

Positif :

Submenu yang digunakan pada kategori Tentang Del mudah dimengerti pembaca apa informasi yang akan disajikan karena pembagiannya sangat jelas.

Negatif :

Pada submenu Fakta dan Angka, tidak menyediakan navigasi untuk memberitahu keberadaan user serta penggunaan link untuk berpindah ke halaman lain untuk menyajikan informasi sebaiknya tidak digunakan karena informasi yang akan disajikan masih bisa disajikan pada halaman yang sama.
Ukuran tulisan yang relatif terlalu kecil dan tidak konsisten pada setiap submenu
Gambar pada submenu Struktur Organisasi tidak dapat dilihat dengan jelas dikarenakan terlalu kecil.
Tampilan submenu Testimonial tidak begitu rapi
Penggunaan judul pada submenu Sejarah Del dapat membuat pembaca merasa bingung, terkait sejarah yang dijelaskan.

Dilihat dari task flow dan user flow, berikut ini akan ditampilkan bagaimana website mengarahkan user untuk mengetahui halaman “Struktur Wakil Rektor Bidang Akademik dan Kemahasiswaan (WR AM)”.

Gambar 4 Task Flow dan User Flow Menuju Halaman Struktur Wakil Rektor Bidang Akademik dan Kemahasiswaan (WR AM)

Saran Perbaikan :

Penggunaan link ke halaman lain sebaiknya ditiadakan jika informasi masih dapat dimuat pada halaman yang sama
Ukuran tulisan lebih disesuaikan dan konsisten pada setiap halaman agar pembaca dapat membaca dengan nyaman
Ukuran gambar yang digunakan lebih disesuaikan agar pembaca dapat mengetahui informasi yang disediakan
Penggunaan “[..]” pada penjelasan di halaman Testimonial agar diperhatikan apakah akan di link menuju halaman detail penjelasan atau lebih baik dihapus saja
Sub judul pada halaman Sejarah Del agar diperbaiki dan dibuat lebih jelas apakah sub judul tersebut merupaka sejarah del ataukah sejarah yayasan del.

2. Program Pendidikan

Gambar 5 Kategori Menu Program Pendidikan

Pada menu Program Pendidikan menampilkan submenu dari fakultas dan kalender akademik. Pada setiap submenu akan menampilkan informasi detail dari setiap prodi setiap fakultas.

Positif :

Submenu sangat jelas pembagiannya, sehingga user dapat langsung memahami informasi.

Negatif :

Halaman website tidak menyediakan navigasi untuk menunjukkan keberadaan user pada halaman mana.
Ukuran tulisan relatif terlalu kecil.
Pada penjelasan informasi, terdapat beberapa poin yang memiliki spasi yang terlalu jauh antar poin.

4. Namun ada juga yang tidak memiliki spasi untuk memisahkan informasi sehingga sulit dibaca.

5. Judul dan subjudul setiap halaman memiliki font yang tidak konsisten.

6. Terdapat penulisan judul pada setiap halaman yang digaris bawahi seakan-akan teks tersebut merupakan hyperlink padahal yang sebenarnya tidak.

Dilihat dari task flow dan user flow, berikut ini akan ditampilkan bagaimana website mengarahkan user untuk mengetahui halaman “Program Sarjana (S1) Sistem Informasi”.

Gambar 6 Task Flow dan User Flow Menuju Halaman Program Sarjana (S1) Sistem Informasi

Saran Perbaikan :

Menambahkan penggunaan navigasi agar mempermudah user mengetahui sedang berada dimana
Memperhatikan font tulisan agar user dapat membaca lebih jelas dan mengubah font agar konsisten pada setiap halaman
Memperhatikan white space antar elemen agar peletakan lebih rapi
Penggunaan garis bawah pada subjudul agar diperbaiki jika tidak merupakan link terhadap suatu halaman lain lebih baik tidak menggunakan garis bawah.

Prototipe Hasil Desain Ulang

Hasil dari desain ulang website Institut Teknologi Del di bawah ini merupakan pendapat saya, tidak sepenuhnya benar dan tidak memaksakan pendapat orang lain.

Berikut adalah prototype dari site map yang telah di desain ulang pada menu Tentang Del dan Akademik :

Pada halaman Home terdapat banyak perubahan yang dilakukan sehingga berbeda dari halaman aslinya. Hasil redesign ini menurut saya membuat informasi lebih mudah ditangkap mata (eye catching), dan memiliki penempatan yang rapi sehingga lebih nyaman dilihat.

Gambar 10 Tampilan Halaman Struktur Organisasi

Untuk menuju ke halaman “Struktur Organisasi”, terdapat perubahan Task Flow dan User Flow dari yang sebelumnya. Dikarenakan informasi struktur organisasi langsung ditampilkan pada satu(1) halaman saja.

Gambar 11 Task Flow dan User Flow Menuju halaman Struktur Organisasi Setelah Redesign

Gambar 11 Tampilan Halaman Keunggulan Del

Perubahan juga dilakukan pada tampilan halaman-halaman sub menu dari Akademik.

Gambar 13 Tampilan Halaman Fakultas Informatika & Teknik Elektro

Pada halaman Fakultas Informatika & Teknik Elektro, informasi full-text diubah menjadi dibagi ke dalam beberapa kolom, agar lebih menarik dan tidak membuat bingun user.