4

I am working on a user interface design for an application on Android. Currently, I am struggling to choose a suitable form of navigation as it is my first time creating such a design.

The design is supposed to be for tablets, so for most lists, I use split view to view the list and item detail on the same screen.

The app is a digital library. It focuses on historical documents and each document has a list of its digitized pages. There are many lists in the app - list of documents, where user can perform search, list of favourites, list of collections and list of virtual documents (custom user-made documents). Moreover the list of favourites, collections and list of virtual documents should be split into two lists.

enter image description here

The current state of my navigation is that I have four tabs (documents, favourites, collections and virtual documents), so users can easily switch between them. The main problem is with splitting the lists. I could use another set of tabs to switch between for example my collections and already existing ones, but that does not seem to be the greatest idea.

So I thought maybe I could use the side navigation drawer for this application, or mix the navigation drawer with tabs. I am not sure how to design the navigation so it would be easy to use.

Improve this question
1
  • 1
    Whats the difference between "virtual documents" and "documents"? Also does a collection contain only documents or virtual documents or both?
    – Igorek
    Nov 3, 2015 at 22:13

1 Answer 1

Reset to default
1

Consider the content to be displayed in the app; you're displaying lists. This means that when thinking about navigation, the most natural way to start is by 'listing' your list choices.

Your heirarchy is fine, and the tabs are a good starting point in this case. A good convention when designing for tablets is a vertical bar design, like google uses for Gmail etc. This way your entire navigational hierarchy is visible and easy to navigate through.

I've illustrated a quick example:

enter image description here

Maybe this google material design example will clarify:

enter image description here

Improve this answer
5
  • Thanks for the answer. I like the idea of listing the list choices. The problem is that there is almost no space for the list of choices, so is there a way to solve it using the same approach?
    – Johhny-T
    May 7, 2015 at 18:28
  • If you have limited screen real estate I would consider listing your primary lists on one page and when clicked navigate to a subpage. The subpage can have tabs for the secondary list choice. This way you will only require two panes: one for your list of documents, and one larger pane to show your selected document. Will that do the trick?
    – kn03i
    May 7, 2015 at 19:48
  • Maybe also have a look at this page on combining navigation strategies in material design.
    – kn03i
    May 7, 2015 at 19:53
  • Yeah, that seems to be a nice solution, I could use the navigation drawer for that. But the drawback is that I would not be able to navigate quickly between the primary lists. Well I guess there will always be some drawbacks :D. Anyway, is it possible to save the state of the lists? Since the primary lists would represent activities, is there a way to store the state of a list, so when I view another list and then come back to the previous one later, I can pick up where I left off.
    – Johhny-T
    May 7, 2015 at 20:57
  • There are a couple of ways to achieve this. You could use javascript to save your previous screen state. Heck, you could even write that state to your database through Angular, but I'm assuming that would be too much :) Javascript to me seems the quickest and lightest way to achieve this, but since I'm not an Android dev I can't be 100% sure. This may be a question to ask on stackoverflow.
    – kn03i
    May 8, 2015 at 6:59

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.