26 Schritte zum perfekten Produktdesign
In den letzten vier Jahren habe ich Dashboards und Anwendungen entworfen und gelernt, mit verschiedenen Abteilungen umzugehen und ihr Wissen zu nutzen, um das Produktdesign effizienter zu gestalten.
Heute werde ich alle Schritte, die ich in meine tägliche Routine eingebaut habe, teilen, von denen ich glaube, dass sie mich zu einem besseren Designer gemacht haben.
Vorverarbeitung
1. Holen Sie so viele Informationen wie möglich (fragen Sie nach drei Beispielen)
Für mich bietet nichts mehr Klarheit als ein wirkliches Arbeitsbeispiel zu sehen. Wenn ich mit einem neuen Kunden oder einer brandneuen Zielseite für ein Produkt arbeite, ist es für mich am einfachsten, wenn Sie den Kunden bitten, drei oder vier inspirierende Seiten zur Verfügung zu stellen, denn das hilft beiden Parteien wirklich. Indem Sie Ihren Kunden dazu bringen, Ideen auf den Tisch zu bringen, haben Sie die Möglichkeit, leicht zu verstehen, was er oder sie von dem fertigen Design erwartet.
Wenn Sie mit mehreren Teams arbeiten, sollten Sie so viel Zeit mit den Entwicklern auf einem Produkt verbringen, wie mit Ihren Designerkollegen. Was ich gelernt habe ist, dass der Schlüssel zu einer effektiven Designentscheidung darin besteht, sicherzustellen, dass du so oft wie möglich mit dem Entwicklerteam sprichst. In meinem Fall gab es Fälle, in denen eine Lösung für ein Problem gefunden wurde, die ich selbst nicht finden konnte.
Ziel ist es, möglichst viele Fragen zu eliminieren, bevor Sie in die Entwicklung gehen.
2. Erfahren Sie mehr über Personas
Zuerst muss ich sagen, dass ich gegenüber Personas skeptisch war, aber jetzt ergibt alles einen Sinn für mich.
Ganz im Gegensatz zu meinem älteren Prozess kann ich also sehen, wie Personas während der Arbeit an Produkteigenschaften besonders wichtig sind, besonders wenn die Lösung viele verschiedene Randfälle hat. Es hilft Ihnen zu verstehen, für wen Sie wirklich entwerfen. Ich möchte etwa vier bis fünf Personen haben.
3. Legen Sie genaue Ziele fest - was genau sollten wir verfolgen?
Ich denke, dass die meisten Designer / Kunden diesen Schritt ignorieren, aber einer der wichtigsten Aspekte des Designs für beide Parteien ist es, die Ziele des von Ihnen entworfenen Produkts zu verstehen. Wir neigen dazu, direkt in Pixel zu springen und schnell die Benutzeroberfläche des Projekts zu erweitern. Wenn es sich um eine brandneue Website oder ein neues Feature handelt, sollten Sie klare Ziele für das festlegen, was Sie zuerst erreichen möchten.
Da alles verfolgbar ist, sprechen Sie über die genauen Punkte, die Sie verfolgen werden. Diese könnten beispielsweise von Neuanmeldungen bis hin zu einer Anzahl von Kunden reichen, die Paypal gegen Einkäufe mit Kreditkarten verwenden. Stellen Sie immer sicher, dass Sie wissen, wie hoch Sie am Anfang sind!
(Sie werden dies trotzdem benötigen, um später in diesem Prozess Trichter auf Mixpanel einzurichten.)
4. Richten Sie einen Projektordner ein und erstellen Sie ein Moodboard
Es gibt viele Orte zur Inspiration - Dribbling , Behance , Pttrns usw. Es ist wirklich einfach, ähnliche Projekte zu finden, an denen Sie gerade arbeiten. Darüber hinaus ist möglicherweise bereits eine Lösung für ein Problem vorhanden, das Sie bereits gelöst haben.
Wenn ich mit der Arbeit an einem neuen Projekt anfange, richte ich immer einen Ordner mit Ordnern namens Quelldateien , Bildschirme & Export , Inspiration & Ressourcen ein . Ich speichere alles, was ich im Internet finde, im Inspiration-Ordner, um es später für die Erstellung von einfachen Moodboards verwenden zu können. Dieser Ordner könnte mit Plugins, Farbfeldern oder sogar vollständigen Fallstudien von Behance gefüllt werden.
Niedrige Wiedergabetreue
5. Whiteboard
Wenn wir ein neues Feature hinzufügen oder einen Prozess neu gestalten möchten, setzen wir uns hin und jeder beim Meeting beginnt Ideen auf einem Whiteboard, Papier oder sogar einem iPad zu skizzieren. Diese Aktion ermöglicht es uns, alle in die Position des Designers zu bringen. Später haben wir zwei Designoptionen, um zu sehen, welche am besten funktioniert.
Wir versuchen immer, die ganze Erfahrung durchzugehen und die meisten Randfälle während dieses Teils des Prozesses zu diskutieren. Es ist wirklich wichtig, sie jetzt zu adressieren, anstatt während der Entwurfsphase oder noch schlimmer während des Entwicklungsteils. Dann kann man viel Zeit und Energie verlieren.
6. Ordnen Sie alle Ihre Bildschirme zu (welche Daten ein Benutzer eingeben muss)
Dies ist die Zeit, um über das Whiteboard hinauszugehen und alle Eingaben und Geschichten des Benutzers aufzulisten. Schreiben Sie auf, was genau ein Benutzer in einen bestimmten Bildschirm einfügen sollte und wie ein Benutzer die gewünschten Ziele erreichen kann.
7. Schreiben Sie alle möglichen Zustände auf
Da alle Dashboards, Apps oder Websites Formulare unterschiedliche Zustände haben, ist dies ein weiterer wichtiger Schritt, den Sie nicht vergessen sollten.
Beim Entwurf müssen wir sicher sein, dass wir alle ansprechen. Es ist schön, glänzende Grafiken und coole Profilbilder in unseren Sketch-Dateien oder PSDs zu haben. Höchstwahrscheinlich werden Nutzer jedoch die andere Seite Ihrer App sehen. Vor allem, wenn sie zu Ihrem Produkt kommen. Es ist notwendig, vorbereitet zu sein. Im Folgenden sehen Sie ein Beispiel für den Umgang mit leeren Zuständen in einer unserer Datenkomponenten.
8. Bereiten Sie Ihr erstes Diagramm vor
All dies führt zum letzten Teil der niedrigen Wiedergabetreue. Dank des Ergebnisses der Whiteboard-Aufgabe kennen wir nun alle möglichen Zustände, Benutzereingaben und -ziele. Um alle Interaktionen zusammenzufassen, erstelle ich ein Diagramm und um ehrlich zu sein, habe ich den Stil mehrmals geändert: Von Sketch-Dateien mit gerasterten Layouts zu nur Rechtecken, die jede Seite mit ihren Namen darunter symbolisieren. Allerdings war der Prozess immer sehr schmerzhaft. Normalerweise komme ich irgendwann in eine Situation, in der wir später etwas ändern oder etwas hinzufügen wollen. Mit diesen Lösungen bin ich normalerweise gezwungen, viele weitere Schritte zu machen; wie zum Beispiel das Ändern der Positionen von Linien, Pfeilen und Bildern.
Kürzlich habe ich benutzt Camunda-Modellierer , das ist nicht gerade ein Design-Tool; Es ist eine einfache App zum Erstellen von technischen Diagrammen. Was komisch klingt, aber diese App wurde entwickelt, um Ihnen beim Erstellen von grundlegenden Diagrammen zu helfen. Am wichtigsten ist, dass alles, was erstellt wurde, vollständig skalierbar ist. Sie können jeden Punkt einfach ziehen und ablegen und es werden automatisch Linien und Pfeile für Sie erstellt. Sie können auch zwischen verschiedenen Arten von Punkten wählen, die hilfreich sein können, wenn z. B. ein Benutzer eine E-Mail von Intercom erhält. Camunda exportiert nach SVG, was es einfach macht, verfolgbare Punkte in Sketch einzufärben.
Arbeitsgestaltung
9. Moodboard
Ich kann mit der Erstellung von Moodboard beginnen, da ich alle Bilder in meinem Inspiration-Ordner sammle. Ich benutze hauptsächlich Moodboards, um meine Gedanken mit Kollegen zu diskutieren und einige der visuellen Ideen zu beschreiben, bevor ich mit dem Pixelprozess beginne.
10. Erster Entwurf
Entwerfen ist immer ein fortlaufender Prozess. Sie werden auf Ihrem Weg zu einem großartigen Ergebnis viel iterieren. Mit dem ersten Entwurf ist auch eine Möglichkeit, Feedback zu sammeln. Sie müssen nicht zum pixelperfekten Design kommen, um Feedback von Ihren Teamkollegen, Kunden oder potenziellen Nutzern zu erhalten. Um ihre ersten Gedanken zu sammeln und eine Diskussion zu beginnen, mische ich normalerweise Bildschirme aus unseren aktuellen Designs. Dies ermöglicht uns, in weniger als einem Tag mit wirklich aussehenden Designs zu spielen. Sie können einen ersten einfachen Prototyp machen, um zu testen, ob sich die Dinge gut verbinden.
11. Schreiben Sie Ihre Kopie
Kopieren ist einer der Schlüsselaspekte der Benutzerentscheidungen und ich nehme es als einen entscheidenden Teil des Designs. Es gibt nichts Schlimmeres als ein schönes Design mit verwirrenden Dialogen, in denen die Benutzer Schwierigkeiten haben, den nächsten Schritt zu finden.
12. Erster interner Test
Mit Ihrem ersten Entwurf können Sie schnell einen Prototyp erstellen Wunder oder Invision . Das ist etwas, was ich vor kurzem angefangen habe und es stellt sich heraus, dass es ein weiterer erstaunlicher Aspekt ist. Mit einem Prototyp können Sie jetzt ganz einfach einen Anruf mit 3 oder 4 Personen aus Ihrem Team erstellen und den Prototyp-Link mit ihnen teilen und versuchen, einige Fragen zu stellen, während Sie bestimmte Abläufe / Szenarien testen.
Auf diese Weise können Sie Ihre Fragefähigkeiten auf einfache Weise testen und Ihre Designentscheidungen bei echten Benutzern testen, ohne sich um verschwendete Ressourcen und Zeit kümmern zu müssen. Ich neige dazu, Leute auszuwählen, die nicht so sehr an der Entwicklung von Dashboards beteiligt sind. Versuchen Sie auch zu vermeiden, jemanden zu beobachten, der bereits eine Chance hatte, mit dem Prototyp zu spielen.
13. Etikette
Wir alle wissen, wie schwer es ist, sauber zu bleiben. Wie man noch ein weiteres Feature liefert. Dies führt normalerweise zu einem unordentlichen Sketch oder PSD-Dateien. Ich habe viel über die Unterschiede zwischen der Arbeit als einzelner Designer in einem Startup, der Arbeit in Teams oder der Arbeit an meinen eigenen digitalen Produkten gelernt.
Wenn du in einem Team arbeitest, denke an deine PSDs, als würdest du sie für jemand anderen erstellen. Ich benutze die Regel, dass wenn Sie mehr als 8 Ebenen in einem Ordner haben, sollten Sie eine neue erstellen.
Ich habe ein großartiges Plugin für Sketch gefunden, das mir während der Arbeit an meinen UI-Kits Stunden gespart hat: Benenne es um .
Tipp: Legen Sie alles auf die Leinwand. Ich hatte immer Probleme damit, nette Header zu entwerfen, während ich den Rest der Leinwand weiß hielt. Beim Entwerfen habe ich gelernt, zuerst alle Inhalte zu platzieren - spiele einfach mit dem Layout und der Typografie. Es ist viel einfacher, nette Details zu entwerfen und mit dem gesamten Konzept zu spielen.
14. Erstellen Sie UI-Elemente und beginnen Sie mit Lego zu spielen
Ich bin wahrscheinlich zu spät zur Party und das klingt schon veraltet, während ich es schreibe. Der Grund, warum wir hier kein Drahtbild gemacht haben, ist einfach. Sketch 39 kommt mit etwas, das ich unglaublich gefunden habe und das sind "Formen mit Größenanpassung". Das macht das Gestalten für jeden im Team einfach. Unsere Sketch-Datei ist jetzt rein Drag-and-Drop. Du kannst deinen Mitspielern leicht eine leere Leinwand geben und sie können fast Hi-Fi-Entwürfe erstellen. Dank dessen können wir alle Drahtbildwerkzeuge überspringen und mit fast real aussehenden Pixeln beginnen.
Dies geht auch Hand in Hand mit der Möglichkeit, Wireframes tatsächlich in echte Designs umzuwandeln. Jedes PM kann ein Drahtmodell erzeugen und dann kann ich es einfach übernehmen und in Hi-Fidelity umwandeln.
Vermögenswerte und Lieferung
Wenn Sie mit dem Design und der Iteration aufgrund des ersten Feedbacks fertig sind, sind Sie noch nicht fertig. Jetzt kommt die Zeit, Ihre Entwürfe Ihren Ingenieuren / Entwicklern zu übergeben.
15. Spezifikationen
Eines meiner Hauptziele ist es, immer meine Entscheidungen mit dem Team kommunizieren zu können und die Schwierigkeiten für unsere Entwickler so gering wie möglich zu halten, um ihnen die bestmöglichen Ressourcen zur Verfügung zu stellen. Das ist für mich definitiv der wichtigste Teil meiner Arbeit als Designer.
Da wir die gesamte Interaktion dokumentiert haben und von Anfang an alles vorbereitet haben, ist die Erstellung von Spezifikationen ein Kinderspiel. Ich neige dazu, in Google Docs oder unter den Bildschirmen in Sketch-Dateien Spezifikationen zu schreiben. Es ist nett, Ihre Designs mit Erklärungen aller Funktionen zu behandeln, so dass jeder Ihre Datei in Zukunft greifen kann.
16. Diagramm
Diese Technik eignet sich gut zum Ausdrucken von Designs und zum Diskutieren mit dem Team. Aber heutzutage denke ich, dass es bessere Möglichkeiten gibt. Zum Beispiel den fertigen Prototyp bereit zu haben.
17. Endgültiger Prototyp
Eines der wichtigsten Dinge für mich ist es, immer alle Interaktion in Prototypen bereit zu haben. Normalerweise habe ich am Ende 3-5 Prototypen auf dem Weg zum letzten für diese kleine Session mit Teamkollegen oder um einige bestimmte Flows zu zeigen. Ich neige dazu, alle Zustände in Sketch auf einer Zeichenfläche vorzubereiten und diese Zeichenflächen anschließend zu duplizieren, damit beim Exportieren jeder Status verfügbar ist.
Es ist großartig, Kommentare zu Teilen Ihrer Designs hinzuzufügen, um Ihre Spezifikation noch weiter zu erweitern, so dass selbst ein Texter problemlos reale Pixel und Flüsse überprüfen kann, wenn jede Kopie und jeder Dialog wie gewünscht funktioniert.
18. Quicktime Video> Notizen
Wenn ich dem Team oder einem Kunden keine Sachen im Hangout präsentiere, sende ich ein Bildschirmvideo von mir, in dem ich den Prototyp durchführe und alles, was ich entworfen habe, erläutere. Es ist eine schöne Bestätigung für mich vor jeder Präsentation, dass ich die Antwort auf jede Frage und mögliche ausgefallene Interaktionen, die ich beschlossen habe zu entwerfen, kenne. Kann auch gut für die Arbeit in Remote-Teams verwendet werden. Jeder hat jederzeit Zugriff auf die gesamte Interaktion.
19. Animiere
Als eine nette letzte Berührung können Sie verwenden After Effects oder Prinzip . Es ist gut zu erklären, wie Sie das oder das bewegen wollen.
20. Styleguide
Ein weiterer entscheidender Punkt für Ingenieure ist zu wissen, wie die Dinge in verschiedenen Szenarien reagieren werden. Denken Sie über Fehlerzustände der Eingabe nach oder wo Fehlermeldungen angezeigt werden. Ähnlich wie der deaktivierte Status eines Submit-Buttons aussieht, wo ein Spinner platziert werden soll usw.
Es ist sehr einfach für Ingenieure, einfach durch Ihre Symbole-Zeichenfläche und Stil-Elemente nacheinander zu gehen, bevor sie überhaupt beginnen, alle Bildschirme zu codieren, dank einer Sketch-Datei als Lego-Blöcke.
Abschließende Prüfung
Da wir mit der Übergabe unserer Konstruktionen an Ingenieure fertig sind, können wir uns auf den letzten Teil des Prozesses konzentrieren - unsere Entscheidungen testen!
21. Inspectlet / HotJar
Nachdem die Designs in funktionierenden Code umgewandelt wurden, vergessen Sie nicht, Ihre Inspektor oder HeißJar JS Schnipsel. Ich bin immer aufgeregt (oder frustriert), um zu sehen, wie Benutzer durch unser Dashboard navigieren oder was sie auf meiner Portfolio-Seite tun. Mit Inspectlet können Sie alle Ihre Benutzersitzungen erfassen. Funktioniert auch für größere Projekte.
Es bietet eine einfache "/ Seite" -Filterung, mit der Sie Sitzungen einer bestimmten Funktion oder eines bestimmten Flusses verfolgen können.
22. Mixpanel
Mixpanel eignet sich hervorragend zur Validierung unserer Ziele (die wir am Anfang unseres Prozesses festgelegt haben). Mixpanel hilft zu sehen, wie viele Benutzer bestimmte Flows abschließen. Wie viele Benutzer sind vor dem Einrichten des Kontos gelöscht worden. Wie viele Leute sind von der Hauptlandseite zum Geschäft und zu unserem wertvollsten Produkt gegangen.
23. Google Analytics
Ich bin nicht in der Lage, große Dinge zu codieren, aber zumindest kann ich mit CSS-Dateien und mit einfachem Code arbeiten. In letzter Zeit war ich daran interessiert, zu sehen, wo Nutzer klicken und während ich Hotjar-Heatmaps ansehe, also habe ich beschlossen, auch in Google Analytics einen einfachen Klick-Tracker einzurichten. Sie können auch alle Klicks von Nutzern auf Ihrer Website verfolgen.
Dies hilft mir, das Benutzerverhalten einfach zu erfassen. Zum Beispiel fand ich heraus, dass Leute die Top-Navigation auf meiner Seite 5-mal mehr über den hervorgehobenen Link im Intro-Text benutzten. Leider zählen Klicks von Nutzern mit AdBlock nicht.
24. Gegensprechanlage
Als wir uns auf unsere ersten Flows verständigten, sprachen wir über einen Teil der Flows, von denen der Nutzer eine E-Mail erhält Gegensprechanlage . Unsere Verantwortung hier ist sicherzustellen, dass alle Kopie und die Nachricht selbst Sinn macht und tatsächlich hilfreich für den Besucher ist. Stellen Sie sicher, dass Ihre E-Mails Ihren Benutzer zu Ihrem guten Ergebnis führen, und versuchen Sie immer, spezifische Supportartikel und Informationen zum Fortfahren im Flow bereitzustellen.
Die letzten paar Worte
25. Lass Dribbble zurück
Von dem, was ich gelernt habe und wie sich mein Design in den letzten 4 Jahren verändert hat, habe ich den Punkt erreicht, an dem Dribbble nicht unbedingt der Ort ist, an dem du deine Designs erstellen möchtest. Ich habe immer versucht, schöne Pixel mit sexy Profilbildern zu haben, aber das ist nicht das, was echte Benutzer brauchen und benutzen werden.
Hier ist ein Beispiel, auf der linken Seite sehen Sie etwas, das ich für Dribbble entworfen habe. Auf der rechten Seite sehen Sie etwas, das ich entworfen habe, nachdem ich einige Zeit damit verbracht habe, Menschen beim Bearbeiten ihrer Profile zuzusehen, und mir wurde klar, dass meine Vision nicht das liefert, was sie brauchen.
Sie erhalten vielleicht 500 Likes für helle, verrückte Animationen einer Kartoffel oder einer Pizza, aber was wirklich wichtig ist, ist, dass Ihre Benutzer herausfinden, wie sie die Häufigkeit von Unternehmens-E-Mails verwalten oder ihre Performance-Analyse filtern können.
[- Dieser Beitrag wurde ursprünglich gepostet auf Mittel , erneut veröffentlicht mit der Genehmigung des Autors. -]