Warum Wir Sketch Nicht für Interaction Design Nutzen

Sketch hatte circa 2015 den “inflection point” erreicht, woraufhin man des Öfteren neue Stencil Kits auffinden konnte, welche in detaillierten Blogbeiträgen die Nutzung von Sketch als Wireframing-Werkzeug untermauern sollten. Wir denke dennoch nicht, dass Sketch (im aktuellen Outfit) ein gutes Werkzeug für Interaction Design ist.

Ich werde in dem Artikel umreißen aus welchen Gründen und aufzeigen, welche Werkzeuge besser geeignet sind. Um die jeweiligen Gründe nachvollziehen zu können, erläutere ich zuerst kurz was die täglichen Aktivitäten und Herausforderungen eines Interaction Designers sind und gehe anschließend auf die Unterschiede zwischen Website-Projekten und komplexen Systemen/Applikationen ein.

ixd: mehr als nur point & click

Um besser zu verstehen, warum Sketch für das Interaction Design nicht ideal ist, sollten wir kurz beschreiben, welche Aktivitäten und Herausforderungen sich einem Interaction Designer auf täglicher Basis stellen. Der Artikel auf Wikipedia Deutschland ist gar kein schlechter Start, obwohl die Erläuterungen für unseren Zusammenhang zu abstrakt sind.

Interaction Design @blended - jeder Schritt ist visuell und verbal exklärt Interaction Design @blended - jeder Schritt ist visuell und verbal exklärt

Der Artikel auf Englisch hilft leider noch weniger: "Interaction design is defined as the practice of designing interactive digital products, environments, systems, and services”. Da denken sich Nicht-Designern: “Das ist doch identisch zu User Experience”. IxD und UX sind miteinander verwoben, denn IxD ist Teil des User Experience Prozesses.

Ein Interaction Designer fokussiert sich auf die Verbindung Mensch und Maschine, was bedeutet, dass sie sich ua. mit den Inhalten, der Logik und dem Verhalten eines Systems oder Applikation gegenüber des Menschen beschäftigt. Eine Schnittstelle zwischen Mensch und Maschine ist nicht notwendigerweise visuell, was wir jedoch für unseren Zusammenhang außer Acht lassen. Ein IxD konzipiert und definiert, welche Inhalte ein Nutzer auf welchem Screen zugänglich gemacht werden und wie der Nutzer mit diesen Inhalten interagieren kann oder soll.

Ein gutes Beispiel ist für Apple iMessage: Im Vergleich zu dem Nachrichtenverlauf bei WhatsApp, wo die Uhrzeit jeder einzelnen Nachricht gezeigt wird, hat das Design Team bei Apple entschieden die Uhrzeit pro Nachricht nicht zu zeigen. Die Informationen sind lediglich versteckt. Das Team hat eine Geste definiert (pinch to the left), mit welcher der Nutzer die jeweiligen Uhrzeiten anzeigen kann.

einfache webseiten, komplexe systeme?

Grundsätzlich bauen wir bei blended.io selten Standard-Webseiten und mehr interaktive Software auf komplexen Systemen. Somit fokussiert sich das Experience-Team auf Software UX. Die Unterschiede sind recht einfach zu erkennen. Typischerweise sind Webseiten weniger komplex als Systeme und (deren) (Web-) Applikationen, in welchen bestimmte Flows gegebenenfalls mehr als eine Applikation (oder eben auch Touchpoints) vernetzen und somit logisch verbunden sind.

Gängige Beispiele für ähnliche Flows wären zum Beispiel die Erstellung von Kampagnen in programmatischen Advertising-Plattformen, das Management von Nutzerrollen auf Classifieds-Plattformen oder die Verwaltung von Print-Aufträgen über verschiedene Drucker.

Ein IxDer würde ua. die Strukturierung der Inhalte, die Anzahl und Details der Schritte in einem Prozess (ua. Kreation, Kaufprozess etc) und drüber hinaus definieren und konzipieren, wie der Nutzer interagieren kann. Da die Projekt bei blended.io in der Regel recht unterschiedlich sind, greifen wir nur bedingt auf vorherige Projekte oder Vorlagen zurück.

Webseiten sind in der Regel sehr ähnlich strukturiert (obwohl natürlich Ausnahmen die Regel bestätigen, zB. Inhalts-starke Seiten wie Universitäts-Portale). Index, Kontakt-Formular, Produktdetails-Seiten bilden oft die Basis, wobei die Architektur oft ähnelt und somit Interaktionen recht einsilbig sind. Die Konzept- und Gittermodellerarbeitung beschränkt sich eher auf Architektur und Inhalt als auf Nutzerinteraktionen, Daten-Status oder Flows.

Die Nachteile von Sketch, die Vorteile von Omnigaffle oder Axure

Die “kurze” Zusammenfassung war möglicherweise nicht ganz so kurz wie erhofft, aber die Erläuterungen sind notwendig um meinen Standpunkt zu verstehen.

Bei blended.io arbeiten wir oft in Kundenprojekten, in welchen (spezifische) Features noch nicht vollends definiert sind. Daher sind Ideen- und Konzeptphasen im Prozess besonders wichtig, um technisch und fundamental gute Dienstleistungen anbieten und bessere Produkte entwicklen zu können.

Im Interaction Design Prozess werden verschiedenste Konzepte innerhalb der Anforderung von Technologie, Business und Nutzerverhalten skizziert, gestaltet und ausgearbeteitet. Im Laufe des Projektes werden diese Konzepte aussortiert, verbessert und weiterentwickelt. Die Werkzeuge müssen sich den jeweiligen Bedingungen und Notwendigkeiten effizient anpassen können, um einen reibungslosen Prozess zu erzielen.

arbeitsweise und prozess

Wir lieben es den Workflow und den Prozess regelmäßig zu justieren, um so die Effizienz zu verbessern und bessere Resultate zu erzielen (wir sind Fans davon “Entwicklungspraktiken” auch im Design-Prozess zu nutzen). Wir sind auch davon überzeugt, dass ein Designer ein Verständnis haben muss, was "hinter dem UI” passiert.

Ein Interaction Designer bei blended.io muss bedenken, was technisch geschieht, wenn ein Nutzer auf “Bestätigen” klickt. Aus diesem Grund sind User Flows und Wireframes in der Weise ausgelegt, dass Aktionen eines Nutzers und deren Konsequenzen en Detail und so visuell wie möglich ausgearbeitet und detailliert werden. Diese Instruktionen und Erläuterungen, welche im Idealfall technische Gegebenheiten widerspiegeln, sind von höchster Bedeutung, um eine effiziente Entwicklung zu gewährleisten.

Sketch ist in dieser Hinsicht und für diese Belange nicht ausgelegt. Um nun Instruktionen und Erläuterungen für Flows und UI Verhalten visuell zu verdeutlichen, muss man Pfeile aus einzelnen Linien manuell zusammenbauen. Alsbald sich Elemente oder deren Positionen ändern, müssen diese Pfeile manuell nachgebaut werden. Das funktioniert einfach nicht.

omnigraffle to the rescue?

Wir nutzen Omnigraffle seit langer Zeit, weil es die Er- und Ausarbeitung von Flows, Interaktionen und Verhalten sowie derer Instruktionen einfach sehr gut ermöglicht. Objekte, die mittels Pfeilen verbunden sind, lassen sich beliebig hin und herbewegen ohne eine Verbindung neu setzen zu müssen. Das ist effizient. Man wird nun verstehen, warum ich eingangs die Strukturen von Websites und komplexen Systemen verglichen habe. Hinsichtlich der eingangs erwähnten Stencil-Kits ist es somit auch völlig OK Pfeile oder ähnliches in Website-Projekten zu kopieren. Jedoch wird sich diese Arbeitsweise als extrem kontraproduktiv für komplexe Systeme und höchst-interaktive Applikationen erweisen.

Axure arbeitet ähnlich wie Omnigraffle wobei hier jedes Mal der Editing Mode umgestellt werden muss. Omnigraffle ist extrem leicht zu erlernen, läuft sogar stabil und schnell auf 7 Jahre alten Macbook Pros wobei sogar Layouts einfach von Omnigraffle nach Sketch kopiert werden können. Omnigraffle stellt zwar eine Symbol-Funktion zur Verfügung, diese ist jedoch bei weitem nicht so flexibel und gut gelöst wie bei Sketch. Oft kommt es sogar vor, dass Symbole nicht so funktionieren wie erwartet (kann selbst nicht nachvollziehen warum das der Fall ist).

Das Video erklärt, dass Arrow Feature in Omnigraffle Das Video erklärt, dass Arrow Feature in Omnigraffle - https://youtu.be/ntC3UAJmT1I?t=1960

Bei Sketch lieben wir natürlich die Möglichkeit, dass Drittanbieter weitere Features mittels Plugins zur Verfügung stellen können und verstehen den Hype, besonders fürs Visual Designs. Die Kombination von einfach zu erstellenden Anmerkungen und Dokumentation gepaart mit Features, welche die Definition von Flows und Interaktionen möglich macht, wäre für IXD richtig sexy.

Die Vorteile von Sketch (für das Visual Design) sind überzeugend aber ich möchte hinsichtlich Interaction Design mit einer Frage abschließen: Ist für die Qualität der Experience oder im speziellen eines UIs wichtiger, dass die Basis, das Fundament, gut durchdacht und detailliert ausgearbeitet ist oder, dass ein Design Team einen guten und sauberen Workflow hat? Wir präferieren Fundamentalwerte über "fancy Tools”.

Was denkst du? Wir freuen uns über dein Feedback.

• • •

Thanks for reading. We at blended.io are incredibly excited and passionated about the potential innovative leaps for software design and engineering in fintech, investtech and industry 4.0. Get in touch

Stay on the edge

Get hands-on articles about innovation, experience design or engineering! No spam and worthwhile content only.

Twitter