1

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.

| improve this question | |
  • What kind of interaction would make this information visible (or accessible) to people who cannot use a pointing device? – Tsundoku 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
2

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

| improve this answer | |
  • 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.