Yes / No / Cancel - Another Look
Recently, in a company where I work, they developed a software with an interface “sharpened” under touch screens. We did the UI from scratch and, therefore, were able to give free rein to the imagination, without limiting ourselves to the existing approaches, code base and user habits. Logically, our program should have a standard window of settings from the “Yes / No / Cancel” series, but for the task, I wanted to make it beautiful, convenient and understandable.
Firstly, we immediately abandoned the windows from the Yes / Ok series, since the settings are either applied or canceled - there is no third option. Now that there are two buttons, it has become possible to spread them to different corners of the screen, making them conceptually close to the soft keys of mobile phones. After that, it became possible to press them close to the edges of the window, making it easier for your fingers to hit.
Secondly, they decided not to make the window at all, but to display the settings frame in full screen, just like the program itself. Due to this, the maximum screen area is allocated for useful information and controls.
Thirdly, so that a person does not forget where he is located, the effects of transitions between frames were made:
The main frame "gives" the place of the settings by moving to the left.
')
The “Cancel” button shifts the screen in the opposite direction, as if returning to its original place.
The “Apply” button, on the contrary, shifts the screen further to the left. At the same time, a person sees the same frame, but with new data.
The buttons themselves are located on the edge of the screen behind which the next frame is “located”.
Design project, graphics and a bit xaml-i - fo2rist , coding and lots and lots of xaml-i - Eugene "enemy" Kovalenok.
PS If the opportunity arises, I will post a video for the release and tell you about other interesting solutions.
Firstly, we immediately abandoned the windows from the Yes / Ok series, since the settings are either applied or canceled - there is no third option. Now that there are two buttons, it has become possible to spread them to different corners of the screen, making them conceptually close to the soft keys of mobile phones. After that, it became possible to press them close to the edges of the window, making it easier for your fingers to hit.
Secondly, they decided not to make the window at all, but to display the settings frame in full screen, just like the program itself. Due to this, the maximum screen area is allocated for useful information and controls.
Thirdly, so that a person does not forget where he is located, the effects of transitions between frames were made:
 |
| Main window: menu. |
The main frame "gives" the place of the settings by moving to the left.
 |
| Display settings - left shift |
')
The “Cancel” button shifts the screen in the opposite direction, as if returning to its original place.
The “Apply” button, on the contrary, shifts the screen further to the left. At the same time, a person sees the same frame, but with new data.
 |
| Saving settings |
 |
| Confirmation of settings - further left |
The buttons themselves are located on the edge of the screen behind which the next frame is “located”.
Design project, graphics and a bit xaml-i - fo2rist , coding and lots and lots of xaml-i - Eugene "enemy" Kovalenok.
PS If the opportunity arises, I will post a video for the release and tell you about other interesting solutions.
Source: https://habr.com/ru/post/96274/
All Articles