0

My webpage consists of a series of elements (books, let's say), each with an image and title:

http://jsfiddle.net/LjFx4/2/

When you click on a book, it goes to the relevant webpage.

What I need is a way to show the more-options box for a book. In other words, what design element should the books have to make them go from the main view to the option view? (The jsfiddle shows both views.)

The size of each book on a desktop is fairly big (160px). The size on a mobile fits 2 across on an iPhone in portrait mode.

I thought of:

  • hover: but then they would all switch as the user moved his mouse across to get to a specific book. Or maybe just hover in a specific spot? But where? There are, btw, already 3 dots on the lower right. When the user hovers here, the book description pops up.

  • a + sign: But this is ugly and crowded?

  • a little tab sticking out in the bottom left. This was ugly and broke the 'pretty' look, perhaps more so because the books 'float' off the page a bit, but the tab was flat.

EDIT: The extra options are actually edit, remove, add to favorites, add to list, and maybe another one. So I would like for them to be hidden with a single show option, as opposed to them being visible all the time.

0

So the books have two navigational options.

  1. Going to a relevant webpage
  2. Showing more options

Your hover suggestion won't work on mobile. And if the "extra options" are just edit and remove I wouldn't show this on hover. People could accidentally click remove when they just wanted to navigate to a relevant page.

If the extra options really are edit and remove I would add some sort of edit button. When designed right, it shouldn't have to be ugly or crowded.

When you said books, I first thought extra options would be something like extra information. I was going to suggest a flip after clicking the book and show a button in the extra information that links to the relevant webpage. Maybe this suggestion still applies.

I recently came across some links you might be interested in. It's good inspiration:
http://tympanus.net/Development/BookPreview/
http://tympanus.net/Development/AnimatedBooks/
http://tympanus.net/Development/3DBookShowcase/index.html

Edit

Then what about this. First image: no click. Second image: click, options are shown and user is able to navigate to relevant webpage. Third image: click, options are shown on top of the image (image is darkened).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The third option prevents the clicked element of being larger than the rest of the elements, because that might screw up the grid. Google handled a similar matter on an ingenius way.

  • The extra options are actually edit, remove, add to favorites, add to list, and maybe another one. So I would like for them to be hidden with a single show option. – user295469 Apr 2 '14 at 8:19
  • @user295469 see edit of my answer – Paul van den Dool Apr 2 '14 at 8:39
  • That's a possibility. The most common action, though, is navigating to the relevant webpage. I would therefore still like for that to be a one-click option. – user295469 Apr 2 '14 at 8:59
  • @user295469 in that case I would add a small label to every book that shows the extra options. Like I said in my answer, when designed well is doesn't have to be ugly or crowded. – Paul van den Dool Apr 2 '14 at 9:26
  • Thanks! I will look into that. Do you have a suggestion for the label? A word, or an icon? – user295469 Apr 2 '14 at 9:38
0

I think something like the link posted is best

http://tympanus.net/Development/BookPreview/

Having small, unobstrusive icons or text links below the title means they are easily discoverable across all devices, because they don't rely on hover states to be visible.

Paul posted this image:

http://i.stack.imgur.com/dBmLk.png

The second state is ideal, however it should not rely on hover states - these icons should always be visible.

The other consideration is to make sure these icons and controls are usable on tablet/mobile - so making them large enough to be touched easily is critical. LukeW has a great article about minimum touch sizes, which also applies to devices with high PPI:

Touch Target Sizes

Finally, ensure your delete option has a confirmation or undo option.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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