[bl] Podcast Folge 8 - DiGA Wireframes

Wireframes sind eine Art designlose vereinfachte Form der Visualisierung eines Screens, die weniger dazu dienen, über Ästhetik und Geschmack zu diskutieren, sondern vielmehr dazu dienen, sich auf die Gewichtung, Struktur und Form der Funktionalitäten und Inhalte der App Gedanken zu machen. Dabei ist ein Wireframe meistens ein einzelner Screen, den Nutzer*innen dann in der App sehen und darauf interagieren.

Bevor man sich über Wireframes Gedanken macht, ist es ratsam, sich über die Haupt-Usecases Gedanken gemacht zu haben. Wie das geht, haben wir bereits in einer früheren Folge erklärt. Zusammen mit der priorisierten Liste an angedachten bzw. gewünschten Funktionalitäten kann man anfangen, eine Struktur der App aufzubauen.

Was sind die Haupt- bzw. Kernbereiche der App? Dies lässt sich in der Regel schnell herausfinden, indem man die geplanten Funktionalitäten und Themenbereiche in sinnvolle, logische und möglichst intuitiv nachvollziehbare Gruppen bzw. Blöcke zusammenfässt. Dadurch ergibt sich automatisch schon eine guter Startpunkt, wie sich die App in Bereiche bzw. Menüpunkte strukturieren lässt. Es ist okay, wenn man im Laufe des Projektes feststellt, dass sich einzelne Bereiche noch weiter zusammenfassen lassen oder andersherum sogar noch weitere Menüpunkte hinzukommen. Wichtig ist, dass man die Nutzer*innen nicht mit zu vielen Bereichen überfordert.

Für jeden einzelnen Menüpunkt ist es sinnvoll, sich über die grobe Struktur und Inhalte Gedanken innerhalb des Bereiches zu machen. Dies hilft auch, zu prüfen, inwiefern ein Bereich nicht zu überladen ist und eventuell weiter aufgeteilt werden muss oder eine Struktur mit Ober- und Untermenüpunkten notwendig sein könnte.

Ich selbst beginne beim Definieren der Struktur eines Menüpunkts bzw. Bereichs damit, erstmal grob eine Liste mit Stichpunkten zu erstellen, die in sich nochmal gruppiert wird: Können einzelne Stichpunkte nochmal zu Untermenüpunkten zusammengefasst werden?! Ist die Liste erstellt, fange ich an, diese zu priorisieren: Was ist die für die Nutzer*innen wichtigste Information oder Funktion in diesem Bereich. Was sollte am schnellsten und einfachsten erreicht oder gesehen werden? Durch die Priorisierung der Liste wird schnell eine grobe Struktur definiert.

Mithilfe von Wireframes kann man nun die Liste auch grob visualisieren. In welcher Form etwa sollte die Funktion oder der Inhalt dargestellt werden – mit oder ohne Bild, mit viel oder wenig Text, ein großer oder ein kleiner Button. Die Größe und Position, die eine Funktion bzw. Inhalt am Ende einnimmt, entscheidet in der Regel auch automatisch über Sichtbarkeit und damit auch Gewichtung für die Nutzer*innen!

Ein Tipp: Weniger ist manchmal mehr! Ein überladener Screen kann Nutzer*innen überfordern oder von wesentlichen Punkten ablenken. In einem solchen Fall kann es besser sein, einen Bereich aufzusplitten bzw. die Inhalte auf mehrere Screens aufzuteilen.

Auf diese Weise konzipiert und entwickelt man alle Kernbereiche der App. Auch wenn noch ein richtiges Design fehlt, hilft diese Form der Visualisierung einen ersten Eindruck des Produktes zu gewinnen und auch schon erste Feedbacks von potenziellen Nutzer*innen einzuholen.

Der nächste Schritt: Klären, wie die einzelnen Wireframes, die Screens der App, miteinander verknüpft sind. Dabei kann es passieren, dass Wireframes nochmal verändert werden oder umstrukturiert wird! Genauer erklären wir dies in einer der nächsten Folgen!