Information Architecture [2]

TOOLS YANG DIGUNAKAN

Terdapat sangat banyak tool yang dapat digunakan dalam membuat Site Map dan Task Flow, misalnya Microsoft Visio, Axure RP Pro, OmniGraffle, Adobe Indesign, Adobe illustrator, Microsoft PowerPoint dan tool online.

Apa pun tool yang Anda gunakan dalam proses mendesain untuk Information Architecture, ada banyak contoh online dari profesional lain yang senang membagikan karyanya dan membantu Anda dalam karier Anda di bidang UI/UX. Sebagian besar karya ini gratis dan dapat memberi Anda kerangka yang perlu Anda buat, paling tidak dokumentasi yang terlihat profesional.

ELEMEN DASAR SITE MAP DAN TASK FLOW

Elemen dasar yang terdapat pada aplikasi desain yang Anda punya, lebih dari cukup untuk membuat Site Map dan Task Flow. Namun, untuk membuat karya Anda dapat dengan mudah diterjemahkan oleh audiens yang luas, Anda perlu menggunakan sekumpulan shape yang standard.

Visual Vocabulary for Information Architecture adalah satu contoh standard, dan juga yang akan kita gunakan pada materi ini. Visual Vocabulary ini diciptakan oleh Jessee James Garrett dan bisa diakses online di www.jjg.net/ia/visvocab.

Untuk membantu Anda memulai dan menjadi terbiasa dengan dasar-dasar Site Map dan Task Flow, selanjutnya akan dijelaskan sekumpulan elemen inti dari Visual Vocabulary dan apa yang mereka wakili.

Page

Page (halaman) adalah unit dasar dari User Experience pada website. Ada beberapa cara untuk menggambar Page, tetapi yang paling sederhana dan paling sering dipakai adalah persegi panjang yang polos. Saat Anda membuat Site Map dan Task Flow, Anda akan menemukan style yang paling sesuai untuk memberi label dan menomori Page website Anda.

Pagestack

Pagestack mewakili beberapa halaman dari konten yang sama. Cara mudah untuk memahami Pagestack adalah dengan memikirkan konten dinamis, seperti halaman blog secara umum yang dibuat menggunakan sistem publish atau halaman produk pada website e-commerce. Halaman-halaman ini dirancang sekali dan berada dalam template desain, tetapi Anda memiliki kemampuan untuk mengklik banyak halaman konten yang berbeda — tanpa benar-benar meninggalkan desain template asli.

Decision Point

Decision Point digunakan untuk menunjukkan jalur yang bisa ditempuh user, bergantung pada jawaban atas satu pertanyaan. Decision Point seperti Gambar 4 “Apakah identitas login user benar?” Jawaban untuk pertanyaan itu akan menentukan halaman mana (atau tampilan konten) yang akan ditampilkan. Proses login yang gagal menghasilkan error message, sedangkan login yang berhasil membawa user ke homepage member website. Luangkan waktu untuk melabeli Decision Point dengan tepat, terutama ketika berbagi produk kerja Anda dengan rekan tim atau klien.

Gambar 4 Contoh Menggunakan Decision Point (10a)

Connector dan Arrow

Connector (penghubung) dan Arrow (panah) digunakan untuk menunjukkan gerakan atau progress antar Page, Pagestack, Decision Point, dan sebagainya. Connector umumnya muncul di mana ada call to action dari satu Page ke Page lainnya. Misalnya, link ke Page “About Us” dari Page “Home” dapat menjadi Connector antara dua Page. Arrow pada Gambar 5 menunjukkan pergerakan ke hilir (downstream) menuju penyelesaian sebuah task.

Connector dengan crossbar/palang pada Gambar 6 dapat digunakan untuk mengidentifikasi ketika perpindahan kembali ke Page asal Anda atau disebut pergerakan ke hulu (upstream), tidak lagi tersedia. Pada panah biasa, ketika Anda kembali ke halaman sebelumnya, data yang di-input masih ada, sedangkan pada panah dengan garis, data yang sudah di-input di halaman sebelumnya, jika Anda sudah pindah ke halaman lain akan hilang jika di-back.

Misalnya, setelah user login ke website, konten Page Home kini dipersonalisasi sesuai dengan user yang login, dan Page yang generik, yaitu halaman login, tidak akan lagi tersedia bagi user yang sudah melalui jalur login tersebut.

Gambar 6 Elemen Connector dengan Crossbar

Condition

Garis putus-putus adalah cara yang cukup umum untuk menampilkan suatu kondisi. Garis putus-putus ini dapat muncul di Site Map, Task Flow dan produk kerja lainnya yang dapat Anda ciptakan. Anda dapat menggunakan garis putus-putus sebagai Connector seperti pada Gambar 7, untuk meng-highligt bahwa koneksi ke sebuah Page bergantung pada beberapa aksi atau event.

Sederhananya, ada kondisi yang harus dipenuhi untuk pindah dari Page A ke Page B. Misalnya, Page B berisi informasi sensitif yang hanya dapat diakses oleh karyawan perusahaan. Kondisi dalam hal ini adalah tipe user (karyawan); jika kondisi terpenuhi (yang mengakses adalah karyawan), maka jalur ke Page B dibuat tersedia. Jika bukan user karyawan, maka akses ke Page B tersebut tidak diberikan.

Gambar 7 Connector dengan Garis Putus-Putus untuk Condition

Kesalahan Umum Dalam Membuat Site Map

Site Map yang ceroboh atau Task Flow yang terlihat tidak profesional dapat menyebabkan banyak kerusakan. Untuk membantu Anda mengenali kesalahan kecil dengan konsekuensi besar ini, maka akan dijelaskan beberapa kesalahan umum. Tujuannya adalah untuk membuat Anda belajar menemukan kesalahan umum ini dan kemudian menghindarinya terjadi.

1. Koneksi yang Ceroboh

Koneksi yang ceroboh (Gambar 8) terjadi karena elemen yang disusun dengan buruk, tidak memperhatikan detail dalam kerja. Jangan berkelakuan malas, terlepas dari kendala waktu dan tekanan yang mungkin Anda alami, pastikan koneksi Anda terhubung dengan baik. Jika Anda menunjukkan sketsa pensil, Anda harus memiliki penghapus untuk berjaga-jaga.

Jadikan sebagai aturan: Selalu pastikan setiap garis yang menyentuh benda lain terhubung dengan akurat.

2. Obyek yang Tidak Selaras dan Tidak Sejajar

Bergantung pada tool yang Anda gunakan, mungkin sulit untuk memastikan bahwa elemen-elemen yang Anda susun bisa sejajar secara akurat atau ditempatkan secara terpisah pada Site Map atau Task Flow Anda (Gambar 9). Ada beberapa cara yang cukup sederhana untuk memastikan bahwa Anda mengikuti aturan dasar ini.

Gambar 9 Contoh Obyek yang Tidak Selaras dan Tidak Sejajar

Untuk permulaan, Anda dapat mengaktifkan grid di aplikasi yang Anda gunakan. Dengan bantuan grid ini, Anda selalu dapat mengukur dan menyelaraskan jarak antara objek. Ketika Anda menggunakan pensil dan kertas, Anda dapat menggunakan kertas grafik dan menerapkan prinsip dasar yang sama.

3. Teks dengan Penempatan yang Buruk

Penempatan teks yang ceroboh (Gambar 10) kelihatannya mudah dihindari, tetapi kecerobohan ini sangat umum terjadi.

Gambar 10 Peletakan Teks Tidak Konsisten

Temukan cara untuk membuat teks Anda pas dengan shape yang Anda buat. Pastikan label yang ditempatkan di luar elemen memiliki koneksi yang sesuai (Gambar 11).

4. Kurangnya Penomoran Halaman

Aturan ini perlu diperhatikan dan diterapkan: beri penomoran pada setiap Page dari Site Map yang Anda buat. Jangan membuat Site Map yang samar-samar dan tak terhitung jumlahnya seperti Site Map pada Gambar 12 di bawah.

Gambar 12 Site Map Tanpa Struktur Penomoran

Setiap halaman yang Anda identifikasi pada Site map, perlu diberi nomor, dan sistem penomorannya harus memungkinkan untuk perubahan hilir (downstream) terjadi karena iterasi dan dibuatnya versi baru dari proyek Anda.

Anda dapat menggunakan berbagai pendekatan untuk penomoran halaman; yang paling umum adalah mengidentifikasi Homepage Anda sebagai 1.0 atau 0.0.0.0 (Gambar 13).

Metode ini memungkinkan Anda untuk memperhitungkan setiap keputusan dan Page yang mungkin akan ada sebelum Page Home, preloader Flash, layar login atau register atau sejumlah jenis Page lainnya, dengan menggunakan kode 0.X.

Seiring waktu, Anda akan dapat menentukan mana yang paling sesuai untuk Anda, tetapi sampai Anda merasa nyaman dan memahami kelebihan dan kekurangan dari kedua pendekatan tersebut, mulailah dengan mengidentifikasi Home Anda sebagai nomor 1.0.

Sistem penomoran pada Site Map Anda memungkinkan dokumentasi lain untuk disinkronkan dengannya. Sistem penomoran dapat dikembangkan ke dokumen lain, seperti:

Content Matrix. Content creator dapat memetakan salinan dan konten lainnya ke Page tertentu (dan ke elemen tertentu dalam wireframe) dengan menggunakan penomoran yang sama. Content Matrix adalah alat membantu perusahaan Anda memprioritaskan produksi konten untuk memastikan bahwa tim Anda fokus pada kegiatan produksi konten yang penting.
Task Flow. Task Flow dapat menggunakan sistem penomoran yang sama untuk menunjukkan bagaimana user akan menjalankan proses pada Page tugas tertentu.
Wireframes. Halaman wireframe Anda harus memiliki sistem penomoran yang sama dengan halaman-halaman pada Site Map Anda untuk menyediakan koneksi yang jelas antara kedua dokumen tersebut.
Desain Visual. Visual designer dapat menyinkronkan halaman dan elemen desain tertentu di Site Map Anda. Ini memungkinkan mereka untuk membagikan hasil pekerjaan mereka ketika tiba saatnya menyerahkan desain kepada developer.
Quality Assurance Documents. Tim quality assurance dapat membuat skrip testing yang didedikasikan untuk halaman tertentu atau halaman pada Site Map.

Singkatnya, penomoran halaman pada Site Map akan membuat hidup orang lain lebih mudah, dan ini berarti hidup Anda juga akan lebih mudah.

Site Map Sederhana

Selain berisi nomor halaman, Gambar 13 adalah model yang baik untuk membuat Site Map sederhana sebuah website yang memiliki fungsi dinamis terbatas dan sebagian besar sifatnya statis. Page yang diidentifikasi untuk website ini adalah:

Home
Blog
About
Sample of Work
Content

Seperti yang Anda lihat, Site Map sederhana ini menggabungkan elemen inti dari Visual Vocabulary dan mempertahankan gaya dan penampilan profesional. Yang paling penting, Site Map ini memberikan gambaran yang sangat jelas tentang navigasi, Page, dan kondisi yang tersedia untuk user.

TASK FLOW

Menggunakan banyak elemen dasar yang sama seperti Site Map, Task Flow adalah diagram yang mengidentifikasi jalur atau proses yang akan diambil user (dan terkadang suatu sistem) ketika mereka berjalan melalui website atau aplikasi Anda.

Anda dapat menggunakan Task Flow dalam sejumlah cara berbeda.

Ketika digunakan bersama dengan Site Map, mereka dapat menunjukkan bagaimana user membuka halaman dengan serangkaian informasi spesifik yang ditampilkan.
Kadang-kadang Flow ini digunakan untuk menunjukkan bagaimana tipe user tertentu (persona) diharapkan untuk melintasi website dan apa yang diharapkan persona itu dilihat berdasarkan pada mental model mereka. Lihat Task Flow vs User Flow.
Anda juga dapat menggunakan Task Flow untuk mengidentifikasi proses kompleks yang perlu dipahami dengan jelas sebelum proyek dikirim ke tim pengembangan.

Anda mungkin tidak menggunakan Task Flow pada setiap proyek yang Anda kerjakan, dan mereka mungkin tidak selalu berakhir sebagai produk kerja yang Anda presentasikan kepada klien Anda, tetapi menggunakannya Task Flow merupakan ide baik, bahkan jika hanya dengan pensil dan format kertas.

Task Flow vs User Flow

Menurut uxbeginner.com:

Task Flow adalah serangkaian langkah (Flow) yang diselesaikan user untuk tugas tertentu. Task Flow serupa dengan User Flow, kecuali mereka umumnya linier tanpa banyak cabang atau jalur. Contoh, semua user akan mengikuti langkah yang sama untuk menyelesaikan tindakan spesifik seperti membuat account atau melalui proses checkout.

User Flow adalah jalur yang diikuti user dalam sebuah experience. Flow-nya tidak harus linier, dan dapat bercabang di jalur yang berbeda. Misalnya, user dapat mengambil banyak jalur potensial dalam User Flow untuk menemukan produk secara online untuk dibeli:

User dapat menemukan melalui mesin pencari, yang kemudian membawanya ke blog, yang akhirnya menghubungkannya ke toko eCommerce untuk membeli produk.
User lain dapat mengklik melalui iklan untuk produk yang sama dan langsung mendarat di toko eCommerce.

Perhatikan bahwa ada beberapa jalur yang dapat diambil seseorang untuk mencapai setiap tujuan. Jalur yang berbeda ini = User Flow.

Menurut Harano (2019) Task Flow fokus pada tugas tunggal, sedangkan User Flow cenderung fokus pada user tertentu (mis., sekelompok audiens target atau persona).

Persamaan dan perbedaan Task Flow dengan User Flow dapat dilihat pada Gambar 14.

Gambar 14 Venn Diagram yang menunjukkan perbedaan dan persamaan Task Flow dengan User Flow

Task Flow cenderung linier, menunjukkan langkah-langkah tingkat tinggi yang akan diambil seseorang untuk mencapai tujuan atau titik akhir tertentu. Task Flow cenderung tidak bercabang dengan opsi atau titik keputusan, cenderung linier dan berurutan, dan umumnya dimaksudkan untuk menjadi sederhana, bukan rumit.

Contoh untuk menggambarkan perbedaan Task Flow dan User Flow dianalogikan dengan alur mencari resep pancake pada Gambar 15 dan Gambar 16.

Gambar 15 Task Flow: menemukan resep pancake

Gambar 15 menunjukkan alur pencarian resep pancake yang linear, alur yang diikuti seluruh karakteristik user.

Gambar 16 User Flow: menemukan resep pancake

Pada Gambar 16 dapat dilihat bahwa terdapat beberapa cara untuk bisa mendapatkan resep pancake yang sama. Berbagai persona pada proyek Anda dapat mengikuti alur sendiri, yang berbeda dengan persona lain dalam mencapai satu tujuan yang sama.

Merancang User Flow dapat memastikan bahwa Anda merancang Flow yang berfungsi untuk berbagai jenis orang yang terlibat dengan produk dan layanan Anda. Merancang User Flow dapat membantu Anda mengenali dan menghilangkan “jalan buntu” yang membuat user terlantar dalam desain Anda, memastikan bahwa Anda memperhitungkan dan menghormati pilihan user, dan mendesain dengan jelas dan lancar pada seluruh interaksi.

REFERENSI

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.
Harano, E. UX task flows vs. user flows, as demonstrated by pancakes. Link:https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-demonstrated-by-pancakes-896e78a98026
UXBeginner Glossary. Link:https://www.uxbeginner.com/glossary/task-flow/
Feature Image: Photo by Campaign Creators on Unsplash