Ein Design-Workflow-Tutorial für Entwickler: Liefern Sie rechtzeitig bessere UI/UX

Anmerkung des Herausgebers: Lubos Volkov ist ein erfahrener Designer, der im Laufe seiner Karriere mit zahlreichen Entwicklern aus der Ferne zusammengearbeitet hat. Als Produktdesigner bei Toptal interagiert Lubos täglich mit Teammitgliedern aus verschiedenen Abteilungen, darunter Engineering, Community und Content. Er ist ein talentierter Designer, dessen Kommunikationsfähigkeiten zu seinem Erfolg beitragen. In diesem Tutorial teilt Lubos seine Erfahrungen und Möglichkeiten zur Optimierung von Designer-Entwickler-UI- und UX-Workflows, die zu Qualitätsprodukten führen, die termingerecht oder früher geliefert werden.

Die Zusammenarbeit mit einem großartigen Designer oder Designteam kann für jedes Team von unschätzbarem Wert sein. Mit klaren Kommunikationskanälen und reibungsloser Zusammenarbeit sollte der Designer Ihnen alles geben, was Sie brauchen, um den Bauprozess zu beschleunigen und Fragen und Verwirrung so weit wie möglich zu begrenzen.

Was können Sie als UX-Entwickler tun, um sicherzustellen, dass das von Ihnen erstellte Produkt rechtzeitig geliefert wird, ohne die Qualität der Benutzeroberfläche und des Benutzererlebnisses zu beeinträchtigen?

Meine Antwort: Binden Sie Ihre Designer vom ersten Tag an ein und beziehen Sie sie während des gesamten UI/UX-Entwicklungsprozesses mit ein. Stellen Sie sicher, dass klare Kommunikationslinien und konsistente Botschaften zwischen Entwicklern und Designern eingerichtet werden.

Haben Sie alles, was Sie brauchen?

Das Schlimmste, was während der Implementierung einer Benutzeroberfläche passieren kann, ist __mangelnde Kommunikation zwischen dem Designer und dem Entwickler __(es sei denn, es handelt sich um dieselbe Person). Einige Designer denken, dass ihre Arbeit erledigt ist, sobald die PSD gesendet wurde. Aber das ist einfach falsch! Sie müssen einen Always-on-Kommunikations-Workflow erstellen, der über die Bereitstellung der PSDs hinaus Bestand hat.

In vielen Fällen wird es einige Zeit dauern, bis die Designer die tatsächliche Implementierung des UI/UX-Designs sehen. Zu ihrer Überraschung unterscheidet sich der Build oft völlig von der ursprünglichen Einreichung. (Das ist mir mehr als einmal passiert. Ich habe Quelldateien mit vollständigen Beschreibungen und Interaktionsprototypen geschickt, aber als ich das Projekt Monate später endlich sah, hatte es ein anderes Layout, andere Farben und keine Interaktionen.)

Einige Designer hassen mich vielleicht dafür, da dieser Design-Workflow viel „zusätzliche“ Arbeit auf ihrer Seite erfordert. Das Erstellen und Bereitstellen vollständiger Assets und Informationen auf organisierte Weise ist jedoch besser für das Projekt und das Team als Ganzes.

Wenn ein Entwickler alles, was er braucht, vor sich hat, beschleunigt das den Prozess. Eine saubere PSD ist einfach nicht genug.

Was brauchen Sie, um Ihre Arbeit effektiv und effizient zu erledigen?

Dies sind die Assets, die ein Entwickler vom Designer erwarten sollte, um ein UI/UX-Design zur Implementierung zu bringen:

• Ressourcendatei – Der Designer sollte jedes Element der App in einer Datei platzieren. Diese Datei sollte Schaltflächen, Kontrollkästchen, Kopfzeilenstile, Schriftarten, Farben usw. enthalten. Grundsätzlich sollte der Entwickler basierend auf den Informationen in dieser Datei in der Lage sein, jede Schnittstelle von Grund auf neu zu erstellen. Für einen Entwickler ist es viel einfacher, ein beliebiges Element aus einer einzelnen PSD zu exportieren, als mehrere Dateien danach zu durchsuchen.

• Assets – Stellen Sie sicher, dass Entwickler alle erforderlichen Assets erhalten, da Quelldateien nicht mehr angerührt werden sollten.

• Interaktionsprototypen - Die Zeiten „statischer Bildschirme“ sind lange vorbei. Die Verwendung intelligenter Interaktionen und Animationen zur Vereinfachung des UX-Design-Workflows und der Implementierung ist heute eine gängige Praxis. Aber man kann einem Entwickler nicht einfach sagen „das kommt von links rein“. Der Designer sollte den eigentlichen Prototyp dieser Interaktion erstellen. Der Prototyp sollte Informationen wie Geschwindigkeit, Geschwindigkeit usw. enthalten, und vom Designer wird erwartet, dass er jeden dieser Werte angibt.

• Namenskonvention - Fordern Sie eine Dateinamensstruktur an, um die Dinge zu organisieren. Es erleichtert Ihnen beiden das Navigieren in Dateien. (Niemand mag es, Dinge in einem Hintergrundordner zu verstecken.)

• HDPI-Ressourcen - Wir leben in „harten Zeiten“ mit der enormen Dichte der Bildschirme. Stellen Sie sicher, dass der Designer Bilder in allen erforderlichen Auflösungen liefert, damit Ihre Anwendung überall gestochen scharf aussieht. Hinweis: Verwenden Sie so viele Vektoren wie möglich; es wird dir sehr helfen (svg).

Wenn Sie während der Implementierung feststellen, dass etwas anderes fehlt, haben Sie keine Angst; ping den Designer an und frag danach. Überspringen Sie niemals und sparen Sie niemals! Sie sind Mitglieder desselben Teams und Ihre Aufgabe ist es, das bestmögliche Produkt zu liefern. Wenn ein Designer scheitert, scheitern Sie auch.

In Arbeit

Setzen Sie Ihre Designer während des UI/UX-Entwicklungsprozesses ein. Halten Sie sie nicht an der Seitenlinie und erwarten Sie, dass sie nur „die Pixel pushen“. Ein Designer sieht mögliche Innovationen noch bevor die Umsetzung beginnt. Um dies zu nutzen, halten Sie sie auf dem Laufenden. Geben Sie ihnen Zugang, um die laufende Arbeit zu sehen und zu testen. Ich bin mir bewusst, dass niemand gerne unvollendete Projekte teilt. Aber es ist viel einfacher, Änderungen in der Mitte eines Builds vorzunehmen als am Ende. Dadurch können Sie Zeit sparen und unnötige Arbeit vermeiden. Nachdem Sie dem Designer Gelegenheit gegeben haben, das Projekt zu testen, bitten Sie ihn, eine Liste mit Problemen und Lösungen zusammenzustellen und Verbesserungen vorzuschlagen.

Was tun, wenn ein Entwickler eine Idee hat, die das Aussehen einer Anwendung verändern würde? Besprechen Sie dies mit dem Designer und erlauben Sie niemals einem Entwickler, das Design zu ändern, ohne den Designer zu konsultieren. Dieser Design-Workflow stellt sicher, dass der Build auf Kurs bleibt. Ein großartiger Designer hat einen Grund für jedes Element auf dem Bildschirm. Ein einzelnes Stück herauszunehmen, ohne zu verstehen, warum es da ist, könnte die Benutzererfahrung des Produkts ruinieren.

UI/UX-Design-Projektmanagement

Designer glauben, dass Entwickler ein Design an einem Tag oder sogar in einer Stunde zum Leben erwecken können. Aber wie großartiges Design braucht großartige Entwicklung Zeit und Mühe. Halten Sie Ihren ängstlichen Designer in Schach, indem Sie ihn den Fortschritt des Builds sehen lassen. Die Verwendung externer Projektmanagementsoftware, um sicherzustellen, dass jede Überarbeitung berücksichtigt wird, ist eine großartige Möglichkeit, um sicherzustellen, dass Sie keine wichtigen Informationen verpassen, die in einer E-Mail-Konversation oder einer Skype-Sitzung besprochen wurden. Und seien wir mal ehrlich: Manchmal werden Veränderungen und Aktivitäten erst kommuniziert, wenn sie eingetreten sind.

Unabhängig davon, welche Lösung Sie verwenden, stellen Sie sicher, dass Sie einen Workflow-Prozess auswählen, den das gesamte Team übernimmt und konsequent verwendet. In unserem Team habe ich versucht, Basecamp voranzutreiben, weil ich das verwendete, aber unsere Front-End-Entwickler dachten, es hätte eingeschränkte Funktionen. Sie verwendeten bereits andere Projektmanagement-Software, um Fehler, Fortschritte usw. zu verfolgen, wie JIRA, GitHub und sogar Evernote. Mir war klar, dass die Projektverfolgung und -verwaltung so einfach wie möglich gehalten werden sollte, also habe ich meinen UI-Design-Workflow zu JIRA migriert. Ich wollte sicherstellen, dass sie meinen Arbeitsablauf und meine Fortschritte verstehen, aber ich wollte nicht, dass sie das Gefühl haben, dass Design eine andere Sache ist, die sie verwalten müssen.

Hier sind ein paar Vorschläge für ein Projektmanagement-Tool:

• Basecamp – Verfolgt den Fortschritt der design- und entwicklungsbezogenen Aufgaben und ermöglicht Ihnen den einfachen Export von Aufgaben. Es hat auch einen einfachen mobilen Client.
• JIRA – Eine vollständig anpassbare Plattform, auf der Sie ganz einfach benutzerdefinierte Boards für verschiedene Bereiche einrichten können. Organisieren Sie zum Beispiel Boards, um Aktivitäten wie Back-End, Front-End, Design usw. zu verfolgen. Ich denke, der mobile Client ist etwas schwach, aber er ist eine großartige Lösung für größere Teams und enthält eine Fehlerverfolgungsfunktion.
• E-Mail - Dies ist großartig, um eine Konversation aufzubauen oder Bilder zu senden. Seien Sie jedoch vorsichtig, wenn Sie E-Mail für Feedback verwenden. Dinge können leicht verloren gehen.

Sie können auch Trello und andere Projektmanagement-Software ausprobieren, aber die in unserer Branche am häufigsten verwendeten sind Basecamp und JIRA. Auch hier ist es am wichtigsten, ein Projektmanagementsystem zu finden, das alle konsistent verwenden können, da es sonst ein strittiger Punkt ist.

UX-Design und -Entwicklung kommen zusammen

Der Designer und der Entwickler sind eine starke Kombination. Stellen Sie sicher, dass Sie UI und UX so oft wie möglich gemeinsam brainstormen. Entwickler sollten bereit sein, einem Designer bei der Konzeption von Ideen zu helfen, während ein Designer zumindest über Grundkenntnisse der verwendeten Technologie verfügen sollte.

Finden Sie gemeinsam den Design-Workflow heraus. Setzen Sie nicht einfach blind um, was Ihre Designer kreieren. Seien Sie proaktiv und schaffen Sie etwas, das schön aussieht und eine großartige Benutzererfahrung bietet, indem Sie Ihre zwei unterschiedlichen Perspektiven nutzen. Designer denken über den Tellerrand hinaus und sehen verrückte Animationen, Ideen, Pixel und Schaltflächen, während Entwickler die Technologie, Bremsschwellen und Grenzen sehen.

Meiner Erfahrung nach ist jeder Designer verrückt nach Pixeln und interessanten Konzepten. Aber manchmal kommt ein Designer an einen Punkt, an dem er eine Idee hat, aber der Entwickler schiebt zurück und sagt: „Das wird nicht gut funktionieren, wenn es einmal implementiert ist. Es wird Probleme mit dem Leistungsverbrauch geben“. Kürzlich wollte ich ein modales Fenster mit unscharfem Hintergrund implementieren, aber diese Unschärfe verursachte lange Ladezeiten. Um dieses Problem zu lösen, schlug der Entwickler vor, ein normales Vollfarb-Overlay zu verwenden, das schneller geladen wird und die Bildqualität beibehält. Designer, aufgepasst: Machen Sie beim Design keine Kompromisse bei der Benutzererfahrung.

Rückkopplungsschleife

Das Feedback des Designers ist entscheidend und muss so oft wie möglich erfolgen. Es ist wahrscheinlich die zeitaufwändigste (und energieintensivste) Sache, die Sie tun werden. Aber Sie müssen es annehmen, um perfekte Ergebnisse liefern zu können. Hier sind einige UX- und UI-Design-Worklow-Tipps, wie Sie Ihr Feedback perfekt machen können.

• Seien Sie visuell – Feedback muss so spezifisch wie möglich sein. Der beste Weg, es genau zu machen, besteht darin, einen einfachen Screenshot zu machen und ein Problem hervorzuheben, das Sie beheben möchten. Noch besser wäre es, wenn Sie Bilder einer aktuellen Implementierung im Vergleich dazu hätten, wie sie aussehen soll . Durch visuelle Kommunikation werden 50 % der Fragen eliminiert.

• Seien Sie beschreibend – Feedback sollte genau sein. Sie können nicht einfach „Bewege diese Schaltfläche nach oben“ sagen. Der Designer muss angeben, wie viele Pixel sich eine Schaltfläche bewegen soll, welche Auffüllung verwendet werden soll usw. Fügen Sie immer eine Erklärung des Problems und die entsprechende Lösung dafür bei. Es wird viel Zeit in Anspruch nehmen, aber es lohnt sich.

• Seien Sie geduldig – Denken Sie daran, dass der Designer und die Entwickler nicht denselben Fokus haben. Wenn Entwickler die Idee eines Designers nicht vollständig verstehen, kann dies zu Verwirrung und Fehlentscheidungen führen. In jedem Fall müssen beide Seiten geduldig und bereit sein, den anderen Teammitgliedern zu helfen. Es ist manchmal wirklich hart, aber es ist eine Soft Skill, die jeder Designer und Entwickler lernen sollte.

Es ist ziemlich offensichtlich, dass diese Dinge miteinander kombiniert werden müssen, um sie zu einem geeigneten Design-Workflow zu machen. Aber welches Tool kann Ihnen tatsächlich dabei helfen, das Feedback zu liefern?

• E-Mail – Ich habe keine Angst zu sagen, dass dies immer noch die häufigste Plattform ist, um Feedback zu übermitteln. Es ist völlig in Ordnung, es zu benutzen, wenn Sie ein paar einfache Regeln befolgen.
  • Verwenden Sie zunächst einen einzelnen E-Mail-Thread für Ihr Feedback. Setzen Sie nicht jede einzelne Anpassung in eine neue E-Mail mit einem anderen Betreff.
  • Zweitens erstellen Sie die Liste der Fixes. Versuchen Sie, sich hinzusetzen und über jede Änderung oder Korrektur nachzudenken, die Ihnen aufgefallen ist.
  • Und schließlich senden Sie keine riesige Liste auf einmal. Versuchen Sie, es in kleinere individuelle Listen herunterzubrechen und gehen Sie Stück für Stück vor.

• Skype (Hangouts) - Voice ist ein wirklich mächtiges Werkzeug für das Feedback. Sie können sofort Fragen stellen und beantworten. Machen Sie sich jedoch Notizen und senden Sie nach dem Anruf die Folgenachricht (E-Mail).

• Collaboration-Tools – Um ehrlich zu sein, bin ich kein großer Fan von Collaboration-Tools. Aber sie haben einen großen Vorteil. Sie helfen Ihnen, das Feedback an Ort und Stelle zu halten. Das Stellen und Beantworten von Fragen ist schnell und bleibt für immer dort.

Hier sind einige der großartigen Tools:

Feedback-Anmerkung:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Werkzeuge zur Zusammenarbeit:

• http://www.invisionapp.com/
• https://basecamp.com/

Fazit

Richten Sie einen System- und UI/UX-Design-Workflow ein, der die Kommunikationswege während des gesamten Design- und Entwicklungsprozesses offen hält. Auf diese Weise können Sie großartige Ideen umsetzen, potenzielle Probleme vorhersagen und wichtige Probleme priorisieren.

Der Entwickler und der Designer können gemeinsam großartige Dinge schaffen, solange sie bereit sind, als Team zu arbeiten. Lernen Sie voneinander und gestalten Sie Tutorials wie dieses!