DAFTAR ISI
Tahap 1 : Evaluasi Website IT Del
1.1 Heuristic Evaluation
Tahap 2 : Eksplorasi dan Analisis
2.1 User Flow
2.1.1 Website Universitas Luar Negeri
2.1.2 Website Universitas Dalam Negeri
2.2 Task Flow
2.2.1 Website Universitas Luar Negeri
2.2.2 Website Universitas Dalam Negeri
2.3 Arsitektur Informasi
2.3.1 Website Universitas Luar Negeri
2.3.2 Website Universitas Dalam Negeri
Tahap 3: Merancang Ulang Website IT Del
3.1 Daftar Masalah
3.1 Deskripsi
3.2 Rancangan UI
3.2.1 Tentang Del
3.2.2 Program Pendidikan
Information Architecture Analysis in Del Institute of Technology Website
Tahap III : Merancang Ulang Website IT Del
Rancangan ulang website IT Del diprioritaskan hanya untuk halaman Home, Program Pendidikan dan Tentang Del. Dalam Redesign website IT Del terdapat beberapa informasi yang tidak diperlukan untuk ditampilkan kedalam website dan terdapat beberapa penambahan elemen user interface dalam website IT Del. Alasan diperlukannya redesign website IT Del adalah untuk meningkatkan pengalaman pengguna yang lebih user friendly. Oleh karena itu, terdapat beberapa bagian dalam website IT Del yang memerlukan redesign untuk memudahkan pengguna yang mengakses dan lebih membantu user untuk mengingat dan mencegah user agar tidak teresesat dalam websitenya. Selain itu, tujuannya adalah untuk meningkatkan jumlah pengunjung yang mengakses websitenya. Berdasarkan data statistik pengunjung, website IT Del memiliki pengunjung yang tidak stabil setiap bulannya. Data ini dapat dilihat pada gambar 27 yang menggambarkan grafik pengunjung setiap bulan website IT Del yang dibandingkan dengan pengunjung yang mengakses website ITB. Berikut merupakan grafik yang memperlihatkan pengunjung yang mengakses website IT Del dan ITB pada setiap bulannya.
Daftar Masalah dan Rekomendasi Perbaikan
Website IT Del yang akan dibangun adalah website yang dapat memudahkan user untuk memperoleh informasi yang dibutuhkan. Berikut adalah beberapa bagian perbaikan website IT Del berdasarkan hasil evaluasi yang dilakukan pada Tahap 1.
1. Susunan Menu Bar
Susunan menu bar menjadi lebih sedikit dibandingkan sebelumnya, salah satunya adalah menu kata sambutan, semua kata sambutan akan ditempatkan dalam satu halaman. Sehingga user tidak perlu memilih dari sub menu lagi.
2. Penambahan Breadcrumbs
Berdasarkan hasil kuesioner, penambahan breadcrumbs membantu user untuk lebih cepat mengakses halaman sebelumnya dan mengetahui posisi aktif user saat ini.
3. Penambahan Site Map
Berdasarkan hasil kuesioner, penambahan halaman site map (peta situs) membantu user untuk mengetahui indeks website. Dengan kata lain, halaman peta situs membantu user untuk mengetahui konten yang tersedia dalam website yang diaksesnya.
4. Pengubahan Layout
Pengubahan layout tidak terlalu berpengaruh terhadap task yang diujikan kepada user, sehingga perbaikan ini tidak terlalu terdesak.
5. Penambahan Logo IT Del
Penambahan Logo IT Del akan membantu user untuk mendeskripsikan kampus IT Del dan mudah mengingatnya.
6. Penambahan Footer
Pada bagian footer, terdapat link menu seperti pada header, sehingga user tidak perlu scroll keatas lagi untuk memilih menu yang diakses.
Rekomendasi perbaikan ini akan diterapkan pada website IT Del yang akan diredesign.
Information Architecture
Berikut adalah task flow dan user flow bagaimana user mengakses halaman tentang del dan program pendidikan setelah melakukan redesign pada website IT Del.
Ketika user mengkases halaman visi dan misi IT Del, maka user perlu mengakses menu Tentang Del dan memilih sub menu visi dan misi, maka user akan melihat tampilan halaman visi misi. Beberapa task yang perlu dilakukan user dapat dilihat pada gambar 30. Flow ini sama seperti sebelum dilakukan redesign, perbedaanya hanya dibagian layout dan warna dari tampilan halamannya.
Dalam melakukan Task flow pada gambar 39, user perlu melakukan beberapa langkah-langkah yang digambarkan dalam gambar 40. Pertama sekali user mengkases website IT Del hasil redesign dan mencari menu Tentang Del pada Navigasi Bar, setelah ditemukan, maka user memilih sub menu Visi dan Misi. Apabila sub menu yang dicari tidak ditemukan maka user perlu mengecek kembali menu yang dipilihnya dan menemukan halaman visi dan misi.
Salah satu elemen yang ditambahkan dalam redesign website IT Del adalah navigasi Breadcrumbs. Navigasi ini bertujuan untuk menunjukkan posisi user dalam website. Berikut merupakan task flow dan user flow ketika user berada di halaman pendidikan, dan ingin kembali ke halaman awal untuk mencari tau informasi penerimaan mahasiswa baru.
Ketika user sudah mengakses halaman program pendidikan, maka user dapat kembali ke halaman utama menggunakan bredacrumbs yang terdapat pada menu bar. Penggunaan breadcrumbs ini mempermudah user untuk kembali mengakses suatu halaman tertentu pada sebuah website. Setelah kembali ke Home, user dapat memilih informasi pendaftaran pada halaman Home. Task flow ini tentu lebih cepat dibandingkan task flow sebelum redesign, ketika user ingin mengakses halaman pendaftaran, maka user harus mencari sub menu yang terdapat pada menu bar yang berisi informasi pendaftaran atau kembali ke halaman utama. Sehingaa membutuhkan waktu yang lama untuk menuju halaman pendaftaran.
Pada task flow yang terdapat dalam gambar 32,terdapat beberapa langkah yang akan dilakukan user ketika menggunakan breadcrumb. Ketika user sudah berada di halaman program pendidikan, maka user akan mengetahui posisinya melalui breadcrumbs yang terdapat pada header. Untuk kembali ke halaman awal user dapat mengklik link Home, maka user akan menuju tampilan Home website dan mencari informasi pendaftaran.
Prototype Baru Website IT Del
Berikut adalah protoype dari hasil redesign website IT Del yang baru untuk beberapa halaman dalam website IT Del. Salah satunya adalah Home, Tentang Del dan Program Pendidikan.
Struktur Menu
Berikut merupakan gambar susunan menu bar untuk website IT Del hasil redesign. Sebelum dilakukan redesign website IT Del, susunan menu pada header lebih panjang dan terdapat beberapa submenu yang memuat konten yang sama.
Penambahan Peta Situs (Sitemap)
Layout Home
Penambahan Navigasi Breadcrumbs
Setiap halaman dalam website IT Del hasil Redesign akan menampilkan breadcrumbs yang memudahkan user untuk mengetahui posisi aktifnya saat ini. Selain itu navigasi breadcrumbs ini mempercepat akses user menuju halaman sebelumnya.
Tentang Del
Berikut merupakan tampilan halaman yang terdapat dalam menu tentang del. Dapat dilihat pada website IT Del terdapat pembagian kata sumbutan pada beberapa submenu. Namun, dalam website redesign ini, semua kata sambutan akan ditempatkan pada satu halaman.
Berikut adalah tampilan detail dari setiap halaman pada submenu yang terdapat dalam menu Tentang Del.
a) Sejarah Del
b) Visi dan Misi
c) Kata Sambutan
d) Struktur Organisasi
e) Testimoni Alumni
b) Program Pendidikan
Berikut merupakan tampilan halaman yang terdapat dalam menu Program Pendidikan. Menu program pendidikan dibagi berdasarkan fakultas dari prodinya masing-masing. Untuk sub menunya tidak berubah, masih sama seperti werbsite sebelum redesign, namun yang diubah adalah layout setiap informasi yang ditampilkan dan warna yang digunakan.
Berikut merupakan tampilan untuk setiap menu. Semua menunya menggunakan template yang sama, kecuali jika user mengakses website untuk setiap prodi. Ketika user mengakses link setiap prodi, maka user akan menuju kehalaman mahasiswa prodi yang menampilkan informasi terkait prodi dan berbagai kegiatan mahasiswa.
a. S1 — Informatika
a. S1 — Sistem Informasi
a. DIII — Teknologi Informasi
a. DIII — Teknologi Komputer
a. DIV — Teknologi Rekayasa Perangkat Lunak
a. S1 — Teknik Elektro
Penambahan Menu Bar pada Bagian Footer
Penambahan menu bar pada bagian footer bertujuan untuk memudahkan user menuju halaman tertentu tanpa scroll lagi ke atas. Berikut merupakan link menu bar yang ditambahkan pada bagian footer. Setiap link dapat diakses oleh user tanpa harus kembali ke bagian awal halaman website.
Referensi
[1]
R. Sianturi, “User Research [1],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-1/.
[2]
R. Sianturi, “User Research [2],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-2/.
[3]
R. Sianturi, “Persona,” 2020. [Online]. Available: https://riyanthisianturi.com/persona/.
[4]
R. Sianturi, “Design Principles,” 2020. [Online]. Available: https://riyanthisianturi.com/design-principles/.
[5]
J. Nielsen, “How to Conduct a Heuristic Evaluation,” 1 November 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/.
[6]
R. Sianturi, “Information Architecture,” April 2020. [Online]. Available: https://riyanthisianturi.com/information-architecture/.
[7]
Institut Teknologi Del, “Institut Teknologi Del,” 2020. [Online]. Available: https://www.del.ac.id/. [Accessed May 2020].
[8]
R. Sianturi, “Heuristic Evaluation,” 2020. [Online]. Available: https://riyanthisianturi.com/heuristic-evaluation/.
[9]
Stanford University, “Stanford University,” 2020. [Online]. Available: https://www.stanford.edu/. [Accessed May 2020].
[10]
Universitas Indonesia, “Universitas Indonesia,” 2020. [Online]. Available: https://ui.ac.id/. [Accessed May 2020].
[11]
R. Sianturi, “Design Testing [1],” May 2020. [Online]. Available: https://riyanthisianturi.com/design-testing/.
[12]
R. Sianturi, “Wireframe, Annotation and Prototyping,” May 2020. [Online]. Available: https://riyanthisianturi.com/wireframe-annotation-and-prototyping/.
[13]
I. o. T. Deflt, “Defl Institute of Technology,” 2020. [Online]. Available: : https://www.tudelft.nl/en/. [Accessed June 2020].
[14]
ITB, “Institut Teknologi Bandung,” 2020. [Online]. Available: https://www.itb.ac.id/. [Accessed May 2020].
