1

I am making a webapp that enable users to borrow/lend books with their neighbors. Design needs various options like 'borrow', 'can-lend', 'add to wish-list' and 'read' for every book. The issues is:

  • Showing multiple buttons for each option on UI may take too much of UI space. However if UX is better in this case, it's worth going for it?
  • Showing most important option by default as button title and showing other options on hover over (or on click on Mobile) doesn't provide the best UX as user may not even realize that there are other options underneath this button.

Button with options multiple related buttons on hover over or click

What can be other options to display multiple related buttons? Thanks.

1
  • I thought this question is worth deliberating so I added to UX SE. If this question is too much specific to my app, please let me know I'll take this down asap. Jun 12, 2015 at 6:15

6 Answers 6

1

Why not use drop-box?

Like this:

enter image description here

It will show the default option yet affording that other options exist and show them when clicked.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
1

We went ahead with Obvious Always Wins principle. This is how it looks now on desktop:

Lenro book page desktop

and on mobile:

Lenro book page mobile

0

The purpose of those words are not very clear.

'Read' -> Does it mean 'I have read this' or 'Read this book now': 'Borrow' -> Does it mean 'I want to borrow this book' or 'I can borrow this book'.

Sure user can figure that out in a few seconds, but he should not need to.

Option 1)

Consider grouping buttons and actions to two groups, in slightly different locations.

Have main actions visible.

[Lend now]

[ Add to wishlist ]

Place the secondary actions related to already owning this book somewhere else.

[ I own this and can lend ]

[ I have read this: rating ]

Option 2)

Just use different visual priotity, main action as a button, others as a links.

[Can lend]

Borrow

Read

Add to Wishlist

Option 3) Combination of the two above.

1
  • Option 2 seems interesting. I'll design to evaluate if that can be a good solution. Thanks. Jun 12, 2015 at 13:48
0

Like you said, if the user doesn't see options in the UI, they may never know about it. It looks to me, based on your screenshot, that you've got some room underneath the image to display some options.

If you only have one visible option, include a down-arrow of some sort next to it. That way you can prompt the user there are additional options.

And like Jkarttunen said, try re-wording the options to make them more explicit.

0

I think you can clarify this with icons instead of words and save a lot of space.

For Borrow I would use something like an arrow pointing into a door, or downwards.

For available for lending I would use the opposite of the borrow icon. Greyed out if not available.

For read I would use a checkmark. Greyed out by default, green or other logical color if checked.

And finally for the wishlist, simply a note/list icon.

2
  • 1
    Why would icons be a more usable solution when icons are meaningless without prior experience? Placing arbitrary icons that can have multiple meanings do not improve the interface's ability to communicate purpose. Jun 12, 2015 at 17:01
  • I agree that icons are meaningless without prior experience. However, if you use icons that resemble ones many people are are familiar with, I have found that users tend to click them rather than words. It all depends on the choise of icons, and yes maybe the proposed ones are not ideal.
    – LvS
    Jun 12, 2015 at 17:11
0

I think the real question is what context is this book in I don't think the screenshot provided tells enough of the story. Also, what priority is the actions of the book compared to the actual details to the right of it? What problem(s) and goal(s) do these book specific actions solve?

Pseudo Problem: People can't find book actions.

Goals: Increase overall book actions visibility and raise the borrow metric by 10% upon feature release.

Pseudo Solution: Place the book above the rest of the details and pull all of the actions from the drop down and make them front facing. After they are front facing sort the buttons left to right based on what ever priority they fall under. Icons inside the buttons wouldn't hurt either to further drive their separation and visibility.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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