Panduan Komprehensif untuk Arsitektur Informasi

Dengarkan versi audio dari artikel ini

Sebagai bagian standar dari proses UX, desainer membuat arsitektur informasi saat membangun produk. Mendefinisikan setiap jalan dan jalur yang dapat diambil pengguna melalui aplikasi atau situs web, arsitektur informasi lebih dari sekadar peta situs untuk menunjukkan halaman mana yang mengarah ke mana.

Mirip dengan arsitek bangunan yang menggunakan cetak biru untuk membangun setiap bagian rumah, dari struktur fisik hingga pekerjaan bagian dalam yang lebih kompleks seperti listrik dan pipa ledeng, arsitektur informasi menggambarkan hierarki, navigasi, fitur, dan interaksi situs web atau aplikasi. Dan seperti halnya cetak biru adalah dokumen paling berharga bagi seorang arsitek untuk digunakan dalam konstruksi sebuah bangunan, arsitektur informasi dapat menjadi alat yang paling ampuh dalam gudang senjata seorang desainer.

Namun, mengembangkannya tidak sesederhana mengumpulkan daftar fitur dan memetakan cara kerjanya—mari kita selidiki prosesnya.

Apa itu Arsitektur Informasi, dan Mengapa Penting?

Arsitektur informasi (IA), seperti cetak biru, representasi visual dari infrastruktur, fitur, dan hierarki produk. Tingkat detail terserah desainer, jadi IA juga dapat menyertakan navigasi, fungsi dan perilaku aplikasi, konten, dan alur. Tidak ada batasan yang ditetapkan untuk ukuran atau bentuk IA; namun, itu harus mencakup struktur umum produk sehingga siapa pun (secara teoritis) harus dapat membacanya dan memahami cara kerja produk.

Kami akan sering menggunakan referensi cetak biru karena tujuan dari kedua dokumen tersebut hampir sama. Sama seperti cetak biru, IA memberi desainer (serta tim pengembangan dan teknik produk) pandangan menyeluruh dari keseluruhan produk. Memiliki satu dokumen yang memberikan representasi sederhana dan dapat dipahami tentang cara kerja aplikasi atau situs web sangat penting untuk mengembangkan fitur baru, memperbarui yang sudah ada, dan untuk melihat apa yang mungkin dilakukan dengan mempertimbangkan produk yang sudah ada.

Dengan tersedianya IA, menjadi jauh lebih mudah untuk membuat keputusan penting untuk fitur dan implementasi baru, untuk memahami garis waktu untuk perubahan produk, dan untuk mengikuti perilaku pengguna melalui berbagai proses.

Mari selami video dasar untuk melihat bagaimana IA dibangun.

Bagaimana Mendesain Arsitektur Informasi

Sebagai bagian dari proses UX, desain IA mengikuti pola yang sangat mirip dengan diagram alur: Tambahkan bentuk dan hubungkan dengan garis secara terorganisir ke satu dokumen. Tantangan saat membangun IA adalah memahami cara kerja aplikasi atau situs web Anda dari sudut pandang pengguna, dan cara mengatur informasi tersebut ke dalam format yang dapat dibaca dan terbaca.

Ada dua persyaratan utama untuk benar-benar membangun IA: mengaturnya melalui hierarki visual (yaitu, hierarki fitur, fungsi, dan perilaku) dan membuat legenda untuk menampilkan berbagai jenis fitur, interaksi, dan alur. Dengan diagram alur standar, bentuknya mengikuti persyaratan tertentu (persegi panjang adalah proses, berlian adalah titik keputusan, dll.); namun, mengikuti nomenklatur itu bukanlah persyaratan.

Dengan kata lain, faktor terpenting untuk membangun IA Anda adalah di mana masing-masing komponen arsitektur ditempatkan (secara hierarkis), dan bagaimana mereka diberi label dan ditampilkan.

Memahami dan Menampilkan Hirarki Visual

Aspek yang paling menantang dalam menciptakan arsitektur informasi baru hampir selalu dalam membangunnya secara hierarkis. Ini adalah kesalahpahaman umum bahwa IA harus dibangun “dari atas ke bawah.” Itu hampir selalu lebih sulit dilakukan kecuali itu produk yang sudah ada, seperti dalam video di atas.

Saat membangun IA dari awal, kecuali situs web atau aplikasi Anda mengikuti format standar, menggambar apa pun setelah level teratas sangat sulit. Ini seperti meminta seorang mekanik untuk membangun mobil dari atas ke bawah, bukan bagian-bagiannya. Setiap bagian harus dibangun terlebih dahulu dengan penelitian, waktu untuk desain, dan pengembangannya sendiri. Hal yang sama berlaku dengan IA.

Menampilkan hierarki visual adalah aset berharga bagi IA, tidak hanya karena menyediakan konteks yang lebih baik bagi pembaca, tetapi juga menggeneralisasi wilayah utama produk. Jika fitur aplikasi Anda yang paling signifikan adalah memesan tumpangan (ala Uber atau Lyft) yang dapat dilakukan dari beranda, maka halaman tersebut akan memiliki titik kontak paling banyak dan nilai paling tinggi untuk produk. Hal yang sama akan berlaku untuk hierarki visual.

Peta Situs berguna untuk memahami hierarki karena mereka mengatur halaman secara numerik (seperti 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, dll.). Atau pertimbangkan contoh pada gambar di bawah untuk situs web perpustakaan Duke University, di mana navigasi atas tidak hanya di atas tetapi juga disorot agar terlihat di seluruh aplikasi.

Hirarki Bentuk, Warna, dan Elemen Visual Lainnya

Selain hierarki, arsitektur di atas melakukan hal lain dengan baik: Ini menampilkan setiap titik pertunangan secara unik sesuai kebutuhan melalui legenda sederhana dan beberapa frasa kunci. Legenda menunjukkan halaman dan tipe konten, dan itu menandakan variasi antara warna bentuk. Ini penting karena, meskipun situs Duke tampak cukup sederhana, IA hanya masuk tiga tingkat. Setiap persegi panjang kuning menunjukkan aplikasi, jadi proses di dalam setiap kotak tersebut tidak disertakan dalam dokumen ini!

Bahkan tanpa bagian-bagian itu, strukturnya sedemikian rupa sehingga kami dapat memahami cara menavigasi situs web melalui IA saja. Itu berhenti ketika kita mencapai aplikasi di dalam situs web—tidak harus.

IA di bawah ini untuk sebuah game. Menggunakan empat bentuk, tanpa warna, dan potongan teks yang ditempatkan dengan cerdas, setiap interaksi utama dapat dipahami tanpa prototipe, dan yang lebih penting, dapat dipahami oleh siapa pun yang mengerjakannya.

Model ini tidak sempurna, tetapi mengatur hierarki aplikasi dengan jelas dan menggambarkan apa yang dilihat atau dilakukan pengguna pada titik tertentu.

Alat Arsitektur Informasi Terbaik

Ada banyak aplikasi perangkat lunak yang memungkinkan untuk membangun IA, tetapi hanya sedikit yang sederhana dan cukup cepat untuk membuat pengalaman menjadi menyenangkan. Atau paling tidak, mudah dikelola.

Draw.io, yang digunakan dalam video di atas, sepenuhnya gratis untuk penggunaan pribadi dan profesional dan secara otomatis dicolokkan ke Google Drive. Ini juga memiliki integrasi dengan Confluence dan JIRA, yang berbayar. Draw.io sangat baik untuk diagram alur, membuat alur pengguna dan arsitektur informasi, dan dengan fungsionalitas Drive, banyak orang dapat mengerjakan dokumen yang sama dan melihat perubahan secara langsung. Ada juga versi offline gratis.

Lucidchart adalah alat hebat lainnya yang memberikan pengalaman yang sedikit lebih baik daripada Draw.io dan memiliki manfaat tambahan seperti templat yang dibuat sebelumnya, lebih banyak integrasi, aplikasi seluler (diberi peringkat 2,5 bintang di App Store), dan dukungan untuk perusahaan.

Omnigraffle dan Visio adalah andalan industri lama dan bekerja sangat baik untuk membangun dan memelihara desain IA, meskipun Visio hanya online (versi offline yang lebih lama hanya untuk Windows) sedangkan Omnigraffle hanya untuk Mac dan memerlukan pembelian terpisah untuk MacOS dan iOS versi. OmniGraffle memiliki satu keunggulan dibandingkan pesaing utama karena menyediakan otomatisasi JavaScript dan AppleScript, yang bagi sebagian besar desainer mungkin tidak diperlukan, tetapi biasanya, arsitek informasi penuh waktu menghargainya.

Semua alat yang tercantum di atas dibuat untuk kecepatan dan kemudahan penggunaan, khususnya seputar diagram alur, yang mengikuti prinsip yang hampir identik dengan arsitektur informasi. Aplikasi lain seperti Balsamiq, MindMeister, MindManager, atau XMind semuanya menawarkan perilaku gaya serupa tetapi dibuat untuk tujuan utama lainnya, seperti pembuatan prototipe atau pemetaan pikiran.

Praktik Terbaik Arsitektur Informasi

Meskipun ada beberapa aturan yang ditetapkan untuk apa yang merupakan arsitektur informasi, ketika melalui proses, pertimbangkan hal berikut:

Jangan Fokus pada Hirarki, Fokus pada Struktur

Hirarki dapat disesuaikan. Beranda akan selalu menjadi beranda, tetapi ke mana arahnya, bagaimana pengguna mencapai tempat-tempat itu, dan segala sesuatu di antara dan di luarnya ditentukan kemudian.

Semua Proses Harus Logis

Meskipun IA dalam proses UX adalah untuk interaksi pengguna, setiap langkah harus masuk akal. Layar pendaftaran seharusnya tidak mengarah ke pengaturan, fungsi kamera tidak boleh melompat ke tampilan peta…daftarnya terus berlanjut.

Ingat Proses UX

Kesalahan umum adalah hanya membuat IA, tanpa sumber daya, penelitian, atau aset atau pekerjaan lain. Itu seperti menyuruh seorang penulis untuk menulis buku tanpa garis besar, atau seorang programmer untuk membuat kode aplikasi tanpa prototipe.

Anda Adalah Kartografer

Kartografer mempertimbangkan segala sesuatu tentang peta, mulai dari pegunungan hingga perbatasan negara bagian. Sama seperti pembuat peta, desainer menentukan apa yang masuk ke dalam desain IA. Halaman individual, perilaku pengguna tertentu, konteks untuk poin keputusan… dan seterusnya.

Pada akhirnya, kartografer memutuskan apa yang ada di peta berdasarkan kebutuhan pengguna. Hal yang sama berlaku untuk desainer, jadi buat IA untuk pengguna akhir, yaitu pengembangan produk dan tim desain.

Arsitektur Informasi Selalu Berubah dan Berkembang

Untuk mengebor titik rumah sekali lagi, semua IA dibangun untuk perubahan. Produk berkembang, desain berubah, pengguna beradaptasi, dan siklus berlanjut, berulang-ulang. Jangan menganggapnya terlalu serius dan ketahuilah bahwa akan selalu ada ruang untuk perbaikan. Jangan bertujuan untuk kesempurnaan; membangun IA yang sederhana dan mudah beradaptasi.

Arsitektur Informasi Saya Selesai… Sekarang Apa?

Ini adalah konsepsi umum bahwa setiap pekerjaan desain tidak pernah benar- benar selesai, dan memang demikian halnya dengan arsitektur informasi. Mereka tumbuh dan menyusut dan berubah seperti produk kami. Tidak seperti cetak biru untuk sebuah bangunan, IA akan selalu berkembang berdasarkan apa pun mulai dari kebutuhan pengguna hingga fitur baru atau perombakan produk. Sebagian besar struktur mungkin tetap sama dan memberikan konsistensi antar versi sehingga pengguna tidak bingung.

Dan itu hal yang bagus. Mengetahui bahwa IA adalah dokumen yang lancar—dokumen yang kemungkinan besar berubah setiap minggu, dan terkadang bahkan setiap hari—adalah cara yang ampuh untuk mempertahankan keseluruhan struktur aplikasi atau situs web Anda tanpa pernah menyentuh kode atau membuat prototipe baru. Semakin baik seluruh tim pengembangan produk mengetahui IA, semakin cepat setiap orang mengetahui apa yang mungkin dan tidak mungkin, dan seberapa serius "pekerjaan mudah" yang sebenarnya.

Yang membawa kita ke keindahan arsitektur informasi yang sebenarnya: Tidak ada titik awal yang ditentukan sebelumnya. Sementara proses desain UX tradisional menentukan bahwa IA dibangun setelah menyelesaikan alur pengguna yang cukup; dipersenjatai dengan banyak penelitian pengguna dan kompetitif, itu juga bisa menjadi hal pertama yang dilakukan ... atau yang terakhir. Proses pembuatan prototipe sering kali memunculkan informasi tentang bagaimana perilaku atau tindakan tertentu harus terjadi yang sulit dibayangkan dari IA yang logis atau tidak imajinatif.

Sebagai praktik yang terus berkembang, desain IA adalah seni sekaligus keterampilan, itulah sebabnya perusahaan besar memiliki posisi arsitek informasi. Desainer ini adalah penjaga gerbang sistem besar, dan dengan pemahaman mereka tentang pertumbuhan produk dari waktu ke waktu, mereka membantu mendorong tim produk, desain, dan teknik untuk membuat keputusan yang tepat selama bertahun- tahun . Skala organisasi itu tidak untuk semua desainer, tetapi setiap desainer dapat membangun arsitektur informasi yang sederhana dan dapat dimengerti.

• • •

Bacaan yang Direkomendasikan Tentang Arsitektur Informasi

IA untuk Web dan Selanjutnya

Cara Memahami Segala Kekacauan: Arsitektur Informasi untuk Semua Orang

Dasar-dasar Arsitektur Informasi

Perbedaan Antara Arsitektur Informasi dan Desain UX

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib