Legacy Maemo 5 Documentation/Desktop Widget UI Guidelines - Revision history

imported_>amigadave: wikify slightly

2011-02-01T10:35:53Z

wikify slightly

← Older revision		Revision as of 10:35, 1 February 2011
Line 1:		Line 1:
	{{legacy documentation}}		{{legacy documentation}}

	~~== Purpose of this document ==~~

	The Desktop Widget Guidelines‐document is intended as an aid for developers to [[Documentation/Maemo 5 Developer Guide/Application Development/Writing Desktop Widgets\|build Desktop Widgets]] according to the design philosophy, interaction model, and visual look‐and‐feel of Maemo 5.		The Desktop Widget Guidelines‐document is intended as an aid for developers to [[Documentation/Maemo 5 Developer Guide/Application Development/Writing Desktop Widgets\|build Desktop Widgets]] according to the design philosophy, interaction model, and visual look‐and‐feel of Maemo 5.
Line 11:		Line 9:
	== Introduction ==		== Introduction ==

	Desktop Widgets can be defined as miniature applications – or applets – that reside on the Desktop for convenient, fast access to useful information or controls. Maemo 5 contains up to '''four''' Desktops, as illustrated in Figure 1, totaling in ~~3200x424~~ pixels of screen real‐estate for Desktop Widgets.		Desktop Widgets can be defined as miniature applications – or applets – that reside on the Desktop for convenient, fast access to useful information or controls. Maemo 5 contains up to '''four''' Desktops, as illustrated in Figure 1, totaling in 3200×424 pixels of screen real‐estate for Desktop Widgets.

	[[Image:desktop-views.png\|thumb\|center\|600px\|alt=Screenshot of desktop views\|Figure 1: Maemo 5 includes up to four Desktops for Widgets]]		[[Image:desktop-views.png\|thumb\|center\|600px\|alt=Screenshot of desktop views\|Figure 1: Maemo 5 includes up to four Desktops for Widgets]]

	~~N.B.~~ In Maemo terminology, in addition to Widgets, Maemo 5 also includes ''Application shortcuts'', ''Web bookmarks'', and ''Contacts''. Technically, however, these are considered Desktop Widgets as well, and the same guidelines apply. Thus, for the sake of readability, the term “Widget” used in this document encompasses '''all''' the aforementioned applets.		{{ambox\|text=In Maemo terminology, in addition to Widgets, Maemo 5 also includes ''Application shortcuts'', ''Web bookmarks'', and ''Contacts''. Technically, however, these are considered Desktop Widgets as well, and the same guidelines apply. Thus, for the sake of readability, the term “Widget” used in this document encompasses '''all''' the aforementioned applets.}}

	== Widget design ==		== Widget design ==
Line 25:		Line 23:
	* Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''.		* Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''.
	* Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well.		* Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well.
	* Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.~~<br/> N.B.~~ Due to the high pixel density of the physical screen, tappable elements must be at least ~~70x70~~ pixels in size for convenient finger use.		* Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.

			{{ambox\|text=Due to the high pixel density of the physical screen, tappable elements must be at least 70×70 pixels in size for convenient finger use.}}

	Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''.		Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''.
Line 41:		Line 41:
	\|Application shortcut		\|Application shortcut
	\|Provides one‐touch access to an application		\|Provides one‐touch access to an application
	\|~~96x96~~		\|96×96
	\|-		\|-
	\|Calendar widget		\|Calendar widget
	\|Displays the current date and upcoming calendar events		\|Displays the current date and upcoming calendar events
	\|~~352x252~~		\|352×252
	\|-		\|-
	\|Google widget		\|Google widget
	\|Provides one-touch access to Google search		\|Provides one-touch access to Google search
	\|~~176x146~~		\|176×146
	\|-		\|-
	\|Location widget		\|Location widget
	\|Displays the current location of the user on a map		\|Displays the current location of the user on a map
	\|~~316x368~~		\|316×368
	\|-		\|-
	\|Media Player widget		\|Media Player widget
	\|Provides Media Player status and controls.		\|Provides Media Player status and controls.
	\|~~338x148~~		\|338×148
	\|-		\|-
	\|Ovi widget		\|Ovi widget
	\|Provides access to Ovi services		\|Provides access to Ovi services
	\|~~490x88~~		\|490×88
	\|-		\|-
	\|RSS widget		\|RSS widget
	\|Displays the latest RSS feeds		\|Displays the latest RSS feeds
	\|~~316x368~~		\|316×368
	\|-		\|-
	\|Tutorial widget		\|Tutorial widget
	\|Presents a tutorial on how to use the device		\|Presents a tutorial on how to use the device
	\|~~800x72~~		\|800×72
	\|-		\|-
	\|Web bookmark		\|Web bookmark
	\|Provides one‐touch access to a web bookmark		\|Provides one‐touch access to a web bookmark
	\|~~176x146~~		\|176×146
	\|}		\|}

Line 111:		Line 111:
	\|+ Table 2. Standard margins for Widgets.		\|+ Table 2. Standard margins for Widgets.
	! Logical name		! Logical name
	! Size (~~in px~~)		! Size (pixels)
	! Additional information		! Additional information
	\|-		\|-
	\|<font color="red"><code>HILDON_MARGIN_HALF</code></font>		\|<font color="red"><code>HILDON_MARGIN_HALF</code></font>
	\|<font color="red">4 px</font>		\|<font color="red">4</font>
	\|<font color="red">Marked as red bar in layout images</font>		\|<font color="red">Marked as red bar in layout images</font>
	\|-		\|-
	\|<font color="blue"><code>HILDON_MARGIN_DEFAULT</code></font>		\|<font color="blue"><code>HILDON_MARGIN_DEFAULT</code></font>
	\|<font color="blue">8 ~~pixels~~</font>		\|<font color="blue">8</font>
	\|<font color="blue">Marked as blue bar in layout images</font>		\|<font color="blue">Marked as blue bar in layout images</font>
	\|-		\|-
	\|<font color="cyan"><code>HILDON_MARGIN_DOUBLE</code></font>		\|<font color="cyan"><code>HILDON_MARGIN_DOUBLE</code></font>
	\|<font color="cyan">16 ~~pixels~~</font>		\|<font color="cyan">16</font>
	\|<font color="cyan">Marked as cyan bar in layout images</font>		\|<font color="cyan">Marked as cyan bar in layout images</font>
	\|}		\|}
Line 159:		Line 159:
	* Application name – a descriptive name shown in the application package list view in Application manager		* Application name – a descriptive name shown in the application package list view in Application manager
	* Application short description – the first line (or 60 first characters) of the application description		* Application short description – the first line (or 60 first characters) of the application description
	* Application icon – a ~~base64encoded~~ PNG image (sized ~~48x48~~ pixels). This icon is only shown in Application manager		* Application icon – a base64 encoded PNG image (sized 48×48 pixels). This icon is only shown in Application manager

	Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script.		Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script.

imported_>amigadave: wikify slightly, add link

2010-10-20T14:13:26Z

wikify slightly, add link

← Older revision		Revision as of 14:13, 20 October 2010
Line 3:		Line 3:
	== Purpose of this document ==		== Purpose of this document ==

	The Desktop Widget Guidelines‐document is intended as an aid for developers to build Desktop Widgets according to the design philosophy, interaction model, and visual look‐and‐feel of Maemo 5.		The Desktop Widget Guidelines‐document is intended as an aid for developers to [[Documentation/Maemo 5 Developer Guide/Application Development/Writing Desktop Widgets\|build Desktop Widgets]] according to the design philosophy, interaction model, and visual look‐and‐feel of Maemo 5.

	By following these guidelines, developers are assured to build Widgets that are consistent, and accessible for end‐users.		By following these guidelines, developers are assured to build Widgets that are consistent, and accessible for end‐users.
Line 13:		Line 13:
	Desktop Widgets can be defined as miniature applications – or applets – that reside on the Desktop for convenient, fast access to useful information or controls. Maemo 5 contains up to '''four''' Desktops, as illustrated in Figure 1, totaling in 3200x424 pixels of screen real‐estate for Desktop Widgets.		Desktop Widgets can be defined as miniature applications – or applets – that reside on the Desktop for convenient, fast access to useful information or controls. Maemo 5 contains up to '''four''' Desktops, as illustrated in Figure 1, totaling in 3200x424 pixels of screen real‐estate for Desktop Widgets.

	[[Image:desktop-views.png\|~~Desktop~~ views\|~~600px]]~~		[[Image:desktop-views.png\|thumb\|center\|600px\|alt=Screenshot of desktop views\|Figure 1: Maemo 5 includes up to four Desktops for Widgets]]
	~~<br>'''~~Figure 1. Maemo 5 includes up to four Desktops for Widgets~~.'''~~

	N.B. In Maemo terminology, in addition to Widgets, Maemo 5 also includes ''Application shortcuts'', ''Web bookmarks'', and ''Contacts''. Technically, however, these are considered Desktop Widgets as well, and the same guidelines apply. Thus, for the sake of readability, the term “Widget” used in this document encompasses '''all''' the aforementioned applets.		N.B. In Maemo terminology, in addition to Widgets, Maemo 5 also includes ''Application shortcuts'', ''Web bookmarks'', and ''Contacts''. Technically, however, these are considered Desktop Widgets as well, and the same guidelines apply. Thus, for the sake of readability, the term “Widget” used in this document encompasses '''all''' the aforementioned applets.
Line 35:		Line 34:

	{\| class="wikitable"		{\| class="wikitable"
			\|+ Table 1. Overview of stock Widgets included in Maemo 5.
	! Widget name		! Widget name
	! Description		! Description
Line 75:		Line 75:
	\|176x146		\|176x146
	\|}		\|}

	~~<br/>'''Table 1. Overview of stock Widgets included in Maemo 5.'''~~

	=== Configuration options ===		=== Configuration options ===
Line 82:		Line 80:
	Widgets that can be configured include a configuration‐button accessible in ''Edit mode''. Tapping on the button reveals a dialog containing all the available configuration options. Figure 2 presents a fictional example of a configuration dialog.		Widgets that can be configured include a configuration‐button accessible in ''Edit mode''. Tapping on the button reveals a dialog containing all the available configuration options. Figure 2 presents a fictional example of a configuration dialog.

	[[Image:configuration_dialog.png\|~~Configuration~~ dialog ~~example~~\|~~300px]]~~		[[Image:configuration_dialog.png\|thumb\|center\|300px\|alt=Screenshot of configuration dialog\|Figure 2: Example configuration dialog for a Widget]]
	~~<br/>'''~~Figure 2. Example configuration dialog for a Widget~~.'''~~

	== Interaction ==		== Interaction ==
Line 95:		Line 92:
	All tappable elements on Widgets must contain a graphical highlight (pressed‐down) state for providing visual feedback on the action. If the entire Widget is a tappable element, such as with ''Web bookmarks'', the highlight state also encompasses the whole Widget. Examples of highlight states are shown in Figure 3.		All tappable elements on Widgets must contain a graphical highlight (pressed‐down) state for providing visual feedback on the action. If the entire Widget is a tappable element, such as with ''Web bookmarks'', the highlight state also encompasses the whole Widget. Examples of highlight states are shown in Figure 3.

	[[Image:highlight_states.png\|~~Highlight~~ states\|~~300px]]~~		[[Image:highlight_states.png\|thumb\|center\|300px\|alt=Screenshot showing example widget states\|Figure 3: Examples of highlight states of various widgets]]
	~~<br/>'''~~Figure 3. Examples of highlight states of various ~~Widgets.'''~~

	While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.		While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.
Line 106:		Line 102:
	Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a 24 pixel‐padding around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height.		Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a 24 pixel‐padding around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height.

	[[Image:location_widget.png\|~~Location~~ widget\|~~300px]]~~		[[Image:location_widget.png\|thumb\|center\|300px\|alt=Screenshot of lactin widget\|Figure 4: The Location Widget is close to the maximum size of Widgets]]
	~~<br/>'''~~Figure 4. The Location Widget is close to the maximum size of Widgets~~.'''~~

	=== Margins and positioning ===		=== Margins and positioning ===
Line 114:		Line 109:

	{\| class="wikitable"		{\| class="wikitable"
			\|+ Table 2. Standard margins for Widgets.
	! Logical name		! Logical name
	! Size (in px)		! Size (in px)
Line 130:		Line 126:
	\|<font color="cyan">Marked as cyan bar in layout images</font>		\|<font color="cyan">Marked as cyan bar in layout images</font>
	\|}		\|}

	~~<br/>'''Table 2. Standard margins for Widgets.'''~~

	Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by <code>HILDON_MARGIN_HALF</code>, and Widgets are surrounded by <code>HILDON_MARGIN_DEFAULT</code>; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6.		Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by <code>HILDON_MARGIN_HALF</code>, and Widgets are surrounded by <code>HILDON_MARGIN_DEFAULT</code>; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6.

	[[Image:applet-wireframes+specs.png\|~~Widget~~ margins\|~~800px]]~~		[[Image:applet-wireframes+specs.png\|thumb\|center\|800px\|alt=Illustration of widget margins\|Figure 5. Examples of margin use in stock Widgets]]
	~~<br/>'''~~Figure 5. Examples of margin use in stock Widgets~~.'''~~

	[[Image:widgets+wireframes.png\|~~Widget wireframes~~\|800px]]		[[Image:widgets+wireframes.png\|thumb\|center\|800px\|alt=Illustration of widget construction\|Figure 6. Examples of visual Widget construction]]
	~~<br/>'''~~Figure 6. Examples of visual Widget construction~~.'''~~

	The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines.		The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines.
Line 155:		Line 147:
	Figure 7 presents an example of the use of typography in Widgets.		Figure 7 presents an example of the use of typography in Widgets.

	[[Image:widget_typography.png\|~~Widget~~ typography\|~~300px]]~~		[[Image:widget_typography.png\|thumb\|center\|300px\|alt=Screenshot of widget typography\|Figure 7: An example of the use of typography in Widgets]]
	~~<br>'''~~Figure 7. An example of the use of typography in Widgets~~.'''~~

	== Development ==		== Development ==

	=== Packaging ===		=== Packaging ===

			{{main\|Packaging}}

	Widgets are installed on the device using a normal Debian application package. As the package information of your desktop widget can be seen in Application manager (the application used to install Widgets), it is recommended to fill in the following information in the package:		Widgets are installed on the device using a normal Debian application package. As the package information of your desktop widget can be seen in Application manager (the application used to install Widgets), it is recommended to fill in the following information in the package:

imported_>amigadave: use `, wikify slightly`


2010-09-20T15:59:24Z
use <code>, wikify slightly

				
				
				
				
				
				← Older revision
				Revision as of 15:59, 20 September 2010
				
Line 26:
Line 26:
* Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''. * Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''.
* Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well. * Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well.
* Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.<br> N.B. Due to the high pixel density of the physical screen, tappable elements must be at least 70x70 pixels in size for convenient finger use. * Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.<br/> N.B. Due to the high pixel density of the physical screen, tappable elements must be at least 70x70 pixels in size for convenient finger use.



Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''. Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''.
Line 37:
Line 37:
! Widget name ! Widget name
! Description ! Description
! Dimensions (in px) ! Dimensions (in pixels)
|- |-
|Application shortcut |Application shortcut
Line 76:
Line 76:
|} |}



<br>'''Table 1. Overview of stock Widgets included in Maemo 5.''' <br/>'''Table 1. Overview of stock Widgets included in Maemo 5.'''



=== Configuration options === === Configuration options ===
Line 83:
Line 83:



[[Image:configuration_dialog.png|Configuration dialog example|300px]] [[Image:configuration_dialog.png|Configuration dialog example|300px]]
<br>'''Figure 2. Example configuration dialog for a Widget.''' <br/>'''Figure 2. Example configuration dialog for a Widget.'''



== Interaction == == Interaction ==
Line 96:
Line 96:



[[Image:highlight_states.png|Highlight states|300px]] [[Image:highlight_states.png|Highlight states|300px]]
<br>'''Figure 3. Examples of highlight states of various Widgets.''' <br/>'''Figure 3. Examples of highlight states of various Widgets.'''



While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog. While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.
Line 104:
Line 104:
=== Size === === Size ===



Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a 24px‐padding around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height. Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a 24 pixel‐padding around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height.



[[Image:location_widget.png|Location widget|300px]] [[Image:location_widget.png|Location widget|300px]]
<br>'''Figure 4. The Location Widget is close to the maximum size of Widgets.''' <br/>'''Figure 4. The Location Widget is close to the maximum size of Widgets.'''



=== Margins and positioning === === Margins and positioning ===
Line 118:
Line 118:
! Additional information ! Additional information
|- |-
|<font color="red">HILDON_MARGIN_HALF</font> |<font color="red"><code>HILDON_MARGIN_HALF</code></font>
|<font color="red">4 px</font> |<font color="red">4 px</font>
|<font color="red">Marked as red bar in layout images</font> |<font color="red">Marked as red bar in layout images</font>
|- |-
|<font color="blue">HILDON_MARGIN_DEFAULT</font> |<font color="blue"><code>HILDON_MARGIN_DEFAULT</code></font>
|<font color="blue">8 px</font> |<font color="blue">8 pixels</font>
|<font color="blue">Marked as blue bar in layout images</font> |<font color="blue">Marked as blue bar in layout images</font>
|- |-
|<font color="cyan">HILDON_MARGIN_DOUBLE</font> |<font color="cyan"><code>HILDON_MARGIN_DOUBLE</code></font>
|<font color="cyan">16 px</font> |<font color="cyan">16 pixels</font>
|<font color="cyan">Marked as cyan bar in layout images</font> |<font color="cyan">Marked as cyan bar in layout images</font>
|} |}



<br>'''Table 2. Standard margins for Widgets.''' <br/>'''Table 2. Standard margins for Widgets.'''



Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by ''HILDON_MARGIN_HALF'', and Widgets are surrounded by ''HILDON_MARGIN_DEFAULT''; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6. Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by <code>HILDON_MARGIN_HALF</code>, and Widgets are surrounded by <code>HILDON_MARGIN_DEFAULT</code>; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6.



[[Image:applet-wireframes+specs.png|Widget margins|800px]] [[Image:applet-wireframes+specs.png|Widget margins|800px]]
<br>'''Figure 5. Examples of margin use in stock Widgets.''' <br/>'''Figure 5. Examples of margin use in stock Widgets.'''



[[Image:widgets+wireframes.png|Widget wireframes|800px]] [[Image:widgets+wireframes.png|Widget wireframes|800px]]
<br>'''Figure 6. Examples of visual Widget construction.''' <br/>'''Figure 6. Examples of visual Widget construction.'''



The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines. The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines.
Line 148:
Line 148:



=== Typography === === Typography ===
Due to their compact size, default Widgets generally use ''HomeSystemFont'' or ''SmallSystemFont'' as the font size, while ''DefaultTextColor'' is used as the default text color. There is also a standard Sans-Serif font available for use. 



Text labels in Widgets should be separated with at least ''HILDON_MARGIN_HALF'' from the edges of their respective container elements to make sure that long labels do not end up touching element borders; see Figure 5 for visualizations. Due to their compact size, default Widgets generally use <code>HomeSystemFont</code> or <code>SmallSystemFont</code> as the font size, while <code>DefaultTextColor</code> is used as the default text color. There is also a standard Sans-Serif font available for use.
 
Text labels in Widgets should be separated with at least <code>HILDON_MARGIN_HALF</code> from the edges of their respective container elements to make sure that long labels do not end up touching element borders; see Figure 5 for visualizations.



Figure 7 presents an example of the use of typography in Widgets. Figure 7 presents an example of the use of typography in Widgets.
Line 165:
Line 166:
* Application name – a descriptive name shown in the application package list view in Application manager   * Application name – a descriptive name shown in the application package list view in Application manager  
* Application short description – the first line (or 60 first characters) of the application description   * Application short description – the first line (or 60 first characters) of the application description  
* Application icon – a base64encoded PNG image (sized 48x48 px). This icon is only shown in Application manager * Application icon – a base64encoded PNG image (sized 48x48 pixels). This icon is only shown in Application manager



Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script. Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script.



imported_>amigadave: wikify section headings, mark as legacy documentation
2010-09-20T15:38:28Z
wikify section headings, mark as legacy documentation
Show changes


imported_>amigadave: Documentation/Maemo 5 Developer Guide/Desktop Widget UI Guidelines moved to Legacy Maemo 5 Documentation/Desktop Widget UI Guidelines: legacy documentation
2010-09-13T11:46:33Z
Documentation/Maemo 5 Developer Guide/Desktop Widget UI Guidelines moved to Legacy Maemo 5 Documentation/Desktop Widget UI Guidelines: legacy documentation

				
				← Older revision
				Revision as of 11:46, 13 September 2010
				
(No difference)



imported_>amigadave: categorise
2010-02-12T12:07:57Z
categorise

				
				
				
				
				
				← Older revision
				Revision as of 12:07, 12 February 2010
				
Line 195:
Line 195:
* [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide] * [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide]
* [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification] * [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification]

[[Category:Development]]
[[Category:Documentation]]
[[Category:Fremantle]]



192.100.124.156: /* Margins and positioning */
2009-11-24T08:27:28Z
Margins and positioning

				
				
				
				
				
				← Older revision
				Revision as of 08:27, 24 November 2009
				
Line 124:
Line 124:



== Margins and positioning == == Margins and positioning ==
Layouts in Maemo 5 utilize a standardized set of margins. The supported margins for Widgets are outlined in Table 2. Layouts in Maemo 5 utilize a standardized set of margins. The recommended margins for Widgets are outlined in Table 2.



{|border="2" cellspacing="0" cellpadding="4" width="80%" {|border="2" cellspacing="0" cellpadding="4" width="80%"



192.100.124.156: /* Interaction */
2009-11-24T08:27:02Z
Interaction

				
				
				
				
				
				← Older revision
				Revision as of 08:27, 24 November 2009
				
Line 109:
Line 109:
<br>'''Figure 3. Examples of highlight states of various Widgets.''' <br>'''Figure 3. Examples of highlight states of various Widgets.'''



Text entries and areas (also known as text input fields) are not supported UI widgets. If text entry is required, such as for logging into a service, they can be provided either via a custom dialog, or utilizing the Widget’s configuration dialog. While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.



<br><br> <br><br>



192.100.124.156: /* Stock Widgets */
2009-11-24T08:26:21Z
Stock Widgets

				
				
				
				
				
				← Older revision
				Revision as of 08:26, 24 November 2009
				
Line 47:
Line 47:
|Displays the current date and upcoming calendar events |Displays the current date and upcoming calendar events
|352x252 |352x252

|-
|Google widget
|Provides one-touch access to Google search
|176x146



|- |-



imported_>msoini: /* References */
2009-10-14T09:18:45Z
References

				
				
				
				
				
				← Older revision
				Revision as of 09:18, 14 October 2009
				
Line 187:
Line 187:
= References = = References =



  * [http://www.forum.nokia.com/info/sw.nokia.com/id/eb8a68ba-6225-4d84-ba8f-a00e4a05ff6f/Hildon_2_2_UI_Style_Guide.html Hildon 2.2 UI Style Guide]
TBW. * [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide]
* [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification]

← Older revision		Revision as of 15:59, 20 September 2010
Line 26:		Line 26:
	* Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''.		* Widgets must provide information or controls '''quickly''' and in an '''obvious manner'''; every feature and command should be '''immediately understandable''', and '''accessible with a single tap'''.
	* Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well.		* Widgets must provide only the '''most crucial features'''; they must be '''simple and efficient''', designed to accomplish only a few tasks – but accomplish those extremely well.
	* Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.<br> N.B. Due to the high pixel density of the physical screen, tappable elements must be at least 70x70 pixels in size for convenient finger use.		* Widgets must be as '''compact in size''' as possible; even though Maemo 5 offers a generous amount of screen space, users must be able to place several widgets on each screen to minimize the need for excessive screen switching.<br/> N.B. Due to the high pixel density of the physical screen, tappable elements must be at least 70x70 pixels in size for convenient finger use.

	Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''.		Due to the aforementioned design goals, not every application can be transformed into, or any data set presented with a legitimate Widget. Before starting development, consider whether the Widget provides any value for end‐users in comparison to existing applications or websites that can be one tap away via ''Application shortcuts'' or ''Web bookmarks''.
Line 37:		Line 37:
	! Widget name		! Widget name
	! Description		! Description
	! Dimensions (in px)		! Dimensions (in pixels)
	\|-		\|-
	\|Application shortcut		\|Application shortcut
Line 76:		Line 76:
	\|}		\|}

	<br>'''Table 1. Overview of stock Widgets included in Maemo 5.'''		<br/>'''Table 1. Overview of stock Widgets included in Maemo 5.'''

	=== Configuration options ===		=== Configuration options ===
Line 83:		Line 83:

	[[Image:configuration_dialog.png\|Configuration dialog example\|300px]]		[[Image:configuration_dialog.png\|Configuration dialog example\|300px]]
	<br>'''Figure 2. Example configuration dialog for a Widget.'''		<br/>'''Figure 2. Example configuration dialog for a Widget.'''

	== Interaction ==		== Interaction ==
Line 96:		Line 96:

	[[Image:highlight_states.png\|Highlight states\|300px]]		[[Image:highlight_states.png\|Highlight states\|300px]]
	<br>'''Figure 3. Examples of highlight states of various Widgets.'''		<br/>'''Figure 3. Examples of highlight states of various Widgets.'''

	While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.		While text entries and areas (also known as text input fields) are supported UI widgets, they should be used with care; if several text entries are needed, they can also be provided either via a custom dialog, or utilizing the Widget’s configuration dialog.
Line 104:		Line 104:
	=== Size ===		=== Size ===

	Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a ~~24px‐padding~~ around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height.		Widgets must be designed to be as compact in their size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a Widget '''must never exceed half of the Desktop space''' allocated for Widgets, including a 24 pixel‐padding around the Widget (132,352 pixels total). The largest stock Widgets, ''Location'' and ''RSS'', are close to the maximum footprint of Widgets, as seen in Figure 4; another, ''Tutorial'', spans across the entire Desktop, but therefore remains limited in its height.

	[[Image:location_widget.png\|Location widget\|300px]]		[[Image:location_widget.png\|Location widget\|300px]]
	<br>'''Figure 4. The Location Widget is close to the maximum size of Widgets.'''		<br/>'''Figure 4. The Location Widget is close to the maximum size of Widgets.'''

	=== Margins and positioning ===		=== Margins and positioning ===
Line 118:		Line 118:
	! Additional information		! Additional information
	\|-		\|-
	\|<font color="red">HILDON_MARGIN_HALF</font>		\|<font color="red"><code>HILDON_MARGIN_HALF</code></font>
	\|<font color="red">4 px</font>		\|<font color="red">4 px</font>
	\|<font color="red">Marked as red bar in layout images</font>		\|<font color="red">Marked as red bar in layout images</font>
	\|-		\|-
	\|<font color="blue">HILDON_MARGIN_DEFAULT</font>		\|<font color="blue"><code>HILDON_MARGIN_DEFAULT</code></font>
	\|<font color="blue">8 px</font>		\|<font color="blue">8 pixels</font>
	\|<font color="blue">Marked as blue bar in layout images</font>		\|<font color="blue">Marked as blue bar in layout images</font>
	\|-		\|-
	\|<font color="cyan">HILDON_MARGIN_DOUBLE</font>		\|<font color="cyan"><code>HILDON_MARGIN_DOUBLE</code></font>
	\|<font color="cyan">16 px</font>		\|<font color="cyan">16 pixels</font>
	\|<font color="cyan">Marked as cyan bar in layout images</font>		\|<font color="cyan">Marked as cyan bar in layout images</font>
	\|}		\|}

	<br>'''Table 2. Standard margins for Widgets.'''		<br/>'''Table 2. Standard margins for Widgets.'''

	Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by ''HILDON_MARGIN_HALF'', and Widgets are surrounded by ''HILDON_MARGIN_DEFAULT''; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6.		Stock widgets share common margins and positioning rules. Elements within Widgets are separated from each other by <code>HILDON_MARGIN_HALF</code>, and Widgets are surrounded by <code>HILDON_MARGIN_DEFAULT</code>; the surrounding area includes both the outer border of the Widget, as well as a drop shadow. Some examples are presented in Figure 5, and Figure 6.

	[[Image:applet-wireframes+specs.png\|Widget margins\|800px]]		[[Image:applet-wireframes+specs.png\|Widget margins\|800px]]
	<br>'''Figure 5. Examples of margin use in stock Widgets.'''		<br/>'''Figure 5. Examples of margin use in stock Widgets.'''

	[[Image:widgets+wireframes.png\|Widget wireframes\|800px]]		[[Image:widgets+wireframes.png\|Widget wireframes\|800px]]
	<br>'''Figure 6. Examples of visual Widget construction.'''		<br/>'''Figure 6. Examples of visual Widget construction.'''

	The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines.		The positioning of graphical elements such as text labels, buttons, icons and so on must be in line with the rest of the Maemo 5 guidelines.
Line 148:		Line 148:

	=== Typography ===		=== Typography ===
	Due to their compact size, default Widgets generally use ''HomeSystemFont'' or ''SmallSystemFont'' as the font size, while ''DefaultTextColor'' is used as the default text color. There is also a standard Sans-Serif font available for use.

	Text labels in Widgets should be separated with at least ''HILDON_MARGIN_HALF'' from the edges of their respective container elements to make sure that long labels do not end up touching element borders; see Figure 5 for visualizations.		Due to their compact size, default Widgets generally use <code>HomeSystemFont</code> or <code>SmallSystemFont</code> as the font size, while <code>DefaultTextColor</code> is used as the default text color. There is also a standard Sans-Serif font available for use.

			Text labels in Widgets should be separated with at least <code>HILDON_MARGIN_HALF</code> from the edges of their respective container elements to make sure that long labels do not end up touching element borders; see Figure 5 for visualizations.

	Figure 7 presents an example of the use of typography in Widgets.		Figure 7 presents an example of the use of typography in Widgets.
Line 165:		Line 166:
	* Application name – a descriptive name shown in the application package list view in Application manager		* Application name – a descriptive name shown in the application package list view in Application manager
	* Application short description – the first line (or 60 first characters) of the application description		* Application short description – the first line (or 60 first characters) of the application description
	* Application icon – a base64encoded PNG image (sized 48x48 px). This icon is only shown in Application manager		* Application icon – a base64encoded PNG image (sized 48x48 pixels). This icon is only shown in Application manager

	Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script.		Unless the installation script of the Widget package contains commands to place the Widget on the Desktop, users have to manually do so via Edit mode. Since this is an unnecessary step for the user, it is advised that the installation script handles the placement automatically. It is also possible to direct the Widget onto a specific Desktop view; however, the exact placement of the Widget cannot be specified in the script.

← Older revision	Revision as of 11:46, 13 September 2010
(No difference)

← Older revision		Revision as of 12:07, 12 February 2010
Line 195:		Line 195:
	* [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide]		* [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide]
	* [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification]		* [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification]

			[[Category:Development]]
			[[Category:Documentation]]
			[[Category:Fremantle]]

← Older revision		Revision as of 08:27, 24 November 2009
Line 124:		Line 124:

	== Margins and positioning ==		== Margins and positioning ==
	Layouts in Maemo 5 utilize a standardized set of margins. The ~~supported~~ margins for Widgets are outlined in Table 2.		Layouts in Maemo 5 utilize a standardized set of margins. The recommended margins for Widgets are outlined in Table 2.

	{\|border="2" cellspacing="0" cellpadding="4" width="80%"		{\|border="2" cellspacing="0" cellpadding="4" width="80%"

← Older revision		Revision as of 08:26, 24 November 2009
Line 47:		Line 47:
	\|Displays the current date and upcoming calendar events		\|Displays the current date and upcoming calendar events
	\|352x252		\|352x252

			\|-
			\|Google widget
			\|Provides one-touch access to Google search
			\|176x146

	\|-		\|-

← Older revision		Revision as of 09:18, 14 October 2009
Line 187:		Line 187:
	= References =		= References =

			* [http://www.forum.nokia.com/info/sw.nokia.com/id/eb8a68ba-6225-4d84-ba8f-a00e4a05ff6f/Hildon_2_2_UI_Style_Guide.html Hildon 2.2 UI Style Guide]
	~~TBW~~.		* [http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html Fremantle Master Layout Guide]
			* [http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html Hildon 2.2 Widget UI Specification]

Legacy Maemo 5 Documentation/Desktop Widget UI Guidelines - Revision history

imported_>amigadave: wikify slightly

imported_>amigadave: wikify slightly, add link

imported_>amigadave: use , wikify slightly

imported_>amigadave: wikify section headings, mark as legacy documentation

imported_>amigadave: Documentation/Maemo 5 Developer Guide/Desktop Widget UI Guidelines moved to Legacy Maemo 5 Documentation/Desktop Widget UI Guidelines: legacy documentation

imported_>amigadave: categorise

192.100.124.156: /* Margins and positioning */

192.100.124.156: /* Interaction */

192.100.124.156: /* Stock Widgets */

imported_>msoini: /* References */

imported_>amigadave: use `, wikify slightly`