MODUL PERKULIAHAN Interactive Broadcasting Layout dan Metode Navigasi Web Fakultas Program Studi Ilmu Komunikasi Broadcasting TatapMuka 13 Kode MK DisusunOleh 41040 Bagus Rizki Novagyatna Abstract Kompetensi Pembahasan Layout dan Metode Navigasi Web Navigasi Web adalah bagian dari situs Web yang berguna untuk memandu pengunjung menjelajahi isi situs dan menghantarkan pengunjung pada isi yang mereka cari. Pada artikel sebelumnya, telah dibahas mengenai tip dasar bagaimana menampilkan sebuah navigasi situs Web. Pada artikel ini, kita akan mengenal navigasi Web berdasarkan tata-letak dan metode penampilan navigasi tersebut. Posisi Navigasi Posisi sebuah navigasi ternyata turut menentukan sukses atau tidaknya sebuah navigasi. Pada posisi yang tepat, sebuah navigasi dapat membuat pengunjung lebih mudah menelusuri situs Web. 1. Top Navigation (Navigasi di atas) Navigasi ini cocok diterapkan pada situs-situs portal dengan banyaknya menu atau fasilitas yang ditawarkan. Navigasi ini cukup menghemat tempat dibandingkan dengan navigasi pada bagian lain. Umumnya (pada situs portal), navigasi ini hanya menggunakan teks tanpa icon atau image. Dikarenakan menghemat tempat, kolom kiri atau kanan situs dapat digunakan untuk banner. 2. Left Navigation (Navigasi di kiri) Bila menu situs Anda tidak begitu banyak, navigasi di sebelah kiri lebih cocok dipergunakan. Navigasi pada posisi ini menawarkan banyak kreasi-kreasi yang berlainan, Anda dapat menggunakan Icon atau animasi agar lebih “eye-catching”. Pengunjung akan mudah terbiasa dengan tampilan menu di bagian kiri, karena mereka sudah terbiasa dengan tampilan menu disebelah kiri pada OS mereka. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id 3. Right Navigation (Navigasi di kanan) Navigasi ini jarang dipergunakan untuk menu utama, biasanya bagian kanan lebih sering dipergunakan untuk menampilkan fitur-fitur dari menu utama. 4. Free Navigation (Navigasi bebas) Navigasi ini dapat terletak pada bagian-bagian lain dari sebuah situs, navigasi ini sering dipergunakan pada situs-situs dengan menggunakan animasi Flash. Saran saya dalam menampilkan navigasi ini, beri penekanan pada pengunjung bahwa bagian tersebut adalah navigasi misalnya dengan menggunakan movie yang berada disekitar navigasi, Anda dapat menggunakan cara lain, yang terpenting tonjolkan navigasi tersebut. Metode Tampilan Navigasi Navigasi dapat ditampilkan dalam berbaga media yaitu teks, image, atau animasi. Masingmasing memiliki kekurangan dan kelebihan. 1. Teks Menampilkan menu dalam teks bisa jadi kurang menarik perhatian pengunjung bila Anda tidak meramu-nya dengan baik. Beri “tanda” lebih bahwa teks itu adalah navigasi misalnya dengan sedikit memperbesar huruf dari pada teks yang dipergunakan, menambahkan garis, atau warna pada latarnya. Kelebihan dari metode ini adalah waktu downloading yang cepat, jadi sangat cocok diterapkan pada situs yang memiliki banyak menu. 2. Image Menampilkan menu dalam image menawarkan banyak sekali variasi, misalnya dengan icon dan penggunaan huruf dan bentuk yang lebih bebas. Sebaiknya, navigasi menggunakan images ini menggunakan warna yang tidak kompleks, makin sedikit warna ukuran file akan semakin sedikit. 3. Animasi 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id Navigasi ini memang terlihat sangat menarik dengan berbagai interaktifitas visual yang ditawarkan. Bila Anda menggunakan Flash, tes terlebih dahulu waktu download dari menu tersebut. Jangan sampai pengunjung menunggu lama untuk dapat melihat menu. Pada browser yang tidak terdapat plugin Flash, navigasi ini tentu saja tidak akan tampil. Beri alternatif bagi pengunjung yang menggunakan browser yang tidak terinstall flash player Merancang Navigasi Website Navigasi pada sebuah website yang tertampil pada menu dan links adalah petunjuk bagi pengunjung terhadap halaman - halaman yang terdapat dalam website. Pengunjung akan semakin mudah menemukan halaman - halaman dalam website Anda jika menu - menu dan link yang ada tampil secara terstruktur. Sudah pasti pengunjung akan kesal apabila tidak mendapatkan halaman website yang ia cari gara - gara navigasi yang ruwet. 1. Rencanakan dengan Baik Hal yang mutlak dilakukan sebelum mulai membuat sebuah web tentunya adalah pembuatan konsep dari website itu sendiri. Konsep tersebut akan memuat navigasi dasar dalam bentuk “tree view” (bercabang dan beranting) dari mulai konten yang bersifat umum hingga konten yang bersifat mendetail. Inilah garis besar navigasi dari situs yang akan dibuat. 2. Dimana Navigasi diletakkan Seperti telah dikemukakan di atas, bahwa navigasi akan membawa pengunjung dari hal - hal yang bersifat umum hingga hal - hal yang bersifat mendetail. Halaman utama (index) tentu saja akan memuat menu - menu pokok yang bersifat umum. Percabangan dari menu - menu inti tersebut dapat di letakkan pada halaman - halaman cabang dari index. Alternatif lain, Anda dapat menggunakan javascript untuk menampilkan menu dan sub-menu sekaligus. 3. Konsisten Sebisa mungkin jangan merubah letak menu pada setiap halaman web sehingga pengunjung lebih mudah menemukan menu - menu tersebut. Misalnya menu utama berada di atas, setelah itu pada halaman - halaman yang terdapat dalam menu utama dapat ditampilkan sub-menu di sebelah kiri atau kanan halaman. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id 4. Spotty! Buatlah menu dengan menonjol sehingga pengunjung mudah mengenalinya. Hal ini tentu saja harus di gabungkan dengan unsur estetika sehingga menu - menu tersebut dapat sejalan dengan konsep desain web yang dibuat. 5. Singkat & Deskriptif Kata - kata yang terdapat dalam menu harus mampu memberikan petunjuk yang jelas dan singkat tentang halaman website di bawah menu tersebut. Gunakan istilah - istilah yang lazim, singkat, dan mudah dipahami. 6. Berikan Petunjuk pada Pengunjung Akan lebih baik jika pada halaman website memuat strukur singkat halaman web yang sedang di tampilkan. Misal : Tentang Kami >> Visi & Misi >> 7. Berikan Link ke Halaman Utama Jangan lupa untuk memberikan link ke halaman utama atau link ke halaman dalam “parent topic”. Ini akan memudahkan pengunjung jika situs Anda di bangun dalam struktur menu dan submenu yang cukup kompleks. 8. Sitemap Buatlah sitemap yang linknya berada di setiap halaman web. Ini akan semakin memudahkan dan mempersingkat proses pencarian halaman - halaman website oleh pengunjung. Jika pengujung merasa nyaman dalam mengunjungi website Anda, maka akan semakin baik pula content website dapat diterima oleh pengunjung. Navigasi Website Sebuah situs pasti memiliki suatu navigasi yang diibaratkan sebagai sebuah petunjuk jalan atau peta, memberikan pilihan kepada pengunjung bagian mana yang akan ia kunjungi. Pembangunan sebuah navigasi tidak dapat dianggap remeh karena pengunjung akan merasa kesal dan bingung bila sebuah situs memiliki navigasi yang kurang baik dan “menyesatkan”. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id Navigasi Web adalah bagian dari situs Web yang berguna untuk memandu pengunjung menjelajahi isi situs dan menghantarkan pengunjung pada isi yang mereka cari. Langkah – langkah dalam membuat dan menampilkan suatu navigasi situs website adalah : Ø Perencanaan Hal pertama yang harus dilakukan sebelum membuat navigasi sebuah situs website adalah membuat konsepnya. Dalam membuat konsep tersebut, dilakukan dengan membuat alur navigasi dalam bentuk tampilan pohon (tree-view), digambarkan mulai dari yang umum kemudian bercabang menjadi yang lebih khusus dan mendetil. Dan dapat pula dilakukan dengan menentukan bagian paling atas atau root dari alur menu. Ø Topik utama pada navigasi Dari gambaran tersebut kita tentunya sudah mendapatkan menu atau topik mana sajakah yang akan ditampilkan dalam navigasi. Tentunya, bagian paling ataslah dari tampilan pohon (dalam sketsa) yang dicantumkan dalam navigasi. Menu teratas itulah yang berguna sebagai gambaran umum dari menu atau bagian lain situs yang bersifat khusus. Ø Konsisten Dalam meletakan sebuah navigasi navigasi, simpanlah navigasi pada tempat yang sama untuk setiap halaman. Dalam desainnya pun 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id sebaiknya tidak berubah. Hal ini bertujuan agar pengunjung tidak bingung mencari navigasi. Ø Berbeda Buatlah tampilan sebuah Navigasi terlihat berbeda dari tampilan lainnya. Hal ini bertujuan agar pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi. Agar lebih “eye cathing” pergunakan icon-icon sederhana yang menggambarkan setiap menu. Ø Singkat Tepat dan Jelas Gunakan kata-kata yang tepat dengan singkat dan jelas, gunakan istilah-istilah yang lazim dipergunakan atau mudah dimengerti pengunjung. Ø Tunjukan dimana pengunjung Setelah pengunjung mengklik salah satu menu, beri tanda bahwa ia sedang berada pada bagian itu. Dapat dengan memberi tanda pada menu navgasi, atau dengan meletakan titel atau judul dari halaman tersebut. Ø Jangan lupa “Home” Jangan lupa untuk meletakan “Home” atau “Back” pada halaman selain halaman utama atau homepage. Buatlah pengunjung nyaman dengan navigasi yang dibuat, karena navigasi yang baik, akan mempermudah pengunjung mencari apa yang ia inginkan. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id Posisi Navigasi Posisi sebuah navigasi ternyata turut menentukan sukses atau tidaknya sebuah navigasi. Pada posisi yang tepat, sebuah navigasi dapat membuat pengunjung lebih mudah menelusuri situs Web. ü Top Navigation (Navigasi di atas) Navigasi ini cocok diterapkan pada situs-situs portal dengan banyaknya menu atau fasilitas yang ditawarkan. Navigasi ini cukup menghemat tempat dibandingkan dengan navigasi pada bagian lain. Umumnya (pada situs portal), navigasi ini hanya menggunakan teks tanpa icon atau image. Dikarenakan menghemat tempat, kolom kiri atau kanan situs dapat digunakan untuk banner. ü Left Navigation (Navigasi di kiri) Bila menu situs yang telah dibuat tidak begitu banyak, navigasi di sebelah kiri lebih cocok dipergunakan. Navigasi pada posisi ini menawarkan banyak kreasi-kreasi yang berlainan, kita dapat menggunakan Icon atau animasi agar lebih “eye-catching”. Pengunjung akan mudah terbiasa dengan tampilan menu di bagian kiri, karena mereka sudah terbiasa dengan tampilan menu disebelah kiri pada OS mereka. ü Right Navigation (Navigasi di kanan) Navigasi ini jarang dipergunakan untuk menu utama, biasanya 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id bagian kanan lebih sering dipergunakan untuk menampilkan fitur-fitur dari menu utama. ü Free Navigation (Navigasi bebas) Navigasi ini dapat terletak pada bagian-bagian lain dari sebuah situs, navigasi ini sering dipergunakan pada situs-situs dengan menggunakan animasi Flash. Dalam menampilkan navigasi ini, beri penekanan pada pengunjung bahwa bagian tersebut adalah navigasi misalnya dengan menggunakan movie yang berada disekitar navigasi, kita dapat menggunakan cara lain, yang terpenting tonjolkan navigasi tersebut. Metode Tampilan Navigasi Navigasi dapat ditampilkan dalam berbaga media yaitu teks, image, atau animasi. Masing-masing memiliki kekurangan dan kelebihan. o Teks Menampilkan menu dalam teks bisa jadi kurang menarik perhatian pengunjung bila kita tidak meramu-nya dengan baik. Beri “tanda” lebih bahwa teks itu adalah navigasi misalnya dengan sedikit memperbesar huruf dari pada teks yang dipergunakan, menambahkan garis, atau warna pada latarnya. Kelebihan dari metode ini adalah waktu downloading yang cepat, jadi sangat cocok diterapkan pada situs yang memiliki banyak menu. o Image Menampilkan menu dalam image menawarkan banyak sekali variasi, misalnya dengan icon dan penggunaan huruf dan bentuk yang lebih bebas. Sebaiknya, navigasi menggunakan images ini menggunakan warna yang tidak kompleks, makin sedikit warna ukuran file akan semakin sedikit. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id o Animasi Navigasi ini memang terlihat sangat menarik dengan berbagai interaktifitas visual yang ditawarkan. Bila kita menggunakan Flash, tes terlebih dahulu waktu download dari menu tersebut. Jangan sampai pengunjung menunggu lama untuk dapat melihat menu. Pada browser yang tidak terdapat plugin Flash, navigasi ini tentu saja tidak akan tampil. Beri alternatif bagi pengunjung yang menggunakan browser yang tidak terinstall flash player. 2016 Interactive Broadcasting Bagus Rizki Novagyatna, S.Ikom PusatBahan Ajar dan eLearning http://www.mercubuana.ac.id