What are the best practices and/or guidelines to replace a table on mobile apps?

Question

I was asked to create a small and likely simple mobile application to display evaluation and its details.

Problem is that the person who created the wireframes was clearly thinking on a website rather than a mobile app. I assume that because of the use of tables (as you can see below). These days mobile apps display such information as lists or cards.

I'm trying to come up with a better solution to display that information. However I'm having trouble figure that out.

First thing is that the screen has two distinct, yet related, set of data. Seems to me that there's an obvious solution here and that would be to use tabbed navigation and display only one set of information at a time.

But I can't figure out a way to turn those tables into lists or cards. And there's really not enough space to display 4 columns like the picture shows.

The only thing I could come up with is to "merge" the third and fourth columns, having the background of each "cell" being the progress bar and placing both the number of correct answers as the percent value as text inside of it.

But it sure still looks messy.

Could anyone help me with some guidelines and/or best practices that would help me figure that out? Or maybe you've seen an app that displays kinda the same information?

Answer 1

When designing for mobile, you are right that tables are not optimal. As a concept, cards contain all the needed information, even if not all of it is available at the same level. Positioning, sizing and other elements are used to prioritize information based on actual user needs.

So without knowing everything about this information and what the user is most interested in, I can make some assumptions: that the user is more interested in the overall score, that we don't need to repeat information (correct answers, number of correct answers), and that the numbers should be available within the section card. I would also add that each question should link to the actual question itself in the form of a modal.

I'd suggest something like this, where tapping on the card expands it to show the relevant questions for that section. Avoid using red and green as only indicators as that limits use to colorblind; a check can be used just as simply, and the empty space also helps to point out which questions were wrong.

Answer 2

First off you might do well to design "mobile first" in order to avoid these hiccups.

My second point is that you should try this design as it might work. Test it on as many devices as you can. The reason I think this is because what you're dealing with here is intrinsically tabular, and as such that's the format which makes the most sense. Maybe you can find another way to display the % and progressively enhance when the space is there on larger screens?

Whether you merge columns or not should be a decision you make based on the users' understanding, not simply on saving space

Answer 3

Does the end user need to know all the info you're showing? It seems a bit superfluous to me. Does he really care about the absolute amount of answers he had right? Or is the percentage sufficient? And what do the areas tell the user?

Also, do you know exactly how many questions or areas there'll be? Or is it variable?