2

I've come across many good nested/hierarchical data on mobile, problem is they often only include one line of information.

I'm looking to include more information than just a card title, so I'm really struggling to visualize a decent design.

Well, first of all, this is the design on desktop:

enter image description here

Now, on mobile, I know I can't expect the user to have the same experience as on desktop, but I'd like to atleast guarantee the user will be able to see 3 levels down without having so scroll horizontally (there are no level limits)

Worth noticing that I'm not looking for a sliding panel or a modal that show the inner tasks, it is important for the user to see the whole tree. I'm also avoiding using connecting lines to display the hierarchy because those are a pain to animate

This is more or less what I came up with on mobile, this is 320px large : I think it looks shit, I tried to cram up all the info in the card but it got too crammed.

enter image description here

Any ideas on how to display the first table on mobile?

2

I suggest you take a look at colouring your text and just aligning everything correctly in your cell. When you want something to stand out, make it 'pure' black and maybe even bold. Make the rest of the text a little more 'greyish' so your eye isn't directly focussed on the less important part. Use a other colors (green, red, blue, etc.) as labels for something like ongoing, on hold or completed. I've put an example below of the way I would do it.

(to be clear, I used the same measurements/scales as you)

Good luck!

enter image description here

| improve this answer | |
  • 1
    Thank you, it looks really good, I just would shift the "ongoing" status below the title so that larger names won't mess with it, but overall it helped alot – Mojimi Apr 1 at 16:53

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.