Omlouváme se za vaše krvácející oči, ale ty jsou důležité.

Metodologie

50 věcí, které jste [pravděpodobně] zapomněli navrhnout

Každý odpoledne: „Nejsem naštvaný, jen jsem zklamaný ...“

Malá laskavost: Pokud máte rádi tento článek, sdílejte jej se svými přáteli. Pokud máte rádi štěňata, jednu zachraňte. Pokud máte rádi majonézu, ochlazujte ji.

Podívej, všichni jsme zapomněli něco navrhnout. To je naprosto v pohodě!

No, to není super ... ale jako ... je to v pořádku. Stalo se to. Tento seznam vás zlepší. Nebo alespoň více vědomi. Nebo možná jen dáte pár tleskání, protože poznáte, že někdo strávil čas kurátorem tohoto seznamu a pokračoval ve svém životě. Nbd. Já jsem jen o těch klapkách a o tom basu. S odkazem na Meghan Trainor v prvním odstavci jsme se vydali na hučivý začátek.

Toto je pouze seznam věcí, které jste možná zapomněli navrhnout. Když přemýšlíte o tom, jak jednoduchá je aplikace, jako je Instagram nebo Snapchat, je snadné přehlédnout, kolik obrazovek, stavů a ​​takového obsahu přináší opravdu úžasné uživatelské prostředí.

  • Věci pro přihlášení a registraci
  • První zkušenosti
  • Všechny malé věci
  • Spusťte materiály
  • Profil Věc
  • Šílené toky

Takže si je přečtěte, přemýšlejte a… jako… neznepokojujte svého PM.

Přihlášení Registrace

1. Úvodní obrazovka

Obrazovka, která se zobrazí při spuštění mobilní aplikace nebo při přihlášení k webové aplikaci a vše se načítá.

Tady je krásný od Jamese Jacksona

2. Tok zapomenutého hesla

Bylo to „abcd1234“ nebo „1234abcd“? Toto je důležité. Nezapomeňte na to.

Majo Puterka neopustí své uživatele zamčené z domu za deště.

3. Stránka „Děkujeme za registraci“

Tato obrazovka se obvykle objeví poté, co si uživatel vytvoří účet a řekne jim, aby potvrdili svou e-mailovou adresu.

Co bude dál? Zeptejte se Hayley Cattlin.

4. Uvítací e-mail

Tím se překrývá hranice mezi designem produktu a marketingem produktu, ale je to doslova PRVNÍ dojem, který máte na svých uživatelích. Nechte to počítat. Je to skvělý čas představit vtipný tón vašeho produktu.

Opravdu se mi to líbí. Autor: Brian Golatka.

5. Podmínky služby a stránky ochrany osobních údajů (ugh)

Prostě to udělejte pro lidi legálně. Jen se snaží vyhnout žalování.

Opravdu oceňuji, jak se Marko Prljic pokusil zpřístupnit podmínky.

První zkušenosti

6. Onboarding uživatele

Existuje spousta různých metod, které můžete použít. Zde je pět mých oblíbených:

Příjemně užitečné, MuNa.

7. Prázdné stavy prázdné krabice

Je to jako přestěhovat se do domu a vy jste se nepohnuli v žádném nábytku. Vypadá to docela prázdné, co? Pomozte svým uživatelům tím, že jim pošlete správným směrem. "Sem umístěte gauč."

Mám pocit, že Veli-Johan Veromann má rád superhrdiny.

8. Dokumenty nápovědy

Pokud jste ve velké společnosti, pravděpodobně se tomu věnuje celý tým. Ale pořád vás budou štípat za ilustrace a snímky obrazovky. To si zaslouží tolik (nebo více) úsilí jako přihlašovací stránka nebo zdroj aktivit.

Maya Gao je velmi užitečná. Spíš jako Maya.

9. Výchozí obrázek profilu uživatele / avatar

Registrace se sociálními účty nebo službami, jako je Gravatar, nám opravdu pomohlo předvést naše usmívající se tváře, ale pořád toho chlapa, který se nikdy neobejde, nahraje profilovou fotku. Dejte trochu slabosti a předveďte značku.

Hermes Strange dělá roztomilé věci. Jsou to roztomilé AF.

10. Tlačítko Odhlášení

Bohužel musíte uživatelům umožnit odejít. Jen předstírejte, že používají vaši aplikaci ve veřejné knihovně, a musí se odhlásit, aby někteří cizinci nezměnili název účtu na „Mr. Butts “. Nevhodný.

Myslím, že Kristofer pravděpodobně ukradl Henrikovi peníze na oběd. Nechte ho odhlásit se a uprchnout ze scény.

Všechny ty malé věci

11. Zápatí aplikace

Většinu času se domnívám, že stránky prostě pokračují navždy, jako když lidé věřili, že svět je plochý a že to pořád jde dál. Poznámka: Země není plochá.

Ash Schweitzer by se mohl někde v lese ztratit. Někdo jí pomůže.

12. Prohlížeč Favicon

Víte ... ta malá ikona, která se zobrazuje na kartě prohlížeče. Stále ztrácím karty Střední, protože už nejsou zelené. Ale je to hezké!

Michael Flarup vytvořil úžasnou šablonu favicon, kterou si můžete stáhnout.

13. Strana 404

Rizvan uvízl v té díře. Jdi jí pomoct.

14. Výchozí / Hover / Focus / Pressed / Disabled / Etc. Stavy vstupu

Ugh, tolik států. „Focus + Hover“ může být můj nejoblíbenější / nejskrytější. Snímek obrazovky pochází ze systému návrhů nástrojů UX Power Tools.

Vedlejší poznámka pro můj vedlejší projekt, měli byste si to určitě prohlédnout:

15. Pořadí karet

Pořadí karet je funkce usnadnění přístupu, která umožňuje uživatelům procházet stránku pomocí klávesy Tab. Nemohl jsem najít obrázek, který by to reprezentoval, a tak jsem pořídil snímek obrazovky, kterou Christian Beck napsal od roku 2007, kde pro každou kontrolu uživatelského rozhraní v tabulce definoval pozici pořadí karet v tabulce (unavil jsem to, i když jsem jen psal, že…) SnoozeFest 2017 ™). Můžete skutečně definovat pořadí, ve kterém jsou položky navštíveny, aby se zajistilo, že primární akce budou před sekundárními. To je elegantní designová výzva.

Ahhh, dny psaní 80-stránkových specifikací a vývoje vodopádů.

16. Rolovací chování

Nejen, kde a jak se posouvá, ale co se vlastně posouvá. Je záhlaví pevné? Zápatí?

Panebože, Peter Blazej, tohle je hladké. Pěkný!

17. Tlačítko interkomu

Myslím tím nejméně, co můžete udělat, je, aby odpovídala barvám vaší aplikace. No tak lidi. Nejedná se o raketovou operaci.

Je to snazší než vyrobit misku obilovin.

18. Tlačítka Paginace

Za předpokladu, že jste se rozhodli pro nekonečné posouvání, budou uživatelé potřebovat způsob, jak se dostat na stránku 27. Nechte je!

Borunda odvedl skvělou práci. Miluj tu žlutou, Borundo!

19. Kurzory

Tlačítka by měla mít ukazatel. Neinteraktivní věci by měly mít výchozí kurzor. Text by měl mít textový kurzor. Vývojáři to vždy neví. Právě jsem přesměroval obrazovku aplikace na druhý den, kdy vývojář měl textový kurzor pro stav přechodu tlačítka. Soucit.

Jeff Broderick miluje klikání na věci. Také udělal freebie.

20. Mechanismy řazení / filtrování / vyhledávání tabulek

V datové tabulce „Skupiny s bradami“ musí být rychlejší způsob, jak se dostat k ZZ Top…

Eugen Esanu má výjimečné oko pro filtrační mechanismy a fialová / žlutá komba. Pěkný.

21. Prázdné státy „Žádné výsledky“

Někdy něco vyhledáte nebo přidáte příliš mnoho filtrů a nedojde k žádným výsledkům. Jak smutné. Rozveselte své uživatele pomocí drzé ilustrace. Nebo váš bankovní účet a směrovací čísla.

Reiner Wendland pro Zendeska do značné míry pokrýval všechno.

22. Chybové stavy

Špatný vstup. Nesprávné heslo. Existující účet. Bylo vybráno příliš mnoho věcí. Existují různé způsoby, jak se věci mohou pokazit, zejména pokud jste moje babička a máte iPad na Vánoce. To byla chyba.

Mike Stezycki mě opravdu přemýšlel, že e-mail byl odeslán. Pak byl všechno:

23. Systémová oznámení

Systém vždy dělá něco za závěsem a někdy je hezké vědět, kdy se věci úspěšně dokončí (nebo ne). Určitě byste to měli vědět uživateli.

Toto je ze složky Doručená pošta Google. „Zpět“ je opravdu výhodné, když „omylem“ odstraníte e-mail od své mámy.

24. Rozevírací nabídka Empty Autocomplete

Automatické doplňování je úžasné, protože vám pomůže najít objekty v systému, ale někdy nedochází k žádným výsledkům. V tomto případě nechcete jen prázdné pole. Ukažte malou zprávu nebo jim umožněte podniknout nějaké kroky.

Jurriaan van Drunen zřejmě neměl ve svých kontaktech „podprsenku“. Pravděpodobně to nejlepší.

25. Stav načítání

Jistě, lidé budou pravděpodobně stahovat své telefony, zatímco se stránka načítá, ale v případě, že se skutečně podívají na své sexy přejíždění, pravděpodobně by měla existovat nějaká vizuální indikace, že se věci stále načítají.

Není to nejlepší forma překlopení, XPLAI. Pokračuj ve cvičení. Ale to je stále bolestně rozkošné.

Spusťte materiály

26. Ikona aplikace Friggin '

Jo, je to asi nejlepší, na co nezapomenete.

Jsem ochoten se vsadit, že Eddie Lobanovskiy změnil všechny své ikony na snídani. Lahodné.

27. Obrázky App Store

Daniel Beere nezapomněl na obrázky aplikací pro svou aplikaci. Vysoký pět, kámo.

28. Otevřený graf / sociální obrázky

Toto je obrázek, který se zobrazí, když tweetnete odkaz na Twitteru, vytvoříte příspěvek na Facebooku, pošlete odkaz na médium atd.…

Kristy T je oficiálně nedbalá. SF to udělá tobě.

Jak to vypadá v médiu:

29. Obrázky marketingu webových stránek

Nezapomeňte také, že pravděpodobně budou chtít, aby web vypadal jako Stripe, takže to přesně zkopírujte:

A pokud jste designér v Redkixu, musíte se ujistit, že obraz funguje na karmínově.

30. Obrázky prodejní plošiny

Pravděpodobně jste v pořádku, pokud zvládnete ten výše. Ale v tomto případě budete pravděpodobně muset drhnout obsah, aby odpovídal značce jakéhokoli šestimístného obchodu, na kterém váš skvělý obchodní tým pracuje.

Jo a prodeje pravděpodobně zakryjí všechny vaše makety jinými věcmi, takže se na to připravte.

31. Obrázky z decku

Jako obrázek prodejní paluby, ale trochu více vizionářský. Chci říct ... snažíte se získat peníze. Poznáte, jak to později umožnit.

Zde je obchodní tajemství, vždy vložte palubní desky do vašeho hřiště.  To není vtip.

32. Obrázky produktu Hunt

Ahoj jen aktualizovali stránky profilu!

Pořád mi chybí Medium 2.0, ale každý  dostávám  pomáhá  mě pohnout  dál.

33. Obrázky reklam Facebook / Twitter

"Ale my nebudeme provozovat Facebook reklamy!" Ha, dokud nebudeš. A pak ti to nikdo neřekne. Jen je udělejte a budete v bezpečí.

Nalezení reklamy, která NEMÁ na Casper Matraci, trvalo několik kopání. Zabijete hru, Caspere.

34. Obrázky sociálních médií

Jo, musíte vytvořit jednu pro všech 938 sociálních sítí. Naštěstí jsme pro vás vytvořili nástroj Sketch. Vítejte, kluci.

35. Spouštěcí e-mailový banner

Pokud uděláte ilustraci, ztrojnásobte body. Proud.

^ Mimochodem, toto je zpravodaj mé agentury a moji spolupracovníci píšou opravdu skvělý obsah. Byli bychom rádi, kdybyste se přihlásili k odběru!

Zde jsou některé nedávné oblíbené:

Profil Věc

36. Předvolby oznámení

Je to úžasné, když vás aplikace upozorní, když se něco stane, a dokonce i chladnější, když hraje zvuk trumpety. Ale po devatenáctém ročníku vás už trumpety opravdu unaví. Pravděpodobně byste měli nechat uživatele, aby se rozhodl, kdy trubka zazní.

Slack se nestal společností s 8 miliardami dolarů tím, že povolil nastavení oznámení !! Nailed to.

37. Fakturační stránka

Nezapomeňte, že lidé potřebují získat kopie svých účtů, aby vydali náklady za produkt, za který vám platí tisíce dolarů. A někteří lidé vytvářejí idiotské IT oddělení pro svou agenturu a nemohou vydržet, jak je těžké to najít. každý. singl. Měsíc. Není hořký.

Nevím, co to všechno znamená, ale bylo snadné se sem dostat!

38. Možnost „Smazat můj účet“

Jasně, já vím. Nikdo to neudělá. Ale hej, možná jednou jednou založí nový účet! Stejně jako lidé, kteří procházejí kiosek v obchoďáku a říkají „Vrátím se později a koupím tři!“ Jistě.

Existují legitimní důvody, které jsou pozitivní. Při sloučení do větší týmové licence jsem smazal účty. Odstranil jsem staré účty, které shromažďovaly prach, a chtěl jsem začít čerstvě. V každém případě je to dobrý zákaznický servis, aby se to také stalo dobrým zážitkem.

Pssst, pane prezidente, můžete deaktivovat svůj účet zde.

39. Nástroj pro oříznutí profilové fotografie

To je scénář požární noční můry pro většinu aplikací a nemusí to tak být. Když jsem křesťana změnil svůj profilový obrázek na Beyoncé, nechal mi Christian poslat screenshot z dřívějšího.

Nemohl se ani dostat přes tuto obrazovku, aby ukázal, jak to ořízlo fotografii. 2 z 10 hvězdiček. Nenavrhl by na to prsten.

40. Možnost / tok „Upgradovat můj účet“

Vadí mi to, jak obtížné je to pro mnoho produktů SaaS. Drž hubu a vezmi mé peníze. Nemělo by to být snadné ?! Jako ... nejjednodušší ?!

Vyrovnávací paměť má položku nabídky, kterou chcete upgradovat, pak velmi jednoduchou formu. Bam. Máš moje peníze. Cesta, Buffere.

Šílené toky

Nakonec jste dokončili všechny předchozí věci a domníváte se, že jste doma zdarma - a pak si doslova začnete jít domů na den hrdý na to, jak jste na míči.

Pak na půli cesty domů, usrkávání kombucha z velblouda, pamatujete si, že se vývoj ještě nezačal! # $% @

Jakmile bude vývoj zahájen, začnete si uvědomovat, že jen vysmívat se na jedné obrazovce ten příběh opravdu neříká (je to v pohodě, všichni se snažíme být líní). Vývojáři potřebují, abyste skutečně rozebrali, jak uživatelské zážitky plynou z obrazovky na obrazovku.

41. Tok „Změnit moji adresu“

Víte, kdy dostanete nový nový byt v centru města a musíte změnit svou adresu na KAŽDÉ KREDITNÍ KARTĚ, KTEROU JSTE VLASTNÍ?

Dhaval S. Gandhi chce zajistit, aby jeho Aloe Vera byl dopraven na správné místo.

42. Tok „Přidat kreditní kartu“

Někteří lidé (ehm, já) rádi uchovávají v evidenci sto kreditních / debetních karet, aby si zloději mohli vybrat z mnoha účtů. Proto je snadné přidávat karty. To je opravdu vše, co k tomu musím říct.

Vypadá to příliš reálně, Carlos Medina. Nesouvisí, právě jsem si koupil nějaké nové boty a nestálo to desetník!

43. Tok „Bulk Add“

Je to jedna věc, jak rychle přidat objekt do systému, ale je to úplně jiná věc, jak rychle přidat systém BUNCH OF OBJECTS.

Prosím, pane, můžu mít ještě nějaké?

44. Tok „Vytvořit vlastní filtr“

Pokud povolíte sofistikované filtrování, může být dobré přidat možnost uložit tento komplikovaný filtr na později. Tímto způsobem nemusíte znovu klikat milionkrát.

Oykun Yilmaz by mohl udělat tento krok dále tím, že umožní uživateli tento filtr uložit. Udělej to, Oykun!

45. Tok „Přidat do nákupního košíku“

Je trochu vtipné myslet si, že lidé na tento tok zapomínají, ale víte ... já jsem jeden z těch lidí. Drž hubu.

Alberto Conti zřejmě potřeboval 4 židle a 4 boční stoly. Musí to být velký dům ...

46. ​​Tok „Sdílet toto“

Sdílení se stalo všudypřítomným online, ale to neznamená, že je pro vás již navrženo. O to více důvodů, proč na to strávit nějaký čas.

Tomek Kwiatkowski opravdu ví, jak se dostat do společnosti.

47. Tok „Vytvořit ze stávajících“

Je to něco jako „Duplikovat + Upravit“ vše v jedné akci. V zásadě je uživatel schopen začít od existujícího objektu a podle potřeby jej aktualizovat.

Kyle Johnston píše spoustu skriptů. Možná tajně Christopher Nolan?

48. Tok „Pozvat někoho“

Neexistuje lepší způsob, jak do produktu přidat nějakou „virualitu“, než prostřednictvím pozvánek a sdílení. Dívám se na tebe Dribbble. Ujistěte se, že je to snadné, rychlé a zábavné!

Myslím, že Paula Pintaric a Christine jedou. Nebo pracují na projektu a sledují, jak ostatní lidé létají. To je horší.

49. Tok „Změna uživatelských oprávnění“

Znáš toho chlapa Grega? Víš, jak sešroubuje všechno, čeho se dotkne? Ano, možná budete chtít zrušit některá Gregova privilegia jen proto, aby neodstraňoval celý internet. Silly Greg.

Matt Shwery, na druhé straně ... mnohem méně klouby než Greg.

50. Tok „Smazat a obnovit“

Víte, když odstraníte něco SUPER důležitého a potřebujete jej okamžitě získat zpět? Ne? V pořádku.

Eric Tsai chápe, že jsme všichni dělali chyby.

BONUS # 51. Animace

Úplné odhalení jsem na ně vlastně zapomněl. Podívej, miluji animace, ale mám štěstí, když máme luxus, abychom je mohli postavit, když prodej chce prototyp hotový včera, a vývoj ukazuje na něco, co jsem úplně zmeškal ve své 8. iteraci vstupní stránky. A upřímně, pokud se vůbec dostaneme k animacím, jen si prohlédnu Dribbble nebo CodePen a pošlu něco, co se mi líbí, a řeknu: „Udělej to tak!“ Jsem?

Nejsem.

souhrn

Pravděpodobně zuřivě píšete seznam všeho, co jsem pro tento článek zapomněl. Nebojte se mi v komentářích laskavě připomenout. Designéři mají při navrhování produktů MVP na paměti asi milion věcí nebo velké funkce pro platformu podnikového softwaru. Doufejme, že to může být alespoň užitečný odkaz, který vám pomůže připomenout vám váš další projekt.

Když se nepokouším zapamatovat si každou maličkost (dělá magii), pracuji na návrhářských nástrojích Sketch ve společnosti UX Power Tools, abychom z vás udělali lepší a efektivnější návrháře. Více se dozvíte zde:

Sledujte UX Power Tools na Twitteru
Sleduj mě na Twitteru