0

I have an app with 4 main screens.

I'm using a sliding tab navigation for them. So they are easily navigable via swiping.

One of these main screens

has a list of items.

When an item is pressed, a detail screen is opened.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

How do I include this detail screen into the navigation without making things weird?

Should it be on top of the list and swiping to the right gets back to Main Screen 2? Should the swiping be deactivate while on details Should it become it's own screen to the left/right of List Screen?

Improve this question

2 Answers 2

Reset to default
2

You don't need to put the detail screen in the navigation (which I assume is the bar at the bottom of your screens). The detail screen is a subsection of one of your primary navigation areas and represents traversing deeper within that section, so it should be separate from your primary navigation.

The Spotify app shows a pretty conventional approach to what I think you're doing. The 5 main sections are at the bottom in the primary navigation. After going to a primary section (e.g. Your Library), traversing deeper within that section (e.g. Playlists -> A Playlist) populates a back arrow in the top left corner that allows you to go back to the previous level within that section. You can also tap the primary navigation menu item again to go back to the top level of that page, regardless of how many levels deep you are.

Improve this answer
1
  • You're right and my subsections are mostly just 1 step deep (only one is 2 steps) I now just show a fullscreen modal, which looks like a regular screen, but hides/prevents the use of the main navigation till it's closed, so the users can't accidentally navigate with a swipe from these detail views (which play videos/audios/got much text etc.)
    – K..
    Apr 20, 2017 at 9:40
1

Have you considered making the detail screen a card or widget rather than a full page?

The layout you are describing sounds fairly similar to Snapchat, and they handle detailed information (such as a friend's "profile") as a popover card rather than its own page.

enter image description here

Improve this answer
2
  • I thought about it, but these detail pages are very important and will be opened often and for a long time, so I thought a screen would be more flexible.
    – K..
    Apr 17, 2017 at 13:41
  • 2
    That's understandable. If you must make it a standalone page, I would recommend disabling swiping on the details page and instead use a persistent, clearly identifiable back arrow in the corner of the screen. Keep in mind that this does introduce some inconsistency to the navigation though.
    – William Anderson
    Apr 17, 2017 at 13: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.