I have a case where I need to show bunch of numeric values like (2000000, 345.6, 2, 657, 567) as a mobile app tile without making it look cluttered and also allows user to easily scan the data. (among the listed numbers 2 of them are more important than the others)

Also table is not an option as in mobile I am not able to fit all my data in single row.

I have come up with 2 options but they are not that good! Please take a look and give your feedback.


download bmml source – Wireframes created with Balsamiq Mockups

  • 2
    Maybe an easy question, but do the exact numbers matter or can you round it up and hide the exact number behind an icon? And did you do user research to understand which param is most important to show first? Jun 17, 2016 at 22:20
  • Is a table definitely not an option? because the two most important values could be on the left of the row so are always in view and the other less important labels could be to the right of them. If the screen is narrow the table becomes scrollable horizontally but at least the primary labels on the left will always be in view - does this sound like an option or do ALL labels need to be visible at all times?
    – Dave Haigh
    Jun 18, 2016 at 13:40
  • @MaxdeMooij: I can't use icon for a numbers as it can be any value.. and it is important to show the exact number even with decimals.. Think of of it as your bank/telephone statement but here you have to make a decision based on the data to select item/s Jun 18, 2016 at 13:57
  • @DaveHaigh: our UX research concluded that 3 Params have the same importance and are decisive for selection. Also there are bunch of other Information we need to show (for individual item/row) if they want to take a deeper dive.. So I guess table is not an option in that case.. Also some labels are itself a value.. (let's say they change based on a scenario) so can't replace it with icons.. I have been giving a lot of thoughts for this.. but can't think of anything else but an expanded card layout.. Jun 18, 2016 at 13:59
  • @PratikShah The things you've mentioned are pretty important for the type of solution. Indeed you'll have to work with cards, I think. I don't know the case, so I can't design a possible solution. Once you've iterated enough with drawings and wireframes and you can pick the most fitting one, I think you can fix a lot in the design stage. Jun 18, 2016 at 17:52

2 Answers 2


What do you dislike about Tile 2 that you've designed? I redesigned it a litte bit:

tile 2 redesigned

If you want users to scan the data, you can use bars so they can quickly see what params are large and what are small. (also keeping the exact number for further deailed inspection)

enter image description here

(I had to randomly suppose what values are large or small in this example)

enter image description here

In this last example, the brightness of the bar too indicates how small is the number. You could use all bars in the same color, making their size be the only visual indication of the value.

You can use colour scale instead (but not all the rainbow colours). The tile coulour indicates how large is the main param (red = high, yellow = medium, blue = low). The other params follow the same rule:

enter image description here

This way, user can (hopefully) spot desired patterns, for example "I need a red tile but with blue square at the left".

It might also be useful to sort the tiles according to the params values!

  • Thanks for the effort! And colors do help spotting the Param but these are scientific readings and few params need color coding to indicate their respective boundaries for categorizing them.. so allocating colors to each Params may not help.. it will create confusion. Feb 14, 2017 at 9:08
  • Also regarding your above 2 ways.. there isn't any defined MAX value.. there is always current MAX.. which will keep on changing based on experiment.. I don't want to use boring table and wanted to use cards as number of params are still manageable.. Appreciate it! Thanks you for taking a time for this. Feb 14, 2017 at 9:14

Can't you group the diffrent priority of values? One tile with the both important values and one tile with the rest.

Maybe with different colors you can build relations between the numbers.

  • the thing is all the params in a row are related to a particular thing. So can't do that. Feb 18, 2016 at 12:36

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.