Visualizing that a list is longer than shown on screen

Question

I am working on an app where one of the actions a user can do is search for something and get presented with a list of all possible matches.

I am trying to wrap my head around how to make sure the user is aware that there are more items in the list than currently shown on the screen.

I thought about 2 things I could do:

• Leave it as is and don't make users dumber than they are
• Between the input field and the list beginning, add a text describing how many results are found.

Here is how the app looks now:

Answer 1

The first thing you should do is do some hall way testing to find out if it is indeed a problem. Don't make assumptions.

The second thing is to find out if users are mostly content with the first few results. If they are, you can just show the first few results and provide a button to show more or add pagination.

If this design just needs some adjustment to make clear that the list has more items than visible, you can visualize that with a fade out. Something like my example below, but I think the design can use some improvement to make it more visible.

Answer 2

I like your idea with displaying the number of results.

Other ideas could be

• Display scrollbar or some other indicator of scrolling to indicate more results (see android app drawer)
• Only load the 20 first results and add a 'more' button to the bottom which will load more (endless scrolling)
• Add pagination to the bottom of the page

Answer 3

Your design looks fine. As you've mentioned, users are not dumb, they know how to scroll.

When people search for something, they usually want to get less options from many. They won't care about all available results as long as one or a few first of them solve their problem. So it is better to focus on the quality of searching and ordering, not on precise number of results.

I wouldn't bother even to show the number of results.

Answer 4

I think there are couple of UX issues that needs addressing:

• Search Criteria - you mentioned that search function gets triggered only after a certain number of characters are entered into the search field. I'm guessing users are not aware of the number of characters required? This potentially can create a doubt in users' mind. This could lead to UX issues as well, for example user might enter 3 characters and wait for something to happen (while system needs at least 4 characters to get triggered).
• Search Results - currently there is no way to know how many results are returned. Letting users know about the number of search results returned will allow them to take further actions, eg; if too many results are returned they might try to narrow down the search by entering more detailed keyword.
• Permanent Keypad - which is currently blocking the search results. Trying to scroll the search results might end up user to accidentally touch the keypad which can alter the search results.

I think we don't have enough information about the nature of the app. But in general, I would do the following revision to the page design:

• Make the search function trigger when user presses on 'search' button or make it trigger after every character is inputted (if it's a specialised search).
• Paginate the search results and indicate the number of search results at the bottom of the page. Eg; Showing 1-50 of 2000 items followed by link.
• Make the keypad appear when the search field is clicked. Otherwise it should be hidden.