UX tervezés – Részletes útmutató. Mi az UX és UI design – jellemzők és különbségek Mi az ui ux design

Új cikket mutatunk be a sorozatban. A sorozat ezen részében egy UX/UI tervező pozícióját fogjuk megvizsgálni – egy olyan szakember, aki a termék megjelenésének és logikájának összehangolásáért felelős.

UX/UI tervező- felhasználói felületeket tervező szakember.

Tipikus munkanap magába foglalja:

• kiemelt feladatok elvégzése (tervezés, rajz);
• kommunikáció az ügyféllel;
• szerkesztések elvégzése.

Előnyök és hátrányok

A szakma a világ jobbá tételének lehetőségével, valamint ígéretével és piaci keresletével vonzza a tervezőket:

„Szeretek azt hinni, hogy nagy közönség számára is meg tud oldani egy problémát, vagy legalább kellemesebbé és érdekesebbé tenni a tartalom észlelésének folyamatát. Érdekes az emberek körül piszkálni, és megpróbálni megérteni, mire van valójában szükségük, majd kitalálni, hogyan valósítsák meg ezt.”

„A terület azért nagyon érdekes, mert a tervező helyes döntései jelentősen leegyszerűsíthetik és javíthatják annak az embercsoportnak az életminőségét, akik számára egy bizonyos terméket vagy projektet fejlesztenek. Sokat megtudhat a világ különböző vállalkozástípusairól is, ami hasznos lehet saját vállalkozás elindításához és a világ globálisabb szemléletéhez.”

„Személy szerint engem idegesítenek a hülye alkalmazások, a liftekben elhelyezett kellemetlen gombok, a rosszul megtervezett kocsibelsők – szeretek valamit csinálni, ami ezen javíthat. Ez a világ annyira tökéletlen (nem a természet – ott minden tökéletes és kiegyensúlyozott), hogy mindig van munka egy okos tervezőnek.”

„Rendszeradminisztrátori programozónak tanultam, de mindig érdekes volt Photoshopban csinálni valamit. Korábban nem volt annyi oktatóanyag, videóleckék és cikk, mint most, így a legtöbb funkciót és szolgáltatást véletlenszerűen tanultam meg. Később úgy döntöttem, hogy kipróbálom az Illustratort, sokkal bonyolultabb volt, mint a Photoshop, de vektorok készítésére kiváló. Szeretek valami újat alkotni, valami hasznosat és szépet, szeretek fejlődni és látni az elért eredményt. A tervezési terület mindezt lehetővé teszi. Az is érdekes, ahogy a trendek változnak, új programok, szolgáltatások jelennek meg, mindezt mindig követni kell, és folyamatosan fejlődni kell.”

„Szeretem az UX/UI dizájnt, mert ez egy nagyon ígéretes irány. A technológiák nagyon gyorsan fejlődnek, néhány felületet újak váltanak fel, és mindegyiket meg kell tervezni. Itt nem csak azon lehet gondolkodni, hogy szépnek tűnik-e a felület, hanem arra is, hogy mennyire kényelmes, és mennyire tudja megoldani az ember problémáját (vagy gyorsan megtalálja a megfelelő kávézót, vagy jegyet foglalhat egy koncertre, vagy segít elkészíteni kedvencét étel) . Az interfészek mindenhol megtalálhatók: az orvosi berendezésektől az autókig. Amikor az autók repülnek, valakinek át kell gondolnia az interfész interakcióját egy személlyel. És mi leszünk – UX/UI tervezők.”

További plusz a távoli munkavégzés lehetősége (az összes tervező 20%-a), a szabadúszó projektek nagy választéka.

A mínuszok között A tervezők hivatásukat az olyan ügyfelekkel való kommunikációnak nevezik, akik nem tudják, mit akarnak, valamint az informatikus kollégák alábecsülik őket:

„Az esetek 80-90%-ában műszaki specifikációk nélkül kell dolgoznia olyan követelményekkel, mint: „Tegye megaszépvé és mega-konfigurálhatóvá.”

„A szakma hátrányának tartom a dizájnhoz és a dizájnerekhez való hozzáállást Ukrajnában. Valamilyen oknál fogva mindenki azt gondolja, hogy ha egyszer megnyitotta a Photoshopot, akkor automatikusan tervezők lehetnek, és önállóan dönthetik el, mennyi időt fordítanak a tervezésre. Ebben különösen a tapasztalatlan menedzserek és programozók a hibásak (az egyik újonc menedzser azt állította, hogy Paintben 30 perc alatt el tudja végezni a feladatot, de nincs ideje kreativitásra).

„A hátrányok közé tartozik a komoly képzés hiánya, valamint a piaci kompetens folyamatok és módszertanok megértésének hiánya. Az outsourcing során lehetetlen nyomon követni az eredményeket és bővíteni saját bevált gyakorlatait. A termék kissé monoton az érett emberek számára, és teljes káosz az induló vállalkozások számára.”

“A hátrányok – mint minden informatikában – az ülőmunka, a fájdalmas szemek és néha egy vásárló, akinek még fehérebbé kell tennie a fehéret #ffffff :)”

Hogyan válhat azzá, és hová léphet tovább

Az első és fő felhasználói felületi készség a grafikus szerkesztő elsajátítása. A legnépszerűbb eszközök az Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Kezdésként megpróbálhatja újrarajzolni bármelyik mobilalkalmazásról vagy webhelyről készült képernyőképeket. De ne csak másoljon (bár ezt is tudnia kell), hanem vegyen észre némi kellemetlenséget, és kínáljon megoldást, hogyan teheti ezt jobban.

Fontos még a színelmélet, a tipográfia, a kompozíció, a weboldal ergonómia (a felület használhatóságának alapelvei), valamint a marketing, az üzleti elemzés és a pszichológia alapjainak megértése. A fejlesztőkkel való hatékonyabb kommunikációhoz hasznosak lesznek az elrendezési ismeretek (HTML/CSS), valamint a JavaScript és a keretrendszerek alapvető ismerete.

Az UX tanulmányozását úgy kezdheti el, hogy Nielsen Norman, Alan Cooper, Jeff Raskin, Steve Krug és Alistair Coburn könyveit olvassa el a módszertannal. Alkalmazottabb irodalom: „The User Experience Team of One: A Research and Design Survival Guide”, Leah Buley.

„A modern világban számos lehetőség kínálkozik a megvalósításra. Vásároltam és vásárolok online tanfolyamokat olyan platformokon, mint a Coursera, Udemy, Edx. Nézem az Adobe, a Google online konferenciáit, olvasok szakirodalmat, elemzem a Dribbble, Behance, Awwwards munkáit.”

„Egy UX/UI tervezőnek tanulmányoznia kell a felhasználói felület klasszikusait: Steve Krug „Don’t Make Me Think”, Norman „The Design of Common Things”, olvassa el Luke Wroblewski. Folyamatosan gyakorolnod kell, a felhasználó helyébe kell helyezned magad. Keress egy mentort, aki rámutat a hibákra, tanácsokat ad és ösztönzi a növekedést.”

Pályafutását különböző angol nyelvű platformokon szabadúszóként kezdheti, ha például a Dev Challenge-en is próbára teheti tudását. Ez segít egy portfólió felépítésében.

UX és UI készségek és kompetenciák ()

A személyes tulajdonságok, amelyek fontosak:

• kitartás;
• kitartás;
• kreatív gondolkodás;
• perfekcionizmus;
• tanulási és fejlődési vágy;
• képesség meghallani a kritikát.

„Az interfészeket tervező személy mérnök, erős analitikus gondolkodással, fejlett empátiás képességekkel és a dolgok lényegébe való behatolás képességével kell rendelkeznie. Természetesen vannak gyakorlati készségek is - a különféle technológiák és eszközök elsajátítása, de ez általában a második helyen áll az embernek természeténél fogva mérnöknek kell lennie. És nem nehéz azzá válni, ha keményen dolgozol rajta, könyveket és cikkeket olvasol a tervezésről (kompozíció, színtudomány, tipográfia) és pszichológiáról (meg kell értened, hogy az ember hogyan hoz döntéseket és hogyan működik az agya), előadásokra jársz. és workshopok és sok a gyakorlás”.

Lehetséges karrierutak UX/UI tervező:

• fejlődjön tervezőként, növelje az arányát (ha szabadúszó);
• kapcsolódó területek elsajátítása, fejlesztés terméktervezőként, VR-tervezőként, VFX-tervezőként, Játéktervezőként;
• művészeti igazgatói pozícióba nőni (tervezésvezető);
• úgy fejlődjön, mintha a tervezésről a termékmenedzsment egészére szeretne váltani;
• légy, ha érdekel az emberek koordinálása;
• tegye meg, ha jobban érdekli a technikai szempont;
• sajátítsa el a programozást, és legyen felhasználói felület fejlesztője;
• próbáld ki magad a marketingben vagy .

„A technológia nagyon gyorsan fejlődik, és mindig megjelenik valami új, mindennek megvan a maga egyedi tervezése, megvannak a maga követelményei és sajátosságai. És mi, tervezők, segítünk, hogy mindez jobbá, szebbé és kényelmesebbé váljon :)"

Köszönöm Julia Bondarenkónak, Maxim Palivodának, Marina Popovichenkonak és 25 másik ukrán tervezőnek, akik elmondták a DOU-nak álláspontjukat a cikk megírásában nyújtott segítségükért. A cikkben szereplő idézetek az ő történeteikből származnak.

Az IT-iparban meglehetősen sok terület kapcsolódik a tervezéshez. Közülük a legelterjedtebbek a designerek, az UX és UI mozaikszó mögé bújva. Nos, néhány embernek még a front-end fejlesztőket is sikerül tervezőként bevonni. Próbáljuk meg kitalálni, hogy kik a tervezők az IT-világban, mi a különbség a felhasználói felület és az UX között, és milyen kapcsolatban állnak a front-end mérnökök a tervezéssel.

Tervezők

Az alkalmazások, weboldalak vagy játékok felületének fejlesztése meglehetősen összetett folyamat, és különböző területekről származó ismeretek alkalmazását igényli: mérnöki, pszichológiai és tervezési. A felhasználói felület tervezői (angolul - User Interface vagy UI) a webhely funkcióinak megjelenítési módjára (keresés, lapok, menük), valamint a kliens és a felület közötti interakció részleteire összpontosítanak. A felhasználói felület tervezőjének célja egy esztétikailag elfogadható modern terméktervezés. Az UX a User Experience rövidítése, ami „felhasználói élményt” jelent. Az UX tervezők jobban összpontosítanak arra, hogy a potenciális felhasználó kezelje és megértse a felületet. Egy ilyen szakember gyakran végez olyan kutatásokat és felméréseket, amelyek a tervezési koncepció megalkotásának alapját képezik, valamint teszteli a koncepciókat a fejlesztés alatt és után. Általában a szerkezetre, a tartalomra, a navigációra és a felhasználó által ezekkel az elemekkel való interakcióra összpontosít.

Oldaltérképeket, prototípusokat készít, amelyek a szoftverkészítés alapstruktúráját jelentik. Az UX tervező munkájának célja, hogy a felhasználó gyorsan és fájdalommentesen megkapja az oldalról azt, amiért idejött. Ma azonban nagyon gyakran látni ezt a két szakirányt perjellel írva. Vagyis mindkét irány feladatait egy szakember látja el. Egy UX/UI tervező megtervezi a felhasználó interakcióját az interfésszel, eldönti, hogy pontosan mit kell tennie, és felelős azért, hogy ennek eredményeként ez a felület hogyan fog kinézni.

Amit egy UX/UI tervezőnek tudnia kell

Grafikus szerkesztő. A piacon a legnépszerűbb eszközök az Adobe Photoshop, az Adobe Illustrator, valamint a Sketch, Figma. Válassza ki az Önnek megfelelő szerkesztőt, és először próbáljon meg képernyőképeket készíteni egy webhelyről vagy alkalmazásról, kissé korszerűsítve azokat.

Prototípuskészítő eszközök (Mockplus, Axure). A prototípuskészítő eszköz az ötlet és a megvalósítás közötti kapcsolat. Nem mindegy, milyen eszközt használsz. Többet is kipróbálhat, és kiválaszthatja a stílusának és preferenciáinak megfelelőt.

Felhasználói pszichológia. Már a tervezési szakaszban át kell gondolnia, hogy Önnek vagy valaki másnak kényelmes-e használni ezt a felületet. Helyezze magát az ügyfél helyébe, építsen ki vele erős kapcsolatot, és figyeljen az igényeire. Hiszen egy termék akkor lesz sikeres, ha van rá kereslet.

Szükséged lesz a tudásra is színelmélet. Gyerekkorunkból ismerünk néhány dolgot, különösen azok, akik művészeti iskolába jártak. Vannak azonban bizonyos sajátosságok a tervezők munkájával kapcsolatban. Az alapvető ismereteket az interneten található könyvekből vagy cikkekből lehet megszerezni.

Célszerű elképzelést alkotni arról tipográfia, a szöveges és a vizuális komponensek kombinálásának eszköze.

Az oldal összetétele és használhatósága.

A munka sajátosságaitól függően szükség lehet a HTML és a CSS vagy (egyes) programozási nyelvek megértésére (az erőforrásokra mutató hivatkozások lent találhatók, a „Mit kell tudnia egy front-end fejlesztőnek”).

Front end fejlesztő

A front-end fejlesztő fő feladata a felület kliens részének fejlesztése. Vagyis egy ilyen szakember „újraéleszti”, amit a tervezők terveztek. Ő felel a felület működéséért és működéséért, és kevésbé a vizuális tartalomért. A front-end fejlesztőknek gyakran jó megoldást kell találniuk a felhasználói felületre a fejlesztési szakaszban, ezért gyakran együttműködik egy UX/UI tervezővel. A front-end fejlesztő által írt kód a felhasználó böngészőjében fut (ahogyan mondják, "a kliens oldalon"). Emellett az egyik legfontosabb feladat annak ellenőrzése, hogy a webhely vagy webalkalmazás minden platformon és böngészőben ugyanúgy néz ki.

Amit egy front-end fejlesztőnek tudnia kell

A kezelőfelület általában három pilléren nyugszik: a HTML oldaljelölő nyelven, a CSS stíluslapokon és a JavaScript programozási nyelven. Ezenkívül a front-end fejlesztőnek ismernie kell a HTTP protokoll működési elveit, a szervereket és a böngészőket, valamint a felület megjelenítésének jellemzőit a különböző, jelenleg forgalomban lévő eszközökön. A webes felületek létrehozásának eszközei és módszerei folyamatosan fejlődnek és változnak, ezért a fejlesztőnek ezt folyamatosan figyelemmel kell kísérnie.

HTML és CSS (elrendezés)

Ez az elrendezés, a téglák, amelyekből az oldal épül. A HTML jelölőnyelv határozza meg a webhely felépítését, tartalmát és a köztük lévő összes interakciót. Lehetővé teszi az oldal tetejének, aljának, oldalsó blokkjainak kijelölését tartalommal, címsorokkal, szöveges és multimédiás elemek megjelenítésével. A CSS stíluslapokat a HTML elemek díszítésére használják. Pontosan meghatározzák, hogy az oldalon található egyes grafikai elemek hogyan jelenjenek meg. A HTML5 és CSS3 legújabb verzióival videó- ​​és audiokomponenseket helyezhet el az oldalon, 2D képeket és animációkat készíthet, sőt egyszerű játékokat is írhat. Nem szükséges egyszerre megjegyezni az összes címkét és stílust. Hasznos lesz megtanulni az alapokat, és azonnal gyakorlatba ültetni. Nagyon jó oldal, ahol elsajátíthatod a HTML és a CSS alapjait – W3School. De csak akkor, ha legalább alapszintű angol tudásod van. Ezenkívül a front-end fejlesztőnek meg kell értenie a több böngésző és platform közötti fejlesztést, az adaptív és reszponzív elrendezést.

Bootstrap

Ez egy keretrendszer HTML, CSS és JavaScript számára. Vagyis bizonyos sablonok, amelyekből, mint egy konstruktorból, sokkal gyorsabban lehet oldalakat összeállítani, mint nélkülük. De természetesen Önnek kell testreszabnia az igényeinek megfelelően. Ha tudsz angolul, akkor a getbootstrap weboldalt és ugyanazt a w3schools-t ajánljuk.

JavaScript

A Javascript a front-end fejlesztés magja. Ez az első és legelterjedtebb interfész programozási nyelv. Rengeteg funkcióval bővítheti az oldalt. Alapszinten ez a nyelv lehetővé teszi interaktív elemek hozzáadását az oldalhoz. Valós időben frissülő térképek, interaktív online játékok és filmek készítésére szolgál. Senior JavaRush tanfolyamainkon egy kis JavaScriptet tanulunk. Tanulmányozhatja ugyanabban a W3Schoolban, vagy olvashat róla oroszul a javascript.ru webhelyen.

jQuery

A jQuery egy Javascript-könyvtár, amely bővítményeket és bővítményeket tartalmaz, amelyek még egyszerűbbé és gyorsabbá tehetik a fejlesztést. Ahelyett, hogy nulláról írna kódot, a könyvtárak lehetővé teszik, hogy kész komponenseket adjon hozzá, amelyeket aztán testreszabhat egy adott projekthez. Használhatja a keresőűrlapok automatikus kitöltésének, a rács átrendezésének és átméretezésének, valamint a visszaszámlálók beállításának funkcióit. Gyakorlati jQuery tanfolyam a w3schoolban

Javascript keretrendszerek

Különféle típusú keretrendszerek léteznek, de kiválaszthatja azt, amelyik kényelmesen használható. A leghíresebbek az Angular, a Backbone, az Ember és a React. Kész struktúrát képviselnek a kód számára. Segítenek felgyorsítani a fejlődést. A könyvtárakkal kombinálva pedig minimálisra csökkenthetik egy webhely vagy alkalmazás fejlesztését a semmiből. 2017 5 legnépszerűbb JavaScript-keretrendszerének és könyvtárának áttekintése

Git verziókezelő rendszer

A verzióvezérlő rendszerek nyomon tudják követni a kód időbeli változásait. Lehetővé teszik továbbá, hogy visszatérjen a projekt korábbi verziójához. A Git a legszélesebb körben használt verziókezelő rendszer. A Git használatának ismerete minden fejlesztő számára fontos készség.

Rövid következtetések

Az UI a User Interface rövidítése, ami „felhasználói felületet” jelent. vagyis UI tervező elsődlegesen felelős azért, hogy a terméket hogyan mutatják be a felhasználónak. Gombokat, ikonokat fejleszt, betűtípusokat választ ki és elrendezést készít. Az UX a User Experience rövidítése. Így UX tervező megtervezi egy weboldal, alkalmazás - vagy bármi - dizájnt, hogy a felhasználó kényelmesen és érthetően érezze, mi az, és minimális erőfeszítéssel megkapja az oldalról azt, amire szüksége van. Nagyon gyakran mindkét típusú munkát egy ember zenekar végzi: egy UI/UX tervező. A Front-end fejlesztő felpezsdíti a tervezők munkáját, dinamikát vezet be: gombokat kezdenek nyomni, és a kép megváltozik. Ismernie kell a keretrendszerekkel, előfeldolgozókkal és könyvtárakkal fűszerezett programozási nyelveket.

A tervezés meglehetősen tág és homályos fogalom. Amikor valaki azt mondja: „Én tervező vagyok”, nem egyértelmű, hogy mit csinál a mindennapokban. Számos különböző iparág tartozik e fogalom alá.

A tervezéssel kapcsolatos munkák számos területen léteznek, az ipari formatervezéstől (autóipar, bútorok), a nyomtatástól (magazinok és egyéb kiadványok) a webdesignig (weboldalak, mobil alkalmazások). Mivel a közelmúltban beözönlöttek a csúcstechnológiás cégek, amelyek a képernyők felületeinek létrehozására összpontosítottak, sok új munka van a tervezésben. Egy UX vagy UI tervező álláspontja nem csak az avatatlanok számára lehet érthetetlen, de még maguknak a más iparágakból érkező tervezőknek is.

– Erre a kérdésre nincs egyetlen helyes válasz.

Próbáljuk kitalálni, mit is jelent ez valójában az IT-iparban.

UX tervező

Az UX tervezők elsősorban azzal foglalkoznak hogyan lép kapcsolatba a termék a felhasználóval. Erre a kérdésre nincs egyetlen helyes válasz. Az UX tervezők különböző megközelítéseket fedeznek fel egy adott felhasználói probléma megoldására. Az UX-tervező fő feladata annak biztosítása, hogy a termék logikusan haladjon egyik lépésről a másikra. Az egyik módja annak, hogy egy UX-tervező megtudja, hogy személyesen végez felhasználói teszteket, és von le következtetéseket érzéseikből. A verbális és non-verbális buktatók azonosításával igazodik és ismétlődik, ezáltal „jobb” élményt teremt a felhasználó számára. Példaként említhető, hogy csodálatos belépési élményt hoz létre egy új felhasználó számára.

„Határozza meg az interakciós modelleket, a felhasználói feladatfolyamatokat és az interfész sajátosságait. Szkriptek, végpontok közötti interakciók, interakciós modellek, grafikus felhasználói felület fejlesztése. Kreatív igazgatónkkal és grafikusunkkal együttműködve egyesítjük a Twitter vizuális oldalát annak funkcionális funkcióival. Szükség szerint dolgozzon ki és tartson karban drótvázakat, maketteket és specifikációkat."

Példa egy UX tervező által fejlesztett alkalmazás képernyőre
Forrás: Kitchenware Pro Kit Wireframe, Neway Lau a Dribbble-n.

Feladat: Képernyő drótvázak, storyboardok, helyszínrajz

Eszközök: Photoshop, Sketch, Illustrator, Fireworks, InVision

Valószínűleg hallottad, hogy ezt mondta: " A regisztráció befejezése után a felhasználónak látnia kell a „Köszönöm” oldalt.

UI tervező

Ellentétben az UX-tervezőkkel, akiket a termék általános tapasztalata érdekel, az UI-tervezőket az érdekli hogy néz ki a termék. Ők felelősek minden olyan képernyő vagy oldal megtervezéséért, amellyel a felhasználó interakcióba lép, és biztosítják az UX-tervező által tervezett felhasználói felület vizuális részét. A felhasználói felület tervezője például egy analitikai irányítópult létrehozásakor fontosabb információkat emelhet ki, vagy eldöntheti, hogy a diagramhoz a legintuitívabban hozzáadható-e a csúszka vagy a vezérlőpult. A felhasználói felület tervezője általában egy komplett tervezési útmutató létrehozásáért is felelős, amely biztosítja a teljes termékre kiterjedő, összefüggő tervezési nyelvet. A vizuális elemek konzisztenciájának megőrzése és a munka irányának meghatározása. Például a hibák vagy figyelmeztetések megjelenítése a felhasználói felület tervezőjének hatáskörébe tartozik.

„Az Airbnb.com vizuális nyelvének koncepciója és megvalósítása. Kibővített stíluskalauz készítése."

A felhasználói felület és az UX tervező közötti határok meglehetősen elmosódnak, és a vállalatok gyakran úgy döntenek, hogy kombinálják ezeket a szerepeket.

A felhasználói felület tervezője határozza meg az alkalmazás általános hangulatát és megjelenését.
Forrás: Metro Style Interface 4, Ionut Zamfir a Dribbble-n.

Eszközök: Photoshop, Sketch, Illustrator, Fireworks

„A „bejelentkezés” és a „regisztráció” mezőket a jobb felső sarokba kell helyezni.”

Grafikus

„A grafikusok átgondolják azokat az apró részleteket, amelyekre mások nem figyelnek.”

A grafikus az, aki grafikával foglalkozik, amit egy nem tervező valószínűleg elmondana neked, ha megkérdeznéd, hogy mit csinál egy tervező. A grafikus tervezőket nem érdekli, hogy a képernyők hogyan utalnak egymásra, sem az, hogy valaki hogyan lép kapcsolatba egy termékkel. Ehelyett a gyönyörű ikonok, kezelőszervek és vizuális elemek megtervezésén, valamint a megfelelő design kialakításán helyezték a hangsúlyt. A grafikusok olyan apró részleteken dolgoznak, amelyeket mások nem látnak, és gyakran dolgoznak a Photoshopban 4-szeres és 8-szoros zoommal.

„Kiváló minőségű vizuális projekteket készíthet az ötlettől a kivitelezésig, beleértve az asztali számítógépet, a webet és a mobilt is többféle felbontásban (ikonok, grafikák és marketinganyagok). Olyan eszközök létrehozása és iterálása, amelyek tükrözik a márkát, széppé teszik a terméket és életet lehelnek bele.”

A felhasználói felület tervezőinek gyakran nemcsak saját munkájukat kell elvégezniük, hanem pixel-tökéletes elrendezést is kell készíteniük. Egyes cégek úgy döntenek, hogy nem töltenek be elkötelezett személyt a grafikus tervező szerepébe.

Egy grafikus tervez, irányít és állít be minden pixelt a tökéletes végeredmény érdekében.
Forrás: IOS 7 Guide Freebie PSD, Seevi kargwal a Dribbble-n.

Eszközök: Photoshop, Sketch

Valószínűleg hallottad már, hogy ezt mondta:"Csökkentse a bevágást, és mozgassa a gombot 1 pixel balra!"

Mozgástervező

Emlékszel arra a finom mozgásra, amikor a képernyőt húzva frissíti az e-maileket iPhone-ján? Ez a mozgástervező feladata. A grafikusokkal ellentétben, akik általában statikus objektumokkal dolgoznak, a mozgástervezők animációkat készítenek az alkalmazáson belül. foglalkoznak mit csinál a felület, miután a felhasználó megérintette. Például eldöntik, hogyan csússzon a menü, milyen effektusokat használjon az átmenetekhez, és hogyan nyomja meg a gombot. Ha jól csináljuk, a mozgás a felület szerves részévé válik, vizuális jelzéseket adva a termék használatához.

„Szükséges a grafikai tervezés, a mozgástervezés, a digitális művészet ismerete, a szín- és tipográfiai érzék, az anyagok/textúrák általános ismerete és az animáció gyakorlati ismerete. iOS, OS X, Photoshop és Illustrator firmware ismerete, valamint a Director (vagy azzal egyenértékű), a Quartz Composer (vagy azzal egyenértékű), a 3D számítógépes modellezés, a mozgó grafika ismerete.”

Eszközök: AfterEffects, Core Composer, Flash, Origami

Valószínűleg hallottad már, hogy ezt mondta:"A menünek 800 ms után fel kell bukkannia a bal oldalon."

UX kutató

Egy UX-kutató mindent tud a felhasználói igényekről.

Egy UX-kutató mindent tud a felhasználói igényekről. A kutató célja két fő kérdés megválaszolása: „Kik a felhasználóink?” és „Mit akarnak a felhasználók?” Ez általában felhasználói felméréseket, piackutatást és adatelemzést foglal magában. A tervezés egy állandó iteráció folyamata. A kutatók A/B tesztekkel segíthetnek ebben a folyamatban, hogy kiderítsék, melyik tervezési lehetőség felel meg leginkább a felhasználói igényeknek. Az UX-kutatók általában a nagyvállalatok alappillérei, ahol a nagy mennyiségű adathoz való hozzáférés bőséges lehetőséget ad számukra statisztikailag szignifikáns következtetések levonására.

„Szorosan működjön együtt a fejlesztőcsapatokkal a kutatási témák azonosítása érdekében. Kutatási tervezés mind a felhasználói cselekvésekkel, mind a felhasználói észleléssel kapcsolatban. Kutatások végzése különféle módszerek, például felmérések segítségével és alkalmazásával.”

A tervezés meglehetősen tág és homályos fogalom. Mikor beszél valaki? „Én tervező vagyok” – nem világos, hogy valójában mit csinál minden nap. Számos különböző terület tartozik a tervezés ernyője alá.

A formatervezéssel kapcsolatos szakmák számos területen léteznek – az ipari formatervezéstől (autó- és bútortervezés stb.), a nyomdai tervezéstől (magazinok és egyéb nyomtatott kiadványok) a webdesignig (weboldalak, mobil alkalmazások).

A közelmúltban azonban számos új tervezői szakma jelent meg, amelyek a különböző típusú képernyők interfészeinek fejlesztésére összpontosítanak. Az UX- vagy UI-tervezői elnevezésű munkák a hozzá nem avatottak, sőt gyakran maguk a más területről érkező tervezők számára is érthetetlenek.

Próbáljuk megérteni, mit jelentenek ezek a kifejezések.

UX tervező (USER EXPERIENCE designer)

Az UX-tervező elsősorban arra összpontosít, hogy a termék hogyan „érződik” és hogyan érzékeli a felhasználó. A tervezőnek adott feladatnak nincs egy helyes válasza. Az UX tervezők különböző megközelítéseket próbálnak ki egy adott felhasználói probléma megoldására. Az UX-tervező felelősségi körébe tartozik annak biztosítása, hogy a termék következetesen áthelyezze az ügyfelet egyik szakaszból a másikba. Ennek egyik módja az, hogy közvetlen teszteket végeznek egy valós felhasználóval, hogy megfigyelhessék viselkedésüket. A verbális és non-verbális akadályok azonosításával az UX-tervezők javítják a terméket, és következetesen hozzák létre a legjobb megoldást a termékkel való felhasználói interakcióhoz. A tesztverzió szükséges a termék legkényelmesebb használatának biztosításához.

Példa egy élménytervező munkaköri leírására a Twitteren:

„Határozza meg az interakciós modelleket, a felhasználói feladatfolyamokat és a felhasználói felület specifikációit. Mutasson be különböző forgatókönyveket az események fejlesztéséhez, írja le a használat folyamatát és az interakciós modelleket az elejétől a végéig, és mutasson be mintákat az érdeklődőknek. Együttműködjön kreatív igazgatónkkal és vizuális tervezőinkkel a Twitter vizuális identitásának és aláírási funkcióinak egységesítése érdekében. Szükség szerint dolgozzon ki vagy tartson fenn terveket, maketteket és szabványokat."

Munka eredménye: képek elrendezései képernyőkön, forgatókönyvek, helyszínrajz.

Eszközök: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI tervező (FELHASZNÁLÓI INTERFÉSZ-tervező)

Ellentétben az UX-tervezőkkel, akik felelősek a termék általános élményéért, az UI-tervező munkája a termék tervezése körül forog. Ezek a szakemberek felelősek minden olyan oldal vagy képernyő kialakításáért, amellyel a felhasználó interakcióba lép, és gondoskodniuk kell arról, hogy a felhasználói felület vizuálisan megfeleljen az UX tervezője által meghatározott útvonalnak. Például egy analitikai irányítópultot létrehozó felhasználói felület-tervező megjelenítheti a legfontosabb tartalmat az oldal tetején, vagy úgy dönthet, hogy egy csúszka vagy vezérlőgomb megfelelőbb ahhoz, hogy a felhasználó érzékelje a grafikon módosítását.

Általában a felhasználói felület tervezője is felelős az egységes stílus létrehozásáért, és gondoskodnia kell arról, hogy a megfelelő tervezési nyelvet alkalmazzák az egész terméken.

Az összes vizuális elem konzisztenciájának megőrzése és a viselkedés meghatározása (például a hibák vagy figyelmeztetések megjelenítése) a felhasználói felület tervezőinek hatáskörébe tartozik.

A határvonal e két szakma között meglehetősen elmosódott, és gyakran a cégek egy embert alkalmaznak erre a két pozícióra.

Eszközök: Photoshop, Sketch, Illustrator, Fireworks

Látványtervező (grafikus tervező)

A látványtervező az, aki grafikával foglalkozik. Ha megkérdezünk valakit, aki nem tervez, mi az a tervező, akkor valószínűleg egy grafikus jut eszünkbe először. A grafikus tervezőknek semmi közük ahhoz, hogy a képernyők hogyan kommunikálnak egymással, vagy hogyan lép kapcsolatba valaki egy termékkel. Ehelyett a gyönyörű ikonok, vezérlők és egyéb vizuális elemek létrehozására, valamint a megfelelő betűtípusok kiválasztására összpontosítanak. A grafikusok olyan apró részleteken dolgoznak, amelyekre mások nem figyelnek, és gyakran a Photoshopban 4-szeres vagy 8-szoros sebességgel dolgoznak.

Az is elég gyakori, hogy a felhasználói felület tervezői kettős feladatot látnak el, és elkészítik a képelemek végső változatát. Egyes cégek úgy döntenek, hogy nem vesznek fel külön grafikust.

Eszközök: Photoshop, Sketch

Interaktív tervező (mozgástervező)

Emlékszel arra a szinte észrevehetetlen ugráló animációra, amikor frissíti az e-mailjeit iPhone-ján? Ez a mozgástervező feladata. A statikus elemekkel dolgozó grafikusokkal ellentétben a mozgástervezők animációkat készítenek az alkalmazásokon belül. Ők foglalkoznak azzal, hogy mit csinál a felület, miután a felhasználó hozzáér. Például eldöntik, hogyan bővüljön ki a menü, milyen átmeneti effektusokat használjon, és hogyan reagáljon egy adott gomb. A jól kivitelezett mozgástervezés az interfész szerves részévé válik, vizuális jelzéseket adva a termék használatához.

Mozgástervező munkaköri leírás az Apple-nél:

„Magas végzettség a grafikai tervezésben, a mozgógrafikában, a digitális művészet ismerete, a betűtípusok és a színek jó érzékelése, az anyagokra és a textúrákra való általános odafigyelés, valamint az animáció gyakorlati ismerete. iOS, OS X, Photoshop és Illustrator ismerete, valamint a Director (vagy azzal egyenértékű), Quartz Composer (vagy azzal egyenértékű), 3D modellezés, mozgógrafika ismerete"

Eszközök: AfterEffects, Core Composer, Flash, Origami

UX-kutató (felhasználókutató)

Egy UX-kutató célja két kérdés megválaszolása: „Ki az ügyfelünk?” és „Mit akar a fogyasztónk?” A kutató feladatai közé tartozik általában a felhasználói interjúk készítése, a marketingadatok kutatása és általában az elemzések gyűjtése. A tervezés a folyamatos fejlesztés folyamata. Egy kutató segíthet ebben a folyamatban, ha A/B tesztelést végez, hogy megállapítsa, melyik tervezési megoldás felel meg legjobban a fogyasztói igényeknek. Az UX-kutató általában a nagyvállalatok támasza, ahol a hatalmas mennyiségű információhoz való hozzáférés elegendő erőt ad ahhoz, hogy értelmes következtetéseket vonjon le.

Facebook UX Kutató Munkaleírás:

„Működjön szorosan együtt a termékcsapatokkal a kutatási témák azonosítása érdekében. Olyan kutatásokat végezzen, amelyek egyszerre foglalkoznak a fogyasztói magatartással és a fogyasztói véleményekkel. Végezzen kutatást kvalitatív és kvantitatív módszerek széles skálájával, például felmérésekkel.”

A UX-tervezők rendszeresen UX-kutatóként szolgálnak.

Munka eredménye: felhasználói profil, A/B tesztelési eredmények, viselkedési felhasználói kutatások/interjúk.

Eszközök: mikrofon, papírok, dokumentumok

Kezelőfelület-fejlesztő (UI-fejlesztő)

A termékfelület funkcionális megvalósításáért külső fejlesztők felelősek. A felhasználói felület tervezője általában egy statikus modellt ad át egy külső fejlesztőnek, aki aztán működő, interaktív termékké alakítja át. A külső fejlesztők felelősek a mozgástervező által készített interaktív grafika kódolásáért és elrendezéséért is.

Eszközök: CSS, HTML, JavaScript

Terméktervező

A terméktervező egy mindenre kiterjedő kifejezés egy olyan tervező leírására, aki általában részt vesz a termék imázsának és megítélésének kialakításában.

A terméktervező szerepe nem túl pontosan meghatározott, és vállalatonként változó. A terméktervező minimális kódolást végezhet, felhasználói kutatást végezhet, interfészeket vagy vizuális elemeket hozhat létre. A terméktervező az elejétől a végéig segít azonosítani a kezdeti problémát, felállítani néhány kritériumot a megoldásához, majd különféle megoldásokat létrehozni, tesztelni és finomítani. Egyes vállalatok, amelyek „folyékonyabb” együttműködésben szeretnének dolgozni, a jelentkezők keresése során ezt az állást adják meg, hogy végül multidiszciplináris tervezőkből álló csapatot hozzanak létre, és azon dolgozzanak, hogy a felhasználók hogyan érzékeljék a terméket, felhasználói kutatásokat végezzenek és vizuális elemeket hozzanak létre.

Egyes vállalatok a "UX designer" vagy egyszerűen a "designer" kifejezést használják átfogó kifejezésként. A munkaköri leírás elolvasása a legjobb módja annak, hogy rájöjjön, milyen szakértelme lesz.

Terméktervező munkaköri leírás a Pinterest számára

„A tervezés minden területén jártasság: interakció, vizuális rész, a termékkel való munka, elrendezés. Sablonok készítése képelemekhez és elrendezésükhöz.”

Tervezőt keresek

A leggyakoribb mondat, amit fiatal startupoktól hallok. Általában olyan embert keresnek, aki a fentiek mindegyikére képes. Olyan embert keresnek, aki tud gyönyörű ikonokat készíteni, nyitóoldalakat készíteni, A/B teszteket futtatni, UI elemeket logikusan elhelyezni a képernyőn, és akár a front-end fejlesztői feladatok egy részét is el tudja látni. Ennek a pozíciónak az általános jellegéből adódóan gyakran hallani, hogy egy cég csak egy „tervezőt” szeretne felvenni anélkül, hogy belemélyedne ennek a szakmának a részleteibe és sajátosságaiba.

Az egyes tervezési irányzatok közötti határok nagyon elmosódnak. Várhatóan egyes UX-tervezők a fogyasztókkal való interakción is dolgoznak majd, néhány UI-tervező pedig grafikával is foglalkozik majd. A legjobb módja annak, hogy tervezőt találjon, ha részletesen leírja, mit vár el tőle a cégénél végzett munka részeként, és olyan munkakört választ, amely a legvilágosabban tükrözi a tervező felelősségét.

Arra a kérdésre, hogy mi a különbség egy UX-tervező és egy UI-tervező között, az emberek szeretnek nemleges választ adni. Tudod, egy ilyen irodalmi eszköz. Mint például: „Az UX nem a felületről szól, nem a grafikai tervezésről, nem a használhatóságról, nem az elemzésről, nem egy prototípusról.” Ma röviden bemutatjuk a különbséget, elmeséljük a kifejezések megjelenésének történetét, és elmagyarázzuk, hogy a két fogalom oly sok év után is miért olvad olyan szívesen egy UX/UI-ba.

Röviden a különbségről

A UI tervező (felhasználói felület) egy ideális környezetben működő felülettervező, aki gombokat, ikonokat, űrlapokat rajzol, betűtípusokat választ ki, és mindenből harmonikus és szép elrendezést készít. Weboldal, alkalmazás, bármi, amivel a felhasználó interakcióba lép – még az állomásterminál képernyője is. És nem gondol másra.

Az UX designer (user experience) nem designer, hanem designer (csak az angolban a designer szónak csak a második jelentése van). Tanulmányozza a felhasználók igényeit, logikai diagramokat készít az interfészről, prototípusokat tesztel valós embereken, és műszaki specifikációkat ír a tervezéshez. Vagyis ez egy ilyen marketingmérnök: az input az analitika, a kimenet az interfész létrehozásának elvei, a munka logikája, az elrendezés, a tartalom. Ez nem vonatkozik a rajzra, mint olyanra.

Ez minden.

Miért kellett bonyolultnak lennie?

Ahogy korábban is: a tervező megkapta a feladatot, hogy „rajzoljon egy weboldalt”. Az összes oldal többé-kevésbé ugyanaz volt: otthon, a cégről, katalógus, majd a lista lefelé. A tervező megkérdezte: „Mikor adják át nekünk a tartalmat?” Soha, szellem elvtárs, ez egy hadsereg.

A tervezőt pedig egyszerűen „tervezőnek” hívták. Tengerentúli előtagok nélkül.

Ami később történt: az ügynökségek több pénzt akartak kapni, és a világ fokozatosan megkezdte az átállást a „csak weboldalakról” a komplex webszolgáltatásokra. A szolgáltatás pedig nemcsak egyedi felület, hanem egy speciális üzleti folyamat is mögötte. Emlékezzen például az Airbnb webhelyére – a téma alapos tanulmányozása nélkül egyetlen grafikus sem tud azonnal létrehozni egy felületet.

Mivel több volt a munka, egy szakmát több részre kellett osztani. Most az UX-specialista (nevezzük így a félreértések elkerülése végett) az információs architektúrát kutatta és tervezte, a prototípus készítője a funkcionális részt, a grafikus (UI) tervező pedig elkészítette a végterméket: modern és tetszetős a szemnek.

Ugyanez megtörtént már a szakmában. Például a „programozókat” egyszerűen „frontend”-re és „backend”-re osztották. A frontenderekből pedig valódi frontenderek és „csak elrendezéstervezők” válnak. Apropó, .

Az ok mindig ugyanaz: egy ember nem elég egy nagy folyamathoz. Menjünk tovább.

Ki UX/UI tervező

Ami vicces: az állásajánlatok gyakran tartalmaznak UX/UI tervezői pozíciókat, csak úgy, egy perjellel. Még Tinkoff is keres ilyen kombó specialistát:

A barikádok másik oldalán a tervezők mind UX/UI-ként kezdtek emlegetni magukat. Mert csak tervezőnek lenni durva, nem divat.

Ki az UX/UI egy ideális világban? Egy szupermen, aki elvégzi az UX-munka teljes ciklusát, és utána még mindig sikerül mindent megrajzolnia többszöri szerkesztési iterációval (a felhasználói felület elkészítése).

Mi is pontosan az UX/UI? Csak egy jó tervező. Azoknak, akik kötelességüknek tartják, hogy ne csak „maketteket készítsenek”, hanem minden projektet egyedileg közelítsenek meg, kezdve elemzésekkel, kérdésekkel, pontosításokkal, vázlatokkal, diagramokkal stb. Ez nem egy teljes értékű UX vizsgálat, de általában elegendő egy kész szolgáltatás támogatása vagy „csak egy weboldal” fejlesztése.

Tehát ha lát egy csodálatos UX/UI mutánst, tudd meg ezt:

• Ez egy olyan tervező, aki a fejével közelíti meg a projektet, nem csak az egerét és a csőrét kattintgatja.
• Ez egy srác, aki sok okos szót olvasott, és most UX/UI-nak hívja magát.

Egyszerűen ellenőrizhető: kérje meg a tervezőt, hogy mondja el, miért választotta az elemeknek ezt a bizonyos elrendezését, ezt a képernyősort stb. Egy jó tervező nem hoz egyetlen interfész döntést csak úgy – mindennek megvan a logikus indoklása.

Apropó

Ez a cikk a második a „Miben különbözik az egyik webszakértő a másiktól” sorozatban. Mi késztetett bennünket arra az ötletre, hogy készítsünk egy könyvtárat az internetről az összes szakmáról, a nevük különböző változataival. Hogy világosabbá tegyük az ügyfél (és ami azt illeti, mindannyiunk) életét.