Entschuldigen Sie Ihre blutenden Augen, aber diese sind wichtig.

Methodik

50 Dinge, die Sie [wahrscheinlich] vergessen haben zu entwerfen

Jede PM: "Ich bin nicht sauer, ich bin nur enttäuscht ..."

Kleine Gefälligkeiten: Wenn Sie diesen Artikel lieben, teilen Sie ihn mit Ihren Freunden. Wenn Sie Welpen lieben, retten Sie einen. Wenn Sie Mayonnaise lieben, kühlen Sie sie.

Schauen Sie, wir alle vergessen, gelegentlich etwas zu entwerfen. Das ist total cool!

Nun, es ist nicht cool ... aber wie ... es ist okay. Es passiert. Diese Liste wird Sie besser machen. Oder zumindest bewusster. Oder vielleicht klatschen Sie einfach ein paar Mal, weil Sie erkennen, dass jemand Zeit damit verbracht hat, diese Liste zu kuratieren, und fahren Sie mit Ihrem Leben fort. Nbd. Mir geht es nur um diese Klatschen und diesen Bass. Mit einem Meghan Trainor-Hinweis im ersten Absatz geht es los.

Dies ist nur eine Liste von Dingen, die Sie möglicherweise vergessen haben zu entwerfen. Wenn Sie darüber nachdenken, wie einfach eine App wie Instagram oder Snapchat ist, können Sie leicht übersehen, wie viele Bildschirme, Statusinformationen und andere Elemente für eine wirklich beeindruckende Benutzererfahrung erforderlich sind.

  • Login & Registrierung
  • Erste Erfahrung
  • All die kleinen Dinge
  • Materialien starten
  • Profil Zeug
  • Mad Flows

Lesen Sie diese, überlegen Sie, und… wie… ärgern Sie Ihre PM nicht.

Einloggen Anmelden

1. Der Begrüßungsbildschirm

Der Bildschirm, der angezeigt wird, wenn Sie eine mobile App starten oder wenn Sie sich bei einer Web-App anmelden und alles geladen wird.

Hier ist ein wunderschönes von James Jackson

2. Der Passwortfluss

War es "abcd1234" oder "1234abcd"? Das ist wichtig. Vergiss es nicht.

Majo Puterka lässt seine Benutzer nicht im Regen aus dem Haus.

3. Die Seite „Vielen Dank für Ihre Anmeldung“

Dieser Bildschirm wird normalerweise angezeigt, nachdem ein Benutzer ein Konto erstellt hat und ihn auffordert, seine E-Mail-Adresse zu bestätigen.

Was kommt als nächstes? Fragen Sie Hayley Cattlin.

4. Die Begrüßungs-E-Mail

Dies ist die Grenze zwischen Produktdesign und Produktmarketing, aber es ist buchstäblich DER ERSTE Eindruck, den Sie auf Ihre Benutzer haben. Es zählen. Es ist eine großartige Zeit, um den schnellen Ton Ihres Produkts einzuführen.

Ich mag das sehr. Von Brian Golatka.

5. Die Nutzungsbedingungen und Datenschutzseiten (ugh)

Tun Sie es einfach für die Leute, die legal sind. Sie versuchen nur zu vermeiden, dass sie verklagt werden.

Ich weiß wirklich zu schätzen, wie Marko Prljic versucht hat, die Nutzungsbedingungen verständlicher zu gestalten.

Erste Erfahrung

6. Das User Onboarding

Es gibt Unmengen verschiedener Methoden, die Sie anwenden können. Hier sind fünf meiner Favoriten:

Herrlich hilfreich, von MuNa.

7. Der / die leere (n) Zustand (en) nach dem Auspacken

Es ist, als würden Sie in ein Haus einziehen und keine Möbel einziehen. Sieht ziemlich leer aus, oder? Helfen Sie Ihren Benutzern, indem Sie sie in die richtige Richtung lenken. "Platziere die Couch hier."

Ich habe das Gefühl, Veli-Johan Veromann mag Superhelden.

8. Die Hilfedokumente

Wenn Sie in einem großen Unternehmen arbeiten, gibt es wahrscheinlich ein ganzes Team, das sich diesem Thema widmet. Aber sie werden dich immer noch für Illustrationen und Screenshots nerven. Dies verdient ebenso viel (oder mehr) Mühe wie die Anmeldeseite oder der Aktivitäts-Feed.

Maya Gao ist sehr hilfreich. Sei mehr wie Maya.

9. Das Standardbenutzerprofilbild / Avatar

Das Anmelden bei sozialen Konten oder Diensten wie Gravatar hat uns wirklich geholfen, unsere lächelnden Gesichter zur Geltung zu bringen, aber Sie werden immer noch den einen finden, der nie dazu kommt, ein Profilfoto hochzuladen. Geben Sie ihm ein wenig Flair und zeigen Sie die Marke.

Hermes Strange macht süße Sachen. Das sind süße AF.

10. Die Schaltfläche Abmelden

Leider müssen Sie den Benutzern das Verlassen erlauben. Stellen Sie sich einfach vor, Sie verwenden Ihre App in einer öffentlichen Bibliothek und müssen sich abmelden, damit ein Fremder seinen Kontonamen nicht in "Mr." ändert. Hintern “. Unangemessen.

Ich vermute, Kristofer hat wahrscheinlich Henriks Essensgeld gestohlen. Lass ihn ausloggen und fliehen.

All die kleinen Dinge

11. Die App-Fußzeile

Die meiste Zeit nehme ich an, dass die Seiten nur für immer weitergehen, als die Leute glaubten, die Welt sei flach und einfach weiter. Hinweis: Die Erde ist nicht flach.

Ash Schweitzer könnte irgendwo im Wald verloren gehen. Jemand hilft ihr.

12. Das Browser-Favicon

Weißt du ... das kleine Symbol, das auf einem Browser-Tab angezeigt wird. Ich verliere immer wieder meine mittleren Tabs, da sie nicht mehr grün sind. Aber es ist hübsch!

Michael Flarup hat eine fantastische Favicon-Vorlage erstellt, die Sie herunterladen können.

13. Die 404 Seite

Rizvan steckt in diesem Loch fest. Geh und hilf ihr.

14. Die Standardeinstellung / Hover / Fokus / Gedrückt / Deaktiviert / usw. Eingabezustände

Ugh, so viele Staaten. "Focus + Hover" könnte mein Favorit / dunkelster sein. Der folgende Screenshot stammt aus dem UX Power Tools Design System.

Nebenbemerkung für mein Nebenprojekt, Sie sollten es auf jeden Fall überprüfen:

15. Die Tab-Reihenfolge

Die Tabulatorreihenfolge ist eine Eingabehilfenfunktion, mit der Benutzer mithilfe der Tabulatortaste auf einer Seite navigieren können. Ich konnte kein Bild finden, um dies darzustellen, also machte ich einen Screenshot einer Spezifikation, die Christian Beck aus dem Jahr 2007 schrieb, in der er für jedes UI-Steuerelement in einer Tabelle die Position der Tabulatorreihenfolge in einer Tabelle definierte (ich wurde es leid, auch nur zu schreiben, dass… SnoozeFest 2017 ™). Sie können tatsächlich die Reihenfolge definieren, in der Elemente besucht werden, um sicherzustellen, dass primäre Aktionen vor sekundären Aktionen ausgeführt werden. Dies ist eine ordentliche Designherausforderung.

Ahhh, die Tage des Schreibens von 80-Seiten-Spezifikationen und der Entwicklung von Wasserfällen.

16. Das Scrollverhalten

Nicht nur wo und wie gescrollt wird, sondern auch was tatsächlich gescrollt wird. Ist der Header behoben? Die Fußzeile?

Oh man, Peter Blazej, das fühlt sich glatt an. Nett!

17. Die Intercom-Taste

Ich meine, das Mindeste, was Sie tun können, ist, es an Ihre App-Farben anzupassen. Komm schon Leute. Es ist keine Raketenoperation.

Dies ist einfacher als eine Schüssel Müsli zu machen.

18. Die Paginierungsschaltflächen

Angenommen, Sie haben sich nicht für das unendliche Scrollen entschieden, müssen Ihre Benutzer einen Weg finden, um zu Seite 27 zu gelangen. Lassen Sie sie!

Borunda hat gute Arbeit geleistet. Lieben Sie dieses Gelb, Borunda!

19. Die Cursor

Schaltflächen sollten einen Zeiger haben. Nicht interaktive Inhalte sollten einen Standardcursor haben. Text sollte einen Textcursor haben. Entwickler wissen das nicht immer. Ich habe kürzlich einen App-Bildschirm überarbeitet, auf dem ein Entwickler einen Textcursor für den Schwebezustand einer Schaltfläche hatte. Barmherzig.

Jeff Broderick LIEBT es, Dinge anzuklicken. Er machte auch ein Werbegeschenk.

20. Die Tabellen-Sortier- / Filter- / Suchmechanismen

In der Datentabelle "Bands with Beards" muss es einen schnelleren Weg geben, um zu ZZ Top zu gelangen.

Eugen Esanu hat ein außergewöhnliches Auge für Filtermechanismen und lila / gelbe Combos. Nett.

21. Die leeren Zustände „Keine Ergebnisse“

Manchmal suchen Sie nach etwas oder fügen zu viele Filter hinzu. Es werden keine Ergebnisse angezeigt. Wie traurig. Muntere deine Benutzer mit einer frechen Illustration auf. Oder Ihr Bankkonto und Ihre Bankleitzahl.

Reiner Wendland hat so ziemlich alles für Zendesk abgedeckt.

22. Die Fehlerzustände

Schlechte Eingabe. Falsches Passwort. Bestehendes Konto. Zu viele Dinge ausgewählt. Es gibt viele Möglichkeiten, wie etwas schief gehen kann, besonders wenn Sie meine Oma sind und zu Weihnachten ein iPad haben. Das war ein Fehler.

Mike Stezycki hatte wirklich gedacht, dass eine E-Mail verschickt wurde. Dann war er alles:

23. Die Systembenachrichtigungen

Das System tut immer etwas hinter dem Vorhang, und manchmal ist es schön zu wissen, wann die Dinge erfolgreich abgeschlossen werden (oder nicht). Das sollten Sie dem Benutzer unbedingt mitteilen.

Dies ist aus dem Google-Posteingang. Das

24. Das Dropdown-Menü Leere Autovervollständigung

Autocomplete hilft Ihnen beim Auffinden von Objekten im System. Manchmal werden jedoch keine Ergebnisse erzielt. In diesem Fall möchten Sie nicht nur ein leeres Kästchen. Zeigen Sie eine kleine Nachricht, oder lassen Sie sie eine Aktion ausführen.

Offensichtlich hatte Jurriaan van Drunen noch kein

25. Der Ladezustand

Sicher, die Leute werden wahrscheinlich Tindering auf ihren Handys ausführen, während die Seite geladen wird, aber falls sie tatsächlich von ihrem erotischen Swiping aufblicken, sollte es wahrscheinlich einen visuellen Hinweis darauf geben, dass das Zeug noch geladen wird.

Nicht die beste Pan-Flip-Form, XPLAI. Üben Sie weiter. Aber das ist immer noch schmerzlich bezaubernd.

Materialien starten

26. Das Friggin-App-Symbol

Ja, es ist wahrscheinlich das Beste, dass Sie das nicht vergessen.

Ich bin bereit zu wetten, dass Eddie Lobanovskiy alle seine Symbole in Frühstücksnahrungsmittel geändert hat. Köstlich.

27. Die Bilder aus dem App Store

Daniel Beere hat den App Store für seine App nicht vergessen. High Five, Alter.

28. Die offene Grafik / soziale Bilder

Dies ist das Bild, das angezeigt wird, wenn Sie einen Link auf Twitter twittern, auf Facebook posten, einen Link auf Medium posten usw.

Kristy T ist offiziell fahrlässig. SF wird dir das antun.

So sieht es in Medium aus:

29. Die Website Marketing Images

Vergessen Sie auch nicht, dass die Website wahrscheinlich wie Stripe aussehen soll. Kopieren Sie einfach Folgendes:

Und wenn Sie Designer bei Redkix sind, müssen Sie sicherstellen, dass das Bild in Hochrot angezeigt wird.

30. Die Bilder des Verkaufsdecks

Du bist wahrscheinlich gut, wenn du mit dem oben genannten umgehst. In diesem Fall müssen Sie wahrscheinlich den Inhalt entsprechend der Marke des 6-stelligen Geschäfts, an dem Ihr brillantes Verkaufsteam arbeitet, bereinigen.

Oh, und der Verkauf wird wahrscheinlich alle Ihre Modelle mit anderen Dingen überdecken. Bereiten Sie sich also darauf vor.

31. Die Pitch Deck Bilder

Wie ein Sales Deck Image, aber ein bisschen visionärer. Ich meine ... Sie versuchen, Geld zu sammeln. Sie werden später herausfinden, wie dies möglich ist.

Hier ist ein Geschäftsgeheimnis. Platzieren Sie Dashboards immer in Ihrem Pitch-Deck.  Das ist kein Scherz.

32. Die Produktjagdbilder

Hey, sie haben auch gerade die Profilseiten aktualisiert!

Ich vermisse immer noch Medium 2.0, aber jedes Mal, wenn ich es bekomme, hilft es mir, weiterzumachen.

33. Die Facebook / Twitter-Werbebilder

"Aber wir schalten keine Facebook-Anzeigen!" Ha, bis Sie es sind. Und dann sagt es dir niemand. Machen Sie sie einfach schon und Sie werden sicher sein.

Um eine Anzeige zu finden, die NICHT für eine Casper-Matratze geeignet war, musste man etwas graben. Du bringst das Spiel um, Casper.

34. Die Social Media-Profilbilder

Ja, Sie müssen eine für alle 938 sozialen Netzwerke erstellen. Zum Glück haben wir ein Sketch-Tool erstellt, um dies für Sie zu beschleunigen. Y'welcome, Kiddos.

35. Das Start-E-Mail-Banner

Dreifache Punkte, wenn Sie es zu einer Illustration machen. Aktuell.

^ Übrigens, dies ist der Newsletter meiner Agentur, und meine Mitarbeiter schreiben einige wirklich herausragende Inhalte. Wir würden uns freuen, wenn Sie sich anmelden!

Hier sind einige aktuelle Favoriten:

Profil Zeug

36. Benachrichtigungseinstellungen

Es ist fantastisch, wenn Apps Sie benachrichtigen, wenn etwas passiert, und noch cooler, wenn ein Trompetenklang abgespielt wird. Aber nach dem 19. Mal werden Sie der Trompeten wirklich müde. Sie sollten den Benutzer wahrscheinlich entscheiden lassen, wann die Trompeten erklingen.

Slack wurde nicht zu einem 8-Milliarden-Dollar-Unternehmen, indem die Benachrichtigungseinstellungen gelockert wurden !! Geschafft.

37. Die Abrechnungsseite

Vergessen Sie nicht, dass die Leute Kopien ihrer Rechnungen benötigen, um das Produkt zu bezahlen, für das sie Ihnen Tausende von Dollar bezahlen. Und manche Leute bilden die idiotische IT-Abteilung für ihre Agentur und können es nicht ertragen, wie schwierig es ist, dies zu finden. jeden. Single. Monat. Er ist nicht bitter

Ich weiß nicht, was dies bedeutet, aber es war einfach, hierher zu kommen!

38. Die Option "Meinen Account löschen"

Richtig, ich weiß. Niemand wird das tun. Aber hey, vielleicht eröffnen sie eines Tages wieder ein neues Konto! Genau wie die Leute, die an einem Kiosk im Einkaufszentrum vorbeikommen und sagen: "Ich komme später wieder und kaufe drei!"

Dafür gibt es berechtigte Gründe, die positiv sind. Ich habe Konten gelöscht, als ich eine Lizenz für ein größeres Team erworben habe. Ich habe alte Accounts gelöscht, auf denen sich Staub angesammelt hat, und wollte neu anfangen. In jedem Fall ist es ein guter Kundenservice, dies auch zu einer guten Erfahrung zu machen.

Pssst, Herr Präsident, hier können Sie Ihr Konto deaktivieren.

39. Das Tool zum Zuschneiden von Profilfotos

Nun, dies ist ein Müllcontainer-Alptraumszenario für die meisten Apps und muss es nicht sein. Ich ließ mir von Christian einen Screenshot schicken, als er sein Profilbild in Beyoncé änderte.

Er konnte nicht einmal an diesem Bildschirm vorbeikommen, um zu zeigen, wie ein Foto beschnitten wurde. 2 von 10 Sternen. Würde keinen Ring draufsetzen.

40. Die Option / der Ablauf "Mein Konto aktualisieren"

Es verwirrt mich, wie schwierig dies für viele SaaS-Produkte ist. Sei ruhig und nimm mein Geld. Sollte das nicht einfach sein ?! Wie… DAS EINFACHSTE ?!

Buffer hat einen Menüpunkt zum Upgraden dann eine recht einfache Form. Bam. Du hast mein Geld. Gut gemacht, Buffer.

Mad Flows

Schließlich haben Sie alle vorherigen Dinge erledigt und denken, dass Sie zuhause frei sind - dann beginnen Sie buchstäblich, für den Tag nach Hause zu gehen, der stolz darauf ist, wie gut Sie auf dem Ball sind.

Dann, auf halbem Weg nach Hause, auf deinem Fixie, nimm Kombucha von deinem Kamelbäckchen und erinnere dich, dass die Entwicklung noch nicht wirklich begonnen hat! # $% @

Sobald die Entwicklung beginnt, werden Sie feststellen, dass das bloße Verspotten eines Bildschirms nicht wirklich die Geschichte erzählt (es ist cool, wir alle versuchen, faul zu sein). Entwickler müssen tatsächlich aufschlüsseln, wie die Benutzererfahrung von Bildschirm zu Bildschirm verläuft.

41. Der Ablauf "Meine Adresse ändern"

Sie wissen, wann Sie eine schicke neue Wohnung in der Innenstadt bekommen und müssen Ihre Adresse auf JEDER KREDITKARTE ändern, die SIE BESITZEN?

Dhaval S. Gandhi möchte sicherstellen, dass seine Aloe Vera an den richtigen Ort geliefert wird.

42. Der Ablauf "Kreditkarte hinzufügen"

Einige Leute (ähm, ich) möchten gerne 100 Kredit- / Debitkarten in den Akten haben, so dass Diebe viele Konten zur Auswahl haben. Machen Sie es sich einfach, Karten hinzuzufügen. Das ist wirklich alles, was ich dazu zu sagen habe.

Das sieht viel zu real aus, Carlos Medina. Ich habe gerade ein paar neue Schuhe gekauft und es hat keinen Cent gekostet!

43. Der Flow "Bulk Add"

Es ist eine Sache, ein Objekt schnell in das System einzufügen, aber eine ganz andere Sache, ein Bündel von Objekten schnell in das System einzufügen.

Bitte, Sir, darf ich noch mehr haben?

44. Der Flow "Benutzerdefinierten Filter erstellen"

Wenn Sie eine ausgefeilte Filterung zulassen, ist es möglicherweise hilfreich, die Möglichkeit hinzuzufügen, diesen komplizierten Filter für einen späteren Zeitpunkt zu speichern. Auf diese Weise müssen Sie nicht noch einmal millionenfach klicken.

Oykun Yilmaz könnte noch einen Schritt weiter gehen, indem der Benutzer diesen Filter speichern kann. Mach es, Oykun!

45. Der Ablauf „In den Warenkorb“

Es ist lustig zu denken, dass die Leute diesen Fluss vergessen, aber du weißt… ich bin einer dieser Leute. Halte den Mund, halt den Rand, Halt die Klappe.

Anscheinend brauchte Alberto Conti 4 Stühle und 4 Beistelltische. Muss ein großes Haus sein ...

46. ​​Der „Share This“ -Fluss

Online-Sharing ist mittlerweile allgegenwärtig, aber das bedeutet nicht, dass es bereits für Sie entwickelt wurde. Umso mehr Grund, sich damit zu beschäftigen.

Tomek Kwiatkowski weiß wirklich, wie man sozial wird.

47. Der Flow „Aus vorhandenen Daten erstellen“

Dies ist wie "Duplizieren + Bearbeiten" in einer Aktion. Grundsätzlich kann der Benutzer von einem vorhandenen Objekt ausgehen und es nach Bedarf aktualisieren.

Kyle Johnston schreibt eine Menge Skripte. Vielleicht heimlich Christopher Nolan?

48. Der Flow "Jemanden einladen"

Es gibt keinen besseren Weg, um Ihrem Produkt eine gewisse „Viralität“ zu verleihen, als durch Einladungen und Weitergaben. Ich schaue dich an Dribbble. Stellen Sie sicher, dass es einfach, schnell und unterhaltsam ist!

Ich denke Paula Pintaric und Christine fliegen. Oder sie arbeiten an einem Projekt und sehen zu, wie andere Leute fliegen. Das ist schlimmer.

49. Der Ablauf "Benutzerberechtigungen ändern"

Kennst du den Typen Greg? Weißt du, wie er alles vermasselt, was er berührt? Ja, Sie möchten möglicherweise einige von Gregs Berechtigungen widerrufen, nur damit er nicht das gesamte Internet löscht. Dummer Greg.

Andererseits Matt Shwery ... viel weniger ein Knöchel als Greg.

50. Der Flow "Löschen und Wiederherstellen"

Sie wissen, wann Sie etwas SUPER Wichtiges löschen und müssen es sofort zurückbekommen? Nein? In Ordung.

Eric Tsai versteht, dass wir alle Fehler machen.

BONUS # 51. Animationen

Vollständige Offenlegung, diese habe ich eigentlich selbst vergessen. Ich liebe Animationen, aber ich bin froh, wenn wir den Luxus haben, diese zu erstellen, wenn der Vertrieb gestern einen Prototypen haben möchte, und die Entwicklung auf etwas hinweist, das ich in meiner achten Iteration der Zielseite völlig verpasst habe. Und ehrlich gesagt, wenn wir überhaupt mit Animationen zu tun haben, schaue ich mir Dribbble oder CodePen an und sende etwas, das ich gerne entwickle, und sage: "Mach es so!" Bin ich

Ich bin nicht.

Zusammenfassung

Sie schreiben wahrscheinlich wütend eine Liste mit allem, was ich für diesen Artikel vergessen habe. Fühlen Sie sich frei, mich freundlich in den Kommentaren zu erinnern. Designer müssen sich beim Entwerfen von MVP-Produkten etwa eine Million Dinge merken oder umfangreiche Funktionen für eine Unternehmenssoftwareplattform. Hoffentlich kann dies zumindest eine nützliche Referenz sein, um Sie an Ihr nächstes Projekt zu erinnern.

Wenn ich mich nicht an jede Kleinigkeit erinnern möchte (sie ist magisch), arbeite ich bei UX Power Tools an Skizzendesign-Tools, um Sie zu einem besseren und effizienteren Designer zu machen. Hier können Sie mehr erfahren:

Folgen Sie UX Power Tools auf Twitter
Folge mir auf Twitter