Information Architecture — Konsep Melakukan Desain Ulang Website Institut Teknologi Del

Tessa Maretta
4 min readMay 11, 2020

--

Daftar Isi :

1. Information Architecture

2. Eksplorasi Information Architecture

3. Analisis dan Redesign IA Website Institut Teknologi Del

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

Pada artikel saya yang sebelumnya, saya telah membahas mengenai 5 Elemen User Experience dari Jesse James Garrett dan Perbandingan Website Universitas Berdasarkan Elemen UX baik dalam negeri dan luar negeri. Pada artikel ini saya akan membahas lebih dalam mengenai Information Architecture yang merupakan bagian dari tahap Structure pada Elemen User Experience.

Information Architecture (IA)

Arsitektur Informasi (IA) adalah ilmu tentang penataan konten yang diterapkan ke situs web, aplikasi dan sistem. Tujuan dari IA ialah untuk mengklasifikasikan konten yang saling berhubungan dengan jelas dan dapat dipahami dengan mudah sehingga pengunjung dapat menemukan apa yang mereka butuhkan dengan mudah. Oleh karena itu, ada beberapa hal yang harus dipertimbangkan dan diperhitungkan dengan baik dan teliti saat menyusun informasi suatu produk, yaitu : sasaran bisnis, kebutuhan pengguna dan berbagai jenis konten.

IA tidak hanya diterapkan saat membuat produk dari awal namun digunakan juga dalam mendesain ulang suatu produk.

Gambar 1 The 3 elements of Information Architecture

Information Architecture dapat digambarkan dengan beberapa model struktural :

1. Hirarki

Bentuk dari model struktur hirarki ialah Site Map. Dalam membuat Site Map diperlukan Label untuk setiap kategori yang memiliki kesamaan atau saling keterkaitan.

Gambar 2 Contoh Site Map Sederhana

Site Map membantu mengidentifikasi struktur website dan aplikasi untuk membantu user memahami di mana user akan dapat menemukan informasi yang sedang dicari.

Site Map dibagi menjadi 2 bentuk, yaitu Flat dan Deep.

a. Flat : lebih banyak bagian dalam menu dan membutuhkan lebih sedikit klik untuk mencapai bagian bawah.

Gambar 3 Site Map Tipe Flat

b. Deep : menu yang lebih sederhana, tetapi lebih banyak klik untuk mencapai tujuan Anda.

Gambar 4 Site Map Tipe Deep

2. Sekuensial

Bentuk dari model struktur sekuensial ialah Task Flow dan User Flow.

Gambar 5 Task Flow vs User Flow

Task Flow adalah diagram yang mengidentifikasi jalur atau proses yang akan diambil user untuk menyelesaikan tugas tertentu. Task Flow cenderung linear.

Gambar 6 Contoh Task Flow

Sedangkan User Flow adalah jalur yang diikuti user dalam sebuah experience. User dapat mengambil banyak jalur potensial dalam User Flow untuk menemukan produk sehingga User Flow cendurung bercabang. Dengan merancang User Flow dapat membantu user mengenali jalan buntu yang dapat membingungkan user.

Gambar 7 Contoh User Flow

3. Organik

Contoh dari model struktur organik ialah website Wikipedia.com.

Saat digunakan bersamaan, Site Map dan Task Flow dapat memberikan gambaran tentang struktur konten dan navigasi proses yang jelas kepada user.

Untuk melihat beberapa Information Architecture pada beberapa website universitas, dapat dilihat pada Eksplorasi Information Architecture.

HEURISTIC EVALUATION

Evaluasi heuristik adalah metode usability untuk menemukan masalah usability dalam UI design, sehingga masalah tersebut dapat diatasi dan dipecahkan sebagai bagian dari proses desain iteratif. Ini melibatkan sekelompok kecil expert evaluator untuk memeriksa tampilan dan menilai kesesuaiannya dengan “heuristik,” atau prinsip-prinsip usability yang diakui. Proses tersebut dapat membantu dalam mencegah kegagalan produk sebelum dirilis.

Jakob Nielsen mengemukakan 10 heuristik, yaitu:

  1. Match between system and the real world
  2. Consistency & standards
  3. Help & documentation
  4. User control & freedom
  5. Visibility of system status
  6. Flexibility & efficiency
  7. Error prevention
  8. Recognition, not recall
  9. Error reporting, diagnosis, and recovery
  10. Aesthetic & minimalist design

Referensi :

[1] T. Maretta, “Perbandingan Website Universitas Berdasarkan Elemen UX”, 2020. Available: https://medium.com/@maretta.tessa/perbandingan-website-universitas-berdasarkan-elemen-ux-c11120f816. [Accessed 30 April 2020].

[2] R. Sianturi, “User Research [1],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-1/.

[3] R. Sianturi, “User Research [2],” 2020. [Online]. Available: https://riyanthisianturi.com/user-research-2/.

[4] R. Sianturi, “Persona,” 2020. [Online]. Available: https://riyanthisianturi.com/persona/.

[5] R. Sianturi, “Heuristic Evaluation,” 2020. [Online]. Available: https://riyanthisianturi.com/heuristic-evaluation/.

[6] R. Sianturi, “Design Principles,” 2020. [Online]. Available: https://riyanthisianturi.com/design-principles/.

[7] R. Sianturi, “Information Architecture,” April 2020. [Online]. Available: https://riyanthisianturi.com/information-architecture/.

[8] J. Nielsen, “How to Conduct a Heuristic Evaluation,” 1 November 1994. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/.

[9] Russ Unger and Carolyn Chandler. (-). A Project Guide to UX Design: for User Experience Designers in the Field or in The Making. 02. New Riders. Berkeley, CA. ISBN: 978–0–321–81538–5

--

--