I have 3-4 divs on my home page with some information (i.e. A Big Number, indicators). As I cant put all the information in the same page but I think it will create cognitive load for the user so I want when user click a div , a new page should open having relevant information. But I don't want to give my div a button's look & feel (maybe adding gradients etc). I want to keep its design simple and flat but still I want user should know right away that it is clickable. For this I have different things in mind. I have option to use hand cursor on mouse hover but I really DON'T want to use it. I can add a shadow on mouse hover on div but I think its old design now. The third option I have is to change div background color slightly on mouse over. Kindly tell me which thing will be more obvious for user to think that div is clickable or Tell me if you have more better choice to do it. I'll be very thankful.
-
Is there a reason why you don't want to use Hand cursor on hover?– Gautham RajaJul 10, 2015 at 20:11
3 Answers
Relying solely on mouseover isn't enough. You'll need to find a way to communicate to users that the div is clickable so they will point the mouse at it. The mouseover change will be helpful as a confirmation at that point.
Look at how other sites accomplish this. A textual call to action will make your div look clickable. Or making it look like a link ("More Information >")
I don't think shadow on a button is old design if used elegantly and sparingly. You can see here in Googles Material Design they use "raised" buttons with shadow to show depth.
https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons
You mention "I think it will create cognitive load for the user" and then say you want buttons not to look like buttons.... I think you'll need to:
a) specify a little: is this ONLY for desktops? are you ABSOLUTELY sure nobody will use a touch device to visit your site/app? And if not: how do you plan to do what you want on touch devices?
b) use elements for what they are: see, this is a classic discussion:
do I make it look cool, or do I make it usable?
If you achieve both, you won, but many people, specially coming from design backgrounds think that visuals are more important than usability usability. Now, in your case, this is extremely easy, since you want buttons, you want them to act as buttons... then... use buttons!.
There are thousands of pages, articles, studies and researches about this element, how to make it look better, how to make them convert, how to improve CTR and many many more resources. It's in you and your needs how to use all this information, but in the end... a button is a button is a button.
from Usability.gov
A button indicates an action upon touch and is typically labeled using text, an icon, or both.
