resizing
- Contributors
A critical feature of GUI-based operating systems is the ability to resize elements.
Typical Appearance
A resize event is characterized by a change in an element's dimensions.
In contrast with zoom, which is a related feature, resize changes the dimensional properties (length and width) of the element itself, rather than the scope at which the element is displayed on a screen. Examples of commonly resized elements include windows, icons, images, and text. However, for the purposes of evaluating typical appearances and behavior, we will consider the resize behavior of windows.
The arrow mouse cursor and resize buttons are the most common interface elements for changing the dimensions of elements.
Arrow Mouse Cursor
Diagonal
Horizontal
Vertical
Resize Button
Typical Behavior
There are two categories of window resize behavior: manual and automatic.
Manual
The dimensions of a window can be manually resized by a drag and drop operation using the arrow resize cursor. Entering manual resize mode is visually represented by a change in the mouse cursor icon's apprearance from a pointer to an arrow. The orientation of the arrow, indicates the direction of resize, whether horizontal, veritical or diagonal.Once in the resize stage, the perimeter of the window can be manipulated.
Events
hover
mouse down
mouse release
The mouse event of hover
ing over the perimeter of a window changes the cursor to an arrow which indicates the allowed direction of resize. When the cursor is an arrow, the user is in the resize
state.
A mouse down event, once in the resize
state, begins manual resize. While in mouse down
, changes in the position of the mouse will manipulate the dimension of the window. The dimension change is visually rendered in real time.
Upon arriving at the desired dimension in mouse down
, mouse release
will set the window dimension and exit the resize
state.
Automatic
Automatic resize, is independent of a user-defined end dimension. Resize to full screen causes the window to fill the entire screen. Typically this is trigged by clicking a button, which toggles from full screen to non-full screen.
Events
hover
click
Hover
ing over a window button menu reveals symbols that indicate the different options for automatic resize
On click
the window is resized to fit the entire window.
State Diagram
Component in Action
The following gifs represent only the resize functions within the Mac OSX platform that are common across different platforms (with minor stylistic differences). A closer look of resize in the OSX platform is explored in the "Platform-Specific Instances" section below.
Variants
The interface behaviors of resize can vary, depending on the element that is being resized
Priority Metrics
Ben Shneiderman, in his book Designing the User Interace defines learnability, efficiency, errors, memorability, and satisfaction, as metrics by which the usability of a system can be measured. Resize is a common interface component, and in a perfect system, all five metrics are important. Nevertheless, if the resize function as a user interface component is evaluated against these metrics, learnability, efficiency, and memorability rise as the most important, whereas errors and satisfaction are less important.
Learnability is an extremely important metric for effective resize interaction design. Resize is a very utilitarian interaction that is essential to GUI-based systems. Thus, resize needs to have a short learning curve, with interface elements and symbols that are largely self-explanatory. For example, users who are manually resizing windows for the first time should be able to use a simple guess and check heuristic to determine the position at which the mouse should be to achieve the intended resize direction.
Efficiency is a key metric for effective resize interaction design. Feedback is integral for direct manipulation resize, and any delay in recieving the visual feedback of element resize will affect the user's productivity.
Because resize is commonly implemented as direct manipulation, errors rank lower in the priority metrics. By nature, direct manipulation can be easily reversed, giving the user confidence that a mistake can be easily fixed. Therefore, errors are less of a concern in manual resize, since errors in resize do not carry large consequences.
Because learnability is such a high priority, memorability is also an important usability metric. The symbols and colors of resize interface elements should allow for the user to easily identify the functionality of these elements, from prior knowledge of interfacing with the element.
Because resize is utilitarian in nature, satisfaction is lower on the priority list. However, it is important to note that as a subset of direct manipulation, good resize user interfaces are integral to the satisfaction of the user. For example, if the feedback is delayed in manual resize of a window, the user will quickly become frustrated by the disconnect between the dimension of the window as displayed on the screen, and the user's mental model of how large or small the window should actually be.
Key Characteristics
Direct Manipulation Interaction Style
Direct manipulation is an interaction style in which the changes that a user makes to an object are incrementable, reversible, and immediately represented on the screen. Manual resize is a classic example of direct manipulation. When a user resizes an element's dimensions manually, the impact of the change is visible immediately and continually on the user's screen. Thus, key characteristics of effective manual resize will be discussed in the context its classification as a direct manipulation implementation. Well implemented direct manipulation allows the user to achieve mastery of the interface, competence in performing tasks, and enjoyment in using the interface. The following principles and guidelines are relevant for informing best practices for resize interfaces.
- Principle of Feedback
- Principle of Transparency
- Mental Model
Feedback is a defining interaction design principle of effective direct manipulation. Feedback in manual resize is characterized by a change in element's size on the screen in real time, as the user is resizing. Feedback time must be sufficiently fast, as any latency in the response will cause a delay in the user action - visual response feedback loop.
In effective direct manipulation, the interaction tool itself becomes transparent to the user. As a direct manipulation interface, resize "tools" disappear as the user interaction with the element being resized through the mouse cursor is understood as an extension of a user's tactile functions, emphasizing the "direct"-ness of direct manipulation.
Overall, effective interaction design must allow for the user's mental model derived from the system image to correspond with the designer's mental model. Assisting this process in manual resize is the parallels that digital direct manipulation has with how users interact with the physical world. Physically resizing a moldable substance, such as clay or elastic is mirrored in the "grasping" mouse down
and "stretching" resize state
of a window or element on a screen.
Platform Specific Instances
macOS Human Interface Guidelines
In this section, the resize component implmentation in the Mac OSX platform will be specifically evaulated. Specific examples of resize implementations will be provided, as well as a discussion of how Apple's interaction design principles have influenced these specific resize implmentations. "macOS Human Interface Guidelines" is a document that provides insight into the theories, principles, and guidelines that Apple Developers use to design the macOS interface. One guideline that it states specifically for resize, is that standard document windows should have transient resize controls--controls that disappear when not needed. The interface guidelines also considers the principle of direct manipulation as a way of affirming the user's mental model of a task, because it can feel more natural than what they define as "explicit tasks."
Windows 10 Resizing Instances and Guidelines
This section will evaluate the implementation of the resize component in the Windows 10 platform. In addition to providing specific examples of resizing, this section will discuss the Windows Guidelines and whether they are accurately reflected in the provided examples. It is important to note that the Windows Guidelines is a huge collection of documentation, and because this only a handful apply directly to resizing. Some of the specific sections of the Windows Guidelines that will be referenced are: Windows Window Management, Windows Dialogue Boxes, and Windows Common Dialogues. Some of the main concepts that can be pulled from these guideline sections are:
-
Minimum effective window resolution is 800x600 pixels.
-
Optimal resolution for an effective resizable window is 1024x768 pixels.
-
Resizable windows no longer require the resize glyph ( ) in the lower right corner of the window.
-
The glyph requires a status bar in order to be displayed.
-
Resizable window boarders and resize pointers are more effective at conveying a window is resizable than the glyph.
-
-
All windows should have a minimize button ( ) to reduce a window to a taskbar button.
-
All windows should have a maximize/restore down button, unless the window isn’t resizable.
-
The maximize button ( ) should make the window full screen, or maximum needed size.
-
The restore ( ) down button should restore the window to its previous size.
-
-
Use resizable windows whenever possible to avoid scroll bars and truncated data.
-
A minimum window size should be set if the window will no longer be usable at certain dimensions.
Building on these priciples, here are some specific examples of resizing in Windows 10 with a breif descripton and reflection on their adherence to the Windows Guidelines.
Credits & References
Resize Arrow Diagonal ImageResize Arrow Vertical Image
Resize Arrow Horizontal Image
Mouse Cursor Image
Mozilla Firefox Documentation
JQuery Documentation
Kendo UI Documentation
macOS Human Interface Guidelines
Windows Guidelines
Windows Window Management Guidelines
Windows Dialogue Boxes Guidelines
Windows Common Dialogues Guidelines