2

I am planning to have a vertical Icon Menu in my website containing about 12 icons. I am planning to have the icon either like

http://codepen.io/nikhil/pen/sicrK

or

http://codepen.io/EduardL/pen/aBGAy

The problem is since I am making my design responsive for handhelds too, how do you feel I can accomodate all those 12 icons (resizable svg) for handhelds. I think it would not be good to make the user scroll to see the other nav icons. If you see the link given, many icons are hidden from the viewport and you see it only on resizing the preview frame.

Or is there any better idea than having a vertical icon menu.

I am using this menu as one of the templates throughout my website. Please give me an idea.

Thanks in advance.

Improve this question
1

2 Answers 2

Reset to default
1

Simply make the bar 100% height.

If you have 12 icons you can just-about-get-away-with-though-I-shouldn't-recommend-it making them expand to fill the available screen space. 1/12th of a 4 inch screen (75% of current users have 4+ inch, and that includes somewhat older phones) gives you 7.33²mm squares.

enter image description here

Windows Phone recommends to use 7²mm squares but with 2mm whitespace to prevent accidental taps on neighboring buttons, so a total of 11²mm per button. However, their data shows that at smaller sizes, the amount of missed touches might still be acceptable. (via this post)

enter image description here

The obvious downside here is that you've got a higher chance at people mis-tapping,

The upside is that your site will feel pretty much the same on any device, and that all icons can be viewed at once.

Make the menu double-wide

Alternatively, make your menu two columns wide. Put the top-used 5 icons on the left, always visible, with a hamburger (plus "more" label) at the bottom. When tapping the hamburger, expand the menu in to an (almost-?) fullscreen table of 2x6 buttons with labels. enter image description here

The downside here is that you lose a quarter of your screenspace (though you could narrow it down a bit) which is a LOT. And you're still hiding some functionality behind a second menu.

Consider an alternative layout

If you're going to work on mobile, you really don't have much width to play with. It's also not something you easily scroll away from. How about a bar at the top? If it's absolutely positioned, users will see the menu when they load a page, but as they scroll down it'll disappear and they have 100% of the screen to view content on.

Or use a slightly more elegant solution like this.

Of course this wouldn't be using a 12-wide bar, but something like a 4x3 grid. It'll take up a bit more space vertically, but you'd scroll past that pretty quickly.

enter image description here Upside here is that you're still showing everything with decently tappable buttons, while still allowing for content to fill up the screen.

Downside is that on page load there's quite a face-full of buttons, and that they're not always directly accessible.

Improve this answer
1
  • Thanks a lot. I am planning to follow double wide approach as you said for mobiles and single column for other devices with enough viewport space.
    – Vignesh T.V.
    Aug 15, 2015 at 11:36
1

The vertical icons idea is fine, but you need to take care of an indicator showing that there are more icons hidden below the fold.

Here are some possible solutions:

  • Use semi transparent gradient on the bottom of icons list
  • Position the icons so that last one is cropped in the viewport
  • When user opens the app, auto scroll the icons list from the bottom to top, so that it shows that there are other icons
Improve this answer
2
  • so, will it be ok for handhelds too? thanks for your answer.
    – Vignesh T.V.
    Aug 15, 2015 at 7:18
  • Yes, it should be ok. For small portrait devices you might consider having all these icons in a hamburger menu, so that you don't cover so much screen real estate. For tablets it should be fine. Also remember that icons without labels are difficult to use. Please don't use 12 different icons without text labels.
    – Maciej Sawicki
    Aug 15, 2015 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.