Window Snapping**

Picture

Windows NT4.0 Desktop, with the Nullsoft Winamp window snapped to the top right corner of the screen

Context

Modern operating systems are graphical user interface (GUI) oriented and hence use windows that contain applications, which can be dynamically dragged around the desktop screen.

* * *

Problem Statement

In a graphical user interface such as MS Windows or Mac OS, the user has the ability to organise elements (such as windows) on the screen. Some programs have windows that either cannot be maximised to fill the entire screen or are more efficient if run in windows that are not full-screened. In this case, the user wishes to layout the windows on their desktop to maximise the screen real estate, and to make the desktop layout aesthetically pleasing. Using the mouse alone, it is difficult to accurately position the windows such that they are exactly in a certain position at the screen borders.

Description

Users often desire to have very neatly arranged desktops, even though this may serve little practical purpose other than to maximise the available real estate. This desire comes from the intrinsic gestalt motivation for perfect layout and symmetry - if an object is placed to the top right of the screen, it is visually annoying to have it not fit exactly into the top right corner (i.e. when there is a small gap of a few pixels and the mouse cannot be moved accurately enough to place it in the corner). The ability to place windows anywhere on the screen is thus a double-edged sword - users want the flexibility to put the window anywhere, but at the same time, there are only a few main locations that most users place the smaller windows, and these locations are usually along the border of the screen. This is especially true since almost all windows are rectangular in shape, and can neatly and perfectly fit into corners (which is visually pleasing and maximises screen space). Also, intricate mouse control is difficult and precise positioning without aid may be very hard to accomplish. applications that use this feature are Nullsoft Winamp (that allow the user to place the window in any corner or any screen edge); Macromedia Dreamweaver 4 (where the floating panel windows can be placed on either the screen edges or corners, or along the border of the main program window); and Adobe Photoshop (where the floating panels can be 'window snapped').

Hence the ingredients of successful Window Snapping are:

that the application window is rectangular
that the window, once dragged, can be dropped in any of the following locations: along any screen border; in any of the 4 corners of the screen; and along the boundary of other program windows.
that the snapping not occur unless the user is within reasonable proximity of the corner or border, since snapping too early (when the window is still far away from any border or corner) would disorient and annoy the user.

Solution

Hence, the solution is to have windows that can be dragged and dropped anywhere around the screen using the normal affordances of that system, but when the drop location is within a certain value (a low pixel distance) of the corner of the screen, the border of the screen, or any program boundary, the window is automatically 'snapped' to that location.

Diagram

* * *

References

Always On Top, Mouse Cursors, Resizing windows, Moving windows, Window Shade

Always On Top

the user sometimes desires for a certain window to always remain on top, especially in the case of multimedia programs such as video players so that they can multitask on a background application while the movie is playing

Mouse Cursors

Users need feedback as to what affordances are available when the mouse is brought over a specific target area. If additional actions can be done by events such as click-hold or alt/option-click, then the mouse state is the only visual clue that the user has for this problem.

Hence, since the mouse cursor is the only real visual clue that informs the user that new affordances are available by clicking or dragging, it should change iconic state when a different mouse event is triggered (depending on whether or not a different action can be done based on that new event, e.g. the mouse changes to a 4-way arrow if the window can be resized, and then holds that while it is being clicked & dragged)

Resizing windows

In a GUI, users wish to maximise or minimise, or even resize the window to a custom size that will allow them to multi-task efficiently between this and other applications, allowing for the size to 'snap' to neighbouring applications or the screen borders.

Hence, make it possible for the user to change the size of window and when the edge is within a certain small distance of a neighbouring application, have the size 'snap' to the other program's edge.

Moving windows

In a GUI, users wish to reposition elements on the screen to a layout that they are more comfortable with or feel is more efficient for their work processes.

Hence, make it possible for any part of the interface involving floating or docked panels to be customised in terms of the layout on screen, and give the application a 'memory' for that layout.

Window Shade

The screen interface in a GUI tends to get very cluttered, and users may not wish to minimise the excess windows (because this means that they will no longer be able to access the functions of that window unless the maximise it again).

Hence, provide a way for the user to shrink the size of the window such that it occupies the minimal amount of screen real estate while still displaying the pertinent functions to that application.