Obsah
Když jsem zahájil svou kariéru, byl jsem webový designér. Pracoval jsem ve webdesignu čtyři roky, počínaje weby pro malé firmy a nakonec jsem přešel k větším klientům. Zjistil jsem, že mě to nezajímalo o grafický design, ani o práci pro větší značky. Více než vizuální design webové stránky jsem se zajímal o vzory stránkování, způsob interakce lidí s formami a věci jako vnímaný výkon.
Když jsem sledoval sci-fi filmy, díval jsem se na rozhraní. A když jsem hrál videohry, sledoval jsem, jak jsou rozloženy nabídky. Pokud vám některá z těchto vlastností zní povědomě, můžete být také srdcem designéra uživatelského rozhraní.
Opustil jsem svou agenturní práci a založil si vlastní společnost. Na své stránce LinkedIn jsem se pokusil shrnout svůj nový kariérní cíl: vytvořit co nejlepší software. Jsou to čtyři roky, co jsem začal pracovat na volné noze, a moje cesta se nezastavila. V těchto dnech pomáhám provozovat malou designovou společnost s názvem UI Mono. Nedávno jsme přivítali našeho čtvrtého člena týmu.
V tomto článku chci popsat, jaké to je být návrhářem uživatelského rozhraní, včetně toho, co přesně ta práce obnáší, kde najít nejlepší výukové zdroje a jak se zlepšit ve svém řemesle.
Co dělá návrhář uživatelského rozhraní?
Zjistil jsem, že obecně můžete práci návrháře uživatelského rozhraní rozdělit do čtyř kategorií. Komunikujete s klientem, zkoumáte, navrhujete a prototypujete a komunikujete s vývojáři. Podívejme se na každou z těchto fází podrobněji.
Komunikace s klientem
Komunikace klienta spočívá v pochopení problému klienta. Cílem je vypořádat se s podnikáním vašeho klienta, takže začátek projektu obvykle znamená hodně mluvit. Je fajn, když na začátku nevíte příliš mnoho o doméně vašeho klienta - můžete se na jejich podnikání dívat novým způsobem a představovat si možná designová řešení.
Chcete-li být dobrým návrhářem uživatelského rozhraní, musíte být nakonec schopni přemýšlet o podnikání svého klienta. Například váš klient může být v letectví. Když pro ně budete pracovat, nakonec budete mít o tomto odvětví dobré znalosti. Tip pro vaše vlastní štěstí je tedy vybrat si průmyslová odvětví, pro která pracujete moudře, abyste nakonec nebyli odborníkem na něco, na čem vám nezáleží, nebo o co nemáte zájem.
Během projektu se komunikace nezastaví. Jako designér budete neustále prezentovat svou práci. V naší společnosti jsme vzdálený tým, takže nemáme mnoho osobních setkání. Místo toho intenzivně využíváme sdílení obrazovky prostřednictvím videokonferencí. Komunikační nástroje jako Skype a Slack se používají každý den.
Je užitečné kombinovat synchronní a asynchronní komunikační metody. Hovor je skvělý, pokud potřebujete rychle získat spoustu informací, ale musíte být ve stejnou dobu. Myslíme na Slack jako na náš „virtuální vodní chladič“ a Basecamp používáme ke správě složitých designových projektů. Když navrhujeme prototypy pomocí HTML a CSS, používáme problémy GitHub k přímé diskusi o kódu.
Výzkum
Kromě komunikace s klienty provedete mnoho průzkumů. To by mohlo zahrnovat terénní studie, workshopy s klientem, analýzu konkurence nebo definování strategie - v podstatě téměř cokoli, co vám pomůže pochopit daný problém.
Výzkum je to, co informuje vaše možnosti designu. Je to článek, který jste si jednou přečetli, nebo ta nová věc, kterou Apple právě vydal. Když je čas vysvětlit, proč jste se rozhodli pro konkrétní design, váš výzkum vás podpoří.
Výzkum může být velmi široký. Často testuji nová zařízení pro výzkumné účely nebo se přihlašuji k nové webové aplikaci, abych studoval její uživatelské rozhraní.
Design a prototypování
Jako designér pravděpodobně strávíte většinu času konstrukčními a prototypovými pracemi. Projekt návrhu uživatelského rozhraní se může posunout vpřed mnoha způsoby, od skicování, přes podrobný design až po kódování.
Metoda, kterou používáte, do značné míry závisí na typu projektu. Co navrhuješ? Je to web, nebo byste jej raději nazvali aplikací? Využívá nativní technologii? Je to redesign nebo začínáte od nuly?
V naší společnosti neexistuje žádný pevný proces, ale většina projektů sleduje stejné hrubé pořadí: začínají náčrtky a drátovými modely, pokračují podrobným vizuálním a interakčním designem a končí prototypem.
Jako designéři trávíme spoustu času přemýšlením o našich nástrojích. I když jsou skvělé nástroje důležité, nejsou nejdůležitější. Schopnost kompetentně používat Adobe Creative Suite a aplikace jako Sketch je ekvivalentní schopnosti kreslit tužkou nebo malovat štětcem. Stále musíte udělat obraz.
Jak již bylo řečeno, zdravý zájem o nástroje je dobrá věc. Rád zkouším nové nástroje, které mi mohou pomoci zvýšit produktivitu. Mým oblíbeným nástrojem pro úpravy vektorů je Illustrator, ale většina mých vizuálních designových prací se dnes provádí v aplikaci Sketch. Ostatní členové týmu přešli na novější nástroje, jako je Affinity Designer.
Nástroje jsou velmi osobní volbou. Pokud dokážeme snadno spolupracovat, každý si může vybrat to své. Abychom mohli jednodušeji mluvit o našich návrzích s klienty, vyrábíme prototypy s InVision. Pro pokročilejší prototypování však používáme HTML a CSS. Nástroj, který potřebujete, závisí na práci, kterou s ním chcete dělat.
Komunikace vývojáře
Často zapomenutou součástí práce návrháře uživatelského rozhraní je komunikace vývojáře. V dnešní době nemůžete uniknout pouhým odesláním návrhů vývojářům a doufáním, že budou správně implementovány. Nejlepší designéři vědí, že výzvou není tvorba designu, ale jeho sdělování - nejen zúčastněným stranám, které musí dát svůj souhlas, ale také vývojářům, kteří jej musí implementovat.
Komunikace designu má mnoho podob: podrobné specifikace, poskytnutí prostředků, společné přezkoumání designu. To, co má smysl dodávat v každém případě, do značné míry závisí na tom, zda je projekt nativní nebo webová aplikace.
Tradičním přístupem je dodávat aktiva vedle návrhů obrazovek. Pomocí návrhů obrazovek můžete zjistit, jak bude design vypadat jako celek, zatímco aktivy jsou připravené k použití PNG a SVG ikon, takže vývojáři nemusí jednat s grafickým editorem.
V naší společnosti jsme zastánci dodávek více než toho. K zachování konzistence našich návrhů používáme průvodce styly komponent. Když se zabýváme webovým projektem, dodáváme podrobné sady HTML a CSS, dokumentované po částech, připravené k implementaci. Věřím, že mít designové oko v každé fázi vývoje softwaru je jediný způsob, jak dosáhnout mého cíle, kterým je vytváření softwaru světové úrovně.
Web vs nativní aplikace
Když navrhujete nativní aplikaci pro platformu (např. IOS nebo Android), máte sklon dodržovat určité pokyny. Když navrhujete web, není tolik pokynů. Obvykle se stává, že váš klient má pro svou značku soubor grafických pokynů, které určují, jak by věci měly vypadat.
Tyto pokyny však mají tendenci být přizpůsobeny marketingovým webům a to, co je v nich, nemusí vždy vést k dobrým rozhodnutím uživatelského rozhraní. Fonty bývají vybírány z marketingových důvodů, nikoli z důvodu čitelnosti. Barvy mohou být odvážné a nápadné, což funguje v reklamní kampani, ale ne v aplikaci, kterou používáte každý den. Tyto příručky je třeba interpretovat.
Existuje několik pokynů pro uživatelské rozhraní pro web. Můžete tvrdit, že web je tavící kotlík různých stylů. Pokud vytváříte cokoli, co se cítí spíše jako aplikace než web, potřebujete vědět o široce používaných rámcích jako Bootstrap a ZURB Foundation. Rámec začíná určovat, jak by věci měly vypadat, protože nechcete znovu objevovat kolo. A to je pravděpodobně dobrá věc.
V naší společnosti rádi používáme Bootstrap. Poskytuje rozumné výchozí velikosti pro běžné prvky uživatelského rozhraní, jako jsou tlačítka, datové tabulky a modály.
V oblasti webového designu vás více omezují technické kapacity webu. Bývalo to tak, že by bylo obtížné implementovat na webu jednoduché vizuální vzkvétání, jako jsou zaoblené rohy. Tyto dny jsou dávno pryč - nyní můžete kreslit uživatelská rozhraní se spoustou stínů, přechodů, animací a dokonce i 3D.
Jako designér je realističtější převzít kontrolu nad procesem a designem v prohlížeči. Neviděl jsem mnoho návrhářů uživatelského rozhraní převzít programování uživatelského rozhraní nativní aplikace, ale návrhář provádějící HTML a CSS webové aplikace je běžný jev. Pokud můžete kódovat své vlastní návrhy, budete mít výhodu nad svými nekódujícími kolegy a pro mě je to jediný způsob, jak skutečně pochopit, jak web funguje.
Omezení webu
Brzy zjistíte, že ne všechny skvělé triky, které se naučíte, jsou podporovány v každém prohlížeči, a to je realita navrhování pro web. Je dobré dodržovat známé zásady, jako je progresivní vylepšení, kdy načtete vylepšený obsah, kdykoli je to možné, ale také přemýšlet o tom, jak se obsah zhoršuje.
Nedávno se stalo populární „řezání hořčice“. Díky webovému týmu BBC to zahrnuje rozlišování mezi „dobrými“ a „špatnými“ prohlížeči a poskytování „špatných“ prohlížečů omezeným způsobem. Ve skutečnosti to však funguje pouze pro obsahové stránky.
Pokud jde o zážitky podobné aplikacím, mnoho lidí kvůli usnadnění vývoje omezuje podporu pouze na několik předních prohlížečů. To nás bohužel přivádí zpět k situaci z roku 1996, kdy k prohlížení obsahu potřebujete určitý prohlížeč.
Zlepšení vaší dovednosti
Jak tedy udržujete krok s rychle se rozvíjejícím webovým průmyslem a vylepšujete své dovednosti? Podívejme se na několik různých metod pro posílení vašich dovedností ...
Znalost platformy
Hlavní součástí arzenálu designéra je znalost platformy. Měli byste vědět o různých operačních systémech a o tom, jak je lidé používají. Jako designéři máme tendenci používat Mac, ale pak je snadné zapomenout, že většina lidí tam venku používá k provádění své práce Windows boxy.
Cítím, že něčemu můžete skutečně porozumět, pouze pokud to použijete sami. Raději používám svůj Mac k navrhování, ale trávím spoustu času vývojem různých jiných platforem. Mám několik kopií systému Windows nainstalovaných na mém počítači Mac jako virtuální stroje. Byl jsem zaneprázdněn testováním nových sestavení systému Windows 10 pomocí programu Insider společnosti Microsoft, abych zkontroloval různé změny v uživatelském rozhraní.
Pravidelně také nakupuji nový hardware, abych otestoval, jak funguje. Koupil jsem si Apple Watch, jen abych otestoval platformu. Poté jsem to prodal, protože jsem cítil, že mi to do života tolik nepřidává.
Kromě toho lze web považovat za svůj vlastní operační systém. Neustále se vyvíjí a každý týden jsou každému prodejci prohlížeče přidávány nové funkce. Je nesmírně užitečné vědět o technických aspektech prohlížečů, zejména o CSS a grafických schopnostech. Musíte vědět, co jsou SVG a WebGL a jak můžete používat API pro webové animace.
Každá platforma se vyvíjí v průběhu času a jako návrhář uživatelského rozhraní je vaším úkolem zůstat v obraze. Nakonec, cokoli navrhujete, nežije izolovaně, ale je součástí většího softwarového ekosystému.
Vraťte se k základům
To, s čím dnes zápasíme, se neliší od toho, s čím jsme bojovali před 20 lety. V knihách je spousta dobrých rad. Vyzkoušejte Defensive Design for the Web od Jasona Frieda a Matthewa Lindermana a pro začátek Don’t Make Me Think od Steva Kruga.
Pokud nevíte o pojmech jako modalita a finanční dostupnost, musíte si to přečíst. Měli byste být schopni vysvětlit, co je Fittsův zákon. Gestaltův zákon blízkosti? Toto je chléb s máslem designu uživatelského rozhraní.
Nechte se inspirovat hrami a filmy
Jako designér uživatelského rozhraní při své práci čerpám z dalších inspiračních zdrojů. Ve hrách nacházím spoustu inspirace. Některé hry jsou velmi složité a návrháři uživatelského rozhraní museli řešit stejné složité problémy s rozhraním jako návrhář uživatelského rozhraní pracující na obchodních projektech.
Hry mohou také znamenat trendy. Minimalismus nalezený v nabídkách Colin McRae Rally mi připomíná směr iOS7. Svým způsobem se design animace uživatelského rozhraní, který je nyní trendy, objevil ve hrách před mnoha lety. Přechod od skeomomorfismu k holým, funkčním rozhraním a „plochému designu“ se projevil i ve hrách. Porovnejte Oblivion z roku 2006 se Skyrim z roku 2011. Obě hry jsou RPG ve stejné sérii, ale rozdíl je markantní.
Inspirací pro mě byly také futuristické rozhraní ve filmech Marvel, jako je Iron Man. Nejsou to úplně použitelné příklady, ale nutí mě více uvažovat o výpočetní technice jako celku. Chceme budoucnost obrazovek nebo chceme obrazovky zmizet? To je pravděpodobně dobrá otázka, kterou byste měli položit v hospodě plné designérů.
Rostete jako designér díky tvrdé práci, vytrvalosti, rozhovoru se svými vrstevníky a četbě. Asi před rokem jsem v New York Times četl článek o lidech do 80. let, kteří nadále zdokonalují své řemeslo. Mám pocit, že teprve začínám. Co o tobě?
