Funky or Fail: The WeChat Universe

Funky or Fail Funktionen WeChat

WeChat ist der Messenger-Klon von WhatsApp und gleichzeitig eines der größten Sozialen-Netzwerke in China. Wobei „Messenger“ eigentlich das falsche Wort ist. Diese App ist nämlich deutlich ausgereifter und sogar noch viel, viel mehr als das. Bevor ich jedoch darauf eingehe, … Weiterlesen

St.Gallen Mobile Business Forum – Namics zeigt iBeacon und Google Glass Demo

MB Forum 2014 KeyVisual800_500

In der exklusiven Umgebung des Einstein Kongresszentrums fand am 21. Mai das 3. St.Gallen Mobile Business Forum statt. Die gut besuchte Veranstaltung hat Teilnehmenden von namenhaften Unternehmen aus dem gesamten deutschsprachigen Raum angezogen, welche sich den Tag hinweg über Trends, … Weiterlesen

Clarify – Ein Toolkit für den Frontend Workflow

Der Frontend Entwicklungsprozess in einem Projekt wird immer komplexer und zeitaufwendiger. Aufgrund einer Vielzahl von Zielgeräten und Auflösungen, Verhaltensweisen, Animationen, CSS3, HTML5, etc. steigen zwangsläufig auch die Aufwände und die Komplexität während Konzeptionsphase in allen Disziplinen. Dieser Wandel ist enorm spannend und bietet fast unendliche Möglichkeiten. Es ist aus meiner Sicht aber auch der Moment über die Effizienz im Workflow nachzudenken.

Wir setzen mit Terrific ein fantastisches Werkzeug ein, dass uns ermöglicht modulare und wartbare Frontendbausteine effizient umzusetzen. Es gehört aber nach wie vor zu jedem Projekt dazu, die Spezifikationen zu komplettieren, seien dies nun Vermassungen, Farbcodes, Verhaltensweisen, Geschwindigkeiten von Übergängen, etc. Aber genau diese Erarbeitung kostet Zeit und kann optimiert werden.

Aus diesem Grund ist durch Diskussionen mit Experten aus den Bereichen UX, Design, Projektleitung & Entwicklung innerhalb kurzer Zeit ein Tool entstanden, das einzelne dieser Arbeiten mit kleinen Hilfsmitteln versucht zu unterstützten. Clarify. Es handelt sich dabei um eine Webapplikation mit einer darunterliegenden Datenbank. Nachfolgend gibt es einen Vorgeschmack der Funktionen des aktuellen Prototyps.

Projekte & Screens

Clarify erlaubt das Erfassen von Projekten und das Hochladen von Screens (JPG, PNG) zu jedem Projekt. Es listet diese übersichtlich in der Projektansicht auf. Ein Klick auf einen Screen öffnet die Toolansicht. Sie besteht aus mehreren Layern, u.a. Kommentare, Vermassungen, Farben, Schriften, etc. Initial befindet man sich auf der Kommentaransicht.

Kommentare

Im Kommentarlayer ist es möglich Punkte mit Nummern auf dem Screen zu platzieren und dazu jeweils einen Beschreibungstext zu hinterlegen. Denkbar sind Implementierungshinweise, Infos zu Modulen oder einfach nur Annotationen.

Vermassung

Jeder Frontend Entwickler hat seine Tools um Abstände & Grössen zu vermassen (falls nicht schon bei der Designübergabe vorhanden). So richtig glücklich wurde ich aber noch mit keinem. Nachfolgend sieht man die Vermassungsfunktion von Clarify. Sie zeigt eine Lupe ähnlich wie bei einem Color Picker für den Start- und Endpunkt an. Nachfolgend wird die Breite & Höhe angezeigt. Nachträglich kann die Vermassung angepasst werden. Alle Vermassungen werden in der Datenbank für spätere Outputs wie einem Styleguide gespeichert.

Farben

Das Tool erlaubt Designern und Entwicklern, je nach Workflow, Farben direkt vom Screen zu picken. In Clarify werden die ausgewählten Farben in eine Projektfarbbibliothek hinzugefügt und vom jeweiligen Screen referenziert. Dies erlaubt uns in Zukunft z.B. für ein Projekt automatisiert LESS Templates mit Farben anzulegen. Desweiteren hat man immer den Überblick, welche Farben über das gesamte Projekt hinweg verwendet werden.

Es ist auch möglich eine Farbe anstatt vom Screen zu picken, über die Farbbibliothek auf einen Screen zu ziehen. Dies ist z.B. hilfreich, wenn man im Vorhinein schon weiss, dass dies genau dieses Gelb sein muss, unabhängig davon ob es einen Hauch von jener abweicht.

Embedding

Der Kommentarlayer kann bereits im jetzigen Zustand in andere Systeme per Javascript eingebettet werden. Dies ist hilfreich z.B. in einem Wiki oder im Jira Bugtracking. Man hat dann immer eine aktuelle Version des automatisch skalierten Screens mit den Kommentarpunkten, ohne das man von Hand in Photoshop beginnen muss Punkte zu zeichnen.

Styleguide

Ein möglicher Output von Clarify (dank der strukturiert erfassten Daten) könnte ein Styleguide sein. Hier ein ganz einfaches Beispiel:

Roadmap

Dies ist der heutige Stand des Prototyps, in der nächsten Phase entstehen die Werkzeuge für Verhalten (Dropdown, Slider, etc.) und für Schriften (Zeilenhöhen, Schriftgrössen, px/em). Ich bin gespannt was ihr so darüber denkt, welche Ideen ihr zu dem Thema habt. Last was von euch hören, via Kommentare oder Mail (roger.dudler@namics.com). Mein Ziel ist es Clarify so schnell als möglich zu veröffentlichen und allen zugänglich zu machen. Stay tuned.

Ein ganz besonderer Dank für die spannenden Diskussionen geht an Thommy, Olaf, Daniel, Alex, Remo & Ernst & das gesamte Team Roman!

UX Adventskalender 2011 | Tag 23: Alfred

In der besinnlichen Adventszeit besinnen wir uns auf schöne Ideen, praktische Gadgets, nützliche Software und einfach geniale User Experience.

Vorschau: Schon morgen am 24. Dezember winken nicht nur ein, sondern gleich drei Geschenke für unsere Blog-Leser… Stay tuned!

Heute: Der Programmstart- und Dateisuch-Butler ‚Alfred‘ (Mac) als Alternative zu Spotlight. Wie es sich für einen echten Butler gehört, kann Alfred aber noch viel mehr und liest beinahe jeden Wunsch von den Lippen ab.

Vortrag: Digital Publishing rocks

Auf Einladung von Digicomp durften Raphael und ich unsere Erfahrungen bzgl. Digital Publishing, insbesondere auf Mobile Devices/Tablets vorstellen.

3641-5833369238_c9a9db3076_z-thumb-500x281-3640.jpg

Ausgangslage war, dass weltweit bereits über 25 Mio iPads verkauft wurden (und die Konkurrenz schläft nicht) – Mobile ist somit Lifestyle und das iPad dient als Türöffner für den Mauerfall im Publishing – Von der digitalen Ausgabe des Geschäftsberichts, Katalogen über Kundenmagazine bis hin zu komplexeren Anwendungen für Kunden oder Mitarbeiter z.B. im Aussendienst.
Für Unternehmen entsteht somit die Gelegenheit:
1) die eigene Marke zu stärken und
2) die Verbreitung der eigenen Publikationen zu erhöhen

Der Condé Nast Verlag hat es zum Beispiel geschafft, die Markenwerte des 90-jährigen New Yorker „excellence, polish, depth“ auf das digitale Format zu transferieren. Das Look&Feel der Print Publikation wurde zwar weitgehend beibehalten, die Comicsektion und die Bildreportagen, zwei der Hauptgründe der New Yorker-Leser, die Zeitschrift am Kiosk zu ergattern, wurden konzeptionell und redaktionell dem neuen Medium angepasst.

Der Verlag hat damit die Zukunftsfähigkeit seiner Flagship-Publikation dank globaler, digitaler Verbreitung und zeitgemässer Ansprache einer neuen, teils jüngeren Zielgruppe sichergestellt. Den Trend zu erkennen ist zwar lobenswert, purer Aktionismus sollte aber vermieden werden. Print ist nicht online und das Publikum hat hohe Erwartungen an intuitive Bedienungskonzepte.

Ran an den Case…

Folgende Elemente spielen bei der Konzeption eine zentrale Rolle:
Storytelling: Welche Geschichte kann ich erzählen, um meinem Publikum einen Mehrwert zu bieten?
Dramaturgie: Wie führe ich mein Publikum und wie erzähle ich meine Geschichte?
Prototyping: Sollte als Basis zur Darstellung der Idee, Überprüfung der Konzepte, Überzeugung des Managements und als Basis für den Technologie-Entscheid dienen.

Von der Konzeption und Art Direction bis zur Verbreitung des Tablet-Magazins ist es nicht weit. Anbieter wie Adobe, Mag+ oder Woodwing offerieren Tools, die Adobe InDesign als zentrale Schaltzentrale benutzen. Dies erlaubt eine Übernahme der bisherigen Druckdaten, eine effiziente Designanpassung, Weiterentwicklung um Navigationspfade und beispielsweise Multimedia Elemente, aber ebenso die Veröffentlichung der App. Die einfachsten Lizenzmodelle bewegen sich zwischen CHF 3’000.- und CHF 10’000.- pro Jahr.

Da punktet die Umsetzung in HTML5 vergleichsweise, wo keine direkten Lizenzkosten anfallen. Smartphones und Tablets sind mit Webbrowsern ausgestattet, welche die Technologie unterstützen. Eine Umsetzung in HTML5 kann somit auf allen verschiedenen Endgeräten eingesetzt werden.


Best Practice Beispiele

Wie zur Zeit mit Inhalten und Geschichten für verschiedene Zielgruppen und mit verschiedenen Zielen jongliert wird kann am Beispiel der folgenden Publikationen illustriert werden:
The New Yorker
Wired Magazin
Red Bulletin
Letter to Jane
ProfiPhoto
Vontobel Blue
Liberate Eden
Flipboard
Zite