Návrhář uživatelského rozhraní. Barva dává smysl. Výzkum zkušeností

V tomto příspěvku budu mluvit o svých pozorováních, jak se rodí a zraje produktové rozhraní ve Sketchi. Tyto nápady lze aplikovat na front-endový projekt libovolné velikosti, ať už jde o vstupní stránku nebo operační systém.

Přemýšlejte strategicky  - znamená dívat se na design z perspektivy. To znamená, že je optimální to udělat, aby se ušetřil pracovní čas na dlouhé vzdálenosti.

Úrovně detailů v designu rozhraní

Návrh rozhraní produktu není nikdy dokončen a neustále se vyvíjí. Rozlišuji čtyři úrovně:

• logický
• úroveň designu
• vizuálně-emocionální
• úroveň přiblížení

Správně položený základ na logické úrovni pomáhá postavit projekt podle původního přání. Rozhraní činí design srozumitelným a pohodlným. Vizuální úroveň lahodí oku a dodává ten správný pocit. Dobře napsaná pravidla návrhu pak pomáhají škálovat jej na libovolnou velikost.

Návrháři nevyužívají Sketch naplno

Návrháři, se kterými jsem se setkal, se snaží používat Sketch jako Photoshop nebo Illustrator. Sketch ale není jen další móda vektorový editor. Jedná se o první úspěšný nástroj vytvořený speciálně pro práci s rozhraními. Použití symbolů v ve schopných rukou umožňuje vytvořit nekonečně škálovatelný návrhový projekt. Není fér srovnávat Photoshop a Illustrator se Sketch, protože nebyly vytvořeny pro návrh rozhraní. Nikdo nemůže popřít jejich velikost, ale je hloupé jít do bitvy ozbrojeni mikroskopem, pokud si můžete vybrat útočnou pušku Kalašnikov.

Design velkého projektu se plynule vyvíjí od šedých útržkovitých bloků k dobře propracovanému systému, který připomíná rozvržený web. Skica vám umožňuje přejít z jedné úrovně detailů do druhé.

Které rozložení je lépe organizované?

Zde jsou dva externě identické rozložení:

Levý nepoužívá symboly a pravý se skládá pouze z nich. Které rozložení je lépe organizované? Odpověď se nabízí sama: správně. Ale ne. Jsou přizpůsobeny pro různé účely.

Vlevo: snadná výměna, obtížné měřítko

Pokud se tento návrh stane základem pro 100 dalších obrazovek, pak s každou novou kopií budou v projektu špatně spravované duplicitní objekty. Měly by být identické od obrazovky k obrazovce. Čím více jich bude, tím obtížnější bude udržet pořádek. Pokud se změní jedna ikona nebo panel karet, všech 100 rozvržení bude zastaralých.

Vpravo: Drahé na vytvoření, ideální pro měřítko

Nespěchejte však s nacpáním všeho do symbolů. Pokud se styl teprve tvoří a potřebujete tuto obrazovku radikálně předělat, pak po opětovném nakreslení obrazovky všechny symboly ze správné verze zastarají. Čas strávený jejich tvorbou se nevyplatí. Takovou obrazovku se svými symboly je nepohodlné přeskupovat mezi jiné obrazovky, není snadné ji vylézt.

Symboly — lepidlo rozhraní

Chápu obrovský potenciál skrytý v symbolech. Připomínají malou civilizaci, ve které se rodí a umírají organismy. Pomocí symbolů a jednoduché tvary Pěstuji struktury. Mrtvá tkáň je zničena. Vytvářím a posílám je do války s vědomím, že může nastat situace, kdy budou muset být odtrženi.

Životní cyklus symbolu

Po smrti se symboly promění ve skupiny a při další akci je lze rozdělit a vytáhnout jejich obsah na povrch rozvržení: jednoduché rastrové, vektorové a textové vrstvy nebo jiné symboly. Takto se mění úrovně detailů prostřednictvím jednotlivých atomů.

Podle toho, zda vytvářím nové symboly nebo střílím staré, můžete pochopit, jakým směrem se strategicky pohybuji: upravuji nebo ničím strukturu návrhu.

Oba směry pohybu mají své výhody:

Pokud budeme podrobně

struktura se stává formálnější a složitější. Objevuje se harmonie a logika, snaží se popsat své nejmenší částice a řídí se principem DRY (neopakujte se) programování. Formalizace vede k pořádku a šetří předměty, ale nevyhnutelně byrokratizuje systém. Základové kameny jsou dražší na přesun než střešní kameny. Formalizace je přátelská k mřížce a zajišťuje, že všechny odrážky jsou stejné. Tímto způsobem stmelujeme rozhraní, takže je méně flexibilní, ale elegantní.

Zajímavý příklad: Narazil jsem na projekt Sketch, který vážil 600 MB. Nepoužíval téměř žádné symboly a měl spoustu obrazovek. Když jsem to vyčistil a převedl na symboly, váha souboru se snížila na 150 MB.

Pokud více než dva objekty v systému vypadají identicky a v budoucnu jich bude jen přibývat, možná je čas vytvořit pro ně společný symbol.

Když to zjednodušíme

Pokud symbolickou strukturu rozsekáme na detaily, povede to k tenčímu designu a přiblíží se principu KISS (nechte to krátké a jednoduché). Čerstvý cement se snadněji dodává požadovaný formulář. Částice v něm nemají mezi sebou pevné vazby a nekladou si odpor.

Design na kusy

Není nic otravnějšího než symbolické struktury, když potřebujete rychle a dramaticky změnit design, vyrobit nová logika interakce. V tomto případě o ně neustále zakopáváte. Pokud symboly nestřílíte, budete si muset v hlavě vytvořit všechny vztahy, které tvoří konečný layout. Jdeme do každého symbolu a měníme jej, abychom ovlivnili konečný design. Pokud jsou prvky malé a různorodé, je extrémně obtížné to udělat v rámci jednoho rozvržení. Snažit se hrát podle pravidel formálního systému, když je potřeba revoluce, je zbytečný nepořádek, který zpomaluje práci. Je to, jako byste se snažili malovat obraz ne jako celek, ale po částech, aniž byste viděli celkové plátno.

Když je rozhraní plné symbolů, je fragmentované. Pokud potřebujete zásadně tvořit nová obrazovka, překáží to.

Nyní si promluvme o úrovních podrobněji.

1. Logická úroveň návrhu

Tento nejvyšší úroveň abstrakce, stratosféra. Většina obecná úroveň rozhraní — to je logika uživatelských akcí, . Co dělají návrháři UX: Jaké kanály budou použity k interakci se systémem? Jaký je cíl uživatele? Jak vám můžeme pomoci dosáhnout toho s minimem kliknutí? Skica se změní na program pro vytváření logických diagramů:

Na této úrovni je pouze jeden symbol – šedá karta označující akci. Symbolizovat šipky je škodlivé a je vhodné nedělat ani objasňující podpisy. Struktura se teprve tvoří. Někteří návrháři na této úrovni vůbec nepracují a preferují vizualizaci cest uživatelů jako obrazovky spíše než logické akce. Tato úroveň neobsahuje žádný vizuální design.

2. Úroveň návrhu

Když se objeví další podrobnosti, přejdeme na úroveň uživatelského toku. Jaká tlačítka uživatel stiskne, aby dosáhl svého cíle? V této fázi je vhodné použít plugin User Flow, který vám umožní ukázat, která tlačítka kam vedou.

V aplikacích a na webových stránkách se jedná o úroveň interakce s obrazovkou. Pojďme kreslit obecné formy, široké tahy. Tohle taky logická úroveň, bez kresebných detailů. Kde bude tlačítko výzvy k akci? Na jakou obrazovku to povede? Co bychom měli dělat, pokud je uživatel nevidomý nebo má jiné postižení?

Nejprve mobil

Kroky se změní na obrazovky s určité velikosti, pro které navrhujeme. Vždy začínáme mobilní verzí, protože je snazší se soustředit na význam než na vizuální design. Rozšířit mobilní verze na velká obrazovka mnohem jednodušší než vtěsnat desktop do mobilu. Nejprve si přečtěte mobil.

První postavy

Zde již můžeme začít vyrábět nejběžnější symboly, pokud jsme si jisti, že předměty budou typické. Mohou se objevit symboly záhlaví, hlavní nabídky a zápatí. Vypadají jako šedé obdélníky s vrstvami textu. Vzhledem k tomu, že nejsme omezeni silnou fragmentací, je také snadné provést na této úrovni významné změny designu.

Prototyp co nejdříve

Zde se již hodí vytvořit první prototyp v Invision, který není moc krásný, ale funguje tak, jak byl navržen. Na této úrovni můžete testovat nápady: je logika jasná, nebo je třeba vše předělat od začátku? S láskou nakreslený design je škoda vyhodit. Vyhodit namalovaný ubrousek není urážlivé.

3. Úroveň emocí: ztvárnění a obsah

Jakmile vznikne logický obrázek, můžete na návrhu pracovat do detailů. Toto je území inspirace a umělců. Fanoušci Dribble a Behance se na to soustředí, na zbytek občas zapomenou. Šedé čtverce jsou nahrazeny skutečnými prvky uživatelského rozhraní, dobrou typografií, ikonami a ilustracemi. Je čas pečlivě propracovat formulace v textech. Patří sem také animace. Při správném použití ožije i ten nejjednodušší design.

Obsah a vizuální prvky společně utvářejí vnímání celého produktu.

4. Úroveň přiblížení

Když se vytvoří styl produktu a objeví se soubor pravidel, podle kterých se design tvoří, přichází čas, aby designový systém dozrál. Tuto fázi bych také rád nazval formalizací.

Ti, kteří to organizovali, vědí hodně o škálování. Symboly jsou ideálním nástrojem pro změnu měřítka návrhu.

Na této úrovni vzniká naprostá většina symbolů. Toto je čas sestoupit na zem a přestat zahajovat revoluce. Je čas začít se dívat na detaily a praktikovat perfekcionismus. Účelem zrodu symbolů v této fázi je rozbít systém na nejmenší části, aby bylo možné jej bezbolestně škálovat.

Proč měřítko

Dobře zformovaný systém se snadno udržuje.

Dokonce velký projekt Může zůstat na úrovni vykreslování. Vzhledem k tomu, že nárůst počtu rozložení je nevyhnutelný, spolu s ním je nevyhnutelný i růst doprovodného nepořádku. Pokud se návrh změní, musí návrhář aktualizovat všechna rozvržení ručně (což není možné), nebo udržovat aktuální pouze nejnovější rozvržení a všechna ostatní ignorovat. Zbláznil bych se, kdybych se musel potýkat s tím, že 90 % mých nových layoutů je zastaralých.

Příklad problému škálování

Pokud vznikne úkol překreslit všechny červené ikony v jiném odstínu, bude to snadné, protože jsou seskupeny v jedné sadě uživatelského rozhraní, ze které jsou přeloženy do všech rozvržení. Pokud změníme jeden symbol, změní se všechny jeho kopie v 600 rozloženích. Tento design už zavání layoutem.

Co škálovat

Nejen ikony, ale jakékoli opakující se prvky by se měly stát symboly. Všechna vstupní pole, nabídky, ilustrace, tlačítka, karty, vyskakovací okna a některé textové bloky.

Všechny úrovně si vzájemně odporují. Aby se projekt rozvinul, je neustále nutné mezi nimi manévrovat a to je dovednost designéra rozhraní.

Tento příspěvek není o potřebě rozdělit rozhraní na hromadu symbolů, ani o tom, že symboly narušují kreslení designu jako ilustrace. To jsou jen důsledky něčeho hlubšího. Podívejte se vůbec na své rozhraní čtyři úrovně a rozhodnout se, co s tím momentálně aby byl problém co nejefektivněji vyřešen.

V tomto článku uvádím příklady základních principů nebo konceptů, kterými se řídí návrh desktopových rozhraní. Neplánuji být inovátorem nebo učitelem, ale rád se podělím o sadu nastavení, která mi pomáhají v mé práci.

Mimochodem, pokud používáte Figma, doporučuji věnovat pozornost našim hotové konstrukční systémy. Pomáhají nezávislým pracovníkům dokončit více zakázek za měsíc, umožňují programátorům tvořit krásné aplikace nezávisle a týmoví vedoucí „běží“ sprinty rychleji s využitím hotových návrhových systémů pro týmovou práci.

A pokud máte seriózní projekt, pak je náš tým připraven nasadit návrhový systém v rámci organizace na základě našeho vývoje a přizpůsobit jej konkrétní úkoly pomocí Figma. Web / desktop a jakýkoli mobil. Známe také React / React Native. Napište T: @kamushken

Důrazy a priority

Pokaždé, když navrhuji rozhraní, kladu si nebo klienta otázku: „Pro jaké informace jsou nyní důležité koncový uživatel? Jak rozložíme jeho pozornost v konkrétním případě?“ K tomuto účelu naše zbraně zahrnují barvu a její odstíny, velikost písma a jeho intenzitu. Společně, správným použitím těchto nástrojů, „zanecháme zprávu“ uživateli, vedeme ho po cestě, kterou potřebujeme, a soustředíme jeho pozornost na to nejdůležitější.

Dobrým příkladem je, když návrhář dal uživateli pochopení, že je důležité vidět odesílatele, pak téma a teprve potom obsah nebo jeho @nick v systému:

Špatný příklad, kdy návrhář „tvrdí“: nejdůležitější jsou avatary a zbytek už nějak vymyslíte:

Odrážky a jejich proporcionalita

Moderní design je lehký, jednoduchý a „nasycený vzduchem“. Je naplněn dechem. A v neposlední řadě hrají při vytváření těchto vjemů prohlubně. Výrazné odsazení pomáhá zjednodušit tok materiálu. Musí však podléhat určité pravidelnosti a přiměřenosti. Když začnu, definuji N pixelů jako základní výplň nový projekt. Proporcionalitu 2N, 3N atd. pak používám k vytvoření vizuální rovnováhy, pokud je někde potřeba více vycpávek.

Dobrý příklad, kdy návrhář víceméně respektuje proporcionalitu odsazení:

Špatný příklad, kdy je odsazení prakticky založeno na generátoru náhodných čísel:

Text tlačítka je vždy na prvním místě než ikona

Nezapomeňte, že je to text, který je určujícím faktorem v tom, jaké očekávání nebo reakce uživatel předloží, když uvidí tlačítko. A pouze obrázek ikony druhotně doplňuje význam. Obrázek zvonku se slovy „upozornění“ nám dává určitou představu o účelu této funkce, než klikneme. K budíku nás dovede podobný zvonek bez podpisu v jiné aplikaci, i když s největší pravděpodobností budeme očekávat, že se objeví notifikační obrazovka. Radím vám, abyste vždy dali nápisu větší „váhu“ než ikony. Obecně je považuji za podvod. Mnoho moderní rozhraní Dokážou se bez nich obejít. Bylo by to prostě příliš nudné!

Celkově dobré:

Ale můžete to udělat lépe:

Vypadá taky dobře:

A zde je prostor pro zlepšení:

Nesnažte se být příliš jasný

Ne všechna navržená rozhraní musí být intuitivní. Existuje mnoho složitých systémů, se kterými se již nějakou dobu učíme (!) interagovat. Možná se nám teď zdají jednoduché, ale neuvědomujeme si, že jsme byli první minuty, hodiny nebo déle průkopnickými výzkumníky. A pokud budeme pokračovat v práci uvnitř některých zpočátku komplexní systém, zřejmě nic nebránilo naší cestě prvního výzkumu. S největší pravděpodobností návrhář odvedl svou práci tak dobře, že jsme ji snadno zvládli nové prostředí. Živý příklad ze života: zkuste si na chvíli představit, že neznáte význam matematický znak„rovná se“. Souhlasíte, tyto dvě linie - jedna nad druhou, vůbec nevypadají intuitivně. Jen nás to jednou ve škole naučil učitel matematiky. Vyzývám vás, abyste se nesnažili být jasnější, než je požadováno na minimální nutné úrovni.

V tomto příkladu byl návrhář s tlačítkem Zavřít příliš jasný:

A v tomto příkladu se návrhář ukázal jako příliš jasný s možností přidat:

Pohyb kurzoru vyžaduje energii

Neměli bychom uživatele nutit, aby sáhl na jinou část obrazovky, aby získal pokročilé funkce. Pokud uživatel pracuje se seznamem, pak by mělo být poblíž tlačítko pro vytvoření nového prvku. Nebo pokud vygenerujeme nové vyskakovací okno kliknutím na tlačítko vlevo dole, pak je absurdní nutit uživatele přetáhnout kurzor šikmo doprava nahoru, aby se okno zavřelo.

Dobrým příkladem je, když návrhář navrhne zavřít vyskakovací okno ve stejné oblasti, která způsobila jeho zobrazení:

Špatný příklad, kdy návrhář distancuje funkci přidání prvku do seznamu od samotného seznamu:

Vztahy lokací nebo jedna rovina

Toto je další technika vyvažování rozhraní. Jakýsi druh mřížky, chcete-li. Řekněme například, že používáte rozvržení se třemi sloupci. Jsou jeho názvy ve stejné rovině podél osy X? Nebo uspořádání ikon s tlačítky. Je možné nakreslit pomyslnou osu Y a zjistit, že obě proti ní přesně zapadají? Pokud jsou odpovědi ano, jde to dobře. To je způsobeno tím, že vizuálně je pro člověka snazší vnímat tabulkový pohled kvůli struktuře dat. A při vývoji rozhraní musíme prvky uspořádat s nějakou tabulkovou logikou.

Špatný příklad s nesrovnalostmi:

Dobrý příklad s harmonií a korespondencí:

Barva dává smysl

Naposled zbitý. Červená - alarm, zelená - vše je v pořádku. Od nepaměti je pro člověka nejlepší vnímání textové informace, je to černé na bílém. Pokud bezdůvodně použijete hodně barev, vytvoříte chaos. Pokud vybarvíte prvky s významem, vytvoříte ještě větší řád.

Příklad chaosu: (znamená 172 hlasů zeleně kladný stav? Pokud ano, pak 280 návštěvníků oranžově znamená podle logiky zápor? To vůbec ne! Čísla mezi sebou projektant pouze rozdělil pomocí barvy)

Příklad vytvoření pořadí a zdůvodnění barvy (právě jsem přidal grafiku nad cizí práci)

Dobrý příklad toho, jak nadměrně nepoužívat barvy:

Jako epilog....

Rád bych vyjádřil svou vděčnost členům driblovací komunity za jejich neformální souhlas s poskytováním své práce tato recenze. Připomínám, že výše uvedené zásady v design rozhraní jsou pro mě hlavní. Vždy je mám na paměti při navrhování rozhraní. Rozhodněte se, na které straně jste... Chcete vytvářet rozhraní pro designéry a pracovat pro lajky (například 98% práce s behance) nebo se snažíte řešit uživatelské problémy (dribblování)? Mimochodem, podle mě skvělý příklad jak vám uzavřenost komunity umožňuje soustředit se na hlavní účel rozhraní!

Navzdory množství vzdělávacích materiálů se začínající profesionálové rok co rok zabývají stejnou otázkou: jak udělat první kroky v designu.

Po mnoha otázkách od mladých designérů jsem se rozhodl napsat materiál, o kterém bych na začátku své kariéry snil. Je založen na osobní zkušenost a poučení z komunikace s úspěšnými designéry z velkých studií a produktových týmů.

V první části budu mluvit o základních dovednostech dobrého designéra a ve druhé o tom, jak je využít k budování kariéry.

Návrhářský základ

V každém oboru existuje řada základních dovedností, bez kterých se v profesi nedá nic dělat. Pouze získáním těchto dovedností můžete počítat s povýšením na pozici a příjmem.

Zaměření, cíle a cíle

Každý designér by měl vědět, pro jaké účely rozhraní vzniká a jaké úkoly musí řešit.

Web aerolinky existuje pro lidi, jejichž cílem je přesun z jednoho města do druhého, a jeho úkolem je pomoci jim najít let, který vyhovuje jejich potřebám.

Cíle a cíle nejsou totéž. Možná máte za cíl udělat si dobrý večer a úkolem je vybrat si mezi filmem, restaurací a fotbalem.

Designér musí mít vždy na paměti cíle uživatelů a řešit jejich problémy v praxi. Určitě právě pracujete nebo začínáte pracovat na nějakém projektu. Zamyslete se nad tím, jaké má cíle a jaké úkoly musí vyřešit.

Služba může mít mnoho úkolů a některé si budou navzájem kolidovat, takže si musíte vybrat jeden hlavní a zajistit jeho implementaci co nejpohodlněji, aniž byste obětovali zbytek.

Jak by to fungovalo, kdyby to bylo jednoduché?

Tuto otázku si pravidelně kladu, když stojím před novou výzvou. Pomáhá mi zbavit se mysli existující šablony a přijít s řešením, které odpovídá aktuálnímu problému.

Na začátku své kariéry, stejně jako mnoho jiných, první věc, kterou jsem udělal, bylo navrhnout zdroje při hledání „inspirace“ a pokusil jsem se najít řešení, které by se dalo aplikovat na můj problém. I když ve skutečnosti jsem nehledal inspiraci, ale jen jsem se snažil méně namáhat mozek.

Je lákavé kopírovat řešení někoho jiného, ​​ale nezapomeňte, že jakýkoli vzor může v jednom případě fungovat dobře a v jiném nefungovat vůbec. A kým se stanete jen tím, že budete napodobovat práci druhých? Koneckonců, dobrý designér se vždy vyznačuje schopností myslet.

Je užitečné převzít zkušenosti jiných lidí tím, že se podíváme na koncepty a pracovní služby, ale když se s nimi setkáme nový úkol Nezapomeňte zapnout hlavu.

Estetika rozhraní

Medium miluji pro jeho dobrou typografii a snadnost psaní, i když na jiných webech mají mé články někdy dvakrát až třikrát tolik zobrazení. Ale nejde jen o krásu.

Dobrý vizuál usnadňuje čtení a eliminuje potřebu měnit měřítko stránky. Dobrý vizuální umělec se zaměřuje na důležité prvky co je hezké sociální sítě a kriticky důležité v obchodních službách.

Instagram z nějakého důvodu změnil své rozhraní z černé a modré na bílou. Jeho cílem bylo zaměřit se na obsah vytvářený uživateli.

Čas od času slyšíme o chybách, které lidé dělají kvůli složitému rozhraní. Náhodný lajk samozřejmě není problém, ale chyba při létání s letadlem nebo jadernou elektrárnou může vést k tragédii.

Nejjednodušší způsob, jak zlepšit vizuální dovednosti, je převzít zkušenosti jiných lidí, kopírovat rozhraní a číst vysvětlující materiály. Hodně mi pomohly designové pokyny Google.

Další velmi důležitou věcí je pohled zvenčí. Vždy jsem pracoval ve startupech, kde jsem byl jediným designérem, což mi dalo velkou volnost v jednání, ale připravilo mě o zpětnou vazbu od zkušených kolegů.

Většina designérů začíná svou kariéru doma, takže jediný způsob, jak se dostat zpětná vazba pro ně je to navázat vztah se zkušeným designérem a pravidelně ho žádat o zpětnou vazbu na jejich práci.

co potřebuje?

Dobrý návrhář myslí ve skriptech, ne obrazovkách.

Skript je posloupnost akcí, které musí uživatel provést, aby dokončil konkrétní úkol. Vyberte si například optimální let. Scénář lze řešit v rámci jedné obrazovky, nebo jich může obsahovat tolik, kolik chcete. Úkolem designéra není snížit počet obrazovek, ale učinit úkol uživatele pohodlnějším a intuitivnějším.

Někdy úkol vyžaduje logiku krok za krokem, kde je každý krok samostatná stránka, jako v složitá registrace. Některé úkoly je pohodlnější řešit v rámci jedné obrazovky (příklad: vytvoření publikace na sociálních sítích).

Scénáře jsou jádrem jakéhokoli návrhu rozhraní, takže každý návrh by jimi měl začínat.

Systematický design

Všechny firmy, které se alespoň trochu starají o design, přijdou na to, že překreslovat stejné komponenty a poskládat je novým způsobem je pěkně hloupý nápad. Všichni tedy začali tvořit jednotný systém komponenty a o něco později i logiku jejich umístění.

Po nějaké další době se designéři spojili s vývojáři a propojili své prvky v rozvrženích s rozmístěnými komponenty na přední straně. Díky tomu musí designér stále více kreslit a stále více využívat své dva hlavní nástroje: mozek a front-end vývojáře.

Vývojáře je potřeba respektovat a alespoň logicky chápat podstatu jejich práce. Bez toho to bude těžké najít společný jazyk a vytvořit skvělý produkt.

Mít připravená sada potřebné prvky a styly, můžete více přemýšlet o řešení uživatelských problémů a méně o kreslení.

I dobrý nápad je snadné zabít

Pamatuji si, jak mě na začátku kariéry při představování konstrukčního řešení snadno zmátl jednoduchý dotaz, například proč je nějaký prvek právě takto. Poté jsem se pokusil rozumně odpovědět na otázku, proč vznikl ten nesmyslný dialog, který ovlivnil vnímání celého díla.

Až na základě zkušeností jsem pochopil, že otázky nesouvisející s hlavním tématem je třeba ignorovat. Například: „Jsou to jen detaily, pojďme tedy probrat hlavní věci, které ovlivňují podnikání, a na závěr se vrátíme k vaší otázce.“ Tato reakce kupodivu eliminuje zbytečnou konverzaci a vykresluje vás jako profesionála, kterému jde o byznys klienta, ne o jeho ego.

Aby mohla být učiněna vaše rozhodnutí o návrhu, musíte je propojit s analýzou, kterou jste provedli, než k tomuto rozhodnutí dojdete. Tím, že ukážete, že vaše rozhodnutí bylo výsledkem seriózní analytické práce, ve které jste studovali konkurenty a testovali několik řešení, bude těžké s vámi nesouhlasit.

Knihy pro designéry

Občas se mě ptají, které knihy mi pomohly stát se lepším designérem.

Žádný.

Teprve pravidelná praxe a pochopení obchodu mi pomohlo přinést firmě větší užitek a zvýšit mou hodnotu na trhu.

Kde sehnat práci

Existují tři oblíbené možnosti: studio, produkt nebo startup.

Ateliér je vhodný pro začátečníky, protože je kolem vás spousta designérů, od kterých se můžete něco naučit. Tempo je zde vyšší, protože jsou jasná data zahájení a ukončení projektu. Vzhledem k tomu, že náklady na projekt jsou vázány na člověkohodiny, studia obecně vydělávají méně než produkt.

Výrobek má klidnější rytmus, protože zisk společnosti přímo nezávisí na práci designéra. Často se designérský tým zabývá funkčností, která se objeví v budoucnu, takže pro ně je kvalita nejčastěji důležitější než rychlost. Zejména u projektů, které využívají miliony.

Ve startupech je přínos každého zaměstnance nesmírně důležitý, protože týmy jsou malé a designové oddělení se často skládá pouze z jednoho člověka, takže je lepší jít tam s plným přesvědčením o svých schopnostech.

Celou svou kariéru, nepočítám-li freelancing, jsem pracoval ve startupech, kde jsem byl jediným designérem. Nevýhodou této práce je, že v blízkosti není žádný mentor, takže jsem se hodně vzdělával a rozebíral svou práci. Výhodou je, že při spolupráci se zakladateli můžete mít maximální vliv na výsledný produkt.

Generování štěstí

[velmi důležitá část]

Mnoho lidí omezuje své chápání světa na profesionální dovednosti, i když je jich jen naprosté minimum. Možná jste skvělý designér, ale k čemu to je, když o vás nikdo neví (ani klienti, ani komunita)?

Někteří lidé mají štěstí a jejich kariéra se buduje příznivým způsobem, ale ne proto, že se se štěstím narodili, ale pouze proto, že nevědomě prováděli akce, které zvyšují jejich šance na úspěch.

Mezi těmito akcemi jsou aktivní a pasivní.

Mezi ty pasivní patří přítomnost životopisu, portfolia a úhledných profilů na sociálních sítích. Tyto věci zvyšují pravděpodobnost, že si vás náhodou všimnou a přijdete se zajímavým projektem.

Aktivní akce — reagování na volná místa jiných lidí, publikování článků a případů, komunikace s profesionály z různé oblasti, přímé dopisy zaměstnavatelům a vytvoření vlastní komunity. Díky tomu nečekáte, až si vás najdou, ale sami zvýšíte pravděpodobnost slibné nabídky.

Znám jednoho designéra z regionu, který vedl stůl s předními profesionály z našeho oboru a setkal se s nimi po příjezdu do Moskvy. Díky tomu se mu podařilo získat dobrá nabídka o práci a po roce a půl vyměnit jedno špičkové studio za druhé, na místo partnera.

Oblíbenou možností je nyní absolvovat kurz od slavná společnost nebo se zúčastnit soutěže.

Pavel Shumakov, který vyhrál ruský designový pohár, dostal nabídku od VKontakte a o něco později se přestěhoval do londýnské kanceláře Badoo. Někteří kluci po absolvování kurzu od Skillboxu dostali nabídku práce v AIC.

Dlouho známou možností je udělat falešný projekt, dát do toho všechno své úsilí a zveřejnit ho v kvalitním portfoliu. Nejznámějším příkladem je redesign Google News od Georgyho Kvasnikova, který mu přinesl řadu nabídek od velkých společností.

No a ještě poslední věc.

Je důležité pochopit, že za obrazovkou jakékoli značky jsou adekvátní lidé, kteří jsou připraveni kdykoli uvažovat o ambiciózním kandidátovi. Vaším úkolem je pouze se správně prezentovat. Někdy stačí kompetentní dopis do společné poštovní schránky a úhledné portfolio.

Jednou z nejdůležitějších věcí, které jsem se ve své kariéře naučil, je schopnost posunout se vpřed i přes neúspěchy. Chybám se nelze vyhnout, proto je třeba s nimi zacházet dobře.

Toto je základní logika:

Úspěchu nedosahuje ten, kdo nedělá chyby, ale ten, kdo jde vpřed i přes ně.

Moje cesta, kterou jsem popsal v velká historie„Stát se designérem“ obsahovalo řadu neúspěchů, které mě mohly stát práci, ale už na začátku mé kariéry mi moje intuice říkala, že dělat si starosti nikomu nepomůže a jediný způsob, jak něčeho dosáhnout, je prostě jít dál.

Takže se nebojte, pokud se v nové práci setkáte s problémy. Každý si tím prošel, včetně Steva Jobse, který během prvních 15 let své kariéry udělal řadu nákladných chyb, které vedly mnohé k tomu, aby ho koncem 90. let považovali za selhání. A pouze arogantní důvěra ve své poslání mu umožnila posunout se vpřed a o deset let později se stát ikonou průmyslu.

Buďte otevření, budujte vztahy s kolegy, zajímejte se o zkušenosti ostatních a když dostanete příležitost, převezměte iniciativu.

Nevyhnutelný výsledek

Možná je ještě příliš brzy na to, aby začínající specialisté četli o výsledku, ale jedna designérka mi napsala, že nechce jen „pohybovat pixely“, ale snaží se podílet se na tvorbě produktu. K těmto myšlenkám obvykle návrháři přijdou po několika letech, unaveni z poskytování stejného typu služeb pro zákazníky.

Nejlogičtější možností růstu je pozice uměleckého ředitele, což znamená, že se navždy zavíráte grafický editor a dělat pouze intelektuální práci, korigující směr ostatních designérů.

Další možností je přejít do produktové společnosti, kde budete mít s kolegy možnost pracovat na vylepšení jednoho produktu.

Dobrou variantou je přidat se do startupu a zodpovídat za design celého projektu. Pokud budete úspěšní, začnete nabírat a školit další designéry a vytvoříte oddělení.

Možná někteří z vás budou chtít přejít na pozici produktového manažera a zodpovídat za komunikaci mezi týmy a strategii rozvoje projektu.

No, nejambicióznější možností je začít svůj vlastní projekt. Dobrý designér rozumí tomu, jak funguje marketing a vývoj, co lidé potřebují a ví, jak to používat.

Přechod z pozice designéra není tak těžký. Místo čekání na povýšení začněte sami přebírat nové povinnosti.
Tento princip uplatňuji již poměrně dlouho a jak ukazuje zkušenost, pokud máte adekvátní kolegy, bude vaše iniciativa zaznamenána.

Klíč ke všemu

Jeden mladý designér mi položil otázku:

Je lepší pokračovat v sebevzdělávání nebo se co nejdříve zaměstnat?

Vždy a ve všem cvičte - nejlepší způsob studujte jakýkoliv obor, a pokud se to spojí s adekvátní zpětnou vazbou, tak nic lepšího nenajdete.

Pokud tedy chcete v designu něčeho dosáhnout, začněte pracovat co nejdříve a je velmi dobré, když máte vedle sebe zkušené kolegy. Pokud žádné nejsou, pak si projekty dělejte sami a hledejte zpětnou vazbu mezi designéry na sociálních sítích.

Na začátku své kariéry se zaměřte spíše na kvalitu než na kvantitu projektů. Není třeba hledat novou práci hledat lepší život. Nejprve se to naučte dělat dobře.

A nezapomeňte, že designérské dovednosti jsou jen polovinou úspěchu. Kromě nich je potřeba umět komunikovat s lidmi, rozumět principům podnikání a být aktivní ve vyhledávání zajímavých nabídek.

Tvrdě pracujte každý den a nezapomínejte, že každý úspěch vyžaduje čas.

Trpělivost a vytrvalost jsou klíčem ke všemu.

Udělejte z toho svůj průlomový týden.

Tento článek vysvětluje, jakou roli design rozhraní hraje v podmínkách moderní trh. A také, co odlišuje dobré rozhraní ze špatného ( UI = uživatelské rozhraní, tedy uživatelské rozhraní). Podíváme se také na několik nových modelů designu uživatelského rozhraní, včetně Google Fuchsia A Plynulý design od společnosti Microsoft.

Role designu uživatelského rozhraní dnes?

Moderní návrháři vyvíjejí uživatelská rozhraní pro aplikace běžící na konkrétním operačním systému. Proto je mnoho parametrů rozhraní mimo kontrolu vývojářů. Pokud například designér navrhuje rozhraní pro aplikaci pro Android, neví o velikosti obrazovky a rozlišení uživatelské zařízení. A také o tom, jak má uživatel nastaveno upozornění pro tuto aplikaci, zda jsou nainstalovány další programy, které to ovlivňují barevný profil obrazovka.

Kreativita vývojářů uživatelská rozhraní omezena na konkrétní zařízení a operační systém. Jejich provoz musí často odpovídat doporučením výrobce operační systém (Google pro Android, Apple pro iOS). Apple zveřejňuje co je možné a co ne i pro uživatelské rozhraní podrobný seznam doporučení pro UI. Google má také své vlastní standardy materiálové provedení.

Vzhledem k těmto omezením pozornost moderní návrháři uživatelského rozhraní zaměřené na malé detaily. Například na tom, jak jsou okna umístěna, zda je pro uživatele pohodlná navigace aplikací nebo webem. Kvůli nedostatku času nemá uživatel čas zabývat se složitým, těžkopádným a pomalým rozhraním.

Zde jsou některé funkce uživatelských rozhraní naší doby

Mnoho prvků uživatelského rozhraní vnímáme jako pozvánky k interakci s aplikací nebo zařízením:

Pole pro zadávání textu a kurzor vyzve uživatele k zadání textu a kliknutím nebo dotykem na tlačítko „Potvrdit“ budete pokračovat:

Přepínač, který je zde znázorněn jako posuvník, zve uživatele k povolení nebo zakázání možnosti:

Ikona vyzývá uživatele, aby na ni kliknul a spustil aplikaci nebo funkci:

Když stisknete tlačítko hamburger...

...zobrazí se nabídka, která vyzve uživatele k výběru dalších možností:

Posuvník vybízí uživatele, aby se jej dotkl/kliknul a přetáhl jej a změnil nastavení, jako je jas obrazovky:

Rozbalovací nabídka vyzve uživatele k výběru správná možnost ze seznamu.

To jsou jen některé příklady prvků design aplikačního rozhraní. Všechny je ale spojuje myšlenka na zlepšení efektivity uživatelského zážitku.

Rozhraní: dobré, špatné a ošklivé

Dobrý design uživatelského rozhraní není jen o tom vypadat hezky. Design uživatelského rozhraní může být úspěšný, aniž by byl velmi pěkný.

Pojďme se podívat na některé příklady dobrého a špatného designu uživatelského rozhraní. Pak se podívejme na ten hrozný, který je také důležitý.

Dobré uživatelské rozhraní

Navrženo s hlubokým pochopením uživatele, jeho potřeb a toho, jak se bude v aplikaci nebo na webu pohybovat. Proto říkáme, že design uživatelského rozhraní je jedním z aspektů designu UX ( UX = User eXperience, interakční zkušenost).

Dobré rozhraní je co nejjednodušší a zároveň takové, aby měl uživatel po ruce vše, co potřebuje. Navigace je krátká a mělká ( bez dílčích podsekcí a nabídek), vyžaduje minimální počet kroků k dokončení úkolu a možnosti dostupné pro výběr v každém okně jsou jasné:

V této aplikaci nabízí rozhraní uživateli tři možnosti: vyhledávat restaurace pomocí aktuální umístění, hledejte „ručně“ podle PSČ a tlačítko hamburger pro zobrazení dalších možností.

Špatné rozhraní

Tento má design webového rozhraní Na prvním místě nejsou potřeby uživatele, ale důležitost aplikace nebo vývojáře. Mezi známky špatného uživatelského rozhraní patří ikony, které jsou příliš malé na to, aby se daly zasáhnout při stisknutí prstem.

Toto rozhraní obsahuje mnoho malého textu, který je obtížně čitelný. Kromě toho se špatné rozhraní vyznačuje použitím žargonu ( včetně profesionálních) místo toho jasný jazyk. Například říká: „Špatná data“. A potřebuješ-“ Nesprávné přihlašovací jméno a heslo" Špatné rozhraní může také zahrnovat použití obtěžujících dialogová okna místo oznamovací lišty:

Ve výše uvedeném příkladu můžete vidět, že dialogové okno aplikace na pozadí přeruší práci aktivní aplikace a naléhavě vyžaduje odpověď, což uživateli brání pokračovat. Pokud člověk v tuto chvíli píše text a nedívá se na obrazovku, pak může snadno ztratit neuložená data. Je vidět, že tlačítka jsou malá a prstem špatně dosažitelná. A zpráva" Neznámá chyba "nedává vůbec smysl, protože nedává uživateli možnost studovat nebo odstranit příčinu jejího vzniku.

Hrozné rozhraní

Některé úspěšné projekty a návrhy rozhraní, na první pohled boří představy designérů, že jednoduchost by měla být na prvním místě. Vezměme si jako příklad web Amazon, který má mírně napjatý vzhled:

Ale úspěch Amazonka, naopak dokazuje účinnost jejich UI. Proč? Jedno z tajemství spočívá v tom, že vzhled stránky byl vylepšován postupně, a proto nenutil uživatele přizpůsobovat se náhlým změnám v rozhraní. To je výhodné pro návštěvníky webu.

Jako dlouholetý uživatel Amazonu jsem opravdu nezaznamenal žádné změny vzhled nebo způsob interakce. Ale takhle vypadal Amazon před 10 lety:

Jaká je budoucnost designu uživatelského rozhraní?

Nejdramatičtější změny budou nejspíš souviset s vývojem hlasová rozhraní. Tato funkce je již dostupná ve všech hlavních operačních systémech, ale zatím nemůžeme říci, že by ji lidé pravidelně používali na svých telefonech a počítačích.

Objevují se nové přístupy k návrhu rozhraní, ale vypadá to, že vizuální rozhraní bude stále primárním způsobem interakce uživatelů se zařízeními. Je zde ale velký prostor pro inovace, stejně jako optimalizaci starých rozhraní. Není žádným překvapením, že hlavní hráči jako Microsoft a Google investují značné prostředky do experimentování s novou estetikou uživatelského rozhraní a modely interakce.

V posledních měsících Stále častěji slyšíme o „Fluent Design“ od Microsoftu. Říká se, že má za cíl integrovat větší vizuální hloubku a pohyb. Totéž platí pro experimentální operační systém Google krycí jméno "fuchsie", ve kterém se vývojáři snaží obejít bez ploch a ikon.

Design rozhraní moje hlavní specializace. Za mnoho let práce jsem si uvědomil důležitou věc, kterou někdy musíte sdělit i klientům. Nejdůležitější věcí v designu rozhraní není samotný design. Hlavní věc je studovat a pochopit, jak s tím lidé komunikují. Je potřeba neustále analyzovat, co bude fungovat a co ne.

Existuje skvělý vtip o nejlepším rozhraní na světě - ženské prso. Každé dítě ví, jak s ní komunikovat od narození. Snažím se o totéž.

To je důvod, proč záměrně rozděluji návrh rozhraní na vývoj UX a návrh uživatelského rozhraní.

UX design

UX design lze z hlediska jeho původního významu nazvat designem design slov. Design je především vývoj, design a výsledek práce hlavou.

UX design začíná výzkumem a analýzou. Než cokoliv navrhnu, prostuduji firmu, její produkt, konkurenty a odvětví. Důležitý bod: bez dobrý produkt nemá smysl dělat dobrý design.

Desktopová aplikace, rozhraní AWS, pokladní terminál, ATM rozhraní, design kryptoměnové burzy – každý vývoj rozhraní by měl začínat sběrem informací. Minimálně: cílové publikum, důvody jeho nespokojenosti, jak může produkt vyřešit problémy lidí.

Musel jsem vyvinout rozhraní pro Smart TV a geonavigační služby. Musíte velmi dobře porozumět tomu, kde a jak bude rozhraní používáno a jaká omezení má platforma.

Na druhou stranu je to nejlepší způsob, jak uplatnit dovednosti designéra a analytika.

Prototypování rozhraní

Prototypuji rozhraní v Axure RP. To je dnes průmyslový standard UX designu. Zároveň se učím Figmu.

Sketch se mi osobně ukázal jako nepohodlný. Figma má přímý export rozložení do Zeplin. Pro většinu vývojářů digitálních služeb je to nejpohodlnější možnost.

Pokud Sketch/Figma nejsou důležité, pracuji v editoru Xara Designer Pro X, který je schopen generovat dynamické stránky na základě rozložení.

Někdy zobrazuji rozvržení ve službě InVission. Může zobrazit minimální animaci komponent a přechodů. Takové prototypy rozhraní dávají zákazníkovi dobrou představu o konečném produktu.

Návrh uživatelského rozhraní

Věnuji velkou pozornost detailům a síťovině. Hladká struktura a pěkné maličkosti zaujme a vytvoří příjemný zážitek od vašich návštěvníků.

Kreslím do rozhraní komplexních digitálních služeb různé státy pro tlačítka. Někdy vytvářím samostatnou sadu uživatelského rozhraní pro zvláště velké projekty.

Pracovní plán návrhu rozhraní

1. Podívejte se na mou práci a ujistěte se, že se vám líbí.
2. Poptávka a převod materiálů.
3. Platba předem 50 % (v některých případech 100 %).
4. Rozhovory, sběr informací a analýzy.
5. Vývoj černobílých prototypů rozhraní.
6. Design rozhraní v barvě.
7. Po schválení všech dispozic - zůstatek částky.
8. Příprava a přenos zdrojových souborů ve formátu *.PSD.

Co dělám a nedělám

Audit aktuálního zdroje

V rámci redesignu projektu nejprve provedu audit vašeho zdroje. Popisuji klady a zápory z pohledu designu a UX.

Výsledek: dokument s popisy a doporučeními.

Výzkum

Výzkum je velmi důležitou součástí projektu. Než začnete podnikat, ať už jde o stavbu domu nebo koupi nové auto, je potřeba sbírat informace, porovnávat důležité vlastnosti a ověřte své domněnky.

Výsledek: profil cílové publikum a popis účelů návštěvníků.

Design

Můžete samozřejmě postavit dům bez plánu. Můžete si něco stáhnout z internetu. Ale když platíte hodně peněz, chcete získat něco individuálnějšího a promyšlenějšího. To je přesně to, co dělám: Vyvíjím individuální strukturu stránek a bloků.

Strukturu navrhuji do interaktivních černobílých prototypů. Mimochodem, na rozdíl od výkresů stejného domu již lze použít prototypy stránek - procházejte stránky a studujte trasy návštěvníků. A to taky skvělý způsob ušetřit čas a někdy i peníze.

Výsledek: prototypy objednaných stránek, po kterých můžete chodit.

Design

Ve skutečnosti je v této fázi vypracována celá vizuální složka projektu. Rozvoj vizuální jazyk. Je to jako pokoj ve stylu loft nebo kuchyně ve stylu Provence – už zhruba chápete, jaké prvky se používají a jak na ně lidé budou reagovat.

Výsledek: po přijetí návrhu stránky připravuji zdrojové soubory. A ne jakkoli, ale se znalostí věci. Všechny vrstvy jsou umístěny do složek a označeny. Elegantní a efektivní. Vaši vývojáři tedy budou příjemně překvapeni.

Podpora

V velké projekty Po přijetí návrhu je často potřeba dokončit některé malé detaily. Pro takové případy si nechávám malou rezervu.

Někdy je nutné vyvinout další funkční bloky. V tomto případě možná budete potřebovat čas navíc a rozpočet. Jako by plánovali postavit garáž jako samostatnou budovu a pak si řekli, že by bylo hezké dostat se v zimě přímo z garáže do domu.

Výsledek

Pokud již máte prototypy budoucího rozhraní, provedu zkoušku, nabídnu možnosti pro zlepšení a vyvineme moderní, pohodlné a krásný design rozhraní. Včetně ikon, vizuální části pro instalátor a tak dále.

Pokud máte jen nápad, tým programátorů a rozpočet, pomůžu vám navrhnout a vytvořit prototyp rozhraní. V tomto případě je to možné nestandardní možnostiřešení vašeho problému. Zároveň se budu snažit co nejvíce zachovat uživatelský zážitek, aby uživatelé neměli problémy se zvládnutím designu rozhraní.

Získáte tak komplexní produkt s jasně promyšlenou strukturou a intuitivním rozhraním.