PowerApps

5 Tipps für ein besseres UI mit Power Apps

Wenn man eine Canvas App mit Power Apps entwickeln möchte und die Standard Formulare und Funktionen von Microsoft verwendet, nehmen die Microsoft Best Practices einem bereits viel Arbeit ab und man kann sehr schnell angenehm bedienbare Interfaces bauen. Selbst auf diese Standards lassen sich noch einige Kniffe anwenden, mit denen die gesamte User Experience bei der Bedienung der App noch verbessert werden kann. Möchte man von den Standardelementen abweichen, ist es umso wichtiger diese fünf Tipps für die Interface Gestaltung zu kennen.

1. Konsistent sein!

Eines der wichtigsten Regeln bei der Interface Gestaltung ist die Konsistenz. Diese Hilfe den Nutzer:innen die Anwendung besser zu verstehen und abschätzen zu können, was durch ihre Interaktion passieren wird. Außerdem wird die Interaktion dadurch auch im Regelfall schneller. 

Schauen wir uns daher einmal 3 Aspekte an, bei denen die Einhaltung einer konsistenten Gestaltung schnell übersehen wird.

  1. Buttons sollten immer in der gleichen Reihenfolge platziert werden. Bei mobilen Applikationen ist die konventionelle Vorgehensweise, dasss der Bestätigungs-Button auf der rechten Seite (oder unten)  und der Abbrechen-Button entsprechend links oder oberhalb platziert wird. Zudem sollte es eine Unterscheidung zwischen primären und sekundären Buttons geben. Der primäre Button ist dabei der, der ins Auge stechen soll.
  2. Es sollten einheitliche Farben verwendet werden. Das macht Power App an sich schon von allein. Möchte man aber von diesem Standard abweichen, muss man seine App gewissenhaft  testen, um auch überall die Nutzung gleiche Farben sicher zu stellen. Hier ein kleiner Tipp: Man kann die Hex Werte der gewünschten Farbe als globale Variable speichern und somit über ColorValue immer wieder abrufen.
  3. Gleiche Dinge sollten gleich heißen. Daher sollte man auch bei der Benennung von Input- Feldern, Buttons & Co immer auf dasselbe Wording achten. Bereits die kleinsten Unstimmigkeiten können die Nutzer:innen verwirren.  
Beispiel für primäre und Sekundäre Buttons die beide Konsistent platziert sind.
Beispiel für primäre und Sekundäre Buttons die beide Konsistent platziert sind.

2. Fluchtlinien reduzieren

Optische Fluchtlinien entstehen mit jedem neuen Element. Wenn man also Elemente wild auf einer Oberfläche platziert, entstehen viele „wilde“ Fluchtlinien. Dadurch erschweren wir unserem Gehirn die Auffassungsgabe. Es ist schwerer die Strukturen zu verstehen und man nimmt die Darstellung  als unruhig wahr.

Um diesen Effekt zu vermeiden, sollten Eingabefelder möglichst gleich groß sein, aneinander ausgerichtet und mit den gleichen Abständen versehen sein. Labels, die zu einem Eingabefeld gehören, sollten näher an diesem platziert sein, damit diese als zusammengehörig wahrgenommen werden.

Nutzt man Formulare in Power Apps geschieht dies automatisch. Auch das Autolayout bei den responsive Funktionen sorgt für diesen Effekt. Platziert man jedoch Felder von Hand, sollte man sich an den intelligenten Hilfslinien von Power Apps orientieren. Achtung: Wenn man mit einem Formular arbeitet und Buttons platzieren möchte, bekommt man keine Hilfslinien. Hier ein kleiner Tipp: Einfach ein Rechteck erstellen und den Abstand damit „abmessen“. 

Wenn Input Felder gleich groß sind und an einander ausgerichtet hat man weniger Fluchtlinien
Ein Interface wirkt harmonisch, wenn wenige Fluchtlinien existieren

3. Erlernbarkeit fördern

Wenn die Nutzer:innen die Power App bedienen, wird man wahrscheinlich nicht daneben sitzen, um es ihnen zu erklären. Daher ist es wichtig, dass die Nutzer:innen die Anwendung auch eigenständig erlernen können. Zwei einfache Methoden in Power Apps dafür sind die Tool-Tipps und / oder Hinweis-Texte. 

Ein Tool Tipp erscheinen immer dann, wenn man mit dem Mauszeiger ein paar Sekunden über einem Element verharrt (Hover). Leider sind diese nur für die Benutzung mit der Maus geeignet

Hinweistexte sind graue Texte in Eingabefeldern, die verschwinden, sobald man etwas in dieses Feld eingibt. Diese können wunderbar genutzt werden, um den Nutzer:innen zu erklären, was sie in das Eingabefeld eintragen sollen. Auch hier, ist eine konsistente und einheitliche Sprache wichtig.

Beispiel wie ein Hint text eingetragen werden kann
Hinweise Texte können in Power Apps einfach eingefügt werden, in dem man ein Element selektiert und dann etwas in dem Feld Hint text einträgt.

4. Fehler vermeiden

Eingabefehler sind ein ständiges Risiko, aber man kann sie durch geschicktes Interface Design  vermeiden. Ein schneller und einfacher Tipp für Formulare: den Bestätigungs-Button so lange zu außer Funktion zu setzen bis alle Pflichtfelder ausgefüllt wurden. Das ist keine Standardfunktion. Man kann sie aber einfach über den DisplayMode des Buttons als eine kleine If-Abfrage integrieren. Diese überprüft, ob die Pflichtfelder gefüllt sind.  Im gezeigten Beispiel wäre das: 

				
					If(IsBlank(Name.Text) or IsBlank(Approver.Text), DisplayMode.Disabled, DisplayMode.Edit) 
				
			

Generell ist die Daumenregel, falls eine Funktion den Nutzer:innen gerade nicht zur Verfügung steht, sie diese aber in Zukunft noch nutzen können, sollte das Element „disabled“ werden. Das erhöht die Erlernbarkeit.
Steht eine Funktion den Nutzer:innen nie zur Verfügung, weil sie z.B. nicht die benötigten Rechte besitzen, sollten sie das Element auch nicht sehen. 

Zwei leere Pflichtfelder und ein deaktivierter Button
So lange die Pflichtfelder nicht ausgefüllt sind ist der Bestätigungsbutton disabled.

5. Barrierefreiheit beachten

Auch wenn man selbst vielleicht nicht darauf angewiesen ist, gibt es Nutzer:innen, die ohne die Einstellungen zur barrierefreien Bedienung die Anwendung nicht steuern könnten. Power Apps ist bei diesem Punkt schon im Standard sehr gut aufgestellt. 

Alle Standard-Elemente haben in der Regel einen eindeutigen Fokus-State, bei dem die Umrandung eines Elements vergrößert wird. Der Fokus-State hilft seheingeschränkten Nutzer:innen besser zu erkennen, welches Element gerade angewählt ist. Dieser kann über die Attribute FocusedBorderColor und FocusedBorderThickness beeinflusst werden. Aufpassen muss man hier vor allem dann, wenn man Elemente ohne Umrandung hat.

Zudem sollte generell ein hoher Kontrast zwischen den gewählten Farben existieren, da dieser für seheingeschränkte Personen besser zu erkennen sind. 

Außerdem sollte man besonders bei Formularen auf die Tab-Reihenfolge achten, sodass Nutzer:innen die nur mit der Tastatur arbeiten eine logische Reihenfolge der Eingabefelder bekommen. Hierfür muss in das Attribut Tab-Index eine Zahl eingetragen werden. Die Anwendung geht dann die Elemente in aufsteigender Reihenfolge durch.

All diese genannten Punkt werden auch durch den App-Checker überprüft. Es lohnt sich also auf jeden Fall mal einen Blick in den Accessibility Reiter des App-Checkers zu werfen.

Wenn man eine Canvas App mit Power Apps entwickeln möchte und die Standard Formulare und Funktionen von Microsoft verwendet, nehmen die Microsoft Best Practices einem bereits viel Arbeit ab und man kann sehr schnell angenehm bedienbare Interfaces bauen. Selbst auf diese Standards lassen sich noch einige Kniffe anwenden, mit denen die gesamte User Experience bei der Bedienung der App noch verbessert werden kann. Möchte man von den Standardelementen abweichen, ist es umso wichtiger diese fünf Tipps für die Interface Gestaltung zu kennen.

1. Konsistent sein!

Eines der wichtigsten Regeln bei der Interface Gestaltung ist die Konsistenz. Diese Hilfe den Nutzer:innen die Anwendung besser zu verstehen und abschätzen zu können, was durch ihre Interaktion passieren wird. Außerdem wird die Interaktion dadurch auch im Regelfall schneller. 

Schauen wir uns daher einmal 3 Aspekte an, bei denen die Einhaltung einer konsistenten Gestaltung schnell übersehen wird.

  1. Buttons sollten immer in der gleichen Reihenfolge platziert werden. Bei mobilen Applikationen ist die konventionelle Vorgehensweise, dasss der Bestätigungs-Button auf der rechten Seite (oder unten)  und der Abbrechen-Button entsprechend links oder oberhalb platziert wird. Zudem sollte es eine Unterscheidung zwischen primären und sekundären Buttons geben. Der primäre Button ist dabei der, der ins Auge stechen soll.
  2. Es sollten einheitliche Farben verwendet werden. Das macht Power App an sich schon von allein. Möchte man aber von diesem Standard abweichen, muss man seine App gewissenhaft  testen, um auch überall die Nutzung gleiche Farben sicher zu stellen. Hier ein kleiner Tipp: Man kann die Hex Werte der gewünschten Farbe als globale Variable speichern und somit über ColorValue immer wieder abrufen.
  3. Gleiche Dinge sollten gleich heißen. Daher sollte man auch bei der Benennung von Input- Feldern, Buttons & Co immer auf dasselbe Wording achten. Bereits die kleinsten Unstimmigkeiten können die Nutzer:innen verwirren.  
Beispiel für primäre und Sekundäre Buttons die beide Konsistent platziert sind.
Beispiel für primäre und Sekundäre Buttons die beide Konsistent platziert sind.

2. Fluchtlinien reduzieren

Optische Fluchtlinien entstehen mit jedem neuen Element. Wenn man also Elemente wild auf einer Oberfläche platziert, entstehen viele „wilde“ Fluchtlinien. Dadurch erschweren wir unserem Gehirn die Auffassungsgabe. Es ist schwerer die Strukturen zu verstehen und man nimmt die Darstellung  als unruhig wahr.

Um diesen Effekt zu vermeiden, sollten Eingabefelder möglichst gleich groß sein, aneinander ausgerichtet und mit den gleichen Abständen versehen sein. Labels, die zu einem Eingabefeld gehören, sollten näher an diesem platziert sein, damit diese als zusammengehörig wahrgenommen werden.

Nutzt man Formulare in Power Apps geschieht dies automatisch. Auch das Autolayout bei den responsive Funktionen sorgt für diesen Effekt. Platziert man jedoch Felder von Hand, sollte man sich an den intelligenten Hilfslinien von Power Apps orientieren. Achtung: Wenn man mit einem Formular arbeitet und Buttons platzieren möchte, bekommt man keine Hilfslinien. Hier ein kleiner Tipp: Einfach ein Rechteck erstellen und den Abstand damit „abmessen“. 

Wenn Input Felder gleich groß sind und an einander ausgerichtet hat man weniger Fluchtlinien
Ein Interface wirkt harmonisch, wenn wenige Fluchtlinien existieren

3. Erlernbarkeit fördern

Wenn die Nutzer:innen die Power App bedienen, wird man wahrscheinlich nicht daneben sitzen, um es ihnen zu erklären. Daher ist es wichtig, dass die Nutzer:innen die Anwendung auch eigenständig erlernen können. Zwei einfache Methoden in Power Apps dafür sind die Tool-Tipps und / oder Hinweis-Texte. 

Ein Tool Tipp erscheinen immer dann, wenn man mit dem Mauszeiger ein paar Sekunden über einem Element verharrt (Hover). Leider sind diese nur für die Benutzung mit der Maus geeignet

Hinweistexte sind graue Texte in Eingabefeldern, die verschwinden, sobald man etwas in dieses Feld eingibt. Diese können wunderbar genutzt werden, um den Nutzer:innen zu erklären, was sie in das Eingabefeld eintragen sollen. Auch hier, ist eine konsistente und einheitliche Sprache wichtig.

Beispiel wie ein Hint text eingetragen werden kann
Hinweise Texte können in Power Apps einfach eingefügt werden, in dem man ein Element selektiert und dann etwas in dem Feld Hint text einträgt.

4. Fehler vermeiden

Eingabefehler sind ein ständiges Risiko, aber man kann sie durch geschicktes Interface Design  vermeiden. Ein schneller und einfacher Tipp für Formulare: den Bestätigungs-Button so lange zu außer Funktion zu setzen bis alle Pflichtfelder ausgefüllt wurden. Das ist keine Standardfunktion. Man kann sie aber einfach über den DisplayMode des Buttons als eine kleine If-Abfrage integrieren. Diese überprüft, ob die Pflichtfelder gefüllt sind.  Im gezeigten Beispiel wäre das: 

				
					If(IsBlank(Name.Text) or IsBlank(Approver.Text), DisplayMode.Disabled, DisplayMode.Edit) 
				
			

Generell ist die Daumenregel, falls eine Funktion den Nutzer:innen gerade nicht zur Verfügung steht, sie diese aber in Zukunft noch nutzen können, sollte das Element „disabled“ werden. Das erhöht die Erlernbarkeit.
Steht eine Funktion den Nutzer:innen nie zur Verfügung, weil sie z.B. nicht die benötigten Rechte besitzen, sollten sie das Element auch nicht sehen. 

Zwei leere Pflichtfelder und ein deaktivierter Button
So lange die Pflichtfelder nicht ausgefüllt sind ist der Bestätigungsbutton disabled.

5. Barrierefreiheit beachten

Auch wenn man selbst vielleicht nicht darauf angewiesen ist, gibt es Nutzer:innen, die ohne die Einstellungen zur barrierefreien Bedienung die Anwendung nicht steuern könnten. Power Apps ist bei diesem Punkt schon im Standard sehr gut aufgestellt. 

Alle Standard-Elemente haben in der Regel einen eindeutigen Fokus-State, bei dem die Umrandung eines Elements vergrößert wird. Der Fokus-State hilft seheingeschränkten Nutzer:innen besser zu erkennen, welches Element gerade angewählt ist. Dieser kann über die Attribute FocusedBorderColor und FocusedBorderThickness beeinflusst werden. Aufpassen muss man hier vor allem dann, wenn man Elemente ohne Umrandung hat.

Zudem sollte generell ein hoher Kontrast zwischen den gewählten Farben existieren, da dieser für seheingeschränkte Personen besser zu erkennen sind. 

Außerdem sollte man besonders bei Formularen auf die Tab-Reihenfolge achten, sodass Nutzer:innen die nur mit der Tastatur arbeiten eine logische Reihenfolge der Eingabefelder bekommen. Hierfür muss in das Attribut Tab-Index eine Zahl eingetragen werden. Die Anwendung geht dann die Elemente in aufsteigender Reihenfolge durch.

All diese genannten Punkt werden auch durch den App-Checker überprüft. Es lohnt sich also auf jeden Fall mal einen Blick in den Accessibility Reiter des App-Checkers zu werfen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.