Ne pare rău pentru ochii sângerători, dar acestea sunt importante.

Metodologie

50 de lucruri pe care [probabil] ai uitat să le proiectezi

Fiecare premier: „Nu sunt supărat, sunt doar dezamăgit ...”

Favoare mici: Dacă îți place acest articol, împărtășește-l cu prietenii tăi. Dacă iubiți cățelușii, salvați unul. Dacă vă place maioneza, refrigerați-o.

Uită-te, uităm cu toții să proiectăm ceva ocazional. Este complet fain!

Ei bine, nu e fain ... dar parcă ... este în regulă. S-a întâmplat. Această listă vă va îmbunătăți. Sau cel puțin mai conștient. Sau poate îi dai doar câteva lovituri, deoarece recunoașteți că cineva a petrecut timp curatând această listă și mergeți mai departe cu viața voastră. NBD. Mă refer la acele clapete și la basul acela. Cu o referință Meghan Trainor din primul paragraf, am pornit la un început de urlet.

Aceasta este doar o listă de lucruri pe care poate ați uitat să le proiectați. Când vă gândiți la cât de simplă este o aplicație precum Instagram sau Snapchat, este ușor să treceți cu vederea doar câte ecrane, stări și chestii intră pentru a face o experiență de utilizator extraordinară.

  • Autentificare și înregistrare
  • Prima experiență
  • Toate lucrurile mici
  • Materiale de lansare
  • Lucruri de profil
  • Fluxuri nebune

Așadar, citiți acestea, reflectați și… de parcă ... nu vă supărați premierul.

Log In / Înregistrare

1. Ecranul Splash

Ecranul care apare atunci când lansați o aplicație mobilă sau când vă conectați la o aplicație web și totul se încarcă.

Iată unul frumos de James Jackson

2. Fluxul de parole uitate

A fost „abcd1234” sau „1234abcd”? Asta e important. Nu uita.

Majo Puterka nu-și lasă utilizatorii închiși în casă sub ploaie.

3. Pagina „Mulțumim pentru înregistrare”

Acest ecran apare de obicei după ce un utilizator își creează un cont și îi spune să meargă să-și confirme adresa de e-mail.

Ce urmeaza? Întreabă-l pe Hayley Cattlin.

4. E-mailul de bun venit

Acest lucru este în linie între designul produsului și marketingul produsului, dar este literalmente PRIMA impresie pe care trebuie să o ai asupra utilizatorilor. Fă-o să conteze. Este un moment minunat pentru a introduce tonul scârțos al produsului tău.

chiar imi place asta. De Brian Golatka.

5. Termenii de utilizare și paginile de confidențialitate (ugh)

Doar face-o pentru oamenii de peste legal. Încearcă doar să evite trimiterea în judecată.

Apreciez foarte mult modul în care Marko Prljic a încercat să facă Termenii și condițiile mai accesibile.

Prima experiență

6. Utilizatorul la bord

Există tone de metode diferite pe care le puteți utiliza. Iată cinci dintre favorurile mele:

MuNa este de mare ajutor.

7. Statul (eurile) goale

Este ca și cum te-ai muta într-o casă și nu te-ai mutat în niciun mobilier. Arată destul de gol, nu? Ajută-ți utilizatorii să-i acorzi, dându-le un punct în direcția bună. "Puneți canapeaua aici."

Am senzația că Veli-Johan Veromann îi plac supereroii.

8. Documentele de ajutor

Dacă sunteți la o companie mare, probabil există o întreagă echipă dedicată acestui lucru. Însă tot vă vor da greș pentru ilustrații și capturi de ecran. Acest lucru merită la fel de mult (sau mai multe) eforturi ca pagina de conectare sau feedul de activități.

Maya Gao este foarte utilă. Fii mai mult ca Maya.

9. Imaginea de profil / Avatar implicite

Înscrierea cu conturi sau servicii sociale precum Gravatar ne-a ajutat într-adevăr să ne arătăm fețele zâmbitoare, dar tot vei primi un tip care nu ajunge niciodată să încarce o fotografie de profil. Dă-i un pic de fler și arată brandul.

Hermes Strange face lucruri drăguțe. Acestea sunt AF frumoase.

10. Butonul Deconectare

Din păcate, trebuie să permiteți utilizatorilor să plece. Pur și simplu pretindeți că folosesc aplicația dvs. într-o bibliotecă publică și trebuie să se deconecteze astfel încât un străin să nu-și schimbe numele contului în „Mr. Butts“. Nepotrivit.

Presupun că Kristofer a sustras probabil banii lui Henrik. Lasă-l să se deconecteze și să fugă de scena.

Toate lucrurile mici

11. Footer-ul aplicației

De cele mai multe ori, presupun că paginile continuă pentru totdeauna, ca atunci când oamenii credeau că lumea este plină și pur și simplu. Notă: Pământul nu este plat.

Ash Schweitzer s-ar putea pierde în pădure undeva. Cineva o ajută.

12. Favicon Browser

Știți… acea pictogramă care apare în fila browserului. Îmi pierd filele Mediu, deoarece nu mai este verde. Dar este destul de frumos!

Michael Flarup a făcut un șablon minunat favorit pe care îl puteți descărca.

13. Pagina 404

Rizvan este blocat în acea gaură. Du-te să o ajute.

14. Default / Hover / Focus / Apăsat / Dezactivat / Etc. Statele de intrare

Ugh, atâtea state. „Focus + Hover” ar putea fi preferatul meu / cel mai obscur. Imaginea de mai jos provine de la sistemul de proiectare a instrumentelor electrice UX.

Notă laterală pentru proiectul meu lateral, cu siguranță ar trebui să o verificați:

15. Comanda filelor

Comanda taburilor este o caracteristică de accesibilitate care permite utilizatorilor să navigheze pe o pagină folosind tasta Tab. Nu am reușit să găsesc o imagine care să reprezinte acest lucru, așa că am făcut o captură de ecran a unui spec. Pe care Christian Beck a scris-o din 2007 unde a definit poziția comenzii tabului într-un tabel pentru fiecare control UI dintr-un tabel (m-am săturat chiar să scriu că ... SnoozeFest 2017 ™). Puteți defini de fapt ordinea în care sunt vizitate elementele pentru a vă asigura că acțiunile primare vin înaintea celor secundare. Aceasta este o provocare îngrijită pentru design.

Ahhh, zilele de scriere a specificațiilor de 80 de pagini și dezvoltarea cascadei.

16. Comportamentul de defilare

Nu numai unde și cum defilează, ci ceea ce defilează de fapt. Antetul este fixat? Piciorul?

Oh, Peter Blazej, asta se simte bine. Frumos!

17. Butonul Intercom

Adică cel mai puțin lucru pe care îl puteți face este să-l faceți să corespundă culorilor aplicației dvs. Hai oameni buni. Nu este o operație de rachetă.

Acest lucru este mai ușor decât a face un bol de cereale.

18. Butoanele de paginare

Presupunând că nu ați optat pentru derulare infinită, utilizatorii dvs. vor avea nevoie de o modalitate de a ajunge la pagina 27. Lasă-le!

Borunda a făcut o treabă frumoasă. Iubiți galbenul acela, Borunda!

19. Cursorii

Butoanele ar trebui să aibă un indicator. Lucrurile care nu sunt interactive ar trebui să aibă un cursor implicit. Textul ar trebui să aibă un cursor de text. Dezvoltatorii nu știu întotdeauna acest lucru. Tocmai am redenționat un ecran de aplicație a doua zi în care un dezvoltator avea un cursor de text pentru starea de trecere a unui buton. Milă.

Jeff Broderick Iubește făcând clic pe chestii. A făcut și el un freebie.

20. Mecanismul (tipurile) de sortare / filtrare / căutare a tabelelor

Nu trebuie să existe o modalitate mai rapidă de a ajunge la ZZ Top în tabelul de date „Bands with Beards”…

Eugen Esanu are un ochi excepțional pentru mecanismele de filtrare și combosul violet / galben. Frumos.

21. Statele goale „Fără rezultate”

Uneori, veți căuta ceva sau adăugați prea multe filtre și nu există rezultate. Ce trist. Incurajeaza-ti utilizatorii cu o ilustrare obraznica. Sau contul dvs. bancar și numerele de rutare.

Reiner Wendland a acoperit destul de mult totul pentru Zendesk.

22. Statele de eroare

Introducere necorespunzătoare Parola incorecta. Cont existent. Prea multe lucruri selectate. Există tot felul în care lucrurile pot merge prost, în special dacă ești bunica mea și ai un iPad pentru Crăciun. Aceasta a fost o greșeală.

Mike Stezycki chiar m-a gândit că e-mailul trimis. Apoi a fost tot:

23. Notificări de sistem

Sistemul face întotdeauna ceva în spatele cortinei și uneori este plăcut să știi când lucrurile se termină cu succes (sau nu). Cu siguranță, ar trebui să anunțați utilizatorul.

Aceasta este din Inbox Google. „Anulare” este foarte convenabil când ștergeți „din greșeală” un e-mail de la mama.

24. Derularea automată completă

Completarea automată este minunată pentru a vă ajuta să găsiți obiecte în sistem, dar uneori nu există rezultate. În acest caz, nu doriți doar o casetă goală. Afișați un mic mesaj sau permiteți-le să ia un fel de acțiune.

Se pare că Jurriaan van Drunen nu avea deja „sutien” în contactele sale. Probabil pentru cei mai buni.

25. Statul de încărcare

Sigur, probabil că oamenii se vor lega de telefoanele lor în timp ce se încarcă pagina, dar, în cazul în care se vor uita efectiv de la glisarea lor sexy, probabil ar trebui să existe un indiciu vizual că lucrurile încă se încarcă.

Nu este cea mai bună formă de pană flip, XPLAI. Continua sa te antrenezi. Dar acest lucru este încă dureros adorabil.

Materiale de lansare

26. Pictograma aplicației Friggin

Da, probabil este cel mai bine să nu uiți de asta.

Sunt dispus să pariez că Eddie Lobanovskiy și-a schimbat toate icoanele în mâncare pentru micul dejun. Delicios.

27. Imaginile App Store

Daniel Beere nu a uitat imaginile din magazinul de aplicații pentru aplicația sa. Înalt cinci, tipule.

28. Graficul deschis / Imagini sociale

Aceasta este imaginea care apare atunci când tuitezi un link pe Twitter, faci o postare pe Facebook, postezi un link pe Medium, etc.

Kristy T este oficial lipsită de carism. SF vă va face asta.

Iată cum arată în mediu:

29. Imaginile de marketing a site-ului web

De asemenea, nu uitați, probabil vor dori să facă site-ul web ca Stripe, doar copiați exact acest lucru:

Și dacă sunteți designer la Redkix, va trebui să vă asigurați că imaginea funcționează în culoarea roșie.

30. Imagini de punte de vânzări

Probabil ești bun dacă te descurci cu cel de mai sus. Dar, în acest caz, va trebui probabil să frecați conținutul pentru a se potrivi cu orice tranzacție de 6 cifre la care lucrează echipa dvs. de vânzări strălucitoare.

Oh, vânzările vor acoperi probabil toate modelele tale cu alte chestii, așa că pregătește-te pentru asta.

31. Imagini Pitch Deck

Ca o imagine de punte de vânzări, dar puțin mai vizionară. Adică… încerci să strângi bani. Veți vedea cum să faceți acest lucru posibil mai târziu.

Iată un secret comercial, pune întotdeauna tablouri de bord în puntea ta.  Aceasta nu este o glumă.

32. Imaginile de vânătoare a produselor

Ei, tocmai au actualizat paginile de profil!

Îmi este încă dor de Medium 2.0, dar fiecare „pe care îl primesc” mă ajută să mă mut.

33. Imagini publicitare Facebook / Twitter

„Dar nu difuzăm reclame pe Facebook!” Ha, până nu ești. Și atunci nu-ți spune nimeni. Faceți-le deja și veți fi în siguranță.

A fost nevoie de câteva săpături pentru a găsi un anunț care NU ESTE pentru o saltea Casper. Tu ucideți jocul, Casper.

34. Imagini de profil pentru social media

Da, trebuie să creezi una pentru toate cele 938 de rețele sociale. Din fericire, am creat un instrument Sketch pentru a accelera acest lucru pentru tine. Bine ai venit, kiddos.

35. Lansați Banner de e-mail

Puncte triple dacă îl faceți o ilustrație. Actual.

^ Apropo, acesta este buletinul agenției mele, iar colegii mei scriu conținut cu adevărat remarcabil. Ne-ar plăcea dacă v-ați abonat!

Iată câteva favoruri recente:

Lucruri de profil

36. Preferințe de notificare

Este extraordinar când aplicațiile vă anunță când se întâmplă lucrurile și chiar mai cool atunci când se aude un sunet de trompetă. Dar după a 19-a oară, te-ai săturat de trâmbițe. Probabil ar trebui să lași utilizatorul să decidă când sună trâmbițele.

Slack nu a devenit o companie de 8 miliarde de dolari, dându-se curs la setările de notificare !! A nimerit-o.

37. Pagina de facturare

Nu uitați că oamenii trebuie să obțină copii ale facturilor pentru a cheltui produsul pentru care vă plătesc mii de dolari. Și unii oameni alcătuiesc departamentul IT idiot pentru agenția lor și nu pot rezista cât de greu este localizarea acestui lucru. fiecare. singur. lună. Nu e amar.

Nu știu ce înseamnă asta, dar a fost ușor să ajungem aici!

38. Opțiunea „Șterge contul meu”

Așa, știu. Nimeni nu va face asta. Dar poate, vor începe din nou un cont nou într-o zi! La fel ca oamenii care trec pe un chioșc în mall și spun „Mă întorc mai târziu și cumpăr trei!” Sigur.

Există motive legitime pentru aceasta, care sunt pozitive. Am șters conturile pe măsură ce am contopit o licență de echipă mai mare. Am șters conturile vechi care au adunat praf și am vrut să încep proaspăt. În orice caz, este bine să oferiți clienților o experiență bună.

Pssst, dle președinte, vă puteți dezactiva contul aici.

39. Instrumentul de decupare fotografie

Ei bine, acesta este un scenariu de coșmar de tip dumpster pentru majoritatea aplicațiilor și nu trebuie să fie. Christian i-a trimis o captură de ecran mai devreme, când își schimba poza de profil în Beyoncé.

Nici nu a putut să treacă de acest ecran pentru a arăta cum a decupat o fotografie. 2 din 10 stele. Nu aș pune un inel pe ea.

40. Opțiunea / Fluxul Contului meu ”

Mă încurcă mintea cât de dificil este acest lucru pentru multe produse SaaS. Taci si ia-mi banii. Nu ar trebui să fie ușor ?! Cum ar fi ... cel mai ușor ?!

Buffer are un element de meniu pentru a face upgrade, apoi o formă destul de simplă. Bam. Ai banii mei. Drum de urmat, Buffer.

Fluxuri nebune

În cele din urmă, veți termina toate lucrurile anterioare și credeți că sunteți liber acasă - atunci literalmente începeți să mergeți acasă pentru ziua mândră de cât de bine sunteți.

Apoi, până la jumătatea casei pe fixie, sorbind Kombucha din camelbak, îți amintești că dezvoltarea încă nu a început încă! # $% @

Odată ce dezvoltarea începe, veți începe să vă dați seama că doar crearea unui ecran nu spune cu adevărat povestea (este fain, cu toții încercăm să fim leneși). Dezvoltatorii au nevoie de dumneavoastră pentru a descompune modul în care o experiență a utilizatorului curge de la ecran la ecran.

41. Fluxul „Schimbă adresa mea”

Știi când vei primi un apartament nou în centrul orașului și trebuie să-ți schimbi adresa pe FIECARE CARTE DE CREDIT PE CARE TREBUIEȚI NICIODATĂ?

Dhaval S. Gandhi vrea să se asigure că Aloe Vera este expediat la locul potrivit.

42. Fluxul „Adăugați un card de credit”

Unii oameni (ahem, mine) le place să păstreze ca o sută de carduri de credit / debit, astfel încât hoții să aibă o mulțime de conturi din care să aleagă. Așa că faceți mai ușor să adăugați cărți. Cu adevărat tot ce am de spus despre asta.

Pare prea real, Carlos Medina. Fără legătură, am cumpărat niște pantofi noi și nu a costat niciun ban!

43. Fluxul „Adăugare în masă”

Este un lucru de a face să adăugați rapid un obiect în sistem, dar este cu totul altceva să faceți să adăugați rapid o BUNCH DE OBIECTE în sistem.

Vă rog, domnule, mai am ceva?

44. Fluxul „Creează un filtru personalizat”

Dacă permiteți o filtrare sofisticată, ar putea fi bine să adăugați posibilitatea de a salva acest filtru complicat pentru mai târziu. În acest fel, nu trebuie să faceți clic din nou de un milion de ori.

Oykun Yilmaz ar putea face acest pas mai departe, permițând utilizatorului să salveze acest filtru. Fă-o, Oykun!

45. Fluxul „Adaugă în coșul de cumpărături”

Este cam amuzant să crezi că oamenii uită de acest flux, dar știi ... Eu sunt unul dintre acești oameni. Taci.

Se pare că Alberto Conti avea nevoie de 4 scaune și 4 mese laterale. Trebuie să fie o casă mare ...

46. ​​Fluxul „Share This”

Partajarea a devenit online foarte omniprezentă, dar asta nu înseamnă că este deja proiectat pentru tine. Cu atât mai mult motiv pentru a petrece ceva timp pe acesta.

Tomek Kwiatkowski știe cu adevărat să devină social.

47. Fluxul „Create from Existing”

Acesta este un fel de „Duplicate + Edit” totul într-o singură acțiune. Practic, utilizatorul este capabil să pornească de la un obiect existent și să-l actualizeze după cum este necesar.

Kyle Johnston scrie o mulțime de scenarii. Poate în secret Christopher Nolan?

48. Fluxul „Invită pe cineva”

Nu există o modalitate mai bună de a adăuga o anumită „viralitate” produsului dvs. decât prin invitații și partajare. Uitându-te la Dribbble. Asigurați-vă că este ușor, rapid și distractiv!

Cred că Paula Pintaric și Christine pleacă într-un zbor. Sau lucrează la un proiect și urmăresc alți oameni să zboare. Este mai rău.

49. Fluxul „Schimbarea permisiunilor utilizatorului”

Îl cunoști pe tipul lui Greg? Știi cum înșurubează tot ce atinge? Da, s-ar putea să doriți să revocați unele dintre privilegiile lui Greg doar pentru a nu șterge întregul Internet. Prost Greg.

Pe de altă parte, Matt Shwery ... cu atât mai puțin de cap, cât cu Greg.

50. Fluxul „Ștergeți și recuperați”

Știi când ștergi ceva important SUPER și trebuie să-l recuperi imediat? Nu? În regulă.

Eric Tsai înțelege că toți facem greșeli.

BONUS # 51. Animații

Dezvăluire completă, chiar am uitat de mine. Uite, ador animațiile, dar sunt norocos dacă avem luxul să le construim, atunci când vânzările vor un prototip realizat ieri, iar dezvoltarea dezvăluie ceva ce mi-a lipsit complet în a 8-a iterație a paginii de destinație. Și sincer, dacă ajungem la animații deloc, eu doar peruzez Dribbble sau CodePen și trimit ceva ce îmi place să deviez și spun: „Faceți așa!” Glumind. Sunt eu?

Nu sunt.

rezumat

Probabil că scrii cu furie o listă cu tot ce am uitat pentru acest articol. Simte-te liber să-mi reamintesc cu drag. Proiectanții au de reținut aproximativ un milion de lucruri atunci când proiectează produse MVP sau funcții mari pentru o platformă software software. Sperăm că aceasta poate fi cel puțin o referință la îndemână pentru a vă aduce aminte la următorul dvs. proiect.

Când nu încerc să-mi amintesc orice lucru mic (ea face magie), lucrez la instrumente de proiectare Sketch la UX Power Tools pentru a vă face un designer mai bun și mai eficient. Puteți afla mai multe aici:

Urmați UX Power Tools pe Twitter
Urmărește-mă pe Twitter