2

I had a meeting this week with the stakeholders involved in a management projects app. This is the way they show the information:

enter image description here

My discussion was this: I think they are showing too much info at an only glance, and they could put some of them into the detail of each card. But they say they had my proposal at the beginning of the project, and after a few usings, they started to have the feeling that it was to "heavy" to use it because they had to do one more click to see this info, and they wanted to avoid this click showing the info in the same level that the card.

Then, the big question is: is better to avoid the click and show all the info in the card, giving cognitive load to the user, or add a click and show this info into the card?

Thanks and regards, Alejandro.

2
  • What does the > at the right hand side mean? Commented Aug 9, 2017 at 12:18
  • an arrow that leads to a detail area Commented Aug 9, 2017 at 12:35

2 Answers 2

3

I disagree with Nick.

Yes, it looks cluttered and busy, but I don't think that's (entirely) due to the amount of data presented. Here's one of the material design card examples:enter image description here

It shows name/type/description just like your task consists of name/project/assignee. And both show some unique data points (price/rating/distance/hours and priority/attachments/deadline)

The big issue I see with your design is how the badges seem to be sprinkled around the space without much organization. This creates issues from both a visual and interaction standpoint.


Visual problems

First of all they are all a different size, which creates a sense of unease. Even the ones that should be easily made the same size (yellow triangle, red circle) are slightly different sizes:

enter image description here

Now, the Café example also has differing icon sizes but it gets away with it more because of three reasons. 1 - they're spaced further apart so it's less noticable. 2 - they have very different shapes and functions, not just notification/alert badges. 3 - they are integrated with other content so it scales a bit with that content; for example the $ is likely just that character in that font.

But your example has them all close together, roughly filling the same shape (or rather, aspect ratio), similar functionality, and many are not connected to other content. Nor are they aligned similarly. I suppose the yellow triangle and red circle are aligned similarly, but compare their placement to the company logo.

All these small things combined create a sense of chaos.


Interaction issues

Pretty much all these are too small to be interacted with, which is why I'm calling them badges. They can't be a touchtarget on their own, they can only be part of a touchtarget. But because they're not consistent in size and layout, it's hard to discern what is interactive and what isn't.

You say the (i) is a button, but it looks way too tiny for that. The company logo is larger, but as far as I can see that's not an interactive element.


Consider culling - what is the importance of all information?

Does the current card design show all the information? No. You've got the (i) icon to get more info and attachments. So there already is that 'one extra tap' for some interactions. And there's a > button for additional information, too. There's just a discussion about which actions are worth the premium space and which can be hidden behind a click. Consider what action types this card has. The most significant choice is (presumably) accept/reject. The other information is required to make that decision.

Can you get away with hiding some content? For example, if a task is already assigned to a person, does it matter much which company and project it is for? Perhaps you could remove both? Or just one, assuming that a project is hierarchically part of a company or vice versa? Does the lightbulb icon actually represent the project, or does it just indicate urgency?

Can you show certain information only if required? You could have a compact view for tasks that have all their information filled out and are on track. And you could have a larger view with a wide row of buttons if something requires further action.

You could even have that bar in place of the accept/reject buttons. That way it is impossible to accept a task that isn't filled out properly. Whether or not that's a good solution is up to you.


Beyond the layout

Your icons aren't very informative. What does an exclamation mark mean? What does the (i) inform me of? They're very generic symbols, while they could convey much more information. For example, why not use a paperclip for attachments, and a clock either for the assigned time or the deadline?


An alternative layout

Note: this is just a quick mockup, but it should get you started on rethinking how you can organize things.

enter image description here I've vertically centered the text to the icon. This is the most important information. The task in 1 line.

Above it we see who does it and when; the planning information. There is room for two (even more if necessary) badges relating to planning.

Below it we see the first line of a description. This could also be the project, or the address, or whatever. I suggest to keep this as pure text, as an icon would break flow, and fight for attention; the company/project name is not as important as badges that require action.

All the way at the bottom is the interaction bar. You can expand the information, accept the task or reject it. I've drawn 3 badges for attachments. This should let you show 1, 2, or 3 attachment icons, or 1,2, and + to indicate there are many attachments.

When expanding the information the bubbles should become a vertical list.

If you want to make the attachments immediately accesible links, I'd suggest making only two bubbles, then you could show 1, 2, or (9)(x) for many attachments. (clicking when there are more than 2 attachments should expand to a list)

There are two major divides in content; horizontally we have icons left and text right, vertically we have information above, action below. The two icons top-right break this a bit, but they're contextualized by the date (and on the same row the name). You'll also notice that I've only got two size icons; the project, and the badges. By using a lot of grey color we make secondary information less attention drawing.

All together this creates a per-task hierarchy where the most visible things are Task name and accept/decline.

On a larger scale, the outlined grey icon vs the negative space red icon help the user spot the important tasks. This was the strongest aspect of your original design, and colorblind-proof too, so I based a lot of my rework around it.

1
  • Great report, fantastic! Very helpful comments. I will study it deeply in order to reorder the design. Thanks very much! Commented Aug 10, 2017 at 6:08
0

If you follow the Material Design Guidelines, which I think you do based on the image you provide, it is best to add a click to show the extra info from the card.

A card is a sheet of material that serves as an entry point to more detailed information.

Source: Material Design Guidelines - Cards

It is not a problem to add an extra click as long as it is a logical and small step for your users to take.

There are also a few other reasons to have the extra click;

  • Having every action available in the list from the start greatly clutters the overal feel of your list.
  • It also increases the risk of accidental clicks.
0

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.