Mobile Apps leben von einem ansprechenden und gut strukturierten Design, das Nutzern hilft, ihre Ziele zu erreichen. In diesem Artikel zeige ich, wie sich ein älteres App-Design modern und aufgeräumt neu gestalten lässt. Dabei geht es um den Designprozess und um konkrete Entscheidungen für eine nutzerzentrierte UI und UX.
Wir alle empfehlen Dinge, die helfen, Aufgaben schnell und einfach zu lösen. Das gilt nicht nur für Apps. Für diese Designreise habe ich mir die App „Nützlinge im Garten“ ausgesucht, die für Android und iOS verfügbar ist und schon länger kein Update mehr erhalten hatte. Herausgegeben wird sie vom Bundesinformationszentrum für Landwirtschaft und Ernährung. Ein solches Redesign ist gelebtes UX/UI Design für Apps: Wir denken die Nutzung neu, ordnen Inhalte klarer und schaffen so ein Erlebnis, das Orientierung und Spaß gibt. Da sich Geschmäcker und Trends verändern, ist ein visuelles Update von Zeit zu Zeit durchaus sinnvoll.
Der Artikel gliedert sich in die folgenden Bereiche, damit der Designprozess leichter nachvollziehbar wird:
Die App liefert Informationen zu Lebewesen wie Insekten und Pilzen. Alles, was im Garten oder in der Natur fliegt und krabbelt und sich gegen Schädlinge einsetzen lässt, ist hier aufgeführt. Auch die Gruppe der Schädlinge kann gesucht und bestimmt werden. Bevor wir über ein neues Design nachdenken, schauen wir uns zunächst die bestehenden Screens an.
Die Screens verdeutlichen im Kern zwei Nutzungsszenarien:
Auffällig ist zunächst die Top App Bar, die Logo und Namen des App-Anbieters enthält. Das war vor einigen Jahren noch üblich, wirkt heute aber überholt und ist der erste Punkt, den ich anpassen würde. Die grüne Hintergrundfarbe ist eine der vier Markenfarben des Bundesinformationszentrums und liegt über einer angedeuteten Blumenwiese.
Brauchst du Unterstützung bei einem Designprojekt?
Bei Cayas Software bringen wir gerne unsere Erfahrung mit ein - zusammen mit unserem UI/UX-Design-Team.
Mehr zu unseren Designleistungen
Nach dem Laden der App erscheint diese Seite als Einstieg in die verschiedenen Funktionen. Neben dem App-Namen werden Buttons für die einzelnen Bereiche angeboten. Die Buttons besitzen eine Holzoptik, die gemeinsam mit dem grünen Hintergrund das Naturthema betonen soll.
Die Aktionsbereiche sind:
Bis auf die Fotosuche schauen wir uns alle Bereiche in diesem Beitrag genauer an und passen sie an heutige UI/UX-Standards für mobile Apps an.
Beim Durchklicken fällt auf, dass nicht alle Bereiche wirklich zu den Hauptfunktionen der App gehören. Hinter dem Info-Button verbergen sich beispielsweise Datenschutz, Impressum, Barrierefreiheit und allgemeine Informationen über die App sowie das Bundesinformationszentrum. Hier stellt sich die Frage, ob diese Informationen auf der Startseite so prominent platziert sein sollten.
Außerdem sind Texte, Icons und Skizzen auf den Buttons teilweise schwer erkennbar, weil der Kontrast zu gering ist. Inhaltlich fällt auf, dass drei von fünf Buttons das Thema Nützlinge behandeln. Genau hier lässt sich sinnvoll zusammenfassen. Insgesamt sitzen die Elemente sehr weit oben und dicht beieinander, wodurch am unteren Bildschirmrand viel ungenutzter Raum entsteht.
Der Menüpunkt „Nützlinge bestimmen“ bietet die Möglichkeit, über zwei Buttons genauer einzugrenzen, um welche Art von Nützling es sich handelt. Wird die Kategorie Pilze gewählt, kann die Auswahl im nächsten Screen weiter verfeinert werden. Wird - wie im folgenden Beispiel - Tiere ausgewählt, lässt sich die Suche hier über die Anzahl der Beine weiter eingrenzen. Die Auswahl „6 Beine“ führt dann zu einem Screen, auf dem nur Insekten angezeigt werden.
Hier stellt sich die Frage, ob dieser Zwischenschritt überhaupt sinnvoll ist. Warum nicht direkt mit der Auswahl der Insektenart beginnen? Auch in diesem Screen fällt auf, dass die Elemente sehr weit oben angeordnet sind und unten viel Raum ungenutzt bleibt.
Wählt man die Option „Insekten“, werden 13 Insektenarten mit Zeichnungen und Namen angezeigt. Über diese „Buttons“ lässt sich die Bestimmung weiter eingrenzen. Die Frage, die ich mir dabei gestellt habe: Wie oft werden die Fakten zu Insekten tatsächlich gelesen, sodass sie dauerhaft und so prominent angezeigt werden müssen? Nach gängigen Usability-Prinzipien sollten Informationen dann sichtbar sein, wenn sie gebraucht werden.
Über den Button „Nützlinge von A-Z“ können Nützlinge per Suchfeld namentlich gefunden werden. Das Ergebnis wird alphabetisch mit Bild und Namen dargestellt. Funktional ist hier wenig auszusetzen, aber die Ausrichtung und visuelle Struktur lassen sich verbessern.
Wird ein Nützling ausgewählt, öffnet sich eine Detailansicht mit großem Bild und weiteren Informationen. Bei einigen Tieren, wie hier beim Marienkäfer, können durch Wischen weitere Bilder angezeigt werden. Über das Lupensymbol lassen sich Bilder vergrößern. Zusätzlich gibt es Informationen zu „Wirksam gegen“, „Aussehen“, „Lebensweise“, „Bedeutung und Besonderheiten“ sowie „Schützen und Fördern“.
Die Links zu den Informationsbereichen sind hauptsächlich im oberen Bereich angeordnet. Dadurch entsteht weiter unten erneut viel ungenutzter Raum. Funktional fehlen hier keine großen Erweiterungen, visuell spricht aber nichts gegen eine Auffrischung.
Der Bereich der Schädlinge ist inhaltlich ähnlich aufgebaut wie der Bereich der Nützlinge. Auf eine vollständige Detailanalyse verzichte ich deshalb. Für das Redesign konzentriere ich mich auf die Gestaltung des Nützlingsbereichs und übertrage das Design anschließend auf die Schädlinge.
Nachdem alle neu zu gestaltenden Ansichten analysiert wurden, können wir nun mit dem eigentlichen Redesign beginnen.
Bereits in der Analyse sind mehrere Stellen aufgefallen, an denen sich Verbesserungen anbieten. Für ein konsistentes Erscheinungsbild beginne ich mit einem Farbkonzept. Dazu schauen wir uns das Logo und die verwendeten Farben an, die das Corporate Design des Bundesinformationszentrums prägen.
Nach der Farbsymbolik steht Grün für Natur, Frische und Fülle - passend zum Gartenthema und bereits im alten Design als Hintergrundfarbe vorhanden. Gelb steht für Licht, wirkt aber auch warnend. Rot kann für Liebe, aber ebenso für Gefahr stehen, Schwarz für Tiefe und Zurückhaltung.
Betrachten wir die verschiedenen Kategorien der App:
Für diese drei Bereiche lassen sich drei Farben aus dem Logo passend nutzen. Nützlinge bekommen Grün, Schädlinge Gelb und Informationen Schwarz. So ist jederzeit klar, in welchem Bereich der App man sich befindet.
Ausgehend vom bisherigen Design habe ich mehrere Varianten ausprobiert. In einer ersten Fassung nimmt der Header die jeweilige Signalfarbe voll auf, kombiniert mit einem Naturfoto und einer farbigen Überlagerung. Meiner Meinung nach wirkt diese Variante zu dominant. Der Hintergrund würde zu sehr von Bildern und Inhalten ablenken.
In einer zweiten Variante bleibt der Body weiß und nur die Inhaltselemente werden eingefärbt. Das verschiebt den Fokus zwar stärker auf die Inhalte, mir reicht die farbliche Unterscheidung der Kategorien aber noch nicht aus.
Auch in der dritten und letzten Variante bleibt der Header in Grün, Gelb oder Schwarz. Die Body-Farbe wird aus dem jeweiligen Farbwert abgeleitet, aber deutlich heller gewählt. Dadurch können die Inhaltselemente weiß bleiben, die eingefügten Bilder stehen stärker im Fokus, und der Kontrast zur Typografie bleibt gut.
Ich habe mich für diese dritte Variante entschieden. Hier werden die drei Bereiche klar unterschieden, während der Hintergrund zurücktritt und die Inhalte die Aufmerksamkeit erhalten, die sie brauchen.
Ihnen gefällt, wie wir die Dinge angehen?
Dieser Blog soll einen kleinen Einblick in unseren Alltag geben, wenn wir Designaufgaben übernehmen - ganz gleich, ob wir eine App im Full-Service entwickeln oder unsere Expertise gezielt als EaaS einbringen.
Mehr zu unseren Designleistungen
Beginnen wir wieder mit der Startseite und dem App-Titel „Nützlinge im Garten“. Der Titel einer App gehört heute nicht mehr in die App Bar. Früher war das üblich, heute zeigt bereits der Launch Screen den Namen der App. Innerhalb der Screens ist eine Wiederholung nicht mehr nötig. Stattdessen sollte die Gestaltung selbst so prägnant sein, dass Nutzer jederzeit erkennen, in welcher App sie sich befinden.
Die Hauptfunktion dieser App besteht darin, Nützlinge zu bestimmen und Informationen über sie zu erhalten. Im alten Design betreffen drei der fünf Funktionsbereiche genau dieses Thema. Mit etwas Ordnung und Neuorganisation zeigt die Startseite nun direkt die wichtigste Funktion der App - ohne Umwege. Nützlinge lassen sich sofort bestimmen. Die Unterscheidung zwischen Tier und Pilz sowie die Suche per Foto sind direkt nach dem Laden erreichbar.
Andere Bereiche mussten dafür weichen. „Nützlinge von A-Z“ und „Schädlinge von A-Z“ sind nun jederzeit über die Bottom Tab Bar erreichbar, die von jedem Screen aus zugänglich ist. Diese neue Sortierung reduziert unnötige Klicks und bringt Nutzer schneller ans Ziel. Der Info-Bereich bleibt erhalten, wandert aber an eine passendere Stelle: Datenschutz, Barrierefreiheit und ähnliche Inhalte liegen nun hinter einem Info-Icon in der App Bar.
Im Gegensatz zum alten Screen wird die Liste der Insektenarten nun als echte Liste dargestellt. Dadurch bleibt die Informationsstruktur konsistent und wirkt aufgeräumter. Längere Namen passen problemlos in den Textbereich, ohne dass die Schriftgröße reduziert werden muss.
Insektenfakten, die früher dauerhaft im Vordergrund standen, sind nun verborgen und können bei Bedarf eingeblendet werden. Denn nicht jedes Mal müssen Fakten gelesen werden, die bereits bekannt sind und sich nicht verändern.
Wird - wie im Beispiel - die Gruppe der Erzwespen ausgewählt, lassen sich die Fakten per Herunterziehen des Infobereichs sichtbar machen. Ich habe hier bewusst auf denselben Mechanismus gesetzt, um die Interaktion konsistent zu halten. Dadurch entsteht mehr Platz für das eigentliche Ziel: die Liste der Nützlinge.
Im Vergleich zum alten Design sind die Karten mit den dargestellten Nützlingen jetzt höher und geben den Tierbildern mehr Raum. Zwischen den Feldern entsteht Luft, die dem Auge Ruhe gibt und die Gesamtansicht ordentlicher wirken lässt.
Wird ein Tier ausgewählt, öffnet sich seine Detailseite - im Beispiel der Marienkäfer. Das Foto, das im alten Design noch von Text und Feldern überlagert wurde, bleibt im neuen Layout klar sichtbar. Der Header-Bereich mit Bild und Tiername orientiert sich gestalterisch an den Karten aus der Nützlingsübersicht.
Wenn mehrere Bilder eines Tieres vorhanden sind, zeigt ein Indikator unter dem Header dies an. Das Lupensymbol zum Vergrößern des Bildes sitzt nun unten links im Bild.
Die Seite zeigt außerdem fünf Informationsbereiche: „Wirksam gegen“, „Aussehen“, „Lebensweise“, „Bedeutung und Besonderheiten“ sowie „Schützen und Fördern“. Alle Kategorien sind im neuen Design klarer voneinander getrennt. Der bewusst eingesetzte Weißraum sorgt auch hier für Struktur, und visuelle Hierarchien - zum Beispiel in der Typografie - unterstützen die Übersicht zusätzlich.
Wenn Sie es bis hier geschafft haben, gehen wir davon aus, dass Sie ein gewisses Interesse an unserer Arbeit gewonnen haben. Das freut uns. Geben Sie uns gern Feedback oder sprechen Sie mit uns über Ihr Projekt.
Lassen Sie uns reden
Wie im alten Design habe ich auch im neuen Entwurf wieder Breadcrumbs integriert und bewusst visuell hervorgehoben. Gerade in diesem Informationskontext entsteht hier ein guter Lerneffekt, wenn Nutzer mit der Zeit lernen, dass Florfliegen Insekten sind und zu einer bestimmten Ordnung gehören.
Wie bereits erwähnt, sind Struktur und Informationsgehalt von Nützlingen und Schädlingen ähnlich. Damit Nutzer sofort erkennen, dass sie sich im Schädlingsbereich befinden, wird dort die im Farbkonzept definierte Farbe Gelb eingesetzt.
Zuletzt fehlt nur noch der Bereich mit allgemeinen Informationen. Hierzu zählen Datenschutz, Impressum, allgemeine Hinweise zur App und ähnliche Inhalte. Für diesen Bereich habe ich im Farbkonzept Schwarz vorgesehen und die gleiche strukturelle Logik wie in den anderen Bereichen verwendet.
Falls du dich fragst, warum das Rot aus dem Logo nicht verwendet wird: Diese Farbe kommt im Fehlerfall zum Einsatz. Ansonsten habe ich bewusst darauf verzichtet, weil Rot klassisch mit Warnungen, Problemen oder Gefahren verbunden ist. In manchen Apps kann Rot natürlich eine Primärfarbe sein - das hängt stark vom Corporate Design ab.
Vergleicht man beide Varianten, fällt auf, dass im neuen Entwurf nicht mehr der Hintergrund mit seinem kräftigen Farbraum dominiert, sondern die Inhalte. Alle eingesetzten Schriftfarben bieten ausreichend Kontrast zum Hintergrund und sind gut lesbar. Die Fotos der Nützlinge werden größer und vollständiger dargestellt. Das neue Design wirkt frisch, aufgeräumt und dadurch deutlich klarer.
Ich hoffe, ich konnte dir einen Einblick in meine Arbeit geben. Wenn du selbst ein App-Redesign planst und Unterstützung brauchst, melde dich gern bei uns. Ansonsten freue ich mich darauf, auch dein Re-Design zu sehen.
Ein sinnvolles App-Redesign startet mit der Analyse des Ist-Zustands, identifiziert inhaltliche und visuelle Schwächen, entwickelt ein klares Gestaltungskonzept und ordnet Inhalte anschließend so neu, dass Nutzer schneller ans Ziel kommen.
Weil eine klare visuelle Struktur, gute Kontraste, sinnvolle Hierarchien und saubere Navigation direkt beeinflussen, wie schnell und angenehm Nutzer ihre Aufgaben erledigen können.
Die Startseite wurde fokussierter aufgebaut, Inhalte wurden neu sortiert, unnötige Zwischenschritte entfernt, Kategorien farblich klarer differenziert und Detailseiten übersichtlicher gestaltet.
Als UI/UX Designerin bin ich für alle Themen rund um Design und Nutzungserfahrung zuständig. Unsere Kunden unterstütze ich mit meinem Gespür für intuitive Nutzungsoberflächen und charmante Design- und Farbkonzepte. In meinen Blogs werde ich Einblicke in meine Arbeit geben, über UI/UX Themen sprechen und Designtrends unter die Lupe nehmen.
Als Entwickler kennen wir alle das Gerücht, dass jede Art von Test teuer ist. In diesem Beitrag möchte ich einen besseren Weg zeigen, UI-Tests zu schreiben, der sogar bei großen mobilen Apps Spaß machen kann.
In diesem Artikel lernst du, wie du Lottie-Animationen in .NET MAUI integrierst und sie mit Gesten, Scroll-Positionen und CarouselViews verknüpfst. Du erfährst, wie Animationen per Tap, durch Tippen & Halten, über Scroll-Interaktionen sowie beim Wechseln von CarouselView-Seiten gesteuert werden. Zusätzlich bekommst du komplette XAML- und C#-Beispiele, Best Practices und fertige Demo-Videos, um interaktive und moderne UI-Erlebnisse in deiner MAUI-App umzusetzen.
Ich arbeite derzeit an der Portierung einer Xamarin Forms App zu .NET MAUI. Die App verwendet auch Karten von Apple oder Google Maps, um Standorte anzuzeigen. Obwohl es bis zur Veröffentlichung von .NET 7 keine offizielle Unterstützung in MAUI gab, möchte ich Ihnen eine Möglichkeit zeigen, Karten über einen benutzerdefinierten Handler anzuzeigen.