UI/UX Design Prototyping erklärt: Layouts und Ideen in der Realität testen

Mit Hilfe von Prototypen kommunizieren

Vor kurzem habe ich bei einer größeren Agentur ein Arbeitsablauf gesehen, der mich zum Nachdenken gebracht hat:

Ein dort angestellter Designer, hat sein responsive Layout aus Photoshop exportiert und sich selbst als Email zugeschickt, um es auf seinem Smartphone live auf Bedienbarkeit zu testen.

Anschließend hat er Änderungen in Photoshop eingepflegt, das Design wieder exportiert und sich erneut gemailt. Zudem waren alle Bilder und Dateien in @2x angelegt. Das heißt doppelt so groß, damit sie auch auf hochauflösenden Geräten scharf aussehen. Entsprechend lang hat das Zusenden über den Email Server gedauert.

Wenn du eine bessere und vor allem schnellere Herangehensweise hast, kannst du alles, was jetzt kommt, auslassen und zur nächsten Headline springen.

Wenn dir dieser Prozess aber vertraut vorkommt, solltest du jetzt am besten einfach noch kurz drei Minuten gut zuhören:

Diese Vorgehensweise gehört ab jetzt der Vergangenheit an, denn es gibt Tools, die genau das für dich erledigen und die auch jeder Designer in der digitalen Branche verwenden sollte.

Ich will niemanden zu nahe treten oder an den Pranger stellen. Auch ich habe noch vor zwei Jahren auf diesem Weg meine Layouts auf anderen Geräten getestet. Aber schon damals hatte ich das Gefühl, dass diese Methode irgendwie sehr zeitaufwendig und umständlich ist.

In diesem Design-, Test- und Verarbeitungsprozess stecken nämlich folgende Fehler:

1. Photoshop ist nicht das Werkzeug, welches dir ermöglicht, zeitgemäß digitale responsive Layouts zu gestalten. Du solltest deshalb auf ein Programm wie Sketch umsteigen.
2. Um Layouts auf Bedienbarkeit zu testen, musst du dir nicht selbst Bilder als Email Anhang schicken. Verwende einen Service wie InVision oder Marvel, um schneller und vor allem realitätsnaher Designs zu bewerten.
3. Wenn du nur kurz schauen willst, ob eine Überschrift oder ein Abstand auf dem Tablet groß genug aussieht, musst du dir dafür keine Layouts exportieren und auch nicht als Email senden. Es gibt Funktionen wie Sketch "Mirror", die genau das für dich erledigt. Damit kannst du Änderungen schnell einarbeiten und sogar live zusehen, wie sich diese auf deinen digitalen Device auswirken.

Nochmal zur Aufklärung:
Sketch ist ein professionelles digitales Design Werkzeug, extra entwickelt um responsive Layouts und User Interfaces zu gestalten. Es hat Funktionen, die Photoshop nicht mal ansatzweise beherrscht!

InVision ist in seiner Urform ein Werkzeug für Designer, welches hilft, interaktive Prototypen und Klickdummys für digitale Produkte zu erstellen. Das heißt für dich, du kannst ohne Programmierkenntnisse deine Layouts verknüpfen und "bedienbar" machen.
Mittlerweile ist es immer erfolgreicher und größer geworden und besitzt noch mehr intelligente Funktionen, die deinen Design-Prozess erleichtern und dir und deinem Team helfen können.

Das waren insgesamt drei Lösungen, die dir enorm viel Zeit, Frustration und Nerven sparen. Und jetzt kommst das Beste: InVision ist für dich for free und Sketch App kostet nur 115 Euro.

Lade von beiden die Testversion runter, spiel ein bisschen damit rum und zeige anschließend deinem Chef, was diese Investition für dein Design-Team bedeuten würde. Ohne zu blinzeln wird er dir sofort die Vollversion kaufen.

Wenn du selbstständig als Freelancer arbeitest, sind die investierten Kosten ein Witz im Gegensatz zu der Zeit, die du ab jetzt mit diesen beiden Tools bei deiner Arbeit sparen wirst. Vertrau mir!

Warum jeder Designer mit Werkzeugen wie InVision und Sketch arbeiten sollte

Ich weiß, für Sketch sowie für InVision gibt es mittlerweile Alternativen. Für alles gibt es das. Und dieser Artikel soll auch keine Werbung sein. Ich werd nicht mal ansatzweise von irgendjemandem bezahlt. Es sind einfach nur Programme, die mir in der Vergangenheit enorm geholfen haben und die ich dir deshalb als Ratschlag mit auf den Weg geben möchte.

Es geht auch erstmal nicht darum, mit welchen Programmen du arbeitest, sondern wie du deine Ideen verwirklichst und welchen Einfluss das auf dein Designprozess hat.

Wir als Designer helfen Unternehmen und Kunden, ihre Ideen in die Realität umzusetzen. Und dafür haben wir schon immer das richtige Werkzeug gebraucht.

Als "kreative Köpfe" lernen wir, uns Dinge vorzustellen ohne sie auf dem Bildschirm zu sehen. Das birgt aber die Gefahr, dass andere uns vielleicht nicht folgen können. Was du dir also vorstellst und mit einem Kunden oder Mitarbeiter besprichst, braucht oft zusätzlich einen visuellen Anhaltspunkt.

Alles, was wir uns ausdenken, bringt nichts, wenn es nicht auch nachweisbar gut funktioniert oder überhaupt getestet werden kann. Wir können Probleme nicht verstehen, bevor wir sie nicht genau hinterfragt haben und es gibt Tools, die uns eben genau dabei helfen.

Wenn du anfängst, ein Problem mit Hilfe von Design zu lösen, dann startest du mit verschiedenen Ideen. Vielleicht skizzierst du anschließend ein paar Wireframes, um zu wissen, welche Elemente auf einer Seite vorhanden sein müssen. Aber irgendwann kommst du zu dem Punkt, an dem du realistische Antworten auf Basis von Erfahrungswerten brauchst.

Prototyping hilft dir, die beste Designentscheidung zu treffen

Schon während des Konzepts und Wireframe-Prozess kannst du einen Prototypen anlegen und auf Bedienbarkeit testen. Er zeigt dir schon frühzeitig, ob etwas überhaupt gut funktioniert oder wie logisch es empfunden werden kann.

Es ist allein schon ein wahnsinnig großer Unterschied, ein responsive Layout untereinander in deinem Layout Programm zu bewerten, oder es abgeschnitten auf dem Endgerät zu sehen und zwar mit nur der Viewport-Größe, die auch tatsächlich gegeben ist.

Fragen, die uns beim Prototyping und Interactive Design beantwortet werden:

• Welche Bereiche des Layouts werden überhaupt auf dem Endgerät wahrgenommen und muss man deshalb vielleicht die Anordnung anpassen?
• Ist der Aufbau überhaupt logisch für den User oder fehlt ihm etwas komplett?
• Was weiß ich, was andere vielleicht gar nicht sehen?
• Wie intuitiv und selbsterklärend ist die Website wirklich?

Offene Fragen schon frühzeitig beantworten und allen Beteiligten die Unsicherheit nehmen

Alles, was du gestaltest, wird auch später programmiert und umgesetzt. Dieser Entwicklungsprozess wirft permanent Fragen auf und genau diese Fragen kannst du schon frühzeitig mit Hilfe von Prototypen beantworten.

Ist das Layout A, B oder C besser. Müssen wir alle Varianten programmieren oder wissen wir schon im Voraus, welche am besten die Ziele des Kunden erfüllt?

Siehe auch: Welche Fragen du stellen musst, um die Ziele und Probleme des Kunden herauszufinden.

Genau dafür sind Klickdummys gemacht. Und sie müssen nicht mal gut aussehen. Sie müssen für’s erste funktionieren um zum Beispiel schnell zu entscheiden, ob eine Tab Navigation oder eine versteckte Hamburger Navigation sinnvoller ist.

Wenn du erst einmal angefangen hast, diesen Prozess sinnvoll in deine Arbeitsschritte einzubinden, wirst du schnell merken, was für andere Ideen und Lösungen du auf einmal gestaltest.

Dein Design wirkt auf dem Endgerät immer anders, als in deinem Layout Programm

Wenn ich ein User Interface für das Tablet oder Smartphone anlegen muss, nutze ich immer direkt von Anfang an die "Mirror" Funktion von Sketch. Das ist für mich der erste Schritt, um direkt Feedback zu bekommen, was Größe, Abstände und Anordnung in einem Layout angeht.

Sobald ich diese grundlegenden Design-Entscheidungen getroffen habe, synchronisiere ich meine Layouts mit InVision, um dann die Funktion und Bedienbarkeit in der Realität zu testen.

Einen interaktiven Klickdummy anzulegen, ist aber nicht nur für mich selbst wichtig. Er hilft dem Kunden, dem Team und natürlich Testpersonen, schnell eine Vorstellung von dem Produkt zu bekommen und daraufhin Feedback zu geben.

Gerade die Zusammenarbeit mit Entwicklern konnte ich dadurch enorm verbessern.

Welche Prototyping Software soll ich verwenden?

Es gibt immer mehr Werkzeuge, mit denen du interaktive Prototypen erstellen kannst. Manche sind kompliziert und aufwendig, können dafür aber mehr. Andere wiederum sind sehr einfach zu bedienen und ohne viel Animationen.

Stell dir einfach folgende Fragen:

• Baust du ein Prototype für Mobile, Tablet oder Desktop?
• Wie genau und wiedergabegeträu soll er sein?
• Wie schnell brauchst du ihn?
• Wie viel deiner Erfahrung möchtest du damit zeigen?

Welches Werkzeug,bei welchen Anforderungen was kann, ließt du am besten in diesem Artikel von Joe Salowitz.

Hier jetzt erstmal noch eine Liste mit verschiedenen Prototyping Tools, um dir mal ein Bild von unterschiedlichen Anbietern zu geben:

• InVision (Basic Funktionen)
• Marvel (Basic Funktionen)
• Flinto (auch mit Sketch Plugin)
• Origami (von Facebook, mehr Animationen, aufwendiger)
• Framer (mehr Fokus auf Animationen, aufwendiger)
• UXPin (Wireframes und Prototypen direkt im Browser erstellen. Danke an Katrin für den Link!)