Legacy Maemo 5 Documentation/Human Interface Guidelines/User Input

(wikify slightly)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
=User Input=
+
{{Legacy documentation}}
-
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 will 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==
-
The input hardware is the hardware that a Hildon device provides the user so he or she can interact with it. Once the user interacts with a component of the input hardware, feedback should be provided by the device.
+
 
 +
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 out there.
+
 
 +
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 given its basic but vital function.
+
 
-
* ''Lock/Unlock'': This is also a common key that will set the device either sensitive or not to the touch. Note that although common there are devices who substitute is by soft keys.
+
* ''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.
* ''Increase/Decrease'': Normally these keys are used to adjust the volume of the device sound or the zoom value in an application.
* ''Increase/Decrease'': Normally these keys are used to adjust the volume of the device sound or the zoom value in an application.
====Optional Hard Keys====
====Optional Hard Keys====
-
* ''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 shouldn't be activated when the keyboard is available or slid out.
 
 +
* ''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.
==Finger Interaction==
==Finger Interaction==
-
Devices using Hildon can be used with the fingers without the need of a stylus pointer. Also, those devices 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 will not be able to see it. Hence, it is of extreme importance to choose a good placement of the widgets as well as to offer ways of letting the user to do it himself or herself.
+
 
 +
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 will be in 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 hence, constitute 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===
-
Special attention is needed to the fact that some devices will also include an external keyboard that may slide-out from them.
 
-
In this case, the user keeps in the two hand mode but it might be difficult to reach for areas in the device screen as easily as if the keyboard wasn't out. So, take special attention to widgets that request interaction and placed on the top of the screen if the keyboard is out as they will require extra effort from the user.
+
Pay special attention to the fact that some devices also include an external keyboard that slides out.
 +
 
 +
In this case, the user keeps in the two hand mode but it can be difficult to reach for areas on the device screen as easily as if the keyboard was not out. So, pay special attention to widgets that request interaction and are placed on the top of the screen if the keyboard is out because they require extra effort from the user.
===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 portrait mode as it will not be easy to use in the landscape orientation. The horizontal size of the screen will be less than the vertical size and the applications should adapt themselves to it. The usage of fixed sizes or static placements will difficult that adaption.
+
 
 +
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 interaction in a Hildon device is made mainly by touching the screen so, there are different types of taps that are supported.
+
 
 +
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====
-
All interactive elements like controls, buttons, links, etc. can be activated 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'': Once the user touches the screen, a visual effect might be produced in the element he or she is touching. For example, it highlights a button or makes the scroll indicator visible.
+
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 release'': This state happens when the user lifts up his or her finger after a tap down. This will activate the element that was tapped such as a button or task launcher.
+
 
-
* ''Tap and cancel'': If the user taps down on a fixed position element (such as button) and then moves his or her finger out of the element's area, it will not activate that element.
+
* ''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 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====
-
Whenever a user taps and keeps the finger down for a longer time than what's usual, it will produce a ''long tap''. ''Long taps'' should be used only as a shortcut to a function that could be accessed in another way. Typically, a ''long tap'' will be 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 ==
+
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.
-
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).
+
 +
== 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.
==Dimensions==
==Dimensions==
-
A button that is meant to be clicked by 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 them difficult to be pressed by fingers.
 
-
The horizontal size of the screen will be less than the vertical size and the applications should adapt themselves to it. The usage of fixed sizes or static placements will difficult that adaption.
+
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 Hildon API provides defined values to make it easy to set the size of controls in a relative way
+
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.
===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.
-
You should use the size variables above when you need to choose a size for a widget that will require 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 his thumbs to press the button, hence 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 those actions are equal to what would be done in 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.
The following sections describe these actions or interactions.
The following sections describe these actions or interactions.
===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 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 should 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.

Latest revision as of 13:36, 18 October 2010

Image:Ambox_content.png
This article is legacy documentation, and is superseded by Forum Nokia documentation.
The Forum Nokia documentation is available as the Hildon 2.2 UI style guide, Fremantle master layout guide and the Hildon 2.2 widget UI specification

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.

Contents

[edit] 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.

[edit] 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.

[edit] Common Hard Keys

  • 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.
  • Increase/Decrease: Normally these keys are used to adjust the volume of the device sound or the zoom value in an application.

[edit] Optional Hard Keys

  • 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.

[edit] 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.

[edit] 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.

[edit] Two Hand Usage with Keyboard

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

In this case, the user keeps in the two hand mode but it can be difficult to reach for areas on the device screen as easily as if the keyboard was not out. So, pay special attention to widgets that request interaction and are placed on the top of the screen if the keyboard is out because they require extra effort from the user.

[edit] 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.

[edit] 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.

[edit] 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 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.

[edit] 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.

[edit] 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.

[edit] 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.

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.

[edit] 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 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 HILDON_SIZE_THUMB_HEIGHT for it.

[edit] 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.

The following sections describe these actions or interactions.

[edit] 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.

[edit] 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.