Profesionalni vodnik za oblikovanje uporabniškega vmesnika

Vsebina

• Kaj naredi oblikovalec uporabniškega vmesnika?
• Splet v primerjavi z domačimi aplikacijami
• Izboljšanje vašega nabora spretnosti

Ko sem začel svojo kariero, sem bil spletni oblikovalec. Štiri leta sem delal na področju spletnega oblikovanja, začenši z majhnimi podjetji in sčasoma prešel na večje stranke. Ugotovil sem, da me ne zanima grafično oblikovanje, niti ne delam za večje blagovne znamke. Bolj kot vizualno oblikovanje spletne strani so me zanimali vzorci paginacije, način interakcije ljudi z obrazci in stvari, kot je zaznana uspešnost.

Ko sem gledal znanstvenofantastične filme, bi pogledal vmesnike. In ko sem igral videoigre, sem opazoval način postavitve menijev. Če se vam katera od teh lastnosti zdi dobro znana, ste po duši morda tudi oblikovalec uporabniškega vmesnika.

Zapustil sem agencijsko službo in ustanovil svoje podjetje. Na svoji strani LinkedIn sem poskušal povzeti svoj novi karierni cilj: narediti najboljšo možno programsko opremo. Minila so štiri leta, odkar sem začel kot svobodnjak, in moja pot se ni ustavila. Danes pomagam voditi majhno podjetje za oblikovanje uporabniškega vmesnika, imenovano Mono. Pred kratkim smo pozdravili našega četrtega člana ekipe.

V tem članku želim opisati, kako je biti oblikovalec uporabniškega vmesnika, vključno s tem, kaj točno delovno mesto vključuje, kje najti najboljše učne vire in kako postati boljši v svoji obrti.

Kaj naredi oblikovalec uporabniškega vmesnika?

Menim, da lahko delo oblikovalca uporabniškega vmesnika na splošno razdelite v štiri kategorije. Komunicirate s stranko, raziskujete, oblikujete in oblikujete prototip ter komunicirate z razvijalci. Oglejmo si podrobneje vsako od teh faz.

Komunikacija s strankami

Komunikacija s strankami je namenjena razumevanju naročnikovega problema. Cilj je spoznati poslovanje vaše stranke, zato je začetek projekta običajno veliko pogovora. Lepo je, če ob začetku ne veste preveč o domeni vaše stranke - na njeno poslovanje lahko pogledate na nov način, medtem ko si omislite možne oblikovalske rešitve.

Če želite biti dober oblikovalec uporabniškega vmesnika, morate biti sposobni sčasoma razmišljati skupaj s poslovanjem vaše stranke. Na primer, vaša stranka je morda v letalstvu. Če boste delali zanje, boste sčasoma postali precej dobro seznanjeni s to panogo. Namig za lastno srečo tukaj je, da pametno izbirate panoge, v katerih delate, tako da na koncu ne boste strokovnjak za nekaj, kar vas ne zanima ali vas ne zanima.

Med projektom se komunikacija ne ustavi. Kot oblikovalec boste stalno predstavljali svoje delo. V našem podjetju smo oddaljena ekipa, zato nimamo veliko osebnih sestankov. Namesto tega pogosto uporabljamo skupno rabo zaslona prek videokonference. Vsak dan se uporabljajo komunikacijska orodja, kot sta Skype in Slack.

Koristno je kombinirati sinhrone in asinhrone komunikacijske metode. Klic je odličen, če hitro potrebujete veliko informacij, vendar morate biti hkrati. Slack mislimo kot naš 'virtualni hladilnik vode', Basecamp pa uporabljamo za upravljanje kompleksnih oblikovalskih projektov. Ko oblikujemo prototipe z uporabo HTML in CSS, uporabljamo GitHub Issues za neposredno razpravo o kodi.

Raziskave

Poleg komunikacije s stranko boste veliko raziskovali. To lahko vključuje terenske študije, delavnice s stranko, analizo konkurence ali določitev strategije - v bistvu skoraj vse, kar vam pomaga razumeti težavo.

Raziskave so tisto, kar informira vaše odločitve o oblikovanju. Gre za članek, ki ste ga nekoč prebrali, ali tisto novo, kar je Apple pravkar izdal. Ko je čas, da razložite, zakaj ste se odločili za določeno obliko, vas vaše raziskave podpirajo.

Raziskave so lahko zelo široke. Pogosto preizkušam nove naprave za raziskovalne namene ali se prijavim v novo spletno aplikacijo, da preučim njen uporabniški vmesnik.

Oblikovanje in izdelava prototipov

Kot oblikovalec boste verjetno večino svojega časa namenili oblikovanju in izdelavi prototipov. Projekt oblikovanja uporabniškega vmesnika se lahko premakne naprej na številne načine, od skiciranja, podrobnega oblikovanja do kodiranja.

Način, ki ga uporabljate, je v veliki meri odvisen od vrste projekta. Kaj načrtujete? Je to spletno mesto ali bi ga raje poimenovali aplikacija? Ali uporablja domačo tehnologijo? Gre za prenovo ali začenjate iz nič?

Pri našem podjetju ni fiksnega postopka, vendar večina projektov sledi enakemu okvirnemu vrstnemu redu: začnejo se s skicami in žičnimi okvirji, nadaljujejo s podrobnim vizualnim in interaktivnim oblikovanjem ter končajo s prototipom.

Kot oblikovalci porabimo veliko časa za razmišljanje o svojih orodjih. Odlična orodja so sicer pomembna, vendar niso najpomembnejša. Kompetentna uporaba Adobe Creative Suite in aplikacij, kot je Sketch, je enakovredna zmožnosti risanja s svinčnikom ali barvanja s čopičem. Še vedno morate narediti sliko.

Kot rečeno, zdravo zanimanje za orodja je dobra stvar. Rad preizkušam nova orodja, ki mi lahko pomagajo biti bolj produktivna. Moje najljubše orodje za urejanje vektorjev je Illustrator, vendar večino svojega vizualnega oblikovanja danes opravim v programu Sketch. Drugi člani ekipe so prešli na novejša orodja, kot je Affinity Designer.

Orodja so zelo osebna izbira. Dokler lahko zlahka sodelujemo, si lahko vsakdo izbere svojega. Za poenostavitev pogovorov o naših modelih s strankami izdelujemo prototipe z InVisionom. Za naprednejše izdelave prototipov pa uporabljamo HTML in CSS. Orodje, ki ga potrebujete, je odvisno od dela, ki ga želite z njim opraviti.

Komunikacija za razvijalce

Pogosto pozabljen del dela oblikovalca uporabniškega vmesnika je komunikacija razvijalcev. Dandanes se ne morete izogniti tako, da svoje načrte pošljete razvijalcem in upate, da se bodo pravilno izvedli. Najboljši oblikovalci vedo, da izziv ni v ustvarjanju dizajna, temveč v sporočanju z njim - ne le zainteresiranim stranem, ki morajo dati soglasje, ampak tudi razvijalcem, ki ga morajo izvesti.

Sporočanje zasnove je v številnih oblikah: podrobne specifikacije, zagotavljanje sredstev, skupni pregled zasnove. Kaj je smiselno dostaviti v vsakem primeru, je v veliki meri odvisno od tega, ali je projekt izvorna ali spletna aplikacija.

Tradicionalni pristop je dostavljanje sredstev poleg zaslona zaslona. Zasnove zaslona lahko uporabimo, da vidimo, kako bo izgledal videz kot celota, medtem ko so sredstva pripravljeni za uporabo PNG in SVG-ji ikon, zato razvijalcem ni treba imeti opravka z grafičnim urejevalnikom.

V našem podjetju smo zagovorniki zagotavljanja več kot le tega. Uporabljamo vodila za slog komponent, ki pomagajo ohranjati doslednost v naših načrtih. Ko imamo opravka s spletnim projektom, dostavimo podrobne sklope HTML in CSS, dokumentirane po delih, pripravljene za izvedbo. Verjamem, da je edini način, da dosežem svoj cilj ustvariti programsko opremo svetovnega razreda, imeti oblikovalsko oko v vsaki fazi razvoja programske opreme.

Splet v primerjavi z domačimi aplikacijami

Ko načrtujete izvorno aplikacijo za platformo (npr. IOS ali Android), ponavadi upoštevate določene smernice. Ko načrtujete za splet, ni toliko navodil. Običajno se zgodi, da ima vaša stranka vrsto grafičnih smernic za svojo blagovno znamko, ki določajo, kako naj bodo stvari videti.

Vendar so te smernice ponavadi prilagojene trženju spletnih mest in to, kar je tam, ne vodi vedno do dobrih odločitev v uporabniškem vmesniku. Pisave se navadno izbirajo iz tržnih razlogov in ne iz razlogov čitljivosti. Barve so lahko krepke in presenetljive, kar deluje v oglaševalski kampanji, ne pa tudi v aplikaciji, ki jo uporabljate vsak dan. Te vodnike je treba razlagati.

Smernic za uporabniški vmesnik za splet je malo. Lahko bi trdili, da je splet talilni lonec različnih stilov. Če izdelujete karkoli, kar je bolj kot aplikacija kot spletno mesto, morate vedeti o pogosto uporabljenih okoljih, kot sta Bootstrap in ZURB Foundation. Okvir začne določiti, kako naj bodo stvari videti, ker nočete znova izumiti kolesa. In to je verjetno dobro.

V našem podjetju radi uporabljamo Bootstrap. Zagotavlja smiselne privzete velikosti za običajne elemente uporabniškega vmesnika, kot so gumbi, podatkovne tabele in načini.

Pri spletnem oblikovanju vas bolj omejujejo tehnične zmogljivosti spleta. Včasih je bilo težko izvesti preprost vizualni razcvet, kot so zaobljeni vogali na spletni strani. Te dni že ni več - zdaj lahko narišete uporabniške vmesnike z obilico senc, prehodov, animacij in celo 3D.

Kot oblikovalec je bolj realno prevzeti nadzor nad postopkom in oblikovanjem v brskalniku. Nisem videl, da bi veliko oblikovalcev uporabniškega vmesnika prevzelo programiranje uporabniškega vmesnika izvorne aplikacije, toda oblikovalec, ki dela HTML in CSS spletne aplikacije, je pogost pojav. Če lahko kodirate svoje lastne zasnove, boste imeli prednost pred nekodiranimi vrstniki in zame je to edini način, da resnično razumem, kako deluje splet.

Spletne omejitve

Kmalu boste odkrili, da vsi kul triki, ki se jih naučite, niso podprti v vseh brskalnikih, in to je resničnost oblikovanja za splet. Dobro je slediti dobro znanim načelom, kot je progresivna izboljšava, kjer nalagate izboljšano vsebino, kadar koli je to mogoče, hkrati pa razmišljate tudi o tem, kako se vsebina razgrajuje.

V zadnjem času je priljubljeno 'rezanje gorčice'. To podpira BBC-jeva spletna ekipa in vključuje razlikovanje med „dobrimi“ in „slabimi“ brskalniki ter zagotavljanje omejene izkušnje za „slabe“ brskalnike. Vendar v resnici deluje le za vsebinska spletna mesta.

Ko gre za izkušnje, podobne aplikacijam, veliko ljudi za lažji razvoj omejuje podporo le na nekaj vodilnih brskalnikov. Na žalost se to vrne v situacijo iz leta 1996, ko za ogled vsebine potrebujete določen brskalnik.

Izboljšanje vašega nabora spretnosti

Torej, kako ste na tekočem s hitro razvijajočo se spletno industrijo in izboljšate svoje znanje? Oglejmo si nekaj različnih načinov za povečanje svojih spretnosti ...

Znanje o platformi

Večji del arzenala oblikovalca je znanje o platformi. Vedeti bi morali o različnih operacijskih sistemih in o tem, kako jih ljudje uporabljajo. Kot oblikovalci ponavadi uporabljamo Mace, potem pa lahko pozabimo, da večina ljudi tam zunaj uporablja škatle Windows za svoje delo.

Menim, da lahko nekaj resnično razumete samo, če to uporabite sami. Raje uporabljam svoj Mac za oblikovanje, vendar porabim veliko časa, da nadoknadim razvoj različnih drugih platform. V računalniku Mac imam nameščenih več kopij sistema Windows kot navideznih strojev. Bil sem zaposlen s testiranjem novih zgradb sistema Windows 10 z Microsoftovim programom Insider, da bi preveril različne spremembe uporabniškega vmesnika.

Redno kupujem tudi novo strojno opremo, da preizkusim, kako deluje. Kupil sem Apple Watch samo zato, da preizkusim platformo. Nato sem ga prodal, ker sem čutil, da mojemu življenju ne dodaja toliko.

Poleg tega lahko splet razumemo kot svoj operacijski sistem. Nenehno se razvija, vsak teden pa se novemu ponudniku dodajo nove funkcije. Izredno koristno je vedeti o tehničnih vidikih brskalnikov, zlasti glede sposobnosti CSS in grafike. Vedeti morate, kaj sta SVG in WebGL, in kako lahko uporabljate API za spletne animacije.

Vsaka platforma se sčasoma razvija in vaša naloga je, da ostanete na tekočem. Konec koncev, karkoli načrtujete, ne živi osamljeno, ampak je del večjega programskega ekosistema.

Vrnite se k osnovam

To, s čimer se danes borimo, ni tako drugačno kot tisto, s čimer smo se borili pred 20 leti. V knjigah je ogromno dobrih nasvetov. Poskusite obrambno oblikovanje za splet Jasona Frieda in Matthewa Lindermana ter za začetek Ne daj mi misliti Steva Kruga.

Če ne poznate konceptov, kot sta modalnost in privoščljivost, morate prebrati. Morali bi biti sposobni razložiti, kaj je Fittsov zakon. Gestaltov zakon bližine? To je kruh in maslo oblikovanja uporabniškega vmesnika.

Navdihnite se z igrami in filmi

Kot oblikovalec uporabniškega vmesnika za svoje delo črpam druge vire navdiha. Veliko navdiha najdem v igrah. Nekatere igre so zelo zapletene in oblikovalci uporabniškega vmesnika so morali rešiti enake zapletene težave z vmesniki kot oblikovalec uporabniškega vmesnika, ki dela pri poslovnih projektih.

Igre lahko pomenijo tudi trende. Minimalizem, ki ga najdemo v menijih relija Colin McRae, me spominja na smer iOS7. Na nek način se je v letih pred leti v igrah pojavljala animacija uporabniškega vmesnika, ki je zdaj v trendu. Prehod s skeuomorfizma na gol, funkcionalen vmesnik in 'ravno oblikovanje' je bil očiten tudi v igrah. Primerjajte 2006 Oblivion in Skyrim iz leta 2011. Obe igri sta RPG v isti seriji, vendar je razlika presenetljiva.

Tudi futuristični vmesniki v Marvelovih filmih, kot je Iron Man, so me navdihnili. Niso ravno uporabni primeri, vendar me bolj spodbujajo k razmišljanju o računalništvu kot celoti. Ali želimo prihodnost zaslonov ali želimo, da zasloni izginejo? To je verjetno dobro vprašanje za postavitev v pivnici, polni oblikovalcev.

Kot oblikovalec rastete s trdim delom, vztrajnostjo, pogovorom s sovrstniki in strašnim branjem. Pred približno letom dni sem v New York Timesu prebral članek o ljudeh, ki so že v osemdesetih, ki še naprej izpopolnjujejo svoje obrtništvo. Počutim se, kot da šele začenjam. Kaj pa ti?