UX dizajn - detaljan vodič. Što je UX i UI dizajn - značajke i razlike Što je ui ux dizajn

Predstavljamo novi članak u seriji. U ovom dijelu serijala razmotrit ćemo poziciju UX/UI dizajnera - stručnjaka odgovornog za usklađivanje izgleda i logike proizvoda.

UX/UI dizajner- stručnjak koji dizajnira korisnička sučelja.

Tipičan radni dan uključuje:

• rad na prioritetnim zadacima (dizajn, crtanje);
• komunikacija s kupcem;
• uređivanje.

Prednosti i nedostatci

Profesija privlači dizajnere mogućnošću da svijet učine boljim mjestom, kao i svojim obećanjima i potražnjom na tržištu:

“Volim misliti da ste u stanju riješiti problem za veliku publiku ili barem učiniti proces percepcije sadržaja ugodnijim i zanimljivijim. Zanimljivo je čeprkati po ljudima i pokušavati shvatiti što im stvarno treba, a zatim smisliti kako to implementirati.”

“Područje je vrlo zanimljivo jer ispravne odluke dizajnera mogu značajno pojednostaviti i poboljšati kvalitetu života skupine ljudi za koje se razvija određeni proizvod ili projekt. Također možete naučiti puno o različitim vrstama poslovanja u svijetu, što može biti korisno za pokretanje vlastitog posla i zauzimanje globalnijeg pogleda na svijet.”

“Osobno me nerviraju glupe aplikacije, nezgrapni položaji gumba u dizalima, loše dizajnirana unutrašnjost automobila – volim raditi nešto što to može poboljšati. Ovaj svijet je toliko nesavršen (ne priroda - tamo je sve savršeno i uravnoteženo) da za pametnog dizajnera uvijek ima posla.”

“Učio sam za sistemskog administratora programera, ali uvijek je bilo zanimljivo raditi nešto u Photoshopu. Prije nije bilo toliko vodiča, videolekcija i članaka kao sada, pa sam većinu funkcija i značajki naučio nasumično. Kasnije sam odlučio isprobati Illustrator, bio je puno kompliciraniji od Photoshopa, ali odličan za izradu vektora. Volim stvarati nešto novo, nešto korisno i lijepo, volim se usavršavati i vidjeti postignuti rezultat. Polje dizajna omogućuje vam sve to. Zanimljivo je i kako se trendovi mijenjaju, pojavljuju se novi programi i mogućnosti, sve to uvijek treba pratiti i stalno se razvijati.”

“Sviđa mi se UX/UI dizajn jer je to smjer koji jako obećava. Tehnologije se jako brzo razvijaju, neka se sučelja zamjenjuju novima i sva ih je potrebno dizajnirati. Ovdje ne možete razmišljati samo o tome izgleda li sučelje lijepo, već io tome koliko je zgodno i koliko može riješiti problem osobe (ili brzo pronaći pravi kafić, ili rezervirati kartu za koncert, ili pomoći pripremiti svoj omiljeni jelo) . Sučelja su posvuda: od medicinske opreme do automobila. Kada automobili lete, bit će potrebno da netko razmisli o interakciji njihovog sučelja s osobom. A to ćemo biti mi - UX/UI dizajneri."

Još jedan plus je mogućnost rada na daljinu (20% svih dizajnera), veliki izbor slobodnih projekata.

Među minusima Dizajneri svoju profesiju nazivaju komunikacijom s kupcima koji ne znaju što žele, kao i podcjenjivanjem od strane IT kolega:

"U 80-90% slučajeva morate raditi bez tehničkih specifikacija sa zahtjevima poput: "Učinite ga mega-lijepim i mega-konfigurabilnim."

“Odnos prema dizajnu i dizajnerima u Ukrajini smatram nedostatkom profesije. Iz nekog razloga svi misle da ako su jednom otvorili Photoshop, onda automatski mogu biti dizajneri i samostalno odlučivati ​​koliko će vremena potrošiti na dizajn. Posebno su za to krivi neiskusni menadžeri i programeri (jedan menadžer početnik je tvrdio da bi mogao obaviti zadatak za 30 minuta u Paintu, ali nema vremena za kreativnost)."

“Nedostaci su nedostatak bilo kakve ozbiljne obuke i nerazumijevanje kompetentnih procesa i metodologija na tržištu. U outsourcingu je nemoguće pratiti rezultate i povećati vlastitu najbolju praksu. Proizvod je pomalo monoton za zrele ljude i potpuni kaos za startupe.”

“Loše strane - kao i u svim IT-ima - su sjedilački posao, bolne oči i ponekad mušterija koja treba učiniti bijelo #ffffff još bjeljim :)”

Kako postati i kamo dalje

Prva i glavna vještina korisničkog sučelja je svladavanje grafičkog uređivača. Najpopularniji alati su Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Za početak, možete pokušati ponovno nacrtati snimke zaslona bilo koje mobilne aplikacije ili web stranice. Ali nemojte samo kopirati (iako i to morate znati), već uočite neku neugodnost i ponudite rješenje kako to učiniti bolje.

Također je važno razumjeti teoriju boja, tipografiju, kompoziciju, ergonomiju web stranice (principe upotrebljivosti sučelja), kao i osnove marketinga, poslovne analize i psihologije. Za učinkovitiju komunikaciju s programerima bit će korisne vještine izgleda (HTML/CSS) te osnovno poznavanje JavaScripta i frameworka.

Možete početi proučavati UX tako što ćete se upoznati s metodologijom čitajući knjige Nielsena Normana, Alana Coopera, Jeffa Raskina, Stevea Kruga, Alistaira Coburna. Više primijenjene literature je “The User Experience Team of One: A Research and Design Survival Guide” autorice Leah Buley.

“U suvremenom svijetu postoji mnogo mogućnosti za implementaciju. Kupio sam i nastavljam kupovati online tečajeve na platformama kao što su Coursera, Udemy, Edx. Gledam online konferencije Adobea, Googlea, čitam tehničku literaturu, analiziram rad na Dribbbleu, Behanceu, Awwwardsu.”

“UX/UI dizajner treba proučavati klasike korisničkog sučelja: “Don’t Make Me Think” Stevea Kruga, “The Design of Common Things” Normana, čitati Lukea Wroblewskog. Trebate stalno vježbati, staviti se u kožu korisnika. Pronađite mentora koji će ukazivati ​​na greške, davati savjete i poticati rast.”

Svoju karijeru možete započeti slobodnim radom na raznim platformama na engleskom jeziku; također će biti korisno testirati svoje vještine na prvenstvima, na primjer, Dev Challenge. To će pomoći u izgradnji portfelja.

UX i UI vještine i kompetencije ()

Osobne kvalitete koje su važne su:

• ustrajnost;
• ustrajnost;
• kreativno razmišljanje;
• perfekcionizam;
• želja za učenjem i razvojem;
• sposobnost da se čuje kritika.

“Osoba koja dizajnira sučelja je inženjer, mora imati snažno analitičko razmišljanje, visoko razvijene vještine empatije i sposobnost prodiranja u bit stvari. Naravno, tu su i praktične vještine - vladanje raznim tehnologijama i alatima, ali to je u pravilu na drugom mjestu, osoba mora biti inženjer po prirodi. A to nije teško postati ako se trudite, čitate knjige i članke o dizajnu (kompozicija, znanost o boji, tipografija) i psihologiji (trebate razumjeti kako čovjek bira i kako mu radi mozak), idete na predavanja i radionice i puno toga za vježbanje".

Mogući putevi karijere UX/UI dizajner:

• poboljšati se kao dizajner, povećati svoju stopu (ako ste freelancer);
• ovladati srodnim područjima, razvijati se kao dizajner proizvoda, VR dizajner, VFX dizajner, Game dizajner;
• narasti do pozicije Art Director (Head of Design);
• razvijajte se kao da želite prijeći s dizajna na upravljanje proizvodom u cjelini;
• postanite ako ste zainteresirani za koordinaciju ljudi;
• učinite ako vas više zanima tehnički aspekt;
• svladati programiranje i postati UI developer;
• okušajte se u marketingu ili .

“Tehnologija se jako brzo razvija i stalno se pojavljuje nešto novo, sve traži svoj specifičan dizajn, ima svoje zahtjeve i karakteristike. A mi, dizajneri, pomoći ćemo da sve to postane bolje, ljepše i praktičnije :)"

Zahvaljujem Yuliji Bondarenko, Maximu Palivodi, Marini Popovichenko i 25 drugih ukrajinskih dizajnera koji su za DOU rekli svoje stajalište na pomoći u pisanju članka. Citati navedeni u članku preuzeti su iz njihovih priča.

Postoji dosta područja vezanih uz dizajn u IT industriji. Najčešći među njima su dizajneri, skriveni iza akronima UX i UI. Pa, neki ljudi čak uspiju uključiti front-end programere kao dizajnere. Pokušajmo shvatiti tko su dizajneri u IT svijetu, koja je razlika između UI i UX-a i kakav odnos front-end inženjeri imaju prema dizajnu.

Dizajneri

Razvoj sučelja aplikacija, web stranica ili igara prilično je složen proces i zahtijeva primjenu znanja iz različitih područja: inženjerstva, psihologije i dizajna. Dizajneri korisničkog sučelja (na engleskom - User Interface ili UI) fokusiraju se na način prikaza funkcionalnosti stranice (pretraživanje, kartice, izbornici) i detalje interakcije između klijenta i sučelja. Cilj UI dizajnera je estetski prihvatljiv dizajn modernog proizvoda. UX je kratica za User Experience, što znači "korisničko iskustvo". UX dizajner više je fokusiran na upotrebljivost i razumijevanje sučelja od strane potencijalnog korisnika. Takav će stručnjak često provoditi istraživanja i ankete koje će činiti osnovu za stvaranje koncepta dizajna, a također će testirati koncepte tijekom i nakon razvoja. Obično se fokusira na strukturu, sadržaj, navigaciju i način na koji korisnik stupa u interakciju s tim elementima.

Izrađuje sitemape, prototipove, koji su osnovna struktura pri izradi softvera. Cilj rada UX dizajnera je da korisnik brzo i bezbolno dobije sa stranice ono po što je došao. Međutim, danas je vrlo uobičajeno vidjeti ove dvije specijalizacije napisane s kosom crtom. Odnosno, zadatke oba smjera obavlja jedan stručnjak. UX/UI dizajner dizajnira interakciju korisnika sa sučeljem, odlučuje što točno treba učiniti i odgovoran je za to kako će to sučelje izgledati kao rezultat.

Što UX/UI dizajner treba znati

Grafički urednik. Najpopularniji alati na tržištu su Adobe Photoshop, Adobe Illustrator, kao i Sketch, Figma. Odaberite uređivač koji vam odgovara i prvo pokušajte nacrtati snimke zaslona web stranice ili aplikacije, malo ih modernizirajući.

Alati za izradu prototipova (Mockplus, Axure). Alat za izradu prototipa je poveznica između ideje i njezine implementacije. Nije važno koji alat koristite. Možete isprobati nekoliko i odlučiti se za onaj koji odgovara vašem stilu i preferencijama.

Psihologija korisnika. Već u fazi dizajna trebali biste razmisliti o tome hoće li vama ili nekom drugom biti prikladno koristiti ovo sučelje. Stavite se u kožu klijenta, izgradite čvrstu vezu s njim i budite pažljivi prema njegovim potrebama. Uostalom, proizvod će biti uspješan ako postoji potražnja za njim.

Trebat će vam i znanje teorija boja. Neke stvari znamo iz djetinjstva, pogotovo oni koji su išli u umjetničku školu. Ipak, postoje određene specifičnosti u radu dizajnera. Osnovna znanja mogu se dobiti iz knjiga ili članaka na internetu.

Preporučljivo je imati ideju o tipografija, sredstvo kombiniranja tekstualnih i vizualnih komponenti.

Sastav i upotrebljivost stranice.

Ovisno o specifičnostima posla, možda će vam trebati razumijevanje HTML-a i CSS-a ili (nekih) programskih jezika (veze na resurse možete pronaći u nastavku, u odjeljku "Što front-end programer treba znati").

Front-end programer

Glavni zadatak front-end developera je razviti klijentski dio sučelja. Odnosno, takav stručnjak "revitalizira" ono što su dizajneri dizajnirali. On je odgovoran za rad i rad sučelja a manje za vizualni sadržaj. Front-end developer često treba pronaći dobro rješenje za korisničko sučelje tijekom njegove razvojne faze, pa često surađuje s UX/UI dizajnerom. Kod koji je napisao front-end programer izvodi se u korisničkom pregledniku (kako kažu, "na strani klijenta"). Također, jedan od najvažnijih zadataka je provjeriti izgleda li stranica ili web aplikacija jednako na svim platformama i preglednicima.

Što front-end programer treba znati

U pravilu, front-end se temelji na tri stupa: HTML jezik za označavanje stranice, CSS stilske tablice i programski jezik JavaScript. Osim toga, front-end developer mora razumjeti principe rada HTTP protokola, poslužitelja i preglednika te značajke prikaza sučelja na različitim uređajima koji su trenutno na tržištu. Alati i metode za izradu web sučelja neprestano se razvijaju i mijenjaju, stoga programer to mora stalno pratiti.

HTML i CSS (izgled)

Ovo je raspored, same cigle od kojih je gradilište izgrađeno. HTML označni jezik diktira organizaciju stranice, sadržaj i sve interakcije između njih. Omogućuje vam da odredite vrh stranice, dno, bočne blokove sa sadržajem, naslovima, prikazom teksta i multimedijskim elementima. CSS listovi stilova koriste se za ukrašavanje HTML elemenata. Oni točno određuju kako će se svaki grafički element koji se nalazi na stranici prikazati. Koristeći najnovije verzije HTML5 i CSS3, možete postaviti video i audio komponente na stranicu, stvoriti 2D slike i animacije, pa čak i pisati jednostavne igre. Nema potrebe pokušavati zapamtiti sve oznake i stilove odjednom. Bit će korisno naučiti osnove i odmah ih provesti u djelo. Jako dobra stranica na kojoj možete naučiti osnove HTML-a i CSS-a - W3School. Ali samo ako imate barem osnovno znanje engleskog jezika. Također, front-end programer mora razumjeti razvoj na više preglednika i platformi, prilagodljiv i responzivan izgled.

Bootstrap

To je okvir za HTML, CSS i JavaScript. Odnosno, određeni predlošci iz kojih, kao iz konstruktora, možete sastaviti stranice mnogo brže nego bez njih. Ali, naravno, morate ga sami prilagoditi svojim potrebama. Ako znate engleski, preporučujemo web stranicu getbootstrap i iste w3schools.

JavaScript

Javascript je srž front-end razvoja. Ovo je prvi i najrašireniji programski jezik sučelja. Može dodati mnogo značajki web mjestu. Na osnovnoj razini, ovaj jezik vam omogućuje dodavanje interaktivnih elemenata na stranicu. Koristi se za izradu karata koje se ažuriraju u stvarnom vremenu, interaktivnih online igara i filmova. Na našim tečajevima JavaRush za starije, učimo malo JavaScripta. Također ga možete proučavati u istoj W3School ili čitati o njemu na ruskom na web stranici javascript.ru.

jQuery

jQuery je Javascript biblioteka koja sadrži dodatke i proširenja koja razvoj mogu učiniti još lakšim i bržim. Umjesto pisanja koda od nule, biblioteke vam omogućuju dodavanje gotovih komponenti koje se zatim mogu prilagoditi za određeni projekt. Možete koristiti funkcije automatskog popunjavanja obrazaca za pretraživanje, preuređivanje i promjenu veličine rešetke i postavljanje mjerača vremena. Praktični jQuery tečaj na w3school

Javascript okviri

Postoje različite vrste okvira, ali možete odabrati onaj koji vam odgovara. Najpoznatiji su Angular, Backbone, Ember i React. Oni predstavljaju gotovu strukturu za kod. Pomažu ubrzati razvoj. A u kombinaciji s knjižnicama, mogu minimizirati razvoj web stranice ili aplikacije od nule. Pregled 5 najpopularnijih JavaScript okvira i biblioteka u 2017

Git sustav kontrole verzija

Sustavi kontrole verzija mogu pratiti promjene u kodu tijekom vremena. Također vam omogućuju povratak na prethodnu verziju projekta. Git je najčešće korišten sustav kontrole verzija. Znati kako raditi s Gitom važna je vještina za svakog programera.

Kratki zaključci

UI je kratica za User Interface, što znači "korisničko sučelje". To je, UI dizajner prvenstveno je odgovoran za način na koji se proizvod prezentira korisniku. On razvija gumbe, ikone, odabire fontove i priprema izgled. UX je kratica za korisničko iskustvo. Tako UX dizajner dizajnira dizajn web stranice, aplikacije - ili bilo čega - tako da je korisniku ugodno i razumljivo što je što, te da sa stranice može dobiti ono što mu treba uz minimalan trud. Vrlo često obje vrste posla obavlja orkestar jednog čovjeka: UI/UX dizajnera. Front-end programer oživljava rad dizajnera, uvodeći u njega dinamiku: gumbi se počinju pritiskati, a slika se počinje mijenjati. Mora poznavati programske jezike, začinjene okvirima, pretprocesorima i bibliotekama.

Dizajn je prilično širok i nejasan pojam. Kad netko kaže: "Ja sam dizajner", nije odmah jasno što radi na svakodnevnoj bazi. Postoji niz različitih industrija koje potpadaju pod ovaj koncept.

Poslovi vezani uz dizajn postoje u raznim područjima, od industrijskog dizajna (automobili, namještaj), tiska (časopisi i druge publikacije) do web dizajna (web stranice, mobilne aplikacije). S nedavnim priljevom visokotehnoloških tvrtki usredotočenih na stvaranje sučelja za zaslone, ima puno novog posla u dizajnu. Pozicija UX ili UI dizajnera može biti neshvatljiva ne samo neupućenima, već i samim dizajnerima koji dolaze iz drugih industrija.

“Ne postoji jedan točan odgovor na ovo pitanje.”

Pokušajmo shvatiti što to zapravo znači u IT industriji.

UX dizajner

UX dizajneri se prvenstveno bave kako proizvod komunicira s korisnikom. Ne postoji jedinstven točan odgovor na ovo pitanje. UX dizajneri istražuju različite pristupe rješavanju određenog korisničkog problema. Glavni posao UX dizajnera je osigurati da proizvod logično teče od jednog koraka do sljedećeg. Jedan od načina na koji UX dizajner može saznati je da osobno provede korisničke testove i donese zaključke na temelju njihovih osjećaja. Prepoznavanjem verbalnih i neverbalnih prepreka, prilagođava se i ponavlja, stvarajući tako "bolje" iskustvo za korisnika. Primjer bi bio stvaranje nevjerojatnog iskustva ukrcavanja za novog korisnika.

“Definirajte modele interakcije, tijek korisničkih zadataka i specifičnosti sučelja. Razviti skripte, end-to-end interakcije, interakcijske modele, razvoj grafičkog korisničkog sučelja. Rad s našim kreativnim direktorom i grafičkim dizajnerom na spajanju vizualne strane Twittera s njegovim funkcionalnim značajkama. Razvijte i održavajte okvire, modele i specifikacije prema potrebi."

Primjer zaslona aplikacije koji je razvio UX dizajner
Izvor: Kitchenware Pro Kit Wireframe autora Newaya Laua na Dribbbleu.

Zadatak: Zaslonski okviri, scenariji, plan lokacije

Alati: Photoshop, Sketch, Illustrator, Fireworks, InVision

Vjerojatno ste ga čuli kako kaže: " Korisnik bi trebao vidjeti stranicu "Hvala" nakon dovršetka registracije.

UI dizajner

Za razliku od UX dizajnera, koji su zabrinuti za cjelokupno iskustvo proizvoda, UI dizajneri su zabrinuti za kako proizvod izgleda. Oni su odgovorni za dizajn svakog zaslona ili stranice s kojom korisnik komunicira i pružaju vizualni dio korisničkog sučelja koji je dizajnirao UX dizajner. Na primjer, dizajner korisničkog sučelja, prilikom izrade analitičke nadzorne ploče, može istaknuti važnije informacije ili odlučiti je li klizač ili upravljačka ploča najintuitivnije dodati grafikonu. Dizajner korisničkog sučelja također je obično odgovoran za izradu cjelovitog vodiča za dizajn, koji osigurava kohezivni jezik dizajna koji obuhvaća cijeli proizvod. Održavanje dosljednosti u vizualnim elementima i određivanje u kojem smjeru raditi. Na primjer, kako prikazati pogreške ili upozorenja unutar je djelokruga dizajnera korisničkog sučelja.

“Koncept i implementacija vizualnog jezika Airbnb.com. Izrada proširenog stilskog vodiča."

Granice između UI i UX dizajnera prilično su nejasne, a vrlo često tvrtke odlučuju kombinirati te uloge.

Dizajner korisničkog sučelja određuje cjelokupni dojam i izgled aplikacije.
Izvor: Metro Style Interface 4 autora Ionuta Zamfira na Dribbbleu.

Alati: Photoshop, Sketch, Illustrator, Fireworks

"Polja 'prijava' i 'registracija' treba premjestiti u gornji desni kut."

Grafički dizajner

"Grafički dizajneri proučavaju male detalje na koje drugi ne obraćaju pozornost."

Grafički dizajner je netko tko se bavi grafikom, što bi vam vjerojatno rekao nedizajner da ga pitate što dizajner radi. Grafički dizajneri ne mare za to kako se zasloni međusobno odnose, niti kako netko komunicira s proizvodom. Umjesto toga, njihov je fokus na dizajniranju prekrasnih ikona, kontrola i vizualnih elemenata te stvaranju dizajna koji pristaje. Grafički dizajneri rade na sitnim detaljima koje drugi ne vide, a često rade u Photoshopu na 4x i 8x zumiranju.

„Proizvedite visokokvalitetne vizualne projekte od koncepta do izvedbe, uključujući desktop, web i mobilne uređaje u više razlučivosti (ikone, grafika i marketinški materijali). Stvaranje i ponavljanje sredstava koja odražavaju marku, čine proizvod lijepim i udahnjuju mu život.”

Dizajneri korisničkog sučelja također često moraju raditi ne samo svoj posao, već i stvarati izgled savršen za piksel. Neke tvrtke odluče da nemaju posvećenu osobu u ulozi grafičkog dizajnera.

Grafički dizajner dizajnira, usmjerava i prilagođava svaki piksel kako bi osigurao savršen krajnji rezultat.
Izvor: IOS 7 Guide Freebie PSD od Seevija kargwala na Dribbbleu.

Alati: Photoshop, Skica

Vjerojatno ste ga čuli kako kaže:"Smanjite kerning i pomaknite gumb 1 piksel ulijevo!"

Dizajner pokreta

Sjećate li se suptilnog pokreta kada povlačite ekran da biste osvježili e-poštu na svom iPhoneu? Ovo je posao dizajnera pokreta. Za razliku od grafičkih dizajnera, koji obično rade sa statičnim objektima, dizajneri pokreta stvaraju animacije unutar aplikacije. Oni se bave što sučelje radi nakon što ga korisnik dodirne. Na primjer, oni odlučuju kako će izbornik kliziti, koje efekte koristiti za prijelaze i kako će se gumb pritisnuti. Kada se dobro izvede, kretanje postaje sastavni dio sučelja, pružajući vizualne naznake o tome kako koristiti proizvod.

„Potrebno je poznavanje grafičkog dizajna, dizajna pokreta, digitalne umjetnosti, osjećaj za boju i tipografiju, opća svijest o materijalima/teksturama i radno razumijevanje animacije. Poznavanje firmvera za iOS, OS X, Photoshop i Illustrator, kao i poznavanje programa Director (ili ekvivalent), Quartz Composer (ili ekvivalent), 3D računalno modeliranje, pokretna grafika.”

Alati: AfterEffects, Core Composer, Flash, Origami

Vjerojatno ste ga čuli kako kaže:"Izbornik bi trebao iskočiti s lijeve strane nakon 800 ms."

UX istraživač

UX istraživač zna sve o potrebama korisnika.

UX istraživač zna sve o potrebama korisnika. Cilj istraživača je odgovoriti na dva glavna pitanja: “Tko su naši korisnici?” i "Što naši korisnici žele?" U pravilu to uključuje anketiranje korisnika, istraživanje tržišta i analizu podataka. Dizajn je proces stalnog ponavljanja. Istraživači mogu pomoći u ovom procesu provođenjem A/B testova kako bi otkrili koja opcija dizajna najbolje zadovoljava potrebe korisnika. Istraživači UX-a obično su oslonac velikih tvrtki, gdje im pristup velikim količinama podataka daje dovoljno mogućnosti za izvlačenje statistički značajnih zaključaka.

“Blisko surađujte s razvojnim timovima kako biste identificirali teme istraživanja. Dizajn istraživanja povezan s radnjama i percepcijama korisnika. Provođenje istraživanja korištenjem i primjenom različitih metoda kao što su ankete.”

Dizajn je prilično širok i nejasan pojam. Kada netko govori? "Ja sam dizajner", nije odmah jasno što zapravo radi svaki dan. Postoji nekoliko različitih područja koja spadaju pod kišobran dizajna.

Profesije vezane uz dizajn postoje u različitim područjima – od industrijskog dizajna (dizajn automobila i namještaja itd.), dizajna tiska (časopisi i druge tiskane publikacije) do web dizajna (web stranice, mobilne aplikacije).

Međutim, nedavno su se pojavila mnoga nova dizajnerska zanimanja usmjerena na razvoj sučelja za različite vrste zaslona. Poslovi pod nazivom UX ili UI dizajneri neshvatljivi su neupućenima, a često i samim dizajnerima iz drugih područja.

Pokušajmo razumjeti što svaki od ovih pojmova znači.

UX dizajner (dizajner KORISNIČKOG ISKUSTVA)

UX dizajner prvenstveno je fokusiran na to kako se proizvod "osjeća" i kako ga korisnik percipira. Zadatak koji je dan dizajneru nema jedan točan odgovor. UX dizajneri isprobavaju različite pristupe rješavanju određenog korisničkog problema. Široki popis odgovornosti UX dizajnera uključuje brigu o tome da proizvod dosljedno pomiče kupca iz jedne faze u drugu. Jedan od načina da se to postigne je provođenje izravnih testova sa stvarnim korisnikom kako bi se moglo promatrati njihovo ponašanje. Prepoznavanjem verbalnih i neverbalnih prepreka, UX dizajneri poboljšavaju proizvod i dosljedno stvaraju najbolju opciju za interakciju korisnika s proizvodom. Testna verzija je neophodna kako bi se osigurala najprikladnija upotreba proizvoda.

Primjer opisa posla dizajnera iskustva na Twitteru:

“Definirajte modele interakcije, tijekove korisničkih zadataka i specifikacije korisničkog sučelja. Predstavite različite scenarije razvoja događaja, opišite proces korištenja i modele interakcije od početka do kraja te demonstrirajte uzorke zainteresiranima. Surađujte s našim kreativnim direktorom i vizualnim dizajnerima kako biste ujedinili Twitterov vizualni identitet i značajke potpisa. Razvijte ili održavajte dizajne, modele i standarde prema potrebi."

Rezultati rada: rasporedi slika na ekranima, scenariji, plan lokacije.

Alati: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI dizajner (dizajner KORISNIČKOG SUČELJA)

Za razliku od UX dizajnera, koji su odgovorni za cjelokupno iskustvo proizvoda, posao UI dizajnera vrti se oko toga kako je proizvod dizajniran. Ovi stručnjaci odgovorni su za dizajn svake stranice ili zaslona s kojima korisnik komunicira i moraju osigurati da korisničko sučelje vizualno odgovara putanji koju je postavio UX dizajner. Na primjer, dizajner korisničkog sučelja koji stvara analitičku nadzornu ploču može predstaviti najvažniji sadržaj na vrhu stranice ili odlučiti da je klizač ili kontrolni gumb prikladniji za korisničku percepciju prilagođavanja grafikona.

Obično je dizajner korisničkog sučelja također odgovoran za stvaranje dosljednog stila i mora osigurati da se odgovarajući jezik dizajna primjenjuje u cijelom proizvodu.

Održavanje dosljednosti u svim vizualnim elementima i definiranje ponašanja (kao što je način prikazivanja pogrešaka ili upozorenja) spada u djelokrug dizajnera korisničkog sučelja.

Granica između ove dvije profesije prilično je nejasna, a često tvrtke zapošljavaju jednu osobu na ta dva mjesta.

Alati: Photoshop, Sketch, Illustrator, Fireworks

Vizualni dizajner (grafički dizajner)

Vizualni dizajner je netko tko radi grafiku. Ako nekoga tko ne dizajnira pitate što je dizajner, vjerojatno vam prva osoba koja padne na pamet je grafički dizajner. Grafički dizajneri nemaju nikakve veze s načinom na koji ekrani međusobno komuniciraju ili kako netko komunicira s proizvodom. Umjesto toga, fokusiraju se na stvaranje prekrasnih ikona, kontrola i drugih vizualnih elemenata te odabir odgovarajućih fontova. Grafički dizajneri rade na sitnim detaljima na koje drugi ne obraćaju pozornost, a često rade u Photoshopu na 4X ili 8X.

Također je prilično uobičajeno da dizajneri korisničkog sučelja obavljaju dvostruku dužnost i stvaraju konačnu verziju elemenata slike. Neke tvrtke odluče ne angažirati zasebnog grafičkog dizajnera.

Alati: Photoshop, Sketch

Interaktivni dizajner (dizajner pokreta)

Sjećate se one gotovo neprimjetne animacije poskakivanja kada osvježite svoju e-poštu na svom iPhoneu? Ovo je posao dizajnera pokreta. Za razliku od grafičkih dizajnera koji rade sa statičnim elementima, dizajneri pokreta stvaraju animacije unutar aplikacija. Oni se bave onim što sučelje radi nakon što ga korisnik dodirne. Na primjer, oni odlučuju kako će se izbornik proširiti, koje efekte prijelaza treba koristiti i kako bi određeni gumb trebao reagirati. Dobro izveden dizajn pokreta postaje sastavni dio sučelja, nudeći vizualne upute o tome kako koristiti proizvod.

Opis posla dizajnera pokreta u Appleu:

“Visoko kvalificirani za grafički dizajn, pokretnu grafiku, poznavanje digitalne umjetnosti, dobra percepcija fontova i boja, opća pozornost na materijale i teksture, kao i praktično razumijevanje animacije. Poznavanje iOS-a, OS X, Photoshopa i Illustrator-a, također poznavanje Directora (ili ekvivalenta), Quartz Composer-a (ili ekvivalenta), 3D modeliranja, pokretne grafike"

Alati: AfterEffects, Core Composer, Flash, Origami

UX istraživač (istraživač korisnika)

Cilj UX istraživača je odgovoriti na dva pitanja: "Tko je naš kupac?" i "Što naš potrošač želi?" Obično, odgovornosti istraživača uključuju provođenje intervjua s korisnicima, istraživanje marketinških podataka i općenito prikupljanje analitičkih podataka. Dizajn je proces stalnog poboljšanja. Istraživač može pomoći u ovom procesu provođenjem A/B testiranja kako bi se utvrdilo koje dizajnersko rješenje najbolje zadovoljava potrebe potrošača. UX istraživač obično je oslonac u velikim tvrtkama, gdje mu pristup ogromnoj količini informacija daje dovoljno snage da dođe do smislenih zaključaka.

Opis posla Facebook UX istraživača:

“Blisko surađujte s timovima proizvoda kako biste identificirali teme istraživanja. Provedite istraživanje koje se istovremeno bavi i ponašanjem i mišljenjima potrošača. Provedite istraživanje koristeći širok raspon kvalitativnih i kvantitativnih metoda, kao što su ankete.”

UX dizajneri povremeno rade kao UX istraživači.

Rezultati rada: profil korisnika, rezultati A/B testiranja, istraživanje/intervjui o ponašanju korisnika.

Alati: mikrofon, papiri, dokumenti

Front-end developer (UI developer)

Vanjski programeri odgovorni su za funkcionalnu implementaciju sučelja proizvoda. Tipično, dizajner korisničkog sučelja prosljeđuje statički model vanjskom programeru, koji ga zatim transformira u funkcionalan, interaktivan proizvod. Vanjski programeri također su odgovorni za kodiranje i izgled interaktivne grafike koju je izradio dizajner pokreta.

Alati: CSS, HTML, JavaScript

Dizajner proizvoda

Produkt dizajner je sveobuhvatni pojam za opisivanje dizajnera koji je općenito uključen u proces stvaranja imidža i percepcije proizvoda.

Uloga dizajnera proizvoda nije dobro definirana i razlikuje se od tvrtke do tvrtke. Dizajner proizvoda može raditi minimalno kodiranje, provoditi istraživanje korisnika, stvarati sučelja ili stvarati vizualne elemente. Od početka do kraja, dizajner proizvoda pomaže identificirati početni problem, uspostaviti neke kriterije za njegovo rješavanje, a zatim stvoriti, testirati i poboljšati različita rješenja. Neke tvrtke koje žele raditi u „fluidnijoj“ suradnji navode upravo ovo radno mjesto prilikom traženja kandidata, kako bi se u konačnici stvorio tim multidisciplinarnih dizajnera koji bi radili na korisničkoj percepciji proizvoda, proveli istraživanje korisnika i kreirali vizualne elemente.

Neke tvrtke koriste "UX dizajner" ili jednostavno "dizajner" kao sveobuhvatni izraz. Čitanje opisa posla najbolji je način da shvatite koja će biti vaša stručnost.

Opis posla dizajnera proizvoda za Pinterest

“Poznavanje svih područja dizajna: interakcija, vizualni dio, rad s proizvodom, layout. Stvaranje predložaka za elemente slike i njihov izgled.”

Tražim dizajnera

Najčešća rečenica koju čujem od mladih startupa. Obično traže nekoga tko može učiniti sve gore navedeno. Traže nekoga tko može kreirati prekrasne ikone, izraditi odredišne ​​stranice, pokrenuti A/B testove, logično postaviti elemente korisničkog sučelja na zaslon i može čak obavljati neke od dužnosti front-end programera. Zbog općenitosti ove pozicije često čujemo da tvrtka želi zaposliti samo “dizajnera” ne ulazeći u detalje i specifičnosti ove profesije.

Granice između svakog od ovih dizajnerskih trendova vrlo su nejasne. Očekuje se da će neki UX dizajneri raditi i na interakciji s potrošačem, a neki UI dizajneri također će raditi na grafici. Najbolji način da pronađete dizajnera je da detaljno opišete što od njega očekujete u sklopu rada u vašoj tvrtki i odaberete naziv radnog mjesta koji najjasnije odražava odgovornosti dizajnera.

Na pitanje koja je razlika između UX dizajnera i UI dizajnera, ljudi vole odgovoriti niječno. Znate, takav književni uređaj. Kao "UX nije o sučelju, nije o grafičkom dizajnu, nije upotrebljivost, nije analitika, nije prototip." Danas ćemo ukratko prikazati razliku, ispričati povijest pojavljivanja termina i objasniti zašto se ta dva koncepta i nakon toliko godina tako rado spajaju u jedan - UX/UI.

Ukratko o razlici

UI dizajner (korisničko sučelje) je dizajner sučelja u idealnom okruženju koji crta gumbe, ikone, forme, odabire fontove i od svega čini skladan i lijep layout. Web stranica, aplikacija, bilo što s čime će korisnik komunicirati - čak i zaslon terminala postaje. I ne razmišlja ni o čemu drugom.

UX dizajner (korisničko iskustvo) nije dizajner, nego dizajner (samo što u engleskom jeziku riječ dizajner ima samo drugo značenje). Proučava potrebe korisnika, gradi logičke dijagrame sučelja, testira prototipove na stvarnim ljudima i piše tehničke specifikacije za dizajn. Drugim riječima, to je takav marketinški inženjer: ulaz je analitika, izlaz su principi kreiranja sučelja, logika rada, izgled, sadržaj. Ne tiče se crteža kao takvog.

To je sve.

Zašto je moralo biti komplicirano?

Kao i prije: dizajner je dobio zadatak "nacrtati web stranicu". Sve su stranice bile više-manje iste: početna, o tvrtki, katalog, pa dolje na listi. Dizajner je upitao: "Kada će nam dati sadržaj?" Nikad, druže dušo, ovo je vojska.

A dizajner se jednostavno zvao "dizajner". Bez inozemnih prefiksa.

Što se kasnije dogodilo: agencije su htjele dobiti više novca, a svijet je postupno počeo prelaziti sa “samo web stranica” na složene web usluge. A usluga nije samo jedinstveno sučelje, već i poseban poslovni proces iza nje. Na primjer, sjetite se web stranice Airbnb - bez dubljeg proučavanja teme niti jedan grafički dizajner ne bi mogao odmah stvoriti sučelje.

Kako je bilo više posla, ukazala se potreba da se jedna struka podijeli na više. Sada je UX specijalist (nazovimo ga tako da ne bude zabune) istražio i dizajnirao informacijsku arhitekturu, prototip je odradio funkcionalni dio, a grafički (UI) dizajner je napravio finalni proizvod: moderan i oku ugodan.

Ista stvar se već dogodila u industriji. Na primjer, "programeri" su jednostavno podijeljeni na "frontend" i "backend". I frontendere u prave frontendere i "samo dizajnere izgleda". Usput, .

Razlog je uvijek isti: jedna osoba nije dovoljna za veliki proces. Idemo dalje.

Tko je UX/UI dizajner

Što je smiješno: natječaji za posao često uključuju pozicije UX/UI dizajnera, samo tako, s kosom crtom. Čak i Tinkoff traži takvog stručnjaka za kombinacije:

S druge strane barikada, dizajneri su se svi počeli nazivati ​​UX/UI. Jer biti samo dizajner je uf, nemoderno.

Tko je UX/UI u idealnom svijetu? Superman koji odradi cijeli ciklus UX rada, a onda još uspije sve nacrtati uz nekoliko iteracija editiranja (napraviti UI).

Što je zapravo UX/UI? Samo dobar dizajner. Za one koji smatraju da im je dužnost ne samo “izrađivati ​​makete”, nego svakom projektu pristupiti pojedinačno, počevši od analize, pitanja, pojašnjenja, skica, dijagrama itd. Ovo nije potpuni UX pregled, ali je u pravilu dovoljan za podršku već gotove usluge ili razvoj „samo web stranice“.

Dakle, ako vidite nevjerojatnog UX/UI mutanta, znajte ovo:

• Riječ je o dizajneru koji projektu pristupa glavom, a ne samo kliktanjem miša i kljunom.
• Ovo je tip koji je pročitao puno pametnih riječi i sada sebe naziva UX/UI.

To se može jednostavno provjeriti: zamolite dizajnera da vam kaže zašto je odabrao baš ovaj raspored elemenata, ovaj redoslijed ekrana itd. Dobar dizajner ne donosi samo jednu odluku o sučelju - sve ima logično opravdanje.

Usput

Ovaj je članak drugi u nizu o tome kako se jedan web stručnjak razlikuje od drugoga. Što nas je potaknulo na ideju da s weba napravimo imenik svih zanimanja s različitim varijacijama njihovih naziva. Da bi klijentu (i svima nama, što se toga tiče) život bio jasniji.