Profesionalni vodič za dizajn korisničkog sučelja

Sadržaj

• Što radi dizajner korisničkog sučelja?
• Web protiv izvornih aplikacija
• Poboljšavanje vašeg skupa vještina

Kad sam započeo karijeru, bio sam web dizajner. Četiri godine radio sam u web dizajnu, počevši od web mjesta malih tvrtki i na kraju prešavši na veće klijente. Otkrila sam da me nije zanimao grafički dizajn, niti da radim za veća imena. Više su me zanimali paginacijski obrasci, način na koji su ljudi komunicirali s oblicima i stvari poput percipirane izvedbe, nego vizualni dizajn web stranice.

Kad bih gledao znanstveno-fantastične filmove, gledao bih sučelja. A kad bih igrao videoigre, promatrao bih način postavljanja jelovnika. Ako vam bilo koja od ovih osobina zvuči poznato, u srcu ste možda i dizajner korisničkog sučelja.

Napustio sam posao u agenciji i otvorio vlastitu tvrtku. Na svojoj LinkedIn stranici pokušao sam sažeti svoj novi cilj u karijeri: napraviti najbolji mogući softver. Prošle su četiri godine otkako sam počeo raditi kao slobodnjak, a moje putovanje nije stalo. Ovih dana pomažem u vođenju male tvrtke za dizajn korisničkog sučelja Mono. Nedavno smo dočekali našeg četvrtog člana tima.

U ovom članku želim opisati kako je biti dizajner korisničkog sučelja, uključujući što točno posao podrazumijeva, gdje pronaći najbolje resurse za učenje i kako poboljšati svoj zanat.

Što radi dizajner korisničkog sučelja?

Smatram da općenito rad dizajnera korisničkog sučelja možete podijeliti u četiri kategorije. Komunicirate s klijentom, istražujete, dizajnirate i izrađujete prototip te komunicirate s programerima. Pogledajmo detaljnije svaku od ovih faza.

Komunikacija s klijentima

Komunikacija s klijentom sastoji se od razumijevanja klijentovog problema. Cilj je shvatiti poslovanje vašeg klijenta, tako da početak projekta obično čini puno razgovora. U redu je ne znati previše o domeni svog klijenta kad započnete - možete pogledati njihovo poslovanje na svjež način dok predviđate moguća rješenja za dizajn.

Da biste bili dobar dizajner korisničkog sučelja, morate na kraju moći razmišljati zajedno s poslovanjem vašeg klijenta. Na primjer, vaš klijent može biti u zrakoplovstvu. Ako radite za njih, na kraju ćete postati prilično upućeni u tu industriju. Dakle, savjet za vlastitu sreću ovdje je pametno biranje djelatnosti u kojima radite, kako ne biste na kraju postali stručnjak za nešto do čega vam nije stalo ili vas ne zanima.

Tijekom projekta, komunikacija ne prestaje. Kao dizajner, neprestano ćete predstavljati svoj rad. U našoj smo kompaniji udaljeni tim, pa nemamo puno osobnih sastanaka. Umjesto toga, mi često koristimo dijeljenje zaslona putem video konferencija. Komunikacijski alati poput Skypea i Slacka koriste se svakodnevno.

Korisno je kombinirati sinkrone i asinkrone metode komunikacije. Poziv je sjajan ako vam treba puno informacija brzo, ali morate biti u isto vrijeme. Slack smatramo našim 'virtualnim hladnjakom vode' i koristimo Basecamp za upravljanje složenim dizajnerskim projektima. Kada dizajniramo prototipove pomoću HTML-a i CSS-a, koristimo GitHub Issues za izravnu raspravu o kodu.

Istraživanje

Osim komunikacije s klijentima, provest ćete i puno istraživanja. To može uključivati ​​terenske studije, radionice s klijentom, analizu konkurencije ili definiranje strategije - u osnovi, gotovo sve što vam pomaže razumjeti problem koji je u pitanju.

Istraživanje je ono što informira vaše odabire dizajna. To je članak koji ste jednom pročitali ili ona nova stvar koju je Apple upravo objavio. Kada je vrijeme da objasnite zašto ste odabrali određeni dizajn, vaše vas istraživanje podupire.

Istraživanja mogu biti vrlo široka. Često testiram nove uređaje u istraživačke svrhe ili se prijavim na novu web-aplikaciju kako bih proučio njezino korisničko sučelje.

Dizajn i izrada prototipa

Kao dizajner, vjerojatno ćete provesti većinu svog vremena radeći posao dizajniranja i izrade prototipa. Dizajn korisničkog sučelja može se kretati na bilo koji način, od skiciranja, detaljnog dizajna do kodiranja.

Metoda koju koristite uvelike ovisi o vrsti projekta. Što dizajnirate? Je li to web stranica ili biste je radije nazvali aplikacijom? Koristi li domaću tehnologiju? Je li to redizajn ili krećete od nule?

U našoj tvrtki nema fiksnog postupka, ali većina projekata slijedi isti grubi redoslijed: započinju skicama i žičanim okvirima, nastavljaju s detaljnim vizualnim i interakcijskim dizajnom, a završavaju prototipom.

Kao dizajneri provodimo puno vremena razmišljajući o našim alatima. Iako su izvrsni alati važni, oni nisu najvažnija stvar. Mogućnost kompetentne upotrebe Adobe Creative Suitea i aplikacija kao što je Sketch jednako je mogućnosti korištenja olovke za crtanje ili četke za bojanje. Još trebate napraviti sliku.

To je rečeno, zdrav interes za alate je dobra stvar. Volim isprobavati nove alate koji mi mogu pomoći da budem produktivniji. Moj omiljeni alat za uređivanje vektora je Illustrator, ali većina mog vizualnog dizajnerskog posla danas se radi u programu Sketch. Ostali članovi tima prešli su na novije alate poput Affinity Designer.

Alati su vrlo osoban izbor. Sve dok možemo lako surađivati, svatko je slobodan odabrati svoj. Da bismo s klijentima pojednostavili razgovor o našem dizajnu, izrađujemo prototipove s InVisionom. Međutim, za naprednije izrade prototipova koristimo HTML i CSS. Alat koji vam treba sve ovisi o poslu koji želite s njim obaviti.

Komunikacija programera

Često zaboravljeni dio rada dizajnera korisničkog sučelja je komunikacija programera. Ovih dana ne možete se izvući samo tako da svoje dizajne pošaljete razvojnim programerima i nadate se da će se pravilno implementirati. Najbolji dizajneri znaju kako izazov nije u stvaranju dizajna, već u njegovom priopćavanju - ne samo dionicima koji moraju dati svoje odobrenje, već i programerima koji ga moraju implementirati.

Komuniciranje dizajna postoji u mnogim oblicima: detaljne specifikacije, pružanje imovine, zajednički pregled dizajna. Ono što ima smisla isporučiti u svakom primjeru u velikoj mjeri ovisi o tome je li projekt nativni ili web aplikacija.

Tradicionalni pristup je isporučivanje sredstava pored dizajna zaslona. Dizajn zaslona može se koristiti da bi se vidjelo kako će dizajn izgledati u cjelini, dok su sredstva gotovi za upotrebu PNG i SVG-ovi ikona, tako da programeri ne moraju imati posla s grafičkim uređivačem.

U našoj tvrtki zagovornici smo isporuke više od toga. Koristimo vodiče za stil komponenata kako bismo pomogli u održavanju dosljednosti u našem dizajnu. Kada imamo posla s web projektom, isporučujemo detaljne skupove HTML-a i CSS-a, dokumentirane dio po dio, spremne za implementaciju. Vjerujem da je jedinstveni pogled na dizajn u svakoj fazi razvoja softvera jedini način da postignem svoj cilj stvaranje softvera svjetske klase.

Web protiv izvornih aplikacija

Kada dizajnirate izvornu aplikaciju za platformu (npr. IOS ili Android), obično se pridržavate određenih smjernica. Kada dizajnirate za web, nema toliko smjernica. Ono što se obično događa je da vaš klijent ima niz grafičkih smjernica za svoju marku koje određuju kako stvari trebaju izgledati.

Međutim, ove su smjernice obično prilagođene marketinškim web mjestima, a ono što je tamo ne dovodi uvijek do dobrih odluka o korisničkom sučelju. Fontovi se obično biraju iz marketinških razloga, a ne iz čitljivosti. Boje mogu biti podebljane i upečatljive, što djeluje u oglasnoj kampanji, ali ne i u aplikaciji koju svakodnevno upotrebljavate. Ovi vodiči moraju se protumačiti.

Postoji nekoliko smjernica za korisničko sučelje za web. Mogli biste tvrditi da je internet talište različitih stilova. Ako izrađujete bilo što što više sliči na aplikaciju nego na web stranicu, morate znati o široko korištenim okvirima poput Bootstrapa i ZURB Foundation. Okvir počinje određivati ​​kako bi stvari trebale izgledati, jer ne želite iznova otkrivati ​​kotač. I to je vjerojatno dobra stvar.

U našoj tvrtki volimo koristiti Bootstrap. Pruža razumne zadane veličine za uobičajene elemente korisničkog sučelja poput gumba, tablica podataka i modaliteta.

U web dizajnu ograničavaju vas tehnički kapaciteti weba. Nekad je bilo teško na web mjestu implementirati jednostavne vizualne procvate poput zaobljenih kutova. Ovi su dani prošli - sada možete slobodno crtati korisničko sučelje s puno sjena, prijelaza, animacija, pa čak i 3D-a.

Kao dizajner, puno je realnije preuzeti kontrolu nad postupkom i dizajnom u pregledniku. Nisam vidio da su mnogi dizajneri korisničkog sučelja preuzeli programiranje korisničkog sučelja nativne aplikacije, ali dizajner koji radi HTML i CSS web aplikacije je česta pojava. Ako možete kodirati vlastite dizajne, imat ćete prednost nad svojim nekodirajućim vršnjacima, a po meni je to jedini način da istinski razumijem kako web funkcionira.

Web ograničenja

Uskoro ćete otkriti da nisu svi cool trikovi koje naučite podržani u svakom pregledniku, a to je stvarnost dizajniranja za web. Dobro je slijediti dobro poznata načela poput progresivnog poboljšanja, gdje učitavate poboljšani sadržaj kad god je to moguće, ali razmislite i o tome kako se sadržaj razgrađuje.

Nedavno je popularno 'rezanje senfa'. Pod pokroviteljstvom BBC-ovog web tima, to uključuje razlikovanje između „dobrih“ i „loših“ preglednika i pružanje ograničenog iskustva „lošim“ preglednicima. Međutim, stvarno radi samo za sadržajne web lokacije.

Što se tiče iskustava sličnih aplikacijama, mnogi ljudi ograničavaju podršku samo na nekoliko vodećih preglednika kako bi olakšali razvoj. Nažalost, ovo nas vraća u situaciju iz 1996. godine kada vam je potreban određeni preglednik za pregled sadržaja.

Poboljšavanje vašeg skupa vještina

Pa, kako biti u toku s brzom web industrijom i poboljšati svoj skup vještina? Pogledajmo nekoliko različitih metoda za poboljšanje vaših vještina ...

Znanje o platformi

Glavni dio arsenala dizajnera je znanje o platformi. Trebali biste znati o raznim operativnim sustavima i o tome kako ih ljudi koriste. Kao dizajneri obično koristimo Macove, ali tada je lako zaboraviti da većina ljudi vani koristi Windows kutije kako bi obavili svoj posao.

Osjećam da nešto istinski možete razumjeti samo ako to sami koristite. Više volim koristiti svoj Mac za dizajn, ali provodim puno vremena nadoknađujući razvoj raznih drugih platformi. Na svom Macu instalirao sam nekoliko primjeraka sustava Windows kao virtualne strojeve. Bio sam zauzet testiranjem novih verzija sustava Windows 10 pomoću Microsoftovog programa Insider kako bih provjerio razne promjene u korisničkom sučelju.

Također redovito kupujem novi hardver kako bih testirao kako funkcionira. Kupio sam Apple Watch samo da bih testirao platformu. Tada sam ga prodao jer sam osjećao da to ne dodaje toliko mom životu.

Uz to, web se može promatrati kao vlastiti operativni sustav. Stalno se razvija, a nove značajke dodaju se svakom dobavljaču preglednika svaki tjedan. Izuzetno je vrijedno znati o tehničkim aspektima preglednika, posebno u pogledu CSS-a i grafičkih sposobnosti. Morate znati što su SVG i WebGL i kako možete koristiti API za web animacije.

Svaka se platforma razvija s vremenom i kao dizajner korisničkog sučelja vaš je zadatak biti u toku. Napokon, sve što dizajnirate ne živi izolirano, već je dio većeg softverskog ekosustava.

Vratite se osnovama

Ono s čime se danas borimo nije toliko različito od onoga s čime smo se borili prije 20 godina. U knjigama postoji hrpa dobrih savjeta. Za početak isprobajte obrambeni dizajn za web Jasona Frieda i Matthewa Lindermana te Don’t Make Me Think Stevea Kruga.

Ako ne znate pojmove poput modaliteta i priuštenosti, trebate pročitati. Trebali biste znati objasniti što je Fittsov zakon. Gestalt zakon blizine? Ovo je kruh i maslac dizajna korisničkog sučelja.

Inspirirajte se igrama i filmovima

Kao dizajner korisničkog sučelja, koristim druge izvore nadahnuća za svoj posao. Puno inspiracije nalazim u igrama. Neke su igre vrlo složene, a dizajneri korisničkog sučelja morali su riješiti iste složene probleme sučelja kao i dizajneri korisničkog sučelja koji rade na poslovnim projektima.

Igre također mogu označavati trendove. Minimalizam pronađen na izbornicima Colin McRae Rally podsjeća me na smjer iOS7. Na neki način, UI animacijski dizajn koji je sada u trendu pojavljivao se u igrama godinama i godinama. Prelazak sa skeuomorfizma na gola, funkcionalna sučelja i 'ravni dizajn' očit je i u igrama. Usporedite 2006. Oblivion sa Skyrimom iz 2011. godine. Obje su igre RPG-ovi u istoj seriji, ali razlika je upečatljiva.

Futuristička sučelja u Marvelovim filmovima poput Iron Mana također su mi bila inspiracija. Nisu baš korisni primjeri, ali natjeraju me da više razmišljam o računanju u cjelini. Želimo li budućnost ekrana ili želimo da ekrani nestanu? Ovo je vjerojatno dobro pitanje za postavljanje u pubu punom dizajnera.

Kao dizajner rastete trudom, upornošću, razgovorom s vršnjacima i užasno čitajući. Prije otprilike godinu dana u New York Timesu pročitao sam članak o ljudima koji su prešli 80-te i koji nastavljaju usavršavati svoj zanat. Osjećam da tek počinjem. A ti?