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.

 

#GoldenRules: 7 Rules for a better website

Was macht eine (mobile) Webseite perfekt? Worauf muss man als Entwickler bei Design und Aufbau achten? Worauf als Marketing-Verantwortlicher, damit die Conversion am Ende stimmt? Entscheidend für den Erfolg einer Webseite ist heute mehr denn je das „Wie“ und gar nicht so sehr das „Was“. Damit sich Klicks, Views, Einkäufe und Buchungen im E-Commerce weiter positiv entwickeln, stellen wir in den kommenden Wochen auf Twitter unsere sieben goldenen Regeln vor, mit denen ein Webprojekt gelingt.

Dabei blicken wir auch in die Zukunft, denn sie beinhaltet sowohl den Blick auf die kommenden Consumer-Ansprüche als auch auf mögliche Entwicklungen der Anwender-Technik sowie der Programmierung, dem Hosting, bei Datenbanksystemen oder Lagerwirtschaft. Zu jeder Regel veröffentlichen wir Tipps und weitere Informationen.

Die Regel Nummer Eins: Sei so schnell wie möglich! Kurze Ladezeiten haben den direktesten Einfluss auf die Conversion. Startseiten, die länger als drei Sekunden laden, stellen die Geduld vieler Verbraucher bereits auf die Probe. Diese landen am Ende nicht an Ihrer Kasse, sondern bei der Konkurrenz.

Die zweite Regel lautet: Responsive Design, für jedes Gerät. Eine gute Webseite sollte in jeden denkbaren Display und Browser einwandfrei funktionieren.

Regel Nummer drei: Sei feature-orientiert! Warum? So kann man schneller Bugs ausmerzen, aber auch gewährleisten, dass die Seite für neuere Betriebssysteme genau wie für ältere Varianten optimiert läuft.

Die vierte Regel geht mit dieser Hand in Hand: Immer kompatibel bleiben! Aus diesem Grund lohnt es sich, die Platzhirsche der Mobile-Devices im Auge zu behalten. Trotzdem: Die Welt besteht nicht nur aus Galaxy- oder iPhone-Usern. Deshalb lohnt es sich, die Kompatibilität in vielen möglichen Varianten zu testen.

Für die prozessorientierten Denker gilt besonders Regel fünf: Behalte die Kosten im Auge und die Conversion hoch! Entwickler sollten sich auf die Umsetzung der digitalen Geschäftsstrategie konzentrieren und  Bug-Fixing und Updates im Front-End externen Anbietern überlassen.

Regel Nummer sechs: Mobile first! Experten wie Jeremy Keith sprechen sich für das Lean Management von Inhalten aus. Zuerst an den kleinen Screen denken! Welche Information ist am wichtigsten? Das hilft dem Nutzer Euer Angebot zu verstehen – auf allen Geräten. Denn auch die Desktop-Seite kann von dieser Schlankheitskur profitieren.

Die siebte Regel bescheren uns schließlich die User, die genau deshalb gerne wiederkehren: Biete hohe Qualität, zu jeder Zeit. Hier geht es nicht nur um die möglicherweise vertriebene Ware, sondern auch um sämtliche Usability-Gesichtspunkte wie Funktionalität, Funktion, serverseitige Laufsicherheit und auch der richtige Umgang mit Datenschutz oder der unternehmenseigenen Compliance.

Über die nächsten Wochen sammeln wir hier unter den einzelnen Regeln unsere und eure Tipps, Tricks und Cheat-Sheets. Wir bitten um tatkräftige Mithilfe in den Kommentaren und auf Twitter: Folgt uns unter @Sevenval und twittert eure Vorschläge für jede Regel unter #GoldenRules!

 

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

One Web-Lösung mit Sevenval FIT14

Neuer Webauftritt für netzclub gewährleistet geräteunabhängiges,  schnelles Surfen 

  • Die neue netzclub Webseite ist optimal für sämtliche mobile Endgeräte wie Smartphones, Desktop und Tablets konfiguriert
  • One Web-Lösung heißt eine URL für alle, automatische Anpassung an den Kunden statt umgekehrt
  • Die Software Sevenval FIT14 sorgt für responsives Design auf höchstem Niveau und schnelle Ladezeiten

netzclub, der werbefinanzierte Mobilfunk-Tarif von Telefónica in Deutschland, stellte letzte Woche seine neue Webseite live. Die von uns entwickelte One Web-Lösung bietet über eine URL für alle Surfer hohe Performance und Usability, egal von welchem Gerät sie die Webseite aufrufen.

Die Grenzen zwischen Smartphone, Tablet und Laptop verschwinden zunehmend, Verbraucher wechseln mehrmals täglich zwischen verschiedenen mobilen Endgeräten.

Mit dem One Web-Ansatz hat netzclub eine progressive Lösung gewählt, die der rasanten Entwicklung neuer Webtechnologien gerecht wird und eine zukunftssichere Basis für  responsives Design auf höchstem Niveau bietet. Die Webseiten von netzclub werden für alle Bildschirmgrößen, Betriebssysteme und Gerätearten optimiert, so dass das hohe Niveau der User Experience auch beim Gerätewechsel erhalten bleibt. Der Webauftritt des Unternehmens ist über eine URL erreichbar. Dahinter steckt Sevenvals Software FIT14, dessen RESS Server für die beschriebene Kompatibilität verantwortlich ist.

„Erstens verdrängen Zugriffe von mobilen Geräten den klassischen Webseiten-Aufruf vom Desktop-PC, zweitens wechseln Verbraucher mehrmals täglich zwischen verschiedenen Geräten und drittens nimmt die Gerätevielfalt zu. Die optimale Darstellung von Webseiten in jeder Situation und für jeden Nutzer ist daher technisch komplex. Wir vereinfachen diese Komplexität indem wir alle Möglichkeiten des responsiven Designs in unserem Software-Produkt FIT 14 bündeln und auf einfache Art zugänglich machen.  Unser Frontend-Server sorgt dafür, dass die Endgeräte beim Surfen entlastet werden und Content nur in passender Form ausgespielt wird“, so Jan Webering, CEO von Sevenval Technologies. „Wir freuen uns, dass netzclub diese Lösung gewählt hat und bedanken uns für das Vertrauen.

Parallax Scrolling

“Als Parallaxe (…) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.” – Wikipedia

Jetzt geistern sie schon seit einigen Jahren im Netz rum, diese Websites, die sich beim Scrollen so toll bewegen. Zu Beginn haben wir noch ganz fasziniert hoch und runter gescrollt, um den Effekt ganz genau zu beobachten und jetzt gibt es sie wie Sand am Meer. Continue reading

Increased customer satisfaction – reduced stress: Sevenval strengthens quality assurance by co-operating with global app quality management leader Applause

  • Sevenval widens internal quality assurance with external experts from Applause
  • Partnership enables extensive scaling of Sevenval’s current offering and adds professional testing services in the area of Quality Assurance, User Experience, Loadperformance, Localization and Security.
  • Through this partnership, Sevenval offers world-class quality assurance for apps, online shops and gateways for every device, operating system and browser

Berlin, 07.07 2014 – Sevenval, the leading provider of web technologies, expands its quality assurance to a full-service portfolio. The company integrates its experience and know-how from hundreds of projects for both international and national clients over the past 12 years into a comprehensive testing service. Continue reading

Weekly #9

Another cool mobile design gallery:
http://www.mobileawesomeness.com/

Chrome Dev Tools Reloaded. Debugging with Google’s Chrome Browser. Very interesting to see what you can do:
http://www.youtube.com/watch?v=N8SS-rUEZPg

Understanding mobile cache sizes
http://www.blaze.io/mobile/understanding-mobile-cache-sizes/

A review of some JS canvas libraries
http://www.suburban-glory.com/blog?page=141

Seven guidelines for designing high performance mobile user experiences
http://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing-high-performance-mobile-user-experiences/