Legacy Maemo 5 Documentation/Human Interface Guidelines/User Input - Revision history

imported_>amigadave: wikify slightly

2010-10-18T13:36:32Z

wikify slightly

← Older revision		Revision as of 13:36, 18 October 2010
Line 1:		Line 1:
	{{Legacy documentation}}		{{Legacy documentation}}

	~~=User Input=~~
	There can be several ways to use a Hildon powered device. Users might be able to use the device in a specific orientation - landscape or portrait - using their fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way the interface is developed. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.		There can be several ways to use a Hildon powered device. Users might be able to use the device in a specific orientation - landscape or portrait - using their fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way the interface is developed. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.

	==Input Hardware==		==Input Hardware==

	The input hardware is the hardware that a Hildon device provides the users so they can interact with it. When the user interacts with a component of the input hardware, the device must provide feedback.		The input hardware is the hardware that a Hildon device provides the users so they can interact with it. When the user interacts with a component of the input hardware, the device must provide feedback.

	===Hard Keys===		===Hard Keys===

	The hard keys are the keys in the device that constitute hardware - the ones you can physically touch. The set of hard keys available in a device surely varies according to the device and that difference must be taken into account when developing a Hildon application. Nonetheless, there are sets of keys that can be found in pretty much any device.		The hard keys are the keys in the device that constitute hardware - the ones you can physically touch. The set of hard keys available in a device surely varies according to the device and that difference must be taken into account when developing a Hildon application. Nonetheless, there are sets of keys that can be found in pretty much any device.

	====Common Hard Keys====		====Common Hard Keys====

	* ''Power'': This key is the most common because of its basic but vital function.		* ''Power'': This key is the most common because of its basic but vital function.
	* ''Lock/Unlock'': This is also a common key that sets the device either sensitive or not to the touch. Note that although common there are devices who substitute is by soft keys.		* ''Lock/Unlock'': This is also a common key that sets the device either sensitive or not to the touch. Note that although common there are devices who substitute is by soft keys.
Line 16:		Line 18:

	====Optional Hard Keys====		====Optional Hard Keys====

	* ''Capture'': Devices that feature such a key, use it normally to active a camera and capture an image.		* ''Capture'': Devices that feature such a key, use it normally to active a camera and capture an image.
	* ''Keyboard'': Many devices feature a keyboard either always present or a slide-out one. Hildon supports two types of text input - the hardware keyboard and a touch screen text input method. The latter should not be activated when the keyboard is available or slid out.		* ''Keyboard'': Many devices feature a keyboard either always present or a slide-out one. Hildon supports two types of text input - the hardware keyboard and a touch screen text input method. The latter should not be activated when the keyboard is available or slid out.

			==Finger Interaction==

	~~==Finger Interaction==~~
	Devices using Hildon can be used with the fingers without the need of a stylus pointer. Also, devices using Hildon should be used in either a landscape or portrait orientation. Some devices might also be able to detect the orientation and adapt themselves to that mode. Like described in the principles section, you must keep in mind that using the fingers to interact with the device will result in covering parts of the application. If the area that is being covered by the user's fingers/hand displays an important message, the user is not able to see it. Hence, you must choose a good placement of the widgets as well as to offer ways of letting the users do it themselves.		Devices using Hildon can be used with the fingers without the need of a stylus pointer. Also, devices using Hildon should be used in either a landscape or portrait orientation. Some devices might also be able to detect the orientation and adapt themselves to that mode. Like described in the principles section, you must keep in mind that using the fingers to interact with the device will result in covering parts of the application. If the area that is being covered by the user's fingers/hand displays an important message, the user is not able to see it. Hence, you must choose a good placement of the widgets as well as to offer ways of letting the users do it themselves.

	===Two Hand Usage===		===Two Hand Usage===

	The two hand usage of a device happens when the user is holding the device with both hands and using the fingers to interact with it. In this case, the device is in the landscape mode. If the user is using for example both thumbs to interact with the device, the area covered by them will be greater than if it was just one finger, and this constitutes a bigger challenge for the interface designer.		The two hand usage of a device happens when the user is holding the device with both hands and using the fingers to interact with it. In this case, the device is in the landscape mode. If the user is using for example both thumbs to interact with the device, the area covered by them will be greater than if it was just one finger, and this constitutes a bigger challenge for the interface designer.

	===Two Hand Usage with Keyboard===		===Two Hand Usage with Keyboard===

	Pay special attention to the fact that some devices also include an external keyboard that slides out.		Pay special attention to the fact that some devices also include an external keyboard that slides out.

Line 32:		Line 37:

	===One Hand Usage===		===One Hand Usage===

	When the user is using only one hand to hold and interact with the device, the device must be in the portrait mode as it is not be easy to use in the landscape orientation. The horizontal size of the screen is less than the vertical size and the applications must adapt themselves to it. Using fixed sizes or static placements make the adaption difficult.		When the user is using only one hand to hold and interact with the device, the device must be in the portrait mode as it is not be easy to use in the landscape orientation. The horizontal size of the screen is less than the vertical size and the applications must adapt themselves to it. Using fixed sizes or static placements make the adaption difficult.

	===Soft Keys and Touch Types===		===Soft Keys and Touch Types===

	The user interacts with a Hildon device mainly by touching the screen, so there are different types of taps that Hildon supports.		The user interacts with a Hildon device mainly by touching the screen, so there are different types of taps that Hildon supports.

	====Single Tap====		====Single Tap====

	The user can activate all interactive elements like controls, buttons, links, and so on, by tapping and releasing on top of the element's control area. The process of doing a ''single tap'' is divided in states. The following list describes those states for a better understanding of what a user can do with a ''single tap''.		The user can activate all interactive elements like controls, buttons, links, and so on, by tapping and releasing on top of the element's control area. The process of doing a ''single tap'' is divided in states. The following list describes those states for a better understanding of what a user can do with a ''single tap''.

Line 45:		Line 53:

	====Long-Tap====		====Long-Tap====

	Whenever a user taps and keeps the finger down for longer than usual, it produces a long tap. Use long taps only as a shortcut to a function that can be accessed in another way. Typically, a long tap is used to bring out a context-sensitive menu in a list of items. For example, the user can 'long tap a contact in the contacts list to bring out a menu with options.		Whenever a user taps and keeps the finger down for longer than usual, it produces a long tap. Use long taps only as a shortcut to a function that can be accessed in another way. Typically, a long tap is used to bring out a context-sensitive menu in a list of items. For example, the user can 'long tap a contact in the contacts list to bring out a menu with options.

	==Stylus Interaction ==		== Stylus Interaction ==
	Although Hildon widgets aim at being used by fingers, the stylus can obviously still be used when it is part of the hardware. However, its usage is only advisable for tasks that require a bigger precision such as browsing the web (most websites are designed to be used by a mouse), imaging applications like a drawing application and applications that need too many widgets to be shown at the same time, leaving no space for fingers.		Although Hildon widgets aim at being used by fingers, the stylus can obviously still be used when it is part of the hardware. However, its usage is only advisable for tasks that require a bigger precision such as browsing the web (most websites are designed to be used by a mouse), imaging applications like a drawing application and applications that need too many widgets to be shown at the same time, leaving no space for fingers.

			==Dimensions==

	~~==Dimensions==~~
	A button that the user is meant to click with a mouse or a stylus is not usually easily pressed with a finger because of the small size. Apart from the size, the placement of a widget right next to another will require more precision and hence make the widgets difficult to be pressed by fingers.		A button that the user is meant to click with a mouse or a stylus is not usually easily pressed with a finger because of the small size. Apart from the size, the placement of a widget right next to another will require more precision and hence make the widgets difficult to be pressed by fingers.

Line 60:		Line 69:
	===Hildon control size types===		===Hildon control size types===

	*''HILDON_SIZE_AUTO_WIDTH'' Automatic width		* <code>HILDON_SIZE_AUTO_WIDTH</code>: Automatic width
	*''HILDON_SIZE_HALFSCREEN_WIDTH'' Half of the screen width		* <code>HILDON_SIZE_HALFSCREEN_WIDTH</code>: Half of the screen width
	*''HILDON_SIZE_FINGER_HEIGHT'' A finger height		* <code>HILDON_SIZE_FINGER_HEIGHT</code>: A finger height
	*''HILDON_SIZE_THUMB_HEIGHT'' A thumb height		* <code>HILDON_SIZE_THUMB_HEIGHT</code>: A thumb height
	*''HILDON_SIZE_AUTO'' Automatic height and width		* <code>HILDON_SIZE_AUTO</code>: Automatic height and width


	Use the size variables above when you need to choose a size for a widget that requires the user's control according to the way you want the user to use it. For example, if you place a button on a bottom corner of the screen, it is likely that that the user will use thumbs to press the button, so you should choose the <code>HILDON_SIZE_THUMB_HEIGHT</code> for it.		Use the size variables above when you need to choose a size for a widget that requires the user's control according to the way you want the user to use it. For example, if you place a button on a bottom corner of the screen, it is likely that that the user will use thumbs to press the button, so you should choose the <code>HILDON_SIZE_THUMB_HEIGHT</code> for it.

	==Interaction Actions==		==Interaction Actions==

	A Hildon powered device provides different types of actions that can be done. Some of them are equal to the actions on a computer while others are rather different or innovative.		A Hildon powered device provides different types of actions that can be done. Some of them are equal to the actions on a computer while others are rather different or innovative.

Line 75:		Line 84:

	===Copy, paste, cut===		===Copy, paste, cut===

	The text input fields support the common actions of copying, pasting or cutting. For that, the user can use the hardware keyboard (if available) shortcuts ''Ctrl+c'', ''Ctrl+v'', ''Ctrl+x'', respectively.		The text input fields support the common actions of copying, pasting or cutting. For that, the user can use the hardware keyboard (if available) shortcuts ''Ctrl+c'', ''Ctrl+v'', ''Ctrl+x'', respectively.

	===Panning===		===Panning===

	Hildon discourages the use of scrollbars on interfaces intended to be used with fingers. The concept of panning refers to navigating through content on screen by dragging on top of the contents. When the user enters elements that hold content that cannot be fully viewed within the screen area, a scroll indicator must appear on the right and bottom sides of the screen and the user can drag on top of that area to navigate through the contents.		Hildon discourages the use of scrollbars on interfaces intended to be used with fingers. The concept of panning refers to navigating through content on screen by dragging on top of the contents. When the user enters elements that hold content that cannot be fully viewed within the screen area, a scroll indicator must appear on the right and bottom sides of the screen and the user can drag on top of that area to navigate through the contents.

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:27:50Z

← Older revision		Revision as of 09:27, 12 February 2010
Line 1:		Line 1:
			{{Legacy documentation}}

	=User Input=		=User Input=
	There can be several ways to use a Hildon powered device. Users might be able to use the device in a specific orientation - landscape or portrait - using their fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way the interface is developed. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.		There can be several ways to use a Hildon powered device. Users might be able to use the device in a specific orientation - landscape or portrait - using their fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way the interface is developed. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.

imported_>msoini: Documentation/Maemo 5 Developer Guide/Human Interface Guidelines/User Input moved to Legacy Maemo 5 Documentation/Human Interface Guidelines/User Input: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

2009-10-14T09:11:02Z

Documentation/Maemo 5 Developer Guide/Human Interface Guidelines/User Input moved to Legacy Maemo 5 Documentation/Human Interface Guidelines/User Input: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

← Older revision	Revision as of 09:11, 14 October 2009
(No difference)

imported_>liox_lang_valid: /* User Input */

2009-09-22T12:25:34Z

User Input

← Older revision		Revision as of 12:25, 22 September 2009
Line 1:		Line 1:
	=User Input=		=User Input=
	There can be several ways to use a Hildon powered device. ~~The user~~ might be able to use the device in a specific orientation - landscape or portrait - using ~~his or her~~ fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way ~~to develop that~~ interface. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.		There can be several ways to use a Hildon powered device. Users might be able to use the device in a specific orientation - landscape or portrait - using their fingers or a stylus. These various types of input and usage influence the way a user interacts with a graphical interface and hence influence the way the interface is developed. This chapter covers those different types of usage advising the interface designer or developer about what can result from choices about widgets placement and introduces concepts to avoid such problems.

	==Input Hardware==		==Input Hardware==
Line 52:		Line 52:
	A button that the user is meant to click with a mouse or a stylus is not usually easily pressed with a finger because of the small size. Apart from the size, the placement of a widget right next to another will require more precision and hence make the widgets difficult to be pressed by fingers.		A button that the user is meant to click with a mouse or a stylus is not usually easily pressed with a finger because of the small size. Apart from the size, the placement of a widget right next to another will require more precision and hence make the widgets difficult to be pressed by fingers.

	The horizontal size of the screen ~~will be~~ less than the vertical size and the applications must adapt themselves to it. Using fixed sizes or static placements make the adaptation difficult.		The horizontal size of the screen is less than the vertical size and the applications must adapt themselves to it. Using fixed sizes or static placements make the adaptation difficult.

	The Hildon API provides defined values to make it easy to set the size of controls in a relative way.		The Hildon API provides defined values to make it easy to set the size of controls in a relative way.
Line 76:		Line 76:

	===Panning===		===Panning===
	Hildon discourages the use of scrollbars on interfaces intended to be used with fingers. The concept of panning refers to ~~navigate~~ through content on screen by dragging on top of the contents. When the user enters elements that hold content that cannot be fully viewed within the screen area, a scroll indicator must appear on the right and bottom sides of the screen and the user can drag on top of that area to navigate through the contents.		Hildon discourages the use of scrollbars on interfaces intended to be used with fingers. The concept of panning refers to navigating through content on screen by dragging on top of the contents. When the user enters elements that hold content that cannot be fully viewed within the screen area, a scroll indicator must appear on the right and bottom sides of the screen and the user can drag on top of that area to navigate through the contents.

imported_>liox_lang_valid: /* Single Tap */

2009-09-22T10:03:46Z

Single Tap

← Older revision		Revision as of 10:03, 22 September 2009
Line 38:		Line 38:
	The user can activate all interactive elements like controls, buttons, links, and so on, by tapping and releasing on top of the element's control area. The process of doing a ''single tap'' is divided in states. The following list describes those states for a better understanding of what a user can do with a ''single tap''.		The user can activate all interactive elements like controls, buttons, links, and so on, by tapping and releasing on top of the element's control area. The process of doing a ''single tap'' is divided in states. The following list describes those states for a better understanding of what a user can do with a ''single tap''.

	* Tap down: When users touch the screen, a visual effect might be produced in the element they are touching. For example, it highlights a button or makes the scroll indicator visible.		* ''Tap down'': When users touch the screen, a visual effect might be produced in the element they are touching. For example, it highlights a button or makes the scroll indicator visible.
	* Tap release: This state happens when users lift up their finger after a tap down. This activates the element that was tapped, such as a button or task launcher.		* ''Tap release'': This state happens when users lift up their finger after a tap down. This activates the element that was tapped, such as a button or task launcher.
	* Tap and cancel: If the users tap down on a fixed position element (such as button) and then move their finger out of the element's area, it does not activate that element.		* ''Tap and cancel'': If the users tap down on a fixed position element (such as button) and then move their finger out of the element's area, it does not activate that element.

	====Long-Tap====		====Long-Tap====

imported_>liox_lang_valid: /* User Input */

2009-09-22T10:01:37Z

User Input

Show changes

imported_>danielwilms at 15:39, 17 August 2009

2009-08-17T15:39:56Z

Show changes

imported_>bijjal: New page: =User Input= There are several methods of using and manipulating applications on a Hildon-powered device. First, there are two viewable orientations: landscape and portrait. Second, users ...

2009-07-13T20:02:10Z

New page: =User Input= There are several methods of using and manipulating applications on a Hildon-powered device. First, there are two viewable orientations: landscape and portrait. Second, users ...

New page

=User Input=
There are several methods of using and manipulating applications on a Hildon-powered device. First, there are two viewable orientations: landscape and portrait. Second, users can control what is happening on the device with either a finger (or fingers) or by using a stylus. Because of this, developers must carefully weigh the various use-cases and input methods when planning an application.

This section covers these various types of usage in an attempt to advise developers and interface designers how to utilize best practices in order to provide a smooth, intuitive experience for end-users.

==Input Hardware==
Input Hardware is the hardware that allows users to interact with a Hildon device. When users interact with any component of the Input Hardware, the device should respond with some sort of feedback.

===Hard Keys===
Hard Keys are the keys on the device that can be physically touched. The set of Hard Keys available on various devices will vary according to the make and model of the device. These differences must be taken into account when developing a Hildon application. Nonetheless, there are sets of keys that are fairly standard on most hand-held devices.

====Common Hard Keys====
* ''Power Key:'' This key common to most devices, as it is a basic, but vital function.
* ''Lock/Unlock Key:'' This key can also be found on many devices. It is the key that "locks" and "unlocks" a device for use. Note that although this key is common, some devices handle this function via "soft keys."
* ''Increase/Decrease Key:'' Normally these keys are used to adjust the sound volume of a device, or to zoom in and out of a device's viewable area.

====Optional Hard Keys====
* ''Capture Key:'' The "Capture Key," if available is primarily used to take a photo with the device's built-in camera.
* ''Keyboard:'' Many devices feature a hardware keyboard that is either always present or can be slid or flipped out. Hildon supports two types of text input: hardware keyboard and touch screen text input methods. Touch screen input methods should never be activated if a hardware keyboard is available (i.e., open for use).

==Finger Interaction==
Hildon can be manipulated by users' fingertips, without the need of a stylus pointer. But, as described in the Principles section, keep in mind that using the finger input method may result in obscuring parts of the application. Placing important information in a position that can be hidden by finger/hand interaction is never desirable. Because of this, it is extremely important to choose proper placement of all onscreen widgets. Likewise, try to offer a way to let users choose their preferred widget placement.

===Two Hand Usage===
Two Hand usage occurs when users hold the device with both hands, using their fingers to interact with the device and/or application. In this case, the application should be designed to work in landscape mode. For example, if both thumbs are required to interact with the device, the obscured area will be greater than if it was a function controlled with just one finger. Because of this, deciding on the placement of onscreen elements becomes bigger challenge for interface designers. Great care must be taken when designing a usable interface where important items are always visible when they need to be.

===Two Hand Usage with Keyboard===
Some devices will also have hardware keyboards that either slide or flip out. Again, special attention must be paid to how users will interact with onscreen elements, as well as the physical keyboard.

In some cases, certain onscreen elements items may be hard to reach if a physical keyboard is present. Specifically, any widget placed at the top-most area of the screen can be difficult to reach while users are holding a device when the keyboard is slid out.

===One Hand Usage===
If you are planning an application that can be used with only one hand, consider making it run in portrait mode. This is because devices are typically easier to hold with one hand when positioned vertically (i.e., holding a device that is positioned in landscape mode with one hand can be very difficult). Remember that creating static designs (e.g., elements that fit only in one orientation) is not a best practice. Take care to design interfaces that can adapt easily to both horizontal and vertical orientations, as one cannot anticipate various users' preferences.

===Soft Keys and Touch Types===
Hildon, like other touch-screen frameworks, can accommodate a variety of different types of taps.

====Single Tap====
Any interactive elements like controls, buttons, links, et cetera, can be activated by tapping and releasing on top of the element's control area. The process of performing a Single-Tap is divided into three separate states. The following list describes those states and what users can accomplish with Single-Taps.

* ''Tap down:'' Once users touch the screen, a visual effect might be produced in the tapped element. For example, it can highlight a button or make a scroll indicator visible.
* ''Tap release:'' This state occurs when users lift up their finger after a tap down. This will activate the element that was tapped, such as a button or task launcher.
* ''Tap and cancel:'' If a fixed position element (such as a button) is tapped, but loses its focus (e.g., a user slides their finger out of the element's area), it will not activate that element.

====Two-Touch====
Two-Touch occurs when users tap an onscreen element and, without lifting their initial tapping finger, touch the screen with another finger. The Two-Touch can be used to activate element-specific context sensitive menus (similar to right-clicking an application icon in a traditional desktop scenario).

====Long-Tap====
Whenever a user taps and element, but keeps their finger pressed down, it produces a "Long-Tap." Long-Taps should only be used as a shortcut method of accessing a function that can otherwise be accessed another way. For instance, users can Long-Tap a contact in the Contact List to trigger a menu with additional options.

==Stylus Interaction==
Even though Hildon widgets are designed for finger use, certain devices may still include a stylus. However, designing stylus usage into an application is inadvisable unless a specific task requires extremely high precision: clicking links within a website (typically, websites are designed to be navigated via a small mouse cursor), imaging applications that features drawing or painting operations, and applications that require more widgets than can be viewed at one time (leaving no space for fingers).

==Dimensions==
Buttons that are designed to be clicked by a mouse or a stylus are not always very easy to be pressed by a finger or thumb because of their smaller sizes. The placement of widgets can also impact usability when considering finger usage (e.g., buttons that are placed right next each other require higher precision and may make them difficult to be pressed by fingers).

As discussed earlier, applications should be designed so that they adapt to the orientation of the screen. Using fixed sizes or static placement will make such adaptation very difficult.

The Hildon API provides several defined values in order to make creating variable control sizes easier:

===Hildon control size types===

*''HILDON_SIZE_AUTO_WIDTH'' Automatic width
*''HILDON_SIZE_HALFSCREEN_WIDTH'' Half of the screen width
*''HILDON_SIZE_FINGER_HEIGHT'' A finger height
*''HILDON_SIZE_THUMB_HEIGHT'' A thumb height
*''HILDON_SIZE_AUTO'' Automatic height and width

Use the variable sizes above when choosing the size of widgets based on certain use-cases. For example, if you place a button on a bottom corner of the screen, it is likely that that users will use their thumbs to press it. In this case, choose ''HILDON_SIZE_THUMB_HEIGHT'' for this button.

==Interaction Actions==
While many of the actions that can be performed with a Hildon-based device are similar to those found within a traditional desktop environment, several additional methods of interacting within Hildon are rather unique. The following sections describe these actions or interactions.

The following sections describe these actions or interactions.

===Copy, paste, cut===
The text input fields support the common actions of copying, pasting, and cutting. To perform these actions, users can use the standard hardware keyboard (if available) shortcuts Ctrl+c, Ctrl+v, and Ctrl+x, respectively.

===Panning===
The use of scrollbars within Hildon is discouraged, as the interface is intended to be manipulated with fingers. The concept of Panning refers to navigation of onscreen content by tapping and ''dragging'' a finger over the content. When users enter a view that contains content that cannot be fully viewed within the physical screen area, scroll indicators will appear on the right and bottom sides of the screen. These indicators tell users that the content can be Panned in order to navigate through the content.