Minimize to Maximize — a Smooth UI Transition
Introduction to a new, more intuitive UI transition concept
If you just want to see the code you can click here.
It has been over 23 years since Windows 95 was introduced — more specifically I would like to focus on these two buttons marked in red: minimize and maximize which up until today were an integral part of the daily browsing and shuffling of folders within the Windows operating system used by the majority of computer users worldwide.
Through Windows XP, Windows 7 and even the latest Windows 10 — many had changed but as we can see minimize & maximize buttons had pretty much stayed the same throughout the ages:
1995–2001— UI Relics of the past
2009–2018 — A More Modern approach to UI
Historical UI Error — Time to Fix it
I would like to argue that historically a UI error was made with icons selected for window actions in Windows — I would like to bring a new “hide” icon that will hide the window — And for minimizing/maximizing a certain window I introduce a single button that shifts between phases. This concept should replace the “minimize”, “maximize” & “restore down” buttons currently used in Windows OS.
I have wondered for a while how come such integral UI elements of our every day life had experienced so little innovation and stayed pretty much the same for over 23 years… After experimenting with implementing a few micro-interactions, weather they were replications of other developers or my own creations, I came up with an idea to try and innovate these two elements and merge them to —
A New — Single, Living UI Element
I begin by gazing at the two elements independently and imagined them as two phases of a house. The one, resembles debrees & wreckage — a “ground zero” that once stood to be a marvelous erect house. The later, a perfectly steady house with a floor, roof and 90 degreed steady beams to support the roof. (Henceforth phase 1 & 2)
As I found this common ground of both elements I ventured further to try various ways of transitioning between the phases. Assuming each beam, roof & floor elements were all the same length thus rendering the house a perfect square I found that the most elegant way to transition from phase 1 to 2 is the following —
Time to Build our Dream House!
Lifting the roof directly above to its designated location while sumultanously lifitng the two side beams to exactly half the distance between the roof and the floor which results in a moment of which the element seems like the well known “hamburger” icon.
I than rotate each beam from the center towars their designated place to create the final square form, and with a little inflation of the roof element to resemble the original Maximize Button — which is quite optional as we see that in the latestet Windows OS versions the element was used with the same width beams.
And Toggling Back from Phase 2 to 1 is the same transition but the opposite way around
For your convinice you can have a look at the code in github.
If you think this element is cool or would like to see me implement other ideas feel free to clap, comment and let me know ;)
