Navigasi adalah petunjuk posisi pengguna berada dan bagaimana cara pengguna tersebut ke tempat lainnya. Terdapat beberapa tipe dari navigasi yaitu URL, page label, landmark pages, dan menu navigasi.
Mengetahui Lokasi
URL (Uniform Resource Locator)
Pengguna dapat mengetahui lokasi ia berada dengan melihat url yang tertera.
Contoh :
Terdapat juga url yang tidak mudah dibaca oleh pengguna
Contoh :
http://www.lazada.com/sell/
Label Situs dan Halaman
Label pada situs dapat menjelaskan lokasi yang lebih mudah dipahami oleh pengguna, dengan menggunakan label pengguna dapat mengetahui halaman apa yang sedang dibuka serta sedang berada di bagian apa.
Secara umum, label yang terdapat website harus dibedakan dari tulisan konten, misalnya dengan ukuran yang besar atau warna yang berbeda, dan posisi dari label harus konsisten di setiap halamannya. Tidak hanya posisi halaman saja yang penting untuk diketahui oleh pengguna, situs yang sedang dikunjungi juga penting untuk ditampilkan. Pada umumnya untuk mengindikasikan bahwa pengunjung sedang berada dalam situs tersebut, terdapat logo atau nama yang biasanya ditampilkan pada sisi kanan atas. Logo atau nama dari situs tersebut biasanya digunakan oleh pengguna untuk kembali ke halaman utama.
Contoh :
http://www.lazada.com/contact-us/
Terdapat cara lain untuk menampilkan lokasi yaitu dengan cara implied page label. Halaman yang sedang aktif akan diberi warna yang berbeda dengan label yang lainnya.
Contoh :
www.lazada.com
Untuk lebih lanjut label juga bisa digunakan untuk mengetahui seberapa jauh halaman yang sedang aktif berada
Lokasi dan Gaya Situs serta Halaman
Salah satu cara lain untuk memberitahukan lokasi pengunjung yaitu dari tampilan halaman yang sedang aktif. Kebanyakan website menggunakan warna utama untuk membedakan setiap bagian, misalnya untuk halaman contact us dengan warna merah, product warna hijau. Selain dengan warna terdapat juga website yang membedakan setiap bagian dengan tema yang dimilikinya.
Mengetahui History
History
Sebuah web browser akan mengingat halaman-halaman yang sudah dikunjungi oleh seorang pengunjung, sehingga apabila tombol back pada browser ditekan maka halaman akan menuju halaman yang sebelumnya dikunjungi. Sedangkan untuk sebuah website, pengunjung menginginkan tombol back untuk kembali berdasarkan struktur dari website
Cookies
Cookies akan menyimpan halaman yang telah dikunjungi ke dalam sistem, sehingga sistem dapat mengetahui apakah halaman tersebut sudah pernah dikunjungi
Contoh website nu aya link nu beda warna lamun pernah dikunjungi
Landmarks
Landmark biasa digunakan oleh user sebagai tempat awal ketika akan menjelajahi sebuah website, biasanya yang menjadi landmark adalah halaman yang pertama dibuka oleh user maupun halaman utama.
Contoh :
https://www.tokopedia.com/
Penempatan Navigasi
1. Top Navigation
Pada umumnya banyak situs mengadopsi navigasi yang disimpan di atas (top navigation). Navigasi ini membuat website akan memunculkan navigasi duluan sebelum menggeser kebawah ke dalam area content. Biasanya seorang pengunjung apabila sudah mencapai akhir halaman ia akan pergi ke halaman yang lain sehingga pengunjung harus melakukan scroll ke bagian atas untuk mencapai navigasi, hal ini bisa diatasi dengan beberapa cara.
a. Fix Navigational elements in top
Pada umumnya, merupakan navigasi yang menempel pada bagian atas halaman . Sehingga, ketika di scroll navigasi tersebut akan mengikuti halaman.
b. Back to top link
Navigasi yang memungkinkan user untuk kembali ke header secara cepat (melompat). Biasanya navigasi ini digunakan di web yang kontennya banyak, Sehingga tidak perlu scroll manual ke atas untuk meraih navigation bar.
c. Provide text links at bottom
Sebuah teks link yang mirip seperti top link umumnya ditambahkan dibagian bawah halaman, biasanya dibatasi oleh brackets ([]) atau symbols (|).
d. Prominence of navigational elements
Aspek lainnya adalah tonjolkan navigation bar dari situs tersebut agar dapat menarik perhatian user.
2. Bottom Navigation
Biasanya Bottom Navigation bukan merupakan navigasi utama situs tersebut. Pada bottom navigation, navigasi disimpan pada akhir sebuah halaman, hal ini terkadang menjadi masalah bagi pengguna, karena navigasi tidak akan langsung terlihat oleh pengguna ketika website pertama dibuka sehingga pengguna harus mencapai akhir halaman, hal ini bisa di atasi dengan posisi yang fixed seperti pada top navigation.
3. Left Navigation
Navigasi yang sering digunakan dan biasanya sebelah kiri layar digunakan oleh banyak program, ukuran dari navigasi tidak boleh hingga menutupi bagian konten dari website. Navigasi bar disebelah kiri terkadang disebut "navigation fence".
a. Let user scroll
Adalah icon navigasi yang muncul untuk menampung navigasi ketika halaman situs diperbesar (zoom in) / mobile, contohnya adalah gambar situs Kaskus yang sudah diperbesar seperti di bawah ini.
b. Open New Window for wide content
Banyak situs yang memberi pilihan untuk membuka jendela baru tanpa menggunakan left navigation ketika pengguna ingin melihat konten secara luas seperti tabel yang tidak bisa diatur ulang dan membutuhkan layar penuh dalam resolusi yang rendah.
c. Hide left Navigation
Beberapa situs sudah memakai JavaScript untuk menyembunyikan left navigation dan akan dimunculkan jika dibutuhkan.
4. Right Navigation
Baru-baru ini penempatan navigasi disebelah kanan sangat populer beberapa berpendapat bahwa penempatan navigasi kanan terdapat diluar konten dan membolehkan penggguna mendalami konten yang dibaca.
5. Center Navigation
Center navigation menempatkan navigasi pada bagian tengah dari sebuah website, hal ini tentu mengganggu konten dari website. Namun navigasi yang berada di tengah berguna untuk sebuah home page maupun landmark page karena memudahkan user untuk mengakses navigasi.
6. Navigation Consistency
Penempatan navigasi diusahakan harus konsisten pada setiap halaman, usahakan navigasi pada setiap halaman berada pada posisis yang sama. Suatu Navigasi dikatakan konsisten ketika urutan navigasi tersebut tetap, baik dilihat dari halaman beranda maupun dari halaman lain. Facebook memiliki template navigasi yang sama di setiap halamannya.
7. Navigation Hierarchy
Secara umum navigasi yang digunakan oleh kebanyakan desainer yaitu navigasi TLB atau top-left-bottom. Navigasi tipe ini menempatkan navigasi utama pada bagian header website, lalu navigasi tambahan pada sisi kiri website, dan pada bagian bawah terdapat navigasi utama dalam bentuk teks link.
Contoh pdf hal 210
Navigation and Scrolling
Seorang desainer web harus memperhatikan apakah halaman tersebut membutuhkan scrolling atau tidak, contohnya apabila ketika mendesain halaman yang digunakan untuk mengunjungi halaman yang lainnya maka scrolling tidak diperlukan, berbeda dengan halaman yang menampilkan konten yang banyak sehingga dibutuhkan scrolling.
Contoh web nu kudu di scroll jeung nu henteu
Navigation and Mouse Travel
Seorang desainer web juga perlu memperhatikan jarak pergerakan mouse untuk mencapai navigasi, hal ini biasanya dilihat dari jarak antar navigasi, ukuran navigasi, jarak navigasi dengan tombol back. Semakin mudah sebuah navigasi diklik maka akan semakin memudahkan user ketika mengunjungi website. Usahakan jarak antar navigasi dan juga ukuran tombol tidak terlalu jauh dan terlalu kecil.
Frame
Frame digunakan untuk membagi tampilan website menjadi dua atau lebih bagian, hal ini sangat baik digunakan untuk melakukan proses perbandingan karena akan memudahkan user untuk membandingkan tanpa harus mengganti tab atau window.
Contoh :
Http://www.uchicago.edu
Subwindow
Contoh dari penggunaan subwindow yaitu pop ups. Pop ups yaitu window baru yang muncul ketika halaman di load maupun ketika ada link atau tombol yang ditekan, pop ups dapat digunakan dengan baik apabila bertujuan untuk menampilkan informasi singkat sehingga tidak perlu repot untuk membuka halaman baru. User terkadang merasa terganggu dengan pop ups yang berisi hal-hal yang kurang penting, oleh karena itu penggunaan pop ups harus dilakukan dengan hati-hati agar tidak mengganggu user.
Contoh :
Navigation Remotes
Navigation remotes digunakan untuk memanggil konten kedalam main window. Navigation remotes merupakan subwindow yang tidak ditampilkan atau disembunyikan pada browser, ketika konten tersebut dipanggil tidak perlu adanya halaman baru untuk menampilkan konten tersebut.
Bookmarking
Bookmark digunakan oleh user apabila user tersebut ingin mengunjungi kembali website atau halaman yang telah ia buka. Untuk lebih memudahkan user membedakan antar bookmark yang satu dengan yang lain, seorang developer web bisa membuat icon khusus untuk digunakan sebagai icon bookmark website tersebut, icon tersebut harus berukuran 16x16 px.
Mengetahui Lokasi
URL (Uniform Resource Locator)
Pengguna dapat mengetahui lokasi ia berada dengan melihat url yang tertera.
Contoh :
Terdapat juga url yang tidak mudah dibaca oleh pengguna
Contoh :
http://www.lazada.com/sell/
Label Situs dan Halaman
Label pada situs dapat menjelaskan lokasi yang lebih mudah dipahami oleh pengguna, dengan menggunakan label pengguna dapat mengetahui halaman apa yang sedang dibuka serta sedang berada di bagian apa.
Secara umum, label yang terdapat website harus dibedakan dari tulisan konten, misalnya dengan ukuran yang besar atau warna yang berbeda, dan posisi dari label harus konsisten di setiap halamannya. Tidak hanya posisi halaman saja yang penting untuk diketahui oleh pengguna, situs yang sedang dikunjungi juga penting untuk ditampilkan. Pada umumnya untuk mengindikasikan bahwa pengunjung sedang berada dalam situs tersebut, terdapat logo atau nama yang biasanya ditampilkan pada sisi kanan atas. Logo atau nama dari situs tersebut biasanya digunakan oleh pengguna untuk kembali ke halaman utama.
Contoh :
http://www.lazada.com/contact-us/
Terdapat cara lain untuk menampilkan lokasi yaitu dengan cara implied page label. Halaman yang sedang aktif akan diberi warna yang berbeda dengan label yang lainnya.
Contoh :
www.lazada.com
Untuk lebih lanjut label juga bisa digunakan untuk mengetahui seberapa jauh halaman yang sedang aktif berada
Lokasi dan Gaya Situs serta Halaman
Salah satu cara lain untuk memberitahukan lokasi pengunjung yaitu dari tampilan halaman yang sedang aktif. Kebanyakan website menggunakan warna utama untuk membedakan setiap bagian, misalnya untuk halaman contact us dengan warna merah, product warna hijau. Selain dengan warna terdapat juga website yang membedakan setiap bagian dengan tema yang dimilikinya.
Mengetahui History
History
Sebuah web browser akan mengingat halaman-halaman yang sudah dikunjungi oleh seorang pengunjung, sehingga apabila tombol back pada browser ditekan maka halaman akan menuju halaman yang sebelumnya dikunjungi. Sedangkan untuk sebuah website, pengunjung menginginkan tombol back untuk kembali berdasarkan struktur dari website
Cookies
Cookies akan menyimpan halaman yang telah dikunjungi ke dalam sistem, sehingga sistem dapat mengetahui apakah halaman tersebut sudah pernah dikunjungi
Contoh website nu aya link nu beda warna lamun pernah dikunjungi
Landmarks
Landmark biasa digunakan oleh user sebagai tempat awal ketika akan menjelajahi sebuah website, biasanya yang menjadi landmark adalah halaman yang pertama dibuka oleh user maupun halaman utama.
Contoh :
https://www.tokopedia.com/
Penempatan Navigasi
1. Top Navigation
Pada umumnya banyak situs mengadopsi navigasi yang disimpan di atas (top navigation). Navigasi ini membuat website akan memunculkan navigasi duluan sebelum menggeser kebawah ke dalam area content. Biasanya seorang pengunjung apabila sudah mencapai akhir halaman ia akan pergi ke halaman yang lain sehingga pengunjung harus melakukan scroll ke bagian atas untuk mencapai navigasi, hal ini bisa diatasi dengan beberapa cara.
a. Fix Navigational elements in top
Pada umumnya, merupakan navigasi yang menempel pada bagian atas halaman . Sehingga, ketika di scroll navigasi tersebut akan mengikuti halaman.
b. Back to top link
Navigasi yang memungkinkan user untuk kembali ke header secara cepat (melompat). Biasanya navigasi ini digunakan di web yang kontennya banyak, Sehingga tidak perlu scroll manual ke atas untuk meraih navigation bar.
c. Provide text links at bottom
Sebuah teks link yang mirip seperti top link umumnya ditambahkan dibagian bawah halaman, biasanya dibatasi oleh brackets ([]) atau symbols (|).
d. Prominence of navigational elements
Aspek lainnya adalah tonjolkan navigation bar dari situs tersebut agar dapat menarik perhatian user.
2. Bottom Navigation
Biasanya Bottom Navigation bukan merupakan navigasi utama situs tersebut. Pada bottom navigation, navigasi disimpan pada akhir sebuah halaman, hal ini terkadang menjadi masalah bagi pengguna, karena navigasi tidak akan langsung terlihat oleh pengguna ketika website pertama dibuka sehingga pengguna harus mencapai akhir halaman, hal ini bisa di atasi dengan posisi yang fixed seperti pada top navigation.
3. Left Navigation
Navigasi yang sering digunakan dan biasanya sebelah kiri layar digunakan oleh banyak program, ukuran dari navigasi tidak boleh hingga menutupi bagian konten dari website. Navigasi bar disebelah kiri terkadang disebut "navigation fence".
a. Let user scroll
Adalah icon navigasi yang muncul untuk menampung navigasi ketika halaman situs diperbesar (zoom in) / mobile, contohnya adalah gambar situs Kaskus yang sudah diperbesar seperti di bawah ini.
b. Open New Window for wide content
Banyak situs yang memberi pilihan untuk membuka jendela baru tanpa menggunakan left navigation ketika pengguna ingin melihat konten secara luas seperti tabel yang tidak bisa diatur ulang dan membutuhkan layar penuh dalam resolusi yang rendah.
c. Hide left Navigation
Beberapa situs sudah memakai JavaScript untuk menyembunyikan left navigation dan akan dimunculkan jika dibutuhkan.
4. Right Navigation
Baru-baru ini penempatan navigasi disebelah kanan sangat populer beberapa berpendapat bahwa penempatan navigasi kanan terdapat diluar konten dan membolehkan penggguna mendalami konten yang dibaca.
5. Center Navigation
Center navigation menempatkan navigasi pada bagian tengah dari sebuah website, hal ini tentu mengganggu konten dari website. Namun navigasi yang berada di tengah berguna untuk sebuah home page maupun landmark page karena memudahkan user untuk mengakses navigasi.
6. Navigation Consistency
Penempatan navigasi diusahakan harus konsisten pada setiap halaman, usahakan navigasi pada setiap halaman berada pada posisis yang sama. Suatu Navigasi dikatakan konsisten ketika urutan navigasi tersebut tetap, baik dilihat dari halaman beranda maupun dari halaman lain. Facebook memiliki template navigasi yang sama di setiap halamannya.
7. Navigation Hierarchy
Secara umum navigasi yang digunakan oleh kebanyakan desainer yaitu navigasi TLB atau top-left-bottom. Navigasi tipe ini menempatkan navigasi utama pada bagian header website, lalu navigasi tambahan pada sisi kiri website, dan pada bagian bawah terdapat navigasi utama dalam bentuk teks link.
Contoh pdf hal 210
Navigation and Scrolling
Seorang desainer web harus memperhatikan apakah halaman tersebut membutuhkan scrolling atau tidak, contohnya apabila ketika mendesain halaman yang digunakan untuk mengunjungi halaman yang lainnya maka scrolling tidak diperlukan, berbeda dengan halaman yang menampilkan konten yang banyak sehingga dibutuhkan scrolling.
Contoh web nu kudu di scroll jeung nu henteu
Navigation and Mouse Travel
Seorang desainer web juga perlu memperhatikan jarak pergerakan mouse untuk mencapai navigasi, hal ini biasanya dilihat dari jarak antar navigasi, ukuran navigasi, jarak navigasi dengan tombol back. Semakin mudah sebuah navigasi diklik maka akan semakin memudahkan user ketika mengunjungi website. Usahakan jarak antar navigasi dan juga ukuran tombol tidak terlalu jauh dan terlalu kecil.
Frame
Frame digunakan untuk membagi tampilan website menjadi dua atau lebih bagian, hal ini sangat baik digunakan untuk melakukan proses perbandingan karena akan memudahkan user untuk membandingkan tanpa harus mengganti tab atau window.
Contoh :
Http://www.uchicago.edu
Subwindow
Contoh dari penggunaan subwindow yaitu pop ups. Pop ups yaitu window baru yang muncul ketika halaman di load maupun ketika ada link atau tombol yang ditekan, pop ups dapat digunakan dengan baik apabila bertujuan untuk menampilkan informasi singkat sehingga tidak perlu repot untuk membuka halaman baru. User terkadang merasa terganggu dengan pop ups yang berisi hal-hal yang kurang penting, oleh karena itu penggunaan pop ups harus dilakukan dengan hati-hati agar tidak mengganggu user.
Contoh :
Navigation Remotes
Navigation remotes digunakan untuk memanggil konten kedalam main window. Navigation remotes merupakan subwindow yang tidak ditampilkan atau disembunyikan pada browser, ketika konten tersebut dipanggil tidak perlu adanya halaman baru untuk menampilkan konten tersebut.
Bookmarking
Bookmark digunakan oleh user apabila user tersebut ingin mengunjungi kembali website atau halaman yang telah ia buka. Untuk lebih memudahkan user membedakan antar bookmark yang satu dengan yang lain, seorang developer web bisa membuat icon khusus untuk digunakan sebagai icon bookmark website tersebut, icon tersebut harus berukuran 16x16 px.
Komentar