Lookback

Lookback ist eine Usability Testing Plattform, welche eine Kooperation mit Marvel und Invision hat. Das heißt, man kann sich über Invision und Marvel mit Lookback verbinden, Tester per Link oder Email einladen, und so zuvor erstellte Web- oder App-Prototypen testen. Voraussetzung ist das Vorhandensein der jeweiligen App (Marvel App oder Invision Viewer App) auf dem Smartphone. Alle Aufnahmen werden dann auf dem Lookback Account gespeichert. Man kann bei den Aufzeichnungen sehen, wo genau der User hin getippt hat. Hier ist es jedoch nicht möglich, bestimmte Aufgaben zu stellen, die der User durcharbeiten muss. Am besten ist dieses Tool geeignet, um entweder das Verständnis des Walkthroughs oder klickbarer Flächen zu testen. Will man hingegen bestimmte Tasks testen, sollte hier ein Tester anwesend sein, der den User durch den Test begleitet. Abgeschlossene Tests werden dann auf der Plattform gespeichert. Für Android selbst, gibt es die Möglichkeit über die eigene Lookback App Tests durchzuführen. Für iOS ist leider noch nichts Vergleichbares vorhanden. Es gibt jedoch, wie erwähnt, die Möglichkeit, Lookback for Mac downzuloaden und über den PC Tests durchzuführen. Hier kann man einerseits Websites testen, wobei durch die Front Kamera und das Mikrofon das Verhalten des Users aufgezeichnet wird, andererseits ist es aber auch möglich, jede beliebige App, die sich auf dem Handy befindet, zu testen, indem man das iPhone mit dem Mac verbindet. Kameraaufzeichnungen sind hier jedoch nicht möglich, es sei denn die Testperson sitzt vor dem PC

Außerdem gibt es die Möglichkeit, Lookback über das Android und iOS SDK direkt in den Code der App zu integrieren und anschließend Tests durchzuführen.

Link zur Website

Canvasflip

Canvasflip ist ein Web-Tool, welches Prototyping und Testing vereint. Über das vorhandene Sketch Plugin können Artboards upgeloadet und weiterverarbeitet werden. Wer nicht über Sketch uploaden will, oder Sketch nicht verwendet, kann trotzdem über die Web Plattform Designs hochladen. Dann kann auch schon der Prototyp erstellt und getestet werden. Zum Testen kann eine Einladung per Mail an ausgewählte Testpersonen versendet werden (der Link allein reicht hier nicht!) welche dann anschließend den Prototypen auf dem Handy bzw. Computer testen können. Was hier leider ebenfalls nicht möglich ist, ist das Testen anhand bestimmter Tasks. Hier kann rein geprüft werden, ob der Ablauf verstanden wird, bzw. ob klickbare Flächen als solche erkannt werden. Nach dem Testing wird das Ergebnis auf der Plattform gespeichert und kann aufgerufen werden. Hier sind sehr weite Einblicke in das Userverhalten möglich. Anhand einer Heatmap kann erkannt werden, auf welche Bereiche die User am häufigsten tippen. Rote Flächen stellen z.B. häufig angeklickte Zonen dar. Je mehr Tester, desto aussagekräftiger ist natürlich auch das Ergebnis. Auch kann der Userflow, entweder anhand des erstellten Uservideos, oder des Userflows, welcher den Weg des Users anhand von Pfeilen darstellt, zurückverfolgt werden.

Hier ist auch die Zeit ersichtlich, die der User auf dem jeweiligen Screen verbracht hat. Zusätzlich bietet Canvasflip die Möglichkeit, Styleguides (über das Sketch Plugin) zu erstellen und weitere Informationen zu den jeweiligen Screens bereitzustellen. Ähnlich wie bei Sympli (siehe Sketch Tools Teil 2) können hier die Eigenschaften aller Ebenen (Schriftarten, Farben, Abstände usw) ausgelesen und Icons bzw. Bilder exportiert werden.

Link zur Website

The post Mobile Usability Testing mit Lookback und CanvasFlip appeared first on Mobile USTP MKL.

Sketch Measure

Jedes Mal, wenn man mit Developern zusammenarbeitet, muss man ihnen gewisse Vorgaben liefern, welche für die Umsetzung eines Designs benötigt werden. Dies kann entweder in Form von Rohdateien, also z.B. Sketchfiles erfolgen, wodurch der Developer jedoch gezwungen ist, das jeweilige Programm zu besitzen und hier mühseligst alle einzelnen Eigenschaften auszulesen. Oder man nimmt Developern diesen Aufwand ab und versorgt sie gleich mit den richtigen Maßen, Größen, Abständen, Farben usw. Hier kommt Sketch Measure ins Spiel. Über dieses Plugin können für jedes Element innerhalb des Sketchfiles Eigenschaften generiert und direkt auf dem jeweiligen Artboard angezeigt werden. Hier ist es möglich, Eigenschaften für Abstände, Schriftfarben und –größen, Elementgrößen usw. darzustellen und diese anschließend zu exportieren oder ganz einfach ein HTML File zu generieren, aus dem wiederum (ohne Sketch besitzen zu müssen) Abmessungen durchgeführt und Eigenschaften ausgelesen werden können. Damit jedoch nicht jede Aktion über das Plugins-Menü aufgerufen werden muss, wird eine Toolbar zur Verfügung gestellt, welche alle wichtigen Funktionen beinhaltet. Durch Halten von Alt bei der Auswahl von Aktionen können diese noch individualisiert werden, z.B. kann man bei Abständen festlegen, ob alle oder nur jene zu bestimmten Rändern bzw. angrenzenden Elementen angezeigt werden sollen.

Was jedoch realistisch gesehen für den Designer einen gewissen Aufwand bedeutet, erleichtert die Arbeit des Developers dafür umso mehr.

Sympli

Sympli ist ein Tool, das vor allem für Developer interessant sein kann und die Zusammenarbeit zwischen Designern und Developern erleichtert. In der gratis Version ist 1 Projekt enthalten. Man erstellt ein Design in Sketch, uploadet es über das Plugin auf die Sympli Web-Plattform und kann dieses über diesen Weg mit anderen teilen. Hier ist es wiederum möglich, alle wichtigen Eigenschaften, die für die Umsetzung des Designs nötig sind, auszulesen, bestimmte Assets herunterzuladen und Screens zu kommentieren. Außerdem gibt es Plugins für Xcode und Android Studio, welche den ganzen Prozess noch einmal um ein Stück vereinfachen. Ich habe mir dazu das Plugin für Xcode näher angesehen. Es ist vor allem nützlich, wenn man rasch Designs mit dem Storyboard erstellen möchte. Man kann dazu Projekte über einen Link oder seinen Account hinzufügen, Voraussetzung ist jedoch in beiden Fällen, der Account. Ohne Account funktioniert es nicht. Hat man ein Projekt importiert, sieht man alle Screens, die das Projekt beinhaltet. Man kann dann eines auswählen, und sieht zu diesem alle wichtigen Eigenschaften und Assets. Icons, Farben, Schriften usw. Durch simples drag & drop können Inhalte schnell und einfach in das Storyboard übernommen werden.

Marvel and Invision

Marvel und Invision sind beides Prototyping (Web)-Applikationen, auf denen man klickbare Prototypen erstellen kann. Um unlimitierte Prototypen erstellen zu können, genügt in Marvel der gratis Account. Um weitere Features wie z.B. das downloaden von offline Prototypen oder unlimitierte Kommentare zu ermöglichen, muss upgegradet werden. Über die MarvelApp, welche für Android und iOS verfügbar ist, können Prototypen nicht nur angesehen werden, sondern sogar direkt in der App erstellt und bearbeitet werden. Außerdem kann man sich von anderen veröffentlichten Prototypen Inspirationen holen. In Invision ist hingegen nur 1 Prototyp pro gratis Account möglich. Für Studenten gibt es jedoch einen Education Plan, über den man gratis alle Features upgraden kann. Zudem ist der seit kurzem veröffentlichte Inspektor ein nützliches Feature um Details aus Prototypen auslesen zu können, z.B. Farben, Schriftarten usw. Von den Funktionalitäten bietet Invision dem Nutzer mehr Möglichkeiten. So ist es z.B. möglich, Worksflows zu erstellen (welche Screens sind fertig, welche müssen noch geändert werden). Außerdem werden zu jedem Upload die zugehörigen Assets wie Bilder und Fonts, aber auch das Sketchfile abgespeichert, welche dann praktisch und einfach heruntergeladen werden können. Ein wirklich praktisches Feature stellt das Livesharing dar. Hier können involvierte Personen, aber auch externe Involvierte per Link eingeladen werden, um live über das Design im Web zu diskutieren und sich darüber auszutauschen. Es kann einerseits über einen Live-Chat, aber auch über den integrierten Voice-Chat kommuniziert werden. Zusätzlich können Notizen und Skizzen direkt auf den jeweiligen Screens gemacht werden oder Dinge auf dem zusätzlichen Whiteboard dargestellt und aufgezeichnet werden. Die Invision Viewer App ist hier nur für iOS verfügbar und dient auch nur dazu, sich Prototypen anzusehen. Über die App sind auch Prototypen, welche über das Craft Prototyping Feature kreiert wurden, sichtbar, sofern das Smartphone mit dem PC verbunden ist. Für Marvel und Invision (über Craft) gibt es Sketch Plugins zum einfachen Synchronisieren.

Natürlich gibt es noch viel mehr Plugins und Tools für Sketch, mit denen man ganze Bücher füllen könnte. Ich habe jedoch nur jene behandelt, welche für mich am sinnvollsten erscheinen. Wer neugierig geworden ist, kann sich auf der offiziellen Seite von Sketch über weitere Plugins und Erweiterungen informieren.

The post Sketch Tools Teil 2 appeared first on Mobile USTP MKL.

Zu Beginn würde ich gerne eine praktische Neuerung von Sketch beschreiben, welche mit der Version 41, die nicht nur einige kleine Designänderungen inklusive Welcome-Screen mit sich brachte, gelauncht wurde. Nicht wirklich ein Plugin, aber trotzdem praktisch. Neben “normalen” Symbolen gibt es nun auch die Möglichkeit sogenannte “Nested Symbols” zu nutzen. Kurz zur Erklärung: Symbole können in Sketch eingesetzt werden, wenn Elemente mehrmals im Dokument verwendet werden, wie z.B. Buttons, Nav Bars usw. Ändert man eine Eigenschaft des Symbols, so wird diese Änderung auf alle Instanzen dieses Symbols übertragen. Nested Symbols bestehen grundlegend aus mehreren Symbolen innerhalb eines Symbols. Praktisches Beispiel: Man hat eine Tab Bar mit verschiedenen Icons. Diese sollen natürlich einen anderen State darstellen, je nachdem, welcher Screen angezeigt wird. Nun ist es natürlich mühsam, für jeden State ein eigenes Symbol zu erstellen, wie es früher der Fall war. Hier kommen Nested Symbols zum Einsatz.

Schritt 1: Pro State, also active oder inactive, wird ein Symbol erstellt. Hier ist darauf zu achten, dass die jeweiligen Symbole die gleiche Größe haben, damit sie durch ein anderes Symbol der selben Größe ersetzt werden können.

Schritt 2: Tab Bar mit jeweils einem State jedes Symbols erstellen und diese in ein eigenes Symbol umwandeln.

Schritt 3: Rechts im Inspector (siehe Bild) kann ich jetzt einzelne Symbole durch verschiedene States ersetzen, aber auch nach wie vor den Titel ändern.

Export Icons

Das Exportieren von iOS Assets ist ja an sich in Sketch kein so großes Problem. Man designet für alles die kleinste Größe, also 1x, und fügt danach die nötigen Größen für 2x und 3x inklusive automatisch generierten Suffixes vor dem Exportieren über den Punkt „Make Exportable“ hinzu. Komplizierter wird es jedoch bei diversen Icons z.B. bei Android, da man hier die Suffixes (hdpi, mhdpi usw.) händisch hineinschreiben muss. Um sich jedoch auch dies zu ersparen bzw. gleich alle nötigen Icons exportieren zu können schaffen bestimmte Plugins ein wenig Abhilfe für das Icon-Export-Drama. Um dies jedoch für alle verschiedenen Icons nutzen zu können, ist es erst wichtig, jedes Icon in der Ausgangsgröße zu gestalten um dann ein entsprechendes Plugin nutzen zu können. Ich habe dazu folgende zwei Plugins ausprobiert: Sketch Export Assets und Sketch Export Generator. Der einzige Unterschied: Export Assets exportiert ausgewählte Icons in der entsprechenden Größe und legt dazu gleich entsprechende Ordner an wie z.B. für Android: drawable-mdpi, drawable-hdpi usw. Sketch Export Generator macht Icons exportierfähig, indem es die jeweiligen Exporteinstellungen und Suffixes festlegt. Assets müssen danach händisch exportiert werden.

 Font Awesome

Will man in seinen Designs Icon Fonts verwenden, in diesem Fall Font Awesome, kann man auf das Font Awesome Plugin zurückgreifen. Durch das Plugin erspart man sich die Suche nach entsprechenden Icons auf der Font Awesome Website, welche dann nur durch copy & paste hinzugefügt werden können. Das Plugin ermöglicht das Suchen von Icons anhand des Icon Namens, oder man fügt diese über den enthaltenen Katalog ein. Die Funktion, welche einem den Namen des Icons verrät, erfüllte bei mir leider nicht den gewünschten Zweck, ist meiner Meinung nach auch nicht so wichtig. Abgesehen davon ist es ein nützliches Plugin, welches rasch die wichtigsten Icons zur Verfügung stellt.

Contrast Check

Ein ebenfalls sehr nützliches Plugin ist der Color Contrast Analyser. Ein Sketch-Plugin, das den Farbkontrast von zwei ausgewählten Ebenen berechnet und im Hinblick auf die WCAG auswertet. Wenn nur eine einzelne Ebene ausgewählt ist, wird mit der Hintergrundfarbe verglichen. Der Test kann AAA, AA erfüllen oder aufgrund des mangelnden Kontrasts fehlschlagen. Selbst wenn diese Anforderungen für ein Projekt nicht so wichtig sind, hilft es, ein Gespür für guten Kontrast zu bekommen. Dies hilft bei der Erstellung von zugänglichen Inhalten.

AA requirements

Kontrast von 4,5:1 oder 3:1 für großen Text

AAA requirements

Kontrast von 7:1 oder 4.5:1 für großen Text

Großer Text bedeutet eine Schriftgröße von mindestens 18pt regular oder 14pt bold.

Craft

Craft bietet eine Reihe von nützlichen Plugins für Sketch und wurde von InVision Labs ins Leben gerufen. Unter anderem bietet es die Möglichkeit, echten Text und Bilder (über Dropbox, andere Ordner, das Web oder über den frei nutzbaren Dienst Unsplash, welcher hochaufgelöste Bilder auch zur kommerziellen Nutzung zur Verfügung stellt) einzufügen. Das bedeutet, man muss sich keine Fantasienamen oder Überschriften mehr ausdenken, langweilige Lorem Ipsum Texte als Platzhalter einfügen, oder im Web nach Bildern suchen.

Für mich ist es sozusagen der „Ferrari“ unter den Plugins und mein persönlicher Favorit, da es eigentlich alle nützlichen Funktionen beinhaltet, die man benötigt. Über den Craft Manager können simpel und einfach einzelne Funktionen deaktiviert und außerdem überprüft werden, ob man sich auf dem neuesten Stand befindet und gegebenfalls updaten. Neben der Content-Generator Funktion für alle möglichen Inhalte wie Texte, Überschriften, Namen, Adressen, usw) ermöglicht es auch, Inhalte vertikal und horizontal zu duplizieren, Style Guides zu erstellen und Elemente aus importierten Libraries einzufügen. Außerdem können Artboards synchronisiert und somit auf die Invision Plattform upgeloadet werden, um dort einen klickbaren Prototypen zu erstellen. Oder man macht es sich einfacher und macht dies über die derzeit nur in der Beta Version verfügbaren Craft-Erweiterung zur Erstellung von Prototypen innerhalb von Sketch. Hier können sogar einzelne Elemente mit dem Web oder Bildgalerien auf dem Handy verknüpft werden oder echte Texteingabefelder erstellt werden. Der Prototyp kann hier jedoch nur über das verbundene Handy angesehen werden. Vermutlich könnte man einen ganzen Blogartikel nur über Craft schreiben, aber am besten, man überzeugt sich einfach selbst davon. Die gute Nachricht: Craft gibt es auch für Photoshop (für die Windows User unter uns )

Im zweiten Teil geht’s weiter mit vielen nützlichen Plugins und Prototyping Tools.

The post Sketch Tools Teil 1 appeared first on Mobile USTP MKL.

Micro-Interactions sind die geheime Zutat, wenn es darum geht, eine attraktive App zu entwickeln. Für viele User sind diese kleinen „Design-Momente“ meist unsichtbar, schaffen jedoch trotzdem eine unerwartete Freude während der Nutzung. Sie begegnen uns eigentlich fast täglich, z.B. wenn eine Nachricht auf dem Display aufblitzt, wir die Displaysperre aufheben oder pullen um Seiteninhalte zu aktualisieren. All diese winzigen Momente bilden Micro-Interactions. Vermutlich nimmt diese keiner bewusst wahr, aber jede einzelne trägt im Endeffekt dazu bei, dass wir bestimmte Apps gerne und oft nutzen. Features sind das, was Menschen dazu bewegt, die App zu nutzen, aber die Details bewirken, dass diese sich von der Konkurrenz abhebt.

Micro-Interactions sind nützlich um einzelne Tasks auszuführen, Geräte miteinander zu verbinden, Daten zu manipulieren (z.B. Temperatur), laufende Prozesse zu steuern (z.B. Musik-Lautstärke), Einstellungen anzupassen, eine Funktion ein- oder auszuschalten, Inhalte zu erstellen und anzusehen.

Wie Dan Saffer, Interaction Designer, in seinem Buch „Microinteractions“ beschreibt, erfüllen Micro-Interactions folgende Funktionen:

• Kommunikation von Feedback bzw. Ergebnis einer Handlung
• Ausführung von individuellen Aufgaben (z.B. Geräte miteinander verbinden, Beiträge liken)
• Manipulation von Bildschirminhalten
• Verhinderung von Nutzungsfehlern

Die 4 Schritte der Micro-Interactions

Eine effektive Micro-Interaction ist folgendermaßen aufgebaut:

• Trigger – Der Auslöser der Interaktion, welcher die Aktion initiiert, also z.B. Klicke ich auf ein Herz-Icon, um eine Seite zu meinem Feed hinzuzufügen.
• Rules – die Art, wie sich die Interaktion verhält. Der Nutzer sieht diese nicht, versteht sie jedoch durch das erhaltene Feedback. Beispielsweise wird durch das Klicken des Icons die Seite zu meinem Feed hinzugefügt.
• Feedback – Wie wird das Ergebnis an den User kommuniziert? Das Herz, welches sich nach Betätigung füllt oder springt, gefolgt durch eine „Zu Feed hinzugefügt“-Message informiert den Nutzer über die Aktion.
• Loops and Modes – legen die Länge der Microinteraction fest und wie sich diese im Laufe der Zeit entwickelt. Endet die Interaction sofort, oder wiederholt sie sich (für immer). Die zuvor beschriebene Interaktion entwickelt sich insofern, dass sie Content der favorisierten Seite im Feed des Users liefert.

Systemstatus zeigen

Wie schon in den Usability-Heuristiken von Jakob Nielsen enthalten: Halte den Nutzer, über das, was passiert, am Laufenden. Der User möchte sofort Rückmeldung erhalten, aber es gibt Situationen, in denen eine Website bzw. App Zeit benötigt, bis die Aktion vollständig abgeschlossen ist, wie z.B bei Down- oder Uploads. In dieser Zeit sollte der Nutzer über diesen Vorgang informiert werden, sei es durch eine nette Grafik oder das Abspielen von Sound.

Änderungen hervorheben

Um Platz zu sparen, wird z.B. häufig ein Button nach der Betätigung durch einen anderen ersetzt. Manchmal muss der Nutzer jedoch über diesen Vorgang informiert werden, damit diese Änderung nicht übersehen wird. Animationen sollen hier die Aufmerksamkeit auf sich ziehen, um den Nutzer keine wichtigen Änderungen übersehen zu lassen.

Zusammenhänge beibehalten

Im Zeitalter von Smartphones und Smartwatches mit limitierter Darstellungsgröße, ist es schwierig, eine große Menge an Daten darzustellen. Eine Möglichkeit, dieses Problem zu lösen, ist eine klar nachvollziehbare Navigation zwischen verschiedenen Seiten, sodass der Nutzer auch weiß, wie er wieder zurück navigieren kann. Der Übergang zwischen zwei visuellen Zuständen sollte klar, flüssig und leichtgängig sein.

Nicht-standardisierte Layouts

Micro-Interactions sollen den Nutzern dabei helfen, mit unüblichen Layouts zu interagieren, ohne Verwirrung zu erzeugen. z.B. Scrollende Grafiken, blätternde Fotos usw.

Inputs visualisieren

Data Inputs sind in jeder Applikation wichtig. Der Vorgang, Daten einzugeben, ist meist recht zäh, jedoch können Micro-Interactions diesen Prozess ein wenig spannender und ansprechender gestalten.

Tutorials/Intros zum Leben erwecken

Micro-Interactions können dazu eingesetzt werden, dem Nutzer die wichtigsten Funktionen und Steuerungsmöglichkeiten in der App auf eine spannende Art und Weise im Zuge eines Intros oder Tutorials näher zu bringen.

Microinteractions fungieren als Vermittler für Interaktionen, Feedback, Benachrichtigungen, Anweisungen, und manchmal auch ein bisschen Unterhaltung. Sie sparen Zeit, indem sie sofort Informationen auf eine Art und Weise bereitstellen, die den Nutzer nicht langweilt oder ablenkt. Hier ist jedoch auch zu beachten, die App nicht mit Micro-Interactions zu überfluten. Micro-Interactions sollen klein und einfach sein. Kombiniert man Funktionalität und Design mit Micro-Interactions hat man die Möglichkeit, ein einzigartiges Produkt zu entwickeln. Einerseits erwecken Micro-Interactions Aufmerksamkeit, andererseits erzeugen sie Emotionen beim Nutzer.

The post Micro-Interactions appeared first on Mobile USTP MKL.

App Struktur

Eine Watch App besteht aus 3 Komponenten: den Notifications, einem Glance Screen und der WatchKit App.

Die WatchKit App stellt den wichtigsten Teil der App dar, hier können Informationen gelesen und mit der
App interagiert werden. Diese wird grundsätzlich über den Home Screen oder Notifications bzw. Glance Screens geöffnet. In der App kann ausschließlich auf 2 Arten navigiert werden: hierarchisch oder Seitenbasiert. Eine hierarchische Navigation ist vor allem für komplexe Anwendungen geeignet, um eine Liste von möglichen Optionen bereitzustellen. Wenn der User ein Element der Liste antippt, erscheint ein neuer Screen, welcher mehr Informationen zum jeweiligen Objekt liefert. Da die Gefahr sehr hoch ist, sich in einer tiefgehenden Hierarchie zu verirren, sollten nicht mehr als 2 – 3 Ebenen verwendet werden.

Seitenbasierte Navigationen eignen sich am besten für flache Sammlungen von Informationen, wobei die jeweiligen Inhalte nicht aufeinander aufbauend sind. Jedes Element wird auf einer separaten Seite angezeigt, die Navigation erfolgt durch horizontales Swipen. Am unteren Bildschirmrand befinden sich Punkte, welche anzeigen, auf welcher Seite sich der User befindet. Auch hier sollte die Anzahl der Seiten nicht zu groß sein.

Notifications können in zwei Bereiche geteilt werden, und zwar Short Looks und Long Looks. Short Looks, wie der Name schon sagt, erscheinen nur so kurz, um dem User genau so viel Zeit zu geben, herauszufinden, worum es sich bei der Notification handelt und welche App diese gesendet hat. Diese enthält den Titel der Benachrichtigung zusammen mit dem Namen der Applikation. Aufgrund der kleinen Anzeigefläche, sollte der Titel kurz und bündig gehalten werden.

Long Looks liefern mehr Informationen zur jeweiligen Notification und erscheinen, wenn das Handgelenk des Users angehoben bleibt oder auf den Short Look getippt wird, und werden automatisch ausgeblendet, wenn das Handgelenk sich senkt. Dies ist jedoch auch manuell möglich. Abhängig von der Art der Notification werden automatisch dazu passende Action-Buttons angezeigt. Zusätzlich zu den spezifischen Buttons wird immer ein „Dismiss“-Button angezeigt.

Glances sind eine Sammlung zeitlich und kontextuell relevanter Momente der Lieblings-Apps eines Nutzers. Diese können durch nach oben swipen geöffnet und horizontal durchgeblättert werden. Glance Screens verwenden Templates, um stets ein konsistentes und strukturiertes Aussehen zu behalten. Der obere oder untere Bereich ist für Inhalte vorgesehen, die rechte obere Ecke ist für Systemstatus-Anzeigen vorbehalten.

Visual Design

Text

Apple empfiehlt für die Entwicklung von iOS Apps den eigens kreierten serifenlose Systemfont namens San Francisco zu verwenden. Diese wurde speziell für optimale Lesbarkeit entwickelt. Hier gibt es zwei Varianten: San Francisco Text und San Francisco Display. Für Text, der 19pt oder kleiner ist, wird San Francisco Text empfohlen, für Text der 20pt und größer ist, San Francisco Display. Andere Schriftarten werden zwar unterstützt,  bestimmte Features wie z.B. Dynamic Font Type müssen jedoch selbst implementiert werden. Dies bedeutet, dass sich die Schriftart, bzw. Letter und Line spacing je nach Schriftgröße automatisch anpassen, um eine bestmögliche Lesbarkeit zu ermöglichen. Diese Arbeit wird dem Developer abgenommen, wenn er sich für den Systemfont, und gegen eine benutzerdefinierte Schrift entscheidet. Alles was man tun muss, ist, den entsprechenden Textabschnitt über Build-In Type Styles als Body, Headline etc. zu definieren, der Rest geschieht von selbst.

Außerdem sollte man stets darauf achten, nur eine Schriftart für seine App zu verwenden, um ein konsistentes Aussehen zu erzielen. Stattdessen sollten verschiedene Weißtöne genutzt werden, um Textelemente zu betonen und voneinander zu unterscheiden.

Color

Bei der Apple Watch ist grundsätzlich zu wissen, dass für einen dunklen bzw. schwarzen Hintergrund designed und entwickelt wird. Schwarz fügt sich nahtlos an den Rahmen der Watch und erzeugt die Illusion eines kantenlosen Screens. Die Verwendung von Farbe soll vor allem visuelle Konsistenz schaffen, das Branding der App unterstützen und wichtige Informationselemente kennzeichnen. Dabei soll vor allem auf ausreichend Kontrast zwischen Text und Hintergrund geachtet werden. Farben haben für Menschen verschiedene Bedeutungszusammenhänge. Deshalb sollten Farben so ausgewählt werden, dass sie effektiv sind und die richtige Botschaft kommunizieren. Wie bereits erwähnt, ist die Farbe ein wichtiges Instrument, um die Wiedererkennnung der App zu erzielen. Dies ist insofern wichtig, da man grundsätzlich das Platzieren des Logos in der App vermeiden sollte, da der Platz ohnehin limitiert ist und es somit Platz für relevantere Inhalte nehmen würde. Die Farbe der Marke bzw. des Logos sollte deshalb für die Watch als globale Farbe definiert werden. Diese Farbe wird dann automatisch auf Interaktionselemente angewandt. Außerdem sollte auf einen Launch-Screen verzichtet werden. Der User wünscht sich eine rasche Interaktion und Darstellung der wichtigen Informationen auf seiner App, ein Launch-Screen verzögert diesen Prozess.

Icons und Bilder

Genauso wie eine iOS App ein Home Screen Icon benötigt, sind diese auch für die Watch wichtig. Am Iphone wird der Name und das Icon in quadratischer Form gezeigt, auf der Watch sind die Icons rund und inkludieren keinen Text, da dieser auf dem kleinen Screen auch schwer lesbar wäre. Deshalb sollte das Icon so gestaltet werden, dass es den Sinn und  Zweck der App auch ohne entsprechende Betitelung vermittelt. Oft ist eine einfache, leicht erkennbare Form ohne Details am sinnvollsten. Weiters sollte das Icon der Watch so gestaltet werden, dass es dem der Iphone App ähnelt. Die beiden müssen zwar nicht
zu 100% identisch sein, jedoch eine gewisse Ähnlichkeit miteinander haben damit sie miteinander in Zusammenhang gebracht werden können. Schwarz als Hintergrundfarbe ist hier jedoch ein Tabu, da sich dies nicht vom schwarzen Hintergrund abhebt. Templates für Icons etc. stehen auf der Apple Developer Website zur Verfügung.

Die Apple Watch ist in 2 Größen erhältlich, 38mm (340px x 272px) und 42mm (390px x 312px). Sie verfügt über ein Retina Display, das bedeutet, dass Bilder in doppelter Auflösung bereitgestellt werden müssen. Man muss Bilder bzw. Layouts nicht in 2 verschiedenen Größen zur Verfügung stellen. Man kann dies zwar tun, jedoch ist dies nicht nötig, da Inhalte so skaliert werden, dass sie immer den kompletten verfügbaren Bereich füllen. Wenn Bilder bzw. Fotos im Design verwendet werden ist eine Optimierung dieser zwingend notwendig, um die Performance der Watch zu erhalten. Die meisten JPEG-Dateien können ohne sichtbare Qualitätsverluste komprimiert werden. Schon eine kleine Datenkompression kann sehr viel Speicherplatz einsparen. Für kontrastarme Bilder sollte das SVG-Dateiformat verwendet werden, da dieses trotz beliebiger Skalierung die Qualität beibehält. Wird das Dateiformat PNG verwendet, sollte auf 24-Bit Farbtiefe verzichtet werden, sofern diese nicht erforderlich ist. Das 8-Bit Farbprofil reduziert die Dateigröße ohne die Bildqualität zu verringern. Für Fotos ist diese Einstellung jedoch nicht zu empfehlen.

Interface Elemente

Zu guter Letzt noch eine kurze Übersicht über die wichtigsten Interface Elemente:

• Labels

Labels werden verwendet, um kurze statische Inhalte darzustellen und sind die meistgenutzten Elemente in einer App. Sie können mehrere Zeilen beinhalten.

• Images

Ein Image Element zeigt ein einzelnes Bild oder eine Sequenz von Bildern (Animation).

• Groups

Gruppen sind dazu da, um Bilder und Labels zu layouten. Eine Gruppe hat Eigenschaften wie z.B. Position, Größe, Abstände.

• Pickers

Pickers stellen eine Liste von Elementen dar, die über die Digital Crown (Drehrad) navigierbar sind.

• Tables

Tables stellen Informationen spaltenweise dar.

• Buttons

Buttons stellen spezifische Aktionen innerhalb der App dar.

• Switches

Ein Switch lässt den User zwischen 2 sich gegenseitig ausschließenden Optionen auswählen, z.B. on/off.

• Sliders

Über einen Slider kann der User einen bestimmten Wert verändern/regulieren.

• Maps

Maps sind Schnappschüsse geographischer Standorte.

• Movies

Ein Movie Element spielt Audio oder Video-Inhalte ab, wenn man dieses antippt.

• Menus

Tippt man stärker auf den Screen der Watch, erscheint das Context Menu (falls vorhanden). Dieses zeigt bis zu vier mögliche Aktionen, ohne Platz innerhalb der App zu verschwenden.

• Date & Timer Labels

Diese zeigen Echtzeit-Informationen auf der Apple Watch.

• Activity Rings

Dieses Element zeigt immer 3 Ringe und kommt in der Activity App der Watch vor. Jeder Ring stellt eine andere Aktivität und deren Fortschritt dar.

The post How to design for Apple Watch appeared first on Mobile USTP MKL.

Design

Unter dem Motto „Weiß ist das neue Schwarz“ wurde dem Blog ein sehr minimalistisches und übersichtliches Aussehen verliehen. Die eher „drückenden“ dunklen Farben wurden durch Farben aus der flat-color Palette ersetzt. Die dominierende „Farbe“ ist weiß, durch blau wurden farbliche Akzente gesetzt. Während das Design für den/die ein oder andere/n vielleicht „zu“ weiß sein mag, finden andere wiederum einen Gefallen daran. Geschmäcker sind bekanntlich verschieden, und so darf sich jeder seine eigene Meinung dazu bilden
Die Sidebar wurde beibehalten und enthält einige kleine Veränderungen. Neu sind hier Social Media Buttons, Testimonials und eine kurze Information über die mobile Forschungsgruppe (früher im Footer aufzufinden). Eine größere Veränderung hat die Darstellung der jeweiligen Blogbeiträge erfahren. In der Vorgängerversion wurden diese untereinander dargestellt, und haben recht viel Platz auf der Seite eingenommen. Von nun an werden diese durch die berüchtigten Card UI Patterns dargestellt, auf der Desktop und Tablet Version jeweils 2 Beiträge pro Zeile. Ob auf Pinterest, Facebook oder Twitter, Card UIs können heutzutage auf einer Vielzahl von Websites vorgefunden werden und erfreuen sich äußerster Beliebtheit. Durch deren Einsatz kann ein klares und übersichtliches Layout sichergestellt werden. Außerdem kann dieses Muster sehr gut auf mobile Geräte übersetzt werden, was unter anderem der Hauptzweck des Re-Designs war. In jeder Card liegt das Hauptaugenmerk nun, genauso wie in der Detailansicht jedes Beitrags, auf dem Beitragsbild und dem sich darunter befindlichen Titel.

Auf Tags wurde im neuen Design verzichtet, die jeweilige(n) Kategorie(n) befinden sich nun auf der Unterseite des Containers. Ähnliche Beiträge zum Artikel befinden sich im Vergleich zur Vorgängerversion nun in der Sidebar.

Um euch das ewige Scrollen am Ende der Seite zurück zum Anfang zu ersparen, wurde im Footer ein Button eingebaut, welcher euch diese Arbeit abnimmt und sofort zum Beginn der Seite springt. Allgemein wurde verstärkt auf eine übersichtlichere Gliederung der Inhalte geachtet.

Programmierung

Die Website wurde mittels CMS WordPress umgesetzt und aufgrund des spezifischen Deisgns, unter Zuhilfenahme des Frontend Frameworks Bootstrap, von null auf, programmiert. Um die Verwaltung, von Abschlussarbeiten, Testimonials und den Geräten im Open Device Lab, zu vereinfachen wurden die Plugins Custom Post Types UI (CTP UI) und Advanced Custom Fields verwendet. Mittels CTP UI ist es möglich, im Backend einen eigenen Reiter wie Posts oder Pages zu erstellen. Advanced Custom Fields erweitern diese, oder auch bereits vorhandene Post Types, mit Feldern für Texteingabe oder einer Möglichkeit Bilder hinzuzufügen, etc.

Wichtig war uns auch die Performance der Seite, gerade weil sie viele Bilder enthält. Hierfür haben wir zum einen die Library Unveil.js (https://github.com/luis-almeida/unveil) verwenden, als auch das Plugin WP Fastest Cache.
Unveil.js ist eine lazy load library, welche es ermöglicht, Bilder erst dann zu laden, wenn sie wirklich im Viewport sind. Zusätzlich gibt es die Möglichkeit ein Bild für normale Bildschirm Auflösung bereitzustellen als auch für hochauflösende Displays. Um dem Benutzer während der Ladezeit trotzdem ein Bild zeigen zu können, wird ein Placeholderbild gleich zu Beginn geladen und danach durch ein Bild mit der entsprechenden Auflösung ersetzt.

WP Fastest Cache hingegen hat mehrere Einstellmöglichkeiten. Zum einen schreibt das Plugin automatisch die entsprechenden Cachemöglichkeit in die htaccess Datei und zum anderen ermöglicht es das Javascript und CSS Dateien zusammenzufassen als auch alle Abstände zu entfernen (Combine, Minify). Weiters haben wir das Plugin EWWW Image Optimizer verwenden, welches alle Bilder die über das Backend hochgeladen werden, optimiert anstatt dies selber über z.b.: tinypng machen zu müssen.
Abschließend wurden noch kleine Sicherheitsaspekte berücksichtigt. Zum einen wurden alle Anzeichen zu der aktuell installierten WordPress Version entfernt, als auch die Fehlermeldungen im Login-Bereich. Zusätzlich wurde das „Plugin Limit Login Attempts“ verwendet, um die Anzahl der Login Versuche minimieren zu können, als auch User oder IP-Adressen sperren zu können und Warnungen an den Administrator der Website zu schicken.

The post Blog Re-Design appeared first on Mobile USTP MKL.

Außerdem scheint es, dass die Zeiten vorbei sind, an denen Photoshop den Markt dominiert. Mit dem Erscheinen von Sketch ist ein großer Konkurrent hinzugekommen. Speziell für UI/UX Design entwickelt bietet es viele praktische Funktionen. Vektorbasierend, Code-friendly-Design, keine transparenten Kanten, dies sind einige der vielen Features, die Sketch beinhaltet. Ich selbst bin vor kurzem auf dieses Programm umgestiegen, und möchte nun allen Unentschlossenen die Vorteile von Sketch näherbringen. Zuvor sollte jedoch erwähnt werden, dass die folgenden Vergleiche mit Photoshop CS6 gemacht wurden, und nicht mit der aktuellen Version Photoshop CC.
 
 

Warum Sketch?

Wie bereits erwähnt, war Photoshop ursprünglich nie für UI/UX Designs bestimmt, sondern rein für Bildbearbeitung und –manipulation. Die Anzahl der Funktionen, welche für das Interface Design wirklich hilfreich sind, umfassen etwa 20% des gesamten Programms. Zudem wirkt es oft schwerfällig, hat hohe Absturzraten und ist überladen mit oft irrelevanten Funktionen. Sketch ist auf das Wesentliche reduziert somit ist auch der Umgang damit auch recht schnell zu erlernen. Anders als Photoshop, besitzt es keine 3D Tools oder andere Fotofilter. Natürlich sind nicht alle Web-Designer davon überzeugt. Um jedoch den Mangel an Tools zu kompensieren, besitzt Sketch eine große Anzahl an Plugins, welche mit Photoshop-Werkzeugen vergleichbar sind. (Plugins for Sketch auf Github)

100% Vektor

Mit der zunehmenden Popularität von Retina Displays und mobilen Geräten wird auch die Flexibilität von Inhalten immer wichtiger. Designer müssen HD-Displays, normale Screens, breite Screens und viele andere Dinge berücksichtigen. Da Sketch vektorbasierend ist, können Objekte und Inhalte verlustfrei skaliert werden. Dies kommt auch der Darstellung von Text zugute. Photoshop Antialiasing Probleme gehören der Vergangenheit an. Text in Sketch wird gestochen scharf dargestellt.

Artboards

In Photoshop CS6 muss man mehrere PSD Files erstellen, und dann zwischen den Fenstern hin und her switchen, wenn man an mehreren Mockups oder Designs arbeitet. Sketch unterstützt mehrere Zeichenflächen in einer Datei. Dies kennt man vielleicht schon aus Adobe Illustrator. Der Unterschied ist jedoch, dass in Illustrator Zeichenflächen von Ebeneninhalten getrennt sind. In Sketch werden neu erstellte Elemente auf einer Zeichenfläche dieser gleich zugeordnet. Man kann also Mockups für Web, Tablet und Mobile in einer Datei bearbeiten. Ändert man z.B. Symbole, Farben oder Text-Styles, kann man sich die Änderung auf allen verfügbaren Mockups ansehen. Zudem gibt es einige vordefinierte Größen für iOS Devices, responsive Webdesign, Icons usw.

Smart Guides

Smart Guides, wie sie schon aus Photoshop bekannt sind, finden auch in Sketch ihren Einsatz. Zusätzlich ist es jedoch möglich, den Abstand zwischen Elementen ohne ein weiteres Werkzeug genau zu bestimmen, um ein genaueres Arbeiten in einem Raster zu ermöglichen. Nutzt man hingegen Photoshop, kann man für diesen Zweck zwar das Lineal benutzen um Abstände zu messen, dies ist jedoch die weitaus umständlichere Variante.

Grids

Heutzutage müssen sich Designer auch Gedanken um Grids in ihren Designs machen. In Photoshop wird man zu diesem Zweck wahrscheinlich mühsam Hilfslinien aufziehen müssen, welche im Nachhinein schwieriger anzupassen sind. Sketch bietet dazu ein Layout-Grid-System, welches je nach Bedarf durch die Eingabe bestimmter Werte angepasst werden kann. Dies ist besonders hilfreich, wenn für mehrere Devices gestaltet wird.

Round to Nearest Pixel Edge

Die Funktion „Round to nearest Pixel“ rundet ein Objekt oder einen Layer zur nähesten Pixelkante. Liegt ein Objekt beispielswese bei 5,3px wird auf 5px abgerundet. Es gibt also keine unsauberen Pixelkanten, Pixeltransparenz oder Dezimalpixel mehr.

Autosave

Wer kennt es nicht, regelmäßiges Zwischenspeichern, wenn man an einem Projekt arbeitet, damit im Falle eines Systemabsturzes nicht alles verloren ist. In Sketch ist dies nicht mehr nötig, Denn alle Änderungen werden automatisch gespeichert, ohne sich darum kümmern zu müssen. Außerdem können ältere Versionen problemlos wieder aufgerufen werden.

Styles & Symbole

Soll in einem Interface Design mehrmals das gleiche Element eingefügt werden, z.B Buttons, Navigationsleiste etc, ist der Einsatz von sogenannten Symbolen sinnvoll. Alles was man dazu tun muss, ist ein Element zu gestalten, und daraus ein Symbol zu erzeugen. Dies kann dann über Insert – Symbol beliebig oft eingefügt werden. Der Vorteil ist, ändert man eine Eigenschaft in einem Symbol, wird diese Änderung auf alle anderen Symbole angewandt. Genauso verhält es sich auch mit Text Styles. Soll z.B. die Überschrift auf jeder Seite gleich aussehen, kann dafür ein Text-Style definiert werden, und dieser auf andere Texte übertragen werden.

Export

In Photoshop CS6 ist das Exportieren von Dateien und einzelnen Objekten oft sehr mühsam. Das zur Verfügung stehende Slice-Tool ist hier recht umständlich zu bedienen. Bevor einzelne Bereiche exportiert werden können, müssen diese erst gesliced und anschließend für das Web gespeichert werden. Um diesen Aufwand zu umgehen, musste erst eine zusätzliche Applikation namens Slicy entwickelt werden, welche diesen Prozess vereinfachen soll. Sketch hingegen löst dieses Problem ohne ein zusätzliches Add-on. Zum einen bietet es eine Export-All Funktion, wodurch alle Artboards oder Elemente gleichzeitig exportiert werden können. Will man jedoch nur einzelne Buttons exportieren, reicht es aus, die jeweilige Layergruppe auszuwählen und die Schaltfläche „Export“ auszuwählen. Hier gibt es Dateiformate wie PDF, JPG und PNG oder SVG zur Auswahl. Zusätzlich können verschiedene Größen mit und ohne Suffix exportiert werden.

Code-friendly Designs

Ein neues Konzept für Designer aber auch Developer. Code-friendly Design bedeutet, dass alle Eigenschaften von Elementen in Sketch (Schatten, Rahmen, Verläufe) 1 zu 1 in CSS umgesetzt werden können. In Photoshop ist es oft ein Problem, wenn Texturen oder Schatten im Design verwendet werden, welche sich in CSS nicht genauso umsetzen lassen. Styles wie Abgeflachte Kanten & Relief, Schein usw. funktionieren nicht nahtlos in CSS, außer man verwendet Bilder. Man bedenke außerdem wieder, dass Photoshop ursprünglich für Bildbearbeitung und komplexes Grafikdesign entwickelt wurde. Sketch spezialisiert sich rein auf das Interface Design. Die Funktion „Copy CSS Attributes“ übersetzt alle Fülloptionen eines Elements in CSS-Code und erleichtert dem Developer deren Umsetzung.

GUI Templates

Was die Arbeit bestimmt auch um einiges erleichtert und beschleunigt, sind vorhandene GUI-Templates in Sketch. Hier findet man z.B. vordefinierte Objekte, Styles, Symbole usw für Material Design, Responsive Templates, iOS UI Design und Icon Design etc. Auf verschiedenen Online-Plattformen wie z.B. Sketchappsources werden diese Templates, UI Kits, Iconsets und andere Ressourcen zur Verfügung gestellt, welche für eigene Projekte genutzt werden können.

Sketch Mirror

Last but not least, ein großartiges Feature von Sketch, ist der Sketch Mirror. Damit können Design Mockups live auf jedem iOS Device dargestellt werden. Solange das Gerät mit dem selben WIFI-Netzwerk wie das Macbook bzw der Mac auf dem man arbeitet verbunden ist, kann kann sich Previews ansehen und live Änderungen machen. Um diese Funktion zu nutzen, muss jedoch die Sketch Mirror App aus dem App Store um einmalige 5$ gekauft werden.

Fazit

Dies sind einige der grundlegendsten Vorteile, die Sketch gegenüber Photoshop mit sich bringt. Einige sind vielleicht dennoch der Meinung, dass Sketch niemals mit Programmen der Adobe Creative Suite mithalten kann und vieler Hinsicht stärker eingeschränkt ist. Dies ist zwar richtig, doch Photoshop bietet Features, welche UI Designer nicht oder kaum benutzen werden. Bildbearbeitung und Gestaltung von Texturen bleiben nach wie vor in der Hand von Photoshop. In der aktuellen Version von Photoshop CC werden jedoch einige Funktionen, die Sketch bereits beinhaltet, ebenfalls unterstützt und mit dem neuen Update erweitert (Artboards, Export,..). Natürlich ist Sketch noch ausbaubar und kämpft wie jedes Programm in der Anfangsphase mit seinen Problemchen. Es ist jedoch „leichter“ und benötigt außerdem bei weitem nicht so viel Arbeitsspeicher wie Photoshop. Sketch ermöglicht einen effizienten Workflow, in dem viel Zeit durch praktische Features gespart werden kann. Ich möchte Photoshop keinesfalls schlecht machen, da es auch viele tolle Features beinhaltet, im Bereich UI/UX Design ist Sketch jedoch vielleicht die effizientere Lösung. Ich glaube, dass es auf jeden Fall einen Versuch wert ist und sich jeder selbst davon überzeugen sollte. Und wer das Programm nicht gleich kaufen möchte (50% Studentenrabatt), kann es 30 Tage lang kostenlos testen. Ein Nachteil von Sketch ist bestimmt, dass es ausschließlich mit Apple-Produkten kompatibel ist, aber vielleicht können wir jedoch für die Zukunft eine Erweiterung auf andere Plattformen erwarten.

The post Sketch vs. Photoshop appeared first on Mobile USTP MKL.