5

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?

Original prototype

6

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.

enter image description here

  • Glad you like it! – Eric Stoltz Nov 9 '15 at 18:32
3

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

  • 2
    Hi! Thanks for your input. It was supposed to be "mobile-first" but I believe whoever created the prototype could not figure out a mobile way to display that information and did it the "old" way. I tried this layout but even on my large screen phone it seems too much information (4 columns). This is where the idea of merging columns came from. But I guess you`re right, I should bring users to see it and check their opinions. – Rodrigo Lira Nov 8 '15 at 13:30
  • Very little of information typically displayed in tables is "intrinsically tabular"! Mobile design is teaching us that. – Eric Stoltz Nov 9 '15 at 18:33
1

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?

  • Yeah, the number of areas and questions are all dynamic. I also agree that seems too much information to be displayed to the user. This is something I'm discussing with the people responsible. In my opinion, the percent value would be enough. – Rodrigo Lira Nov 9 '15 at 18:29

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.