How a touch UI should be and work

Intro

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):

App_drawer_redesign_1_medium

via lh5.googleusercontent.com

App_drawer_redesign_2_medium

via lh5.googleusercontent.com

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:

Minimizing_applications_-_minimizing_gesture_medium

via lh5.googleusercontent.com

-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:

Freeing_an_application_-_freeing_result_medium

via lh6.googleusercontent.com


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:

Closing_applications_-_app_close_gesture_from_icon_menu_medium

via lh4.googleusercontent.com

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):

Moving_between_windowspaces_-_three_finger_swipe_medium

via lh5.googleusercontent.com


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:

Pop-up_applications_-_windowspace_icon_pop-up_medium

via lh3.googleusercontent.com


Window Layering Menu

Here’s the window layering menu:

Window_layers_medium

via lh3.googleusercontent.com


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:

Windowed_desktops_-_windowed_desktop_medium

via lh3.googleusercontent.com

Windowed_desktops_-_windowed_desktop_application_bars_medium

via lh6.googleusercontent.com

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:

Launching_templates_-_menu_medium

via lh6.googleusercontent.com

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.

Notifications

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

The_notification_pull-down_-_notification_expanded_medium

via lh6.googleusercontent.com

The_notification_pull-down_-_notification_widgets_menu_medium

via lh6.googleusercontent.com


System Search

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

Search_and_voice_control_-_search_pane_medium

via lh3.googleusercontent.com

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:

Multi-monitors_-_mouse-over_buttons_medium

via lh5.googleusercontent.com

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:

Multi-monitors_-_drag_and_drop_menu_medium

via lh5.googleusercontent.com

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:

General_and_encouraged_application_structure_-_1_medium

via lh4.googleusercontent.com

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:

Phone_example_medium

via lh6.googleusercontent.com

Outro

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?