I have Four divs on my homepage. Every div is showing a number and a indicator. But I have further details for each of the div which will be shown upon user click. Now I want to know what is the best approach to show the user that this div have further details. I have different options in mind like on top right corner adding a simple right arrow (shown in picture) or to add some other icon (like burger icon or grid icon) , a simple '>>' sign , or adding text 'more details' with link. But I also dont want to add much text in the div. So what will be the good approach for this according to the user experience perspective. I'll be looking for your valuable suggesstion.
-
I would try adding shadows to the div to look it more like a button. A button by instinct is click-able. Give it a try.– Mukul GoelJul 14, 2015 at 10:33
-
I would advise against that. The graph itself could have an interaction with-in, making it a clickable button and having to change the design to do it not a good approach.– RayraegahJul 14, 2015 at 10:56
-
@Rayraegah Sorry I couldn't understand your comment perperly. Are you talking about graph on the top of the divs ? Im asking for the four divs under the graph.– Omar BahirJul 14, 2015 at 11:01
-
Yes, the Gauge graphs or visuals. If they're images then Mukul's method would work.– RayraegahJul 14, 2015 at 11:09
-
@Omar where do you plan to show more? in another page or in the same?– Alejandro VeltriJul 14, 2015 at 13:37
1 Answer
The four Divs on your homepage could be treated as Cards. By popular convention, you can create an action panel underneath your card and include buttons or links for actions such as "more details" or "share".
download bmml source – Wireframes created with Balsamiq Mockups