3

I know long lists on mobile have been discussed on here before. But there are some differences in my problem - and I have yet to find a solution I am fully satisified with.

This is for a responsive web application. Essentially the user has a long list of selectable items - could potentially be 100+. The user can click on an item, which cause it to expand. Here they enter how many units of said item they want. Upon clicking off item the list contracts, and the selected values are indicated. There is also a running total in the header.

The main issue I am having is we currently have several constraints which is vastly reducing our real estate.

Filter/Sort at top. Fixed header with running total and fixed action button/disclaimer at bottom.

We did consider bumping down the action button and disclaimers say 10-15 rows, but this was causing a double scroll effect which did not test well. If we bump the action button down to the very bottom and user has 150 items they need to scroll all the way to the bottom to click. We did also look at pagination but was not ideal as user has issue of selected items spread across multiple pages.

Has anyone any experience solving a similar problem or instances of some good examples of where this is handled well?

Mobile Long Lists

Improve this question

2 Answers 2

Reset to default
2

You could reduce the space at the top by grouping the number of selected items and the total cost. The two numbers are associated with each other (the cost is calculated from the selected items), thus they should be positioned close to each other to make the connection clear to the user.

In order to facilitate the interaction with the long item list, the accordion principle could be useful. My idea is that you collapse the items lying between each two selected items. This way, at the top of the list there are only selected items. They are followed by items that are not yet selected and need to be viewed by the user. He can expand a collapsed section between two selected items if he wants to view or select further items.

The original order of the items is preserved, but items that are currently not interesting for the user are hidden (assuming that he scans the items from top to bottom).

The mockup below shows a rough sketch of my ideas (I left out the filter and some other details). On the left side you can see that the first four items are selected (v) and the items between them are collapsed. On the right side the items between item 4 and item 8 are expanded.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • I don't like the idea of hiding content in this way as the plus signs seem to indicate that it will open more details for the item it is next to. However, pushing the selected items to the top of the list is a good idea. It groups them, and makes all remaining available stuff easier to scan through.
    – Elle_Underscore
    May 2, 2014 at 12:19
  • Yes, the plus signs can be misunderstood. A better graphic representation has to be found. In this sketch, they just illustrate the functionality.
    – Anna Prenzel
    May 2, 2014 at 17:06
0

It seems to me you are mixing navigation (search / sort on a long list of items) with display of user selections. Think about moving the user selections to another area (a hamburger menu or some type of collapsable panel where it can be quickly accessed).

If you remove the need to display user selections in the same space, pagination will again become an option.

Improve this answer
2
  • I did try that approach Franchesca, where I had a seperate list of selected items (almost like a shopping cart model). The issue here is (and this is not really apparent from wireframes) is that this is financial data, and users may want to compare selected against unselected items.
    – Spiral13
    Apr 30, 2014 at 11:48
  • @Spiral13 Hmm, do they compare by filtering and sorting? Perhaps you could provide a way to select items just for the purpose of comparison?
    – Franchesca
    Apr 30, 2014 at 12:43

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.