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]


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


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


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?



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



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


• 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



Version: 1.2 15/12/2010

OVERVIEW



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


OVERVIEW

Hardware

1366 pixels

768 pixels



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



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.



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



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.



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




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





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



Version: 1.2 15/12/2010

COMMON BEHAVIOURS



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



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


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



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


• Non selected item

• Selected item Visual indicators are required to distinguish between the two states.



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



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)



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


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



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



Version: 1.2 15/12/2010

COMMON FUNCTIONALITY



Function & Usage

Every application must contain a Toolbar. This contains the back button, application View options, view label, and Action menu button.


Toolbar

Search 1.png

• Appendix link

• Actions menu

MeeGo_IM_01.psd

• Appendix link

• View menu• Back button

• View label



Flow

This process describes the display of the Application toolbar overlay.

Gestures

TAP


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.



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.


Search

Search 1.png

• Appendix link



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



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



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



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



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



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



The following is a list of search criteria relevant to each application:


Search criteria

Music

• Artists

• Name of song

• Albums

• Audio books

Video

• File names

Photos

• File names

• Albums

• Date

Calender

• Event titles

• Dates

Mail

• To (name)

• From (name)

• Subject

Notes

• Note name

• Text in notes

Task

• Task name

• Text in task

Instant Messenger

• Contacts name

• IM messages



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

.


Content on external devices

Photos_1.png


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)



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



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.



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



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.



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



List view

music_list.png


• List item



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



Grid view

Music_Landing_02.png


• Item tile Tiles can be resized to suit content inline with the guidelines.



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.


Full screen

Camera.png

• Appendix link



Version: 1.2 15/12/2010

TEXT FUNCTIONALITY



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



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.



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.



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.



Version: 1.2 15/12/2010

COMMON COMPONENTS



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


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.



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


COMMON COMPONENTS

Object menu

1



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


• Selected button



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.



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


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.



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.



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



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



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



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


COMMON COMPONENTS

Dropdown bar

1



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



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.



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


• Open in context

• Play media



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


• Content reveal bar toggle

• Collapsed reveal bar

• Expanded reveal bar



• 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



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.



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


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



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


• List elements in a list view



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

Touch UI Component Guidelines - Intel Developer ZoneTouch UI Component Guidelines Return to Contents...

Documents

Transcript of Touch UI Component Guidelines - Intel Developer ZoneTouch UI Component Guidelines Return to Contents...