UI/UX in Microsoft Power Apps
Heutzutage benötigen wir schnelle und effiziente Technologien, um Anwendungen zu erstellen, da Millionen von Apps modernisiert werden müssen. Microsoft Power Apps bietet eine Plattform zur schnellen Erstellung benutzerdefinierter Anwendungen mit einem No-Code / Low-Code-Ansatz. Das Ziel? Auch Menschen ohne Entwicklungskompetenzen sollen in die Lage versetzt werden, Geschäfts-Anwendungen zu erstellen oder zu modernisieren. Allerdings sehen die meisten dieser Apps, meiner Meinung nach, in der Standardversion nicht so gut aus.
In diesem Blogbeitrag führen wir Sie durch den Prozess, gut aussehende und benutzerfreundliche Apps mithilfe der Microsoft Power Apps No-Code / Low-Code-Plattform zu entwerfen und zu erstellen.
Schritt 1: Verstehen Sie Ihre Benutzer und definieren Sie den Umfang
Bevor Sie mit dem Design der Benutzeroberfläche (UI) Ihrer App beginnen, ist es wichtig, die benötigten Elemente zu identifizieren, wie z.B. Navigation, Listenansicht und Detailansicht. Sie sollten auch überlegen, wie viele Bildschirme Ihre App haben wird und wie viele Arten von Entitäten Sie in der App verwalten werden. Dies wird die Filterung für die Listenansicht sowie die Variation in den Detailansichten bestimmen. Darüber hinaus sollten Sie die Komplexität der von Ihnen verwalteten Entitäten bewerten und in Betracht ziehen, für komplexe Entitäten einen Assistenten-Editor zu verwenden. Schließlich sollten Sie den Prozess berücksichtigen, den Ihre App erleichtert. Handelt es sich um eine einfache Zustandsmaschine, die durch ein Statusfeld dargestellt werden kann, oder um einen sequentiellen Ablauf, der eine visuelle Darstellung benötigt? Die Beantwortung dieser Fragen wird Ihnen helfen, den Umfang und die Anforderungen Ihres UI-Designs zu definieren.
Schritt 2: Entwerfen Sie die Benutzeroberfläche Ihrer App
Mit einem klaren Verständnis der Bedürfnisse Ihrer Benutzer und der Struktur Ihrer App können Sie nun mit dem Design der Benutzeroberfläche beginnen. Verwenden Sie ein UI-Framework wie Fluent UI (andere Frameworks: React, Material 3), um einen qualitativ hochwertigen Ausgangspunkt für Ihr Design zu bieten und langfristige Konsistenz zu gewährleisten. Fluent UI ist ein Satz wiederverwendbarer, plattformübergreifender Komponenten und Stile, die mit der Designsprache von Microsoft übereinstimmen. Sie können auf die Fluent UI-Kontrollbibliothek für Power Apps hier zugreifen. Fluent UI wird von Microsoft bereitgestellt.
Wir empfehlen auch, ein Design-Tool zu verwenden, um visuelle Anforderungen für die Bildschirme Ihrer App zu erstellen, z.B. Figma. Unten sehen Sie ein Beispiel für einen Genehmigungs-APP-UX-Flow, der in Figma entworfen wurde, sowie alle Icons, Schriften und die Kontrollbibliothek, die im gesamten Prozess wiederverwendet wird. Dies wurde für den Aufbau einer Power App entworfen.
Machen Sie es pixel-perfekt
Figma ist eine hervorragende Option, da es die Anzeige von Pixelabständen und Elementgrößen ermöglicht, was den Entwicklern das Rätselraten erspart.
Schritt 3: Implementierung der App
Sobald Sie ein Design haben, ist es an der Zeit, die App zu implementieren. Um eine pixelgenaue Darstellung zu erreichen, fügen wir häufig ein Bild mit dem Design als Hintergrund hinzu und bauen dann die eigentliche App darauf auf. Wir empfehlen auch die Verwendung von Containern und relativen Positionen innerer Elemente in diesen Containern, um die Abstände so zu steuern, wie sie im Design angegeben sind. Auf diese Weise können Sie Komponenten auf höherer Ebene verschieben, ohne ihr inneres Layout zu zerstören.
Bonus: Ein paar nette Kleinigkeiten können viel bewirken
Um Ihre App hervorzuheben und eine ansprechende Benutzererfahrung zu schaffen, sollten Sie Animationen und interaktive Elemente hinzufügen. Power Apps bietet eine Reihe von Animationseffekten und Steuerelementen, mit denen Sie Ihre App zum Leben erwecken können. So können Sie z. B. eine Auf- und Zuklappfunktion für Ihre Navigations- und/oder Filtermenüs implementieren, was die Benutzerfreundlichkeit erhöht und die Liebe zum Detail demonstriert.
Tipps & Best Practices
Im Folgenden finden Sie einige zusätzliche Tipps und bewährte Verfahren, die Sie bei der Gestaltung Ihrer Power-Apps-Benutzeroberfläche berücksichtigen sollten:
- Sorgen Sie dafür, dass die Navigation einklappbar ist, damit sich die Benutzer auf den Inhalt konzentrieren können, wenn sie ihn nicht benötigen.
- Ziehen Sie eine Breadcrumbs-Navigation in Betracht, um einfach durch die Bildschirme zu blättern.
- Setzen Sie Farben strategisch ein, um wichtige Elemente hervorzuheben und Informationen schnell zu vermitteln: Ein genehmigtes Element mit einem grünen Häkchen ist zum Beispiel auf den ersten Blick sichtbar, während ein rotes Warnzeichen sofort deutlich macht, dass nähere Aufmerksamkeit erforderlich ist.
- Erkunden Sie die Bibliothek der Steuerelemente. Sie müssen nicht immer alles von Grund auf neu erstellen, denn der Microsoft-Marktplatz bietet viele Komponenten, die Ihnen Zeit und Mühe ersparen
- Wählen Sie schöne Icons aus dem Fluent UI Icon Pack. Das Fluent UI Icon Pack ist eine Sammlung von Icons, die sich an der Designsprache von Microsoft orientieren und hier erhältlich sind.
Endergebnis
Hier sehen Sie ein Beispiel für eine konfigurierbare mehrstufige Budgetgenehmigungsanwendung, die wir mit unserem Designprozess erstellt haben.
Wenn Sie Fragen zu unserem Design- und Implementierungsprozess haben oder eine Demo der hier gezeigten App sehen möchten, zögern Sie nicht, uns unter hello@automatify.ch zu kontaktieren.