3

I am not sure if many people have experienced this before, but on desktop applications where the context menu (i.e. pop-up menu triggered by a right-click mouse selection) is used for items that is in focus, there are occasions when the UI is not optimal and the result is that sections of the menu is chopped off (see below).

enter image description here

I believe this happens when:

  • There are too many items on the contextual menu AND/OR
  • The contextual menu is triggered somewhere that is too close to the top or bottom of the screen

As you can see, even companies like Google are not immune to UI design issues like this, but I wonder if there is a more effective design strategy that will avoid poor user experiences like this.

Improve this question
3
  • I think it depends on the operating system. In OSX the context menu appears to the left, right, up or down depending on where the main item is located.
    – Danielillo
    Commented Aug 26, 2020 at 9:15
  • 3
    This doesn't happen on desktop applications using the OS provided context menus on both Windows and Mac - they will show the menu so that the whole fits on the screen (Windows also takes into account multiple screens and won't split a popup across two screens). Where this does happen (often) is web apps and (occaisionally) desktop apps where the menu is built from scratch with none of the normal features, and this happens to be one of the features that is oft-forgotten / de-scoped. It's the same with many recreations of OS level components - the things that make them useful get missed.
    – dosxuk
    Commented Aug 28, 2020 at 13:05
  • 1
    dosxuk, as a quick extension to your comment, native widgets can use the full screen, and can typically analyze where on the screen they appear. That allows developers to optimze their behavior in the way you describe. In contrast, web apps cannot extend beyond the browser's viewport, and it's not as simple to identify where, say, a menu would appear in that viewport. That said, some widgets are much more "intelligent" about this than others. And, man, I love that last bit in your comment about "things that make them useful." So very true.
    – JochenW
    Commented Aug 29, 2020 at 1:37

2 Answers 2

Reset to default
2

There actually is a really, really simple solution to this: adjust the location of the menu to ensure that it doesn't extend beyond the viewport.

Here are three screenshots from macOS, showing a Finder window on the Desktop, which contains a single folder. I right-clicked on the folder icon to bring up the context menu. Note how macOS adjusts the menu's position to ensure it stays within the viewport while still being close enough to the object — the folder — that it is anchored to.

Top-left corner of the screen

enter image description here

Bottom-left corner of the screen

enter image description here

Top-right corner of the screen

enter image description here

If the menu becomes taller than the screen, then the menu automatically starts scrolling. Note the triangle "arrows" at the top or bottom to indicate that more of the menu is available in the respective direction.

A scrolling menu makes it a bit more difficult to precisely "hit" an item in the menu, but IMHO it still feels like a logical extrapolation of a menu's overall behavior.

These two screenshots span the full height of my Mac's 13" screen:

enter image description here

enter image description here

Improve this answer
2
  • +1 I'd like to know what happens if there are more menu items than there is screen height to display them all - does some of the menu items simply collapse into submenu items?
    – Michael Lai ♦
    Commented Aug 28, 2020 at 22:13
  • Michael, I've added the answer to your question to my original response.
    – JochenW
    Commented Aug 29, 2020 at 1:33
1

Interesting approach is what Azure is taking, so based on that you should identify if user does a right click, and if so, the screen can be shifted left, on the right a full height side a panel might appear (with menu), which might then be closed. But pop-up can also be applied, which is normal on mobiles - but the basic web usually uses these context menus. If you purchase a good UX component, it's context menu might provide an extra feature and position properly if there's not enough space (but sometime the "enough" is hard to calculate:)

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.