1

I am creating a web-based interface to a number of internal web applications. They are all embedded in an iframe for access.

At times I need to allow the iframe to go full screen to give an embedded app as much screen space as possible.

What I want to do is have a "close full screen" button when the iframe is full screen. I can overlay one just fine, and functionally this works. But visually, I am challenged with the fact that the apps all have various layouts - so there is no perfect spot to put the close button for all apps. I want the close button to be ideally in the same spot for consistent user experience.

I should add one big condition: this is on a touch screen terminal, and the user does not use a mouse. Otherwise, I would just have any mouse movement to an edge of the screen expose the close button, just like how a full screen web browser in Windows will expose the top UI if the mouse is moved to the top of the screen.

I can imagine several scenarios on how to do this, but am asking here to see if anyone has found a previous UI design pattern to handle this kind of situation.

Improve this question
1
  • Could you add your Close Full Screen button as a floating element that can be dragged from its default spot to any other part of the screen by the User? That may solve the issue of positioning. The only remaining question would then be whether you reset the button to default position between apps, remember its position for a given app, or remember its position across apps.
    – sintax
    Aug 23, 2019 at 18:50

2 Answers 2

Reset to default
1

you can show a message at the top center (like youtube) press ESC to close the window. It's easy and people are used to it.

Improve this answer
2
  • If the focus goes to the iframe, then the parent frame (who controls full screen) can't see it. In the case of Youtube, it is a single document, so it can easily handle such key interactions.
    – Tim Holt
    Aug 23, 2019 at 8:12
  • You can keep the focus in the parent frame and only pass through allowed gestures / keystrokes. Anyway, ESC is rather not an option when it comes to mobile devices.
    – chrisbergr
    Jan 20, 2020 at 15:14
1

Maybe a pinch gesture could work, rather than a button which will always get in the way of one thing or another.

When the iframe goes full screen, it's like zooming in on it. So it would make sense to pinch it (zoom out) to go back to the minimized version.

The issue with gesture is that they are difficult to discover. If there is an animation when maximizing the iframe, it would help the user understand how they can minimize it. The pinch gesture itself could be shown in a brief overlay.

Improve this answer
2
  • It would make sense as a gesture, but the iframe would see the gesture, not the parent page that is controlling the iframe.
    – Tim Holt
    Aug 23, 2019 at 17:03
  • I'm not a developer, so this might not work in this case. We had a similar need for communication between a main app and an iframe to handle events, and the developer made an API so action done in the iframe will trigger something in the main app. However, it would require you to make changes to iframe contents, which might not be possible?
    – celinelenoble
    Aug 26, 2019 at 15:58

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.