I've a landing page with a list of offers, currently shown in a table. I'm not happy with the way it looks and I want to change it to a different UX layout. The page is http://www.georidersmtb.com/tours/ I was thinking about doing an accordion with the info in the slide down section, but I'm not 100% about it. Any suggestions welcome.


I think the main problem you are dealing with is the density of information you are able to display. Using cards or a table are both good solution once you treated the real problem - what is the most appealing for the user. First, I would clear some space by removing the redondant links to "details" / "read more". In the same way, the booking button can be changed into a figure displaying remaining places for the trip and the book button placed on the trip page.

Whether you use "cards" or a table to display the information, making the package look more visual attracts curiosity in a more efficient way than text. You could: - use colours to rate the difficulty, - put a picture of the landscape (seen on the trip) or a map as main object to describe the trip...

Another idea would be to create a flow through which the user is taken. I don't know much about cycling, but difficulty > motivation (landscape/sport/people) > destination may help the user select a trip.

Anyway, the user should always decide this kind of parameters...

| improve this answer | |
  • really great ideas. Making it more visual is definitely a step forward – Andrew Welch Jan 20 '15 at 20:33

I don't actaully dislike the use of the table. It is very expressive in the information that it contains so I get a good overview of the tours that the site offers.

My suggestions to improve the table could be:

  • Move the "book" column to the right, I won't book anything without reading what it is first so putting the emphasis on the sale after I've read what the tour is would be a more logical place to put it.
  • There are three links to read more but they have inconsistent styling. I would remove the "More info" column. The title of the tour is styled so that I know it is a link, there is also the obvious "read more" link at the end of the description which I think would suffice.
  • Difficulty rating and number of days could be expressed via icons instead of text. Icons are able to instantly communicate and make the site easier to be scanned.

If you do however want to move away from the table, small widgets are a good alternative.

GAdventures uses widgets to advertise tours in a good way. The use of a map to show where the tours go is a very quick way for the user to understand what the tour is, so much so that GAdventures have put the map above the name of the tour.

Rather than using a 0-5 rating on difficulty they have coloured in bars to express the physical demands of the tour. All the information required for the user to decide about enquiring further is displayed in a compact box.

| improve this answer | |

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.