1

This is a question for the phone UI.

I have an app where people can store documents. The main page shows users a scrollable list of their documents. They can then tap to view an individual document. The document contains a title, some text, an image, and more text. The document page contains a Back button, which takes them back to the main list. To view another document, they have to use the back button, then tap that document from the main list.

What I want to implement is a way for the user to move from one document to the next document without having to go back to the main list first.

For example, the Gmail app lets you swipe left/right on an email message to view the next/previous message. In Gmail, the next email starts to show as you swipe, as though all the emails are in one continuous ribbon. At some point the next email snaps to. This requires that multiple emails be loaded at the same time; at least the one you're viewing and the one you're swiping to.

The Gmail UI is great, but I can't implement that at this time. For various reasons, my setup (HTMl, code, etc.) doesn't allow me to show more than one document at a time. On the tablet view, the document has back and forward arrows that you tap to move to the next/previous document. However, ideally I won't have to take up space on the phone for arrows.

Any ideas for good UI for navigating to the next item? The apps I looked at either only have the back button, like Etsy, or they do the ribbon swipe, like Gmail.

If this question isn't clear, please write a comment and say what isn't clear so I can improve it. I've had a question closed for not clarifying what problem I was solving, but I thought I had clarified that. I've now reworded it so hopefully it's clearer. Just closing a question without discussion isn't helpful.

2
  • A good idea for working out whether the question is clear or not is to try and answer the question yourself and see what details you would need to come up with a potential solution. Often questions are closed because there aren't enough details or clarity for the community to contribute answers, and usually moderators step in to try and help (sometimes by closing the question so that the user will take actions). It seems like you have technical and design constraints in user interface, so a screenshot and some explanation for the current design will be helpful in getting useful answers.
    – Michael Lai
    Sep 24, 2023 at 0:04
  • I'd be happy if someone could give me even one example of a way that an app solves this or how someone might solve this, other than the Gmail ribbon way. I feel like it's a very standard design look and I thought I said that. Like Gmail, Etsy, recipe apps, Pinterest. You click to an item and it has buttons, images, text. How would you solve this for Etsy?
    – user295469
    Sep 24, 2023 at 10:33

1 Answer 1

0

An example of a design pattern that allows you to navigate from one item to another in a list is the carousel image display. It provides arrows to move forward or backward in a circular list (which means you never reach an end), and the arrows are buttons overlaid on top of the image either in a persistent manner (on the edges of the image) or appears when you hover over the image. That might present a problem if the user wants to scroll down the page to read a long email or if the arrows block the text.

If you have a good reason to implement this style of navigation, a good approach is to prototype the concept and try out the interaction to see how discoverable and learnable it is.

1
  • An image carousel typically shows arrows on computers, but on phones it tends to use scroll. The next image starts to come into view as you scroll, like in my Gmail example. You're right that the placement of the arrows would be a problem on phones. As you scroll down to read the whole item, the arrows would disappear, unless, I suppose, if they were pinned to the top. That becomes a real estate / space issue.
    – user295469
    Sep 26, 2023 at 16:56

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.