Hi devs,
it's my first post and I'm quite excited for the response :-).
So I've implemented a little icons as shown which (when hovered)
shows some information regarding express delivery such as the date of arrival. But at the moment I'm wondering how I can give the indication that there is actually some information visible when hovered.
It might seem as a "normal" icon.
I hope I've expressed my question somewhat understandable.
Best wishes Niklas
(Expresslieferung means express-delivery in German :D)
Top comments (6)
Hey there fellow german :)
Not the answer you are probably expecting but try and look at the situation from a completely different point of view:
I'd heavily suggest to not hide crucial information behind hover effects. Make it transparent as possible without user input. Imagine selecting the express option with your keyboard and your hovered information won't ever show up because you technically didn't hover it.
Also mobile devices don't really have a hover state so you'd need an alternative solution here anyways.
You could of course animate/color the icon on hover to make it look neat but that's just eye-candy.
Thank you very much for the response :).
I do agree with your proposal and to be fair I was somewhat expecting that.
The reason we chose to have a popup is to not distract the user from the "add to cart" button as we have implemented a way to chose the express delivery already on the detail page (it makes sense for our product). So when removing the hovering effect (I really like your approach) we'd have another call to action button (We have a "rather" strict color strategy for buttons) which would catch quite a bit of attention, don't you think? :-/
Can you add another screenshot showing a little bit more of the page? It's really tough to say with just seeing an icon. If you can't because its work in progress that's fine too.
So is that icon actually a button? Right now it just seems like an informative icon without any action attached to it.
The moment I've tiped the text I realised it's rather difficult to explain without pictures :D, so here are the three "steps".
Customer opens the detail page without a configuration chosen (there's always a selection necessary and there the express delivery shouldn't distract from the selection)
dev-to-uploads.s3.amazonaws.com/i/...
The customer chooses its configuration and enables the add to cart button.
dev-to-uploads.s3.amazonaws.com/i/...
and finally if the customer chooses to hover over the express delivery icon the customer gets information about the delivery and could choose this as his way of delivery.
dev-to-uploads.s3.amazonaws.com/i/...
An idea just came to my mind would be that the button to choose the express delivery would be constantly below the car and the moment the customer has added an item to its basket the button for express delivery isnt disabled anymore
There are probably a dozen ways to tackle this.
One important detail though: Can the user add the express-delivery after the item was added to the cart? If not, consider placing the express option above the cart because it is counter-intuitive to read from the top, then go below the main action button and go up again.
I just assumed you can add it later on:
This could be the default state as a secondary button with the slightest bit of background-color, if any at all. It can work with just #fff fill as well. Just try a few variations
dev-to-uploads.s3.amazonaws.com/i/...
When the user then actively hovers over the button it could change to your primary color, indicating an action.
dev-to-uploads.s3.amazonaws.com/i/...
At last, this would be the easy way out to still have a tooltip/popup that works on mobile as well as on desktop. The tooltip gets displayed when clicking the info icon.
dev-to-uploads.s3.amazonaws.com/i/...
This is obviously just a concept and I don't know your overall placements but feel free to take this as a little inspiration and give it your own note.
Sorry for the late reply.
I really like your idea.
Thank you very much.
Best wishes Niklas