Rapid Prototyping mit Sketch und Co

Effizient vom Wireframe zum interaktiven Prototypen

Warum prototyping?
Um Kunden plattformübergreifend an digitale Services zu binden, ist eine gute User Experience unverzichtbar. Da dabei bereits kleine Nutzer-Interaktionen entscheidend sind, sollten sie bereits ab Projektbeginn durch interaktive Prototypen getestet werden. So werden Businessziele und Nutzererwartungen zeitnah überprüft und mögliche Risiken vermieden.

Kunden schrecken jedoch oft vor den vermeintlich erheblichen Mehraufwänden zurück und verlassen sich ausschließlich auf die Expertenmeinung des UX-Designers. Bei der Produktentwicklung zusammen mit Dienstleistern ist dies ein Fehler. Nur die echte Nutzer-Interaktion liefert valide Daten und versetzt den UX-Designer in die Lage, Stolpersteine aus dem Weg zu räumen.

Warum rapid?
Mit den Start-Ups sind Software-Entwicklungsmethoden wie  “Lean Startup” oder ”Lean UX” entstanden. Idealerweise können in jeder Projektphase mit funktionalen Prototypen Ergebnisse präsentiert und überprüft, UX und Design effizient und zeitnah getestet, verbessert und weiterentwickelt werden.

Übliche Tools ermöglichen jedoch keine effiziente Arbeitsweise, sondern liefern in sich geschlossene Arbeitsergebnisse, welche fachübergreifenden Aufwand erzeugen. Der Konzepter erstellt Wireframes in seinem Lieblingstool und exportiert sie als PDF für den Visual Designer, der sie in Photoshop überträgt, erstellte Screens vermaßt und weitere, für Retina-optimierte Screens auch sehr große Dateien anlegt, um Grafiken für diverse Device-Klassen zu produzieren. Es vergeht wertvolle Zeit. Jede Änderung summiert die Aufwände.

 

Sketch als Mittel der Wahl
SketchApp
Sketch ist dem ersten Anschein nach nur ein vektorbasiertes Zeichenprogramm, näher betrachtet jedoch ein perfektes Tool für die effiziente Erstellung UND Gestaltung von Wireframes. Der Designer überträgt die Wireframes nicht erst in Photoshop, sondern gestaltet sie direkt in Sketch. Er setzt Symbole und Styles wiederkehrend ein und eine zentrale Änderung wirkt sich auf alle Instanzen aus. Iterative Konzeptänderungen erfordern keine Nachbearbeitung im Design, da Styles und Symbole für neue und geänderte Wireframes verfügbar sind.

Der Gestaltungsprozess ist weniger aufwändig und weniger fehleranfällig. Per Mirror-App lassen sich Screendesigns schon bei der Erstellung auf dem Device testen. Konzeption und Design arbeiten nicht mehr getrennt in ihren jeweils eigenen Programmwelten nebeneinander her oder gar aneinander vorbei. Im selben Programm hauchen sie dem Wireframe Branding und User Experience ein. Beim Responsive Web Design halten sogenannte Artboards für diverse Device-Klassen die Dateigröße schlank. Auch die Zusammenarbeit mit den Entwicklern ist integriert, da Sketch auf einen Klick sämtliche Grafiken in den für diverse Device-Klassen erforderlichen Auflösungen exportiert, auch mit CSS-Eigenschaften.

Für Interessierte gibt es hier eine umfangreiche Linksammlung.

 

Wie entsteht aus Sketch ein Prototyp?

 + Sketch Plugins
Interaktive Prototypen lassen sich per Sketch-Plugins realisieren. Zu empfehlen, wenn ein Team auf ein Produkt und dessen Optimierung fokussiert ist. Für Dienstleister macht das nicht wirklich Sinn. Wer seinen eigenen Workflow abbilden will, erzeugt mit der Weiterentwicklung eines Plug-Ins unverhältnismäßige Aufwände.
Mehr zum Thema Plugin-Entwicklung ist hier nachzulesen.

 

++ FramerJS (http://framerjs.com/)
framer

Die JavaScript Bibliothek FramerJS ermöglicht den Import von offenen Sketch-Dateien. JavaScript-Kenntnisse vorrausgesetzt, lassen sich schnell Interaktionen oder Animationen erstellen. Design-Änderungen in Sketch werden sofort im Prototypen sichtbar.

Meines Erachtens ist Framer das mächtigste Tool im Zusammenspiel mit Sketch, welches jede Möglichkeit der Interaktivierung von Nutzerinteraktionen bietet.

 

+++ inVision (http://www.invisionapp.com/)
invision


Einen intuitiven Zugang bietet im Zusammenspiel mit Sketch die Web-App inVision. Mit der SaaS-Lösung kann man schnell und ohne eine Scriptsprache zu erlernen, hochgeladene Dateien per Drag and Drop in interaktive Prototypen verwandeln. Interaktionen und Animationen sind allerdings eingeschränkt, werden aber sukzessive vom Hersteller erweitert.

Seit kurzem lassen sich offene Sketch-Dateien importieren, was wiederum für den Einsatz von Sketch innerhalb des UX-Design Prozesses spricht. Stakeholder, Projektteam oder Probanden können den Prototypen diskutieren oder testen. Chat- und Kommentar-Funktionen machen es zu einem effizienten Feedback-Instrument.

 

Fazit
Sketch ist für Konzepter, Visual- und Interaction Designer ein sehr effizientes Tool für die Erstellung von Wireframes und User Interfaces.

Im Vergleich zu gängigen Tools der Grafikproduktion wie Photoshop und Co,vermissen “eingefleischte” Profis sicherlich Funktionen.
Die Sketch-Entwickler-Community verfolgt aber einen m.E. sehr innovativen Ansatz und hält die Programm-Features bewusst schlank, so dass das Tool perfekt zugeschnitten für die Produktion von Wireframes und User Interfaces daher kommt und schnell erlernbar ist.

Auf der Prozessebene ist Sketch eine wirkliche Innovation. Das Anwenden fachlich übergreifender Workflows, bis hin zur Zusammenarbeit mit Frontend-Entwicklern, ermöglicht ein integrierteres Arbeiten zwischen allen Beteiligten und erzeugt im Projekt-Team weniger Reibungsverluste in der Kommunikation.

Wer als Kreativer nicht vor JavaScript zurück schreckt, sollte sich unbedingt mit FramerJS vertraut machen. Jede Art der Nutzerinteraktion (Micro-Interactions) lässt sich hiermit am Besten realisieren und testen.

Für schnelle Produkt-Präsentationen und Feedback-Schleifen ist Sketch in Kombination mit inVision das Mittel der Wahl, allerdings mit – gerade im Zusammenhang von Rapid Prototyping.

 

Material Design unter der Lupe

material designCredit: Google
http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

Ende Juni 2014 hatte Google im Zuge des Updates auf Android 5 Lollipop Material Design vorgestellt. Damit hat Google zum ersten Mal eine umfassende Designrichtlinie heraus gegeben und für viel Echo gesorgt.
Material Design basiert eindeutig auf bestehenden Trends wie Flat Design und Content First, geht aber noch einige Schritte weiter.
Mein erster Eindruck von den Richtlinien war sehr gut. Und tatsächlich hatte ich auch als bekennender Apple-Fan zum ersten Mal das Gefühl, dass ein Designansatz von Android dem von Apple überlegen sein könnte.

Deshalb wollte ich mir im Folgenden die vier, meiner Meinung nach, wichtigsten Aspekte von Material Design einmal genauer ansehen. Dabei möchte ich herausfinden was sie besonders macht, und wie sinnvoll sie im praktischen Einsatz sind. Continue reading

Betriebssystem-Test: Ubuntu Touch 14.10 auf dem Nexus 4

Wir haben das Betriebssystem Ubuntu Touch 14.10 (r203) auf dem Nexus 4 installiert. Dies ist zur Zeit nur auf dem  Nexus 4, Nexus 7 (2013) und dem Nexus 10 möglich.

Das Hauptmenü von Ubuntu Touch ist übersichtlich und nach einigen Minuten intuitivem spielerischem Herumprobieren, einfach zu bedienen. Die typische Seitenleiste, die man auch von der Desktop-Installation kennt, gibt es auch hier. Diese lässt sich mit einem Wisch von der linken Seite des Phones aus öffnen.

DSC_0005    DSC_0016

Eine Übersicht der geöffneten Apps, erhält man mit einem Wisch von der rechten Seite des Bildschirms bis zur linken Kante. Die Anwendungen werden in einer horizontalen, 3d- Karteikartenansicht angezeigt. Dort kann man eine der geöffneten Apps auswählen oder mit einem Wisch nach oben schließen.

DSC_0017

Der Ubuntu Store kann natürlich mit Google Play und dem Apple App Store nicht mithalten. Wichtige Anwendungen wie Google Maps, Twitter, Facebook, GMail und Kalender sind aber vorhanden.

Weiter nützliche Anwendungen finden sich in  Kategorien wie Social Networking, Travel & Local, Reference, Communication, Utilities, Media und Audio. Um Apps zu installieren, ist das Anlegen eines Accounts erforderlich. Wir haben uns einen Ubuntu-One Account erstellt, angemeldet und problemlos Apps installiert.

Der Browser dieses Geräts meldet sich als ein Google Mobile Chrome 35.0. Das Betriebssystem lässt sich nur zum Teil erkennen, da die Version nicht ganz übereinstimmt mit den Angaben der Systemeinstellungen. Das Gerät selber, das Nexus 4, ist im User-Agent nicht enthalten. Die User Agent-Angaben im Detail:

Mozilla/5.0 (Linux; Ubuntu 14.04 like Android 4.4) AppleWebKit/537.36 Chromium/35.0.1870.2 Mobile Safari/537.36

Ubuntu stellt auch seine komplette Entwicklungsumgebung Ubuntu SDK IDE für die Ubuntu Desktop-Version bereit. Damit kann man unter andrem auch HTML5-Apps für sein Ubuntu Touch-Device erstellen. Das SDK besitzt auch einen Emulator auf dem man seine entwickelten Apps ebenfalls testen kann.

FAZIT

Ubuntu stellt den Entwicklern alle Mittel bereit, um gleich mit der Programmierung seiner App loszulegen. Das Betriebssystem sieht sehr originell und frisch aus, es verhält sich aber nicht konstant: Viele Schaltflächen reagieren erst nach mehrmaligem betätigen. Wir finden es trotzdem toll und werden die weitere Entwicklung mit Spannung verfolgen.

Links zum Ubuntu-SDK:

http://developer.ubuntu.com/start/ubuntu-sdk/installing-the-sdk/

Links zum Ubuntu-Touch:

Infos zur Installation von Ubuntu-Touch:http://developer.ubuntu.com/start/ubuntu-for-devices/installing-ubuntu-for-devices/