: Professional design of an extremely slim vertical menu Ok, so I am a programmer and a complete disaster at web design. Untill now I have been able to produce "acceptable" looks with the help
Ok, so I am a programmer and a complete disaster at web design. Untill now I have been able to produce "acceptable" looks with the help of frameworks like bootstrap, but I am stuck with a little side menu. The best thing I was able to come up with is the following:
It is a little side menu on a page where you have an in-browser RDP-client, so the main requirement is that it is VERY slim and preferably floating on the left side of the screen (changing it to horizontal and sticking it to the top of the screen is not an option). It should also be visible AT ALL times, so no appearing when hovering in the right area with your mouse. It contains three clickable buttons (MENU, KEYS, CLOSE). And as a side note: the button keys is kind of solution-specific and is a clear description in the context of the user.
My question is: how can I make this menu meet the criteria above so slim -> ~20px wide always visible and still make it look professional and not distracting? I would really appreciate any form of advice and tips!
More posts by @RJPawlick971
4 Comments
Sorted by latest first Latest Oldest Best
Since you are using bootstrap it should be easy to use a glyphicon to show that it is a menu, instead of words.
<div><span class="glyphicon glyphicon-menu-hamburger"></span></div>
First, you should consider the fact that 20px is way to slim. it would just seem like some blip in the page, not at all something inviting users to click on. I suggest 50px. It is a standard size which users will expect to see, and will be comfortable with.
If it is realy impossible to use a thicker menu, consider using a 50px/50px box on the top left of the screen.
If you must use words, instead of an icon, you most definitely should not put the letters one under the other. Try turning the title sideways (and use a thinner font).
You might consider using a menu that slides out partially when a user has their mouse near the menu to save visual space.
The default state:
When the mouse is near (using animation to transition):
If allowed, you may even be able to open it further when one of the sections is clicked.
This is just my fill-in on one of your questions in the comments regarding the close button.
When using a burger menu, you usually don't see the close button all the time, what happens is, you click the menu icon (burger menu), the full menu opens and in one way or another, the burger icon changes into the close icon.
When hitting the close button, the menu closes and it changes back to the burger menu icon.
It looks better and you are not left with a close button that does nothing when the menu isn't open.
One more thing
I would like to mention that 20px wide is small..like, this small: and for me, it's a little too small for a good user experience. Slim is one thing but unnoticeable on the other hand...you don't want that.
Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked.
This is just a quick sketch, but you can get icons like this from Bootstraps library.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.