What is the preferred way of displaying interactive information in a small space, eg table cell?

Question

I have a list of athletes that have competed in a race. For each athlete, I want to be able to do a couple actions for each athlete, like

• View Time Online
• View Team of Athlete
• View Time Splits
• View Athlete

A large number of athletes means I would like the cells to be as compact as possible. What is the preferred way of displaying interactive information in a small space, eg table cell?

I have a couple of solutions:

Put small buttons in each cell to do each thing

Have a dropdown menu to display more information

Have an action sheet to display more actions (excuse the incorrect cell in the background of action sheet)

Answer 1

I'm bigger fan of the card style design component/pattern. But for an table you can place three vertical dots menu icon at the end of the row, and then in small modal display actions. It is more suitable then example with chevron down icon you shown, as chevron down accordion pattern is mostly used to toggle more content.

Answer 2

Why are you trying to put them all together in one row?

If we assume that a different person is being displayed in each row and about 8 rows on the screen, there will be numerous controls on the screen. Users will have a hard time focussing on one particular object. Also the buttons are too small for touch screen use.

I recommend having only one profile per page so that you have space to indicate bad or good performance and provide recommendations or whatever the app is trying to deliver.

You may also consider freeing up some space by reducing unnecessary elements. For example, the icon before the persons name does not serve much value and may be removed unless it is an actual thumbnail.

Answer 3

Like @xul, I suggest a card pattern. So you have more Space to display information instead of having everything compressed in a small row.