How a touch UI should be and work


I often hear the brahs on the Vergecast saying that tablets and laptops/desktops should be different; that we can’t have the productivity of a mouse-centric laptop and the touch usability of a tablet at the same time. Now if all you know is Microsoft, you might think this is the truth, but it seems to me to be an extremely simple problem to solve, and yet no one seems to be doing a good job of it. Below is how I think a touch UI should be and work. If you’re using a mouse, it’s not much different than using the Windows desktop or any other mouse-centric UI in terms of the paradigms of how you navigate, and at the same time it’s fully touch optimized. And in addition to being being both mouse and touch optimized with what I believe to be truly no compromise (Other than perhaps using larger elements for touchability), I believe I’ve added enough new features/UI improvements to make it productively superior to all mouse-centric UIs out there, let alone touch-centric UIs.

I have a long document outlining the UI in detail, which I shall link to at the bottom of this post; but since that will be too long for most, I lay before you this sloppy rundown:

App Drawer and Taskbar

Here’s the app drawer and taskbar, which I recently redesigned, and which is somewhat inconsistent from the rest of the images because, by fruit of the dastardly disease of laziness, I was unable to take the time to edit them all to match (Alas, you’ll still get the message; in that I trust):





Some basics:

-Square icons = applications.

-Circle icons = windows.

-Green bordered application icons = running applications with no open windows.

-Blue bordered application icons = running applications with open windows.

-Red bordered window icons = minimized windows.

-Purple bordered window icons = obfuscated windows.

-Black badges on window icons = instance number of windows of the same application.

-Black badges on application icons = number of windows open.

-Red badges on any icons = number of notifications.

-Square icons with window icons in them = windowspaces/workspaces/spaces (I think windowspaces is the most descriptive).

-Circle icons with application icons in them = folders.

Auto-Sizing Windows and Window Gestures

Now here’s some open windows:



-Windows automatically move and resize.

-Windows are minimized or closed by respectively two finger down or up-flicking on them.

-Windows may be two finger left or right-flicked into respectively left or right windowspaces.

-Windows may be moved around the windowspace by two finger dragging on them (Right click and drag for mouse).

Overlapping Windows

Windows can also be free’d to overlap and such, as a typical window would behave. One merely two finger double taps or double right clicks:



Windowspace Icon Menu

Here’s the windowspace icon menu which may be opened by single finger up-swiping or right clicking on a windowspace icon:



Windows represented in the windowspace icon menu may be closed by single finger left or right swiping on their icons.

Gesture to Move Between Windowspaces

Here’s the three finger swipe gesture which navigates the user between left and right windowspaces (Single finger swiping from the left or right edge also performs this function):



Pop-up Windows

Here’s the pop-up window feature, which allows the user to view a scaled down window of one of their open and likely out of view windows atop their current windowspace. This is accessed by single finger up-swiping or right clicking on a windowspace icon with only one window within it, or by single finger up-swiping or right clicking on a window icon within a windowspace icon menu:



Window Layering Menu

Here’s the window layering menu:



Windowed Desktops

Here’s the windowed desktop feature, which is essentially a system wide tabbing feature, but which is superior to mere mortal tabbing, as each windowed desktop may function as a full desktop:





Users can drag and drop windows atop each other to create or add to windowed desktops, or they can open the app drawer from within the windowed desktops to add to them.

Launching Templates

Here’s the launching template feature, which allows the user to save the current desktop setup of open windows and applications, and launch it on startup or on the fly:



Saved desktops will have icons in the app drawer, and in addition to saving desktops, the user may save individual windowspaces and windowed desktops, as evidenced by icons representing them in the image of the app drawer.


Here’s the notification drop-down; nothing too innovative here:





System Search

Here’s the system and web search accessed from the app drawer:



Mouse-Over Buttons

Here’s the mouse-over buttons which appear by default when a mouse is connected, as well as an example of the notification bar fused with the taskbar, and also an example of one of the windowspace icon settings which expands the icons to allow individual selecting of windows without having to open the windowspace icon menu:



The user may optionally turn the mouse-over buttons off and add a top bar to windows with the minimize, close, and maximize options present on it, as is typical on current window based UIs.

Multi-Monitor Windowspace Icon Menu

Here’s the multi-monitor menu from the the multi-monitor setting (One of multiple) which consolidates all open windows on a single taskbar:



This menu allows the user to drag and drop windows into specific monitors from the taskbar, which is useful for touch, as you can’t just drag your fingers into the other monitors like a mouse pointer, and which is also useful for placing windows in specific monitors in other windowspaces. And of course, the user may also flick windows into neighboring monitors.

General Application Structure

Here’s a general application structure, using a file explorer as an example:



The top bar is the navigation bar (It contains a system back button, user back and forward buttons, the root indexes of the application, and the search and voice search buttons), the middle bar is the options bar, and the bottom bar is the favorites bar.

Phone Example

And finally, here’s an example of the UI running on a phone, as I believe it is optimized to run on everything from phones to tablets to laptops to desktops:




And there you have it. If you’d like to see more details, of which there are many, I direct you to the Google Doc linked here: Detailed Document. What do you think, Vergelings?