Designing ForDevice Orientation,From Portrait To Landscape.
www.any.do
www.any.do
Weather Application
Bank - Financial Application
Remote Control
Device Orientation DesignCATEGORIES
Fluid
Fluid
Extended
Complementary
Continuous
Continuous
Device Orientation DesignTHE CHALLENGE
AffordanceAn affordance is a quality of an object, or an environment,which allows an individual to perform an action
http://techtips.salon.com/change-iphone-calculator-scientific-calculator-310.html
Step 1Launch the calculator app bytouching its icon on the touchscreen.
Step 2Hold the iPhone vertically toperform basic calculatortasks.
Step 3Rotate the iPhone horizontally, or into landscapemode, to make the calculator automaticallytransform into a scientif...
Device Orientation DesignVISUAL CLUES
The Title Bar
SharingApple Action Button   The Share Icon                              www.shareicons.com
www.xgmedia.com/device-orientation-icon/   Device Orientation Icon
Toggle Switch Button
Toggle Switch Triangle
The Drawer
Thank you Avi Itzkovitch@xgmediawww.XGmedia.com
Upcoming SlideShare
Loading in...5
×

Designing For Device Orientation, From Portrait To Landscape.

4,772

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,772
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 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.
  • Designing For Device Orientation, From Portrait To Landscape.

    1. 1. Designing ForDevice Orientation,From Portrait To Landscape.
    2. 2. www.any.do
    3. 3. www.any.do
    4. 4. Weather Application
    5. 5. Bank - Financial Application
    6. 6. Remote Control
    7. 7. Device Orientation DesignCATEGORIES
    8. 8. Fluid
    9. 9. Fluid
    10. 10. Extended
    11. 11. Complementary
    12. 12. Continuous
    13. 13. Continuous
    14. 14. Device Orientation DesignTHE CHALLENGE
    15. 15. AffordanceAn affordance is a quality of an object, or an environment,which allows an individual to perform an action
    16. 16. http://techtips.salon.com/change-iphone-calculator-scientific-calculator-310.html
    17. 17. Step 1Launch the calculator app bytouching its icon on the touchscreen.
    18. 18. Step 2Hold the iPhone vertically toperform basic calculatortasks.
    19. 19. Step 3Rotate the iPhone horizontally, or into landscapemode, to make the calculator automaticallytransform into a scientific calculator.Enjoy.
    20. 20. Device Orientation DesignVISUAL CLUES
    21. 21. The Title Bar
    22. 22. SharingApple Action Button The Share Icon www.shareicons.com
    23. 23. www.xgmedia.com/device-orientation-icon/ Device Orientation Icon
    24. 24. Toggle Switch Button
    25. 25. Toggle Switch Triangle
    26. 26. The Drawer
    27. 27. Thank you Avi Itzkovitch@xgmediawww.XGmedia.com

    ×