News

Artikel merken

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

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.

5 Min. Lesezeit

Flows auf dem Storyboard. (Foto: Andreas Weder)

„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.

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

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.

2. Wireframes mit Balsamiq Mockups

Werkzeuge für die Erstellung von Wireframes gibt es wie Sand am Meer. An Balsamiq Mockups gefällt mir, dass es seit längerer Zeit einfach geblieben ist, weil es – so wie es ist – gut funktioniert.

Ein mittelgroßer Satz an UI-Elementen lässt sich schnell und einfach zum detaillierten Bau eines Interfaces verwenden. Die dargestellten Inhalte lassen sich mit einer Markdown-ähnlichen Syntax befüllen. Ein sehr praktisches Raster erlaubt ein schnelles Ausrichten von Elementen. Ein umfangreicher Undo-/Redo-Stack speichert selbst die Auswahl von Elementen – ich kann schnell vor- und zurückgehen und verschiedene Ansätze ausprobieren. Mit „Symbolen“ lassen sich Bibliotheken von wiederverwendbaren Elementen erstellen.

(Screenshot: Balsamiq Mockups)

Bau eines Wireframes mit Balsamiq Mockups. (Screenshot: Balsamiq Mockups)

Die Optik von Balsamiq Mockups lässt keinen Zweifel offen: Das Projekt ist schon recht konkret, aber bei Weitem noch nicht fertig. Mit diesem Tool diskutiere ich vorgeschlagene Lösungen im Team, unabhängig von deren optischer Erscheinung. Kritik kann so leicht angebracht werden, denn das Design steckt offensichtlich noch in der Anfangsphase.

3. Prototypen in PDF, vielleicht HTML

Prototypen sind bei unklarer Faktenlage und zur Überprüfung von neuartigen Ideen besonders wichtig. Glücklicherweise lassen sie sich auch direkt aus den Wireframes erstellen.

Ein PDF-Prototyp in der Einzelseitenansicht mit eingefärbten Links

Ein aus Wireframes generierter PDF-Prototyp zum Gebrauch auf dem Desktop. Rot eingefärbt sind Links sichtbar, die zu weiteren Wireframes führen. (Screenshot: Balsamiq Mockups)

Einzelne Wireframes lassen sich in Balsamiq Mockups über Links miteinander verbinden. Das gesamte Konstrukt kann dann als ein mehrseitiges PDF exportiert werden. Ein Benutzertest kann so bereits mit einem einfachen PDF-Viewer gemacht werden – sofern er den Inhalt seitenweise anzeigen kann.

Für mobile Geräte existiert zudem eine eigens entwickelte App namens „Link Viewer“ (hier für iOS), die kein Blättern und keine Gesten unterstützt. Damit lassen sich einfache PDF-App-Prototypen auch auf Smartphones und Tablets testen. Einfach, aber sehr effektiv.

Ein Phablet zeigt mit Link Viewer denselben PDF Prototyp, aber randlos. (Bild: Link Viewer)

Ein Phablet zeigt mit Link Viewer denselben PDF-Prototyp, aber randlos. (Foto: Andreas Weder)

App-Design: Bei interaktiven Elementen kommt der „Low-Fidelity“-Ansatz an seine Grenzen

Wir haben mit Sketches, Balsamiq Mockups und PDF-Prototypen komplexe neue UI-Konzepte ausgestaltet und getestet. Interaktive Elemente können wir so jedoch nicht testen. Mir scheint wichtig, dass wir Interaktivität und etwa Gestensteuerung direkt mit der Technologie testen, die wir verwenden wollen. So gewinnen wir mehr Erkenntnisse über die Einschränkungen und Möglichkeiten einer Plattform, können etwa mit der Gestensteuerung spielen und damit die Experience so nah am Nutzer wie möglich gestalten.

Bei Magnolia heißt das, dass wir HTML+JS+CSS Prototypen bauen, wenn wir Neues ausprobieren. Oder wir codieren Experimente in Java, wenn wir Bestehendes erweitern möchten. Das geht dann meist nicht mehr ohne Einbezug von Entwicklern.

Mit einfachen Tools zu echten Resultaten

Viele UX- und UI-Designer verwenden für Wireframes und Prototypen komplexe, teure Tools. Als ehemaliger Entwickler vergleiche ich solches Werkzeug gerne mit einer Entwicklungsumgebung, in der sich Schnittstellen definieren lassen. Ich habe den Zugang dazu bis heute nicht gefunden. Lösungen mögen damit einfacher zu präsentieren sein, aber die Tools scheinen mir für viele Zwecke over-engineered. Ich verliere mich zu schnell in Details, tune Animationen, gebe Gimmicks mehr Raum als der eigentlich wichtigeren Lösung.

Für typische Probleme und Kunden, für komplexere Flows, ja selbst für neue UI-Konzepte ist ein „Low-Fidelity“-Ansatz gerade im App-Design meiner Meinung nach völlig ausreichend. Die Tools sind einfach bedienbar, der Lernaufwand ist gering und die Kosten sind es ebenso. Ihre Einschränkungen helfen oft, beim Wesentlichen zu bleiben.

Über den Autor: Andreas Weder ist Head of User Experience bei Magnolia CMS.

Das könnte dich auch interessieren

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.

Bitte schalte deinen Adblocker für t3n.de aus!

Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Digitales High Five
Holger Schellkopf (Chefredakteur t3n)

Anleitung zur Deaktivierung

Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder