Welcome-Screen
Der Welcome-Screen dient als erster Berührungspunkt mit der App und wurde entsprechend klar strukturiert gestaltet. Das Logo befindet sich im oberen Bereich und schafft sofort Wiedererkennung und Markenidentität. Darunter folgen Headline und Subline. Innerhalb der Headline ist der Begriff „Hunderasse“ farblich hervorgehoben, um den thematischen Fokus direkt zu verdeutlichen. Eine Illustration von einem Hund und einem Menschen unterstreicht visuell das zentrale Konzept des „Hundematchings“ und schafft eine emotionale Verbindung.
Der Button „Zum Hundequiz“ ist bewusst großflächig gestaltet und bildet den klaren Fokuspunkt des Screens. Durch seine Größe und Platzierung ist er nicht zu übersehen und lenkt die Aufmerksamkeit eindeutig auf die Hauptaktion. Unterhalb befindet sich der Hinweis „Du hast schon ein Account? Dann hier einloggen“. Dieser wurde bewusst nicht als Button umgesetzt, um die Seite nicht mit zu vielen gleichwertigen Call-to-Actions zu überladen. Stattdessen ist „Dann hier einloggen“ typografisch in einer stärkeren Gewichtung sowie farblicher Unterscheidung hervorgehoben, sodass klar erkennbar ist, dass es sich um einen klickbaren Link handelt.
Darunter folgt der Button „Neu anmelden“. Dieser bietet eine alternative Handlungsmöglichkeit, ohne jedoch den primären Fokus vom Hundequiz-Button abzulenken. Die bewusste Reduktion an Buttons sorgt für eine klare visuelle Hierarchie und verhindert kognitive Überlastung.
Frage-Screen (1 & 2)
Im Gegensatz zum Welcome-Screen wurde bei den Frage-Screens Mud Brown als Hintergrundfarbe gewählt. Dadurch entsteht eine visuelle Abgrenzung zwischen Einstieg und Interaktionsphase des Quiz. Gleichzeitig bleibt die Farbwelt konsistent. Die Illustrationen zeigen bei Frage 1 einen Hund mit der Zahl „1“ und bei Frage 2 zwei Hunde mit der Zahl „2“. Dadurch wird spielerisch und visuell unterstützt, auf welcher Frage sich der Nutzer aktuell befindet.
Die Fragestellung selbst ist bewusst groß und prominent platziert, um die Aufmerksamkeit eindeutig auf den Inhalt zu lenken. Die Antwortmöglichkeiten sind als Buttons gestaltet. Im Default-Zustand erscheinen sie in der Farbe Sunstitch. Wird eine Antwort ausgewählt, verändert sich die Farbe des Buttons, und die Schrift wird dicker dargestellt. Dieses visuelle Feedback bestätigt die Interaktion unmittelbar und sorgt für Klarheit.
Zusätzlich zur Illustration wird im unteren Bereich des Screens eine Fortschrittsanzeige in Form von „1/6“ etc. dargestellt. Ergänzend kommen Carousel-Dots zum Einsatz. Die aktuelle Seite wird durch eine Pfote markiert, während die übrigen Seiten als Punkte dargestellt sind. Diese doppelte visuelle Rückmeldung erhöht die Orientierung innerhalb des Quiz. Bei der Gestaltung der Carousel-Dots wurde darauf geachtet, ausreichend Abstand zwischen den Elementen zu lassen, sodass eine Touchfläche von mindestens 44 × 44 px implementiert werden kann. Dies entspricht gängigen Usability-Standards für mobile Interfaces und verbessert die Bedienbarkeit erheblich. Nutzer können sowohl über einen Pfeil als auch direkt über die Dots navigieren, was zusätzliche Flexibilität bietet.
Auswertungs-Screen
Der Auswertungs-Screen greift gestalterisch Elemente des Welcome-Screens auf, um visuelle Konsistenz zu gewährleisten. Headline und Fließtext befinden sich im oberen Bereich, wobei der Begriff „Hunderassen“ erneut farblich hervorgehoben ist. Die drei Ergebnisse werden jeweils als großflächige Buttons dargestellt. Farblich orientieren sie sich am „Neu anmelden“-Button, wodurch ein konsistentes Gestaltungssystem entsteht. Innerhalb der Buttons hebt sich die Headline klar von der Subline ab, sodass Informationen hierarchisch gegliedert sind.
Ein Pfeil auf der rechten Seite des Buttons dient als visueller Indikator dafür, dass sich hinter dem jeweiligen Ergebnis weitere Informationen verbergen. Gleichzeitig wird die gesamte Button-Fläche als klickbarer Bereich gestaltet, um die Interaktion so intuitiv wie möglich zu machen.
Die Navigationsleiste in der Fußleiste ist stilistisch an eine Pfote angelehnt und greift damit das zentrale Thema der App erneut auf. Unter jedem Icon befindet sich zusätzlich eine textliche Bezeichnung, um die Accessibility zu erhöhen und Missverständnisse bei der Icon-Interpretation zu vermeiden. Das Favoriten-Icon befindet sich mittig innerhalb der fünf Icons und ist zudem etwas größer gestaltet. Dadurch wird es als zentrales Element hervorgehoben, da davon ausgegangen wird, dass Nutzer häufiger Favoriten speichern als beispielsweise suchen.
Hunderasse-Detailanzeige-Screen
Auf dem Detail-Screen bleibt die Navigationsleiste konsistent zum Auswertungs-Screen. Der Unterschied liegt darin, dass das Icon „Rasse“ hervorgehoben ist. Im inaktiven Zustand wird das Hunde-Icon als Outline dargestellt, im aktiven Zustand hingegen vollständig farbig. Dieses visuelle Feedback signalisiert eindeutig, auf welchem Navigationspunkt sich der Nutzer befindet.
Die Kombination aus Hunde-Icon und dem darunterstehenden Begriff „Rasse“ ist bewusst gewählt. Ein reines Icon könnte unterschiedlich interpretiert werden. Durch die zusätzliche textliche Bezeichnung wird eindeutig kommuniziert, dass es sich um den Bereich der Hunderassen handelt. Diese doppelte Codierung (Icon + Text) verbessert die Verständlichkeit und unterstützt die Accessibility, insbesondere für Nutzer, die Icons nicht intuitiv zuordnen können. Der Beschreibungstext der Hunderasse wurde auf einem Hintergrund platziert, der sich klar vom gelben Grundton abhebt, um den Textbereich visuell zu strukturieren.
Der Fließtext ist linksbündig gesetzt und in Absätze unterteilt, was die Lesbarkeit deutlich verbessert. Durch ausreichend Weißraum wird zudem eine angenehme Textwahrnehmung unterstützt.