The hover area
The key to the simpler look is having a large hover area for the options. This provides a intuitive experience, experimenting with it (myself & others in the office using my UI mockup) moving over the UI the options reveal themselves in a smooth and non jarring way because the hit state/area is so big.
Above is the hover area container highlighted & depending on your layout it could be refined in a few ways. Some flex box would do wonders here to fill available space & other magic.
The interaction is intuitive because either:
- A user see’s them accidentally moving over the UI
- Or, they move toward the options (the 3 dot) & before they even get close the options appear.
Animation is important here
The animation style & it’s speed are crucial here, a quick reveal is necessary to ensure it’s not frustrating to use & you’d want the options in a usable state quickly also.
😧 Arguing with myself…
An (untested) idea
This is completely untested at the moment. I haven’t had the chance to implement this in a commercial product but will be in the next appropriate project. All of my “pro” assumptions are just that… anecdotal assumptions.
UI aren’t always this simple
My examples & mockups are pretty simple & every time I see a nice Dribbble shot or “UI feature of the week” I think that software is always got more going on than that simple example.
I use a an icon only for options & you can see how adding a text label could complicate these designs. However if the options are simple & not too abstract, meaning the regular stuff like “delete, duplicate etc” then the icon only option can work fine.
My inspiration for this idea was two fold, #1 working on a UI that was primarily a item list type design & trying to keep it a visually clean but usable & #2 buying myVolxwagen Golf.
The Volxwagen media screen options along the bottom use an icon for the different section but utilise a motion or proximity sensor to adjust the UI when your hand is near. You can see it happening in the Youtube review of the screen.
This feature got me thinking about replicating the interaction & how it was a useful way to maximise screen real estate for the small screen.
That maximisation of real estate to me fits nicely into a mobile first type design & could led me to think a little harder about the list item options.