article posted Jul 27 09 by Jot Kali
The Paper GUI. User Interfaces in the Age of the Trackpad - Put It Under My Pointer, Not On The Edges Of The Screen
The goal of this Paper GUI is to allow complete focus on the task at hand by removing the GUI elements when they are not needed. It would clean up the interface allowing focus on the current document, and allow faster access to tools and menu options by taking advantage of the current position of the cursor.
Trackpad gestures now offer quicker access to GUI functions traditionally served by the edges of the screen. This includes scrolling with two fingers instead of aiming for the scroll bar at the side of a window, and swiping three fingers to change applications. What if this progression was taken all the way, and a combination of new window layers and track pad use allowed access to all application features and toolbars? As a bonus it makes the GUI work perfect with a tablet.
1
1. Menu appears where ever pointer is. Allowing for very fast access.
The GUI Defined by The Edges - Too Much Going On for Fitts Law
Current GUIs are focused on Fitts law, which states that the time it takes to point on something is a combination of its distance to get there and the size of the thing . The Mac OS puts the file menu on top and the dock at the bottom, allowing a user to slam the mouse to the top or bottom of the screen for fastest access to application menu commands, or dock or taskbar to change applications. The theory is by providing major function on the edge of the screen, the size is infinite since you can' miss it. This theory is breaking down as applications become increasingly sophisticated, and are introducing hard to hit icons on the application bar and submenus.
As an example lets look at iWorks Pages, Apple's word processing tool. Since there is too much functionality to fit nicely in the menus, submenus are used. This not only hides functionality but is difficult to get to - it removes the advantage gained by putting the menu at the top. Functionality is then duplicated by putting it on the windows top bar. These can not be too big as they remove screen real estate space, require precision to get too, and simply clutter the screen even when not needed. The separate floating toolbar suffers the same issues.
As an example lets look at iWorks Pages, Apple's word processing tool. Since there is too much functionality to fit nicely in the menus, submenus are used. This not only hides functionality but is difficult to get to - it removes the advantage gained by putting the menu at the top. Functionality is then duplicated by putting it on the windows top bar. These can not be too big as they remove screen real estate space, require precision to get too, and simply clutter the screen even when not needed. The separate floating toolbar suffers the same issues.
1
2
3
1. Submenus are difficult to get to, functionality is hidden
2. Toolbar clutters the screen.
3. Palettes allow for quick access, and would be part of the paper GUI as an option. But would not clutter the screen by default. Can be accessed in the pop up or remain on screen.
Touch Pad Advances - Gestures are Bringing Functionality Where it Belongs - Under My Finger
OS X introduces gestures to the GUI. It lets the user get functionality anywhere by making a gesture. If we apply it to Fitts law it makes size and distance irrelevant. No matter where the users hand is requests can be made.
The Paper GUI would present menu bar and toolbars on top of the document window. And put menus right under the current location of the pointer.
The Paper GUI would present menu bar and toolbars on top of the document window. And put menus right under the current location of the pointer.
1
2
1. App icon in window shows all options of the App. This includes the now vertical menu bar, and toolbar items.
2. Toolbar options.
The user access this screen by clicking the apps icon in the Paper GUI document window. This is the only GUI element always presented to the user. All menu bar items and toolbar items are presented to the user in large format. Shortcut keys can still be used, toolbar items do not have to balance larger size for access versus smaller size for screen efficiency.
Modifier Keys for Quick Access
Another common GUI access trick is to use modifier keys. For screen zoom in OS X a trackpad gesture is combined with holding down the control key to provide functionality. The Paper GUI would use this to quickly access certain items.
Command Key and Up Gesture would to the menu bar, and show the menu. The would appear under the current location of the finger. The menu is then accessed via a drill menu as is used iPhone iPod application, for example when selecting an artist song and backing out of that menu.
Command Key and Up Gesture would to the menu bar, and show the menu. The would appear under the current location of the finger. The menu is then accessed via a drill menu as is used iPhone iPod application, for example when selecting an artist song and backing out of that menu.
1
2
3
1. All option window layer will have help and search bar. Search will present any menu option search for.
2. File menu drilled into. Font size can scale to show all menu options, or scroll.
3. Menu appears right where the pointer currently is. Obliterates Fitts Law.
Command Side Gesture would bring up toolbars for the application.
1
1. All toolbar icons would be shown. Can be categorized into groups. A scrolling list view can also be shown with icons on the left, and description of that icon on the right.
1
1. Font options selected on toolbar, would appear below toolbar window. The options selectable here are much large and easier to select than attempting to cram this into the toolbar.
Trackpad Control - What is Left ?
Lets review these gestures. Scroll bar, move window, the dock, navigate pages, show all windows, menu bar, toolbars, changing apps. What is left ? Moving a window can be done by holding two fingers on the app icon in each window. Pinning a toolbar window would show that toolbar window on the main document to allow quick access.
1
1. Multiple windows. Icon on each window can be moved, minimized, increased with key shortcut.
1
1. Two finger click on App icon in each window to move window.
1
1. Window selection is done through expose. Multiple windows still applies, they just do not have toolbar clutter.
1
1. Change applications as its done now. 4 finger swipe or Control Tab.
Paper GUI - Put My Tools Under My Finger
Not only would the finger focused GUI make for a cleaner gui with more real estate screen space, it would actually aid in helping find functionality in increasingly sophisticated apps. It would alsocontinue to work well for mice. And as a bonus provide a great interface for the mythical tablet revolution.
1
2
3
4
1. Multiple windows can have this simple focused look.
2. Move window by selecting icon with two fingers and drag around window.
3. Menu bar removed by putting it in easier to select layer. Toolbar also removed to reduce clutter
4. scroll bar removed with two finger scroll. This would apply to any list windows in the application as well.
Article by Jot Kali
