Ci scusiamo per i tuoi occhi sanguinanti, ma questi sono importanti.

Metodologia

50 cose che [probabilmente] hai dimenticato di progettare

Ogni PM: "Non sono pazzo, sono solo deluso ..."

Piccoli favori: se ami questo articolo, condividerlo con i tuoi amici. Se ami i cuccioli, salvane uno. Se ami la maionese, refrigerala.

Senti, tutti dimentichiamo di progettare qualcosa in occasione. È assolutamente fantastico!

Beh, non è bello ... ma come ... va bene. Succede. Questo elenco ti renderà migliore. O almeno più consapevole. O forse gli dai solo un paio di applausi perché riconosci qualcuno che ha passato del tempo a curare questo elenco e ad andare avanti con la tua vita. NBD. Mi occupo solo di quegli applausi e di quel basso. Con un riferimento a Meghan Trainor nel primo paragrafo, partiamo per un ruggito inizio.

Questo è solo un elenco di cose che potresti aver dimenticato di progettare. Quando pensi a quanto sia semplice un'app come Instagram o Snapchat, è facile trascurare solo quanti schermi, stati e cose vanno a creare un'esperienza utente davvero fantastica.

  • Accedi e registrati
  • Prima esperienza
  • Tutte le piccole cose
  • Lancia materiali
  • Profilo
  • Mad Flows

Quindi leggi questi, rifletti e ... come ... non turbare il tuo PM.

Entra registrati

1. La schermata iniziale

La schermata che viene visualizzata all'avvio di un'app mobile o quando si accede a un'app Web e tutto viene caricato.

Eccone uno bellissimo di James Jackson

2. Il flusso della password dimenticata

Era "abcd1234" o "1234abcd"? Questo è importante. Non dimenticarlo.

Majo Puterka non lascia i suoi utenti chiusi fuori di casa sotto la pioggia.

3. La pagina "Grazie per esserti iscritto"

Questa schermata di solito viene dopo che un utente crea un account e dice loro di andare a confermare il loro indirizzo e-mail.

Qual'è il prossimo? Chiedi a Hayley Cattlin.

4. L'email di benvenuto

Questo è a cavallo tra la progettazione del prodotto e il marketing del prodotto, ma è letteralmente LA PRIMA impressione che puoi avere sui tuoi utenti. Fallo valere. È un ottimo momento per introdurre il tono più tranquillo del tuo prodotto.

Mi piace molto questo. Di Brian Golatka.

5. Termini di servizio e pagine sulla privacy (ugh)

Fallo solo per le persone legali. Stanno solo cercando di evitare di essere citati in giudizio.

Apprezzo molto il modo in cui Marko Prljic ha cercato di rendere più accessibili i Termini e condizioni.

Prima esperienza

6. L'utente a bordo

Ci sono tonnellate di metodi diversi che puoi usare. Ecco cinque dei miei preferiti:

Deliziosamente utile, di MuNa.

7. Lo / gli stato / i vuoto / i pronto all'uso

È come trasferirsi in una casa e non ti sei trasferito in nessun mobile. Sembra piuttosto vuoto, eh? Aiuta i tuoi utenti dando loro una spinta nella giusta direzione. "Metti qui il divano."

Ho la sensazione che a Veli-Johan Veromann piacciano i supereroi.

8. I documenti di aiuto

Se sei in una grande azienda, probabilmente c'è un'intera squadra dedicata a questo. Ma ti infastidiranno comunque per illustrazioni e schermate. Ciò merita lo sforzo (o più) della pagina di accesso o del feed delle attività.

Maya Gao è molto utile. Sii più simile a Maya.

9. Immagine / avatar del profilo utente predefinito

La registrazione con account social o servizi come Gravatar ci ha davvero aiutato a mostrare le nostre facce sorridenti, ma avrai comunque quel tizio che non riesce mai a caricare una foto del profilo. Dai un tocco di classe e mostra il marchio.

Hermes Strange crea cose carine. Questi sono AF simpatici.

10. Il pulsante di logout

Sfortunatamente, devi consentire agli utenti di andarsene. Fingi solo che stiano usando la tua app in una biblioteca pubblica e devono disconnettersi, quindi alcuni sconosciuti non cambiano il nome del loro account in "Mr. Butts”. Non appropriato.

Immagino che Kristofer probabilmente abbia rubato i soldi per il pranzo di Henrik. Lascialo uscire e fuggire dalla scena.

Tutte le piccole cose

11. Il piè di pagina dell'app

Il più delle volte presumo che le pagine continuino per sempre, come quando la gente credeva che il mondo fosse piatto e continuava a funzionare. Nota: la Terra non è piatta.

Ash Schweitzer potrebbe essere perso nei boschi da qualche parte. Qualcuno l'aiuta.

12. Il browser Favicon

Sai ... quella piccola icona che appare in una scheda del browser. Continuo a perdere le mie schede Medium perché non è più verde. Ma è carino!

Michael Flarup ha creato un fantastico modello favicon che puoi scaricare.

13. La pagina 404

Rizvan è bloccato in quel buco. Vai ad aiutarla.

14. L'impostazione predefinita / Hover / Focus / Premuto / Disabilitato / Ecc. Stati di input

Ugh, così tanti stati. "Focus + Hover" potrebbe essere il mio preferito / il più oscuro. Lo screenshot seguente proviene dal sistema di progettazione di UX Power Tools.

Nota a margine per il mio progetto secondario, dovresti assolutamente provarlo:

15. L'ordine di tabulazione

Tab Order è una funzione di accessibilità che consente agli utenti di navigare in una pagina utilizzando il tasto Tab. Non sono riuscito a trovare un'immagine che lo rappresentasse, quindi ho preso uno screenshot di una specifica scritta da Christian Beck dal 2007 in cui ha definito la posizione dell'ordine di tabulazione in una tabella per ciascun controllo dell'interfaccia utente in una tabella (mi sono stancato anche solo scrivendo che ... SnoozeFest 2017 ™). Puoi effettivamente definire l'ordine in cui gli oggetti vengono visitati per garantire che le azioni primarie vengano prima di quelle secondarie. Questa è una bella sfida di design.

Ahhh, i tempi in cui scrivevo le specifiche di 80 pagine e lo sviluppo delle cascate.

16. Il comportamento a scorrimento

Non solo dove e come scorre, ma cosa scorre realmente. L'intestazione è stata riparata? Il piè di pagina?

Oh amico, Peter Blazej, questo sembra liscio. Bello!

17. Il pulsante interfono

Voglio dire che il minimo che puoi fare è adattarlo ai colori della tua app. Forza gente. Non è un razzo.

Questo è più facile che preparare una ciotola di cereali.

18. I pulsanti dell'impaginazione

Supponendo che tu non abbia optato per lo scrolling infinito, i tuoi utenti avranno bisogno di un modo per arrivare a pagina 27. Lasciali!

Borunda ha fatto un buon lavoro. Adoro quel giallo, Borunda!

19. I cursori

I pulsanti dovrebbero avere un puntatore. Le cose non interattive dovrebbero avere un cursore predefinito. Il testo dovrebbe avere un cursore di testo. Gli sviluppatori non lo sanno sempre. L'altro giorno ho appena ridisegnato una schermata dell'app in cui uno sviluppatore aveva un cursore di testo per lo stato al passaggio del mouse di un pulsante. Misericordia.

Jeff Broderick ADORA fare clic sulle cose. Ha anche fatto un omaggio.

20. I meccanismi di ordinamento / filtro / ricerca della tabella

Ci deve essere un modo più veloce per arrivare a ZZ Top nella tabella dei dati "Bands with Beards" ...

Eugen Esanu ha un occhio eccezionale per i meccanismi di filtraggio e le combo viola / gialle. Bello.

21. Gli stati vuoti "Nessun risultato"

A volte cerchi qualcosa o aggiungi troppi filtri e non ci sono risultati. Che triste. Rallegrare i tuoi utenti con un'illustrazione sfacciata. O il tuo conto bancario e i numeri di routing.

Reiner Wendland ha praticamente coperto tutto per Zendesk.

22. Gli stati di errore

Input errato. Password errata. Account esistente. Troppe cose selezionate. Esistono molti modi in cui le cose possono andare storte, in particolare se sei mia nonna e hai un iPad per Natale. È stato un errore.

Mike Stezycki mi ha davvero fatto pensare che l'e-mail fosse stata inviata. Quindi era tutto:

23. Le notifiche di sistema

Il sistema fa sempre qualcosa dietro al sipario, e talvolta è bello sapere quando le cose finiscono con successo (o non lo fanno). Dovresti assolutamente farlo sapere all'utente.

Questo proviene da Google Inbox.

24. Il menu a discesa del completamento automatico vuoto

Il completamento automatico è fantastico per aiutarti a trovare oggetti nel sistema, ma a volte non ci sono risultati. In questo caso, non vuoi solo una scatola vuota. Mostra un piccolo messaggio o consenti loro di intraprendere qualche tipo di azione.

Apparentemente Jurriaan van Drunen non aveva già

25. Lo stato di caricamento

Certo, le persone probabilmente saranno Tindering sui loro telefoni mentre la pagina si carica, ma nel caso in cui alzino lo sguardo dal loro passaggio sexy, probabilmente ci dovrebbe essere qualche indicazione visiva che le cose stanno ancora caricando.

XPLAI non è il miglior formato di capovolgimento della panoramica. Continuare a praticare. Ma questo è ancora dolorosamente adorabile.

Lancia materiali

26. L'icona dell'app di Friggin

Sì, probabilmente è meglio non dimenticartene.

Sono disposto a scommettere che Eddie Lobanovskiy ha cambiato tutte le sue icone in cibi per la colazione. Delizioso.

27. Immagini dell'App Store

Daniel Beere non ha dimenticato le immagini dell'app store per la sua app. Il cinque, amico.

28. Il grafico aperto / Immagini sociali

Questa è l'immagine che appare quando twitti un link su Twitter, fai un post su Facebook, pubblichi un link su Medium, ecc ...

Kristy T è ufficialmente disinteressata. SF lo farà a te.

Ecco come appare in Medium:

29. Le immagini di marketing del sito Web

Inoltre, non dimenticare, probabilmente vorranno rendere il sito web simile a Stripe, quindi copia esattamente questo:

E se sei un designer di Redkix, dovrai assicurarti che l'immagine funzioni in rosso.

30. Immagini del mazzo di vendita

Probabilmente sei bravo se gestisci quello sopra. Ma in questo caso probabilmente dovrai scrubare i contenuti per abbinare il marchio di qualsiasi affare a 6 cifre su cui il tuo brillante team di vendita sta lavorando.

Oh, e le vendite probabilmente copriranno tutti i tuoi modelli con altre cose, quindi preparati per questo.

31. The Pitch Deck Immagini

Come un'immagine del Sales Deck ma un po 'più visionaria. Voglio dire ... stai cercando di raccogliere fondi. Capirai come renderlo possibile in seguito.

Ecco un segreto commerciale, metti sempre i cruscotti nel tuo mazzo di lancio.  Questo non è uno scherzo.

32. Le immagini di caccia al prodotto

Ehi, hanno appena aggiornato anche le pagine del profilo!

Mi manca ancora Medium 2.0 ma ogni  che ottengo  aiuta  me ad andare avanti .

33. Le immagini degli annunci di Facebook / Twitter

"Ma non pubblichiamo annunci su Facebook!" Ah, finché non lo sei. E poi nessuno te lo dice. Fallo già e sarai al sicuro.

Ci sono voluti alcuni scavi per trovare un annuncio che NON ERA per un materasso Casper. Stai uccidendo il gioco, Casper.

34. Le immagini del profilo dei social media

Sì, devi crearne uno per tutti i 938 social network. Per fortuna, abbiamo creato uno strumento di schizzo per accelerarlo. Benvenuti, kiddos.

35. Banner di e-mail di lancio

Triplicare i punti se lo rendi un'illustrazione. Attuale.

^ a proposito, questa è la newsletter della mia agenzia e i miei colleghi scrivono alcuni contenuti davvero eccezionali. Ci piacerebbe se ti abbonassi!

Ecco alcuni preferiti recenti:

Profilo

36. Preferenze di notifica

È fantastico quando le app ti avvisano quando accadono le cose, e ancora più bello quando suona una tromba. Ma dopo la diciannovesima volta, sei davvero stanco delle trombe. Probabilmente dovresti lasciare che l'utente decida quando suonano le trombe.

Slack non è diventato una società da $ 8 miliardi allentando le impostazioni di notifica !! Azzeccato.

37. La pagina di fatturazione

Non dimenticare che le persone devono ottenere copie delle loro fatture per spendere il prodotto per cui ti stanno pagando migliaia di dollari. E alcune persone costituiscono il reparto IT idiota per la loro agenzia e non sopportano quanto sia difficile individuarlo. ogni. singolo. mese. Non è amaro.

Non so cosa significhi nulla di tutto ciò, ma è stato facile arrivare qui!

38. L'opzione “Elimina il mio account”

Bene, lo so. Nessuno lo farà. Ma hey, forse un giorno ricominceranno un nuovo account! Proprio come le persone che passano davanti a un chiosco nel centro commerciale e dicono "Tornerò più tardi e ne comprerò tre!" Certo.

Ci sono ragioni legittime per questo che sono positive. Ho eliminato gli account quando mi sono unito a una licenza per team più ampia. Ho eliminato vecchi account che raccoglievano polvere e volevo ricominciare da capo. In ogni caso, è un buon servizio clienti rendere anche questa una buona esperienza.

Pssst, signor Presidente, puoi disattivare il tuo account qui.

39. Lo strumento di ritaglio foto del profilo

Bene, questo è uno scenario da incubo del cassonetto del fuoco per la maggior parte delle app e non è necessario. Christian mi ha inviato uno screenshot di prima quando stava cambiando la sua foto del profilo in Beyoncé.

Non riuscì nemmeno a superare questa schermata per mostrare come ritagliava una foto. 2 stelle su 10. Non ci metterebbe un anello.

40. L'opzione / Aggiorna "Aggiorna il mio account"

Mi fa capire quanto sia difficile per molti prodotti SaaS. Zitto e prendi i miei soldi. Non dovrebbe essere facile ?! Come ... IL PIÙ FACILE ?!

Buffer ha una voce di menu da aggiornare, quindi un modulo piuttosto semplice. Bam. Hai i miei soldi. Ben fatto, Buffer.

Mad Flows

Alla fine, avrai finito tutte le cose precedenti e pensi di essere a casa gratuitamente - quindi inizi letteralmente a tornare a casa per il giorno orgoglioso di come sei sulla palla.

Quindi a metà strada sul tuo fixie, sorseggiando kombucha dal tuo camelbak, ricordi che lo sviluppo non è ancora iniziato davvero! # $% @

Una volta iniziato lo sviluppo, inizierai a capire che solo deridere uno schermo non racconta davvero la storia (è bello, cerchiamo tutti di essere pigri). Gli sviluppatori hanno bisogno che tu analizzi effettivamente il modo in cui l'esperienza utente scorre da uno schermo all'altro.

41. Il flusso "Cambia il mio indirizzo"

Sai quando ottieni un nuovo appartamento in centro e devi cambiare il tuo indirizzo su OGNI CARTA DI CREDITO CHE HAI MAI PROPRIO?

Dhaval S. Gandhi vuole assicurarsi che la sua Aloe Vera venga spedita nel posto giusto.

42. Il flusso "Aggiungi una carta di credito"

Ad alcune persone (ehm, io) piace tenere come un centinaio di carte di credito / debito in archivio in modo che i ladri abbiano molti account tra cui scegliere. Quindi semplifica l'aggiunta di carte. Questo è davvero tutto ciò che ho da dire al riguardo.

Sembra troppo reale, Carlos Medina. Non correlato, ho appena comprato delle scarpe nuove e non è costato un centesimo!

43. Il flusso "Aggiunta collettiva"

Una cosa è fare rapidamente l'aggiunta di un oggetto nel sistema, ma è una cosa completamente diversa fare aggiungere un MAZZO DI OGGETTI rapidamente nel sistema.

Per favore, signore, posso averne un po 'di più?

44. Il flusso "Crea un filtro personalizzato"

Se si consente un filtro sofisticato, potrebbe essere utile aggiungere la possibilità di salvare questo filtro complicato per dopo. In questo modo non è necessario fare nuovamente clic un milione di volte.

Oykun Yilmaz potrebbe fare un ulteriore passo in avanti consentendo all'utente di salvare questo filtro. Fallo, Oykun!

45. Il flusso "Aggiungi al carrello"

È strano pensare che le persone dimentichino questo flusso, ma sai ... io sono una di quelle persone. Sta 'zitto.

Apparentemente Alberto Conti aveva bisogno di 4 sedie e 4 tavolini. Deve essere una grande casa ...

46. ​​Il flusso "Condividi questo"

La condivisione è diventata onnipresente online, ma ciò non significa che sia già progettata per te. Un motivo in più per dedicare un po 'di tempo a questo.

Tomek Kwiatkowski sa davvero come socializzare.

47. Il flusso "Crea da esistente"

Questo è un po 'come "Duplica + Modifica" tutto in una sola azione. Fondamentalmente l'utente è in grado di iniziare da un oggetto esistente e aggiornarlo secondo necessità.

Kyle Johnston sta scrivendo MOLTE sceneggiature. Forse segretamente Christopher Nolan?

48. Il flusso "Invita qualcuno"

Non c'è modo migliore per aggiungere un po 'di "viralità" al tuo prodotto se non attraverso inviti e condivisioni. Ti guardo Dribbble. Assicurati che sia facile, veloce e divertente!

Penso che Paula Pintaric e Christine stiano andando in volo. Oppure stanno lavorando a un progetto e stanno guardando gli altri volare. È peggio.

49. Flusso "Modifica autorizzazioni utente"

Conosci quel tipo Greg? Sai come fa a rovinare tutto quello che tocca? Sì, potresti voler revocare alcuni dei privilegi di Greg solo perché non elimini l'intera rete. Silly Greg.

Matt Shwery, d'altra parte ... molto meno di una nocca di Greg.

50. Il flusso "Elimina e ripristina"

Sai quando elimini qualcosa di SUPER importante e devi recuperarlo immediatamente? No? Tutto apposto.

Eric Tsai comprende che tutti commettiamo errori.

BONUS # 51. animazioni

Divulgazione completa, in realtà mi sono dimenticato di questi stessi. Senti, adoro le animazioni ma sono fortunato se abbiamo il lusso di costruirle quando le vendite vogliono un prototipo fatto ieri, e lo sviluppo sta sottolineando qualcosa che mi è completamente mancato nella mia ottava iterazione della landing page. E onestamente, se arriviamo alle animazioni, leggo semplicemente Dribbble o CodePen e invio qualcosa che mi piace sviluppare e dire: "Fallo così!" Scherzando. Sono io?

Non sono.

Sommario

Probabilmente stai scrivendo furiosamente un elenco di tutto ciò che ho dimenticato per questo articolo. Sentiti libero di ricordarmelo nei commenti. I progettisti hanno circa un milione di cose da ricordare durante la progettazione di prodotti MVP o funzionalità di grandi dimensioni per una piattaforma software aziendale. Spero che questo possa almeno essere un utile riferimento per ricordarti il ​​tuo prossimo progetto.

Quando non sto cercando di ricordare ogni piccola cosa (lo fa è magica), sto lavorando agli strumenti di progettazione di Sketch di UX Power Tools per renderti un designer migliore, più efficiente. Puoi saperne di più qui:

Segui UX Power Tools su Twitter
Seguimi su Twitter