2

What is the best way to represent a list of documents on mobile? I am designing a mobile web application developed in SharePoint. What are some must-have features for a documents page?

Details + Specs

  • I am designing for mobile phones
  • Documents need to be viewed, downloaded and shared; assume not editing or uploading for now.
  • Number of documents would obviously be limited by the size of the mobile screen. Perhaps displaying 8-10 at a time.
  • I want advice on what kind of display is optimal - should I use sorting and filtering? How should I represent the share and download buttons?
3
  • I can't answer this question because it's too broad. Just viewing docs? Upoload as well? Even editing? How to browse? How many? Mobile phone or mobile tablet? ... and probably more. Jun 12, 2014 at 12:37
  • In addition to @virtualnobi What is the goal of your app? Who are your users? Why do they (want to) browse your list of documents?
    – JonSpr
    Jun 12, 2014 at 12:51
  • Gee, I knew I had forgotten some... ;-) Jun 12, 2014 at 12:57

3 Answers 3

1

It is a broad question, but the approach you use will be the same no matter what you design.

Your app's purpose is to provide the user with documents.

You don't need to limit the document to 8-10 at a time - mobile users are comfortable swiping down a page.

However, if you have lots of documents, it might get a bit tedious continually swiping down a long page to find the document you are interested in, so features like 'search', 'filters' and 'favourites' would be very useful. These additional features help the user to locate the document(s) they are looking for, and they will thank you for them.

If finding the document is the Primary task, other types of task are called Supplementary tasks and include:

  • Download
  • Share

The workflow should be aligned with the object-action interaction, which is the natural way humans interact with anything in the real word, e.g. you select a object before you chose what to do with it.

So applying this to the digital world, let the user find and view their document before you display the buttons to trigger features which apply to the document.

1

The user needs to be able to view, share and download. You should only need two buttons to accomplish this.

For viewing it is understood if you tap the listed item then that file should open. No special icon is needed for the user to understand that.

A list should communicate all of those ideas succinctly. You can add a search bar at the top for quick filtering.

Documents List

1

enter image description here

Screenshot and design pattern source: https://material.io/design/components/lists.html#types

  • You should not limit number of document per screen, rather provide category / filter, and search option
  • Your category and filter options depend on context you are having in project, and design overall
  • View, Download, and Share, can be option toggled in small pop up menu, when user click this "menu" three dots icon that is on the end of every row far right. This way you can show this on very small screens, and it does not take much space

Your Answer

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

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