UX design – podrobný průvodce. Co je UX a UI design - vlastnosti a rozdíly Co je to ui ux design

Představujeme nový článek v seriálu. V tomto díle seriálu se budeme zabývat pozicí UX/UI designéra - specialisty zodpovědného za sladění vzhledu a logiky produktu.

Návrhář UX/UI- specialista, který navrhuje uživatelská rozhraní.

Typický pracovní den zahrnuje:

• práce na prioritních úkolech (návrh, kreslení);
• komunikace se zákazníkem;
• provádění úprav.

Výhody a nevýhody

Povolání přitahuje designéry příležitostí udělat svět lepším místem, stejně jako svým příslibem a poptávkou na trhu:

„Rád si myslím, že jste schopni vyřešit problém pro velké publikum nebo alespoň zpříjemnit a zpříjemnit proces vnímání obsahu. Je zajímavé šťourat mezi lidmi a snažit se pochopit, co skutečně potřebují, a pak přijít na to, jak to implementovat.“

„Tato oblast je velmi zajímavá, protože správná rozhodnutí designéra mohou výrazně zjednodušit a zkvalitnit život skupině lidí, pro kterou je určitý produkt nebo projekt vyvíjen. Můžete se také dozvědět mnoho o různých typech podnikání ve světě, což může být užitečné pro zahájení vlastního podnikání a získání globálnějšího pohledu na svět.“

„Osobně mě štvou hloupé aplikace, nešikovné umístění tlačítek ve výtazích, špatně navržené interiéry aut – rád dělám něco, co to může zlepšit. Tento svět je tak nedokonalý (ne příroda – tam je vše dokonalé a vyvážené), že pro chytrého designéra se vždycky najde práce.“

„Učil jsem se na programátora systémového administrátora, ale vždycky bylo zajímavé dělat něco ve Photoshopu. Dříve nebylo tolik tutoriálů, videolekcí a článků jako nyní, takže jsem se většinu funkcí a funkcí učil náhodně. Později jsem se rozhodl vyzkoušet Illustrator, byl mnohem složitější než Photoshop, ale na tvorbu vektorů výborný. Rád tvořím něco nového, něco užitečného a krásného, ​​rád se zdokonaluji a vidím dosažený výsledek. Pole designu vám toto vše umožňuje. Je také zajímavé, jak se mění trendy, objevují se nové programy a funkce, to vše je potřeba neustále sledovat a neustále se vyvíjet.“

„Mám rád design UX/UI, protože je to velmi slibný směr. Technologie se vyvíjejí velmi rychle, některá rozhraní jsou nahrazována novými a všechna je třeba navrhnout. Zde můžete přemýšlet nejen o tom, zda rozhraní vypadá krásně, ale také o tom, jak je pohodlné a jak moc dokáže vyřešit problém člověka (buď rychle najít správnou kavárnu, nebo si zarezervovat lístek na koncert, nebo pomoci připravit váš oblíbený nádobí). Rozhraní jsou všude: od lékařského vybavení po auta. Když auta létají, bude nutné, aby se někdo zamyslel nad interakcí jejich rozhraní s člověkem. A budeme to my – designéři UX/UI.“

Dalším plusem je možnost práce na dálku (20 % všech designérů), velký výběr projektů na volné noze.

Mezi mínusy Designéři svou profesi nazývají komunikací se zákazníky, kteří nevědí, co chtějí, a také podceňováním ze strany IT kolegů:

"V 80-90% případů musíte pracovat bez technických specifikací s požadavky jako: "Udělejte to mega krásné a mega-konfigurovatelné."

„Postoj k designu a designérům na Ukrajině považuji za nevýhodu profese. Z nějakého důvodu si každý myslí, že pokud jednou otevřel Photoshop, může být automaticky designérem a nezávisle se rozhodnout, kolik času stráví návrhem. Na vině jsou zejména nezkušení manažeři a programátoři (jeden začínající manažer tvrdil, že by mohl úkol dokončit za 30 minut v programu Paint, ale nemá čas na kreativitu).“

„Nevýhodami jsou absence jakéhokoli seriózního školení a nedostatečné porozumění kompetentním procesům a metodologiím na trhu. Při outsourcingu není možné sledovat výsledky a zvyšovat vlastní osvědčené postupy. Produkt je pro dospělé poněkud monotónní a pro startupy naprostý chaos.“

“Nevýhody – jako v celém IT – jsou sedavá práce, bolestivé oči a někdy zákazník, který potřebuje udělat bílou #ffffff ještě bělejší :)”

Jak se stát a kam se dále posunout

První a hlavní dovedností uživatelského rozhraní je zvládnout grafický editor. Nejoblíbenějšími nástroji jsou Adobe Photoshop, Sketch, Princip, Adobe Illustrator, After Effects. Pro začátek můžete zkusit překreslit snímky obrazovky jakékoli mobilní aplikace nebo webu. Nekopírujte však pouze (i když to musíte umět také), ale všimněte si některých nepříjemností a nabídněte řešení, jak to udělat lépe.

Je také důležité porozumět teorii barev, typografii, kompozici, ergonomii webových stránek (zásady použitelnosti rozhraní) a také základům marketingu, obchodní analýzy a psychologie. Pro efektivnější komunikaci s vývojáři se budou hodit dovednosti v oblasti layoutu (HTML/CSS) a základní znalost JavaScriptu a frameworků.

Můžete začít studovat UX tím, že se seznámíte s metodikou čtením knih od Nielsena Normana, Alana Coopera, Jeffa Raskina, Steva Kruga, Alistaira Coburna. Více aplikovanou literaturou je „The User Experience Team of One: A Research and Design Survival Guide“ od Leah Buley.

„V moderním světě existuje mnoho příležitostí k implementaci. Zakoupil jsem a nadále nakupuji online kurzy na platformách jako Coursera, Udemy, Edx. Sleduji online konference od Adobe, Google, čtu technickou literaturu, analyzuji práci na Dribbble, Behance, Awwwards.“

„Návrhář UX/UI si musí prostudovat klasiku uživatelského rozhraní: „Don’t Make Me Think“ od Steva Kruga, „Design of Common Things“ od Normana, přečtěte si Luke Wroblewski. Musíte neustále cvičit, vžít se do situace uživatele. Najděte si mentora, který vás upozorní na chyby, poradí a podpoří růst.“

Svou kariéru můžete začít na volné noze na různých platformách v anglickém jazyce, bude také užitečné otestovat své dovednosti na mistrovstvích, například Dev Challenge. To vám pomůže vytvořit vaše portfolio.

UX a UI dovednosti a kompetence ()

Osobní vlastnosti, které jsou důležité, jsou:

• vytrvalost;
• vytrvalost;
• kreativní myšlení;
• perfekcionismus;
• touha učit se a rozvíjet se;
• schopnost slyšet kritiku.

„Člověk, který navrhuje rozhraní, je inženýr, musí mít silné analytické myšlení, vysoce rozvinuté schopnosti empatie a schopnost proniknout do podstaty věcí. Samozřejmě nechybí ani praktické dovednosti – zvládnutí různých technologií a nástrojů, ale to je zpravidla až na druhém místě člověk. A není těžké se jím stát, pokud na tom tvrdě pracujete, čtete knihy a články o designu (kompozice, barevné vědy, typografie) a psychologii (potřebujete pochopit, jak se člověk rozhoduje a jak funguje jeho mozek), chodíte na přednášky a workshopy a hodně k procvičování“.

Možné kariérní cesty Návrhář UX/UI:

• zlepšit se jako designér, zvýšit svou míru (pokud jste na volné noze);
• ovládat související oblasti, rozvíjet se jako produktový designér, VR designér, VFX designér, herní designér;
• vyrůst na pozici Art Director (Head of Design);
• vyvíjet, jako byste chtěli přejít od designu k produktovému managementu obecně;
• staňte se, pokud máte zájem o koordinaci lidí;
• udělejte, pokud vás více zajímá technický aspekt;
• zvládnout programování a stát se vývojářem uživatelského rozhraní;
• zkuste se v marketingu nebo .

„Technologie se vyvíjí velmi rychle a stále se objevuje něco nového, vše vyžaduje svůj specifický design, má své požadavky a vlastnosti. A my, designéři, pomůžeme, aby to všechno bylo lepší, krásnější a pohodlnější :)“

Děkuji Julii Bondarenko, Maximu Palivodovi, Marině Popovichenko a 25 dalším ukrajinským designérům, kteří řekli DOU o své pozici, za pomoc při psaní článku. Citáty uvedené v článku jsou převzaty z jejich příběhů.

Oblastí souvisejících s designem v IT průmyslu je poměrně hodně. Nejběžnější z nich jsou designéři, skrytí za zkratkami UX a UI. Některým lidem se dokonce podaří zahrnout front-endové vývojáře jako designéry. Zkusme zjistit, kdo jsou designéři ve světě IT, jaký je rozdíl mezi UI a UX a jaký vztah mají front-end inženýři k navrhování.

Návrháři

Vývoj rozhraní aplikací, webových stránek nebo her je poměrně složitý proces a vyžaduje aplikaci znalostí z různých oblastí: inženýrství, psychologie a designu. Návrháři uživatelského rozhraní (v angličtině - User Interface nebo UI) se zaměřují na způsob zobrazení funkčnosti webu (vyhledávání, karty, nabídky) a na detaily interakce mezi klientem a rozhraním. Cílem designéra uživatelského rozhraní je esteticky přijatelný moderní design produktu. UX je zkratka pro User Experience, což znamená „uživatelská zkušenost“. UX designér se více zaměřuje na použitelnost a pochopení rozhraní potenciálním uživatelem. Takový specialista bude často provádět výzkumy a průzkumy, které budou tvořit základ pro vytvoření konceptu designu, a také testovat koncepty během vývoje a po něm. Obvykle se zaměřuje na strukturu, obsah, navigaci a způsob interakce uživatele s těmito prvky.

Vyrábí sitemapy, prototypy, které jsou základní strukturou při tvorbě softwaru. Cílem práce UX designéra je, aby uživatel rychle a bezbolestně dostal z webu to, pro co sem přišel. Dnes je však velmi běžné vidět tyto dvě specializace napsané s lomítkem. To znamená, že úkoly obou směrů plní jeden specialista. Designér UX/UI navrhuje interakci uživatele s rozhraním, rozhoduje, co přesně potřebuje udělat, a je zodpovědný za to, jak bude toto rozhraní ve výsledku vypadat.

Co potřebuje návrhář UX/UI vědět

Grafický editor. Nejoblíbenějšími nástroji na trhu jsou Adobe Photoshop, Adobe Illustrator a také Sketch, Figma. Vyberte si editor, který vám vyhovuje, a zkuste nejprve nakreslit screenshoty webové stránky nebo aplikace a trochu je zmodernizovat.

Prototypovací nástroje (Mockplus, Axure). Prototypovací nástroj je spojnicí mezi nápadem a jeho realizací. Nezáleží na tom, jaký nástroj použijete. Můžete vyzkoušet několik a rozhodnout se pro ten, který vyhovuje vašemu stylu a preferencím.

Psychologie uživatele. Již ve fázi návrhu byste se měli zamyslet nad tím, zda vám nebo někomu jinému bude vyhovovat toto rozhraní. Vžijte se do kůže klienta, vytvořte si s ním pevné spojení a buďte pozorní k jeho potřebám. Koneckonců, produkt bude úspěšný, pokud po něm bude poptávka.

Budete také potřebovat znalosti teorie barev. Některé věci známe z dětství, hlavně ti, co chodili do umělecké školy. Ohledně práce designérů však existují určitá specifika. Základní znalosti lze získat z knih nebo článků na internetu.

Je vhodné mít představu o typografie, prostředek pro kombinaci textových a vizuálních složek.

Složení a použitelnost webu.

V závislosti na specifikách práce možná budete potřebovat rozumět HTML a CSS nebo (některým) programovacím jazykům (odkazy na zdroje naleznete níže v části „Co by měl front-endový vývojář vědět“).

Front-end vývojář

Hlavním úkolem front-end vývojáře je vývoj klientské části rozhraní. To znamená, že takový specialista „revitalizuje“ to, co designéři navrhli. Je zodpovědný za provoz a provoz rozhraní a méně za vizuální obsah. Front-end vývojář často potřebuje najít dobré řešení pro uživatelské rozhraní ve fázi jeho vývoje, takže často spolupracuje s návrhářem UX/UI. Kód napsaný front-end vývojářem běží v prohlížeči uživatele (jak se říká „na straně klienta“). Jedním z nejdůležitějších úkolů je také zkontrolovat, zda web nebo webová aplikace vypadá stejně na všech platformách a prohlížečích.

Co by měl front-end vývojář vědět

Front-end je zpravidla založen na třech pilířích: značkovací jazyk stránky HTML, šablony stylů CSS a programovací jazyk JavaScript. Kromě toho musí vývojář front-endu rozumět principům fungování protokolu HTTP, serverů a prohlížečů a funkcím zobrazení rozhraní na různých zařízeních, která jsou aktuálně na trhu. Nástroje a metody pro tvorbu webových rozhraní se neustále vyvíjejí a mění, takže to musí vývojář neustále sledovat.

HTML a CSS (rozvržení)

Toto je rozložení, samotné cihly, ze kterých je pozemek postaven. Značkovací jazyk HTML určuje organizaci webu, obsah a veškeré interakce mezi nimi. Umožňuje určit horní část stránky, spodní část, boční bloky s obsahem, nadpisy, zobrazení textu a multimediálních prvků. CSS styly se používají k ozdobení prvků HTML. Přesně určují, jak se zobrazí každý grafický prvek, který se na stránce nachází. Pomocí nejnovějších verzí HTML5 a CSS3 můžete umístit video a audio komponenty na stránku, vytvářet 2D obrázky a animace a dokonce psát jednoduché hry. Není třeba se snažit zapamatovat si všechny značky a styly najednou. Bude užitečné naučit se základy a hned je uvést do praxe. Velmi dobrá stránka, kde se můžete naučit základy HTML a CSS - W3School. Ovšem pouze v případě, že máte alespoň základní znalosti angličtiny. Vývojář front-endu musí také rozumět vývoji napříč prohlížeči a platformami, adaptivnímu a responzivnímu rozložení.

Bootstrap

Jedná se o framework pro HTML, CSS a JavaScript. Tedy určité šablony, ze kterých jako z konstruktoru sestavíte weby mnohem rychleji než bez nich. Ale samozřejmě si ho musíte upravit tak, aby vyhovoval vašim potřebám. Pokud umíte anglicky, doporučujeme web getbootstrap a stejné w3schools.

JavaScript

Javascript je jádrem front-endového vývoje. Jedná se o první a nejrozšířenější programovací jazyk rozhraní. To může přidat mnoho funkcí na stránky. Na základní úrovni vám tento jazyk umožňuje přidávat na stránku interaktivní prvky. Používá se k vytváření map, které se aktualizují v reálném čase, interaktivních online her a filmů. V našich vyšších kurzech JavaRush se učíme trochu JavaScriptu. Můžete ho také studovat na stejné škole W3School nebo si o něm přečíst v ruštině na webu javascript.ru.

jQuery

jQuery je Javascriptová knihovna, která obsahuje pluginy a rozšíření, které mohou vývoj ještě usnadnit a urychlit. Namísto psaní kódu od začátku vám knihovny umožňují přidávat hotové komponenty, které lze následně upravit pro konkrétní projekt. Můžete použít funkce automatického vyplňování vyhledávacích formulářů, přeskupování a změny velikosti mřížky a nastavení odpočítávacích časovačů. Praktický kurz jQuery na w3school

Javascriptové rámce

Existují různé typy rámců, ale můžete si vybrat ten, který je pro vás vhodný. Nejznámější jsou Angular, Backbone, Ember a React. Představují hotovou strukturu pro kód. Pomáhají urychlit vývoj. A v kombinaci s knihovnami mohou minimalizovat vývoj webu nebo aplikace od začátku. Recenze 5 nejpopulárnějších JavaScriptových frameworků a knihoven roku 2017

Systém pro správu verzí Git

Systémy pro správu verzí mohou sledovat změny provedené v kódu v průběhu času. Umožňují také vrátit se k předchozí verzi projektu. Git je nejrozšířenější systém pro správu verzí. Znalost práce s Git je důležitá dovednost pro každého vývojáře.

Stručné závěry

UI je zkratka pro User Interface, což znamená „uživatelské rozhraní“. to znamená, Návrhář uživatelského rozhraní je primárně odpovědný za to, jak je produkt prezentován uživateli. Vyvíjí tlačítka, ikony, vybírá písma a připravuje rozvržení. UX je zkratka pro User Experience. Tak UX designér navrhne design webu, aplikace – nebo čehokoli – tak, aby bylo uživateli pohodlně a srozumitelně co je co, a aby z webu dostal to, co potřebuje s minimální námahou. Velmi často jsou oba typy práce prováděny jedním orchestrem: UI/UX designérem. Front-end developer oživuje práci designérů a vnáší do ní dynamiku: začnou se mačkat tlačítka a obraz se začne měnit. Musí znát programovací jazyky, ostřílené frameworky, preprocesory a knihovnami.

Design je poměrně široký a vágní pojem. Když někdo řekne: „Jsem designér“, není hned jasné, co každý den dělá. Pod tento pojem spadá celá řada různých odvětví.

Práce související s designem existují v různých oblastech, od průmyslového designu (automobilový průmysl, nábytek), tisku (časopisy a další publikace) až po webdesign (webové stránky, mobilní aplikace). S nedávným přílivem high-tech společností zaměřených na vytváření rozhraní pro obrazovky je zde spousta nové práce v oblasti designu. Pozice UX nebo UI designéra může být nepochopitelná nejen pro nezasvěcené, ale i pro samotné designéry, kteří pocházejí z jiných odvětví.

"Na tuto otázku neexistuje jediná správná odpověď."

Zkusme přijít na to, co to v IT průmyslu vlastně znamená.

UX designér

Návrháři UX se zabývají především jak produkt interaguje s uživatelem. Na tuto otázku neexistuje jediná správná odpověď. Návrháři UX zkoumají různé přístupy k řešení konkrétního uživatelského problému. Hlavním úkolem UX designéra je zajistit, aby produkt logicky plynul z jednoho kroku do druhého. Jedním ze způsobů, jak to může designér UX zjistit, je provést uživatelské testy osobně a vyvodit závěry z jejich pocitů. Identifikací verbálních a neverbálních překážek se přizpůsobuje a iteruje, čímž vytváří „lepší“ zážitek pro uživatele. Příkladem může být vytvoření úžasného zážitku z registrace pro nového uživatele.

„Definujte modely interakce, tok úloh uživatele a specifika rozhraní. Vyvíjet skripty, end-to-end interakce, modely interakce, vývoj grafického uživatelského rozhraní. Spolupráce s naším kreativním ředitelem a grafickým designérem na sloučení vizuální stránky Twitteru s jeho funkčními funkcemi. Vyvíjejte a udržujte drátové modely, makety a specifikace podle potřeby."

Příklad obrazovky aplikace navržené designérem UX
Zdroj: Kitchenware Pro Kit Wireframe od Neway Lau na Dribbble.

Úkol: Screen wireframes, storyboardy, plán místa

Nástroje: Photoshop, Sketch, Illustrator, Fireworks, InVision

S největší pravděpodobností jste ho slyšeli říkat: „ Po dokončení registrace by se uživateli měla zobrazit stránka „Děkuji“.

Návrhář uživatelského rozhraní

Na rozdíl od návrhářů UX, kteří se zabývají celkovým zážitkem z produktu, návrháři uživatelského rozhraní se zabývají jak produkt vypadá. Jsou zodpovědní za návrh každé obrazovky nebo stránky, se kterou uživatel komunikuje, a za poskytování vizuální části uživatelského rozhraní, které navrhl návrhář UX. Například návrhář uživatelského rozhraní může při vytváření analytického panelu zvýraznit důležitější informace nebo rozhodnout, zda je nejintuitivnější přidat do grafu posuvník nebo ovládací panel. Návrhář uživatelského rozhraní je také obvykle zodpovědný za vytvoření kompletního průvodce designem, který zajišťuje soudržný designový jazyk, který zahrnuje celý produkt. Zachování konzistence vizuálních prvků a určení, jakým směrem pracovat. Například způsob zobrazení chyb nebo varování je v rozsahu návrháře uživatelského rozhraní.

„Koncept a implementace vizuálního jazyka Airbnb.com. Vytvoření rozšířeného průvodce stylem."

Hranice mezi UI a UX designérem jsou poměrně nejasné a společnosti se velmi často rozhodnou tyto role kombinovat.

Návrhář uživatelského rozhraní určuje celkový dojem a vzhled aplikace.
Zdroj: Metro Style Interface 4 od Ionut Zamfir na Dribbble.

Nástroje: Photoshop, Sketch, Illustrator, Fireworks

"Pole "login" a "register" by měla být přesunuta do pravého horního rohu."

Grafik

"Grafičtí designéři se zabývají malými detaily, kterým ostatní nevěnují pozornost."

Grafik je někdo, kdo dělá grafiku, což by vám pravděpodobně řekl nedesignér, kdybyste se ho zeptali, co dělá designér. Grafické designéry nezajímá, jak na sebe obrazovky odkazují nebo jak někdo interaguje s produktem. Místo toho se zaměřují na navrhování krásných ikon, ovládacích prvků a vizuálů a vytváření konzistentního vzhledu a dojmu. Grafici pracují na malých detailech, které ostatní nevidí, a často pracují ve Photoshopu se 4x a 8x zoomem.

„Vytvářejte vysoce kvalitní vizuální projekty od konceptu po realizaci, včetně desktopů, webu a mobilních zařízení v různých rozlišeních (ikony, grafika a marketingové materiály). Vytváření a opakování aktiv, která odrážejí značku, činí produkt krásným a vdechují mu život.“

Návrháři uživatelského rozhraní také často musí dělat nejen svou vlastní práci, ale také vytvářet rozvržení dokonalé pro pixely. Některé společnosti se rozhodnou, že v roli grafika nemají oddanou osobu.

Grafický designér navrhne, nasměruje a upraví každý pixel, aby zajistil dokonalý konečný výsledek.
Zdroj: IOS 7 Guide Freebie PSD od Seevi kargwal na Dribbble.

Nástroje: Photoshop, Sketch

S největší pravděpodobností jste ho slyšeli říkat:"Snižte vyrovnání párů a posuňte tlačítko o 1 pixel doleva!"

Návrhář pohybu

Pamatujete si ten jemný pohyb, když přetáhnete obrazovku, abyste obnovili e-maily na vašem iPhone? To je práce návrháře pohybu. Na rozdíl od grafiků, kteří obvykle pracují se statickými objekty, návrháři pohybu vytvářejí animace v rámci aplikace. Zabývají se co rozhraní dělá poté, co se jej uživatel dotkne. Rozhodují například, jak se má nabídka posouvat, jaké efekty použít pro přechody a jak se bude tlačítko mačkat. Když je pohyb proveden dobře, stává se nedílnou součástí rozhraní a poskytuje vizuální vodítka o tom, jak produkt používat.

„Vyžaduje znalost grafického designu, motion designu, digitálního umění, cit pro barvy a typografii, obecné povědomí o materiálech/texturách a pracovní porozumění animaci. Znalost firmwaru iOS, OS X, Photoshop a Illustrator, stejně jako znalost aplikací Director (nebo ekvivalent), Quartz Composer (nebo ekvivalent), 3D počítačové modelování, pohyblivá grafika.“

Nástroje: AfterEffects, Core Composer, Flash, Origami

S největší pravděpodobností jste ho slyšeli říkat:"Nabídka by se měla objevit vlevo po 800 ms."

UX výzkumník

UX výzkumník ví vše o potřebách uživatelů.

UX výzkumník ví vše o potřebách uživatelů. Cílem výzkumníka je odpovědět na dvě hlavní otázky: "Kdo jsou naši uživatelé?" a „Co naši uživatelé chtějí?“ Zpravidla se jedná o uživatelské průzkumy, průzkumy trhu a analýzy dat. Design je proces neustálého opakování. Výzkumníci mohou v tomto procesu pomoci provedením A/B testů, aby zjistili, která možnost návrhu nejlépe vyhovuje potřebám uživatelů. UX výzkumníci bývají hlavní oporou velkých společností, kde jim přístup k velkému množství dat dává dostatek příležitostí k vyvozování statisticky významných závěrů.

„Úzce spolupracujte s vývojovými týmy na identifikaci výzkumných témat. Návrh výzkumu související s akcemi uživatelů a jejich vnímáním. Provádění výzkumu pomocí a aplikace různých metod, jako jsou průzkumy.“

Design je poměrně široký a vágní pojem. Kdy někdo mluví? „Jsem designér,“ není hned jasné, co vlastně každý den dělá. Existuje několik různých oblastí, které spadají pod deštník designu.

Profese související s designem existují v různých oblastech – od průmyslového designu (design automobilů a nábytku atd.), tiskového designu (časopisy a jiné tištěné publikace) až po webdesign (webové stránky, mobilní aplikace).

V poslední době se však objevilo mnoho nových designérských profesí zaměřených na vývoj rozhraní pro různé typy obrazovek. Práce s názvem UX nebo UI designéři jsou pro nezasvěcené a často i pro samotné designéry z jiných oborů nesrozumitelné.

Pokusme se pochopit, co každý z těchto termínů znamená.

UX designer (designér USER EXPERIENCE)

UX designér se primárně zaměřuje na to, jak se produkt „cítí“ a jak jej vnímá uživatel. Úkol zadaný projektantovi nemá jednu správnou odpověď. Návrháři UX zkoušejí různé přístupy k řešení konkrétního uživatelského problému. Široký seznam povinností návrháře UX zahrnuje zajištění toho, aby produkt neustále posouval zákazníka z jedné fáze do druhé. Jedním ze způsobů, jak toho dosáhnout, je provádět přímé testy se skutečným uživatelem, aby bylo možné pozorovat jeho chování. Identifikací verbálních a neverbálních bariér návrháři UX zlepšují produkt a neustále vytvářejí nejlepší možnost pro interakci uživatele s produktem. Zkušební verze je nezbytná pro zajištění co nejpohodlnějšího použití produktu.

Příklad popisu práce designéra zážitků na Twitteru:

„Definujte modely interakce, toky úloh uživatele a specifikace uživatelského rozhraní. Představte různé scénáře vývoje událostí, popište proces použití a modely interakce od začátku do konce a předveďte ukázky zainteresovaným stranám. Spolupracujte s naším kreativním ředitelem a vizuálními designéry na sjednocení vizuální identity a podpisových funkcí Twitteru. Podle potřeby vyvíjejte nebo udržujte návrhy, makety a standardy."

Výsledky práce: rozložení obrázků na obrazovkách, storyboardy, plán lokality.

Nástroje: Photoshop, Sketch, Illustrator, Fireworks, InVision

Návrhář uživatelského rozhraní (návrhář USER INTERFACE)

Na rozdíl od návrhářů UX, kteří jsou zodpovědní za celkový zážitek z produktu, se práce návrháře uživatelského rozhraní točí kolem toho, jak je produkt navržen. Tito specialisté jsou zodpovědní za návrh každé stránky nebo obrazovky, se kterou uživatel komunikuje, a musí zajistit, aby uživatelské rozhraní vizuálně odpovídalo cestě navržené návrhářem UX. Například návrhář uživatelského rozhraní, který vytváří analytický panel, může prezentovat nejdůležitější obsah v horní části stránky nebo se může rozhodnout, že posuvník nebo ovládací tlačítko je vhodnější pro to, jak uživatel vnímá úpravu grafu.

Typicky je návrhář uživatelského rozhraní také zodpovědný za vytvoření konzistentního stylu a musí zajistit, aby byl v celém produktu aplikován vhodný designový jazyk.

Udržování konzistence napříč všemi vizuálními prvky a definování chování (jako je způsob zobrazení chyb nebo varování) spadá do pravomoci návrháře uživatelského rozhraní.

Hranice mezi těmito dvěma profesemi je dost nejasná a často firmy na tyto dvě pozice najímají jednoho člověka.

Nástroje: Photoshop, Sketch, Illustrator, Fireworks

Vizuální designér (grafik)

Vizuální designér je někdo, kdo dělá grafiku. Pokud se zeptáte někoho, kdo nenavrhuje, co je designér, první, kdo vás pravděpodobně napadne, je grafik. Grafici nemají nic společného s tím, jak mezi sebou obrazovky komunikují nebo jak někdo interaguje s produktem. Místo toho se zaměřují na vytváření krásných ikon, ovládacích prvků a dalších vizuálních prvků a výběr vhodných písem. Grafici pracují na malých detailech, kterým ostatní nevěnují pozornost, a často pracují ve Photoshopu se 4X nebo 8X zoomem.

Je také zcela běžné, že návrháři uživatelského rozhraní vykonávají dvojí povinnost a vytvářejí finální verzi prvků obrázku. Některé společnosti se rozhodnou nenajímat samostatného grafika.

Nástroje: Photoshop, Skica

Interaktivní designér (motion designer)

Pamatujete si na téměř nepostřehnutelnou poskakující animaci, když obnovujete svůj e-mail na vašem iPhone? To je práce návrháře pohybu. Na rozdíl od grafiků, kteří pracují se statickými prvky, návrháři pohybu vytvářejí animace v rámci aplikací. Zabývají se tím, co rozhraní dělá poté, co se jej uživatel dotkne. Například rozhodují o tom, jak se mají nabídky rozšiřovat, jaké přechodové efekty mají být použity a jak má reagovat konkrétní tlačítko. Dobře provedený návrh pohybu se stává nedílnou součástí rozhraní a nabízí vizuální vodítka, jak produkt používat.

Popis práce Motion Designer ve společnosti Apple:

„Vysoce kvalifikovaná v grafickém designu, pohyblivé grafice, znalost digitálního umění, dobré vnímání písem a barev, obecná pozornost k materiálům a texturám a také praktické porozumění animaci. Znalost iOS, OS X, Photoshop a Illustrator, také znalost Director (nebo ekvivalent), Quartz Composer (nebo ekvivalent), 3D modelování, pohyblivá grafika“

Nástroje: AfterEffects, Core Composer, Flash, Origami

UX výzkumník (uživatelský výzkumník)

Cílem UX výzkumníka je odpovědět na dvě otázky: "Kdo je náš zákazník?" a "Co chce náš spotřebitel?" Mezi povinnosti výzkumníka obvykle patří vedení rozhovorů s uživateli, průzkum marketingových dat a obecně shromažďování analýz. Design je proces neustálého zlepšování. Výzkumník může v tomto procesu pomoci provedením A/B testování, aby zjistil, které řešení návrhu nejlépe vyhovuje potřebám spotřebitelů. UX výzkumník je obvykle oporou ve velkých společnostech, kde mu přístup k obrovskému množství informací dává dostatek síly k tomu, aby dospěl ke smysluplným závěrům.

Facebook UX Researcher Popis práce:

„Úzce spolupracujte s produktovými týmy na identifikaci témat výzkumu. Proveďte výzkum, který se současně zabývá jak chováním spotřebitelů, tak názory spotřebitelů. Provádějte výzkum pomocí široké škály kvalitativních a kvantitativních metod, jako jsou průzkumy.“

Návrháři UX pravidelně slouží jako výzkumníci UX.

Výsledky práce: uživatelský profil, výsledky A/B testování, behaviorální uživatelské výzkumy/rozhovory.

Pomůcky: mikrofon, papíry, dokumenty

Vývojář front-end (vývojář uživatelského rozhraní)

Za funkční implementaci rozhraní produktu odpovídají externí vývojáři. Typicky návrhář uživatelského rozhraní předá statickou maketu externímu vývojáři, který ji poté přemění na funkční interaktivní produkt. Externí vývojáři jsou také zodpovědní za kódování a rozvržení interaktivní grafiky vytvořené návrhářem pohybu.

Nástroje: CSS, HTML, JavaScript

Produktový designér

Produktový designér je všezahrnující termín pro popis designéra, který je obecně zapojen do procesu vytváření image a vnímání produktu.

Role produktového designéra není příliš přesně definována a liší se společnost od společnosti. Návrhář produktu může provádět minimální kódování, provádět uživatelský průzkum, vytvářet rozhraní nebo vytvářet vizuální prvky. Od začátku do konce pomáhá návrhář produktu identifikovat počáteční problém, stanovit některá kritéria pro jeho řešení a poté vytvářet, testovat a zdokonalovat různá řešení. Některé společnosti, které chtějí pracovat v „plynulejší“ spolupráci, specifikují toto konkrétní volné místo při hledání uchazeče, aby nakonec vytvořily tým různorodých designérů a pracovaly na uživatelském vnímání produktu, prováděly uživatelský průzkum a vytvářely vizuální prvky.

Některé společnosti používají výraz „UX designer“ nebo jednoduše „designer“ jako univerzální termín. Přečtení popisu práce je nejlepší způsob, jak zjistit, jaká bude vaše odbornost.

Popis práce produktového designéra pro Pinterest

„Znalosti ve všech oblastech designu: interakce, vizuální část, práce s produktem, layout. Vytváření šablon pro prvky obrázků a jejich rozložení.“

Hledá se designér

Nejčastější fráze, kterou slýchám od mladých startupů. Obvykle hledají někoho, kdo všechno výše uvedené umí. Hledají někoho, kdo umí vytvářet krásné ikony, vytvářet vstupní stránky, spouštět A/B testy, umisťovat logicky prvky uživatelského rozhraní na obrazovku a dokonce může vykonávat některé povinnosti front-end vývojáře. Vzhledem k obecné povaze této pozice často slýcháme, že společnost chce najmout pouze „designéra“, aniž by se pouštěla ​​do detailů a specifik této profese.

Hranice mezi každým z těchto designových trendů jsou velmi rozmazané. Očekává se, že někteří návrháři UX budou pracovat také na interakci se spotřebitelem a někteří návrháři uživatelského rozhraní budou také pracovat na grafice. Nejlepším způsobem, jak najít designéra, je podrobně popsat, co od něj v rámci práce pro vaši společnost očekáváte, a zvolit pracovní pozici, která co nejzřetelněji odráží povinnosti designéra.

Na otázku, jaký je rozdíl mezi návrhářem UX a návrhářem uživatelského rozhraní, lidé rádi odpovídají záporně. Víte, takový literární prostředek. Jako „UX není o rozhraní, není to o grafickém designu, není to použitelnost, není to analytika, není to prototyp.“ Dnes si stručně ukážeme rozdíl, povíme si historii vzhledu termínů a vysvětlíme, proč se oba koncepty i po tolika letech tak ochotně spojují v jeden – UX/UI.

Krátce o rozdílu

Návrhář uživatelského rozhraní (uživatelské rozhraní) je návrhář rozhraní v ideálním prostředí, který kreslí tlačítka, ikony, formuláře, vybírá písma a ze všeho vytváří harmonické a krásné rozvržení. Webová stránka, aplikace, cokoliv, s čím bude uživatel interagovat – dokonce i obrazovka terminálu stanice. A na nic jiného nemyslí.

UX designér (uživatelská zkušenost) není designér, ale designér (prostě v angličtině má slovo designer jen druhý význam). Studuje potřeby uživatelů, staví logická schémata rozhraní, testuje prototypy na skutečných lidech a píše technické specifikace pro návrh. Jinými slovy, je to takový marketingový inženýr: vstupem je analytika, výstupem principy tvorby rozhraní, logika práce, layout, obsah. Netýká se kresby jako takové.

To je vše.

Proč to muselo být komplikované?

Jak to bylo dříve: návrhář dostal za úkol „nakreslit web“. Všechny stránky byly víceméně stejné: domov, informace o společnosti, katalog a pak dolů v seznamu. Návrhář se zeptal: "Kdy nám dají obsah?" Nikdy, soudruhu, tohle je armáda.

A návrhář byl jednoduše nazýván „designérem“. Bez zámořských předpon.

Co se stalo později: agentury chtěly dostávat více peněz a svět postupně začal přecházet od „pouhých webových stránek“ ke komplexním webovým službám. A služba není jen unikátní rozhraní, je to také speciální obchodní proces, který za ní stojí. Vzpomeňte si například na web Airbnb – bez hlubokého studia tématu by nejeden grafik okamžitě vytvořil rozhraní.

Vzhledem k tomu, že bylo více práce, vznikla potřeba rozdělit jednu profesi na více. Nyní UX specialista (říkejme mu tak, aby nedošlo k záměně) prozkoumal a navrhl informační architekturu, prototyp udělal funkční část a grafický (UI) designér vytvořil konečný produkt: moderní a příjemný na pohled.

Totéž se již stalo v oboru. Například „programátoři“ byli jednoduše rozděleni na „frontend“ a „backend“. A frontendery na skutečné frontendery a „jen designéry rozvržení“. Mimochodem, .

Důvod je vždy stejný: jeden člověk na velký proces nestačí. Pokračujme.

Kdo je návrhář UX/UI

Co je legrační: volná pracovní místa často zahrnují pozice návrhářů UX/UI, jen tak, s lomítkem. I Tinkoff hledá takového kombo specialistu:

Na druhé straně barikády se všichni designéři začali označovat jako UX/UI. Protože být pouhým návrhářem je fuj, nemoderní.

Kdo je UX/UI v ideálním světě? Superman, který provede celý cyklus UX práce a pak ještě stihne vše nakreslit s několika iteracemi úprav (udělat UI).

Co to vlastně je UX/UI? Prostě dobrý designér. Pro ty, kteří považují za svou povinnost nejen „dělat makety“, ale ke každému projektu přistupovat individuálně, počínaje analýzou, otázkami, upřesněními, náčrty, schématy atd. Nejedná se o plnohodnotné UX vyšetření, ale zpravidla stačí podpořit hotovou službu nebo vyvinout „jen web“.

Takže pokud uvidíte úžasného mutanta UX/UI, vězte toto:

• Jedná se o designéra, který k projektu přistupuje hlavou a ne jen klikáním myší a zobákem.
• To je chlapík, který přečetl spoustu chytrých slov a teď si říká UX/UI.

Lze to jednoduše zkontrolovat: požádejte designéra, aby vám řekl, proč zvolil toto konkrétní uspořádání prvků, tuto sekvenci obrazovek atd. Dobrý designér neudělá jediné rozhodnutí o rozhraní jen tak – vše má logické opodstatnění.

Mimochodem

Tento článek je druhým ze série „jak se jeden webový specialista liší od druhého“. Co nás přimělo k myšlence vytvořit z webu adresář všech profesí s různými variacemi jejich jmen. Abychom klientovi (a ostatně nám všem) zpřehlednili život.