This document discusses design considerations for applications based on device orientation. It identifies six categories of orientation design: fluid, extended, complementary, continuous, and continuous. It explains that affordances allow users to perform actions. An example is given of the iPhone calculator app, which transforms from a basic to scientific calculator when rotated from portrait to landscape orientation. Visual cues that indicate orientation and available actions are discussed, such as title bars, share icons, toggle switches, and drawers.
Designing for device orientation provides an additional display (from portrait to landscape or vice versa) with a twist of a hand without pressing any buttons.
Device Orientation provides a way to extend functionality. Two display screens in one device.
Daily weather vs. weekly weather
Financial application. Data vs. Visual Graphs
Smart TV remote. With the added feature of a program guide
To help UX professionals and developers verbalize designing for device orientation I have categorized four main patterns for device orientation design:
Skype mobile interface. The icons change position when the screen moves from portrait to landscape.
Pocket mobile interface. Same layout, different width.
IMDb Movies & TV for the iPad. The interface adjusts to the screen size, adding or subtracting layout components according to the allocated screen dimension for each orientation.
Changing orientation provides an auxiliary screen with supplementary relevant information
Remote control for switching channels on a smart TV. Rotating the device to landscape changes the interface to a full program guide that also provides a way to control viewing channels and browsing and recording future programs.
The landscape view provides an immersive experience with a full screen video player and playback controls
Usersare struggling to find the iPhone Scientific Calculator.
How do we create affordance for device orientation?
Affixing the title bar to the top of the default position in any orientation .
Much like the universal icon for sharing or the Apple action button recognized for sharing.
I propose using a standard icon as a visual representation for device orientation. You can download this icon here and use it freely.
If accepted, the device orientation icon could provide visual clue giving affordance for using device orientation whenever it appears.
The idea behind this concept is to create a drawer-like control that users can tap or swipe in order to see the secondary view.