Entwicklung & Design

Grids, Wireframes, Prototypen: 3 Methoden für besseres App-Design

Flows auf dem Storyboard. (Foto: Andreas Weder)

Von Sketching über Mock-Ups bis zum Bauen einer App gibt es eine Vielzahl an Tools, die ein Designer benutzen kann. Welche sind aber besonders nützlich und produktivitätsfördernd? In diesem Artikel präsentiert UX-Designer Andreas Weder seine drei Lieblings-Tools für besseres App-Design.

„Low Fidelity“ – Fokus und Einfachheit im App-Design

Es gibt viele UX- und UI-Design-Bücher, die das Thema App-Design ausführlichst behandeln – da kann ich in einem kurzen Artikel kaum mithalten. Aber das will ich auch nicht. Stattdessen möchte ich aufzeigen, wieso meine Werkzeuge gut funktionieren und worin ich ihren wahren Wert sehe.

Eine App auf einem Smartphone oder einem Framework wie Magnolia CMS muss klar fokussiert sein – ihr Aufgabenbereich ist scharf umrissen. Apps sind, mehr noch als „richtige“ Anwendungen wie Photoshop, Bausteine eines großen Ganzen. Je klarer ihr Nutzen, desto eher bleiben sie im Gedächtnis des Nutzers hängen und desto eher werden sie für die Erledigung einer bestimmten Aufgabe verwendet. „Tasks“ für Erinnerungen, „Snapchat“ fürs Chatten und „Logs“ für das Lesen von Log-Dateien. Kombi-Apps, die mehrere Dinge gleichzeitig erledigen, haben es oft schwer gegen solche hochgetunten Spezialisten.

App-Design: Ein “low fidelity” Storyboard zeigt zwei Flows.

App-Design: Ein „Low-Fidelity“-Storyboard zeigt zwei Flows. (Foto: Andreas Weder)

Wenn es um das Design von Apps geht, bin ich darum ein Verfechter des „Low-Fidelity“-Ansatzes, der auf rudimentäre Prototypen setzt, um Konzepte sehr früh im Design-Prozess zu validieren. Ich entwickle die Nutzererfahrung mit einfachsten Mitteln: Mit Papier, Bleistift und einem einfachen Werkzeug für Wireframes. Das bedeutet oft Mehrarbeit und wenig Interaktivität, hält mich aber beim Wesentlichen: dem Entwickeln einer Idee für die App und einer klaren Leitlinie für deren Interface. Ich bin fest davon überzeugt, dass der Weg das Resultat mitbestimmt: Die Einfachheit und die Reduktion meiner Methodik begünstigt die Entwicklung einer klaren und fokussierten App.

Legt man diesen „Low-Fidelity“-Ansatz zugrunde, gibt es drei Methoden, die sich in meinen Augen besonders für das Prototyping eignen.

1. Skizzieren auf Grids mit Papier und Bleistift

Malen mit Bleistift kann fast jeder. Eine Idee mit einer Skizze klar ausdrücken ist schon schwieriger, denn Skizzieren will geübt sein. Der wichtigste Effekt dieser Technik ist, dass man ein Problem nicht nur schnell im Kopf durchspielt, sondern zum ersten Mal etwas konkreter wird und in die Tiefe geht.

Um zielgerichtet zu skizzieren, gibt es einige effiziente Hilfsmittel, die zumeist auch dabei helfen sollen, mentale Blockaden zu lösen. Mein liebstes Mittel sind Grids: Ein Grid ist eine Sammlung von typischerweise mehreren, kleinen Rasterbildchen, auf denen eine Lösung entwickelt werden soll. Hier sind meine wichtigsten Grids:

6-up

(Bild: konigi)

(Bild: konigi)

Beim 6-up werden für die Lösung eines Problems in rascher Abfolge sechs unterschiedliche Lösungen skizziert. Die Lösungen sollen nicht unmittelbar gewertet, sondern erst mal skizziert werden. Das ist ein wenig wie Brainstorming mit Papier und Bleistift – ideal, um Blockaden zu lösen. Ich baue verschiedene Varianten und sehe sie mir erst später genauer an. Die Grids sind bewusst ganz klein gehalten, so dass ich nur die wesentlichen Elemente eines Interfaces aufzeichnen kann.

6-up storyboard

(Bild: konigi)

(Bild: konigi)

Das 6-up-Storyboard ist ideal für das Abbilden einer Abfolge von Tätigkeiten oder Zuständen, oft auch Flows oder Journeys genannt. Dabei muss nicht jeder Schritt zwangsweise die Software selbst abbilden. Er kann auch zeigen, wie ich etwa einen Stapel Notizen sortiere, um sie danach mit einem neuartigen UI einzufüllen. Ist ein Flow komplexer, kann ein Board schnell mit zusätzlichen Blättern erweitert werden.

1-up

(Bild: konigi)

(Bild: konigi)

Ein einzelnes, großes Raster für das detaillierte Zeichnen eines Interfaces mitsamt seiner Erklärung in der Seitenspalte. Sein Einsatz ist für mich etwas beschränkt: hierfür verwende ich lieber (Low-Fidelity-)Mockups. Ich benötige 1-ups vor allem dann, wenn ich in kurzer Zeit – etwa für einen Test oder eine Präsentation – die Resultate einer längeren Recherche in einer neuen Fassung eines UI zusammenfassen möchte.

Diese und weitere Grids für euren App-Design-Prozess findet ihr auf konigi.com.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.