UI controls during full screen reading

Question

Part of the app is to read a longer text, so users have the choice to view it in a full-screen reading mode. Mainly targeted device is smartphone, not tablet.

I have two important controls here, exiting this mode in top right and adjusting it (choosing from 3 contrast presets) in the bottom right.

^{download bmml source – Wireframes created with Balsamiq Mockups}

It is probably a bad idea to have them be constantly visible, so I was having these thoughts:

• Make them disappear after ~5 seconds and reappear when user touches the screen
• Have no (x) at all and make it closable by swipe gesture (which adds risk of accidental closing)
• Is the contrast adjustment button on the screen a good or bad thing? It could also be in the settings as one would probably only adjust it in the beginning. But there it's harder to reach and test ('Do I like the setting I chose or not?') and users might even miss it completely (which could be countered with onboarding again)

So the question is basically how visible and accessible/reachable should these controls be?

Answer 1

I created a script writing app on tablet and the point was no distractions AT ALL!
I made a menu that appeared when the user held his finger down for 3 seconds with a little animation so the user knew something was going on, this opened up a little menu.

Like on a wacom when you hold down for too long. This solution would help remove the annoying menu popping up just on scroll. This solution would allow you to have more controls and take up more of the screen.

Answer 2

To me the problem is not so much the presence of the buttons as the position, one at each end of the screen, what means:

• two more possibilities to make mistakes clicking the wrong point.
• If both refer to options regarding what is being visualized, why not unify them?

I don't know if it's possible in your app, but click and click & hold could give different options using the same button:

• Click: change the contrast or exit
• Click and hold: button toggle

Answer 3

Honestly, I would always leave visible the icons to the users considering the importance of ensuring them to have control of what they are doing. In this way, you can increase the trust to the app itself. I would also consider the context of use of this app and the real end user of it.

Anyway, I like the option to swipe off to close the text window that recalls a common function used in other apps.

To adjust brightness level using the click and hold probably is not the best solution on a small device like smartphones, think about the users that have big fingers, but could work on a tablet.

Probably, I would work more on the icons shown for each press, eg:

dark light = Sun without rays or Moon

medium light = Sun with shortening rays or a few rays

high light = Sun with long rays or more rays

Or change it with the light bulb following the same concept.

To close the app, I would design a the centre bottom a thin arrow that indicates the physical Home button that once pressed will reduce the window of the text (showing in the background the menu of the app or the previous screen used, in this way the user understand that s/he is not closing the app but only the text window) and let the user swipe it off.

I thought about using the physical volume up and down buttons, but I'm not pretty sure it would work. You could try to let them be activated after pressing one time the sun/bulb icon on the screen, adjust with the volume buttons and then re-press the bulb light to confirming and close the set up (keep in mind to use an icon that helps to understand the status of the features. Close button with the X or with the one suggested before.

I hope it could help or give you some idea to sort out your problem! Good luck!