SAVING SCREEN SPACE
Aus DPWiki - The Design Pattern Wiki
Inhaltsverzeichnis |
Illustration
Context
…you want to design a MOBILE APPLICATION for a handheld device.
You think about which information and which elements are really necessary to be displayed and which are not.
Problem statement
One of the main limitations for user interface design of mobile applications is the small screen size and resolution of the devices. For this reason information and elements that will be displayed have to be well chosen. Which information and which objects should be displayed and which should be left out?
Problem description with forces
Desktop computers provide big displays with very high resolutions up to 1600x1200 pixels. For this reason there is enough screen real estate available to provide controls, explanations and additional information that are not needed all the time while still leaving enough screen space for users to work with an application.
The following screenshot of Microsoft Word 2002 illustrates this issue.
Although almost half of the screen is crammed with toolbars (which might become a different problem as it is hard to find a specific icon), there is still enough screen space left to work with the document.
Mobile devices on the other hand have some limitations that constrain what and how much information can be displayed on their screens: they provide only small displays with low screen resolutions and most of them differ in their screen formats (see opening picture).
Compared to desktop computers, designers of mobile applications have to cut back some elements and concentrate on the most important information to save screen space.
Examples
User interfaces for the miscellaneous operating systems on mobile devices include many different mechanisms for saving screen space by hiding controls, help texts or additional information that are infrequently used.
The Symbian UIQ user interface [1], for example, hides help texts behind a small help icon in the title bar of dialogs (similar to Palm OS).
Tapping the icon opens the help text in another dialog within the help application, and covers the current dialog.
In Microsoft Pocket PC [2] the start menu is hidden.
It can be accessed through the application title, located in the upper-left corner of the Pocket PC user interface.
Some applications also provide means for hiding elements such as toolbars. Sony Clié Paint on Palm OS for example provides full screen views of images without any further controls.
Only after the user taps on the image, a toolbar appears.
Solution
Therefore:
Hide all elements that
- are not important
<LI>are infrequently used
<LI>would take up too much screen space
<LI>would clutter the display
</UL>
However, provide a standard way of bringing back each element when it is needed.
Diagram
References
There are many different kinds of objects you can hide. First of all you should hide menus, toolbars and scrollbars - HIDE AND SEEK.
How help texts can be hidden in order not to waste any screen space is described in DIAL 'H' FOR HELP.
Additional object information like descriptions, explanations or even object names can also be hidden - TOOLTIPS.
Literature and Links
<LI>Symbian Ltd. (2002): UIQ Style Guide http://www.symbian.com/developer/techlib/papers/uiq/uiqstyleguide/index.html <LI>Microsoft Corporation (July 2003). Pocket PC User Interface Guidelines http://msdn.microsoft.com/library/en-us/ui_guide_ppc/htm/Navigation.asp
