1

I am designing a B2B e-commerce website where the users would be able to buy different quantities of items for each size.

  • I am trying to keep the experience as close as possible to a B2C website
  • the interaction optimised for mobile devices

The problem: in the product page I am trying to

  • keep the main CTA above the fold

  • insert the main infos on the product under the name

  • have a scalable design where Sizes can reach also 10 variants

Any suggestions how I can achieve this?

Improve this question
  • Why do you want to keep the CTA 'above the fold'? Mobile screens are all different these days, and users don't mind scrolling on a mobile as it's a standard gesture. – JonW♦ Dec 3 '13 at 22:55
  • That's one of those "thing". I know, it's a daily battle against clients, but as long it is not impossible I think that it is well played to keep the main CTA at least at the same level of the "Main Image". Isn't it the last mental action? View the image → click to buy. What do you think? – Timo Patek Dec 3 '13 at 23:07
  • You don't show description for an item (images, text, etc.). Is it acceptable or some research-based approach for B2B? – Alexey Kolchenko Dec 4 '13 at 9:51
  • @AlexeyKolchenko Indeed, I Have just added the whole upper page. :) – Timo Patek Dec 4 '13 at 12:41
1

You can place the buttons on the top. Here is a rough update to your design. The top bar can freeze on top.

Design with Add buttons on top

Improve this answer
  • I am also considering to clone the CTA in order to have it as you suggested on the top and under the size /q.ty table. What do you think? – Timo Patek Dec 4 '13 at 8:17
  • 1
    When having 10 size variants, the buttons on top will be too far from the last action of the user, possibly out of his/her field of view, and against the direction in which the user expects them to be. – Erion Dec 4 '13 at 10:12
  • 1
    My concern with this approach is that the action associated with the form is now not visually linked to the form itself. The user will decide 'Right I want two of the L sizes, so I set the field to say 2... now what do I press to accept it?'. Distancing the CTA from the form breaks the association that the form and CTA are linked. – JonW♦ Dec 4 '13 at 11:22
  • Agree. But what about a double CTA? Over the product name and at the bottom of the table? Misleading? – Timo Patek Dec 4 '13 at 12:45
1

How about you combine the price tag and the CTA into one and place it where the price tag is now?

enter image description here

Improve this answer
  • Don't you think it may be misleading? I mean great idea, but the only way I can think of it is if the total dynamically updates at different quantities. But in this way at the starting point the CTA would show 0$. What do you think? – Timo Patek Dec 4 '13 at 12:27
0

That's easy. Put the add to order and add to whishlist on the same line.
Combine the + and -
Put the price below the form as it should be the total.
Add a picture next to the brand and model.

Also design for landscape mode.

Improve this answer
  • There's a Misunderstanding, it's not a smartphone screen in portrait mode. I've updated the post if you mind to take a look. Thank you – Timo Patek Dec 4 '13 at 12:43
0

Is there a concrete reason to make a B2B website that looks and acts like a B2C website?

For one, it's a totally different context (business vs. home). Second, business users will most probably be repeat users, i.e. they will eventually learn the interface and may appreciate "efficient input for expert users" more than "ease of learning for newbies".

The usability pillars of "user, task, context" will therefore differ between a B2B and a B2C style. This alone makes it necessary to double-check what your users want and to do user testing with prototypes before committing to the B2C style.

Improve this answer
  • The reason resides in the Business Model which is slightly different than a classic B2B model. Hence, From a UI perspective the "B2B" approximation can work in this context. btw of course I agree with you that power users " may appreciate "efficient input for expert users" more than "ease of learning for newbies". thanks for your feedback – Timo Patek Dec 4 '13 at 12:23

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.