Oprosti zbog krvavih očiju, ali ovo je važno.

Metodologija

50 stvari koje ste [vjerojatno] zaboravili dizajnirati

Svaki premijer: "Nisam ljut, samo sam razočaran ..."

Male pogodnosti: Ako volite ovaj članak, podijelite ga sa svojim prijateljima. Ako volite štenad, spasite jednoga. Ako volite majonezu, stavite je u hladnjak.

Gledajte, svi zaboravljamo dizajnirati nešto prigodom. To je potpuno cool!

Pa, nije cool ... ali kao ... u redu je. Događa se. Ovaj će vam popis biti bolji. Ili barem svjesniji. Ili mu možda samo date nekoliko pljeska jer prepoznate da je neko vrijeme provodio kurirajući ovaj popis i kreće dalje sa svojim životom. NBD. Sve sam oko tih pljeska i basa. S referencom Meghan Trainor u prvom odlomku, krećemo na užurban početak.

Ovo je samo popis stvari koje ste možda zaboravili dizajnirati. Kada razmišljate o tome koliko je jednostavna aplikacija poput Instagrama ili Snapchata, lako je zanemariti koliko ekrana, stanja i stvari postaje stvarno strašno korisničko iskustvo.

  • Pojave i prijave
  • Prvo iskustvo
  • Sve male stvari
  • Pokretanje materijala
  • Stvari profila
  • Ludi tokovi

Dakle, pročitajte ovo, razmislite i ... poput ... nemojte uznemiriti svog premijera.

Prijava Registriraj se

1. Zaslon za prskanje

Zaslon koji se prikazuje prilikom pokretanja mobilne aplikacije ili kada se prijavljujete u web-aplikaciju i sve se učitava.

Evo jednog lijepog Jamesa Jacksona

2. Tijek zaboravljene lozinke

Je li to bio "abcd1234" ili "1234abcd"? Ovo je važno. Ne zaboravi.

Majo Puterka ne ostavlja svoje korisnike zaključane izvan kuće na kiši.

3. Stranica "Hvala što ste se prijavili"

Taj se zaslon obično pojavljuje nakon što korisnik kreira račun i nazove ih da potvrde svoju adresu e-pošte.

Što je sljedeće? Pitajte Hayley Cattlin.

4. E-adresa dobrodošlice

To premošćuje liniju između dizajna proizvoda i marketinga proizvoda, ali to je doslovno PRVI dojam koji imate na svoje korisnike. Neka računa. Sjajno je vrijeme da predstavite hrabar ton svog proizvoda.

i stvarno ovako. Autor Brian Golatka.

5. Uvjeti pružanja usluge i stranice o privatnosti (ugh)

Samo učinite to za legalne. Samo pokušavaju izbjeći tužbu.

Zaista cijenim kako je Marko Prljić pokušao učiniti Uvjete dostupnima.

Prvo iskustvo

6. Korisnik se ukrcava

Postoji puno različitih metoda koje možete koristiti. Evo pet mojih favorita:

Izuzetno korisna, MuNa.

7. Prazna stanja izvan okvira

To je poput useljenja u kuću, a niste se preselili ni u kakav namještaj. Izgleda prilično prazno, ha? Pomozite svojim korisnicima udarivši ih u pravom smjeru. "Stavite kauč ovdje."

Osjećam kako Veli-Johan Veromann voli superheroje.

8. Dokumenti pomoći

Ako ste u velikoj tvrtki, vjerojatno je cijeli tim posvećen tome. Ali još uvijek će vas gnjaviti radi ilustracija i snimki zaslona. To zaslužuje jednako (ili više) napora koliko stranice za prijavu ili feed aktivnosti.

Maya Gao je vrlo korisna. Budi više poput Maye.

9. Zadana slika korisničkog profila / avatar

Prijavljivanje putem društvenih računa ili usluga poput Gravatara zaista su nam pomogli da pokažemo nasmiješena lica, ali ipak ćete dobiti tog jednog tipa koji se nikada ne snađe okolo da prenese fotografiju profila. Priuštite si malo i pokažite marku.

Hermes Strange pravi slatke stvari. To su simpatični AF.

10. Gumb za odjavljivanje

Nažalost, DOSTA morate korisnicima dopustiti. Samo se pretvarajte da koriste vašu aplikaciju u javnoj biblioteci i da se moraju odjaviti da neki stranac ne promijeni naziv računa u "Mr. Guze”. Neprikladan.

Pretpostavljam da je Kristofer vjerojatno ukrao Henrikov novac za ručak. Neka se odjavi i pobjegne s mjesta događaja.

Sve male stvari

11. Podnožje aplikacije

Većinu vremena pretpostavljam da stranice jednostavno idu zauvijek, poput onih kada su ljudi vjerovali da je svijet ravan i tek tako nekako nastavljaju. Napomena: Zemlja nije ravna.

Pepeo Schweitzer mogao se negdje izgubiti u šumi. Netko će joj pomoći.

12. Favicon preglednika

Znate ... ona mala ikona koja se prikazuje na kartici preglednika. Nastavljam sa gubitkom kartica Srednje jer više nije zeleno. Ali prilično je!

Michael Flarup napravio je fantastičan predložak favicon koji možete preuzeti.

13. Stranica 404

Rizvan je zaglavljen u toj rupi. Idi joj pomoći.

14. Zadani / lebdeći / fokus / pritisnut / onemogućen / itd. Stanja unosa

Ugh, toliko država. "Focus + Hover" mogao bi biti moj najdraži / najskromniji. Sljedeća slika ekrana dolazi iz UX Power Design Design System.

Bočna napomena za moj sporedni projekt, svakako biste trebali provjeriti:

15. Redakcija kartica

Redoslijed kartice je značajka pristupačnosti koja korisnicima omogućuje kretanje po stranici pomoću tipke Tab. Nisam uspio pronaći sliku koja bi to predstavljala, pa sam snimio snimku spektakla napisao Christian Beck iz 2007. godine gdje je u tablici odredio položaj redoslijeda tablica za svaku korisničku kontrolu UI-ja (umorio sam se čak i kad sam to napisao … SnoozeFest 2017 ™). Zapravo možete definirati redoslijed posjeta predmeta kako biste osigurali da su primarne radnje prije sekundarnih. Ovo je uredan izazov za dizajn.

Ahhh, dani pisanja specifikacija na 80 stranica i razvoja vodopada.

16. Ponašanje pomicanja

Ne samo gdje se i kako pomiče, već i što se zapravo kreće. Je li zaglavlje fiksirano? Podnožje?

O čovječe, Peter Blazej, ovo se osjeća glatko. Lijepo!

17. Gumb Intercom

Mislim najmanje što možete učiniti je da se podudara s vašim bojama aplikacija. Hajde, ljudi. To nije raketna operacija.

To je lakše nego praviti zdjelu od žitarica.

18. Gumbi za stranicu stranice

Pod pretpostavkom da se niste odlučili za beskonačno pomicanje, vaši će korisnici trebati način da dođu na stranicu 27. Pustite ih!

Borunda je lijepo obavio posao. Voli to žuto, Borunda!

19. Kursori

Gumbi trebaju imati pokazivač. Neinteraktivne stvari trebaju imati zadani pokazivač. Tekst treba imati tekstualni pokazivač. Programeri to ne znaju uvijek. Upravo sam crtao zaslon aplikacije neki dan, gdje je programer imao tekstualni pokazivač za stanje miša na gumbu. Milost.

Jeff Broderick LJUBAV klikne na stvari. Napravio je i besplatni dar.

20. Mehanizmi za sortiranje / filtriranje / pretraživanje tablice

Mora postojati brži način da se do ZZ Top-a dođe u toj tabeli podataka "Grupe s bradama" ...

Eugen Esanu ima izvanredno oko za mehanizme filtriranja i ljubičaste / žute kombinacije. Lijepo.

21. Prazna stanja "Nema rezultata"

Ponekad pretražite nešto ili dodate previše filtera, a nema rezultata. Kako je tužno. Razveselite svoje korisnike drhtavom ilustracijom. Ili vaš bankovni račun i brojeve za usmjeravanje.

Reiner Wendland prilično je pokrivao sve za Zendesk.

22. Države pogreške

Loš unos. Netočna lozinka. Postojeći račun. Previše je odabranih stvari. Postoje sve vrste načina na koje stvari mogu poći po zlu, posebno ako ste moja baka i imate iPad za Božić. To je bila greška.

Mike Stezycki stvarno me je tjerao da mislim da je e-mail poslan. Tada je bio sav:

23. Obavijesti o sustavu

Sustav uvijek radi nešto iza zavjese, a ponekad je lijepo znati kada se stvari uspješno završe (ili ne). To biste definitivno trebali obavijestiti korisnika.

Ovo je iz Google Inboxa.

24. Prazno padajuće automatsko dovršavanje

Automatsko dovršavanje je sjajno zbog pomaganja u pronalaženju objekata u sustavu, ali ponekad nema rezultata. U ovom slučaju, ne želite samo prazan okvir. Pokažite malu poruku ili im dopustite da nešto poduzmu.

Očigledno da Jurriaan van Drunen već nije imao

25. Stanje učitavanja

Sigurno će ljudi vjerojatno baratati telefonima dok se stranica učitava, ali u slučaju da stvarno pogledaju od seksi prevlačenja, vjerojatno bi trebao postojati neki vizualni pokazatelj da se stvari još učitavaju.

Nije najbolji oblik za okretanje pan, XPLAI. Nastavi vježbati. Ali ovo je još bolno obožavanje.

Pokretanje materijala

26. Ikona aplikacije Friggin

Da, vjerojatno je najbolje da ovo ne zaboravite.

Spremna sam se kladiti da je Eddie Lobanovskiy promijenio sve svoje ikone u hranu za doručak. Ukusno.

27. Slike App Store-a

Daniel Beere nije zaboravio slike iz trgovine za svoju aplikaciju. Visoka pet, čovječe.

28. Otvoreni grafikon / društvene slike

Ovo je slika koja se prikazuje kada tvitujete vezu na Twitteru, objavite post na Facebooku, objavite vezu na Medium, itd. ...

Kristy T službeno je bezglutenska. SF će vam to učiniti.

Evo kako to izgleda u mediju:

29. Slike marketinga na web mjestu

Isto tako, nemojte zaboraviti, vjerovatno će htjeti da web stranica izgleda kao Stripe.

Ako ste dizajner u Redkixu, morat ćete se uvjeriti da slika funkcionira na grimiznom.

30. Slike prodajnog stola

Vjerojatno ste dobri ako se bavite onim gore. No u ovom ćete slučaju vjerojatno trebati pročistiti sadržaj kako biste odgovarali marki bez obzira na što rade 6-cifreni vaš briljantni prodajni tim.

Oh, prodaja će vjerojatno prikriti sve vaše makete drugim stvarima, zato se pripremite za to.

31. Slike na palubi

Poput slike prodajne palube, ali malo više vizionarski. Mislim ... pokušavaš prikupiti novac. Shvatit ćete kako to kasnije omogućiti.

Ovo je poslovna tajna, uvijek stavite nadzorne ploče u svoju palubu.  Ovo nije šala.

32. Slike proizvoda za lov na proizvod

Hej, upravo su ažurirali stranice profila!

Još uvijek mi nedostaje Medium 2.0, ali svaki

33. Slike oglasa na Facebooku / Twitteru

"Ali ne prikazujemo Facebook oglase!" Ha, dok ne budete. A onda vam nitko ne kaže. Samo ih napravite i bit ćete sigurni.

Bilo je potrebno neko kopanje da bi se pronašao oglas koji NISAM bio za Casper madrac. Svi ubijate igru, Casper.

34. Slike profila društvenih medija

Da, morate ih napraviti za svih 938 društvenih mreža. Srećom napravili smo alat Sketch da ubrzamo to za vas. Dođite, mališani.

35. Pokretanje bannera e-pošte

Trostruke točke ako to učinite ilustracijom Trenutno.

^ Usput, ovo je bilten moje agencije i moji suradnici pišu neki zaista izvanredan sadržaj. Bilo bi nam drago ako ste se pretplatili!

Evo nekoliko nedavnih favorita:

Stvari profila

36. Postavke obavijesti

Izvrsno je kad vas aplikacije obavijeste kada se događaju, a još je svježije kada svira trubački zvuk. Ali nakon 19. puta, stvarno se umorite od trubača. Vjerojatno biste trebali pustiti korisnika da odluči kada zvuče trube.

Slack nije postao tvrtka vrijedna 8 milijardi dolara lajanjem postavki podešavanja obavijesti !! Zabio je.

37. Stranica za naplatu

Ne zaboravite da ljudi trebaju nabaviti kopije svojih računa kako bi trošili proizvod za koji vam plaćaju tisuće dolara. I neki ljudi čine IT idiot odjel za svoju agenciju i ne mogu podnijeti koliko je teško ovo pronaći. svaki. singl. mjesec. On nije ogorčen.

Ne znam što sve ovo znači, ali bilo je lako doći ovdje!

38. Opcija "Izbriši moj račun"

Da, znam. Nitko to neće učiniti. Ali hej, možda će jednog dana opet pokrenuti novi račun! Baš kao i ljudi koji prođu kiosk u tržnom centru i kažu: "Vratit ću se kasnije i kupit ću tri!"

Za to postoje zakoniti razlozi koji su pozitivni. Izbrisali smo račune dok sam se spojila u veću dozvolu za tim. Izbrisao sam stare račune koji su sakupljali prašinu i želio sam započeti s novim. U svakom slučaju, dobra je služba za korisnike da i ovo bude dobro iskustvo.

Pssst, gospodine predsjedniče, ovdje možete deaktivirati svoj račun.

39. Alat za obradu fotografija za profil

Pa ovo je scenarij noćne more za odlagalište otpada i to ne treba biti. Kristijan mi je poslao snimku ekrana iz ranijeg vremena kad je mijenjao svoju profilnu sliku u Beyoncé.

Nije mogao ni proći ovaj ekran da pokaže kako obrezuje fotografiju. 2 od 10 zvjezdica. Ne bi stavio prsten na njega.

40. Opcija / tijek „Nadogradite moj račun“

Smeta mi koliko je ovo teško za mnoge SaaS proizvode. Začepi i uzmi moj novac. Ne bi li to trebalo biti lako ?! Kao ... NAJLASNIJE ?!

Buffer ima stavku izbornika za nadogradnju, a zatim prilično jednostavan oblik. Bam. Imaš moj novac. Putem, Buffer.

Ludi tokovi

Na kraju ćete završiti sve prethodne stvari i pomisliti da ste kod kuće slobodni - tada bukvalno počnete ići kući kući onog dana ponosni na svoj način.

Onda, na pola puta kući, popravite kombuču s kamelbeka, sjećate se da razvoj još uvijek nije započeo! # $% @

Jednom kada razvoj krene, počet ćete shvaćati da samo ismijavanje jednog zaslona u stvari ne govori priču (u redu je, svi pokušavamo biti lijeni). Programeri vam trebaju da zapravo raščlanite kako korisničko iskustvo teče s zaslona na zaslon.

41. Tok "Promijeni moju adresu"

Znate kad stignete zamamni novi stan u centru grada i morate promijeniti adresu na SVAKOJ KREDITNOJ KARTICI KOJU STE VJERO VLASNI?

Dhaval S. Gandhi želi osigurati da njegova Aloe Vera bude otpremljena na pravo mjesto.

42. Tok "Dodaj kreditnu karticu"

Neki (ahem, ja) vole čuvati stotinu kreditnih / debitnih kartica kako bi lopovi imali mnogo računa. Tako olakšajte dodavanje kartica. To je stvarno sve što moram reći o tome.

Izgleda previše stvarno, Carlos Medina. Nevezano, kupio sam nove cipele i nije koštalo kocku!

43. Protok "skupno dodavanje"

Jedna je stvar brzo dodavanje objekta u sustav, ali potpuno je drugačija stvar brzo dodavanje BUNCH OBJEKATA u sustav.

Molim vas gospodine, mogu li dobiti još malo?

44. Tok "Stvaranje prilagođenog filtra"

Ako dopustite sofisticirano filtriranje, bilo bi lijepo dodati mogućnost spremanja ovog kompliciranog filtera za kasnije. Na taj način ne morate ponovno kliknuti milion puta.

Oykun Yilmaz mogao bi učiniti ovaj korak dalje tako da korisnicima omogući da spremi ovaj filtar. Učinite to, Oykune!

45. Protok "Dodaj u košaricu"

Smiješno je misliti da ljudi zaborave na tok, ali znate ... ja sam jedan od tih ljudi. Začepi.

Navodno je Albertu Contiju trebalo 4 stolice i 4 bočna stola. To mora da je velika kuća ...

46. ​​Tok "Dijeli ovo"

Dijeljenje je postalo prilično sveprisutno putem interneta, ali to ne znači da je već dizajnirano za vas. Tim više razloga da malo vremena provedem na ovom.

Tomek Kwiatkowski doista zna dobiti socijalnu vezu.

47. Tok "Stvaranje iz postojećeg"

To je poput "Duplikat + Uredi", sve u jednoj radnji. Korisnik u osnovi može pokrenuti postojeći objekt i po potrebi ga ažurirati.

Kyle Johnston piše puno scenarija. Možda potajno Christopher Nolan?

48. Tok "Pozovite nekoga"

Ne postoji bolji način da dodate malo proizvoda tako što ćete dobiti pozivnice i dijeljenje. Gledajući te Dribbble. Provjerite je li to lako, brzo i zabavno!

Mislim da Paula Pintaric i Christine kreću na let. Ili rade na projektu i gledaju druge ljude kako lete. To je još gore.

49. Tok "Promjena korisničkih dozvola"

Znate onog tipa Grega? Znate kako on nekako sjeba sve što dodirne? Da, možda biste mogli opozvati neke Gregove privilegije samo da ne bi izbrisao cjelokupnost interneta. Glupi Greg.

Matt Shwery, s druge strane, ... mnogo manje kolebljivog glave od Grega.

50. Tok "Izbriši i obnovi"

Znate kada izbrišete nešto važno za SUPER i trebate ga odmah vratiti? Ne? U redu.

Eric Tsai razumije da svi radimo pogreške.

BONUS # 51. Animacije

Potpuno otkrivajući, zapravo sam i zaboravio na njih. Gledajte, obožavam animacije, ali imam sreće ako imamo luksuz da ih napravimo kada prodaja želi prototip napravljen jučer, a razvoj ističe nešto što sam u potpunosti propustila u svojoj 8. iteraciji odredišne ​​stranice. I iskreno, ako uopće dođemo do animacija, samo proučim Dribbble ili CodePen i pošaljem nečemu što volim dev i kažem: "Neka to bude tako!" Jesam li?

Ja nisam.

Sažetak

Vjerojatno bijesno pišete popis svega što sam zaboravila na ovaj članak. Slobodno me podsjetite u komentarima. Dizajneri moraju imati oko milijun stvari koje treba zapamtiti pri dizajniranju MVP proizvoda ili velikih značajki za poslovnu softversku platformu. Nadamo se da ovo može biti barem korisna referenca koja će vas podsjetiti na vaš sljedeći projekt.

Kada se ne pokušavam sjetiti svake sitnice (čini se da je to magija), radim na alatima za dizajn Sketch-a u UX Power Tools kako bih bio bolji i učinkovitiji dizajner. Ovdje možete saznati više:

Slijedite UX Power Tools na Twitteru
Slijedite me na Twitteru