Wie gestaltet man eine Schlüssel­management App?

Genau diese Frage stellten wir uns zu Beginn der Entwicklung. Als UX Designer war und ist die Gestaltung der Web App eine spannende und herausfordernde Aufgabe. Log+Key ermöglicht es, Schlüssel und andere Objekte digital zu verwalten – bequem über Smartphone, Tablet, Desktop oder ein Terminal. Mit Hilfe von NFC-Tags können Objekte zum Ausleihen oder Abgeben gescannt und automatisch erfasst werden, um den Prozess des Schlüssel­managements zu digitalisieren.

Doch wie gestaltet man so eine App? Dieser Artikel will die Herausforderungen, Anforderungen und Herangehensweisen bei der Gestaltung einer solchen Web App aus der Sicht eines UX Designers beleuchten.

‍

‍

Erste Herausforderung: Etwas Neues ohne Vergleich

Wie gestaltet man etwas, das es noch nicht gibt? Da es kaum vergleichbare Apps mit ähnlichem Funktionsumfang gibt, waren wir darauf angewiesen, „from scratch“ zu starten – das ist eine besondere Herausforderung, bietet aber auch neue Möglichkeiten und einen Designprozess aus einem frischen Blickwinkel. Was ist beim Designen auf leerem Papier besonders wichtig?

‍

Benutzerzentriertes Design: Diese Designmethode beinhaltet die Erforschung der Bedürfnisse und Erwartungen der potenziellen Benutzer, um deren Workflow, Schmerzpunkte und Wünsche zu verstehen. Dies hilft uns, den Entwurfsprozess auf die tatsächlichen Anforderungen der Benutzer auszurichten.

Frühes Prototyping und Testing: Um unsere Ideen zu validieren, testen wir in sehr frühen Entwicklungsphasen Prototypen, um frühzeitig Feedback zu erhalten und sicherzustellen, dass unsere Designentscheidungen auf realen Benutzererfahrungen basieren.

Agile Entwicklung: Diese ermöglicht es uns, flexibel auf Veränderungen und Anforderungen unserer Pilotkunden zu reagieren, während wir die Anwendung kontinuierlich verbessern. In kurzen Entwicklungszyklen können wir auf Benutzerfeedback und sich entwickelnde Anforderungen reagieren.

‍

Usability für unerfahrene Nutzer

Da Log+Key als Anwendung innerhalb von Unternehmen eingesetzt wird, die ihre Objekte oder Schlüssel bisher manuell verwaltet haben und die App als Entlastung der Mitarbeiter*innen dienen soll, ist eine der größten Anforderungen die Usability, trotz der weiteren Anforderungen und Features, so einfach wie möglich zu gestalten. Folgende Punkte sind dabei wichtig:

‍

Intuitives UI: Um Benutzer ohne App-Erfahrung nicht zu überfordern, entwickeln wir eine benutzerfreundliche Oberfläche. Dies beinhaltet die Platzierung von Schaltflächen und Optionen an intuitiven Stellen und die Vermeidung von überflüssigen Elementen oder Fachbegriffen. Vor allem die Terminal Lösung der App, die in den Unternehmen vor Ort auch von externen Mitarbeiterinnen oder Dritten genutzt wird, muss reduziert und für jeden klar und verständlich sein.

Barrierefreie Gestaltung: Wir stellen sicher, dass die Anwendung von Menschen mit unterschiedlichen Kenntnissen und Fähigkeiten genutzt werden kann. Dies beinhaltet klare und leicht verständliche Elemente, hohe Kontraste, lesbare Typografie mit klaren Hierarchien und den Einsatz von Farbe als unterstützendes (und nicht als notwendiges) Element, sowie das Nutzen von einfacher Sprache.

Onboarding Elemente: Wir führen leicht verständliche Onboarding Elemente ein, die Benutzern bei der ersten Verwendung der App helfen. Diese Elemente führen die Nutzer durch die wichtigsten Funktionen und zeigen ihnen, z.B. wie sie Schlüssel oder andere Objekte scannen können. Unterstützt wird das Ganze durch erklärende Animationen und Texte.

‍

‍

Integration von neuen Anforderungen und gewünschten Features

Im Laufe des Design- und Entwicklungsprozesses kommt es auch vor Release zu neuen Funktionen und Anforderungen, die in das bestehende Layout integriert werden müssen. Dies erfordert eine sorgfältige Planung und Herangehensweise.

Bei Log+Key z.B. war die ursprünglich Idee auf die Verwaltung von Schlüsseln ausgerichtet. Doch im Verlauf der Entwicklung stellten sich neue Anforderungen ein: Kunden wollten die Möglichkeit, auch andere Objekte als nur Schlüssel zu scannen und brauchten zusätzliche Features wie die Möglichkeit, Unterschriften bei der Ausleihe zu erfassen, Fotos von Schlüsseln zu speichern, Änderungen am Schlüsselbund einzusehen, die Möglichkeit, Objekte in Gruppen zu organisieren oder verschiedene Rollenverteilungen für die Nutzer festzulegen. Diese zusätzlichen Anforderungen brachten eine Herausforderung mit sich: Wie können wir die App so gestalten, dass eventuelle, neue Features einfach und nahtlos integriert werden können, ohne die Usability und Leistung der Anwendung zu beeinträchtigen? Ein wichtiger Baustein für uns, damit dies gelingt:

‍

Modulare Elemente: Die Anwendung und einzelne Elemente wurden von Anfang an so konzipiert, dass sie modular und erweiterbar sind. Dies ermöglicht es, neue Funktionen ohne größere Umstrukturierungen hinzuzufügen. Das Card Element für Objekte lässt sich zum Beispiel durch leichte Abwandlungen für die unterschiedlichsten Funktionen nutzen. So wird aus einem Card Element für Schlüssel durch unterschiedliche Icons und Farbabstufungen ein Card Element für die verschiedensten Objekte oder Benutzer.

‍

‍

Markenidentität, Ästhetik und weitere Punkte

Die Ästhetik und Markenidentität von Log+Key mit der Web App zu vereinen ist ebenfalls eine Herausforderung: Es gilt, eine intuitive, einfache und professionelle Benutzeroberfläche zu gestalten, die nicht nur funktional, sondern auch ästhetisch ansprechend ist und gleichzeitig zur Markenidentität des Produkts passt.

‍

Konsistenz: Eine konsistente Benutzeroberfläche über alle Plattformen hinweg zu schaffen, ist ein wichtiger Faktor. Dies beinhaltet das Gestalten von responsiven UI-Elementen, Farbschemata und Interaktionen, die sich auf verschiedenen Geräten und Bildschirmgrößen gut anfühlen. Durch sehr modulare und einfache Design Elemente mit einprägsamer Typografie und prägnanten Farben wird die Konsistenz auf allen Geräten sichergestellt.

Mikrointeraktionen: Die relativ „einfachen“ Design Elemente werden mit einer klaren Farb- und Bildsprache aufgelockert. Mikrointeraktionen machen eine Anwendung lebendig und vermitteln Benutzern das Gefühl von Kontrolle und Verständnis. Bei der Gestaltung von Log+Key ist es die Aufgabe, diese Mikrointeraktionen geschickt zu integrieren, um die Benutzererfahrung zu verbessern und gleichzeitig die Markenidentität zu integrieren. So gibt es zum Beispiel erklärende Animationen während des Login- oder Scanprozesses.

‍

Visuelle Feedback: Um den Benutzern sofortiges visuelles Feedback zu geben, werden Animationen und visuelle Effekte integriert. Ein erfolgreicher NFC-Scan wird beispielsweise mit einer grünen Bestätigungsanimation begleitet, während Fehlerzustände mit auffälligen Warnsymbolen und roten Hervorhebungen dargestellt werden. Dies verbessert ebenfalls die Nutzererfahrung und gibt die Möglichkeit, der App den Stempel der Markenidentität aufzudrücken.

Die ästhetische Gestaltung und die Berücksichtigung der Markenidentität sind entscheidend, um eine positive Wahrnehmung der Log+Key Web App zu fördern und Vertrauen bei den Benutzern zu schaffen. Die harmonische Integration von Ästhetik und Markenidentität ist ein wesentlicher Schritt bei der Schaffung einer Webanwendung, die sowohl funktional als auch visuell ansprechend ist.

‍

Fazit?

Insgesamt war und ist die Gestaltung der Log+Key App eine ganzheitliche Herausforderung. Durch die sorgfältige Berücksichtigung von Usability, Barrierefreiheit, Feedback, Modularität und Ästhetik können wir eine hochwertige Anwendung gestalten, die sowohl benutzerfreundlich als auch funktional ist. Die enge Zusammenarbeit zwischen Designern, Entwicklern und Partnern/Kunden war entscheidend, um diese Herausforderungen erfolgreich zu bewältigen.

Das Prinzip des iterativen Designs ist dabei enorm wichtig. Log+Key immer weiterentwickelt, getestet, geändert, verbessert und auf neue Situationen eingestellt um auch ganz speziellen Anforderungen unserer Kunden an unsere App gerecht zu werden.

‍

‍

‍

‍