Designing For Device Orientation, From Portrait To Landscape.
•
7 likes•6,313 views
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.
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (20)
Similar to Designing For Device Orientation, From Portrait To Landscape.
Similar to Designing For Device Orientation, From Portrait To Landscape. (20)
Recently uploaded
Recently uploaded (20)
Designing For Device Orientation, From Portrait To Landscape.
- 1. Designing For Device Orientation, From Portrait To Landscape.
- 2. www.any.do
- 3. www.any.do
- 5. Bank - Financial Application
- 8. Fluid
- 9. Fluid
- 10. Extended
- 11. Complementary
- 12. Continuous
- 13. Continuous
- 14. Device Orientation Design THE CHALLENGE
- 15. Affordance An affordance is a quality of an object, or an environment, which allows an individual to perform an action
- 17. Step 1 Launch the calculator app by touching its icon on the touch screen.
- 18. Step 2 Hold the iPhone vertically to perform basic calculator tasks.
- 19. Step 3 Rotate the iPhone horizontally, or into landscape mode, to make the calculator automatically transform into a scientific calculator. Enjoy.
- 20. Device Orientation Design VISUAL CLUES
- 21. The Title Bar
- 22. Sharing Apple Action Button The Share Icon www.shareicons.com
- 23. www.xgmedia.com/device-orientation-icon/ Device Orientation Icon
- 26. The Drawer
- 27. Thank you Avi Itzkovitch @xgmedia www.XGmedia.com
Editor's Notes
- 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.