Web Blog Navigation Menu

November 14, 2009 – 02:11 by Dani Iswara. Words count: 405.
Last updated: Saturday, November 14, 2009 at 2:13.

Which type of navigation menu is better for your web blog? Drop-down menu? Left, right, or horizontal position? Some users think there are no big deal on this. Not a neccessary point.

Web sites may have more complicated navigation menu. More simple on web blogs.

Previously, with 2 columns layout, I have those three options for the position. Using 1 column right now, horizontal menu is the only choice, I think. Of course, with some limitations and concerns.

I have no plan to expand the navigation menu. Since I decided to have no special layout for small screen, the menu will look ugly. It brokes into two-three lines. But still readable and usable, I hope. It does not matter for zooming feature, at least for twice ctrl++. Accessibility reason.

Post titled Web Site Navigation Menu Placement by Mike Cherim try to explain advantages and disadvantages, pros and cons of menu position.

Look at his summary:

…you cannot please all the people all the time…

  • Avoid unusual placements.
  • Offer a skip link as needed.
  • Use a proper list (not a table).
  • Style and place it with Cascading Style Sheet (CSS).
  • Make it clear and obvious.

For common navigation menu, several factors in my mind are:

  1. Text based.
    To make navigation accessible for screen readers and differently-able/difable users.
  2. The amount of menu label.
    Related to visual style on small screen or when zooming action.
  3. Zooming or larger text.
    Ensure to check the style in small screen and larger texts.
  4. Plan of expansion menu.
    Too complicated drop-down menus may against cognitive difable users.
  5. Distinct or clearly marked.
    Easy to find and use menu. You may read again about Distinct Links on Dani Iswara .Net.
  6. Above the fold.
    Where is "About" and other important or basic menu?
  7. Width resolution.
    Are there hidden menus on smaller resolutions or smaller browser windows?
  8. Skip links will help.
    No matter where the menu placed.
  9. Left-to-right or right-to-left reading style.
    Related to the important of content versus navigation.
  10. Content or navigation first?
    Whatever of your choice, skip links should help.
  11. Disable style.
    Use the proper list of markups eXtensible/HyperText Markup Language (X/HTML) and Cascading Style Sheet (CSS). Does the structure logic? Think previous item. Content-focused or navigation-focused?
  12. Semantic structure.
    Example: on left menu, h1 is web/blog title, h2 for navigation menu title, and h2 or h3 for post title. Thinking of Search Engine Optimization (SEO)? Right menu should be more semantic in structure.
  13. Right menu with right scrollbar is more usable.
    Especially for right-handed users.

See the other reasons for my one column design, in bahasa Indonesia (Dani Iswara .Net).

You may rethinking the preferable choice.

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: Web Accessibility, Web Usability
Tags: , , , , ,
21 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Web Blog Navigation Menu by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

21 Responses to post titled: Web Blog Navigation Menu

  1. Comment by Cahya on November 14, 2009 at 18:54:00
    using Mozilla Firefox 3.5.5 on Windows Vista

    Mermaidman menggunakan invisible botmobile di Bikini Bottom, mungkin saya akan menggunakan invisible navigation menu :D

  2. Comment by Isnuansa on November 15, 2009 at 03:19:31
    using Opera Mini 9.80

    Apa penggunaan side bar di kiri termasuk unusual placement Mas?
    Terus, demi mengejar judul single post berada pada H1, saya yg katrok ini ga bisa ngedit cssnya jd ukuran font terlalu besar. Udah tak cari baca 100x ga ketemu jg ngedit ukuran H1 di cssnya.

  3. Comment by Dani Iswara on November 15, 2009 at 04:29:08
    using Opera 10.01 on GNU/Linux

    Cahya,
    kalau diambil seriusnya, aplikasi berbasis Web termasuk menu navigasi, bisa saja akan seperti panel bar di desktop (task bar, quick launch, widget bar) yang jika perlu, bisa di-hidden. :P

  4. Comment by Dani Iswara on November 15, 2009 at 04:39:56
    using Opera 10.01 on GNU/Linux

    Isnuansa,
    dari sisi visual, pengguna tangan kidal sepertinya lebih nyaman dengan menu atau navigasi kiri. Menurut pengguna screen reader–sesuai butir #10, asal tersedia skip links, tidak masalah antara content atau navigation first.

    Tentang h1 yang menurut saya masih sering didebatkan, boleh baca tulisan Mas Fandy (fanari-id) di Excessive SEO.

    Untuk ngedit CSS, bisa ngintip kode sumber situs Web orang lain, kan Mbak Nunik? :)

  5. Comment by Cahya on November 15, 2009 at 09:24:07
    using Mozilla Firefox 3.5.5 on Windows Vista

    Ha ha, maksud saya panel yang sembunyi dengan script tertentu lalu bisa muncul dengan hover.

    Tapi saya pernah menggunakan plugin wibaya, hasilnya tidak menarik…

  6. Comment by Dani Iswara on November 15, 2009 at 09:46:03
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    Cahya,
    kalo pake layar sentuh di ponsel cerdas, gemana cara hover-nya? :)

  7. Comment by Cahya on November 15, 2009 at 11:15:03
    using Mozilla Firefox 3.5.5 on Windows Vista

    Hi hi, kalau itu pakai mode CSS untuk peramban bergerak (mobile browser?? :( )

    Rencananya besok mau ikut acara ini: Opera software datang lagi ke FMIPA (Himakom UGM).

    Gimana menurut Bli?

  8. Comment by Dani Iswara on November 15, 2009 at 13:25:34
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    Cahya,
    bagus, itu memang acara rutin Opera. :)

  9. Comment by Uchan on November 16, 2009 at 10:33:57
    using Mozilla Firefox 3.0.15 on Ubuntu Linux 9.04

    Wah, saya ngikut width 800×600 gara2 rajin numpang ol di PC bapak2 sebelah meja saya (matanya sudah aga2 gimana, senang preview gede2).

    Btw emang kalo width-nya kecil sekali, model2 mas dani, sepertinya memang lebih pas pake single column. Dan navigasi sepertinya memang ga ada pilihan selain horizontal menu di atas yah :D

  10. Comment by Dani Iswara on November 16, 2009 at 22:55:33
    using Mozilla Firefox 3.0.13 on Ubuntu Linux 9.04

    Uchan,
    mau ditaruh di footer, ngga tega aja. Ntar dianggap terlalu kreatif. :)

  11. Comment by choen on November 17, 2009 at 08:18:25
    using Mozilla Firefox 3.5.5 on Windows XP

    heheh… iya. free template gw ada yang menunya gw simpen di footer, niatnya sih cuman pengen beda aja, mumpung cuman eksperimen.

    theme nya Green Beast keren yah. pas gw pake fasilitas translate di toolbar, tampilan templatenya berubah, jadi kayak tampilan untuk HP.

    oh iya Dani gw coba pake ‘mobify’ itu bisa jadi pengganti media handheld ngak yah.

    sip thanks.

  12. Comment by Dani Iswara on November 20, 2009 at 09:46:08
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    choen,
    kalo ada jump to menunya, kayaknya seru juga. :)

    tombol skip links-nya juga dioptimasi untuk mengatasi masalah haslayout di Internet Explorer versi lama dan beberapa peramban mobile.

    mobify kayaknya bisa banget. :)

  13. Comment by pushandaka on December 3, 2009 at 11:25:32
    using Mozilla Firefox 3.5.5 on Windows Vista

    Wah, kalau 2 orang dengan hobi yang sama bertemu, pasti klop! Btw, kalian berdua sama-sama di Jogja kan? Sering bertemu?

    *maaf OOT. :P

  14. Comment by pushandaka on December 3, 2009 at 11:29:41
    using Mozilla Firefox 3.5.5 on Windows Vista

    Sebenarnya tipe navigation menu yang bli maksud di sini, lebih ke mata (tampilan blog) atau ke masalah teknis?

    Maksud saya, apakah setiap tipenya memiliki kelebihan dan kekurangan secara teknis?

  15. Comment by Dani Iswara on December 3, 2009 at 12:29:16
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    pushandaka,
    [OOT] Saya baru kenal Cahya online belakangan ini. Belum pernah kopdar langsung. Tapi sepertinya saya pernah ketemu ibu kosnya Cahya di RS Panti Rapih waktu nganter temen yang sakit. :)
    Karena jarang kopdar, saya pilih jadi narablog underground aja..sepertinya seru juga. :D
    Ini saya baru balik dari Bali.

  16. Comment by Dani Iswara on December 3, 2009 at 12:34:04
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    pushandaka,
    Saya hanya melihat dari sisi kemudahan pakai dan aksesibilitasnya. Jadi nyaman bagi yang masih memiliki mata normal dan juga bagi yang tidak mampu melihat lagi (membaca Web dengan screen reader). Ada unsur teknisnya juga, Bli Gung.

  17. Comment by Deddy on December 4, 2009 at 05:15:23
    using Google Chrome 3.0.195.33 on Windows XP

    yang paling standar sepertinya yang horizontal di header ya. mungkin untuk tambahan bisa juga dipasang di footer, terutama untuk blog yang musti scroll panjang2 ke bawah.

  18. Comment by Dani Iswara on December 4, 2009 at 14:51:07
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    Deddy,
    mungkin ada juga yang lebih suka navigasi position:fixed. Jika navigasi dobel dianggap repetisi dan kurang nyaman dari sisi estetis, mungkin cukup dengan jump menu–kembali ke bagian atas/menu navigasi/header. :)

  19. Comment by Pradna on December 9, 2009 at 16:39:25
    using Swiftfox on GNU/Linux

    saya milih setir-kanan saja :D

  20. Comment by Dani Iswara on December 9, 2009 at 17:43:45
    using IceWeasel 3.5.5 on Debian GNU/Linux

    Pradna,
    itu kan biasa. ada stir atas, kanan, kiri, bawah juga lho. sekalian dipake semua juga bole. :P

Trackbacks/Pingbacks

  1. Pingback by PanDe Baik » Blog Archive » Selamat Bergabung BLoGGer Muda BBC on November 24, 2009 at 06:50:16
    using WordPress 2.8.6

    [...] barangkali masih terkendala dengan kesibukan masing-masing seperti Ancak, Dokter Cock, Brokencode, Dani Iswara, GungDe atau Bung Gentry Amalo. Beruntung hingga acara berakhir saya masih sempat bersua dengan Adi [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Aksesibilitas Web oleh Penulis Konten
‹‹ Newer entries: Self-linking Post Title