Finde dein Hundematch

App Design

Das App Design entstand im Rahmes meines Zertifikatslehrgangs UX/UI Design an der OfG. Die Aufgabe bestand darin, eine App zu designen, die Usern dabei hilft, mithilfe eines interaktiven Quizzes die passende Hunderasse für ihre individuellen Lebensumstände zu finden.

Die verwendete Farbpalette besteht aus warmen Brauntönen, die Natürlichkeit, Geborgenheit und Vertrauen symbolisieren – Eigenschaften, die viele mit Hunden in Verbindung bringen. Ein weiches Grau für die Fließtexte sorgt außerdem für eine ruhige und lesefreundliche Gestaltung.

Für die Headlines wurde die Display-Schrift Super Unicorn gewählt, die mit ihrem verspielten Charakter und den Herzchen als „i-Punkte“ die emotionale Bindung zwischen Mensch und Hund unterstreicht. Für Fließtexte und Microcopy kommt die serifenlose Schrift Lato zum Einsatz – eine moderne Schrift mit sehr guter Lesbarkeit auf digitalen Bildschirmen und vielen Schriftschnitten, welche eine flexible typografische Gestaltung innerhalb der App ermöglichen.

Farbpalette & Fonts

In den Wireframes wurden der grobe Aufbau der App sowie das Raster für das App Design festgelegt.

Wireframes und Raster

Die Fragen-Screen heben sich optisch vom Rest der App ab. Da es sich bei ihnen um einen speziellen Part innerhalb der App handelt, sollte dies durch die verwendeten Gestaltungselemente klar erkennbar sein. Der aus dem Welcome-Screen bekannte Halbkreis wurde vertikal gespiegelt und fungiert hier als gestalterisches Hintergrundelement in der Primärfarbe. Ein dezenter Fließtext oberhalb der Frage zeigt, bei welcher sich der User aktuell befindet.

Die Antwort-Buttons sind in dem hellen Farbton des Hintergrundes gehalten. Ein leichter Schatten sorgt für eine nötige visuelle Abgrenzung und ist bereits aus dem Welcome-Screen bekannt. Nach dem Anklicken wechselt die Farbe des gewählten Buttons zur Primärfarbe – ein visuelles Feedback, das die Auswahl bestätigt. Nach wenigen Sekunden wechselt der Screen zur nächsten Frage, um dem User einen zusätzlichen Klick zu ersparen.

Die Progress Bar ist mit Kreisen gestaltet, anhand derer der User auf einen Blick die Anzahl der Fragen und seinen Fortschritt in dem Quiz sieht. Die aktuelle Frage wird durch einen ausgefüllten Kreis in der Primärfarbe angezeigt. Die Arrow Buttons zeigen dem User die Richtung an und ermöglichen es ihm jederzeit zu einer Frage zurückzukehren.

Fragen-Screens

Beim Wechsel zur Auswertung wird der Halbkreis in der Primarfärbe aus den Fragen-Screens wie folgt animiert: Die Halbkreis verlängert sich sanft nach unten und füllt schließlich den gesamten Screen aus. Dieser fließende Übergang signalisiert dem User, dass das Quiz abgeschlossen ist und nun die Ergebnisse angezeigt werden. Es werden maximal drei Hunderassen vorgestellt, die auf die Antworten des Users zutreffen.

Die empfohlenen Hunderassen werden als Buttons präsentiert. Etwa zwei Drittel der Fläche nimmt ein großformatiges Hundebild ein, darunter folgen der Rassename und eine kurze, passende Beschreibung. Das Pfeil-Icon auf der rechten Seite zeigt dem User, dass er durch einen Klick auf die Buttons weitere Infos erhalten kann.

Die Tab Bar ist am unteren Bildschirmrand positioniert und somit optimal für die einhändige Bedienung mit dem Daumen erreichbar. Die Icons sind in einer dezenten Outline-Optik gestaltet, um nicht vom Hauptinhalt abzulenken. Obwohl die Symbolik weitgehend selbsterklärend ist und User sie meist aus anderen Apps kennen, unterstützt eine ergänzende Textbeschriftung unterhalb der Icons sowohl die Orientierung als auch die Barrierefreiheit.

Auswertungs-Screen

Nachdem der User auf einen Button im Auswertungs-Screen geklickt hat, öffnet sich die jeweilige Seite zur detaillierten Beschreibung der Hunderasse. Der Aufbau ist an den Welcome-Screen angelehnt, was für einen klaren Wiedererkennungswert sorgt. Der Blick des Users wird durch die Verwendung eines Z-Musters harmonisch von den Icons im oberen Bereich zum Text im unteren Bereich geleitet. Dezente Icons im oberen Bereich des Bildschirm erleichtern dem User die Navigation. Er kann zurück zum Auswahl-Screen oder die Rasse durch einen Klick auf das Herz in seine Favoriten aufnehmen. Beim Klick auf das Herz färbt sich dieses in der Primärfarbe und signalisiert dem User so, dass seine Aktion erfolgreich war.

Ein großes, aussagekräftiges Bild der jeweiligen Hunderasse holt den User emotional ab und unterstützt ihn in seiner Entscheidung für oder gegen eine Rasse. Die Eigenschaften der jeweiligen Hunderasse sind farblich durch die Verwendung der Sekundärfarbe und dem Schriftschnitt Bold hervorgehoben. Die einzelnen Punkte werden durch dezente Kreise getrennt, welche die Lesbarkeit nicht beeinträchtigen und sich gut in den Text einfügen.

Detailseite der Rasse

Der längere Beschreibungstext in einem warmen Grau ermöglicht dem User durch seine kurze Zeilenlänge und den gewählten Zeilenabstand eine angenehme Lesbarkeit. Da sich der User aktuell bei den Hunderassen befindet, wird das entsprechende Icon in der Tab Bar in der Primärfarbe dargestellt. Dadurch erhält der User eine klare Orientierung innerhalb der App.