# Prioritize items in a large data grid on mobile devices

I have a data grid of around 100 items (images). I am using an algorithm to differentiate/prioritize some elements and the opposite for some other ones. I do that by giving values to these elements.

For example, an item can have a value of 4.5 and another one a value of -9. The values themselves are not important, but the minimum/maximum (ie. the range) is.

I am thinking of assigning colors and adjusting their intensity to give value to each item. In the above example, if 4.5 was the maximum and -9 the minimum, 4.5 would be bright green, whereas -2 would be slight red.

This has to be implemented on mobile devices and not all the items will be displayed on the screen at the same time but scrolling will be available, so the images won't be tiny.

Any shiny ideas of another way to do it?

• If the arranged items are images, how are you adding color? Background color behind a png/svg? Border? Semi-transparent overlay? Dec 27, 2016 at 17:04
• Border or background would be the only options however I don't like this idea because of the fact that the items are images only so playing with color again doesn't seem like a good idea. Dec 27, 2016 at 17:16
• Priority can also be displayed by order of images, or size of images. Dec 27, 2016 at 17:33
• @bloodyKnuckles Yea I thought of that too, probably the route I will follow unless something better comes up. Dec 27, 2016 at 17:51
• Are there elements for each distance-value in the range? I mean if there are 3 elements, the distance between the values will be the same (lets say 0 10 20) or the distance wont necessarily be the same (0 140 150)? Dec 27, 2016 at 19:56

I can think of several ways:

• Color is the one you suggest, the main problem is the conflict with the color in the images.
• Lightness is similar to color but as images will have color already it could be a better option.
• Position works if you always have a reference to the whole.
• Size is probably the best way to easily compare elements. However, it could make the elements not understandable if they are too small. Check Tag cloud and Bubble charts.
• Text is the most explicit one, think of a Periodic table.

The best option will depend on your case, your content and your layout. Possibly a good option could be to combine two or more ways of representation.

• Thanks for your input. Although I still haven't found the actual way to solve my problem, I am marking this as the best answer. Dec 30, 2016 at 12:23
• Yes, good answer! Jan 2, 2017 at 16:22

Apart from indicating the list item value (e.g. by color or an exact number), you can also sort them in descending order, to make the most important/interesting ones appear first.

I find that large groups of ranked data are more easily digested by the user if they are broken up into smaller chunks (similar to long texts being broken into logical paragraphs).

Instead of setting a unique color for each item (which would make some of them a brownish color if you go from red to green), consider splitting them into groups (based on your grid at different screen sizes... groups of 12 usually work well) on one background color per group. This would result in about 8 groups of 12, with more noticeable and manageable steps between the colors.

Also, since 100 items is a lot for a mobile screen, I would recommend setting the maximum vertical scroll to no more than 4x the screen height (~25 visible at once). Otherwise, users may have to scroll more than they want to, to see the full list. This means small images, though, which may not be ideal, depending on what they are.

• Also, if this is a mobile-only interface, your design will be much easier to create. Complex sorted grids may get complicated to design for larger screens. Dec 28, 2016 at 2:02