Undskyld for dine blødende øjne, men disse er vigtige.

Metode

50 ting, du [sandsynligvis] glemte at designe

Hver PM: "Jeg er ikke gal, jeg er bare skuffet ..."

Små favoriser: Hvis du elsker denne artikel, skal du dele den med dine venner. Hvis du elsker hvalpe, skal du redde en. Hvis du elsker mayonnaise, skal du køle den i køleskab.

Se, vi glemmer alle at designe noget lejlighedsvis. Det er helt cool!

Det er ikke cool… men ligesom… det er okay. Det sker. Denne liste vil gøre dig bedre. Eller i det mindste mere opmærksom. Eller måske giver du det bare et par klapper, fordi du genkender nogen brugt tid på at kuratere denne liste og gå videre med dit liv. NBD. Jeg handler om de klapper, og den bas. Med en Meghan Trainor-reference i første afsnit er vi i gang med en brølende start.

Dette er bare en liste over ting, som du måske har glemt at designe. Når du tænker over, hvor simpelt en app som Instagram eller Snapchat er, er det let at overse, hvor mange skærme, tilstande og sånt der går ind for at skabe en virkelig fantastisk brugeroplevelse.

  • Login & Tilmeld ting
  • Første oplevelse
  • Alle de små ting
  • Start materialer
  • Profilmateriale
  • Mad Flows

Så læs disse, reflekter og ... ligesom ... ikke forstyrre din premierminister.

Log ind / Tilmeld

1. Splash-skærmen

Skærmen, der vises, når du starter en mobilapp, eller når du logger ind på en webapp, og alting indlæses.

Her er en smuk af James Jackson

2. Flowet til glemt kodeord

Var det “abcd1234” eller “1234abcd”? Dette er vigtigt. Glem det ikke.

Majo Puterka forlader ikke sine brugere låst uden for huset i regnen.

3. Siden "Tak for tilmelding"

Denne skærm kommer normalt efter, at en bruger opretter en konto og beder dem om at gå til at bekræfte deres e-mail-adresse.

Hvad er det næste? Spørg Hayley Cattlin.

4. Velkomst-e-mailen

Dette strækker sig mellem linjen mellem produktdesign og produktmarketing, men det er bogstaveligt talt DET FØRSTE indtryk, du får på dine brugere. Lad det tælle. Det er et dejligt tidspunkt at introducere den usædvanlige tone i dit produkt.

Jeg kan virkelig lide dette. Af Brian Golatka.

5. Servicevilkår og personlige sider (ugh)

Bare gør det for folk i juridisk. De prøver bare at undgå at blive sagsøgt.

Jeg værdsætter virkelig, hvordan Marko Prljic forsøgte at gøre Vilkår og Betingelser mere tilgængelige.

Første oplevelse

6. Brugeren Onboarding

Der er mange forskellige metoder, du kan bruge. Her er fem af mine favoritter:

Dejligt hjælpsom af MuNa.

7. Tom-out-the-box tom tilstand

Det er som at flytte ind i et hus, og du har ikke flyttet ind møbler. Ser temmelig tom ud, ikke? Hjælp dine brugere ved at give dem et skub i den rigtige retning. “Placer sofa her.”

Jeg får en følelse af, at Veli-Johan Veromann kan lide superhelte.

8. Hjælpedokumenterne

Hvis du er i et stort firma, er der sandsynligvis et helt team dedikeret til dette. Men de vil stadig bugne dig til illustrationer og skærmbilleder. Dette fortjener lige så meget (eller mere) indsats som login-siden eller aktivitetsfeeden.

Maya Gao er meget hjælpsom. Bliv mere ligesom Maya.

9. Standardbrugerprofilbillede / Avatar

Tilmelding til sociale konti eller tjenester som Gravatar har virkelig hjulpet os med at vise vores smilende ansigter, men du får stadig den ene fyr, der aldrig kommer rundt for at uploade et profilbillede. Giv det en lille flair, og vis mærket.

Hermes Strange laver søde ting. Disse er søde AF.

10. Log-ud-knappen

Desværre skal du give brugerne mulighed for at forlade. Bare lade som om de bruger din app i et offentligt bibliotek, og de er nødt til at logge ud, så en fremmed ikke ændrer deres kontonavn til “Mr. Butts”. Upassende.

Jeg gætter på, at Kristofer sandsynligvis stjal Henriks frokostpenge. Lad ham logge ud og flygte fra scenen.

Alle de små ting

11. Appens sidefod

Det meste af tiden antager jeg, at sider bare fortsætter for evigt, ligesom når folk troede, at verden var flad og bare slags vedvarende. Bemærk: Jorden er ikke flad.

Ash Schweitzer kan være tabt i skoven et eller andet sted. Nogen hjælper hende.

12. Browserfavicon

Du ved ... det lille ikon, der vises på en browserfane. Jeg mister hele tiden mine Medium faner, fordi de ikke er grønne mere. Men det er smukt!

Michael Flarup lavede en fantastisk favicon skabelon, du kan downloade.

13. 404-siden

Rizvan sidder fast i det hul. Gå hjælp hende.

14. Standard / markør / fokus / tryk / deaktiveret / osv. Inputstater

Ugh, så mange stater. “Focus + Hover” er måske min favorit / mest uklar. Screenshotet nedenfor kommer fra UX Power Tools Design System.

Side note til mit sideprojekt, du skal bestemt tjekke det ud:

15. Fanebladet

Tab-ordre er en tilgængelighedsfunktion, der giver brugerne mulighed for at navigere på en side ved hjælp af Tab-tasten. Jeg kunne ikke finde et billede til at repræsentere dette, så jeg tog et skærmbillede af et spec, Christian Beck skrev fra 2007, hvor han definerede fanebladets placering i en tabel for hver UI-kontrol i en tabel (jeg blev træt, selv bare at skrive det ... SnoozeFest 2017 ™). Du kan faktisk definere den rækkefølge, hvor elementer besøges for at sikre, at primære handlinger kommer før sekundære. Dette er en pæn designudfordring.

Ahhh, dagene med skrivning af 80-siders specifikationer og vandfaldsudvikling.

16. Rulningsadfærd

Ikke kun hvor og hvordan det ruller, men hvad der faktisk ruller. Er overskriften fast? Sidefoden?

Åh mand, Peter Blazej, dette føles glat. Pæn!

17. Intercom-knappen

Jeg mener, at det mindste, du kan gøre, er at få det til at matche dine appfarver. Kom nu folk. Det er ikke raketkirurgi.

Dette er lettere end at lave en skål med korn.

18. Paginationsknapperne

Hvis du antager, at du ikke har valgt uendelig rulle, har dine brugere brug for en måde at komme til side 27. Lad dem!

Borunda gjorde et godt stykke arbejde. Elske den gule, Borunda!

19. Markørerne

Knapperne skal have en markør. Ikke-interaktive ting skal have en standardmarkør. Tekst skal have en tekstmarkør. Udviklere ved det ikke altid. Jeg har netop omdirigeret en appskærm forleden, hvor en udvikler havde en tekstmarkør til musens hovertilstand. Barmhjertighed.

Jeff Broderick ELSKER at klikke på ting. Han lavede også en freebie.

20. Tabellen Sorter / filtrer / søgemekanisme (r)

Der skal være en hurtigere måde at komme til ZZ Top i den datatabel "Bands with Beards" ...

Eugen Esanu har et enestående øje for filtreringsmekanismer og lilla / gule kombinationer. Pæn.

21. "Ingen resultater" tomme stater

Undertiden søger du efter noget eller tilføjer for mange filtre, og der er ingen resultater. Hvor trist. Opmuntr dine brugere med en fræk illustration. Eller din bankkonto og routingnumre.

Reiner Wendland dækkede stort set alt for Zendesk.

22. Fejltilstandene

Dårligt input. Forkert kodeord. Eksisterende konto. For mange valgte ting. Der er forskellige slags måder ting kan gå galt på, især hvis du er min bedstemor og du har en iPad til jul. Det var en fejltagelse.

Mike Stezycki havde virkelig tænkt på, at e-mail blev sendt. Så var han alt::

23. Systemunderretninger

Systemet gør altid noget bag gardinet, og sommetider er det dejligt at vide, hvornår ting slutter med succes (eller ikke). Du skal bestemt fortælle brugeren det.

Dette er fra Google Indbakke.

24. Dropdown-funktionen Tom autofuldfør

Autofuldførelse er fantastisk til at hjælpe dig med at finde objekter i systemet, men nogle gange er der ingen resultater. I dette tilfælde ønsker du ikke bare et tomt felt. Vis en lille besked, eller lad dem tage en slags handling.

Jurriaan van Drunen havde tilsyneladende ikke allerede ”BH” i sine kontakter. Sandsynligvis til det bedste.

25. Indlæsningsstaten

Sikker på, folk vil sandsynligvis vippe på deres telefoner, mens siden indlæses, men i tilfælde af at de faktisk kigger op fra deres sexede svejse, skal der sandsynligvis være visuel indikation af, at ting stadig indlæses.

Ikke den bedste pan flip form, XPLAI. Fortsæt med at øve. Men dette er stadig smerteligt sød.

Start materialer

26. Friggin-appikonet

Ja, det er sandsynligvis bedst, at du ikke glemmer dette.

Jeg er villig til at satse Eddie Lobanovskiy ændrede alle hans ikoner til morgenmad. Lækker.

27. Billeder af App Store

Daniel Beere glemte ikke app store-billederne til sin app. High five, fyr.

28. Den åbne graf / sociale billeder

Dette er det billede, der dukker op, når du tweeter et link på Twitter, opretter et indlæg på Facebook, lægger et link på Medium osv. ...

Kristy T er officielt uforsigtig. SF vil gøre det for dig.

Sådan ser det ud i Medium:

29. Billeder af webstedets markedsføring

Glem heller ikke, de vil sandsynligvis få webstedet til at se ud som Stripe, så bare kopier dette nøjagtigt:

Og hvis du er en designer hos Redkix, skal du sørge for, at billedet fungerer på crimson.

30. Billeder af salgsdæk

Du er sandsynligvis god, hvis du håndterer ovenstående. Men i dette tilfælde bliver du sandsynligvis nødt til at skrubbe indhold for at matche mærket til den 6-cifrede aftale, som dit strålende salgsteam arbejder på.

Åh, og salget vil sandsynligvis dække alle dine mockups med andre ting, så forbered dig på det.

31. The Pitch Deck-billeder

Som et Sales Deck-billede, men lidt mere visionært. Jeg mener ... du prøver at skaffe penge. Du kan finde ud af, hvordan du gør det muligt senere.

Her er en handelshemmelighed, altid læg instrumentpaneler i dit pitch deck.  Dette er ikke en vittighed.

32. Billederne til produktjagt

Hej, de har lige opdateret profilsiderne!

Jeg savner stadig Medium 2.0, men hver  jeg  får  hjælper  mig med at komme videre.

33. Billeder fra Facebook / Twitter-annoncen

”Men vi kører ikke Facebook-annoncer!” Ha, indtil du er det. Og så fortæller ingen dig det. Bare lav dem allerede, så vil du være i sikkerhed.

Det tog noget at grave for at finde en annonce, der IKKE var en Casper-madras. Du dræber spillet, Casper.

34. Billeder af sociale medier

Jej, du skal lave en til alle 938 sociale netværk. Heldigvis lavede vi et sketseværktøj til at fremskynde det for dig. Velkommen, kiddos.

35. Start-e-mail-banneret

Triple point, hvis du gør det til en illustration. Nuværende.

^ Forresten, dette er min agenturs nyhedsbrev, og mine kolleger skriver noget virkelig fremragende indhold. Vi ville elske det, hvis du abonnerer!

Her er nogle nylige favoritter:

Profilmateriale

36. Indstillinger for anmeldelse

Det er fantastisk, når apps giver dig besked, når ting sker, og endnu køligere, når det spiller en trompetlyd. Men efter den 19. gang bliver du virkelig træt af trompeter. Du skal sandsynligvis lade brugeren bestemme, hvornår trompeterne lyder.

Slack blev ikke et selskab på 8 milliarder dollars ved at slappe af underretningsindstillinger !! Spikede den.

37. Faktureringssiden

Glem ikke, at folk er nødt til at få kopier af deres regninger for at koste det produkt, de betaler dig tusinder af dollars for. Og nogle mennesker udgør den idiot IT-afdeling til deres agentur og kan ikke stå, hvor svært det er at finde dette. hver. enkelt. måned. Han er ikke bitter.

Jeg ved ikke, hvad noget af dette betyder, men det var let at komme hit!

38. Valgmuligheden "Slet min konto"

Det ved jeg. Ingen vil gøre dette. Men hey, måske starter de en ny konto igen en dag! Ligesom de mennesker, der passerer en kiosk i indkøbscentret og siger "Jeg kommer senere og køber tre!"

Der er legitime grunde til dette, som er positive. Jeg har slettet konti, da jeg blev fusioneret til en større teamlicens. Jeg har slettet gamle konti, der indsamlede støv, og jeg ville gerne starte med nyt. Under alle omstændigheder er det god kundeservice at gøre dette til en god oplevelse.

Pssst, hr. Formand, du kan deaktivere din konto her.

39. Værktøjet til beskæring af profilbilleder

Dette er et dumpster-brand mareridt-scenarie for de fleste apps, og det behøver ikke være det. Jeg fik Christian sendt et skærmbillede fra tidligere, da han ændrede sit profilbillede til Beyoncé.

Han kunne ikke engang komme forbi denne skærm for at vise, hvordan det beskæres et foto. 2 ud af 10 stjerner. Ville ikke lægge en ring på det.

40. Option / flow for “Opgrader min konto”

Det svækker mig, hvor svært dette er for mange SaaS-produkter. Hold kæft og tag mine penge. Bør det ikke være let ?! Ligesom ... DET NESTE ?!

Buffer har et menupunkt, der skal opgraderes, derefter en ret simpel form. Bam. Du har mine penge. Vejen at gå, buffer.

Mad Flows

Til sidst er du færdig med alle de foregående ting og tror, ​​at du er hjemme fri - så begynder du bogstaveligt talt at gå hjem for dagen stolt over, hvordan på bolden du er.

Derefter halvvejs hjemme på din fixie, hvor du nipper kombucha fra din kamelbak, kan du huske, at udviklingen ikke er startet endnu! # $% @

Når udviklingen starter, vil du begynde at indse, at bare hån på en skærm ikke virkelig fortæller historien (det er sejt, vi prøver alle at være doven). Udviklere har brug for dig for faktisk at nedbryde, hvordan en brugeroplevelse flyder fra skærm til skærm.

41. Flowet "Skift min adresse"

Ved du, når du får en snacks ny lejlighed i centrum, og du skal ændre din adresse på HVER KREDITKORT, du nogensinde har haft?

Dhaval S. Gandhi vil sikre sig, at hans Aloe Vera bliver sendt til det rigtige sted.

42. Flowet "Tilføj et kreditkort"

Nogle mennesker (ahem, mig) kan lide at opbevare som hundrede kredit- / betalingskort på filen, så tyvene har masser af konti at vælge imellem. Så gør det let at tilføje kort. Det er virkelig alt, hvad jeg har at sige om det.

Dette ser alt for rigtigt ud, Carlos Medina. Uafhængigt af det, købte jeg lige nogle nye sko, og det kostede ikke en krone!

43. Flowet "Bulk Add"

Det er en ting at gøre det hurtigt at tilføje et objekt til systemet, men det er en helt anden ting at gøre det hurtigt at tilføje et BUNCH OF OBJECTS til systemet.

Vær venlig, sir, må jeg have noget mere?

44. Flowet "Opret et brugerdefineret filter"

Hvis du tillader sofistikeret filtrering, kan det være rart at tilføje muligheden for at gemme dette komplicerede filter til senere. På den måde behøver du ikke klikke en million gange igen.

Oykun Yilmaz kunne tage dette et skridt videre ved at give brugeren mulighed for at gemme dette filter. Gør det, Oykun!

45. Flowet "Føj til indkøbskurv"

Det er lidt sjovt at tro, at folk glemmer denne strøm, men du ved ... Jeg er en af ​​disse mennesker. Hold kæft.

Alberto Conti havde tilsyneladende brug for 4 stole og 4 sideborde. Skal være et stort hus ...

46. ​​Flowet "Del dette"

Deling er blevet temmelig allestedsnærværende online, men det betyder ikke, at det allerede er designet til dig. Så meget mere grund til at bruge lidt tid på denne.

Tomek Kwiatkowski ved virkelig hvordan man bliver social.

47. Flowet "Opret fra eksisterende"

Dette ligner "Duplicate + Edit" alt sammen i en handling. Grundlæggende er brugeren i stand til at starte fra et eksisterende objekt og opdatere det efter behov.

Kyle Johnston skriver MEGET manuskripter. Måske i hemmelighed Christopher Nolan?

48. Floden "Inviter nogen"

Der er ingen bedre måde at tilføje noget "virality" til dit produkt end gennem invitationer og deling. Ser på dig Dribbble. Sørg for, at det er let, hurtigt og sjovt!

Jeg tror Paula Pintaric og Christine rejser. Eller de arbejder på et projekt og ser andre mennesker flyve. Det er værre.

49. Flowet "Skift brugertilladelser"

Kender du den fyr Greg? Ved du, hvordan han skruer op alt, hvad han rører ved? Ja, du ønsker måske at tilbagekalde nogle af Greg's privilegier, bare så han ikke sletter hele Internettet. Fjollet Greg.

Matt Shwery, på den anden side ... langt mindre af et knudehode end Greg.

50. Flowet "Slet og gendan"

Ved du, når du sletter noget SUPER vigtigt og har brug for at få det tilbage med det samme? Ingen? I orden.

Eric Tsai forstår, at vi alle begår fejl.

BONUS # 51. Animationer

Fuld offentliggørelse, jeg glemte faktisk dem selv. Se, jeg elsker animationer, men jeg er heldig, hvis vi har luksusen til at opbygge disse, når salget ønsker en prototype udført i går, og udviklingen peger på noget, jeg helt savnede i min 8. iteration af destinationssiden. Og ærligt talt, hvis vi overhovedet kommer til animationer, læser jeg bare Dribbble eller CodePen og sender noget, jeg gerne vil fortælle, og siger: ”Gør det sådan!” Kidding. Er jeg det?

Jeg er ikke.

Resumé

Du skriver sandsynligvis rasende en liste over alt, hvad jeg har glemt til denne artikel. Du er velkommen til at minde mig venligst i kommentarerne. Designere har cirka en million ting at huske, når de designer MVP-produkter eller store funktioner til en virksomhedssoftwareplatform. Forhåbentlig kan dette i det mindste være en praktisk henvisning til at minde dig om dit næste projekt.

Når jeg ikke prøver at huske enhver lille ting (hun er magi), arbejder jeg på Sketch design-værktøjer hos UX Power Tools for at gøre dig til en bedre og mere effektiv designer. Du kan lære mere her:

Følg UX Power Tools på Twitter
Følg mig på Twitter