Jak navrhnout web pomocí UX objektivu? Bez tance s tamburínou, SMS a registrace

Jak začíná design webových stránek? Proč Vasya dělá design pro 30 tisíc, Lena – pro 150k + a známé studio – pro 1000k + rublů? Proč konkurent vytvořil web za 200 tisíc a moje bude stát 500? A je možné vytvořit web jednou provždy, bez jakékoli z těchto fází schvalování a úprav?

Jsem Lena, designérka, a dnes si povíme, jak se v mé mysli (samozřejmě mé) vyplatí dělat projekty webdesignu. Samozřejmě není vždy možné a časově náročné dodržovat tyto pokyny jasně. Takto ale dosáhnete maximální efektivity s odpovídajícím rozpočtem.

Proč jsem to napsal?

„Jak navrhujete?“ – nejoblíbenější otázka mých zákazníků. A často se na to ptají i kolegové. Kromě toho se do procesu zapojuje pouze polovina zákazníků, sledují všechny fáze, žádají příklady. Zbytek častěji předstírá, že rozumí struktuře díla, ale v jejich očích se čte touha najít pro mě vhodný oheň. Ale čarodějnice nepřisahá, čarodějnice prostě funguje takhle.

Ale co? Řeknu vám to hned.

Pozadí

Představme si určitého zákazníka ve vakuu, který přišel s jeho nápadem. V nejlepším případě má malý TOR a několik skic pera (nalil do Figma, Miro nebo GDocs).

Potřebuje startupový design: webovou verzi, 2 aplikace a nějaké haraburdí pro investory. Kde začínáš? Ne, ne z obličeje. Ujišťuji vás – to se děje pořád. Když jsem se usmál, posílám projektového manažera (s dovednostmi UX) do bitvy a jdu do nejbližšího Starbucks na kávu, na chvíli zapomenu na zákazníka.

Krok 1. Demontáž projektu.

Takže široce smýšlející PM se snaží pochopit, s čím je projekt pojídán. Někdy v rozhovoru se zákazníkem musíte sklouznout dolů na zřejmé: „Proč se trojúhelník nevkládá do kulatého otvoru, nipanimaaaaayuyuyuyuyuyuyuyu …“

Výsledkem fáze by v ideálním případě měl být:

• postup nebo krátké technické zadání projektu;
• základní prototyp se základní funkčností;
• krátké a stručné vysvětlení: k čemu je projekt, čeho jsou konkurenti, jak je plánována monetizace, hlavní výhody a nevýhody zahájení projektu.

Moje rada:

1. Nezanedbávejte osobní volání nebo setkání s klientem. I když je vaše introverze kritická. Během karantény (ach, promiňte, sebeizolace) jsem se setkal s minimálně 3 situacemi, kdy hodinová korespondence udělala o projektu extrémně špatnou představu. A ano, aniž bych tomu čelil, nevěřil bych sám sobě.

2. Nebojte se klást hloupé otázky. Někdy může nejhloupější otázka otevřít dříve neviditelné aspekty projektu.

3. Vytvořte kontrolní seznam toho, co od klienta chcete. A nepokračujte v projektu, dokud nedostanete vše.

4. pokud v této fázi dokonce chápete, že se projekt nespustí a průmyslový design létajícího vozidla v podobě sekery je zřejmý pouze vám, zkuste se jemně ujistit, že jste všemu porozuměli správně (autotest pro blázen): vizuálně představte zákazníkovi sekeru. Pokud váš protivník v tom, co se děje, nevidí nic hanebného – jednáte, je lepší odmítnout, než získat minus v karmě.

Krok 2. Řezání surových prototypů, studující konkurenti & amp; skládání CJM

V této fázi diskutuji o surových prototypech s týmem a zákazníkem. Vše, co se stane, je postupně zarostlé detaily. A právě zde je nutná profesionalita všech účastníků. V tuto chvíli chápete, proč je projektový manažer, kterému zaplatíte 1 500 za hodinu, splní o 150% – a ještě o něco více.

Pak porovnáme, co se stalo s konkurencí. Někdy jsou – ale častěji ne. A dokonce nic podobného. Startupy jsou zábavné, ano. V tomto případě hledáme analogie, další služby s podobným modelem práce (a také z jiných témat). Porovnáváme logiku, zjednodušujeme, sestavujeme seznamy srovnání s konkurencí a pseudokonkurenty, dokončujeme prototyp.

Je čas vytvořit CJM. Zdravím inženýra, analytika UX … A rád bych řekl, že zase odjíždím na kávu – ale ne. Tři z nás shromáždili skupiny klientů, dohodli se se zákazníkem, zvykli si na role/pozvali respondenty, rozložili prototypy a začali zaútočit. Podrobně můžete vidět, jak vytvořit CJM, například zde https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Vytvoření CJM mohu věnovat samostatnou dlouhou knihu, a to se jednoho dne určitě stane.

Ve výsledku máme:

1. prototypy v2;

< li> přehled konkurentů;

2. CJM.

Teprve po tomto kroku můžeme říci, že máme právo pracovat na webu design.

Krok 3. Vytváření prototypů a copywriting UX

Všechny prototypy, které jsme dříve vyrobili, lze nazvat základní. Nyní vytváříme finální prototyp, na jehož základě provedeme průzkum cílového publika a po revizi design.

Všechno je zde zřejmé – pokud potřebujete něco „páni“, vezměte si Digital Producer a UX Copywriter. Pokud ne, můžete to udělat sami. Z litrů kávy uděláme klikatelný prototyp, který pokrývá maximální potřeby CJM. Ano, zdá se, že by mi Starbucks měl již získat věrnostní program.

Mimochodem – mnoho lidí se ptá, kdo je copywriter UX a proč to stojí tolik. Tato postava je především psychologem a analytikem UX a teprve za druhé je mužem pera. Má znalosti o chování uživatelů a je dobrý v prototypování a CJM. Text napsaný UX'er zjednodušuje cestu k uživateli a obecně rychle vede k uživatelsky srozumitelné konverzi.

Výsledné podrobné prototypy + texty jsou již podobné designu a vše vytvořené může být bezpečně vrženi do cílového publika a zálohovat pomocí analýzy otázek. Podle odpovědí dokončujeme.

Celkově po této fázi máme:

1. podrobně prototyp;
2. průzkumné listy;
3. texty – na prototypu a v samostatných souborech.

Krok 4. Design a ilustrace

Hurá! Konečně se dostáváme přímo k designu! Na základě konkurence, osvědčených postupů, přání klienta, přání levé paty na úplňku – kreslíme návrhy a ilustrace. Někdy diskutujeme. Někdy až 20 a vícekrát na jednu stránku (skutečná postava: ahoj, Anton!). U seriózních projektů, které využívají tisíce lidí, není počet diskusí rozhodující – důležitý je pouze výsledek.

S klientem diskutujeme o konečném designu, otestujeme jej pro cílové publikum, zdokonalíme ho.

Ukázalo se:

1. klikatelný design ve Figmě (320px + 768px + 1140px + velký);
2. vektorové ilustrace;
3. hemoroidy uměleckého ředitele (dobře, dobře, ne vždy)

Krok 5. Referenční podmínky pro návrháře a kontrolu rozvržení

Fíha, jedna z nejtěžších etap. Musíme shromáždit veškerý náš superdesign a co nejrozumněji vysvětlit návrháři rozvržení, co od něj chceme. Někdy takový TK trvá více stránek než všechny dříve shromážděné informace o projektu.

Píšeme, aniž bychom zapomněli snímky obrazovky:

• chování každého prvku při změně měřítka;
• skripty pro animace, vznášení a podobně;
• všechny možné výjimky;
• podrobné technické požadavky: prohlížeče, styly, sestavení, konkrétní přání.

Po rozložení to zkontrolujeme z různých zařízení a upravíme výslednou práci. Normou jsou až 3 iterace, čtvrtá je důvodem ke změně návrháře rozvržení. Mimochodem, mnoho lidí si myslí, že front-end práce není tak důležitá, rutinní – a dokáže to i opice. S tímto názorem zásadně nesouhlasím. Podle mého názoru stojí za to držet se dobrého návrháře rozvržení, který se také vyvíjí, jako milovaný iPhone.

Výsledek této fáze:

1. TZ pro návrháře rozvržení;
2. hotové rozvržení.

Krok 6. Programování

Jako designér mohu zákazníkovi pomoci určit prioritní rozsah práce a poskytnout svá doporučení pro iterace.

Jako specialista na UX chápu, co by se mělo udělat na prvním místě, aby se uvolnil ne nejkratší MVP. Zda použít tato doporučení nebo ne, je už volba vedení týmu.

Někdy také doporučuji zásobník – když na cestě narazím na originály, které ve 2Q20 vyvíjejí na straně plus něco, co se hardwaru prakticky netýká. Vývoj na stejném Pythonu, s přihlédnutím k plánovaným nákladům, bude 10krát levnější a 10krát rychlejší. Nepředstírám, že jsem odborníkem na výběr zásobníku, a často sám hledám radu. Ale když vidím, že se klient pokouší naskočit na hrábě s běžícím startem, snažím se alespoň přesvědčit, aby místo hrábě zvolil lopatu.

Na konci této fáze získáme:

1. dokument upřednostňující vývoj z obchodního hlediska;
2. návrhy zásobníku (obvykle několik ).

Krok 7. Testování na zařízeních, načítání testování

Spolu s asistenty testuji konečný výsledek na malé zoo zařízení. Ano, na profesionální úrovni to provádějí testeři – třetí strany nebo na straně klienta. Posledně uvedené však – jak ukázala praxe – často nevidí zjevné konstrukční body.

A to není kámen v zahradě testerů. Úkol QA je často nastavován zákazníkem v kontextu: „Zkontrolujte, zda vše funguje, a vyhledejte chyby“. Tlačítko, které odletělo 5 pixelů nebo neshoda písem, však není chyba.

A se mnou to nebude fungovat. Proto jsem znovu zkontroloval výsledný produkt z hlediska designu a rychlosti práce.

Výsledek tohoto kroku:

• dokument s úpravami designu;
• dokumenty odrážející rychlost produktu a chyby konkrétních (nejčastěji – mobilních) ) zařízení.

Krok 8. Spuštění provozu, testy A/B, závěry

Po uvedení produktu na trh sleduji, co se děje. Společně s inženýrem UX hledáme problematické okamžiky, kdy může uživatel vypadnout z kontextu nebo odejít ze svých vlastních důvodů.

Vybírám obecné nápady pro testování A/B vypracované v kroku 3, přidám ty, které se objevily po uvedení produktu na trh, naplánuji je v iteraci, diskutuji s klientem a kreslím. >

V tomto stavu se projekt přepne na průběžnou podporu, která zahrnuje:

• testování A/B;
• vykreslování nových funkcí, aktualizací;

< li> Tvorba kreativ, bannerů, grafiky pro reklamu atd.

Nakonec zákazník získá tým, se kterým se pohodlně pracuje. Náklady na takové služby měsíčně zřídka převyšují plat jednoho nebo dvou návrhářů trvale. Máme však mnohem více kompetencí, poskytujeme také pokročilé analytické a testovací schopnosti a máme velkou skupinu dodavatelů programování a dalších digitálních specialistů. Výhoda je zde tedy zřejmá.

Na konci fáze získáme:

• dokument obsahující plán A/B testů, vykreslené bloky pro testování , zkušební předpisy;
• smlouva o zákaznické podpoře.

A hlavní otázka pro všechny zákazníky: proč bychom vám měli věřit? Proč bychom měli platit tuto částku?

Ano, jsem designér jako tisíce dalších. Bolest, kterou jsem za posledních šest měsíců zažil, mě donutila napsat tento materiál poté, co jsem provedl několik projektů z fintech a podobných témat TK: „Chtěl bych, abys vytvořil hru, 3D akci, podstata je tato …“ A něco o „kravách“, Úkoly vývojářů, start-upy a další radosti ze života. A moc bych si přál, abyste se této bolesti vyhnuli. Konkrétně správně počítali projekty a přilákali ty správné specialisty, když vaše kvalifikace nestačila.

Buďme upřímní. Je téměř nemožné projít všemi těmito fázemi sám. A je nepravděpodobné, že jste D'Artanyan, který je výlučně obklopen osobami jednosměrné orientace a může dělat cokoli. Vždy bude něco trpět, což nakonec povede k finančním a časovým ztrátám pro zákazníka. Proč to potřebujete?

A ano, chápu, že v některých bodech nejsem nejvhodnějším dodavatelem. Odmítnu zákazníka, pokud nabídne snížit polovinu výše uvedených fází; pokud vidím, že člověk není připraven na partnerství; pokud chápu, že mě vidí jako mnohoramennou stonožku a nejsou připraveni spolupracovat se svým týmem.

A stejně. Kolik do pokladny?

• Hlavní cena vstupní stránky vyvinuté podle tohoto schématu je nejméně 70 000 rublů. Vezmeme-li v úvahu náklady, minimální zisk – získáme 100 000 rublů a více.
• Startupy, aplikace v nejjednodušší implementaci stojí 150 000 – 600 000 rublů nebo více.
• Složitá rozhodnutí jako „ mám soubor o všech klientech finanční instituce s moduly, blackjack a dámy “- od 1 000 000 rublů pouze za design a to je cena (!).

Kolik si vezmou velká studia, která pod svá křídla shromáždila důstojné profesionály – bojím se přemýšlet o jejich nákladech. A VHI se stejně jako firemní auto nebude kupovat samo.

Při práci s velkými projekty může interakce s klientem a jeho cílovým publikem trvat až ¼ pracovní doby. To je také třeba vzít v úvahu při plánování projektu.

Na konci

Záměrně jsem vynechal některé fáze, jejichž hodnota může být u projektů vysoká> 1 000 000 rublů a snažil jsem se vám přísahat, vrhnout se na vás výrazy jako RITE, ET, Desk Research atd.

Rád bych konstruktivně kritizoval, navrhoval, vaše příběhy interakce s klienty. Naším společným cílem je každopádně zlepšovat webové stránky, uspokojovat zákazníky a jejich klienty a přitom dělat to, co se nám líbí, na profesionální úrovni.

OMG! Článek je plný sarkasmu. Pokud vám to není blízké, zdržte se čtení. Říkají, že lidé, kteří nerozumí sarkasmu, čtou od konce.

Děkuji Irině Salvartové za ilustraci. Pro nápad na článek – všem klientům, kteří se v „karanténě“ stali mnohem více.