2

My first question, let me know if I should edit!

I'm working on a list-map hybrid, where each item on the list can be selected, to show up on the map (like Yelp).

The list needs to give a fair amount of information at a time, as well as a few actions, and the ability to select multiple items at a time.

The last part is what's giving me issues -- I've just run out of space for the list items. Each list item is about as big as I'd go -- the screen can hold about 2.5 items at a time. If I were to use a checkbox, everything would have to shift over, and it's packed as tightly as I'm comfortable with.

Should be able to:

  • select multiple assets at a time, but only one Project/Zone at a time.
  • give a fair amount of information
  • click the address to go to the asset on the map, click "dashboard" to open up the asset detail view, click the list item itself to select it
  • I've thrown together a compact view, with much less information. If this is the way to go, how would the user switch between compact and more information? An "Expand" button on each list item, or a list/detail view toggle?

Ideal, information-heavy view Alternate, super-compact view Project/Zone information list item

Improve this question
1
  • It appears the app has at least two different user types: (1) a company's project manager to assign assets to projects for a given period; and (2) a company's asset maintainers to maintain the assets. Develop workflows for each user prior to determining what data to display. Each potential user requires different data to accomplish their tasks. Consider adding functionality to switch user types and reduce the data displayed for each user.
    – user74889
    Apr 22, 2021 at 0:30

2 Answers 2

Reset to default
0

I think the problem may be in information architecture & placing too much information and networks in the list

From what I see projects, groups and assets are collections with items inside.

I think it would be a good practice to introduce another screen - namely the screen of a specific position.

Why?

-Increasing readability of information.

-With the amount of iteration, the amount of information to edit, browsing can increase.

-This resolve actual problems.

The next case i see:

Assets ∈ Projects ∈ Groups?

if so, the system can be redesigned based on these associations.

-enter image description here

Improve this answer
2
  • OK, so a checklist with a link to a Detail Page? I didn't include it in these images, but there actually is a Detail page for each asset (with a TON of information). Would you suggest just the Compact List and the Detail Pages, or should the List try to show some information?
    – Rachel
    Jul 31, 2019 at 17:10
  • List should include only fundamental information - everything + edit should be on Details Page
    – Piotr Żak
    Jul 31, 2019 at 19:38
0

Some ideas based on your designs that could help:

  • Put related components closer so the structure is more clear and compact
  • Added expand button (could also use one with a button border, but I think this is clear enough)
  • Added expanded view and get even a bit more free space
  • I think the envelop icon doesn't add much value

enter image description here enter image description here enter image description here

Improve this answer
2
  • Interesting! I haven't seen any expandable checklist examples in material design, but this could work out nicely! I'll give it a go and see how it looks. (PS The arrow icon actually does something! The assets have GPS, and the arrow shows the current heading. But I suppose that it might not be very useful -- so it might be OK to remove it)
    – Rachel
    Jul 31, 2019 at 17:13
  • In angular you have the option, here I leave the link, hope it helps :) material.angular.io/components/expansion/overview
    – Alejandro Veltri
    Jul 31, 2019 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.