Vorgaben

Sprache und Ton

Sprache wird in allen Anwendungen verwendet. Dazu gehören:

  • Meldungstexte
  • Labels auf Buttons und vor anderen Controls
  • Hilfetexte
  • Produktinformationen

Vergegenwärtigen Sie sich Ihre Nutzer. Welche Aufgaben erledigen sie mit der Anwendung? Welche Eigenschaften haben diese Nutzer, vor allem Vorwissen, Ausbildung und Ziele im Umgang mit der App? Welche Information brauchen sie?

Geben Sie klare Hinweise und Anweisungen, was der Nutzer tun soll. Setzen Sie Fachbegriffe nur dann ein, wenn Ihre Nutzer sie auch verwenden. Vermeiden Sie Begriffe aus der Software-Entwicklung.

Berücksichtigen Sie die Regelungen zur Unternehmenssprache.

Zurück nach oben

Internationalisierung

Sollen Anwendungen lokalisierbar sein, müssen Sie hinsichtlich Texten und Symbolen einige Dinge beachten. Beantworten Sie zu Beginn des Projekts folgende Fragen:

  1. Welche Sprachen werden unterstützt?
  2. Wie gehen Sie mit unterschiedlichen Zahlenformaten, Adressen, Währungen etc. um? Werden sie länderspezifisch lokalisiert und wenn ja, in welchem Umfang.

 

Texte und Labels

Rechnen Sie damit, dass Texte unterschiedlichen Platzbedarf haben. Texte werden in der Regel länger, wenn man vom englischen Text ausgeht. Planen Sie bei einzelnen Wörtern, wie z. B. auf Schaltflächenbeschriftungen 200 % Platzbedarf ein, ausgehend vom englischen Text. Bei Texten, die aus mehreren Wörtern bestehen, genügen 130 % Platzbedarf, ausgehend vom englischen Text. Wenn Sie die Sprachen für Ihre Anwendung konkret benennen können, ist es möglich diese Vorgaben zu unterschreiten. Das setzt voraus, dass Daten zur Laufweite in diesen Sprachen vorliegen.

Insbesondere bei asiatischen Sprachen müssen Texte in der Höhe genügend Platz haben, um lesbar zu sein. Wenn sie die Standardschriftgrößen verwenden, müssen Sie nichts weiter beachten. Wenn Sie andere Schriftgrößen benötigen, testen Sie die Lesbarkeit mit Muttersprachlern auf den entsprechenden Endgeräten.

Integrieren Sie Elemente der Benutzeroberfläche, z. B. ein Texteingabefeld, nicht in ganze Sätze. Verschiedene Sprachen haben einen unterschiedlichen Satzbau. Das Eingabefeld hat je nach Sprache eine andere Position im Satz und kann nicht immer an einer bestimmten Stelle stehen.

Sortieren Sie nur dann alphabetisch, wenn dies sprachabhängig geschieht.

Verwenden Sie ganze Sätze. Generieren Sie Texte nicht zur Laufweite, indem Sie sie aus Einzelteilen zusammensetzen.

 

Icons und Symbole

Vermeiden Sie Texte oder Buchstaben auf Icons. Symbole werden internationalen Ansprüchen gerecht. Optimalerweise sollten sie für die internationale Verwendung getestet werden. Das ist wichtig, denn Symbole sind nicht für alle Nationalitäten gleichermaßen verständlich. Sie können für einige Kulturkreise beleidigend sein, auch wenn sie im amerikanisch-europäischen Markt gut funktionieren.

Zurück nach oben

Farben

Hex Farb-CodeSymbolischer NameVerwendungsbeispiele
#FFFFFFColorBrightStandard Hintergrundfarbe, Schriftfarbe auf dunklem Hintergrund
#F5F6F6ColorLightBackgroundHeller Hintergrund von Elementen, z. B. Navigationsleiste
#EBECECColorSoftBackgroundDunklere Hintergrundfarbe z. B. Hintergrund der Navigation (selten)
#929BA1ColorLightTextverschiedene Anwendungen, z. B. Titel in App Menüs
#000000ColorDarkStandard Textfarbe
#0098A1ColorBlueGreenTextlink, klickbare Elemente
#026776ColorBlueGreenHighlightHervorhebung für Textlink bzw. klickbare Elemente
#E7E6E6 aktuell nicht verwendet
#CCD0D2ColorLineGrayRahmen- oder Trennlinienfarbe in Ausnahmesituationen
#C8D0D0ColorBorderÜbliche Rahmenfarbe
#AAAEB1ColorRuleHorizontale und vertikale Trennlinien in verschiedenen Elementen
#C9CACAColorTrackBaseHintergrundfarbe für Fortschrittsbalken und Range-Input
Zurück nach oben

Schriften

SchriftEigenschaften
FontDefault
  • Schriftart: Verdana
  • Schriftgröße: 1,5 rem
  • Schnitt: normal
  • Farbe: ColorDark
  • Ausrichtung horizontal: links
  • Zeilenhöhe (mehrzeiliger Text): 1,8 rem
FontClickable

Basiert auf FontDefault mit diesen Abweichungen:

  • Farbe: ColorBlueGreen
FontClickableHighlight

Basiert auf FontDefault mit diesen Abweichungen:

  • Farbe: ColorBlueGreenHighlight

FontHeadline

Basiert auf FontDefault mit diesen Abweichungen:

  • Schnitt: fett

Der Verdana-Schriftzeichensatz wird nicht in die App eingebunden. Aus lizenzrechtlichen Gründen wird der im jeweiligen Betriebssystem des Nutzers hinterlegte Schriftzeichensatz beim Ausführen der App herangezogen. Verdana wird dann ggf. durch eine andere Systemschriftart ersetzt, sofern Verdana nicht auf dem Gerät des Nutzers installiert ist.

Zurück nach oben

Icons

StartseiteZurückWeiterHilfeInformation
StartseiteZurückWeiterHilfeInformation
VerwendungFührt zur Startseite der Anwendung.Führt in der Navigation auf einen vorherigen Screen oder Element.Wechselt in einer Navigation eine Ebene tiefer.Öffnet eine Benutzer-dokumentation.Zeigt weiterführende Informationen an (Popover oder Dialog).
Zurück nach oben
EinstellungenMenüWeb-VerknüpfungVideoPDF-Datei
EinstellungenMenüWebVideoPDF-Datei
VerwendungÖffnet Anwendungs-einstellungen.Öffnet die Hauptnavigation der Anwendung.Zeigt ein Popover an, dass Verknüpfungen ins WWW enthält.Zeigt ein Popover an, dass Verknüpfungen zu Video Clips enthält.Zeigt ein Popover an, dass Verknüpfungen zu PDF Dokumenten enthält.

Weitere Icons findet man in den Communication Manuals aus den Bereichen Web, Web-based Management und E-Learning. Icons aus diesen Bereichen können hinsichtlich des Motivs verwendet werden. Sie müssen allerdings im Stil an die App-Icons angepasst werden.

Beschreibung Stand
Scout Icons [ZIP, 68 KB] 01.11.2016

Klickbarkeit

Wenn Icons als aktive Elemente verwendet werden, sie also klickbar sind und Aktionen auslösen, dann werden mehrere Zustände benötigt.

FarbeBeschreibung und Zustand
ColorBlueGreenNormal, Enabled
ColorBlueGreenHighlightHervorhebung für den Zustand Aktiv
ColorDarkAndauernde Zustände: Checked
Icons

Icons

Viele Elemente verwenden konkrete Icons. Diese Icons stehen nicht zur freien Verfügung. Sie dürfen lediglich als Bestandteil der entsprechenden Elemente eingesetzt werden.

  • Verschiedene Zustände bei Checkboxen
  • Verschiedene Zustände bei Radio-Buttons
  • Vorteilskommunikation

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Weitere Informationen