Touch UI Component Guidelines - Intel Developer ZoneTouch UI Component Guidelines Return to Contents...
Transcript of Touch UI Component Guidelines - Intel Developer ZoneTouch UI Component Guidelines Return to Contents...
Copyright © 2011, Intel Corporation. All rights reserved
Touch
UI Component GuidelinesVersion: 1.214/02/2011
Author:
Shai Bowman - [email protected]
Copyright © 2011, Intel Corporation. All rights reserved
Page 2 of 62Touch UI Component Guidelines
Version: 1.2 15/12/2010
CONTENTS
3 INTRODUCTION4 What is this document?
5 How to use this document
6 Terminology
7 OVERVIEW8 Hardware
11 Grids (portrait)
12 Grids (landscape)
13 Orientation & content (horizontal)
14 Orientation & content (vertical)
15 Resizing & scale
16 COMMON BEHAVIOURS17 Focus
18 Tiles
19 Multiselect
20 Action Ordering
21 Gestures
22 Scrolling
23 Scroll Actions
24 COMMON FUNCTIONALITY25 Toolbar
26 Toolbar (overlay)
27 Search
28 Search (pull down)
29 Search (with virtual keyboard)
30 Search (with hardware keyboard)
31 Search criteria
32 Content on external devices
33 Attachments
34 Attachments (unrecognised)
35 List view
36 Grid view
37 Full screen
38 TEXT FUNCTIONALITY39 Overview
40 Repositioning cursor
41 Selecting text
42 Modifying selection
43 COMMON COMPONENTS44 Object menu
45 Object menu
46 Flyout
47 Drag bar
48 Drag bar
49 Buttons
50 Dividers
51 Progress bar
52 Dropdown bar
54 Sliders
55 Toggles
56 Media tiles
57 Content reveal bars
58 Headers
59 Letterbar
60 Preview strip
61 List element
62 Popup overlay
Copyright © 2011, Intel Corporation. All rights reserved
Page 3 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
INTRODUCTION
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 4 of 62Touch UI Component Guidelines Return to Contents
This document gives an overview of the MeeGo Touch user interface and describes its essential parts, giving examples of how to implement the interface elements.
The document can be used as an introduction or as reference material. It provides background material to help user interface designers make decisions about their products.
This document gives an overview and provides guidelines for designing good applications, but not all the information required to write the software. This is intended to be a compact and easy-to-read guide, which means leaving out many details that can be found in other related documentation. For more on implementation, refer to the Related documents and Related chapters lists, these provide links to further detailed information and guidance.
There is no general discussion about good usability; instead this document clarifies how the elements of the user interface are to be used in practice.
The content is independent of product-specific hardware, so the guidelines apply to any product that implements the user interface style. Sometimes this means leaving out information that would be appropriate for one product but might not be appropriate for another.
Note: the illustrations in this document are examples only and are not necessarily pixel perfect renditions of the actual user interface.
INTRODUCTION
What is this document?
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 5 of 62Touch UI Component Guidelines Return to Contents
The instructions found in this guide are intended to be used in conjunction with the relevant template files. Adherence to these guidelines will not only insure proper implementation of the various interactive features and functions, but also provide for consistent design and an overall visual interface as products are updated and evolve in the future.
Related content
Where there is relevant information that is included in other chapters or documents, refer to the Related documents and Related chapters lists, these provide links to further detailed information and guidance.
You can also find a Return to Contents link on every page next to the current page number.
The following documents can be considered essential reference for all product development:
Related documents
• MeeGo Brand guidelines
• MeeGo Interaction Principles (Released 2011)
INTRODUCTION
How to use this document
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 6 of 62Touch UI Component Guidelines Return to Contents
In order to use this document succesfully, it is crucial that you have a good grasp of the terminologies used to describe aspects of the MeeGo system. The terms referred to in this chapter are specific to this document whilst further detailed terminology can be found elswhere.
Related documents
• MeeGo Interaction Principles (Released 2011)
• Home screen The central point of access to all the applications and content on your device - it is the first screen you see when you switch on your device.
• Panel Is a UI element on the Homescreen which acts as a window or launchpad it to an application. Panels act as entry points to your devices - they surface information to you, for example the Friends panel surfaces feeds from your social network groups, the Video panel surfaces movies and TV content you have been watching.
• Application Software which performs a specific function for the user or, in some cases, for another application. An application can vary from a simple single main view showing the weather to a content-intense application such as Music.
• Application UI plug-ins Extensions for a given application
• View A specific state of an application.
• UI components The building blocks of a UI, such as sliders, text fields, and buttons.
INTRODUCTION
Terminology
Copyright © 2011, Intel Corporation. All rights reserved
Page 7 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
OVERVIEW
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 8 of 62Touch UI Component Guidelines Return to Contents
MeeGo Touch is designed for Intel Atom processors with 1gb of RAM and a multi touch screen of 4-10”. The primary orientation for 4-7” is portrait, and landscape for 10” and over.
The device will require a hardware home button.
The device must have a network connection. WiFi is expected, a mobile connection may also be available.
Related documents
• MeeGo Interaction Principles (Released 2011)
OVERVIEW
Hardware
1366 pixels
768 pixels
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 9 of 62Touch UI Component Guidelines Return to Contents
Components
• Status bar Provides overall system status such as time, battery life etc. This is part of the system and is outside an applications ability to theme. In a future version 3rd party apps will be able to place a status icon in this bar. This is visible at all times and in all applications unless you are in full screen mode.
• Toolbar Every application must contain a toolbar.
• Content view The content view takes up most of the screen. This is where your application happens as far as the user is concerned. There are a number of different components that can be placed in this view.
• Action bar (Optional)
OVERVIEW
Application layout (portrait)
MeeGo Touch application is intended to be a direct and simple window onto content. Its interface is intended to be as invisible as possible and where visible to adapt to the user.
MeeGo Touch is there to help people get lots of things done, quickly.
App layout portrait.png
• Appendix link
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 10 of 62Touch UI Component Guidelines Return to Contents
App layout 1.png
• Appendix linkComponents
• Status bar Provides overall system status such as time, battery life etc. This is part of the system and is outside an applications ability to theme. In a future version 3rd party apps will be able to place a status icon in this bar. This is visible at all times and in all applications unless you are in full screen mode.
• Toolbar Every application must contain a toolbar.
• Content view The content view takes up most of the screen. This is where your application happens as far as the user is concerned. There are a number of different components that can be placed in this view.
• Action bar (Optional)
OVERVIEW
Application layout (landscape)
The landscape layout is very similar to the portrait layout. The user may change their orientation at any time or alternately hard lock the orientation into one view.
Applications may choose their ‘natural’ orientation (such as a video player only being available in landscape). In this case the application is always displayed in its ‘natural’ orientation, regardless of user setting, however all other applications will continue to respect this.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 11 of 62Touch UI Component Guidelines Return to Contents
OVERVIEW
Grids (portrait)
When creating an application one of the most important things to get right is the layout, the UI is crucial to conveying this. If the user feels that the layout is haphazard or poorly thought out they will lose confidence with the design.
Grids are utilised as a structural foundation for a design, that can enhance the overall look and feel by allowing you to create a stronger layout for your elements.
Grids for MeeGo must always be fluid so that they adapt to different environments and space.
Grid view
• Safe-areas These provide a ‘buffer’ space between UI elements, content and the physical screen. These are not specific distances, but rather visual approximations.
• Content allignment/spacing Content should be distributed according to the item size and available space, whilst considering the need for safe-areas, target size, and clean space around items.
• Touch target size - MeeGo recommends:
• A touch target size of 9mm
• A minimum touch target size of 7mm
• A minimum spacing between elements of 2mm
• The visual size of a UI control to be 60-100% of the touch target size.
List view
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 12 of 62Touch UI Component Guidelines Return to Contents
OVERVIEW
Grids (landscape)
When creating an application one of the most important things to get right is the layout, the UI is crucial to conveying this. If the user feels that the layout is haphazard then they will lose confidence with the design.
Grids are utilised as a structural foundation for a design, that can enhance the overall look and feel by allowing you to create a stronger layout for your elements.
Grids for MeeGo must always be fluid so that they adapt to different environments and space.
Grid view
• Safe-areas These provide a ‘buffer’ space between UI elements, content and the physical screen. These are not specific distances, but rather visual approximations.
• Content allignment/spacing Content should be distributed according to the item size and available space, whilst considering the need for safe-areas, target size, and clean space around items.
• UI fixed height components Core UI elements like toolbars should adjust their width values dependent on the available screen width whilst maintaing a fixed height.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 13 of 62Touch UI Component Guidelines Return to Contents
OVERVIEW
Orientation & content (horizontal)
Though the user may alter the current orientation at any time, the way that content is distributed (ie. scrolls) is particular to each application.
There are no hard and fast rules but some accepted standards are:
Horizontal
• Viewing media (photos, videos, etc)
• Web browsers (off screen content in portrait)
Vertical
• Textual content (documents, web browsers)
• List views
Content distribution direction
Content distribution direction
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 14 of 62Touch UI Component Guidelines Return to Contents
OVERVIEW
Orientation & content (vertical)
Though the user may alter the current orientation at any time, the way that content is distributed (ie. scrolls) is particular to each application.
There are no hard and fast rules but some accepted standards are:
Horizontal
• Galleries (photo, video, etc)
• Web browsers (off screen content in portrait)
Vertical
• Textual content (documents, web browsers)
• List views
Content distribution direction
Content distribution direction
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 15 of 62Touch UI Component Guidelines Return to Contents
OVERVIEW
Resizing & scale
When designing for variable screen sizes or re-purposing content, it is essential to be aware of the following:
• All functional toolbars are UI fixed height elements and as such should only be resized horizontaly.
• Safe areas are indicators only, be careful of not attempting to ‘squeeze’ the same amount of content into a smaller space.
• Reordering and redistribution of content items provides the most effective way of resizing.
• Resized content Content grid has been reordered and redistributed to compensate for a smaller screen area whilst still maintaining adequate spacing between items.
10” touch 7” touch
• UI fixed height components Core UI elements like toolbars should adjust their width values dependent on the available screen width whilst maintaing a fixed height.
4” touch
Copyright © 2011, Intel Corporation. All rights reserved
Page 16 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
COMMON BEHAVIOURS
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 17 of 62Touch UI Component Guidelines Return to Contents
Function & UsageIn interaction design, focus creates a special modal context for one part of the screen. Since this is a system designed for touch interfaces where any part of the screen could be active next we don’t use focus very often.
However, there are a few examples that break the rule:
• Overlays can occlude but not have focus.
• Flyouts implicitly create focus since they’re closed if the user taps away.
• Text entries have focus (useful since they create or imply a keyboard context where the users next move is more predictable).
Related chapters
• Flyout
• Popup overlay
COMMON BEHAVIOURS
Focus
Search 5.png
• Appendix link
Style2_05_Notifications.png
• Appendix link
Nav bar overlay.png
• Appendix link
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 18 of 62Touch UI Component Guidelines Return to Contents
Function & UsageMuch of the MeeGo touch interface is designed around tiles. These are small segments of information that are designed to repeat. Each type of information you have in your application can have a tile, although usually they fall into some well worn types, where all you need to do is map the metadata from your information into a tile type.
• Tiles work equally well in grids and lists
• The flexibility of tiles will let you quickly and easily export your applications contents upwards and outwards to the my touch area and into relevant panels
• It also allows you remix your application just as quickly.
Related chapters
• Media tiles
COMMON BEHAVIOURS
Tiles
MeeGo_PhotoPlayer_04.psd
• Appendix linkComponents
• Image tile large Tiles can be resized to suit content inline with the guidelines.
• Image tile small Tiles can be resized to suit content inline with the guidelines.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 19 of 62Touch UI Component Guidelines Return to Contents
Function & UsageIf you wish to allow multiple select then in an object menu or action bar the user can enter multiple select mode. This will change the view, so you can add or remove the UI for this mode.
If multiple select was entered from an object menu then the selected item will be enabled.
The user toggles the selection state of items with a tap.
Related chapters
• Grid view
COMMON BEHAVIOURS
Multiselect
PhotoMultipleSelectMode_0001b.png
• Appendix linkComponents
• Non selected item
• Selected item Visual indicators are required to distinguish between the two states.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 20 of 62Touch UI Component Guidelines Return to Contents
Function & UsageIf actions are grouped together then they should be ordered with positive actions on the left and negative actions on the right with the most important actions on either edge.
In a vertical arrangement left to right should be replaced by top to bottom.
Related chapters
• Buttons
COMMON BEHAVIOURS
Action Ordering
action ordering.jpg
• Appendix link
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 21 of 62Touch UI Component Guidelines Return to Contents
Function & UsageThe following is a lst of available gestures.
COMMON BEHAVIOURS
Gestures
Symbol Name Action Result
Open items/Select buttons/linksInsert cursor (in text field)Reveal hidden controlsStop kinetic scrolling
TAP (Press, Release)
Reveal object menu LONG PRESS (Press, Wait)
Not defined as a global gesture for the first releaseReserved for future use DOUBLE TAP
(2 * Press & Release) within time limit
Zoom in/out (points touched on screen follow fingers) PINCH (Press, Release)
Select text (non-editable text fields) 2 FINGER TAP (Press, Wait, Release)
Pan/Scroll content (also bring in new content, e.g. Gallery, switching to next picture)Paint to select text (in text field) DRAG (Press, Drag, Stop)
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 22 of 62Touch UI Component Guidelines Return to Contents
Function & UsageA scroll action is triggered by performing a drag action (press, drag, release), where the content will follow the user’s finger. This action overrides the standard tap action that would normally be performed on press and release if it is done on objects.
By default always use kinetic scrolling.
If a view is scrollable it will have a small visual cue to indicate that the view is scrollable. This can be in either direction.
Gestures
DRAG
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON BEHAVIOURS
Scrolling
MeeGo_Ebook_01x600.psd
• Appendix linkComponentsSeveral types of views can be scrollable and can scroll vertically, horizontally or both depending on the component, examples include:
• Content Views
• Sidebars
• Letterbars
• List Views
• Grid Views
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 23 of 62Touch UI Component Guidelines Return to Contents
Function & UsageScroll actions can also be applied to other components. However, the results may differ.
COMMON BEHAVIOURS
Scroll Actions
Components
BUTTONS (both generic and check, toggle etc.)
VIEWS
FULLSCREEN SLIDESHOW
Tap gesture result
Performs the action the button represents
None if tapped on an empty area. Component action according to the component in the view.
Unhide Actionbar
Scroll gesture result
Performs button action if the finger is released inside the button. Doesn’t perform the button’s action if the finger is released outside the button. The button’s visual state is affected to reflect this.
Scrolls the view. If the finger is release on an external component (for example, a button in an action bar) the component’s action is not performed. The button’s visual state is not affected to reflect this.
Show next/previous image
Copyright © 2011, Intel Corporation. All rights reserved
Page 24 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
COMMON FUNCTIONALITY
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 25 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Every application must contain a Toolbar. This contains the back button, application View options, view label, and Action menu button.
COMMON FUNCTIONALITY
Toolbar
Search 1.png
• Appendix link
• Actions menu
MeeGo_IM_01.psd
• Appendix link
• View menu• Back button
• View label
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 26 of 62Touch UI Component Guidelines Return to Contents
Flow
This process describes the display of the Application toolbar overlay.
Gestures
TAP
COMMON FUNCTIONALITY
Toolbar (overlay)
App layout 1.png
• Appendix link
Tap on the application Views button to open a list of available filters.
Nav bar overlay.png
• Appendix link1 2
• Tap outside the overlay or the Views options button again to remove overlay and back to Step 1.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 27 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A standard search bar component suitable for any application that has searchable content and consists of a simple text entry field.
This component must always and only appear in the application toolbar.
The user types into the text entry field. Searching on the touch is always instant. So results appear whilst you are typing. Autocomplete results may pop up in menu component too. If there is a hard keyboard on the device then any typing without setting an explicit focus should go to this area.
Use it anywhere that requires searchable content.
Components
• Search Search area above the fold (off screen and not visible on screen all the time.
• Status bar Never moves position and is always visible, only in full screen mode can it be hidden.
• Toolbar Includes view label & Action and view drop down buttons. The Toolbar is consistent in an application, the functionality doesn’t change in the different application levels.
• Action bar Includes actions specific to this application. Only display action bars when applications have one.
COMMON FUNCTIONALITY
Search
Search 1.png
• Appendix link
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 28 of 62Touch UI Component Guidelines Return to Contents
Search 1.png
• Appendix link
Tap + drag from the navigation or application bar pulls down the search area onto the screen. The search area moves under the status bar pushing down the content on the page. In the content area when at the top of scrollable content lists or grids Tap + drag pulls down the search.
Flow
This process describes the search component transition state from OFF to ON-SCREEN using the Drag Gesture.
Gestures
DRAG
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Search (pull down)
Search 2.png
• Appendix link
Navigation bar and search are pushed down, status bar stays at the top. Main content area does not scale (no shrinking).
1 2
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 29 of 62Touch UI Component Guidelines Return to Contents
Search 1.png
• Appendix link
Application - search off screen
Flow
This process describes the search component transition state from OFF to ON-SCREEN using the Drag Gesture and how to introduce the virtual keyboard.
Gestures
DRAG
TAP
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Search (with virtual keyboard)
Search 4.png
• Appendix link
Search box on screen
Search 5.png
• Appendix link
Open keyboard
Search 7.png
• Appendix link
Enter text - Instant search results (semi transparent overlay goes away when entering text)
• Hide button hides virtual keyboard
• Tap on text field opens keyboard. See Step 3
• Tap in this area closes virtual keyboard and returns to Step 1.
• Hides virtual keyboard
1 2
3 4
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 30 of 62Touch UI Component Guidelines Return to Contents
Search 1.png
• Appendix link
Application - search off screen
Flow
This process describes the search component transition state from OFF to ON-SCREEN using the Drag Gesture when using a harware keyboard.
Gestures
DRAG
TAP
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Search (with hardware keyboard)
Search 2.png
• Appendix link
Search box on screen
Search 9.png
• Appendix link
Open keyboard
Search 8.png
• Appendix link
Enter text - Instant search results
• Tap on text field opens keyboard. See Step 3
• Transparent Overlay Tap in this area returns to Step 1
1 2
3 4
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 31 of 62Touch UI Component Guidelines Return to Contents
The following is a list of search criteria relevant to each application:
COMMON FUNCTIONALITY
Search criteria
Music
• Artists
• Name of song
• Albums
• Audio books
Video
• File names
Photos
• File names
• Albums
• Date
Calender
• Event titles
• Dates
• To (name)
• From (name)
• Subject
Notes
• Note name
• Text in notes
Task
• Task name
• Text in task
Instant Messenger
• Contacts name
• IM messages
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 32 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Connected devices (external storage such as USB keys or hard drives) with content plugged into the touch:
• Content will be displayed in the the applications which recognise the content type format.
• If content on the connected device is not recognised by the touch the content will be displayed in the document reader but will not be readable or viewable until an application supports the format or a 3rd party application supports it.
• Connected content will be surfaced in applications at the top of the local content on the touch. The connected content will be at the top in alphabetical order.
Related chapters
• Grid view
.
COMMON FUNCTIONALITY
Content on external devices
Photos_1.png
• Appendix linkComponents
Connected content Is recognised by an application is surfaced with visual indicator showing it is not permanently on the device.
Visual indicators Each connected device or network displaying photos in the photo app will have a different visual indicator to show that the photo is stored on a different source:
USB connected hard drive
Second USB connected hard drive
Connected to network (storage)
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 33 of 62Touch UI Component Guidelines Return to Contents
Attachments 1.png
• Appendix link
Tap attachment link to view options overlay.See Step 2
Flow
This process describes how a recognised attachment is opened or saved.
Attachment file types
• Documents
• Pictures
• Movies
• Music
In these four categories there are multiple formats, some will be recognised by the touch applications others will not.
Gestures
TAP
Related chapters
• Gestures
• Popup overlay
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Attachments
Attachments 2.png
• Appendix link
Open and Save options displayed.
Attachments 3.png
• Appendix link
• Selecting Open will cause the file to be opened by the relevant application .
1 2
3
• Selecting Save will automatically save the file to the local device storage. See Step 3
• Saved file confirmation overlay.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 34 of 62Touch UI Component Guidelines Return to Contents
attachments unrecognised.png
• Appendix link
Grid view of available documents with visual differentiation.
Flow
This process describes how an unrecognised file attachment is handled.
File types which are not Open or Save recognised by any application will by default be viewable (as a thumbnail with a note that this file is not viewable) in the document reader. When 3rd party apps are available with other file types the previously unrecognised files will be available in these applications.
Gestures
TAP
Related chapters
• Gestures
• Media tiles
• Grid view
• Popup overlay
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Attachments (unrecognised)
attachments unrecognised 2.png
• Appendix link
Display of unrecognisable file formaterror message.
1 2
• Selecting an unrecognised file will result in an error message. See Step 2
• Files which are not readable by the application are visually distinguished from recognised files.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 35 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A list view has the same type of information repeated vertically in a list.
If there are multiple fields then you can put reorder headers at the top of the list. Tapping one of these will reorder the list around the selected field. If this is done then the currently selected field should be visually differentiated.
Gestures
TAP on an item to select it.
LONG PRESS for an Object menu.
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
List view
music_list.png
• Appendix linkComponents
• List item
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 36 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A Grid View consists of rows of equally sized items. These can have labels if needed.
Tiled Galleries can be used to display large numbers of items. This view is best used when the items are graphical, ie. images and videos.
Good places for this component to be used are photo albums, video galleries etc.
Gestures
TAP on an item to select it.
LONG PRESS for an Object menu.
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON FUNCTIONALITY
Grid view
Music_Landing_02.png
• Appendix linkComponents
• Item tile Tiles can be resized to suit content inline with the guidelines.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 37 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
The status bar and application toolbar must always be available within an application. However, some applications benefit from being able to totally control the screen, especially media playback and games.
These applications may enter full screen mode, where all external controls are hidden, however they must have a view where the controls return, either in the case of media, on screen tap (which also shows playback controls) or in the case of games, by pressing a button on the screen which must always be visible.
In the event that we specify a hard ‘quit’ button or override functionality onto hardware buttons then these rules may be relaxed slightly.
COMMON FUNCTIONALITY
Full screen
Camera.png
• Appendix link
Copyright © 2011, Intel Corporation. All rights reserved
Page 38 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
TEXT FUNCTIONALITY
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 39 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Text entries can be of any size. Unlike most elements they have focus since when they are active you can type text directly into them, selection behaviour changes to allow text selection and they may, depending on device and orientation, also bring up an onscreen keyboard.
TEXT FUNCTIONALITY
Overview
Field types Examples
Single line input field - application screen or flyover Search input, username/password entry
Multi line input field - application screen or flyover Write email
Multi line input field, limited characters - app screen or flyover tbd
Multi line input field, limited height - app screen or flyover tbd
Non-editable text field (text content area) View email, view web site, view chat
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 40 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A description of the process for repositioning the cursor within a text field.
Gestures
TAP
Related chapters
• Gestures.
TEXT FUNCTIONALITY
Repositioning cursor
IM text3.png
• Appendix link
• Tap The user can tap anywhere in the selected text field to move the cursor to this new position.
• Cursor The cursor is now repositioned in the middle of the user’s tap area. cursor can be tapped and ‘dropped’ only, it cannot be touched and dragged. cursor can be dropped anywhere - inbetween words or within words.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 41 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A description of the process for selecting text within a text field.
Gestures
DRAG
Related chapters
• Gestures.
TEXT FUNCTIONALITY
Selecting text
Notes2.png
• Appendix link
• Drag tapping and dragging horizontally [zig-zagging over multiple lines] inside an active textfield selects the text that the user has dragged across. Only whole words are selected.
• Selection The interface indicates selected words (shown in yellow), and shows selection end points as actionable touch targets (shown in blue). The blue end points can be used to modify the selection See next page.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 42 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A description of the process for modifying a text selection within a text field.
Gestures
TAP
DRAG
Related chapters
• Gestures.
TEXT FUNCTIONALITY
Modifying selection
Photos_1.png
• Appendix link
• Tap The user taps selection handle at end point of selection to change its position.
• Tap The selection handle is shown in ‘charged’ state. user then taps again at desired new position of selection end point.
• Drag This releases the handle at its new position and updates text selection.
Copyright © 2011, Intel Corporation. All rights reserved
Page 43 of 62Touch UI Component Guidelines Return to Contents
Version: 1.2 15/12/2010
COMMON COMPONENTS
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 44 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
The object menu is one of the most important components in the UI design.
• Components can have a single action attached, if you wish to attach further actions then you almost always want to use an object menu.
• The user should be able to long press then slide their finger over the required item then release to select, all in one fluid motion.
• This component also works best in views where the context actions are likely to be different for a lot of objects so that they don’t fit in a button toolbar. Use this component when you have a lot of items on your screen and space is limited.
.
COMMON COMPONENTS
Object menu
PhotoMultipleSelectMode_0001.png
• Appendix linkComponents
An object menu allows further actions to be attached to an object. It appears in an overlay. It should be visually attached to the object it relates to.
• There is no limit to the number of options in an object menu, but it should not be more than 7 for an optimum design.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 45 of 62Touch UI Component Guidelines Return to Contents
Object menu 2.png
• Appendix link
Without lifting the finger, DRAG over the required item then release to select, all in one fluid motion.
2 Object menu 1.png
• Appendix link
Use LONG PRESS to open the context menu.
Flow
This process describes how to activate an Object menu and make a selection.
Ordering in an object menu
• Positive at the top of the list.
• Share items in the middle of a list.
• Negative items in the bottom of a list.
Gestures
LONG PRESS
DRAG
Related chapters
• Gestures
• Action ordering
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON COMPONENTS
Object menu
1
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 46 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A flyout is an overlay that is shown as the consequence of pressing a button. It should be visually connected to the button that spawned it and hidden again if the button is toggled. The flyout is also hidden if the user presses outside it, or presses the close button in the corner.
• Only one flyout can be visible at a time in an application.
• Flyouts do never obscure the button that spawned it.
• Flyouts can contain an arbitrary set of components and have an arbitratry click depth however it is not recommended to place flows of more than three steps within a flyout due to their ease of dismissal.
• Flyouts can be invoked in any direction from a button but avoid unnecessary scrolling.
Related chapters
• Gestures
• Action ordering
.
COMMON COMPONENTS
Flyout
Clocks B3 Main Edit Timer Name.png
• Appendix linkComponents
• Selected button
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 47 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
You may use a drag bar to add a quick way into drag and drop. This overrides the normal scroll behaviour for the element it is a part of. If the user drags, starting on an element containing this drag bar then they will drag and drop as described above.
Drag bars are not a common piece of UI and should not be overused. For most uses of drag and drop you should usually be using a specific mode, rather than adding this to components.
.
COMMON COMPONENTS
Drag bar
Components
• Active area This is the area that responds to user interaction.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 48 of 62Touch UI Component Guidelines Return to Contents
p.18.3.1 Note in new place.png
• Appendix link
Select list item to re-order with LONG PRESS
Flow
This process describes the process for re-ordering lists with Drag bars.
Gestures
LONG PRESS
DRAG
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON COMPONENTS
Drag bar
• Do not release pressure and begin dragging. See Step 3
1 File name.png
• Appendix link
Item becomes ‘draggable’.
2
File name.png
• Appendix link3
• Release when in the correct location.
File name.png
• Appendix link4
DRAG item to preferred location between items andrelevant items beneath should automatically re-order.
Selected list item is now re-ordered.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 49 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Buttons are at the core of the system. They can be used to perform any action and have a number of states. Button feedback when tapped is especially important.
A button can contain either icons, text, or both text and icons.
Related chapters
• Gestures
• Action ordering
.
COMMON COMPONENTS
Buttons
Components
• Normal This is the default latent state for buttons and can be used for all button types.
• Choice distinction Appropriate for where there is a clear an obvious choice to be made between options. Visual distinction between choices.
• Toggle Allows for simple ‘switching’ between 2 distinct and opposite choices.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 50 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Dividers can be used to group related items in a view. Use aheader when the items have a clear group name, but use a divider when this is not the case.
Dividers are primarily a visual element but they have some relevance in information ordering and as such are dealt with in these guidelines..
COMMON COMPONENTS
Dividers
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 51 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A progress bar can be shown for actions that are likely to take more than 10 seconds to complete and that have a definite and measurable end.
A text string on top of the bar is optional and could be overwriten by the device with custom text (i.e. to say “3 minutes to go”)
.
COMMON COMPONENTS
Progress bar
Components
• Active A visual indicator of completed activity.
• Active A visual indicator of un-completed activity.
• Inactive
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 52 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Select a single item from a list in minimal space with a dropdown. This essentially opens a flyout with an embedded list. The dropdown should display the current selection. When open it can be used to select a single item with a tap and closes on selection.
The flyout should be positioned below the dropdown, however if the entire list will not fit into the available space below and there is more space above then it should be positioned above the dropdown. If, despite being positioned in the longest direction there are still too many items, the flyout should be able to scroll.
COMMON COMPONENTS
Dropdown bar
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 53 of 62Touch UI Component Guidelines Return to Contents
Clocks_B2_Edit_Alarm-3_Snooze_Drop_down.png
• Appendix link
Without lifting the finger, DRAG down to the required item then release to select, all in one fluid motion.
2 Clocks_B2_Edit_Alarm-2_Time_Spinner.png
• Appendix link
Use LONG PRESS to open the Dropdown menu.
Flow
This process describes how to activate a Dropdown bar and make a selection.
Gestures
LONG PRESS
DRAG
Related chapters
• Gestures
Related documents
• MeeGo Interaction Principles (Released 2011)
COMMON COMPONENTS
Dropdown bar
1
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 54 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Sliders are used to modify continuous values and can be displayed in any orientation. They can be set with either a tap and drag or a tap on the place the user wants to move the value to.
If you wish the slider may have a textual label indicating its value. You may also wish to display textual or iconic values at either end to assist in direction choice.
Slider values
Values relating to sliders always follow the following rules:
Horizontal
LESS MORE
Vertical
MORE
LESS
COMMON COMPONENTS
SlidersComponents
• Functional slider device
• Value label
• Visual indicators for direction
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 55 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A toggle switch consists of a trough and a slider. The user can either tap anywhere on the switch to change its state or drag the slider to one side or the other. When the slider is released it will automatically fall into place depending on which side it is nearest to.
Toggle switches are best used in system or applications settings, and are best suited to toggle a setting or mode that affects the whole system. Good examples are switching networking or silent mode on or off..
COMMON COMPONENTS
Toggles
Components
• Toggle switches
• Radio buttons Works like a checkbox but allows the application writer to clarify the question better in some circumstances. Use a radio button when the opposite meaning of the ticked state from a checkbox are not easily deductible from the unticked state (or the other way round).
• Checkboxes A checkbox works in the same way as a toggle switch, but it is more suitable to use for smaller settings, like a preference in an application.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 56 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Some tiles can have two actions. A media tile is one of these. The primary action is to view the content in context but in addition it has a play/pause toggle overlayed. Tapping this button will toggle the playback state, if it is music it will play it in the background, if video it will go directly to the playing video.
Media tiles can be used in lists of videos and audio. They can also show what’s currently playing in the background.
FlowMedia Tiles can be used to start media like video instantly.They can either preview videos and play them in fullscreenby activating the play control it contains, or play/pause audio in the background. The user can do this buy tapping the overlayed button in the corner.
Related chapters
• Grid view
COMMON COMPONENTS
Media tiles
Media tile.png
• Appendix linkComponents
• Open in context
• Play media
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 57 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
Content reveal bars are very similar to the simple header component, except that it can collapse or expand to show its contents. Other components, such as buttons can be placed in this header if required although you should not put more than 3 in a Content reveal bar header otherwise it will not be clear where you can tap to expand. If other components are in the header then they will be right aligned.
In the event of a list of Content reveal bars there is no limit to the number that can be open or closed. A Content reveal bar can default to either open or closed behaviour.
Good places for this component to be used are Settings screens and galleries. This is handy if you have limited space or the screen or you want to hide some items that are less important at first.
.
COMMON COMPONENTS
Content reveal bars
Panels01.png
• Appendix linkComponents
• Content reveal bar toggle
• Collapsed reveal bar
• Expanded reveal bar
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 58 of 62Touch UI Component Guidelines Return to Contents
• Header
Function & Usage
Headers can be used for separating different groups of items and to categorise them. They are basically Content reveal bars that are expanded at all times. Other components, such as buttons can be placed in this header if required. If other components are in the header then they will be right aligned.
Use this component if you want to visualise large amounts of content that belong to different categories. Good places for this component to be used are Settings screens and galleries.
COMMON COMPONENTS
Headers
• Header
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 59 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A Letterbar allows users to filter large lists of items by alphabet and consists of a horizontal bar with a button for each letter. This should be placed within an action bar element. Preferably at the bottom of the screen, so the user’s hand won’t obscure the content view. Selected letters show up highlighted.
Because the letterbar won’t fit on the screen completely, it can be scrolled horizontally. This can be done by dragging or tapping the arrow buttons on either end to skip a set of letters. When a letter is selected the content view will scroll to the entries that match the letter and highlights them in the view.
This component can be put of use in lists of items where names are important. It can be used for filtering music albums, artists or authors and is therefore very suitable for media collections.
Gestures
TAP
DRAG
Related chapters
• Gestures.
COMMON COMPONENTS
Letterbar
• Tap Tapping on specific letter or location on the bar will move the indicator and display the relevant content.
• Drag Dragging the indicator to a specific letter or location performs the same actions as above.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 60 of 62Touch UI Component Guidelines Return to Contents
Function & UsageUsually seen in photo and video applications and allows the user to quickly scroll through available content whilst viewing other content in the background.
FlowThe Preview strip is contained within an action bar element.
• The preview strip fades in part of the controls while in full screen mode.
• It then remains on screen until 3 seconds after the last continuous gesture or selection.
• The user can then make a selection.
Gestures
TAP
DRAG
Related chapters
• Gestures
COMMON COMPONENTS
Preview strip
Video_Player_LandscapePreview_0003.png
• Appendix linkComponents
• Preview strip Overlayed on full screen content beneath.
• Tap Tapping on a location on the bar will display the relevant content.
• Drag Dragging to a location moves the preview content appropriatly.
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 61 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
List elements should be used for long repeating lists rather than a stack of buttons which should be reserved for important and differentiating actions. This is more for visual than interaction reasons but it helps to draw the eye to the most important parts of the screen.
COMMON COMPONENTS
List element
Music_list.png
• Appendix linkComponents
• List elements in a list view
Copyright © 2011, Intel Corporation. All rights reservedVersion: 1.2 14/02/2010
Page 62 of 62Touch UI Component Guidelines Return to Contents
Function & Usage
A popup overlay can be used by applications for modal dialogues or to embed information from other applications (such as file pickers). The overlay should be centred along both dimensions and it can be any dimension the application wishes so long as it is not larger than the screen and does not overlay the application toolbar or status bar.
• The overlay is a blank canvas, somewhat like flyout - as such you can put any component into it.
• An overlay can be closed automatically by the application if the state that caused it to go modal has changed.
• The application toolbar is selectable, so the user can switch or close an application at any time.
• Popup overlays are not closed when the user taps outside the screen, the user must interact with it. The screen also dims behind the popup, no other interaction is allowed with the application
COMMON COMPONENTS
Popup overlay
Style2_05_Notifications.png
Components
• Screen dimmed behind
• Popup overlay