Veröffentlicht am 12. Juni 2019 von Robert Klank

Mehrsprachige Prototypen in Axure

Um einen Axure-Prototypen in verschiedenen Sprachen zu testen, muss für jede Sprache eine eigene Version erstellt werden. Das bedeutet doppelte Pflege, was gerade bei komplexeren Prototypen sehr zeitaufwendig werden kann 😔 . So weit die landläufige Meinung…
Denn mit dem Einsatz einer globalen Variable lassen sich Texte seitenübergreifend ersetzen und beispielsweise mehrere Sprachen für eine Ansicht einstellen.

Dabei wird der Prototyp erst in einer Sprache erstellt und anschließend alle Texte ausgetauscht. Dafür wird eine globale Variable definiert, sobald man einen Button drückt, der im Prototypen ergänzt wird (hier testen). Dieser Umschalter kann auch auf einer anderen Unterseite, verborgen vor Testpersonen, platziert werden. Auf jeder Seite wird beim Laden abgefragt, ob die Variable einen spezifischen Wert hat und anschließend die Aktion ausgeführt.

1. Vorbereitung

Elemente anlegen und benennen

Für deine zweisprachige Oberfläche werden zwei Inhalte benötigt: Den Umschalter zwischen den Sprachen und ein paar Textbeispiele. Wir haben im Beispiel einige typische Komponenten eines Formulars genommen und den Umschalter darin gleich integriert. Wichtig ist, dass jedes Element eindeutig benannt wird, damit später der Austausch der Sprache einfach von der Hand geht. Unsere Benennung der Elemente ist rechts im oberen Bild zu sehen. Weitere Tipps für die Arbeit mit Axure findet ihr in diesem Beitrag.
Außerdem kann es hilfreich sein, den beiden Umschaltervarianten einen Style für „Selected“ zu geben, um schnell ablesen zu können, welche Sprache gewählt wurde. Im Fallbeispiel Fall wurde zudem initial die deutsche Kachel selektiert und daher die Checkbox aktiviert (zweites rotes Viereck).

Globale Variable erstellen

Über die OnClick Interaktion werden beiden Sprachenbuttons verschiedene Aktionen zugeordnet. Für den Button „Englisch“ ist dies zuerst die Aktion „Set Variable Value“. Da wir noch keine Variable haben, erstellen wir diese und nennen sie „Sprache“.

  1. Button wählen
  2. OnClick interaktion hinzufügen
  3. Set Variable Value auswählen
  4. Variable hinzufügen
  5. Neue Globale Variable mit „+“ erstellen und „Sprache“ nennen. Anschließend mit OK bestätigen.

💡 Eine globale Variable ist notwendig, da sie gespeichert bleibt. Das System „merkt“ sich also seitenübergreifend, welche Sprache angezeigt werden soll – nach einmaliger Auswahl „Englisch“ wird auch beim Seitenwechsel die Sprache erhalten bleiben.

2. Sprachenumschalter einfügen

Variable der Sprache wechseln

Auf die OnClick Action des Buttons „Englisch“ wird beim Klick der Wert für „Sprache“ auf eng gesetzt (unten rechts im Bild). Das aktuelle Fenster lädt anschließend neu (zweite Aktion) um die Änderung sichtbar zu machen:
Diese beiden Aktionen müssen nun ebenfalls für den Button „Deutsch“ vergeben werden, wobei für den Variablenwert statt eng dann entsprechend de eingegeben wird.

3. Übersetzungen einfügen

Beim Laden einer Seite die Sprache ersetzen

Beim Klick in die leere Seite wird unter Interaktionen „OnPageLoad“ angezeigt. Hierüber kann festgelegt werden, dass beim Neuladen der Seite der Text ersetzt wird. In der Aktion „Set Text“ wird jedes relevante Textfeld ausgewählt und ihm die jeweilige englische Übersetzung zugeordnet:

Bsp oben im Bild: Im Original besitzt der Button den Text ABSENDEN >“. Mit dem Seitenreload wird dieser Inhalt gegen das englische Pendant „SEND >“ ersetzt. Ebenso werden alle anderen Texte ersetzt.

Über „Set Selected“ wird dann festgelegt, dass beim Klick der Button „Deutsch“ deselektiert und der Button „Englisch“ selektiert wird, um über den Farbwechsel die aktuelle Sprache zu visualisieren.

Bedingung für Sprachenwechsel hinzufügen

Mit der jetzigen Einstellung würde bei jedem Seitenreload Englisch geladen werden, daher müssen wir noch eine Bedingung ergänzen die sagt „nur bei gewählter englischer Sprache soll der deutsche Text ersetzt werden“. Bevor wir den Case Editor schließen, bennenen wir den Case Name in „englisch“ um und fügen über „Add Condition“ noch eine Regel für die Übersetzung bei OnPageLoad hinzu.

Die Übersetzung soll nur stattfinden, wenn die Variable „Sprache“ aktuell den Wert eng besitzt, d.h. wenn zuvor der Button für die Sprache Englisch gedrückt wurde:

Nach Bestätigung sieht dies etwa so aus:

Nur wenn die Variable „Sprache“ den Wert eng besitzt, wird der folgende Text ersetzt und der Status der Buttons auf selected bzw. unselected gestellt.

💡 Da die Texte im Original in deutsch gebaut sind, ist keine Definition für den Variablenwert „de“ nötig. Sobald „eng“ nicht mehr definiert ist (also z.B. auch wenn „Sprache“ keinen Wert besitzt), zeigt sich der ursprünglich eingegebene, deutsche Text. Lediglich bei mehr als 2 Sprachen wäre eine „else“ Funktion notwendig.

Für alle relevanten Seiten und Elemente anwenden

Die Übersetzung muss anschließend für jede Seite und jedes Element geschehen, d.h.

✅ Alle Elemente benennen, die Text beinhalten
✅ unter onPageLoad jeder Seite die übersetzten Texte eintragen


Fazit: Grenzen und Möglichkeiten

Zugegeben, ein bisschen Arbeit steckt schon drin 🧐 Der Einsatz von Bedingungen und Variablen sowie der Textaustausch erfordern mehr Denkarbeit, als zwei komplett unabhängige Prototypen zu entwickeln. Für kleinere Prototypen wird die Variante vermutlich zu viel Vorarbeit erfordern, weshalb der Einsatz projektabhängig abgewogen werden muss. Außerdem kann auf einige Elementinhalte in Axure nicht über die Aktionen zugegriffen werden. Wenn die Komponenten „List Box“ und „Droplist“ benötigt werden, muss diese beispielsweise für jede Sprache kopiert und je nach Variablenwert über ein Dynamik Panel getauscht werden.

Trotz des Aufwands in der Erstellungsphase – im iterativen User Centered Design Prozess spart die Variante mit dem Sprachenumschalter erheblich Zeit und ermöglicht das Testen eines Prototypen in verschiedenen Sprachen. Dabei muss die Methode nicht zwingend auf zwei oder mehr Sprachen beschränkt bleiben. Ebenso sind verschiedene Textliche Inhalte (wie Zahlenwerte) oder eine nutzerspezifische Anredeform („du“/“sie“) denkbar. Mit Variableneinsatz wird zudem auch der Austausch von Medien und Bildern sowie von Verlinkungen möglich.

Mit ausreichend Handarbeit lässt sich aus dem statischen Prototyp also einiges herausholen. Wir sind gespannt was ihr daraus macht 😉


🔗 Hier lässt sich der Prototyp ausprobieren!
🔗 Und hier gibt es die Axure-Testdatei als Download