26 kroků k dokonalému návrhu produktu
Během posledních čtyř let jsem navrhoval dashboardy a aplikace a já jsem se naučil, jak s různými odděleními pracovat a využívat jejich znalostí, aby byl návrh výrobku efektivnější.
Dnes budu sdílet všechny kroky, které jsem vestavěla do své každodenní rutiny, a věřím, že jsem se stal lepším designérem.
Předběžné zpracování
1. Získejte co nejvíce informací (požádejte o tři příklady)
Pro mě není nic více jasné než vidět skutečný pracovní příklad. Když pracuji s novým klientem nebo na zcela nové vstupní stránce pro produkt, považuji za nejsnazší výchozí bod, abych požádal klienta, aby poskytl tři nebo čtyři inspirativní stránky, protože to opravdu pomáhá oběma stranám. Přimět svého klienta, aby dal nápady na stůl, vám dává příležitost snadno pochopit, co se jim líbí a co očekávají od dokončeného designu.
Pokud pracujete s několika týmy, měli byste se snažit věnovat tolik času vývojářům produktu, jako tomu bylo u vašich spolupracovníků. To, co jsem se dozvěděl, je, že klíčem k efektivnímu rozhodování o designu je zajistit, abys mluvil s týmem dev co nejvíce. V mém případě se vyskytly případy, kdy bylo nalezeno řešení problému, že jsem nemohl přijít sám.
Cílem je odstranit co nejvíce otázek, než se dostanete do vývoje.
2. Naučte se o osobách
Nejdřív musím říct, že jsem skeptický vůči osobám, ale teď to všechno má smysl pro mě.
Takže v úplném kontrastu s mým starším procesem, vidím, jak jsou personas velmi důležité při práci na funkcích produktu, zvláště když řešení má mnoho různých okrajových případů. Pomáhá vám pochopit, pro koho skutečně navrhujete. Cílem je mít asi čtyři až pět osob.
3. Nastavte přesné cíle - jak přesně bychom měli sledovat?
Myslím, že většina návrhářů / klientů ignoruje tento krok, ale jedním z nejdůležitějších aspektů návrhu pro obě strany je pochopení cílů produktu, který navrhujete. Máme tendenci skočit rovnou do obrazových bodů a rychle rozšiřovat uživatelské rozhraní projektu. Pokud se jedná o zbrusu novou webovou stránku nebo o novou funkci, ujistěte se, že nejprve nastavíte jasné cíle toho, co chcete dosáhnout.
Protože vše je trackable, mluvte o přesných bodech, které budete sledovat. Například by se mohly pohybovat od nových registrací až po řadu zákazníků využívajících Paypal vs. nákupy kreditními kartami. Vždy se ujistěte, že víte, jak vysoko máte za cíl na začátku!
(Budete to potřebovat, abyste mohli v tomto procesu později nastavit spoje v Mixpanelu.)
4. Nastavte složku projektu a začněte vytvářet moodboard
Existuje spousta místa pro inspiraci - Dribbble , Behance , Pttrns atd. Je opravdu snadné najít podobné projekty jako projekt, na kterém pracujete. Navíc může být již řešení problému, který zažíváte a který se snažíte vyřešit.
Když začnu pracovat na novém projektu, vždycky nastavím složku s názvy souborů - Source Files , Screens & Export , Inspiration & Resources . Uložím vše, co najdu na internetu, do složky Inspiration, aby bylo možné jej později použít k vytvoření základních moodboardu. Tato složka by mohla být naplněna jakkoli z pluginů, vzorů nebo dokonce případových studií od společnosti Behance.
Chybí nízká věrnost
5. Tabule
Pokud chceme přidat novou funkci nebo přepracovat proces, posadíme se a všichni na schůzce začnou kreslit nápady na tabuli, papíře nebo dokonce iPadu. Tato akce nám umožňuje postavit každého do týmu v pozici designéra. Později skončíme dvěma možnostmi návrhu, abychom zjistili, který z nich funguje nejlépe.
Vždy se snažíme projít celým zážitkem a diskutovat o většině případů na okraji během této části procesu. Je skutečně důležité, aby se jich nyní zabývaly, a to v průběhu fáze návrhu, nebo dokonce ještě horší, během vývojové části. Tehdy můžete ztratit hodně času a energie.
6. Vyjměte všechny obrazovky (jaké údaje potřebuje uživatel zadat)
Je čas přejít mimo tabule a seznam všech vstupů a příběhů uživatele. Zapsat, co přesně má uživatel vložit do určité obrazovky a jak může uživatel dosáhnout svých požadovaných cílů.
7. Zapište všechny možné stavy
Protože všechny panely panelů, aplikací nebo webových stránek mají různé stavy, je to další důležitý krok, na který byste neměli zapomenout.
Při navrhování se musíme věnovat všem. Je hezké mít lesklé grafy a chladné obrázky profilů v našich souborech Sketch nebo PSD. Nicméně uživatelé s největší pravděpodobností budou vidět opačnou stranu vaší aplikace. Zvláště když přijdou k vašemu produktu. Je třeba být připraven. Níže uvádíme příklad toho, jak se zabýváme prázdnými stavy v jedné z našich datových komponent.
8. Připravte si první schéma
To vše vede k závěrečné části nízké věrnosti. Díky výsledku práce na tabuli nyní známe všechny možné stavy, vstupy a cíle uživatele. Abych shrnul všechny interakce, vytvořil jsem schéma a abych byl upřímný, změnil jsem tento styl mnohokrát: Chystáte se ze souborů Sketch s rastrovanými rozvrženími na právě obdélníky, které symbolizují každou stránku s jejich názvy níže. To bylo řečeno, proces byl vždy bolestný, obvykle skončím v situaci, kdy se chceme později změnit nebo přidat něco později. S těmito řešeními jsem obvykle nucen dělat mnoho dalších kroků; jako například změna polohy řádků, šipek a obrázků.
Nedávno jsem používal Camunda Modeler , což není přesně návrhářský nástroj; je to jednoduchá aplikace pro vytváření technických diagramů. To zní zvláštně, ale tato aplikace je navržena tak, aby vám pomohla vytvořit základní diagramy. A co je nejdůležitější, všechno vytvořené je úplně škálovatelné. Můžete snadno přetáhnout libovolný bod a automaticky vytvoří pro vás čáry a šipky. Můžete také vybrat z různých typů bodů, které mohou být užitečné pro zvýraznění, kdy například uživatel obdrží e-mail od společnosti Intercom. Camunda exportuje do SVG, což usnadňuje barevné trackable body ve skici.
Práce / návrh
9. Moodboard
Jsem schopen začít s tvorbou náladové tabule, protože shromažďuji všechny obrázky do složky Inspiration. Používám nástěnné tabule především proto, abych diskutoval o svých myšlenkách s kolegy a popsat některé z vizuálních nápadů, než začnu proces pixelů.
10. První návrh
Navrhování je vždy probíhající proces. Chystáte se hodně opakovat na cestě k skvělému výsledku. První nácvik je také způsob, jak získat zpětnou vazbu. Nemusíte přistupovat k perfektnímu designu pixelů, abyste mohli začít přijímat zpětnou vazbu od vašich spoluhráčů, klientů nebo potenciálních uživatelů. Abych získal své první myšlenky a zahájil diskusi, obvykle míchám obrazovky z našich současných návrhů. To nám umožňuje začít s reálným designem za méně než jeden den. Můžete udělat první jednoduchý prototyp, který vyzkouší, zda se věci dobře spojují.
11. Napište svou kopii
Kopie je jedním z klíčových aspektů rozhodnutí uživatelů a považuji to za důležitou součást návrhu. Není nic horšího než pěkný design s matoucími dialogy, kde se uživatelé snaží najít další krok.
12. První interní test
Pomocí prvního návrhu můžete rychle vytvořit prototyp Zázrak nebo Invision . To je něco, co jsem nedávno začal dělat, a ukáže se, že je to další úžasný potvrzující aspekt. S prototypem nyní můžete snadno nastavit hovor s 3 nebo 4 lidmi z vašeho týmu a sdílet prototypní spojení s nimi a pokusit se položit několik otázek a zároveň otestovat jejich konkrétní toky / scénáře.
Tímto způsobem můžete snadno vyzkoušet své znalosti z dotazování a zjevně otestovat své rozhodnutí o návrhu na skutečných uživatelů, aniž byste se museli starat o zbytečné zdroje a čas. Mám tendenci vybrat si lidi, kteří se tak moc nezabývají vývojem palubní desky. Také se snažte vyhýbat sledování někoho, kdo již s prototypem již měl možnost hrát.
13. Etiketa
Všichni víme, jak je těžké zůstat uklizené. Jak dodat další funkci. To obvykle vede k nepořádnému souboru Sketch nebo PSD. Dozvěděl jsem se hodně o rozdílech mezi tím, že pracuji jako jeden návrhář při startu, pracuji ve skupinách nebo pracuji na vlastních digitálních produktech.
Když pracujete v týmu, přemýšlejte o vašich PSD, jako byste je vytvářeli pro někoho jiného. Používám pravidlo, že pokud máte ve složce více než 8 vrstev, měli byste vytvořit nový.
Na Sketch jsem našel jeden skvělý plugin, který mi zachránil hodiny, když jsem pracoval na svých UI sadách: Přejmenovat .
Tip: Dejte vše na plátno. Vždycky jsem se snažil navrhnout pěkné hlavičky, zatímco ostatní plátno bylo bílé. Při navrhování jsem se naučil, abych celý obsah zavedl jako první - prostě si zahrajte s rozložením a typografií. Je mnohem jednodušší navrhnout pěkné detaily a hrát si s celým konceptem s obsahem na místě.
14. Vytvořte prvky uživatelského rozhraní a začněte hrát s Lego
Pravděpodobně jsem pozdě na večírek a to už bude znít zastaralé, když to píšu. Důvod, proč jsme na cestě nedělali žádnou drátovou kompozici, je jednoduchý. Náčrt 39 přichází s něčím, co jsem našel neuvěřitelný a to je "tvar s vlastnostmi změny velikosti". To je něco, co dělá projektování snadné pro všechny v týmu. Náš soubor Sketch je nyní čistý drag-and-drop. Můžete snadno dát některému z vašich spoluhráčů prázdné plátno a mohou vytvořit takřka vysoce kvalitní návrhy. Díky tomu dokážeme vynechat všechny nástroje pro frézování a začít s téměř reálnými hledáčkovými pixely.
To také jde ruku v ruce, protože jsme schopni skutečně přeměnit drátové rámy na reálné návrhy. Každý PM může vytvořit drátový rám a pak ho mohu snadno převzít a přeměnit na věrnost.
Aktiva a doručení
Když skončíte s navrhováním a iterací na základě první zpětné vazby, ještě jste nebyl hotový. Nyní přichází čas předat vaše návrhy vašim inženýrům / vývojářům.
15. Specifikace
Jedním z mých hlavních cílů je vždy být schopen sdělit mé rozhodnutí týmu a být schopen co nejvíce omezit potíže našich vývojářů, aby jim poskytli co nejlepší zdroje. To pro mě je rozhodně nejdůležitější součástí mé práce jako návrhářka.
Protože jsme dokumentovali veškerou interakci a všechno jsme připraveni od začátku našeho procesu, vytváření specifikací je kus dortu. Mám tendenci psát specifikace v Dokumentách Google nebo pod obrazovkami ve skici. Je to pěkné zvládnout vaše návrhy s vysvětlením všech vlastností, takže někdo může v budoucnu chytit váš soubor.
16. Schéma
Tato technika je pěkná pro vytisknutí návrhů a diskusi s týmem. Ale v dnešní době si myslím, že existují lepší možnosti. Jako třeba připravit konečný prototyp.
17. Konečný prototyp
Jedním z klíčových věcí pro mě je vždy mít připravenou interakci v prototypu. Obvykle skončím se 3-5 prototypy na cestě do finále pro ty malé setkání se spoluhráči nebo ukázat určité toky. Mám tendenci připravovat všechny státy ve Skicu na jednom kresleném plátně a pak duplikovat tyto artboardy, aby každý stát připraven při exportu.
Je skvělé přidávat komentáře k dílům vašich návrhů, aby se vaše specifikace rozšířila mnohem více, takže i copywriter může snadno přejít a zkontrolovat reálné obrazové body a toky, pokud každá kopie a dialog funguje podle potřeby.
18. Rychlé video> Poznámky
Když na týmu nebo klienta neuvádím věci na Hangoutu, posílám video z obrazovky, ve které jsem procházel prototypem a vysvětlil jsem všechno, co jsem navrhl. Je to pěkné potvrzení pro mě před jakoukoli prezentací, že znám odpověď na jakoukoli otázku a možné fantazijní interakce, které jsem se rozhodla navrhnout. Mohl by být také hezky použit při práci ve vzdálených týmech. Každý má přístup k přehrání celého myšlení interakcí kdykoliv.
19. Animovat
Jako pěkný konečný dotek můžete použít After Effects nebo Zásada . Je dobré vysvětlit, jak chcete, aby se toto nebo toto pohybovalo.
20. Návod pro styl
Dalším důležitým bodem pro inženýry je vědět, jak budou věci reagovat v různých scénářích. Přemýšlejte o chybových stavech vstupu nebo kde zobrazovat chybové zprávy. Stejně tak bude vypadat stav zdravotně postiženého odesílatele, kde položit spinner apod.
Je to super jednoduché pro inženýry, kteří jdou jen přes vaše kreslicí symboly a stylové prvky jeden po druhém, než začnou kódovat všechny obrazovky díky tomu, že mají soubor Sketch jako bloky Lego.
Závěrečné testování
Jelikož jsme s předáním našich projektů inženýrům, jsme schopni se zaměřit na poslední část procesu - testování našich rozhodnutí!
21. Inspectlet / HotJar
Jakmile se návrhy změní na pracovní kód, nezapomeňte zahrnout vaše Kontrola nebo HotJar Úryvky JS. Jsem vždy nadšená (nebo frustrovaná), když vidím, jak se uživatelé orientují na našem panelu nebo co dělají na mé stránce portfolia. Inspectlet je úžasný při zachycení všech vašich uživatelských relací. Funguje skvěle i pro větší projekty.
Dodává se s jednoduchým filtrem "/ page", který vám pomáhá sledovat relace určité funkce nebo toku.
22. Mixpanel
Mixpanel funguje skvěle pro validaci našich cílů (ty, které jsme nastavili na samém začátku našeho procesu). Mixpanel pomáhá zjistit, kolik uživatelů dokončí konkrétní toky. Kolik uživatelů upustilo před nastavením účtu. Kolik lidí šlo z hlavní vstupní stránky pro uložení a na náš nejcennější produkt.
23. Google Analytics
Nejsem schopen kódovat velké věci, ale alespoň jsem schopen pracovat se soubory CSS a jednoduchým kódem. V poslední době mě zajímalo, kde uživatelé kliknou a při pohledu na Hotjar heatmaps, takže jsem se rozhodl nastavit i základní nástroj pro sledování kliknutí v Google Analytics. Můžete také snadno sledovat všechna kliknutí uživatelů na svých webových stránkách.
To mi pomáhá snadno mapovat chování uživatele. Zjistil jsem například, že lidé používali špičkovou navigaci na mých stránkách o 5 krát více než zvýrazněný odkaz v úvodním textu. Bohužel neberá počet kliknutí od uživatelů s AdBlock.
24. Interkom
Když jsme se dohodli na našich počátečních tocích, hovořili jsme o části toků, ze kterých uživatel obdrží e-mail Interkom . Naší odpovědností je zajistit, aby veškerá kopie a zpráva samy o sobě daly smysl a jsou užitečné pro návštěvníka. Ujistěte se, že vaše e-maily vedou vašeho uživatele k vášnivému výsledku a vždy se snaží poskytnout konkrétní články podpory a informace o tom, jak pokračovat v toku.
Poslední pár slov
25. Zanechte Dribbble za sebou
Z toho, co jsem se dozvěděl a jak se změnil design během posledních 4 let, jsem se dostal do bodu, kdy Dribbble nemusí být nezbytně místem, kde chcete vytvořit své návrhy. Vždycky jsem chtěl mít pěkné pixely se sexy profilovými obrázky, ale to není to, co skuteční uživatelé potřebují a budou používat.
Zde je příklad, vlevo uvidíte něco, co jsem pro Dribbble navrhl. Po pravé straně uvidíte něco, co jsem navrhl, jakmile jsem strávil nějaký čas sledováním lidí, kteří upravovali profily a uvědomili si, že moje vize nedodává to, co potřebují.
Můžete obdržet 500 likes pro jasnou šílenou animaci bramborové nebo posuvné pizzy, ale co je opravdu důležité, je, že uživatelé zjistí, jak spravovat četnost firemních e-mailů nebo jak filtrovat své analytiky výkonu.
[- Tento příspěvek byl původně odeslán na médium , znovu vydané s povolením autora. -]