Schlagwort-Archiv: UX

Battle of the tools – XD vs. Figma

Seit der Veröffentlichung von Adobe XD und Figma im Jahr 2016, wurde es für den modernen UX-Designer nicht leichter, sich für das beste Design-Tool zu entscheiden. Mittlerweile gibt es mit Figma, Adobe XD, InVision und Sketch vier große Player im Prototyping- und Design-Tool Wettbewerb. Bei diesem kurzen Vergleich beschränken wir uns auf Figma und XD.

Vorstellung der Design Softwares

Figma


Figma ist ein cloudbasiertes Design-Tool, das komplett über den Browser läuft. Es bietet Lösungen für UI & UX Design, Prototyping, Grafik Design und Wireframing. Zusätzlich gibt es noch diverse Offline-Features für Windows, macOS und Mobile Endgeräte. Das Preismodell erstreckt sich über 3 unterschiedliche Pakete: Starter (kostenlos), Professional (12 $ /Monat) und Organization (45 $ /Monat). Je nach Paket stehen dem Nutzer oder der Organisation mehr Funktionen zur Verfügung.

Die Kernfunktionen

Zu den Kernfunktionen von Figma zählen Browser und Desktop Support, Cloud-basiertes Arbeiten, Multi-Plugin Support, sowie Figma Mirror – eine App, die eine Vorschau der Designs auf dem Smartphone ermöglicht. Das Hauptmerk legt Figma jedoch auf das kollaborative Arbeiten in Echtzeit. Dies wird durch folgende Funktionen ermöglicht:

  • Kommentieren: Kommentare können an der betroffenen Stelle hinterlassen und Personen getaggt und informiert werden.
  • Multi-People Editing: Mehrere Nutzer können gleichzeitig in derselben Datei arbeiten.
  • Copywriting: Externe Copywriter oder Content Creator können in Echtzeit Inhalte erstellen.
  • Plattform Unabhängigkeit: durch browserbasiertes Arbeiten, spielt das Betriebssystem kein Rolle.
  • Vor- und Nachteile von Figma

    Vorteile:

  • Figma bietet ausgereiftes kollaboratives Arbeiten in Echtzeit. Kein anderes Designtool kann hier wirklich mithalten.
  • Dateien können einfach und schnell geteilt werden, ohne, dass diese überhaupt exportiert und importiert werden müssen.
  • Das cloud-basierte Arbeiten verschafft eine Unabhängigkeit von Betriebssystemen und ermöglicht so den Zugriff für jedermann.
  • Dem Nutzer steht eine riesige Bibliothek von Erweiterungen zur Verfügung.
  • Alles in einem Tool. Mit Figma sind keine weiteren Design-Tools nötig, da es für alles eine Lösung anbietet.
  • Nachteile:

  • Eine Internetverbindung ist unabdingbar. Nutzer müssen also immer „online“ sein um mit Figma zu arbeiten.
  • Es werden mindestens 4 GB RAM und eine Grafik-Karte mit der Kapazität von Intel HD 3000 oder mehr benötigt.
  • Durch lokale Caches, kann es dazu kommen, dass der Nutzer nicht den aktuellen Stand sieht.
  • Dem Nutzer ist es nicht möglich globale Farben festzulegen, wodurch Konsistenz im Design verloren gehen kann.
  • Adobe XD


    XD ist ein vektorbasiertes Design-Tool vom Unternehmen Adobe Inc., welches Adobe Photoshop als Programm zum Entwurf von grafischen Oberflächen ablöst. Auch XD bietet für die ganze Design-, Konzept- und Prototyping- Palette Lösungen an. Erhältlich ist das Design-Tool für Windows und macOS und bietet ähnlich zu Figma eine Mobile-App für die Vorschau von mobilen Designs. Nutzer müssen sich zwischen drei Abo-Varianten entscheiden um XD zu verwenden: Starter-Abo, für den privaten Gebrauch (kostenlos); Einzelprodukt-Abo, für Einzelanwender und kleine Teams (11,89 € /Monat) oder die ganze Creative Cloud, mit allen Programmen von Adobe (59,49 € /Monat).

    Kernfunktionen

    Zu Adobe XD’s Kernfunktionen gehören Web, Desktop und Mobile Support, Offline Co-Editing, Drag and Drop Artboard Guides und Multi-App Integration. Den Fokus legt XD auf global verwendbare Komponenten und das Prototyping. Das Besondere am Prototyping mit XD sind Features wie Stimmen- und Sprach- Interaktionen sowie „Auto Animation“.

    Vor- und Nachteile von XD

    Vorteile:

  • XD besticht mit Zuverlässigkeit und einer ausgeklügelten Infrastruktur.
  • Bearbeiten von wiederverwendbaren Elementen und das responsive Skalieren von Gruppen und Objekten vereinfachen die Arbeit.
  • Interaktive Prototypen machen Produkte schon in der Designphase erlebbar und eignen sich für fortgeschrittene Usability Tests.
  • Nutzer die mit Adobe Programmen vertraut sind, haben es einfach sich in XD einzuarbeiten
  • Cloud-Speicher Funktion und cloud-basierte Echtzeit Kollaboration.
  • Einfaches exportieren von Designs und von Assets
  • Nachteile:

  • Nutzer sind teilweise eingeschränkt beim Erstellen und Bearbeiten von Formen
  • Keine Bildbearbeitungs-Funktionen, sodass diese extern bearbeitet werden müssen
  • Ständige Updates und Upgrades beeinflussen die User Experience zum Teil negativ.
  • Die freie Variante von XD bietet nur eine sehr limitierte Funktionalität des Features kollaboratives Arbeiten.
  • Fazit

    Ein klares Ergebnis, welches Tool am besten ist, lässt sich nicht so einfach bestimmen. Letzten Endes kommt es auf die persönlichen Präferenzen an: Legt man eine höhere Gewichtung auf plattformunabhängiges & kollaboratives Arbeiten, so empfiehlt sich eher Figma als das designierte Programm zu wählen. Als Abonnent der Adobe Creative Cloud ist XD ein sehr gutes ergänzendes Tool in Zusammenhang mit beispielsweise Photoshop und Illustrator. Damit bietet sich eine solide Gesamtlösung für alle Anwendungsfälle. Figma ist das ausgereiftere Tool mit wenigen Vorteilen gegenüber XD, wobei diese Vorteile keine Auswirkungen auf das Endprodukt haben. Als Abonnent der Creative Cloud, die XD bereits beinhaltet, sind die Vorteile von Figma nicht weitreichend genug, um einen Wechsel anzustreben.

    Buttons – Gestaltung, Platzierung und Nutzen

    Wenn es um die Gestaltung eines digitalen Produktes geht, sind Buttons nicht weg zu denken. Buttons ermöglichen Nutzern Aktionen auszuführen und Entscheidungen zu treffen. So einfach sie auch aussehen mögen: Es gibt bestimmte Regeln, die befolgt werden sollten, um ein Button-Konzept sinnvoll zu gestalten.

    Die Auflösung finden Sie am Ende des Artikels.

    Button Varianten und ihre Hierarchie – nicht jeder ist gleich

    Für eine gute User Experience haben Webseiten oder Apps im besten Fall mehr als eine Button-Variante. Anhand der verschiedenen Button-Varianten kann der Nutzer unterscheiden, was wichtig ist und was nicht. Dabei kann zusätzlich zwischen den folgenden Buttons unterschieden werden:

    Call-to-action

    Ein CTA-Button hat die höchste Priorität und sollte dementsprechend dargestellt werden. In den meisten Fällen fordert dieser Button den Nutzer auf sich „anzumelden“, „jetzt zu kaufen“ oder zu „registrieren“. CTA-Buttons werden im Grunde dort eingesetzt, wo möglichst viele Klicks generiert werden sollen.

    Primär-Button

    Buttons mit einer hohen Priorität können genauso wie Call-to-action-Buttons gestaltet sein, aber auch weniger auffällig. Jedoch sollten sie stärker ins Auge fallen als ein Sekundär- oder Tertiär-Button. Primär-Buttons sind ein wichtiges Element, denn sie helfen dem Nutzer beispielsweise Vorgänge auszuführen, wie „Nächster Schritt“, „Speichern“, „Starten“.

    Sekundär-Button

    Sekundäre Buttons sind in der Größe, Farbe und Form weniger auffällig gestaltet. Sie haben meist eine Alternativ-Funktion, wie beispielsweise „Abbrechen“ oder „Zurück“. Sekundär-Buttons werden oft neben Primär-Buttons platziert und bilden dadurch die alternative Funktion.

    Tertiär-Button

    Tertiäre Buttons werden in der Regel kleiner gestaltet, sie tauchen aber oft in Verbindung mit Icons auf, die die Funktion unterstreichen. Mit diesen Buttons lassen sich beispielsweise Dinge „Bearbeiten“, „Löschen“ oder „Hinzufügen“.

    Button-Größe – wie groß darf er sein?

    Ein Button sollte so groß sein, dass er auffällig genug ist und zugleich mit dem Mauscursor oder dem Finger gut getroffen werden kann. Dabei ist Fitts‘ Gesetz zu beachten. Es besagt, dass Elemente umso schwerer zu treffen sind, je weiter weg und je kleiner sie sind. Und je wichtiger Buttons sind, desto größer und auffälliger sollten sie sein. Diese Zusammenhänge sind sehr einfach und leicht nachvollziehbar – und doch werden sie in vielen Anwendungen ignoriert.
    Die Richtlinien der Desktop-Betriebssystem-Hersteller sehen für Buttons eine Höhe zwischen 21 und 23 Pixeln vor – als Minimalgröße.
    Bei Touch-Bedienungen werden deutlich größere Buttons benötigt. Die Fakten sind eigentlich klar: Studien zeigen, dass der durchschnittliche menschliche Zeigefinger 16 bis 22 Millimeter breit ist – manchmal auch deutlich breiter. Die Fingerspitze, mit der wir Touchscreens bedienen, ist zwischen 8 und 10 Millimetern breit.

    Google Vorgaben für Buttongrößen im Material Design

    Platzierung – wo der Nutzer sie erwartet

    Buttons sollten im besten Fall dort platziert werden, wo der Nutzer sie am einfachsten findet oder dort wo er sie erwartet. Der Nutzer sollte nicht nach Buttons suchen müssen. Buttons sollten nur für wirklich wichtige Aktionen verwendet werden. Es sollte vermieden werden zu viele Buttons einzusetzen. Sobald der Nutzer zu viele Möglichkeiten hat, wird ihm die Entscheidung schwerfallen. Im schlimmsten Fall entscheidet er sich am Ende gar nicht. Inhalte und Button sollten im besten Fall in einer Reihenfolge platziert werden, die so auch in einem persönlichen Gespräch stattfinden könnte.

    Zustände – Button ist nicht gleich Button

    Ein Button kann folgende Zustände haben:

  • Default: Dieser Zustand zeigt an, ob der Button aktiv oder inaktiv ist. Das bedeutet, ob er geklickt werden kann oder nicht.
  • Focus: Der Button wurde mithilfe der Tastatur hervorgehoben.
  • Hover: Fährt der Nutzer mit der Maus über den Button, verändert sich zum Beispiel dessen Farbe. So wird signalisiert, dass der Button klickbar ist.
  • Pressed/Active: Ein Zustand, der angezeigt wird, wenn der Nutzer auf den Button klickt und hält (pressed) oder geklickt hat (active).
  • Progress/Load: Dieser Status wird notwendig, wenn die Aktion nicht unmittelbar ausgeführt wird, sondern in Arbeit ist oder eine gewisse Ladezeit benötigt.
  • Disabled: Dieser Zustand zeigt dem Nutzer, dass der Button inaktiv ist. Dieser kann aktiviert werden, wenn beispielsweise bestimmte Voraussetzungen erfüllt werden.
  • Label – was machen Buttons?

    Ein gutes Button-Label verrät dem Nutzer, was er mit dem Klickt auslöst. Wichtig hierbei ist es, den Text möglichst kurz zu halten. Buttons mit langem Text verlieren an Wirkung. Begriffe wie „Ok“, „Ja“ und „Nein“ sind oftmals irreführend und nicht aussagekräftig. Daher sollten optimalerweise Verben wie beispielsweise „Speichern“ oder „Bearbeiten“ verwendet werden.

    Fazit

    Zusammenfassend lässt sich sagen, dass der Nutzer intuitiv handeln sollte, ohne lange darüber nachdenken zu müssen. Buttons sollten so gestaltet werden, dass der Nutzer sofort erkennt, was klickbar ist und zu welchem Zweck.

    Auflösung des A-B-Testings:

    Richtig ist Antwort B. Ein häufiger Fehler der gemacht wird, ist den Call-to-action Button als erstes zu platzieren, da dieser als erstes wahrgenommen werden soll. Doch das ist in diesem Fall nicht notwendig, da der Button bereits visuell hervorgehoben ist. Ebenso sollten Inhalte und Buttons so angeordnet sein, dass sie den Verlauf eins persönlichen Gesprächs wiedergeben.