0

I'm creating a portfolio for my websites. I'm going to have tiles that show my work. When you hover over a tile, it will show a title, description, and a preview button. What's the best layout to show the 3 things?

This is what I have so far.

enter image description here

                    ^                                                ^
                On hover                                          Regular

I don't think it looks so nice. I want a modern, clean, and user friendly way of showing them.

closed as off-topic by Devin, Mayo, Graham Herrli, JonW Oct 17 '16 at 21:36

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • What kind of interaction would make this information visible (or accessible) to people who cannot use a pointing device? – user800 Oct 16 '16 at 19:22
  • @ChristopheStrobbe I wasn't thinking to make it visible to them. If they click on the tile, they will be directed to the new page. If you have a suggestion of another way to do it, let me know. – Steve Oct 16 '16 at 20:42
1

I try to avoid hover on gallery/grid/tiles presentations for a number of reasons:

  1. It's not user friendly or represents reality:

Let's say you are choosing in between tea flavors at a coffee shop, do the Tea Boxes reveal their flavor and other information when you wave your finger or point at them, why the secrecy ? what does hover achieve ?

  1. It's an extra step: Both for the developer and designer.
  2. It's not mobile friendly and has accessibility issues.
  3. It presents a conflict to the user in between text and graphics, and a challenge to weight them properly to the designer.

Not to say hover doesn't have correct uses, but I think it is more of a secondary indicator.

For your specific case I would recommend something along the lines of the Card component (Material Design in this example) with no Hover:

No Hover

  • Thanks for the detailed answer! The point of the 'secrecy', is the info isn't that important. No one cares about it. The only time someone will care, is when they want to click it, and they see if you hover over it, it will show more info. That's what Instagram does (on their website, idk their app). – Steve Oct 16 '16 at 21:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.