Productivity News 01.08.2023: Verbessern Sie die UX Ihrer PowerApps

UI und UX sind heute in aller Munde. Applikationen sollen hübsch sein, den User führen und ihn intuitiv zu den gewünschten Informationen bringen. Mit WhatsApp, LinkedIn und YouTube kennen wir nur ein paar Beispiele, wo diese Prinzipien optimal eingesetzt werden.

Vorab ein kurzes Sum Up:

UI-Design: Die visuelle Gestaltung einer interaktiven Anwendung (visuell)

UX-Design: Das positive Nutzungserlebnis bei der Interaktion mit einer interaktiven Anwendung (Gefühl)

In meinem letzten Blogbeitrag «Power Apps Design Hacks V2.0» vom März 2023 habe ich mich auf das UI in PowerApps fokussiert. Dabei sind unter anderem folgende Tipps gefallen:

• Mit Containern arbeiten
• Leichte / feine Schriften benutzen
• Grösse von Controls richtig wählen
• Die Einheitlichkeit ist das A und O

Die Begriffe UI und UX hängen stark voneinander ab, doch trotzdem lassen sich Kriterien in einer App oft ganz klar einem Thema zuordnen.

Die folgenden Tipps können als Checkliste betrachtet werden, sie unterliegen keiner definierten Reihenfolge.

Mouse Over

Mit dem Mouse Over (Desktop) zeigen Sie einem User an, wo er etwas drücken kann. Aber bitte nur dann, wenn auch tatsächlich eine Funktion ausgeführt wird.

Buttons bieten sich dafür in PowerApps sehr gut an. Hier kann zusätzlich auch das Hover-Fill- und Pressed-Fill Attribut zur grafischen Hervorhebung gewählt werden.

Falls es trotzdem irgendwo Text in einem Label gibt, kann mit einem leeren Icon gearbeitet werden, dass über dem Label platziert wird.

Hover-Effekt in Galleries

Galleries dienen dazu, mehrere Elemente (z.B. Listen) gleich darzustellen. Oft werden Sie auf einem Übersichtsscreen verwendet, von wo aus ein Element selektiert wird, das auf einem zusätzlichen Screen in einem Formular bearbeitet wird.

Um die Selektion des gewünschten Elements einfacher zu gestalten, empfehle ich folgende Tipps:

• Icon (mit leerem Icon-Attribut) für Hover-Effekt (zu oberst platziert)
• Icon ev. mit Fill-Attribut RGBA(255,2555,255,.5) für einen Halb-Transparenten Hover-Effekt
• Transition-Attribut mit Transition.Push oder Transition.Pop

Transition = Transition.Push auf der Gallerie, sichtbar beim 2. Element (ist live klarer zu erkennen)

Hierarchie von Buttons

Zwischenfragen in Apps werden oft in einem Popup dargestellt. Sie haben dann die Möglichkeit, entweder zu bestätigen oder den Prozess abzubrechen.

Achten Sie in diesem Fall auf die korrekte Anordnung Ihrer Buttons und heben Sie diese nach Möglichkeit grafisch hervor:

In der Regel wird links der Button zum Abbrechen und rechts der Button zur Bestätigung dargestellt. Der Hauptbutton, der den empfohlenen Prozess anzeigt, wird meist präsenter dargestellt. Den „Nebenbutton“ wählen wir in den umgekehrten Farben.

Display Modus

Ist eine Information für das Weiterfahren des Prozesses nötig (Pflichtfeld), empfiehlt es sich, statt einer (kryptischen) Fehlermeldung mit dem DisplayModus von Controls zu arbeiten.

Case: Das Dropdown muss einen Wert selektiert haben, um ein neues Element zu erstellen.

Falls Sie befürchten, dass die User nicht wissen, warum der Button nicht klickbar ist, dürfen Sie gerne einen entsprechenden Hinweistext einblenden.

Funktionen dort platzieren, wo sie erwartet werden

Probieren Sie, in Ihren Apps bekannte Konzepte / Applikationen nachzubauen.

• Haben Sie ein Zeitverwaltungstool mit einer ansprechenden Seitennavigation? Bauen Sie diese nach! User können mit bekannten Ansichten produktiver arbeiten.
• Wollen Sie auf den vorherigen Screen zurück navigieren? Machen Sie’s wie in den gängigen Browsern mit einem Zurück-Icon oben links.
• Soll ein Formular gespeichert oder ein Prozess fortgefahren werden? Diese Buttons finden Sie in der Regel unten rechts.

Farben

Farben können enorm bei der Userführung helfen, um gleiche Elemente hervorzuheben. Gleicht Ihre App jedoch eher einem Malkasten eines Primarschülers, sollten Sie die Farbwahl in Ihrer App vielleicht nochmal überdenken 😉

Meine Empfehlung: mit schwarz und weiss arbeiten und eine Farbe (z.B. die Hauptfarbe Ihrer Company) als Akzentfarbe für Buttons, Links etc. verwenden

Container

Container helfen Ihnen nicht nur, den Überblick über die Controls in Ihren Apps zu wahren, sondern sie ermöglichen es auch den Benutzern, Elemente in Ihren Apps visuell zuzuordnen.

Apps nicht überladen

Ihre User müssen sich möglichst schnell in den Apps zurechtfinden. Daher ist es essenziell, dass nur das angezeigt wird, was auch wirklich relevant ist. Um trotzdem viele Funktionen auf einem Screen verfügbar zu machen, können Sie beispielsweise mit Popups arbeiten, die den restlichen Content überblenden.

Hinweistexte

Enthält ihre App ein Formular, wobei zuerst ein Element zur Bearbeitung ausgewählt werden muss? Dann blenden Sie das Formular am besten aus, solange kein Element gewählt wurde. Um Verwirrungen vorzubeugen, blenden Sie dann am besten einen kurzen Beschreibungstext ein.

So weiss der User auch direkt, was er machen muss, um ein Element zu bearbeiten.

Wenn Sie in Ihren Apps eine filter- und durchsuchbare Übersicht mit einer Gallery einblenden, sind Hinweistexte ebenfalls sehr hilfreich. Diese kommen beispielsweise dann zur Anwendung, wenn die User die Gallery so stark durchsuchen oder filtern können, dass es keine Treffer mehr gibt. Statt dass Sie nur einen leeren Screen zeigen, können Sie in diesem Fall einen Hinweis einblenden, dass es keine Treffer mehr gibt und die Filtereinstellungen angepasst werden müssen.

Einheitlichkeit

Definieren Sie das Aussehen Ihrer App gleich zu Beginn oder über eine zentral gesteuerte Variable. Denn es ist wichtig, dass gleiche Elemente in Ihren Apps gleich daher kommen.

Entscheiden Sie sich für einen Border in Ihren Formularfelder? Dann beachten Sie, dass dieser immer gleich dick ist, die gleiche Farbe hat, denselben Hover-Effekt aufweist und der Border-Radius einheitlich ist.

Falls Sie jeweils unschlüssig sind, empfiehlt es sich, mit einer zentral gesteuerten Variable zu arbeiten, die beispielsweise im App OnStart gepflegt wird. Anstatt eine fixe Farbe für ihren Border zu hinterlegen, können Sie die Variable hinterlegen und müssen zu in Zukunft den Wert nur noch einmal anpassen.

Vorteile einer Ansicht mit gutem UX

Nachfolgend finden Sie ein Beispiel in dem diverse UX-Konzepte eingebaut wurden.

• Der Screen zeigt alle nötigen Informationen zum Thema, wirkt jedoch nicht überladen
• Der Zurück-Button befindet sich oben links. So kennt man es beispielsweise von gängigen Browsern
• Die Seitennavigation gruppiert die App-Funktionen thematisch und macht so die Navigation einfacher
• Die Seitennavigation links zeigt den aktuellen Standort innerhalb der Applikation
• Der Hauptfokus des aktuellen Screens ist in Containern gruppiert, die Zusammengehörigkeit wird grafisch hervorgehoben
• Das aktuell selektierte Element wird grafisch hervorgehoben
• Neue Elemente werden oben rechts erstellt, wie beispielsweise ein neuer Chat im WhatsApp
• Elemente werden über einen Button unten rechts erstellt
• Die Farben sind schlicht gewählt – hauptsächlich schwarz und weiss mit der Akzentfarbe Rot (Unternehmensfarbe)
• Die Icons sind sprechend gewählt: Bleistift für Bearbeiten, Kreuz für löschen / entfernen
• Die Elemente sehen einheitlich aus – einheitliche Schriftgrösse, und Schriftart

FAQ

Was ist UI/UX?

Das UI-Design fokussiert sich auf die visuelle Gestaltung einer interaktiven Anwendung. Beim UX-Design geht es hingegen darum, dem Nutzer ein positives Nutzungserlebnis zu bieten. Der Fokus liegt dabei auf dem Gefühl, welches sich während und nach der Interaktion mit einem User Interface beim Nutzer einstellen soll.

Warum ist UI/UX nötig?

Die User-Acceptance ist das A und O für eine erfolgreiche Applikation. Egal ob Sie eine App bauen, die die User als Unterstützung in ihrem Arbeitsalltag brauchen können (aber nicht müssen), oder ob es eine businesskritische Anwendung ist, die von den Usern genutzt werden muss – mit UI/UX verbessern Sie die Benutzeroberfläche, sodass Ihre Nutzer nicht nur mit der Applikation arbeiten wollen, sondern es sogar auch bessern können.

Wie kann ich das UX meiner Apps mit kleinem Aufwand verbessern?

Den geringsten Aufwand haben Sie, wenn Sie die Features direkt beim Entwickeln der App einpflegen. Falls Sie regelmässig Apps bauen, kann es auch helfen, eine Checkliste für Ihre Galleries, Buttons usw. zu erstellen, damit die Apps untereinander auch einheitlich sind.

Wie finde ich heraus, welche Buttons wo erwartet werden?

Schauen Sie sich etablierte Ansichten an (Zeiterfassungstool, Microsoft Office, ERP, CRM etc.)

Wie wähle ich passende Farben für meine PowerApps?

Da gibt es verschiedene Ansätze. Ich empfehle grundsätzlich: Arbeiten Sie mit Schwarz(-tönen) und weiss und wählen Sie beispielsweise Ihre Company-Farbe (gem. CI) als Akzentfarbe.

Wann soll ich UX in meinen Apps einbauen?

Am besten machen Sie dies on the fly – das heisst, wenn Sie am Entwickeln sind. Überlegen Sie sich bereits dann, was wohin gehört, wie dargestellt werden soll und wann ersichtlich sein muss. Es ist einfacher, ein durchgängiges Design direkt bei der Entwicklung einzubauen, als im Anschluss an die App-Entwicklungsphase nachzupflegen.