Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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