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.

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.

Farben

Hex-FarbcodeSymbolischer NameVerwendungsbeispiele
#FFFFFFColorBrightStandard Hintergrundfarbe, Schriftfarbe auf dunklem Hintergrund
#F6F6F6ColorBrightBackgroundHintergrund für Dialogfenster
#ECEDEDColorLightBackgroundAllgemeine helle Hintergrundfarbe für Controls im Zustand Normal/Enabled
#CFCFCFColorDarkGreyVerwendet für passive Selection
#CCD0D2ColorDisabledStandard Rahmenfarbe für Zustand Disabled, in Ausnahmefällen auch als Rahmen- oder Trennlinien-Farbe
#58585AColorDarkBackgroundDunkler Hintergrund für z.B. Tabs oder PropertyWindows
#3e3d40ColorDefaultStandard Textfarbe; Standard-Hintergrund für inverse Flächen
#333333ColorHoverDarkHover für Tabs
#2C2B2DColorActiveDarkActive zustand für TabMenu
#181819ColorHoverDarkBackgroundTabMenu Hintergrund
#000000ColorDarkFür Hintergründe; Effekte (Schein nach außen)
#0098A1ColorBlueGreenFokus
#7FCCD0ColorActiveBackgroundStandard Hintergrundfarbe für Zustand Active
#77B9BFColorBorderHighlightStandard Rahmenfarbe für die Zustände Active / Hover
#D4EEEFColorHoverBackgroundStandard Hintergrundfarbe für Zustand Hover
#96D20DColorLightGreen 
SchriftEigenschaft
FontDefault
  • Schriftart: Arial
  • Schriftgröße: 0,55 rem
  • Schnitt: normal
  • Farbe: ColorDefault
  • Ausrichtung Horizontal: links
  • Ausrichtung Vertikal: -
  • Zeilenhöhe (mehrzeiliger Text): 0,8 rem

FontHeadline

Basiert auf FontDefault mit diesen Abweichungen:

  • Schnitt: bold
  • Zeilenhöhe (mehrzeiliger Text): 1,8 rem
FontDisabled

Basiert auf FontDefault mit diesen Abweichungen:

  • Farbe: ColorDisabled
FontSelected

Basiert auf FontDefault mit diesen Abweichungen:

  • Farbe: #256167
  • Der Farbton entsteht durch eine farbige, transparente Fläche, die über die Schrift gelegt wurde.
    • Schriftfarbe: ColorDefault
    • Markierung: Farbe: ColorBlueGreen; Deckkraft: 40%
FontSelectedNotActive

Basiert auf FontDefault mit diesen Abweichungen:

  • Farbe: #6F6F70

Icons

Die Formen der Icons sind auf das Wesentliche reduziert. Ansprechend schlicht konzentrieren sie sich auf die Bildaussage. Die Icons sind immer so aufgebaut, dass die "Hauptmetapher" in einem grau und die Aktionen in einem grün dargestellt werden.

Hier sind die wichtigsten, anwendungsübergreifenden Icons dargestellt.

Beschreibung Sprache Stand
Software-Styleguide – Übersicht aller Icons [PDF, 0,26 MB] Deutsch 03.04.2017

Best Practice – PC Worx Next

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect