Specifications

Language and tone

Language is used in all applications. This includes:

  • Message texts
  • Labels on buttons and other controls
  • Help texts
  • Product information

Consider your users. What tasks will they perform with the application? What knowledge, training, and objectives will these users have with regard to using the app? What information do they need?

Give clear information and instructions as to what users need to do. Only use technical terms that your users will be familiar with. Avoid using software development terms.

Observe the rules regarding corporate language.

Back to top

Internationalization

If applications need to be localized, certain things need to be taken into account with regard to texts and symbols. At the start of the project, answer the following questions:

  1. Which languages are supported?
  2. How will you handle different number formats, addresses, currencies, and so on? Will these be localized for specific countries and, if so, to what extent?

 

Text and labels

Note that text will have different space requirements. Text going out of English will generally be longer. You can expect to need 200% of the space for individual words on buttons, for example, when going out of English. In the case of text that consists of several words, 130% of the space used for English text should be sufficient. If you know exactly which languages you need for your application, the space requirements may be lower. This is assuming that data is available regarding the tracking for these languages.

Asian languages in particular require more height to ensure that they are legible. If you are using standard font sizes there is nothing more you need to do. If you require other font sizes, ask native speakers to confirm that the text is legible on the appropriate end devices.

Do not integrate user interface elements, e.g., text input fields, into whole sentences. Different languages use different sentence structures. Depending on the language, the input field will appear in a different position in the sentence so it will not always appear in the same place.

Only sort alphabetically if this can be done for each language used.

Use whole sentences. Do not fill the space with text made up of individual components.

 

Icons and symbols

Avoid using text or letters on icons. Symbols must meet international requirements. Ideally they should be tested for international use. This is important as symbols do not have the same meaning for all nationalities. They may be offensive in some cultures, even if they are suitable for the American-European market.

Back to top

Colors

Hex color codeSymbolic nameExamples of use
#FFFFFFColorBrightStandard background color, font color on dark background
#F5F6F6ColorLightBackgroundLight background for elements, e.g., navigation bar
#EBECECColorSoftBackgroundDarker background color, e.g., navigation background (seldomly used)
#929BA1ColorLightTextVarious applications, e.g., title in app menus
#000000ColorDarkStandard text color
#0098A1ColorBlueGreenText link, clickable elements
#026776ColorBlueGreenHighlightHighlight for text links, clickable elements
#E7E6E6 Not currently used
#CCD0D2ColorLineGrayFrame or dividing line color in exceptional circumstances
#C8D0D0ColorBorderStandard border color
#AAAEB1ColorRuleHorizontal and vertical dividing lines in various elements
#C9CACAColorTrackBaseBackground color for progress bars and range input
Back to top

Fonts

FontProperties
FontDefault
  • Font: Verdana
  • Font size: 1.5 rem
  • Style: normal
  • Color: ColorDark
  • Horizontal alignment: left
  • Line height (text across several lines): 1.8 rem
FontClickable

Based on FontDefault with the following differences:

  • Color: ColorBlueGreen
FontClickableHighlight

Based on FontDefault with the following differences:

  • Color: ColorBlueGreenHighlight

FontHeadline

Based on FontDefault with the following differences:

  • Style: bold

The Verdana character set is not supported by the app. For licensing reasons the character set stored in the user's operating system is used for the app. If necessary, Verdana will be replaced by another system font if Verdana is not installed on the user's device.

Back to top

Icons

HomeBackNextHelpInformation
HomeBackNextHelpInformation
UseTakes you to the homepage of the application.Allows you to navigate to a previous screen or element.Allows you to navigate one level further.Opens the user documentation.Displays further information (popover or dialog).
Back to top
SettingsMenuWeb linkVideoPDF file
SettingsMenuWebVideoPDF file
UseOpens the application settings.Opens the main navigation menu for the application.Opens a popover that contains Internet links.Opens a popover that contains links to video clips.Opens a popover that contains links to PDF documents.

Further icons can be found in the web, web-based management, and e-learning communication manuals. Icons from these areas can be used with regard to the theme. They need to be adapted to the style of the app icons, however.

Description Updated
Scout icons [ZIP, 68 KB] 01.11.2016

Clickability

If icons are used as active elements that are clickable and trigger actions, several states are required.

ColorDescription and state
ColorBlueGreenNormal, Enabled
ColorBlueGreenHighlightHighlight for the active state
ColorDarkConstant states: checked
Icons

Icons

Many elements use specific icons. These icons are not freely available. They may only be used as part of the corresponding element.

  • Various states for checkboxes
  • Various states for radio buttons
  • Communication of advantages

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect