UX-Sketching

In Interface Design, Tools, User Experience, Workflow Posted

Die Entwicklung einer Anwendung kann nicht nur ein äußert zäher, sondern auch sehr zeitintensiver Prozess sein. Was mit einer simplen Idee beginnt, gilt es binnen eines festgelegten Zeitrahmens in ein optimiertes Produkt umzuwandeln. Sowohl Entwickler als auch Nutzer haben dabei natürlich stets den Anspruch einer reibungslosen User Experience. Denn je durchdachter die Planung vom Entwurf bis zur finalen Programmierung verläuft, desto geringer ist das Risiko, binnen kürzester Zeit bereits die ersten Bugs ausbessern zu müssen. Darüber hinaus erhöht sich die Wahrscheinlichkeit einer langfristigen Kundenzufriedenheit und -bindung.

Doch was ist überhaupt die erste Etappe in Richtung einer optimierten User Experience? Wireframes, Mockups, Prototypes – die Liste der Fachtermini rund um das Thema UX-Design ist nicht nur lang, sondern kann unter Umständen auch etwas verwirrend sein. Fangen wir also mit Schritt 1 an und werfen ein Auge auf das schemenhafte Festhalten der ersten Ideen; auch Sketching genannt.

Mit Sketching Ideen realisieren

Das Sketching gibt ausreichend Raum für ausgefallene Ideen und Konzepte. Absolut jeder Geistesblitz, der gerade durch den eigenen Kopf fliegt, kann in diesem Entwicklungsschritt auf das Tablet oder zu Papier gebracht werden. Zu ausgefallen und zu eigenwillig gibt es nicht. Die Kreativität einschränkende Faktoren wie Zeitdruck genau so wenig. Ziel ist es vielmehr, aus einer Sammlung potentieller Denkansätze die Goldstücke herauszupicken und zu einem soliden Endprodukt zusammen zu basteln.

Das richtige Werkzeug bereitlegen

Vor der Entwicklung eines Produkts muss sich natürlich vor Augen gehalten werden, wie sich die eigene Zielgruppe einrahmen lässt. Die Anwendung sollte so spezifische Bedürfnisse und Intentionen des Users erreichen. Mit einem Stift in der Hand kann es dann auch schon losgehen. Die analoge Methode, mittels eines Sets an Bleistiften (bestenfalls mit verschiedenen Stärken für Details wie Schattierungen) und der passenden Zeichenfläche ist nicht nur kostengünstig, sondern lässt auch Spielraum zum Austesten neuer Impulse. In Sachen Zeichenfläche ist übrigens kein großes Zeichentalent gefragt. Je nach Endgerät können passende Templates ganz einfach auf Plattformen wie Sketchize heruntergeladen werden.

Den Produktcharakter definieren

Beim Sketching wird as simple as possible vorgegangen und trotzdem ein Erfolg erzielt. Sobald die ersten Vorüberlegungen also schemenhaft skizziert werden sollen, stehen zuallererst die einfachen Grundformen im Mittelpunkt. Soll das Design eher organisch oder vielleicht doch sachlich und geometrisch aufgebaut sein? Die Entscheidung, ob eher runde oder eckige Bausteine dominieren, kann den Charakter einer Anwendung entscheidend beeinflussen. Ebenso wichtig ist aber auch die Kategorisierung der einzelnen Elemente.

Schließlich dienen Skizzen nicht nur dem eigenen Gebrauch, sondern sollen auch eine Stütze für das gesamte Team bilden. Die Anordnung der Elemente nach Funktion (beispielsweise durch die Unterteilung in Header, Content und Footer) kann dabei ähnlich einem Glossar erfolgen und hilfreiche Definitionen beinhalten.

Feedback einholen

Abschließend steht selbstverständlich noch die obligatorische Feedback-Runde an. Gemeinsam mit anderen Teammitgliedern können so sämtliche Elemente auf ihre Tauglichkeit geprüft und für den Folgeschritt, das Wireframing, fokussiert werden.

Im Gegensatz zum Sketching liegt hier der Teufel im Detail. Während das Sketching zunächst nur oberflächig erste Ideen und die Komposition grober Elemente beleuchtet, legt das Wireframing den Grundstein für die Informationsarchitektur der Pages. Soll heißen: das Design der Interfaces steht im Hintergrund, während die Strukturierung des Contents und der damit einhergehenden Informationen die Hauptaufgabe bildet.

Vom Sketching zum Wireframing

Im Grunde genommen legt das Sketching das Fundament für innovative und großartige Ideen. Ausgerichtet auf die Gestaltung des User Interfaces lassen sich so die Denkansätze teils auch mehrerer Teammitglieder erstellen und miteinander verglichen. Alles was es dafür braucht sind simple Zeichenutensilien und einen komfortablen Arbeitsraum.

Wem Zettelwirtschaft und Radiergummi-Fusseln allerdings ein Dorn im Auge sein sollten, der sollte lieber auf digitale Tools wie Adobe XD oder Sketch zurückgreifen. Das Grafikprogramm ist dabei auf die Komposition der Interface-Elemente ausgerichtet und ermöglicht es im Anschluss an die Feedback-Runde, die favorisierten Bausteine im Sinne des UX-Desings weiter auszubauen.

• Why Sketching Is an Essential Skill for UX Designers to Master Adobe.com am 27.03.2018
• UI/UX sketching techniques 101 UX Collective am 24.01.2019
• 7 reasons for sketching in UX design invisionapp.com am 18.12.2017