UI/UX

Information Architecture [1]


DEFINISI INFORMATION ARCHITECTURE

Setelah melakukan serangkaian aktivitas dalam User Research, sekarang Anda perlu merancang solusi untuk website atau aplikasi yang akan dibangun. Langkah pertama dalam merancang solusi nyata adalah membuat struktur umum informasi dalam website atau aplikasi. Information Architecture (IA) adalah ide untuk menyusun struktur pada sekelompok informasi yang dimiliki. IA dapat relatif sederhana pada proyek kecil dan sangat rumit pada proyek besar.

Information Architecture sebenarnya bukan obyek yang nyata, IA tidak terlihat, sehingga untuk dapat mengaturnya, Anda perlu menggambar struktur informasi dalam sebuah Site Map.

Ilustrasi Information Architecture pada sebuah website

Gambar di atas adalah contoh yang menunjukkan website dengan enam halaman:

  • Homepage (HOME)
  • Dua bagian di menu utama (SECTION 1, SECTION 2)
  • Tiga subbagian (SUB-SECTION A, SUB-SECTION B, SUB-SECTION C).

Garis menunjukkan halaman mana yang terhubung oleh navigasi (menu dan tombol).

Ketika halaman website disusun dengan cara seperti ini (seperti family tree), maka disebut hirarki atau “tree”. Sebagian besar website dan aplikasi diatur seperti ini.

Site Map membantu mengidentifikasi struktur website dan aplikasi. Site Map dapat menunjukkan hirarki dan koneksi yang memungkinkan user Anda untuk memahami di mana dia dapat menemukan konten yang dicari.

Task Flow melanjutkan langkah dari Site Map dengan mengidentifikasi berbagai tindakan yang dapat dilalui user dalam bagian-bagian website. Task Flow juga menggambarkan koneksi ke status error, konten, atau tampilan halaman selama aktivitas user dalam website berlangsung. Saat digunakan bersama-sama, Site Map dan Task Flow dapat memberi gambaran yang jelas bagi user Anda tentang struktur konten dan bagaimana user dapat menavigasi prosesnya.

Dimulai dengan definisi yang paling dasar, Site Map adalah cara visual untuk menampilkan halaman yang representatif dari suatu website. Site Map sederhana dapat digambarkan pada selembar kertas dan menyerupai struktur organisasi. Namun, Site Map tidak hanya dapat digunakan untuk website; Anda dapat menggunakannya untuk semua jenis aplikasi yang akan mendapat manfaat dari mengidentifikasi halaman, tampilan, status, dan contoh apa pun yang sedang ditampilkan.

Dalam kebanyakan kasus, Anda akan menggunakan Site Map untuk menunjukkan kepada rekan setim dan klien bagaimana konten akan diatur untuk website. Site Map akan memberikan gambaran umum tentang navigasi website dan, dalam beberapa kasus, akan menampilkan semua koneksi yang dimiliki setiap halaman.

Task Flow mengidentifikasi jalur atau proses yang akan dilakukan user (dan kadang-kadang suatu sistem) ketika mereka bergerak dalam website atau aplikasi Anda. Meskipun Site Map dan Task Flow mungkin terlihat serupa pada awalnya, kedua jenis diagram memiliki tujuan yang berbeda:

  • Site Map memberi tahu Anda hirarki visual layout website atau aplikasi
Contoh Site Map Sederhana
  • Task Flow memberi Anda rincian opsi yang diberikan kepada user dan jalur yang dapat mereka akan dapat pakai.
Contoh Task Flow

Site Map ditampilkan dalam website seperti gambar Sitemap Harvard University di bawah ini.

Sitemap Pada Website Harvard University

Site Map dapat disusun dalam 2 bentuk, yaitu Flat dan Deep.

Ilustrasi Flat Site Map vs Deep Site Map
  • Site Map bisa menjadi sangat “Flat” – yang berarti lebih banyak bagian dalam menu dan membutuhkan lebih sedikit klik untuk mencapai bagian bawah.
  • Site Map Anda juga bisa menjadi “Deep” – menu yang lebih sederhana, tetapi lebih banyak klik untuk mencapai tujuan Anda.

Perhatikan bahwa kedua struktur pada gambar Ilustrasi Flat Site Map vs Deep Site Map di atas memiliki jumlah halaman yang sama, tetapi susunan atau flow-nya berbeda.

Website dengan banyak produk, seperti Walmart, Amazon atau Blibli di Indonesia, seringkali membutuhkan arsitektur yang “Deep”; karena jika tidak, menu menjadi terlihat sangat banyak. Pada ketiga gambar di bawah ditunjukkan IA dengan jenis “Deep”.

Arsitektur menu pada website Walmart
Arsitektur menu pada website Amazon
Arsitektur menu pada website Blibli

Website seperti YouTube, yang hanya berurusan dengan user dan video, biasanya lebih “Flat”.

Halaman Trending pada website Youtube

Anda perlu menentukan apakah website Anda lebih tepat menggunakan konsep “Flat” atau “Deep”. Namun, jangan pernah mengkombinasikan dua jenis Site Map tersebut.


JENIS INFORMATION ARCHITECTURE

Ada banyak cara untuk mengatur sejumlah informasi. Struktur yang berbeda bisa lebih menjadikan desain lebih baik atau lebih buruk, bergantung pada jenis konten atau tujuan proyek Anda. Untuk menyusun halaman website, Anda harus memilih jenis IA untuk dikerjakan.

Jenis-jenis IA adalah:

  • Categories
  • Tasks
  • Search
  • Time
  • People

Categories

Ketika Anda memikirkan sebuah toko ritel seperti Zalora, Anda mungkin membayangkan menunya sebagai serangkaian kategori: “Wanita, Pria, Anak, Sale,” dan seterusnya.

Kategori pada website Zalora Indonesia

Ketika Anda mengklik kategori-kategori itu, Anda berharap melihat konten yang sesuai dengan kategori itu.

Kategori Pakaian Wanita di Zalora Indonesia

Ini adalah jenis IA yang paling umum, menyusun informasi berdasarkan kategori. Namun, perlu diingat bahwa ketika kategorinya kompleks, misalnya produk perbankan, maka Anda dan user mungkin tidak memiliki harapan yang sama tentang apa yang ada dalam kategori tersebut.


Tasks

Cara lain untuk mengatur website atau aplikasi Anda adalah berdasarkan tujuan yang harus dicapai user. Jika Anda adalah sebuah bank, mungkin hal seperti “Save, Loan, Invest, Get Help, Open an Account” akan membuat menu lebih sederhana. Jika user tahu apa yang mereka inginkan, jenis IA ini adalah pilihan cara yang baik untuk menyusun desain Anda. Tetapi Anda perlu berhati-hati, bahwa user tidak selalu cukup tahu untuk memilih petualangan mereka sendiri. Jika Anda memikirkannya, Anda akan menyadari bahwa task-based website dan category-based website untuk perusahaan yang sama bisa terlihat sangat berbeda.

Halaman website Bank Negara Indonesia (BNI)

Search

Jika website Anda sangat kompleks, atau sebagian besar penuh dengan konten yang dibuat user, arsitektur berbasis pencarian seperti YouTube mungkin lebih masuk akal. IA tipe ini sebenarnya akan sulit digunakan dan membutuhkan banyak pekerjaan untuk menjaga kategori tetap benar.


Time

Jika Anda baru memulai role di UX, semangat Anda mungkin masih meluap-luap, sehingga Anda juga dapat merancang IA yang berubah seiring waktu. Versi paling sederhana adalah inbox Anda, tempat pesan ditampilkan sesuai urutan kedatangannya. Itu adalah desain IA berbasis waktu. Di sebuah website, Anda akan memiliki halaman untuk hal-hal seperti “Hot right now, archived, later”. Facebook News Feed juga merupakan contoh desain berbasis waktu.


People

Facebook — atau social network apa pun — adalah IA yang didasarkan pada orang. Semua halaman yang dirancang berisi informasi tentang siapa dan apa hubungan di antara mereka. Setelah Anda berada di profil seseorang, Facebook menggunakan kategori (Foto, Teman, Tempat) untuk mengatur berbagai jenis konten. Ada heberapa halaman selalu sama. Beberapa halaman berbeda untuk setiap user.


FLOW

Jika Anda ingin user mendapatkan informasi mulai dari A sampai B pada website, Anda harus merancang bagaimana mereka sampai di sana, bagaimana user berpindah dari bagian A ke bagian B. Coba bayangkan user Anda sebagai kerumunan orang di sebuah tempat fisik, seperti bandara udata (bandara). Ada beberapa cara yang dapat diprediksi orang banyak saat bergerak di sekitar bandara, dan jika Anda arsitek yang merancang bandara, Anda harus memastikan kerumunan orang dapat bergerak dengan mudah.

Pada gambar di bawah ini ditampilkan flow saat ketibaan penumpang dengan maskapai Japan Airline di Bandara Internasional Soekarno Hatta Jakarta.

Arrival Flow Maskapai Japan Airline di Bandara Soekarno Hatta

Aplikasi atau website memiliki konsep yang sama. Ribuan atau jutaan orang perlu bergerak melalui Information Architecture (IA) Anda tanpa terjebak atau hilang arah. Semakin baik desain IA yang Anda tampilkan, semakin mudah bagi user untuk mengalir bergerak ke halaman yang mereka inginkan dan tentu user semakin bahagia dengan kemudahan ini.

Penting bagi desainer untuk memikirkan bagaimana user mengalir melalui halaman checkout, melalui proyek-proyek dalam portofolio Anda, atau melalui proses pendaftaran di Facebook. Sama seperti kebanyakan orang akan pergi dari satu gate, atau dari satu gate ke gate yang lain, aplikasi atau website Anda akan memiliki jalur yang sama untuk dipertimbangkan juga.

Pada gambar-gambar di bawah ini ditunjukkan satu cara (dari banyak cara) flow berbelanja di website e-commerce Tokopedia.

Membuka satu toko
Memilih satu produk dan memasukkan ke keranjang belanja (Tambah ke Keranjang)
Informasi produk berhasil ditambahkan ke keranjang belanja dan menampilkan rekomendasi produk sejenis
Menampilkan isi keranjang belanja
Konfirmasi pembelian, pengiriman dan biaya total
Cara pembayaran biaya total

Ada hal-hal yang perlu Anda perhatikan untuk membuat flow yang baik pada sebuah Information Architecture.

Jangan Menghitung Klik atau Halaman

Arsitek sebuah bandara tidak menghitung berapa banyak langkah yang akan diambil orang atau berapa banyak gate yang akan mereka lalui, karena hal ini bukan masalah. Lebih penting memberi orang informasi yang tepat pada waktu yang tepat sehingga mereka tahu apakah harus belok kiri atau kanan untuk mencapai gate yang benar. Lorong panjang, seperti flow dengan banyak halaman, bisa sangat mudah digunakan, meskipun panjang. Dan lorong pendek dengan terlalu banyak tanda bisa membingungkan, seperti website dengan menu yang kompleks.


Hindari Membuat “Jalan Buntu”

Jika Anda mengirim kerumunan orang ke sebuah lorong tanpa jalan keluar, Anda akan mengalami masalah. Jika user menavigasi beberapa halaman hanya untuk sampai pada halaman tanpa “langkah selanjutnya”, mereka akan tersesat atau meninggalkan website Anda atau menjadi marah. Pastikan selalu ada halaman lanjutan untuk dikunjungi, dan pastikan user tahu bagaimana menuju ke sana.


Perhatikan Motivasi User

Ketika kebanyakan orang membayangkan user menggunakan desain, mereka membayangkan user membaca semua teks dan memeriksa setiap item menu dan menavigasi langsung ke bagian bawah website untuk menemukan apa yang mereka butuhkan. Jika user tidak menemukan apa yang mereka inginkan, setiap klik tambahan yang dilakukan user meningkatkan peluang mereka meninggalkan website Anda, termasuk klik pada tombol “Back”.


User Hanya Mundur Ketika Bingung atau Hilang Arah

Sangat umum membayangkan user Anda menavigasi kembali ke halaman di mana mereka memulai atau menggunakan tombol “Back” untuk menemukan apa yang mereka butuhkan. Tapi ini adalah cara yang salah.

Anda mungkin menganggap website Anda sebagai pohon dengan beberapa cabang, tetapi user hanya memikirkan opsi navigasi yang dapat mereka lihat sekarang atau yang sudah mereka gunakan. Jika user mengklik tombol “Back”, ini tidak berarti mereka akan “naik level” untuk mencoba kembali keputusan terakhir mereka. Ini berarti user tidak tahu apa yang harus dilakukan. Dalam pikiran user, tombol “Back” adalah tombol “Abort (batalkan)” atau tombol “Tidak”. Jika, selama user testing, Anda melihat user sering meng-klik tombol “Back”, itu berarti user tidak menemukan apa yang diinginkannya.

Cara yang dapat memfasilitasi user yang ingin melakukan langkah mundur (go backward) adalah dengan membuat loop. Loop yang dimaksud misalnya:

  • Halaman A menghubungkan ke Halaman B.
  • Halaman B menghubungkan ke Halaman C.
  • Halaman C menghubungkan ke Halaman A.

User dapat terus mengklik selamanya tanpa meninggalkan website Anda, seperti ilustrasi gambar di bawah ini.

Ilustrasi Loop pada 3 Halaman Website: Halaman A, Halaman B dan Halaman C

Katakanlah loop ini adalah website portofolio Anda:

  • Halaman A menunjukkan kategori pekerjaan yang telah Anda lakukan.
  • Halaman B adalah daftar proyek dalam satu kategori.
  • Halaman C adalah rincian tentang satu proyek.

User dapat memilih kategori, lalu memilih proyek, lalu membaca detailnya, dan kemudian menavigasi kembali ke kategori tanpa menggunakan tombol kembali untuk menavigasi. Mereka bisa melihat seluruh portofolio Anda tanpa pernah “mundur/ kembali ke halaman sebelumnya.” Jika user selalu dapat mengklik maju, mereka tidak perlu berhenti dan memutuskan ke mana harus pergi berikutnya. Alasannya adalah membuat keputusan adalah hal yang sulit, tetapi melakukan hal yang sama berulang-ulang adalah hal yang mudah.


REFERENSI

  • Marsh, J, 2016. UX for Beginners. Canada: O’Reilly Media, Inc.
  • Unger, R, Chandler, C, 2012. A Project Guide to UX Design: For User Experience Designers in the Field or in the Making (2nd Edition). Berkeley: New Riders.
  • Feature Image: Photo by Alvaro Reyes on Unsplash

One thought on “Information Architecture [1]

Comments are closed.