Presenting multiple book formats

Design & UX
1

I am building an e-commerce site to sell books. For a given book, it may likely be offered in multiple formats (e.g. print, eBook, online, etc.)

What is the best way to present the various formats?

Option #1: For a given title, have one listing in my product catalog and display whatever formats apply?

Option #2: For a given title, have a separate listing for each format. So if I am offering the book, “Guide to Better UI Design” and it comes in 3 formats, then I would have three separate listings in my catalog.

2

Yes

No

3

@DaveMaxwell,

Thanks for the answers. Next I am curious what is the best way to allow a user to pick different options under one listing.

I believe Amazon users radio buttons, but I thought that I had heard that radio buttons aren’t considered that user-friendly especially on mobile.

Should everything be a button or a link and just clickable? Or are radio buttons the way to go? Or something else?

Let’s assume this is for a single listing of a book called “Guide to Better UI Design” and it comes in the following formats…

  • Printed Book
  • eBook (.MOBI, ePUB, PDF)
  • Online Book

Thanks.

4

Take this for what it’s worth, but my take is Online/eBook should ALWAYS be available and should be the base option. The add on would be the physical book since it would cost extra with shipping and such.

So at order time, I would have the option of online/eBook or print + online/eBook.

Then in the library (if that’s still the way you’re looking at), I would have button links which point to each of the different eBook options + the online version.

5

I don’t disagree with this. In fact, I will always offer some digital form, and the printed version may or may not be available.

Oh, did you mean not that I always offer a digital form, but that if you buy a printed book you should still always get a digital form as well?

That was my question… How should I allow users to choose which format(s) they are adding to their shopping cart?

Amazon.com uses both tabs and radio buttons as seen here…
Amazon example

Barnes & Noble uses buttons and radio buttons as seen here…
Barnes&Noble example…

B&H Photo uses just old-fashioned buttons…
B&H Photo example

Amazon’s page is nice but I am afraid it requires more technical know-how than I currently have. And my goal is to just get my site done and online in the next month or so.

So I want to choose something that provides good UI/UX, and then I can add fancier things later on.

Make sense?

6

It’s how I would offer it, but you could have up to three options:

  • Print
  • eBook/Online
  • Print + eBook/Online (with a discount off the cost of both)

Of those choices, I’d probably opt for an approach similar to B&N with buttons. The radio buttons are not needed unless you have a brick and mortar location as they only deal with shipping.

7

To be clear, I am trying to figure out which controls are more acceptable to use.

Is it considered good or bad design to use radio buttons? (I thought radio buttons were seen as being NOT mobile friendly?)

At the same time, would it be a better design to have the three options you mention, have a radio button next to each one, and then have one “Add to Cart” button?

The more I think about it, to me it is less confusing if there is a single “Add to Cart” button like B&H Photo has. And then have a radio button before that to allow people to choose the format of book they want.

What do you think?

8

Radio buttons are fine on mobile as long as they have labels attached to them. They’re just not the most attractive things out of the box.

What you can do is make the radio buttons look like buttons. Something like this:

9

@DaveMaxwell,

Hey, that’s pretty neat! :smiley:

So does that imply that you would prefer buttons over radio buttons?

If so, then are you also okay with there being a set of buttons where the user first selects the book format that they want, and then there would be a second button that says “Add to Cart”?

On a side note, I am also looking at A Book Apart, and they actually just have multiple “Add” buttons…

https://www.abookapart.com/products/the-new-css-layout

What do you think about that approach where you don’t have a master “Add to Cart” button?

10

I prefer the look of buttons over radio buttons, but as long as the label is attached to the radio button so I don’t have to try to hit the exact radio button, I wouldn’t care one way or the other.

You’d have to do that with the radio button approaches.

If you’re going to send the user directly to the shopping cart afterwards (like ABA uses), that approach is fine. But if you want to allow them to continue shopping, then I wouldn’t like the approach because the chances of having extraneous items in the cart goes up exponentially.

11

Why do you say that?

If I used your code sample where you use an unordered list combined with a radio-button input, then that would capture which type of book format the user wants. And then if everything was wrapped in a form and my additional “Add to Cart” button was an input submit button, then I could pass along both the book format and the desire to add things to the shopping cart in one form submittal, right?

I actually have a question in the HTML/CSS forum related to this that I’d appreciate your thoughts on…

https://www.sitepoint.com/community/t/need-helping-with-add-to-cart-feature/342695

12

Riiiiight…and?

The “buttons” I linked to are nothing more than fancy radio buttons. So you’re not really clicking a button, but selecting a radio option. So whether or not it looks like a button or not, it’s still the radio button approach - you have to select a radio button and use the add to cart button. Hence why I had “pre-selected” a radio button. All the user would have to do is use the add to cart button.

13

I misunderstood your response. I thought you were either saying that i couldn’t use the buttons, or that I couldn’t use a master “Add-to-cart” button.

So you are agreeing that I can use your stylized radio buttons which look like regular buttons plus an “Add to Cart” regular button, correct?

14

You can do whatever you want. It’s your site - you’re going to have to make some decisions on how to present things to your customers…

15

@DaveMaxwell,

I have some questions about the sample you shared with me above…

1.) Why do you use absolute position here, and what exactly is it doing?

.type label, .type input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

2.) What are you ding here with the opacity? I thought the radio button was hidden behind styling that creates a box?

.type label, .type input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

3.) Why do you make the label transparent? And doesn’t a smaller z-index number put things in the background? I thought the label would be at the top of the stack, i.e. in front of the radio button?

.type label {
     font-size: 90%;
     background: transparent;
     padding:8px;
     border:1px solid #CCC; 
     cursor:pointer;
     z-index:90;
     text-align: center;
}

4.) Why are you using a table for a span?

.type label span { display:table; width: 100%; margin: 0; text-align: center;}

I would have thought maybe you would just use display: block ?

5.) What exactly does this mean?

.type input[type="radio"]:checked + label {
    border: 1px solid red; font-weight: bold;
}

I guess :checked means that you choose a particular radio button? But what about the + label part?

Thanks.

16

To be honest, this is based on a snippet of code that I had bookmarked, which I changed to meet your needs - a five minute hack…

Try removing it and you’ll see the change in positioning. I’m sure you can handle it with negative margins, or changing the margin on the lists, but I didn’t bother tweaking it…

Remove the opacity and the radio box will show…

The label is transparent because the sample snippet had a colored background, but I found that selecting a different box wasn’t changing the background. You can remove it.

Because I wanted the price to show under the object, and that’s a quick and easy way to do so.

It puts the border around both the checked radio button and it’s label

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.