4

I am wondering about UX on mobile for stuff which, in a desktop setting, would typically open in a new window or tab because the origin page/screen needs to stay as is.

Example, when asking a new question on this site, there is a "How to format" box to the right of the text area with a summary on how to write markdown. In that summary, there is a link to more detailed explanation, which, when clicked, opens in a new tab. I think this is good, since the user might not want to nav away from a form they have already entered info into, etc. There are lots of other cases like this.

But, lets take that scenario to mobile...

The link opens a new tab... but does the user realize they will have to close that (or go through the change-tab interface) to get back to the original tab? I could see where confusion could occur, and out of frustration, the original task of submitting the question (or whatever it may be) could be abandoned.

Am I over analyzing this? Are there best practices for implementing "links to more info" on mobile without losing the origin page/task screen?

Improve this question

3 Answers 3

Reset to default
1

A fullscreen modal would be a solution. See example below from Producthunt.

With this approach, both the close button in the top left corner and the browser back button can be used since the modal page has it's own url.

The search results page: https://www.producthunt.com/search
The modal: https://www.producthunt.com/tech/stack-overflow-jobs

Producthunt Modal

Improve this answer
1
  • I like this... So the user is actually leaving the origin page, yes? And clicking on the X is basically the same as hitting the back button? Just want to understand what is happening there... also, if I didn't see your anmiated image, I might not have known for sure that clicking that X would take me back. Would most users?
    – GWR
    Jun 6, 2016 at 18:14
0

Although many mobile browsers will close the newly opened tab page when user hits back button, so they would land on the original page, it is not a devil's thought to display the help/read-more content in a dynamic section (eg.: "div") of the current page - if it is not too long and detailed nor it has links to other contents in itself so that it would rather deserve its own page, like a chapter in a book.

In html5 even there is a "new" active element for this purpose called: details, but its support is limited yet in mobile browsers - link.

Improve this answer
0

If the requirement suits, try with accordion option.

In mobile open the detailed screen as separate page and provide back button to return to original page.

Improve this answer
1
  • 1
    Welcome to the site, @Ranganatha. Can you add some clarification as to why the solutions you suggest work well? You suggest both an accordion and a separate page; when would you use one over the other?
    – Graham Herrli
    Jul 6, 2016 at 18:30

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.