Rotating

Contributors

Rotating allows for manipulation of single elements, applications, and media between portrait and landscape modes, often unlocking a new user interface and access to landscape-specific features.

Typical Appearance

Appearance generally differs. For operating systems like macOS and Windows, rotating the display screen is done through a drop down menu. For software like Preview and word processors, it also varies. Some objects are rotated through a button or an icon. Nevertheless, both styles are indicative enough to exemplify rotation.

Typical Behavior

Rotating is widely known and applied to objects in order to change their orientation or move in a circle-like motion around their center of mass. The flexibility of rotation surely enough differs from object to object. Depending on the software, some objects can rotate by fixed amounts, such as intervals of 90 degrees, and some can precisely rotate from 0 to 360 degrees.

Events

Depending on the OS and software being used, rotating can be performed through multiple ways, such as buttons and swiping. Therefore, the events overlap with other events that pertain to different user interface components.

When rotating is done through buttons, a click event occurs. Other events include click and drag , which usually allows the user to rotate an object however they would like as done with word processing applications and Mac's 'Grapher' application. Though there are multiple ways to perform rotating, ultimately, a rotate event occurs and indicates that an object was rotated.

On iOS, rotation and accelerometer movement is measured by: x, y, z, pitch, roll, and yaw. These can be defined as follows:

    Axis
  • x, y, z: Rotations about the x, y, and z axis.
  • pitch: Face up or face down rotating about an axis running from each side of the device.
  • roll: Rotation about an axis from the top of the phone to the bottom side.
  • yaw: Rotation from either side of the device to the top or bottom.

State Diagram

The following diagram shows the three states an object undergoes during rotation. This is only applicable to OSes and software that supports rotation for 2D and/or 3D objects.

Rotating Chart

Variants

Rotation is used on multiple applications across many different operating systems. Sometimes, it is not very obvious that an element can be manipulated by rotation. Depending on the category of device, the intended rotation method varies. For example, laptop computers often use the trackpad to rotate elements, while mobile phones use an accelerometer, allowing for the entire device to be rotated to manipulate an element.
  • Photos can often be rotated and manipulated by using the correct rotation method depending on the device. On iOS, photos can be rotated by rotating the entire device, or simple pinching the screen with two fingers to move the photo using Multitouch. On macOS, photos can be rotated either through buttons or through the menu bar as done through 'Preview'.
  • Single Applications often change their entire UI when the device is rotated. For example, the Calculator application on iOS changes from a simple calculator to a full scientific calculator when rotated into landscape mode. In contrast to iOS, macOS's UI and its applications does not change when the display is rotated. Only the orientation is changed. Because macOS devices have a much larger screen than iOS devices, there's no need to change the UI.

Priority Metrics

Rotation is an element that is being used more frequently in operating systems every year. Though rotation is somewhat intuitive and easy to learn, learnability is the top priority metric because it is important to know when rotating can be applied. The gesture of rotating itself is easy to learn, but it is somewhat difficult to learn which elements or user interfaces can be rotated. In addition, since this is a somewhat new user interface element, many new users are unaware of this feature in various applications. This makes learnability very important because new users are encouraged to quickly learn how to use the feature and memorize elements/applications that support rotation.

The second most important metric would have to be memorability. Most UIs have identical structures when accessing the functionality of rotating, like through buttons and drop down menus. The reason being for structured continuity across operating systems is that it helps the user become familiarized with the OS being used, and hopefully, be a satisfying experience for them. Introducing a new way of rotation just adds more difficulty for the user getting accustomed to the OS.

It is generally hard to make an error when rotating. The only error that can happen is if a user attempts to interact with an element/interface that cannot be interacted with. Therefore, elements that are known to be rotatable, must support rotation, which makes errors another important metric. Since rotation is a somewhat obscure and newer feature in many user interfaces, speed of performance (efficiency) is generally quite important as to whether or not the user continues to use the feature.

Key Characteristics

Because the functionality of rotating is dependent on other components like buttons on desktop platforms, its key characteristics intersect with those other components.

This is often different on mobile platforms however, as phones and tablets tend to have accelerometers. Because of this, many rotation features depend on the accelerometer rather than a different user interface component like a button.

Feedback and Communication

An important interaction design principle that encloses rotating, is the concept of feedback and communication. Whenever a rotation occurs:

  1. through buttons, a continuous conversation between the user and the UI must be present. For macOS, an image in 'Preview' is not rotated at lightning speed. When the button is clicked, an animation occurs to clearly indicate to the user that the image is being rotated and exactly how.
  2. through clicking and dragging, the object being rotated must rotate in the direction the user points to on the trackpad. Doing so, lets the user know that they are in control of the computer.
  3. on mobile operating systems, through the accelerometer detecting the new orientation of the device and responding properly to which direction the user rotated the device.

Consistency

The buttons used and techniques used for rotating objects, need to be familiar to the user. This way, the user can easily work their way around the functionality of rotating because of being familiar with it beforehand. The rotation of components on different operating systems and applications do not have to look the same. Rather, they mustn't force their users to learn new ways of rotations; memorability is an important aspect of rotations.

User Interface Changes

Many times applications will not explicitly specify if the application supports landscape mode. Occasionally, as is the case with many iOS games, applications will only support a landscape mode and not portrait. The biggest indication as to whether an application supports both orientations is a change in User Interface.

An example of this change in UI is the Messages application in iOS 10. Messages changes from the standard conversation view in portrait mode to a handwritten message view in landscape mode.

In landscape mode, the landscape keyboard can also be accessed by pressing the Keyboard button on the bottom-right toolbar.

Messages in Portrait Mode
Messages in Landscape Mode

Component in Action

macOS

Here is a video on rotating the display:

iOS

Compnent in action - iOS

Platform-Specific Instances

Rotation is an aspect that varies quite a bit depending on the class of the device. Mobile devices, such as an iOS device, have a lot more functionality when it comes to rotation because of the accelerometer. This component allows many different applications to interact with the current orientation of the device. Because of this added component, there are a lot more things to consider when looking at rotation in iOS devices.

For non-mobile based operating systems, specifically macOS, rotation is done differently. Users with mobile devices can rotate the orientation of their UI by physically twisting and turning their hand. macOS does not support this feature. So, direct manipulation is a lot more dominant in iOS. Still, rotation is a primary component used in macOS.

macOS

Rotating the display is done through a drop down menu, which is accessed through 'System Preferences' and under 'Displays'. As previously mentioned, there are predominantly two different kinds of rotations: free motion and the other being done in intervals. In this case, rotations are done in 90 degree intervals. Also, rotating the display changes sense of direction from the cursor. For instance, flipping the display upside down flips the cursor's directions.

macOS Display

A lot of rotations can be done through the use of the trackpad. One instance of this, is through the use of Mac's 'Grapher' application. The user can look at either 2D or 3D mathematical models, and when it comes to 3D ones, the user can freely rotate the graph. This is done by clicking and dragging across the trackpad.

Grapher Application

Another form of rotating can be done by clicking buttons that are indicative of doing so. Image applications like 'Preview' support this feature. This can also be done by accessing the 'Tools' tab which brings up a drop down menu. However, free motion rotation is not supported; only 90 degree rotation intervals are.

Button Rotation

iOS

The accelerometer is used to determine whether to display the user interface as portrait or landscape mode. Applications often have a user interface specifically for landscape mode, or at least have relevant elements change to recognize the user is in landscape mode. This can be disabled by navigating to Control Center and pressing the Orientation Lock icon. This will disable all use of the accelerometer, thus disabling all rotation function in iOS.

Orientation Lock

In iOS, rather than using a trackpad to manipulate elements, iOS devices can be physically rotated to switch between orientations. Single elements in some applications, such as photos, can be rotated either by rotating the device or using a pinch with two fingers.

Responsive image

In iOS 9, Apple added a Parallax Effect feature to the iOS homescreen and lockscreen. This allows the user's wallpaper to be manipulated by the orientation of their device to give a 3-dimensional effect to the wallpaper. This feature can be disabled by navigating to Settings > General > Accessibility > Reduce Motion.

iOS applications can have separate user interfaces for portrait and landscape modes. An example of this is iOS' native Calculator application. Calculator changes from a simple calculator in portrait mode to a full-featured scientific calculator when the device is rotated.

Calculator Portrait Calculator Landscape

However, not all iOS applications feature UI changes in landscape mode. For example, many camera applications recognize orientation changes and automatically prepare the camera for taking a landscape photo. Though this has minimal user interface changes, rotation is still being used in this instance.

Landscape Video

Many applications are intended for use only in portrait mode, and have no support for landscape viewing.

Credits & References

Mac OSX Lion | Easter Egg | Screen Rotation. Dir. David Bell. Youtube. N.p., 7 Apr. 2012. Web. 15 Oct. 2016.

Apple Event Handling Guide for iOS

macOS Human Interface Guidelines