Jak získat hodnotu z drátových modelů

Před jedenácti lety jsem se připojil k malé projekční agentuře. Bylo mi 20 a byla to moje první práce na plný úvazek. Prvních několik let jsem strávil v agentuře zaměřené na vizuální design. Mohu tuto strukturu realističtější? Vypadala by tato stránka lépe, kdyby byl zdroj světla z jiného úhlu? Jak mohu dosáhnout, aby moje tlačítka byla ještě lesklejší? Bylo běžné slyšet nápad klienta, následoval jsem pár otázek, otevírání Photoshopu a začátek designu. O několik dní později jsem klientovi představil jeden nebo dva vizuální pokyny, získal zpětnou vazbu, provedl revize a začal kódovat web v xhtml. Nejlepší designéři agentury vytvořili nejlépe vypadající webové stránky.

Jak moje kariéra postupovala, zjistil jsem, že ukázat klientovi drátový model předtím, než jsem začal s vizuálním designem, by nás mohlo ušetřit čas. Drátové kostky se však cítily trapně. Měli v úmyslu usnadnit prostor pro „rychlé revize“ předtím, než jsme se s klientem „rozhodli o směru“ a zahájili „proces návrhu“. Předpokládali se, že rychlejší vytváření než vizuální návrhy, a tedy rychlejší změny. Drátěné rámečky načrtnuté na papíře však byly považovány za příliš nepotažené, aby mohly být prezentovány klientovi, takže bych trávil čas vytvářením digitálních drátových snímků. Po představení drátových modelů jsem zřídka zjistil, že inspirovaly smysluplnou konverzaci. Vidění digitálních drátových rámců nás ve skutečnosti téměř nikdy nevedlo ke změně směru.

Při pohledu zpět jsem nenašel cenné dráty, protože jsem je použil k vyřešení špatného problému. Byly použity jako zaškrtávací políčko k přesunu projektu z „průzkumného“ do „připraveného k designu“, aby klientovi později nedošlo ke změně jeho mysli. To, co jsem si tehdy neuvědomil, je to, že v nejlepším případě drátové rámce vytvářejí mechanismus, který vymaní zjevné paradigmata designu. Umožňují vám lépe bránit směr (y), které jste se rozhodli sledovat, a pomůžou vám zpomalit směrování správným směrem, než zrychlíte špatnou silnici.

Proces návrháře juniorů:

Obrázek Kredit: Julie Zhuo

Výše uvedený obrázek je z článku Julie Zhou, Junior Designers vs. Senior Designers. Zachytává past, do které se snadno dostane: Běh s prvním nápadem, který přijde na mysl. Kdybych to mohl jen vylepšit, možná to bude fungovat.

Pro juniorské designéry je stále běžné zaměřit se na vizuální design před funkční design. Vizuální design je jasné místo, kde začít, protože se snadno sdílí a posuzuje: Vypadá tato obrazovka jako aktuální trend? Dostalo se vám mnoho podobných Dribbble? Je to dost ploché? Mají gradienty dostatečně gradient? To platí zejména pro designéry na začátku jejich kariéry nebo pro ty, kteří doufají, že se najmou. Efektní vizuální prvky se rychle vytvářejí, snadno se vkládají do našich portfolií, ukazují na a říkají „Navrhl jsem to.“

Proces vedoucího návrháře

Obrázek Kredit: Julie Zhuo

Po deseti letech ve světě designu jsem se dozvěděl, že jak něco funguje nebo proč je něco tak, jak je, je mnohem důležitější než to, jak něco vypadá. Vedoucí návrháři tráví kosmetikou mnohem méně času a mnohem více času ověřováním, že jdou správným směrem. Jak je uvedeno výše, vedoucí návrháři přicházejí s řešeními velmi odlišným způsobem.

Malování rozbitého automobilu, bez ohledu na to, jak skvělá je lakovací práce, neznamená, že je auto užitečné.

Jak tedy zamezíte vyleštění prvního nápadu, který máte? Jak přijdete s více přístupy, aniž byste investovali spoustu času? Jak se rozhodnete, zda je jeden přístup lepší než ten poslední? Nebo lepší než další?

Užitečné dráty

Chci se podělit o jednoduchou techniku, kterou nyní používám, abych se přinutil prozkoumat a ověřit více směrů, než se pustím do vizuálního designu. Ve zbytku tohoto článku je „drátový model“ skica na papíře. Papírové drátěné modely rychle vytvářejí a posilují, že nápady jsou levné a bezpečné zahodit. Papír také umožňuje komukoli v týmu účastnit se wireframing.

Používáním papíru se vyhýbáme záměně dobře navržených drátových modelů za dobré nápady.

Nastavení

Začněme. Vezměte si notebook (mám rád Pařížský papír pro pera od společnosti Borden & Riley) a nakreslete mřížku nejméně 20 malých obdélníků. Pokud pracujete na mobilním uživatelském rozhraní, udělejte z nich zhruba poměr stran zařízení, pro které navrhujete. U uživatelského rozhraní stolních počítačů je nastavte jako poměr stran monitoru počítače.

Proces

Nyní pomocí pera (mám rád PaperMate Flairs) vyplňte každé pole jiným přístupem k problémům s designem, které se pokoušíte vyřešit. Načrtněte nejdříve nejzjevnější nápady. Vyjměte je z hlavy, nepřestávejte, dokud nenaplníte každou krabici nápadem.

Je jen malá šance, že budete moci naplnit každou krabici skvělým řešením, a to je smysl. Chcete pokrýt co největší šířku, aby se vaše mysl mohla pohybovat od pohodlného k neznámému. Pokud se snažíte přijít s novým nápadem, snažte se udělat něco omezeného: Co když je nabídka radiální? Co když to jsou jen obrázky? Co když neexistují žádné obrázky? Co by Apple dělal? Co by Google udělal? Co když neexistují žádné seznamy nebo tabulky? Jaké jsou různé způsoby umístění nejdůležitějších prvků nejblíže k palci uživatele? Pro mě, častěji než ne, se věci začnou stávat zajímavými po prvních ~ 10 náčrtcích.

Pokud se snažíte najít nejlepší způsob rozvržení obrazovky, je užitečné vytvořit klíč, jako například: T (název), V (video), RV (související videa), sub (navigace) atd., Umožňující zaměřit se na rozvržení namísto prvků uživatelského rozhraní:

Náčrtky pro nevydanou stránku klienta s videem

Nebo snad pro odkazy na dokumentaci a pro analytiku:

Náčrtky pro nevydané uživatelské rozhraní řídicího panelu klienta

Pokud se zaměřujete na rozvržení uživatelského rozhraní a prvky, můžete nakreslit ve vyšší věrnosti:

Náčrtky pro aplikaci iOS společnosti eero

V tomto okamžiku by měla být vaše mysl vyčerpaná a všechna pole vyplněna. Pokud políčka nejsou vyplněna, přinutte se pokračovat. Pokud stále máte zbývající mozkovou šťávu, otočte stránku a načrtněte další nápady. Dosáhněte konce tunelu. Podivné. Buďte divní.

Nyní, když jsou vyplněny všechny krabice, podívejte se na ně a vyberte několik nápadů, které vypadají slibně. Promluvte si s někým a získejte jejich myšlenky. Přinutit se k verbalizaci konceptů často odhaluje nové a zajímavé nápady.

Tento postup opakujte

Zřídka, pokud vůbec, je vizuální design nejlepším dalším krokem. V tomto bodě je opět důležité nezavazovat se k pixelům. Udržování svých nápadů na papíře je činí lehkými a nezávaznými; cokoli lze změnit.

Nyní vezměte slibné nápady a nakreslete je ve vyšší věrnosti. Nakreslete větší políčka na novou stránku - na stránce A4 najdu čtyři políčka dobře. V této chvíli se snažíme zjistit, zda tyto nápady vydrží podrobněji:

Po dokončení je užitečné ukázat nápady s vyšší věrností a získat zpětnou vazbu. V minulosti jsem procházel klienta pomocí fotek z náčrtů pro iPhone. Protože jste na tyto náčrty nevěnovali příliš mnoho času, měli byste mít zpětnou vazbu, aniž byste se museli bát dalšího času, který může způsobit.

Další kroky

Ve velmi krátkém čase jste stránky naplnili různými přístupy k problému. Přinutili jste se rozšířit své myšlení a přijít s alespoň několika neobvyklými nápady. Odezvu jste obdrželi několikrát a v ideálním případě se některé nápady ukázaly jako slibné a podrobněji jste je prozkoumali. Nezachytili jste barvu, typ, osvětlení ani žádný jiný aspekt leštěného vizuálního designu. Zpětná vazba, kterou jste obdrželi, je spíše na vysoké úrovni a koncepční než estetická a přesná a snadno použitelná na více náčrtů.

To, co budete dělat dál, je jen na vás. V tuto chvíli mi připadalo užitečné opřít se o koncept „Hledání konfliktů“ společnosti Google Ventures, který pomůže najít rozdíly mezi nápady a rozhodnout se, jak nejlépe postupovat. Častěji než ne, zopakuji proces skicování a přemýšlím o tom, jak slibné obrazovky zapadají do toku. Co přichází před touto obrazovkou? Co následuje? Poté, co jsem načrtl různé přístupy k toku, vytvořím digitální prototypy, abych viděl, jak se toky cítí na skutečném zařízení.

Doufejme, že při použití této techniky budete moci rychle generovat více nápadů, podpořit ty, které jste si vybrali jejich porovnáním s jinými možnostmi, a vyhnout se zavázání k prvnímu nápadu na začátku projektu.

Bonus: Použití této techniky na jiné věci než na design

Když jsem pracoval ve střední škole, Nick Fisher, který napsal mnoho středních tweetů, mi řekl, že často napíše tweet deseti různými způsoby, než vybere ten, který zveřejní. Přinutí se psát různými způsoby, než se usadí na ten pravý.