• Tiny but irritating UX issue
    15 replies, posted
Click the little dropdown arrow on this post, the one that says Report, Code View, etc. Now flick your mouse straight towards the text to try to click on it. It closes, because the invisible element that detects hovering and keeps the dropdown menu open only covers the button and the menu itself, like so. https://files.facepunch.com/forum/upload/157/afc49249-df93-47d0-8680-9882b76b893e/nuCTUT7.png That means that you have to move your mouse in an L shape to access the menu. That's mildly annoying. Proposal: extend the hover-detecting area that keeps the menu open, like so: https://files.facepunch.com/forum/upload/157/6d552aac-dbf6-4c67-a36c-784be34e3063/jfdljsf.png this would enable straight flicks from the dropdown button to the Edit Post button thank you for your consideration
Or just make it click to open like every other dropdown menu
It was click to open, was it?
It is click to open, but it closes when you move the mouse away from the box. OP mentioned exactly this so I don't know why both of you are even discussing it.
On my end the menu is currently hover to open, which kind of makes the problem worse. IMO a simpler solution would be simply click to open, click to close, no fiddling around with hover triggers.
Not as easy to implement as you might think. Html elements are primarily box-shaped. You miht potentially be able to make something like that using a wide element to the left of the button with a very high border radius set on it but it'd probably work out weirdly. https://i.imgur.com/2OZkrvF.png I managed this fairly hacky solution but as you can see, it's far from perfect. It's using this css code for anyone who's interested though: .postmodtools .dropdown::before {     content: " ";     width: 120px;     border: 1px solid black; /*This just adds the visible outline to the area*/     display: inline-block;     height: 100% !important;     margin: 0;     padding: 0;     border-top-left-radius: 100%;     padding-top: 23px; } A fair amount of that coed is probably entirely unnecessary too. I think just width, display, border-top-left-radius, and padding-top are necessary.
A delay on it closing after you stop hovering, long enough to encapsulate flicks between the carrot and the options would also work.
Or just make this standard because dropdowns suck. http://horobox.co.uk/u/reag/2018-07-18_03-23-58.webm
You know you don't have to actually click the text? You can click the blank space on the right side.
Of course, but the eye and hand are naturally drawn to the text.
Guess I got brain problems then , my instinct is to keep moving the mouse straight down.
interesting, good to know
How about KISS and just make it shaped like this? https://files.facepunch.com/forum/upload/767/019eb6d7-a08f-41ec-b0a3-43f2b361c8de/image.png
Still has the same basic issue as the one I posted where it flat out opens the menu when you hover over that area instead of simply keeping it open which definitely feels significantly worse.
But you don't have to move in an 'L' shape, you can easily click the open zone, which is what I do https://files.facepunch.com/forum/upload/716/7f6c1c8d-9ed2-4f85-bc7b-fa1384beebec/image.png
That's already been suggested, but my brain just doesn't want to accept clicking anywhere not on the text itself.
Sorry, you need to Log In to post a reply to this thread.