I'm working on a profile page where a user (Tutor) can add subjects and details that they would like to teach. please refer to the attachment.

I think that having a table is very cluttered and I'm seeking for an alternative or a good way to arrange this in the best way possible.

enter image description here

  • How many potential lines would you need to show? Is book the only action someone can take? Are the columns displayed in the example correct? Is the design subject to change or is the table to be always in the middle? Jul 23, 2019 at 7:33
  • I think the table looks fine. You may want to have more contrast for the separators between the lines and maybe make the headers on the left/top look different from the actual data.
    – allo
    Jul 26, 2019 at 10:42

3 Answers 3


Personally, I would say that for what you're doing in the highlighted area, a table is exactly the right call. It does the job and gives a bunch of accessibility capabilities out of the box.

However, if you really want to use something else, then a card-based design could work - treating each subject as an individual card rather than as a row in a table.

Cards mockup


The UI advice:

  • You can create visual hierarchy in typography (Name of columns can have bold weight of font or darker color)
  • The texts should be in one line.
  • If there will be a more records, it's worth to consider filter/sorting and pagination option

The Structure advice:

  • I think there is not enought white space, so consider transfer div from right to left. Recommendations is useful and important feature? What about other pages? It's argumented to have that div in the right?

enter image description here

  • You can also create new view, however, I hesitate if it's a good practise.
  • Also, maybe for user will be good a view, which include all available offerts, which could filter and sort according to needs??
  • 1
    Also, some of the content seems to be not very multivariate, i.e 'Grade' (the content in the tabel could be a single digit), 'Method' (if the only options are Group/Private, it might be better to have two colums, one for Group, one for Private, and the appropriate checkmarks for every line), Price (if it is always per hour and in dollars, digits would suffice) - this would clear enough horizontal space to have the Subject in a single line. Make the whole line click-sensitive, and ditch the Button (if multiple selection is possible, in exchange for a 'book'-checkmark, otherwise completely)
    – bukwyrm
    Jul 23, 2019 at 10:11

You can use cards with horizontal or vertical scrolling:

enter image description here

  • Thanks for your response. I don't think that this would solve the UX problem Jul 23, 2019 at 10:15

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.