IA - DAW

Transcript

1. Yan Yan Sofiyan, M.Kom
2. BUKU http://yunus.hacettepe.edu.tr/~tonta/courses/fall2010/bby607/IAWWW.pdf
3. Untuk dapat menciptakan sistem informasi ini, anda perlu memahami sifat alami dari user, konten dan konteksnya. Rosenfeld dan Morville menyebut ini sebagai “information ecology” dan mereka memvisualisasikannya dengan diagram venn. Setiap lingkaran yang ada, mengacu pada : a. Context : tujuan bisnis, funding, politik, budaya, teknologi, sumber daya dan kendala yang ada. b. Content : content objectives, dokumen dan tipe datanya, volume, struktur yang ada, pemerintahan dan ownership. c. Users : audience, task, kebutuhan, kebiasaan mencari informasi dan experience.
5. Each Area Need Different Expertise Pakar Bisnis Pakar Komunikasi Pakar Pengalaman Pengguna
7. Definisi • “Informasi Arsitektur adalah seni untuk mengekspresikan model atau konsep informasi yang digunakan dalam suatu kegiatan yang memerlukan rincian eksplisit dari sistem yang kompleks” • ”Informasi Arsitektur adalah seni dan ilmu mengatur dan pelabelan situs web, intranet, komunitas online, dan perangkat lunak untuk mendukung kegunaan (usabilitas)”.
8. Definisi Arsitektur Informasi (AI) adalah tentang bagaimana mengatur dan menampilkan informasi dalam sebuah situs web sehingga memiliki struktur yang baik dan mudah digunakan
9. Apa yang perlu di ketahui tentang IA ? Agar berhasil, anda memerlukan pemahaman yang beragam tentang standar industri untuk menciptakan, menyimpan, mengakses dan menyajikan informasi. Lou Rosenfeld dan Peter Morville menyebutkan di buku mereka “Information Architecture for the World Wide Web” beberapa komponen utama IA : 1. Organization Schemes and Structures : Bagaimana anda mengkategorikan dan menyusun sebuah informasi 2. Labeling Systems: Bagaimana anda mewakili sebuah informasi 3. Navigation Systems: Bagaimana user browse atau mengabaikan sebuah informasi 4. Search Systems: Bagaimana user mencari/menelusuri sebuah informasi
10. What user want is the most important Keinginan calon pengguna website (target pengunjung) lebih penting daripada keinginan kustomer atau pengembang dalam merancang struktur informasi situs web Tim Arsitektur Informasi dapat terdiri dari perwakilan pemilik sistem (kustomer) dan pihak pengembang. Calon pengguna dianggap sebagai bagian dari tim
11. Mengapa IA Begitu Penting? • Pondasi untuk merancang website yang baik • Cetak biru dari website • Menghemat biaya dan waktu secara jangka panjang • Tidak perlu menjadi ahli untuk menerapkannya
12. Tahapan Information Architecture (IA)
13. Tujuan membantu tetap fokus pada hal-hal penting dan tidak melupakan hasil akhir yang diharapkan
14. Langkah-langkah • Ajukan pertanyaan pada setiap anggota tim seperti: misi organisasi, tujuan jangka pendek dan panjang, siapa audiens diharapkan, mengapa orang mengunjungi situs Anda. • Saring jawaban dan tentukan tujuan-tujuan situs darinya Tahap ini menghasilkan dokumen rancangan: Daftar Tujuan Situs dan ringkasan
15. Membantu pengguna mendapatkan pengalaman yang menyenangkan akan membantu situs kita meraih kesuksesan
16. User Experience adalah bagaimana seseorang merasa ketika berinteraksi dengan sistem. Sistem ini bisa berupa sebuah situs web, aplikasi web atau perangkat lunak desktop dan, dalam konteks modern, umumnya dinyatakan dengan beberapa bentuk interaksi manusia- komputer (HCI). Definisi
17. Keberhasilan sebuah situs web bergantung hanya pada satu hal: bagaimana pengguna mengartikannya. "Apakah situs web ini memberikan nilai? Apakah mudah untuk digunakan? Apakah menyenangkan untuk menggunakannya? “ Ini adalah pertanyaan-pertanyaan yang ada dalam benak seorang pengunjung ketika berinteraksi dengan sebuah situs web Persepsi Pengguna
18. Langkah-langkah • Tentukan Audiens/Target Pengunjung –Ajukan pertanyaan pada anggota tim –Buat daftar audiens dan cocokkan dengan tujuan situs • Buat skenario –Skenario berisi cerita. –Membantu memvisualisasi situs dan pengguna –Cara: kelompokkan audiens, buat skenario untuk setiap kelompok. Mulai skenario dengan memberi nama, latar belakang, dan tugas pada kelompok spt dunia nyata
19. • Analisa Pesaing –Buat daftar situs pesaing –Tentukan fitur dan kriteria untuk mengevaluasi, dimulai dengan tujuan situs. Kriteria lainnya spt waktu donwload, ukuran halaman, layout, tampilan situs. –Buat grid untuk membantu analisis –Tulis kelebihan dan kekurangan setiap situs Dokumen hasil: Audiens, Skenario, Analisa Pesaing Langkah-langkah
20. Contoh Grid
21. Konten situs dapat disusun dengan bantuan teknik sorting card
22. Langkah-langkah Inti tahap ini adalah mengumpulkan potongan-potongan konten untuk membentuk struktur dan organisasi situs. Yang perlu ditetapkan disini adalah konten dan fungsi-fungsi situs. •Buat daftar konten dan fungsi yang diperlukan. Browsing situs pesaing untuk kemungkinan halaman yang belum ada dalam daftar.
23. Langkah-langkah • Revisi daftar konten Daftar konten yang telah direvisi dalam langkah ini akan menghasilkan “Content Inventory” atau Gudang konten • Berdasarkan gudang konten diatas, revisi daftar kebutuhan fungsional. Misal, jika terdapat halaman pembatalan pemesanan, mestinya situs punya prosedur untuk membatalkan pesanan.
24. Ex. “Content Inventory”
25. ✓Beberapa jenis konten : statis, dinamis, fungsional, dan transaksional. ✓Contoh konten statis: Copyright notices, privacy statement, membership rules. ✓Contoh konten fungsionalitas: halaman member login, newsletter signup, form. Jenis-jenis Konten
26. ...Lanjutan Langkah-langkah • Kelompokkan dan beri label pada konten Langkah ini mengorganisasikan konten dan menentukan dasar untuk struktur situs. –Tulis setiap elemen dari Gudang Konten ke kartu indeks. –Kelompokkan kartu indeks. –Namai setiap kelompok –Catat nama setiap kelompok dan item didalamnya
27. ...Lanjutan Langkah-langkah Ketika pengelompokkan dan penamaan sudah ditetapkan, gunakan sebagai sebagai dasar untuk menentukan bagian utama dari situs dan nama-nama dari setiap bagian. Ini adalah dasar untuk struktur situs. Dokumen hasil: Konten dan persyaratan fungsional
28. Struktur situs yang jelas membantu pengguna memahami konten situs
29. Langkah-langkah • Eksplorasi Metafora Metafora adalah suatu perbandingan citra atau melihat sesuatu berdasarkan hal lain. Contoh, jika Anda membuat situs penjualan, buatlah suasana situs seperti suatu toko. Jenis-jenis metafora: –Organizational metaphora: metafora situs penjualan berupa supermarket, dimana produk dikelompokkan berdasarkan jenis.
30. ...lanjutan Jenis metafora – Functional metaphora: copy, cut, dan paste meniru perilaku gunting dan lem – Visual Metaphora: berdasarkan elemen grafis yang familiar bagi banyak orang. Contoh: link home pada situs web dilambangkan dengan ikon rumah
31. ...lanjutan Langkah-langkah • Set It In Stone/Buat Peta Situs – Membuat peta hirarki situs yg disebut “Site Structure Listing”. Pertama, buat root dari struktur lalu petakan setiap bagian dengan item dari Gudang Konten. Buat sampai tingkat terdalam. – Visualkan daftar “Site Structure Listing”
32. Visualisasi Site Structure Listing
33. ...lanjutan Langkah-langkah • Tentukan sistem navigasi Bagaimana pengguna menggunakan situs? Bagaimana mereka akan pergi dari satu halaman ke halaman lain? Bagaimana Anda mencegah mereka tersesat? Mendefinisikan sistem navigasi untuk situs memecahkan masalah ini. –Lihat Site Structure Listing, bagian utama pada daftar merupakan kandidat utama menjadi sistem navigasi global yang tampil disetiap halaman. Jika mungkin batasi jumlah navigasi global 5-7 saja.
34. Navigasi Global
35. Local Navigation
36. ...lanjutan Langkah-langkah –Sistem navigasi lokal dapat berbentuk macam- macam: daftar topik, menu pilihan, daftar item yang relevan dengan topik situs, dsb. Dokumen hasil: Struktur Situs
37. Membuat desain visual berdasarkan struktur situs
38. Langkah-langkah Bertujuan untuk memetakan struktur situs ke desain visual •Langkah pertama, susun kisi-kisi layout (layout grids) sebagai template yang menjelaskan struktur dan organisasi situs pada tingkat halaman, berisi pengaturan al.: – Lokasi navigasi lokal dan global, logo perusahaan, sponsor dan iklan serta aspek- aspek lain
39. Contoh Kisi-kisi Layout
40. ...Lanjutan Langkah-langkah • Langkah kedua, buat sketsa desain yang memperlihatkan tampilan dan nuansa situs • Terakhir, menyatukan kisi-kisi layout dengan sketsa desain untuk membuat halaman mock- ups, halaman-halaman contoh, yang menggambarkan situs yang sebenarnya dengan fungsi-fungsi yang belum lengkap. Halaman mock ups ini menjadi basis pembuatan prototipe. • Dokumentasi: rancangan visual yang terdiri dari layout grids, sketsa desain, dan halaman mockup
41. Contoh sketsa desain
42. Contoh Halaman Mock Up
43. Reference • https://www.usability.gov/what-and-why/information- architecture.html • https://prezi.com/aafmvya6bk7t/understanding-information- architecture/ • https://www.usability.gov/what-and-why/content-strategy.html • https://www.usability.gov/what-and-why/interaction-design.html • https://www.usability.gov/how-to-and- tools/methods/wireframing.html • https://www.usability.gov/how-to-and- tools/methods/prototyping.html • https://www.usability.gov/how-to-and- tools/methods/organization-schemes.html • https://www.usability.gov/how-to-and- tools/methods/organization-structures.html • Information Architecture for the World Wide Web , Peter Morville & Louis Rosenfeld