Lock Screen
Presented when user first wakes up the device.
Home
Access to open applications through the switcher. Favorite applications are presented, as well as access to launcher.
Launcher
Access to all applications available in the device
Overview of Gestures and Touch Interactions
Symbol Name Action Result
gesture-tap.png Tap (Press, Release) Open items/Select buttons/links
Insert cursor (in text field)
Reveal hidden controls
Stop kinetic scrolling
gesture-tap.png Long press (Press, Wait) Reveal Object Menu
Repeat (qwerty) key press
gesture-drag.png Drag (Press, Drag, Stop, Release) Pan/Scroll content
Paint to select text in text field (interaction needs to be first started horizontally, otherwise panning is triggered)
gesture-flick.png Flick (Press, Drag, Release) Kinetic Pan/Scroll content (in some cases, bringing in new content, such as Gallery, switching to next picture)
gesture-Double-tap.png Double Tap (2*Press&Release within time limit) Switch between zoom levels (touch screen)
Silence alert (accelerometer)
gesture-pinch.png Pinch (Press, Release) Zoom in/out (points touched on screen follow fingers)
gesture-twoFingerLongPress.png Two-finger long Press (Press, Wait, Release) Select text (non-editable text fields)
Lock Screen
The lock screen is presented when the user presses the power key to wake the device from idle state.
lock-screen1.png
The screen presents the wallpaper (which the user can personalize), date and time, and the lock action button. The device is unlocked by dragging the lock button into the wallpaper area.
Notifications are also supported in the lock screen. They stack up in a similar way to the Notification Drawer.
Launcher
The launcher is a view that contains links to all applications installed in the device. In the launcher, the user can browse through the applications and add up to 4 links to the quick launch bar at the bottom of the screen. In editing mode, the user can also change the order of application links.
Launcher-1.png
Applications are presented in a 4 x 4 grid. In the case where there are more than 16 applications, more pages of the same grid are added to the right. Paging through the different grids is done by swiping the current grid off screen, hence bringing the new one into view. When the user installs a new application, it goes to the end of the application grid.
The user opens the launcher by selecting an icon at the bottom of the Homescreen (placed together with Favorite Application links). To close, the same icon is used.
All applications require a name and icon for the launcher.
Switcher
Users will often want to (or have to) use more than one application at a time, such as listening to music while writing a message. This is known as multitasking, and the switcher is an area where multiple tasks are managed. The basic behavior of the switcher is as follows:
switcher.png
When an application is first launched, a new task starts. This task is represented in the switcher by a live thumbnail of the current content within the application, that is a blog web page would always display the latest blog entry. The switcher is always accessible via the home button in the top left corner.
Whenever a second application is opened, the new task is included within the switcher. With that, MeeGo allows users to quickly switch between applications by pressing the home button. Applications can be opened from the launcher and from other applications, such as opening a map from an email.
When the user clicks on an application in the launcher, that is already open in the switcher, the system opens the window that was already open. It does not restart the application.
Order of Applications, Browsing, and Changing Modes
Tasks are shown in the order they were opened, from left to right. Every time a new task is opened, it pushes the previous task panels to the left and adds its thumbnail view to the far right.
The default view of the switcher presents the latest accessed task in focus, with the other, different tasks running to the right. Thumbnails are presented in chronological order, as they are opened.
switcher-2.png
It is possible to browse through the thumbnails, one by one, by slowly dragging them, or to use a quick swipe to rapidly pan from one side of the list to the other. During this quick swipe, a tap stops the transition at tapped point, but does not open the application. To open the application, the user needs to tap the desired thumbnail.
Users can use a pinch multi-touch motion to change the switcher into an overview mode. By pinching in, thumbnails move into a grid display. The grid can scale up to a 3x3 version, thereafter the switcher then starts to create new pages. Pinching out, while in the grid mode, changes the view back to larger stacked mode.
Core Interactions
UI Feedback
Direct feedback refers to the response the user receives when using the touch UI. When there is a change, the user must get feedback. Indirect feedback refers to the response the user receives while, either not using the device, or using it so that the attention is not directed to the UI.
Direct feedback can be haptic, auditory, or visual feedback from interaction with the touch screen or hardware buttons. Indirect feedback is typically in the form of notifications. Notifications may contain both sound and haptics, but they can also be visual only, or contain only visuals and sounds (or in principle also visuals and haptics alone).
When you need to catch the user’s attention, you can use auditory and haptic feedback, in addition to visual feedback. The user’s attention is usually directed away from the device, when the device’s UI is locked and the screen is blank. However, the user’s attention can be elsewhere also, when the UI is in use. A time-consuming operation may cause the user to look elsewhere, or the user’s attention may be on the hardware keyboard, so the events on the screen are easily missed. When feedback is needed almost immediately after the user’s last action (such as when the user tries to send an email without defining a recipient), a visual notification is usually enough, because the user’s attention is already on the device.
In some cases, you can also use auditory and haptic feedback to emphasize the visual message. For example, a confirmation query may have an additional questioning sound to emphasize that the user needs to pay special attention to the device. However, be careful with this kind of use for sounds and haptics, because users find it annoying if the UI requires a lot of attention all the time. You can use sounds alone for presenting events, or sounds combined with visuals, but do not use sounds alone with haptics.
You can use haptic feedback alone when you do not know whether the user’s attention is on the device. For example, when downloading a web page lasts so long that the user’s attention is not likely to be on the device, even though the device is not locked, a subtle tactile pulse can be a useful indicator.
You can use tactile feedback alone, when it is appropriate to confirm the user’s action, but a visual confirmation message is too much. For example, connecting the charger and the device starting to charge (as opposed to not starting, due to a wrong charger type, for example). In this case, haptic feedback can also be used because the user is in physical contact with the charger connector and the device.
Note that the presentation of alerts and notifications depends both on the settings in the active profile and on the current UI state. For example, during a phone call, the auditory part of many alerts is changed (presented as a beep, or the auditory part can be a simplified version of the original, or the sound may be omitted altogether).
Text Input
MeeGo provides support to both virtual and hardware keyboards.
The virtual keyboard is invoked automatically when an input field is in focus (that is when the user taps an input field). The title bar and status disappear to optimize screen real estate. It has a portrait and landscape layout, opening according to the orientation it is being called from. If the user rotates the device, the layout is smoothly changed according to the new orientation.
text-input-1.png
The user can close the virtual keyboard by either tapping outside the text field or by dragging down the virtual keyboard. Note that the virtual keyboard does not act as a drawer in the sense that the user cannot pull it up. It will come up again once the text field is actioned again.
text-input-2a.png
Whenever the hardware keyboard is opened, the virtual keyboard does not get loaded.
Clearing
Pressing backspace clears a single character. The long press clears characters with key repeat. Long press duration and key repeat rate are the same as with a hardware keyboard. If the user selects the text and hits backspace, the whole selection is cleared. This is script (written language) dependent.
Language
The language is set automatically, based on the UI language that the user selects in the first device startup. This can be changed in Settings.
Extra keyboard line
The framework offers the possibility of customizing the keyboard by adding an extra virtual line to the pad. This line may receive custom-made buttons, for example, a ‘.com’ button for the browser keyboard. When the hardware keyboard is opened, the extra virtual line still appears (it is possible to dismiss it by dragging it down).
extra-line1.png
In addition, the system uses this extra line for advance functions, such as Copy/Paste. If the user selects a section of the text (drag and hold gesture), the extra line appears with the copy function available. Once the user actions copy, the same button reverts to paste.
Confirming
In most cases, applications present confirm buttons as part of their UI. This is true when sending a message or login in a website. Other applications perform actions as the user types. The perfect example is search, which automatically updates the list result with every letter typed.
However, other methods can be used. In a one liner text field, the enter key works as a natural confirmation key (similar to websites and other operating systems). This works when entering a password, for example.
confirming.png
It is also possible to add a confirmation button to the extra line. It is not recommended for UIs like messaging, where an overall view is desired before confirming (tapping outside the text brings the whole UI back), but useful for quicker inputs. This option could be used in a form, with a next action linking to the next text field.
Full Screen Mode
For applications that need to provide a more immersive experience, Full Screen Mode is available. It is important, however, to always provide a way out of the application (and to application navigation when appropriate). Full Screen can be presented in two different ways:
Controls a tap away
All controls (Title Bar, Status, extra controls, etc) are removed, presenting only the maximized content. Controls are made visible by tapping the screen. This is especially useful for media-related experiences.
fullscreen-01.png
Fixed controls
Because MeeGo may run in devices with no other hardware navigation keys, it is important to provide a persistent way out of the application. In some cases, it is not possible to use the tap to show the controls (for example, a Flash Player application displaying interaction content). Whenever that happens, a persistent access to exiting the full screen is still mandatory (back or close).
Embedding Exit in Application Content
In a few specific cases, like games, a more immersive experience might be desired, with no chrome. It is only possible to remove the persistent navigation out of the application if an easy to access exit command is available.