7

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:

The horrific menu

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!

Improve this question
3
  • What exactly do the three options do? I presume Menu would show a, well, menu with further RD options; would Keys bring up a virtual keyboard? Give you a list of shortcut keys you can use in the RDP client? Something else? And does Close (as I am assuming) close the current RDP connection/session, essentially logging you out? And if my guesses are correct, is there a particular reason you’ve given Keys and Close such a prominent (non-embedded) position, rather than just having one menu with all the options? How many options are in the Menu foldout?
    – Janus Bahs Jacquet
    Commented Feb 3, 2016 at 20:08
  • @Janus Bahs Jacquet, the thing is that most users are not that familiar with even things like the hamburger-menu icon... I am sure that when these three things are not always visable I will get complaints and questions... But I am thinking about switching to just a close icon and a hamburger-icon that will open up the menu and move the extra keys button there.
    – larzz11
    Commented Feb 4, 2016 at 7:48
  • @larzz11 Depends on your user base, of course, but the hamburger icon is so ubiquitous these days that I'd venture nearly all users are very familiar with it.
    – Janus Bahs Jacquet
    Commented Feb 4, 2016 at 13:46

4 Answers 4

Reset to default
7

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.

Improve this answer
5
  • Mmm that is a good idea. Now that I think of it, it is a bit overkill/redundant to make a menu where one of the buttons will open another menu.... It's the close button that I would like to be visible at all times, but I guess it could be moved to the other menu and then have just a small button that opens the bigger menu....
    – larzz11
    Commented Feb 3, 2016 at 11:05
  • You could just but an X in a box up to the top left hand corner, then have the menu down enough so that it's not clicked by accident. Sometimes design is simply removing everything until it is at it's base elements, then just adding a little polish. I think we are all guilty of over thinking things :) glad it helps.
    – Consume Coffee
    Commented Feb 3, 2016 at 11:08
  • "Sometimes design is simply removing everything until it is at it's base elements, then just adding a little polish." I think I should frame that one:)
    – larzz11
    Commented Feb 3, 2016 at 11:15
  • @larzz11: it's (possibly) adapted from St Exupery's famous quote : "Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"
    – Olivier Dulac
    Commented Feb 3, 2016 at 17:15
  • @OlivierDulac I thought I was paraphrasing someone :) it's the one thing that really stuck from university.
    – Consume Coffee
    Commented Feb 3, 2016 at 17:19
1

enter image description here

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: enter image description here 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.

Improve this answer
3
  • 2
    I find things sliding around when my mouse is near them to be tremendously annoying
    – user58662
    Commented Feb 3, 2016 at 15:35
  • @GOROIE Well, then it's a good thing I mentioned the close icon only appears after the menu is clicked not hovered, right? It would be silly to think that the close button appears when the menu icon is hovered...again, what would it close if it did?!
    – Alin
    Commented Feb 3, 2016 at 16:46
  • I believe you’re misunderstanding the purpose of the ‘close’ button. Unless I’m misreading the question, it’s not a “close this expanded menu” button; rather, the menu has various options of things you can do with the Remote Desktop client that is the main page, and the close button here is a “close the current Remote Desktop connection/session” button.
    – Janus Bahs Jacquet
    Commented Feb 3, 2016 at 20:05
1

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:

enter image description here

When the mouse is near (using animation to transition):

enter image description here

If allowed, you may even be able to open it further when one of the sections is clicked.

Improve this answer
4
  • Personally, I find this to be trouble-some. You'd have to make sure nothing appears under/near the "menu arrow". Otherwise, you could be trying to highlight some text, accidentally open the menu. Sounds bothersome. If a menu is to be opened, let me decide when to open it, as I get pretty annoyed when my computer thinks it knows what I want (when it doesn't). This is just my opinion, though.
    – Dioxin
    Commented Feb 3, 2016 at 18:21
  • @VinceEmigh it's not really troublesome to make sure nothing is underneath the menu.. The page should always have a margin anyway so making sure the margin is at least the size of the menu isn't really a problem.
    – Cai
    Commented Feb 3, 2016 at 20:17
  • @CAI I didn't mean directly under the menu. Not everyone is percise in their mouse movements, and overshooting it could result in you accidentally opening the menu, which may then obscure the data you actually wanted. Sites do have margins, but mouses can mess up and people can overshoot when moving their mouse. The site's margins could be made large enough to account for an open menu, but that restricts your menu's width (don't want margins being TOO large)
    – Dioxin
    Commented Feb 3, 2016 at 20:31
  • 2
    I agree with your point in general but the question does state the menu has to be ~20px wide so I don't see a problem in this case.
    – Cai
    Commented Feb 3, 2016 at 20:42
0

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.

enter image description here

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).

Improve this answer

Your Answer

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

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