1

I'm designing a website where people register for courses (online or physical/in-class). The difference with other websites is that every course may have multiple registration options (multiple sign-up buttons).

For example, the course "Cooking in 30 days" has three options:

  • Class A - Mondays - $40
  • Class B - Sundays - $40
  • Class C (Online) - Fridays - $35

Currently, this is how I am doing it:

Idea 1

enter image description here

  • ✅ Users will Immediately see all options (no extra clicks)
  • ✅ Users can compare options
  • ❌ The page looks empty when only one option is available
  • ❌ I can't make the signup button or card sticky (so it stays when user scrolls). The alternative I can think of is an anchor link to signup cards section like a "back to top" button.

Idea 2

enter image description here

  • ✅ Can make Signup card sticky
  • ❌ Users can't compare options easily
  • ❌ Some users (especially because we have some eldery customers) may not understand how those buttons (< and >) work

Mobile Version of both

enter image description here

Which one do you think is better (and why)? Also, do you know examples of other websites doing this? I searched dribble, Google and visited some learning websites I knew like udemy, LinkedIn learning, ... but couldn't find a design for "multiple" options.

2 Answers 2

1

You can't make the cards sticky but you can put the price table in a block and make it sticky. This is a Codepen example of how to do it. It even fixes the other problem, if there is only one price, the price row can take up the whole width of the block.

enter image description here

1

A "smaller" interface is this example course page, showing the subscription options inline, on the right side of the page.

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.