1

I have one site where I have a little Gallery. Clicking on the image displays a description of the team member and additional image(s).

On a regular desktop I was thinking about implementing the additional information with a PopUp (or some kind of Lightbox). Which is somehow fine cause the user clicks either the X or press the ESC key. And the dialog is closed.

On a mobile device the conent will be displayed same style. But due to the limited screen size and the ammount of content in the PopUp this blocks more or less the whole screen. Sometimes it doesn't even fit on a screen and the user needs to go up and down.

Now the major question is how to close this popup. On a mobile device there is no ESC key. If the user doesn't find easily the close button (s)he closes it with the back button. But using the back button means as well leaving the web page and returning to the previous one.

Any ideas how to display the additional information properly?

1

As stated before, modal on mobile should be closed with an "close" or "X".

But there is a way to avoid the modal. You should show some kind of CTA like a button "show more information" (this could be an icon button, a text button or simply a textlink) this would slide in the information page (right to left). This will feel like an additional layer is on top of the picture. In this page the user can scroll and perform any action necessary. You could place a "back to picture" CTA.In addition a swipe right would slide the infopage out and show the picture again.

0

I think it would be best if you put 'X' or 'Close' fixed-position button/link at the top-right corner of the modal. So when the user needs to scroll down the modal, the 'close' indicator is still visible and easy to locate.

Also, you can have a vertical scroll so the user would just have to scroll down if the content is more than the viewport.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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