Wireframes dienen der vereinfachten Visualisierung eines Screens. Mit ihrer Hilfe lassen sich Struktur und Form der Funktionalitäten sowie Inhalte der App abbilden. Ein Wireframe ist meist ein einzelner Screen, der zeigt, welche Elemente Nutzer*innen in der App sehen und wie sie mit diesen interagieren.

Bevor wir mit der Entwicklung von Wireframes beginnen, ist es ratsam, sich zunächst Gedanken über die wichtigsten Use-Cases der App zu machen. Erst danach widmen wir uns der Struktur.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Sie sehen gerade einen Platzhalterinhalt von Spotify. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

 

Funktionen und Bereiche zusammenfassen

Dafür definieren wir zunächst die Haupt- oder Kernbereiche der App: Welche Funktionalitäten und Themenbereiche lassen sich in sinnvolle, logische und möglichst intuitiv nachvollziehbare Gruppen oder Blöcke zusammenfassen?

Aus dieser Frage ergibt sich ein erster Aufbau, der sich im Laufe der Konzeption weiterentwickelt. Oftmals lassen sich Bereiche zusammenfassen oder wir ergänzen weitere Menüpunkte, die wir in Ober- und Untermenüpunkte unterteilen. Wichtig ist, dass die App die Nutzer*innen nicht mit zu vielen Bereichen und Inhalten überfordert.

Um den Überblick zu behalten, ist eine Prioritätenliste zu empfehlen:

  • Was ist für die Nutzer*innen die wichtigste Information oder Funktion in diesem Bereich?
  • Welche Funktionen sollten Nutzer*innen direkt nutzen können?
  • Welche Informationen sind für Nutzer*innen am relevantesten?

Darstellung mit Wireframes

Anschließend bilden wir die gewünschten Funktionen und Inhalte mithilfe von Wireframes ab. Wir schauen, wo und wie groß wir Bilder, Texte, Icons und Buttons einbinden möchten. Größe und Position der Elemente sind wichtig für deren Sichtbarkeit und damit verbunden ihre Gewichtung.

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 oder die Inhalte auf mehrere Bereiche aufzuteilen. Erst danach schauen wir, wie die einzelnen Wireframes, die Screens der App, miteinander verknüpft sind. Dabei kann es passieren, dass wir Frames nochmals anpassen oder umstrukturieren.

Auf diese Weise konzipieren und entwickeln wir alle Kernbereiche der App. Obwohl das Design noch fehlt, hilft diese Form der Visualisierung, einen ersten Eindruck des Produktes zu gewinnen und erste Feedbacks von potenziellen Nutzer*innen einzuholen.

Dein Experte

Hosun Lee
Hosun LeeDigital-Health-Experte Bornholdt Lee GmbH

Product Owner, IT-Experte, eHealth Specialist, Mentor im eHealth-Netzwerk Hamburg. Über 20 Jahre IT-Projekterfahrung und Konzeption zahlreicher digitaler Gesundheitsanwendungen.

Gespräch buchenLinkedIn