Obsah
Keď som začínal svoju kariéru, bol som webdizajnér. Pracoval som vo webdizajne štyri roky, počnúc webmi pre malé firmy a nakoniec som prešiel k väčším klientom. Zistil som, že to nebol grafický dizajn, ktorý by ma zaujímal, ani to, že som pracoval pre väčšie značky. Viac ako vizuálny dizajn webovej stránky ma zaujímali vzory stránkovania, spôsob interakcie ľudí s formami a veci ako vnímaný výkon.
Keď som sledoval sci-fi filmy, pozeral by som sa na rozhrania. A keď som hral videohry, sledoval som, ako sú rozložené ponuky. Ak vám niektorá z týchto vlastností pripadá povedomá, môžete byť v jadre tiež návrhárom používateľského rozhrania.
Dal som výpoveď v agentúre a založil som si vlastnú spoločnosť. Na svojej stránke LinkedIn som sa pokúsil zhrnúť môj nový kariérny cieľ: vytvoriť čo najlepší softvér. Sú to už štyri roky, čo som začínal ako freelancer, a moja cesta sa nezastavila. V týchto dňoch pomáham prevádzkovať malú dizajnérsku spoločnosť s názvom UI Mono. Nedávno sme privítali nášho štvrtého člena tímu.
V tomto článku by som chcel opísať, aké je to byť návrhárom používateľského rozhrania, vrátane toho, čo presne táto práca obnáša, kde nájsť najlepšie učebné zdroje a ako sa zlepšiť vo svojom remesle.
Čo robí návrhár používateľského rozhrania?
Zistil som, že vo všeobecnosti môžete prácu dizajnéra používateľského rozhrania rozdeliť do štyroch kategórií. Komunikujete s klientom, skúmate, navrhujete a prototypujete a komunikujete s vývojármi. Pozrime sa na každú z týchto fáz podrobnejšie.
Komunikácia s klientom
Komunikácia s klientom spočíva v porozumení jeho problému. Cieľom je vyrovnať sa s podnikaním vášho klienta, takže na začiatku projektu je zvyčajne veľa reči. Je dobré, keď na začiatku neviete príliš veľa o doméne svojich klientov - na ich podnikanie sa môžete pozrieť novým spôsobom, zatiaľ čo si predstavujete možné dizajnové riešenia.
Ak chcete byť dobrým dizajnérom používateľského rozhrania, musíte byť nakoniec schopní myslieť na podnikanie svojho klienta. Váš klient môže byť napríklad v letectve. Keď pre nich budete pracovať, nakoniec sa o tomto priemysle dozviete dosť. Tip pre vaše vlastné šťastie je teda, aby ste si rozumne vybrali odvetvia, pre ktoré pracujete, aby ste nakoniec neboli odborníkom na niečo, na čom vám nezáleží alebo o čo nemáte záujem.
Počas projektu sa komunikácia nezastaví. Ako dizajnér budete neustále prezentovať svoju prácu. V našej spoločnosti sme vzdialený tím, takže nemáme veľa osobných stretnutí. Namiesto toho vo veľkej miere využívame zdieľanie obrazovky prostredníctvom videokonferencií. Komunikačné nástroje ako Skype a Slack sa používajú každý deň.
Je užitočné kombinovať synchrónne a asynchrónne komunikačné metódy. Hovor je vynikajúci, ak potrebujete rýchlo získať viac informácií, ale musíte byť nablízku súčasne. Myslíme na Slack ako na „virtuálny chladič vody“ a na správu zložitých dizajnových projektov používame Basecamp. Keď navrhujeme prototypy pomocou HTML a CSS, pomocou GitHub Issues priamo diskutujeme o kóde.
Výskum
Okrem komunikácie s klientmi urobíte aj veľa prieskumu. Môže to zahŕňať terénne štúdie, workshopy s klientom, analýzu konkurencie alebo definovanie stratégie - v podstate takmer všetko, čo vám pomôže pochopiť daný problém.
Výskum je to, čo informuje vaše možnosti dizajnu. Je to článok, ktorý ste si raz prečítali, alebo nová vec, ktorú spoločnosť Apple práve vydala. Keď je čas vysvetliť, prečo ste sa rozhodli pre konkrétny návrh, váš výskum vás podporí.
Výskum môže byť veľmi široký. Nové zariadenia často testujem na výskumné účely alebo sa zaregistrujem do novej webovej aplikácie, aby som študoval jej používateľské rozhranie.
Dizajn a prototypy
Ako dizajnér pravdepodobne strávite väčšinu času návrhárskymi a prototypovými prácami. Projekt návrhu používateľského rozhrania sa môže pohybovať vpred mnohými spôsobmi, od skicovania cez podrobný dizajn až po kódovanie.
Metóda, ktorú použijete, závisí vo veľkej miere od typu projektu. Čo navrhuješ? Je to web, alebo by ste to nazvali skôr aplikáciou? Používa natívnu technológiu? Je to redizajn alebo začínate od nuly?
V našej spoločnosti neexistuje pevný proces, ale väčšina projektov sa riadi rovnakým hrubým poradím: začínajú sa náčrtmi a skeletovými modelmi, pokračujú podrobným vizuálnym a interakčným dizajnom a končia prototypom.
Ako dizajnéri trávime veľa času premýšľaním o našich nástrojoch. Aj keď sú skvelé nástroje dôležité, nie sú najdôležitejšie. Schopnosť kompetentne používať program Adobe Creative Suite a aplikácie ako Sketch je ekvivalentná schopnosti kresliť ceruzkou alebo maľovať štetcom. Stále je potrebné urobiť maľbu.
To znamená, že zdravý záujem o nástroje je dobrá vec. Rád skúšam nové nástroje, ktoré mi môžu pomôcť zvýšiť produktivitu. Môj obľúbený nástroj na úpravu vektorov je Illustrator, ale väčšina mojich vizuálnych dizajnérskych prác sa v súčasnosti robí v aplikácii Sketch. Ostatní členovia tímu prešli na novšie nástroje, ako je Affinity Designer.
Nástroje sú veľmi osobnou voľbou. Pokiaľ dokážeme ľahko spolupracovať, každý si môže slobodne zvoliť to svoje. Aby sme vám uľahčili rozhovor s klientmi o našich dizajnoch, vyrábame prototypy s InVision. Pre pokročilejšie prototypovanie však používame HTML a CSS. Nástroj, ktorý všetko potrebujete, závisí od práce, ktorú s ním chcete robiť.
Komunikácia vývojárov
Často zabudnutou súčasťou práce dizajnéra používateľského rozhrania je komunikácia vývojárov. V dnešnej dobe už nemôžete ujsť iba tým, že svoje návrhy odošlete vývojárom a dúfate, že sa správne implementujú. Najlepší dizajnéri vedia, že úlohou nie je vytvorenie dizajnu, ale jeho komunikácia - nielen zainteresovaným stranám, ktoré musia dať svoj súhlas, ale aj vývojárom, ktorí ho musia implementovať.
Komunikácia dizajnu má mnoho podôb: podrobné špecifikácie, poskytnutie prostriedkov, spoločné preskúmanie dizajnu. To, čo má zmysel dodať v každom prípade, vo veľkej miere závisí od toho, či je projekt natívnou alebo webovou aplikáciou.
Tradičným prístupom je dodávať prvky vedľa návrhov obrazoviek. Pomocou návrhov obrazoviek sa dá zistiť, ako bude návrh vyzerať ako celok, pričom podkladmi sú súbory PNG a SVG ikon pripravené na použitie, takže vývojári nemusia pracovať s grafickým editorom.
V našej spoločnosti sme navrhovateľmi dodania viac než toho. Na zaistenie konzistencie našich návrhov používame príručky štýlov komponentov. Keď pracujeme s webovým projektom, dodávame podrobné súbory HTML a CSS, dokumentované po častiach, pripravené na implementáciu. Verím, že mať dizajnové oko v každej fáze vývoja softvéru je jediný spôsob, ako dosiahnuť môj cieľ, a to vytvoriť softvér na svetovej úrovni.
Web vs natívne aplikácie
Pri navrhovaní natívnej aplikácie pre platformu (napr. IOS alebo Android) sa zvyčajne riadite určitými pokynmi. Pri návrhu pre web nie je k dispozícii toľko pokynov. Spravidla sa stáva, že váš klient má pre svoju značku súbor grafických pokynov, ktoré určujú, ako by veci mali vyzerať.
Tieto pokyny však majú tendenciu byť šité na mieru marketingovým webovým stránkam a ich obsah nemusí vždy viesť k dobrým rozhodnutiam o používateľskom rozhraní. Písma sa zvyknú vyberať z marketingových dôvodov, nie z dôvodu čitateľnosti. Farby môžu byť výrazné a nápadné, čo funguje v reklamnej kampani, ale nie v aplikácii, ktorú používate každý deň. Tieto príručky je potrebné interpretovať.
Existuje niekoľko pokynov pre používateľské rozhranie pre web. Môžete tvrdiť, že web je taviacim kotlom rôznych štýlov. Ak vyrábate čokoľvek, čo sa skôr podobá na aplikáciu ako na web, musíte vedieť o široko používaných rámcoch ako Bootstrap a ZURB Foundation. Rámec začína určovať, ako by veci mali vyzerať, pretože nechcete znovu objavovať koleso. A to je asi dobrá vec.
V našej spoločnosti radi používame Bootstrap. Poskytuje rozumné predvolené veľkosti pre bežné prvky používateľského rozhrania, ako sú tlačidlá, tabuľky s údajmi a modály.
Vo webdizajne vás viac obmedzujú technické kapacity webu. Bývalo to tak, že bolo ťažké implementovať na web jednoduchý vizuálny rozkvet, ako sú napríklad zaoblené rohy. Tieto dni sú už dávno preč - teraz môžete kresliť používateľské rozhrania s množstvom tieňov, prechodov, animácií a dokonca aj 3D.
Ako dizajnér je realistickejšie prevziať kontrolu nad procesom a dizajnom v prehliadači. Nevidel som veľa návrhárov používateľského rozhrania prevziať programovanie používateľského rozhrania natívnej aplikácie, ale návrhár, ktorý robí HTML a CSS webovej aplikácie, je bežný jav. Ak dokážete kódovať svoje vlastné návrhy, budete mať náskok pred svojimi nekódujúcimi kolegami a podľa mňa je to jediný spôsob, ako skutočne pochopiť, ako web funguje.
Webové obmedzenia
Čoskoro zistíte, že nie všetky skvelé triky, ktoré sa naučíte, sú podporované v každom prehliadači, a to je realita navrhovania pre web. Je dobré riadiť sa známymi zásadami, ako je progresívne vylepšenie, pri ktorom načítate vylepšený obsah vždy, keď je to možné, ale myslite aj na to, ako sa obsah zhoršuje.
Nedávno sa stalo populárnym „rezanie horčice“. Tento web podporovaný webovým tímom BBC zahŕňa rozlišovanie medzi „dobrými“ a „zlými“ prehliadačmi a poskytovanie „zlých“ prehliadačov v obmedzenom rozsahu. Skutočne to však funguje iba pre obsahové stránky.
Pokiaľ ide o zážitky podobné aplikáciám, mnoho ľudí kvôli uľahčeniu vývoja obmedzuje podporu iba na niekoľko popredných prehľadávačov. Týmto sa bohužiaľ dostávame späť do situácie z roku 1996, keď na prezeranie obsahu potrebujete určitý prehliadač.
Zdokonaľovanie vašich schopností
Ako teda udržať krok s rýchlo sa rozvíjajúcim webovým priemyslom a zlepšiť svoje schopnosti? Pozrime sa na niekoľko rôznych metód na zvýšenie vašich schopností ...
Znalosti o platforme
Hlavnou súčasťou arzenálu návrhárov sú znalosti o platformách. Mali by ste vedieť o rôznych operačných systémoch a o tom, ako ich ľudia používajú. Ako dizajnéri inklinujeme k používaniu počítačov Mac, ale potom ľahko zabudneme, že väčšina ľudí vonku používa na vykonanie svojej práce boxy Windows.
Mám pocit, že niečomu môžete skutočne porozumieť, iba ak to sami použijete. Na navrhovanie používam radšej svoj Mac, ale trávim veľa času vývojom rôznych ďalších platforiem. Mám na počítači Mac nainštalovaných niekoľko kópií systému Windows ako virtuálne stroje. Bol som zaneprázdnený testovaním nových verzií systému Windows 10 pomocou programu Insider spoločnosti Microsoft, aby som skontroloval rôzne zmeny v používateľskom rozhraní.
Pravidelne tiež kupujem nový hardvér, aby som vyskúšal, ako funguje. Kúpil som si Apple Watch len na otestovanie platformy. Potom som to predal, pretože som cítil, že mi to nepridáva toľko na život.
Ďalej možno web považovať za svoj vlastný operačný systém. Neustále sa vyvíja a každý týždeň ponúka nové funkcie každému predajcovi prehliadača. Je nesmierne užitočné vedieť o technických aspektoch prehliadačov, najmä pokiaľ ide o CSS a grafické schopnosti. Musíte vedieť, čo sú SVG a WebGL a ako môžete používať API webových animácií.
Každá platforma sa časom vyvíja a ako návrhár používateľského rozhrania je vašou úlohou byť v obraze. Všetko, čo navrhujete, napokon nežije izolovane, ale je súčasťou väčšieho softvérového ekosystému.
Vráťte sa k základom
To, s čím dnes zápasíme, sa až tak nelíši od toho, s čím sme bojovali pred 20 rokmi. V knihách je kopa dobrých rád. Na úvod vyskúšajte Defenzívny dizajn pre web od Jasona Frieda a Matthewa Lindermana a Nenechajte ma premýšľať od Steva Kruga.
Ak neviete o konceptoch ako modalita a finančná dostupnosť, musíte si ich prečítať. Mali by ste byť schopní vysvetliť, čo je Fittsov zákon. Gestaltov zákon blízkosti? Toto je chlieb s maslom dizajnu používateľského rozhrania.
Inšpirujte sa hrami a filmami
Ako dizajnér UI čerpám pri svojej práci ďalšie zdroje inšpirácie. Veľa inšpirácie nachádzam v hrách. Niektoré hry sú veľmi zložité a návrhári používateľského rozhrania museli pri riešení obchodných problémov vyriešiť rovnaké problémy so zložitým rozhraním ako návrhár používateľského rozhrania.
Hry môžu tiež znamenať trendy. Minimalizmus nájdený v ponukách Colin McRae Rally mi pripomína smerovanie iOS7. Istým spôsobom sa dnes v hrách pred rokmi objavoval animovaný design používateľského rozhrania, ktorý je dnes trendy. Prechod od skeomomorfizmu k holým, funkčným rozhraniam a „plochému dizajnu“ bol zrejmý aj v hrách. Porovnajte Oblivion z roku 2006 s Skyrim z roku 2011. Obidve hry sú RPG rovnakej série, rozdiel je však markantný.
Inšpiráciou pre mňa boli aj futuristické rozhrania v marvelovských filmoch ako Iron Man. Nie sú to úplne použiteľné príklady, ale prinútia ma viac premýšľať o výpočtovej technike ako celku. Chceme budúcnosť obrazoviek alebo chceme, aby obrazovky zmizli? Toto je asi dobrá otázka v krčme plnej dizajnérov.
Vyrastáte ako dizajnér prostredníctvom tvrdej práce, vytrvalosti, rozhovorov so svojimi rovesníkmi a strašného čítania. Asi pred rokom som v New York Times čítal článok o ľuďoch do 80. rokov, ktorí naďalej zdokonaľujú svoje remeslo. Mám pocit, že iba začínam. Čo ty
