Tartalom
Amikor elkezdtem a karrieremet, webdesigner voltam. Négy évig dolgoztam a webdesignban, kezdve a kisvállalkozások webhelyeivel és végül nagyobb ügyfelek felé. Megtudtam, hogy nem a grafikai tervezés érdekelt, és nem is a nagyobb márkanevekért dolgoztam. Jobban érdekeltek a lapozás mintái, az emberek interakciója a formákkal és az észlelt teljesítmény, mint egy weboldal látványterve.
Amikor sci-fi filmeket néztem, megnéztem az interfészeket. És amikor videojátékokat játszottam, megfigyeltem a menük elrendezését. Ha ezeknek a tulajdonságoknak bármelyike ismerősnek tűnik számodra, akkor szívedben UI-tervező is lehetsz.
Kiléptem az ügynökségi munkámból, és saját céget alapítottam. LinkedIn oldalamon megpróbáltam összefoglalni új karrier célomat: a lehető legjobb szoftver elkészítését. Négy év telt el azóta, hogy szabadúszóként kezdtem, és az utam nem állt le. Manapság segítek egy kis felhasználói felületet tervező cég vezetésében Monó. Nemrégiben köszöntöttük negyedik csapattagunkat.
Ebben a cikkben szeretném leírni, milyen érzés felhasználói felület-tervezőnek lenni, beleértve azt is, hogy pontosan mit is jelent a munka, hol lehet megtalálni a legjobb tanulási forrásokat, és hogyan lehetne jobbá tenni a mesterségét.
Mit csinál egy felhasználói felület-tervező?
Megállapítottam, hogy általában egy felhasználói felület-tervező munkáját négy kategóriába sorolhatja. Kommunikál az ügyféllel, kutat, tervez és prototípust készít, valamint kommunikál a fejlesztőkkel. Vessünk egy pillantást ezekre a szakaszokra részletesebben.
Ügyfélkommunikáció
Az ügyfélkommunikáció a kliens problémájának megértéséről szól. A cél az, hogy megbirkózzon az ügyfelével, így a projekt kezdete általában sok beszélgetést jelent. Jó, ha nem kezd túl sokat tudni az ügyfelének domainjéről - újszerű módon tekinthet az üzletére, miközben elképzelheti a lehetséges tervezési megoldásokat.
Ahhoz, hogy jó felhasználói felület-tervező lehessen, képesnek kell lennie arra, hogy végül együtt gondolkodjon kliense vállalkozásával. Előfordulhat például, hogy ügyfele a repülés területén dolgozik. Náluk végzett munka végül eléggé tájékozott lesz az adott iparágról. Tehát, egy tipp a saját boldogságához itt az, hogy okosan válassza ki azokat az iparágakat, amelyeknek dolgozik, így végül nem lesz olyan szakértő, aki nem érdekli vagy nem érdekli.
Egy projekt során a kommunikáció nem áll le. Tervezőként folyamatosan bemutatja munkáját. Cégünknél távoli csapat vagyunk, ezért nincs sok személyes találkozónk. Ehelyett videokonferenciákon keresztül erősen kihasználjuk a képernyőmegosztást. Minden nap olyan kommunikációs eszközöket használnak, mint a Skype és a Slack.
Hasznos a szinkron és az aszinkron kommunikációs módszerek kombinálása. A hívás nagyszerű, ha gyorsan sok információra van szüksége, de egyszerre kell tartózkodnia. A Slack-et „virtuális vízhűtőnknek” gondoljuk, és a Basecamp-ot használjuk komplex tervezési projektek irányításához. Amikor HTML és CSS használatával tervezünk prototípusokat, a GitHub Issues-t használjuk a kód közvetlen megvitatására.
Kutatás
Az ügyfélkommunikáció mellett sok kutatást fog végezni. Ez magában foglalhat terepi tanulmányokat, workshopokat az ügyféllel, a verseny elemzését vagy stratégia meghatározását - lényegében szinte mindenről, ami segít megérteni a problémát.
A kutatás az, amely tájékoztatja tervezési döntéseit. Ez egy cikk, amelyet egyszer elolvastál, vagy az az új dolog, amelyet az Apple most adott ki. Amikor eljött az ideje, hogy elmagyarázza, miért választott egy adott tervezési választást, kutatása alátámasztja Önt.
A kutatás nagyon széles körű lehet. Gyakran tesztelek új eszközöket kutatási célokra, vagy regisztrálok egy új webalkalmazásra, hogy tanulmányozzam annak felhasználói felületét.
Tervezés és prototípus készítés
Tervezőként valószínűleg időd nagy részét tervezési és prototípus-készítési munkákkal tölti. A felhasználói felület tervezési projektje a vázlattól kezdve a részletes tervezésen át a kódolásig számos módon haladhat.
Az Ön által alkalmazott módszer nagyban függ a projekt típusától. Mit tervez? Webhelyről van szó, vagy inkább alkalmazásnak hívná? Natív technológiát használ? Újratervezés vagy a semmiből indul?
Cégünknél nincs rögzített folyamat, de a legtöbb projekt ugyanazt a durva sorrendet követi: vázlatokkal és drótvázakkal indulnak, részletes vizuális és interakciós tervezéssel folytatják, és prototípussal zárják.
Tervezőként sok időt töltünk az eszközeink gondolkodásával. Bár a nagyszerű eszközök fontosak, nem ezek a legfontosabbak. Az Adobe Creative Suite és az olyan alkalmazások, mint a Sketch, hozzáértő használata egyenértékű azzal, hogy ceruzával használhatunk rajzot, vagy ecsettel festhetünk. Még mindig el kell készítenie a festményt.
Ennek ellenére az eszközök iránti egészséges érdeklődés jó dolog. Szeretek olyan új eszközöket kipróbálni, amelyek segíthetnek abban, hogy produktívabb legyek. A kedvenc vektorszerkesztő eszközem az Illustrator, de manapság a legtöbb látványtervező munkámat a Sketch-ben végzem. A csapat többi tagja áttért az újabb eszközökre, például az Affinity Designerre.
Az eszközök nagyon személyes választás. Amíg könnyen együtt tudunk működni, mindenki szabadon választhatja ki a sajátját. Annak érdekében, hogy egyszerűbb legyen a tervekről az ügyfelekkel beszélgetni, prototípusokat készítünk az InVision segítségével. A fejlettebb prototípusok készítéséhez azonban HTML-t és CSS-t használunk. A szükséges eszköz attól függ, hogy milyen munkát szeretne végezni vele.
Fejlesztői kommunikáció
Az UI-tervező munkájának gyakran elfeledett része a fejlesztői kommunikáció. Manapság nem lehet megúszni, ha csak elküldöd a terveidet a fejlesztőknek, és reméled, hogy helyesen valósítják meg őket. A legjobb tervezők tudják, hogy a kihívás nem a design elkészítésében rejlik, hanem a kommunikációban - nemcsak az érdekelt feleknek, akiknek meg kell adniuk a jóváhagyásukat, hanem a fejlesztőknek is, akiknek meg kell valósítaniuk.
A formatervezés kommunikációja sokféle formában valósul meg: részletes specifikációk, eszközök biztosítása, a terv együttes felülvizsgálata. Az, hogy milyen értelme van az egyes esetekben megvalósítani, nagyban függ attól, hogy a projekt natív vagy webes alkalmazás-e.
A hagyományos megközelítés az, hogy az eszközöket a képernyőtervek mellé szállítják. A képernyőtervek segítségével megnézhetjük, hogy fog kinézni a tervezés egészében, míg az eszközök használatra kész PNG-k és SVG-k ikonok, így a fejlesztőknek nem kell grafikus szerkesztővel foglalkozniuk.
Cégünknél a több megvalósítás hívei vagyunk. Komponensstílus-útmutatókat használunk a tervek konzisztenciájának megőrzéséhez. Amikor webes projekttel van dolgunk, részletes HTML és CSS készleteket szállítunk darabonként, dokumentálva, készen a megvalósításra. Úgy vélem, hogy a szoftverfejlesztés minden fázisában a tervezői szem az egyetlen módja annak, hogy elérjem a világszínvonalú szoftverek létrehozásának célját.
Web vs natív alkalmazások
Ha natív alkalmazást tervez platformra (pl. IOS vagy Android), akkor hajlamos betartani bizonyos irányelveket. Amikor webre tervez, nincs annyi útmutatás. Ami általában történik, az az, hogy az ügyfelének van egy grafikus útmutatója a márkájához, amely meghatározza a dolgok megjelenését.
Ezeket az irányelveket azonban általában a marketing webhelyekhez igazítják, és ami ott van, az nem mindig vezet jó felhasználói felület-döntésekhez. A betűtípusokat általában marketing okokból választják, nem pedig olvashatósági okokból. A színek merészek és feltűnőek lehetnek, ami működik egy hirdetési kampányban, de nem a mindennapi alkalmazásban. Ezeket az útmutatókat értelmezni kell.
Kevés a felhasználói felület irányelvei vannak az interneten. Lehet vitatni, hogy a web különböző stílusú olvasztótégely. Ha bármit készít, amely jobban hasonlít egy alkalmazáshoz, mint egy weboldalhoz, akkor tudnia kell olyan széles körben használt keretrendszerekről, mint a Bootstrap és a ZURB Foundation. A keretrendszer elkezdi meghatározni, hogyan kell kinézni a dolgoknak, mert nem akarja feltalálni a kereket. És ez valószínűleg jó dolog.
Cégünknél szívesen használjuk a Bootstrap-ot. Ésszerű alapértelmezett méreteket biztosít a közös felhasználói felület elemeihez, például gombokhoz, adattáblákhoz és modálokhoz.
A webdesignban jobban korlátozza a web technikai képességei. Korábban az volt a nehéz, hogy egyszerű vizuális virágokat, mint lekerekített sarkokat valósítsanak meg egy weboldalon. Ezek a napok már régen elmúltak - most szabadon rajzolhat felhasználói felületeket rengeteg árnyékkal, átmenettel, animációval és még 3D-vel is.
Tervezőként sokkal reálisabb, ha a böngészőben átveszi az irányítást a folyamat és a tervezés felett. Nem láttam, hogy sok felhasználói felület-tervező átvenné egy natív alkalmazás felhasználói felületének programozását, de egy webes alkalmazás HTML-jét és CSS-jét végző tervező gyakran előfordul. Ha be tudja kódolni saját terveit, akkor előnyt élvez a nem kódoló társaival szemben, és számomra ez az egyetlen módja annak, hogy valóban megértsük a web működését.
Webes korlátozások
Hamarosan rájössz, hogy nem minden bonyolult trükköt támogat minden böngésző, és ez a valóság az internetes tervezéshez. Jó követni az olyan ismert elveket, mint a fokozatos fejlesztés, ahol a továbbfejlesztett tartalmat lehetőség szerint betölti, de gondoljon arra is, hogyan romlik a tartalom.
Nemrégiben népszerűvé vált a „mustárvágás”. A BBC internetes csapatának bajnoka ez magában foglalja a „jó” és a „rossz” böngésző megkülönböztetését, és korlátozott élményt nyújt a „rossz” böngészők számára. Azonban valójában csak a tartalmi oldalaknál működik.
Az alkalmazás-szerű élményekről sokan csak néhány vezető böngészőre korlátozzák a támogatást, hogy megkönnyítsék a fejlesztést. Sajnos ez visszavezet minket az 1996-os helyzetbe, amikor a tartalom megtekintéséhez egy bizonyos böngészőre van szükség.
A készségfejlesztés
Szóval, hogyan lehet naprakészen tartani a gyorsan változó web-iparral és javítani a készségét? Nézzünk meg néhány különböző módszert a képességek növelésére ...
Platform ismeretek
A tervezői arzenál jelentős része platformismeret. Tudnia kell a különféle operációs rendszerekről és azok használatáról. Tervezőként hajlamosak vagyunk Mac-eket használni, de akkor könnyű elfelejteni, hogy az emberek többsége odakinn Windows-dobozokat használ a munkájához.
Úgy érzem, csak akkor tudsz igazán megérteni valamit, ha te magad használod. Inkább a Mac-et használom a tervezéshez, de sok időt töltök a különböző platformok fejlődésének felzárkóztatásával. Számos Windows példány van telepítve a Mac gépemre virtuális gépként. Elfoglaltam a Windows 10 új verzióinak tesztelését a Microsoft Insider Program segítségével, hogy megnézzem a felhasználói felület különböző változásait.
Rendszeresen vásárolok új hardvert is, hogy teszteljem a működését. Csak azért vettem egy Apple Watch-ot, hogy teszteljem a platformot. Ezután eladtam, mert úgy éreztem, hogy ez nem ad annyira hozzá az életemhez.
Ezen túlmenően a web saját operációs rendszerének tekinthető. Folyamatosan fejlődik, minden böngésző eladóhoz minden héten új funkciók kerülnek. Rendkívül érdemes tudni a böngészők technikai szempontjairól, különös tekintettel a CSS-re és a grafikus képességekre. Tudnia kell, hogy mi az SVG és a WebGL, és hogyan tudja használni a Web Animations API-t.
Minden platform idővel fejlődik, és felhasználói felület tervezőként az a feladata, hogy naprakész maradjon. Végül is bármit tervez, nem elszigetelten él, hanem egy nagyobb szoftver-ökoszisztéma része.
Térjen vissza az alapokhoz
Amivel ma küzdünk, az nem annyira különbözik attól, amellyel 20 évvel ezelőtt küzdöttünk. Rengeteg jó tanács van a könyvekben. Próbáld ki Jason Fried és Matthew Linderman Defensive Design for the Web-jét, és Steve Krug kezdőként ne késztessen gondolkodásra.
Ha nem tud olyan fogalmakról, mint a modalitás és a megfizethetőség, akkor fel kell olvasnia. Meg kell tudni magyarázni, mi a Fitts törvénye. A közelség Gestalt-törvénye? Ez a kenyér és vaj a felhasználói felület kialakításában.
Merítsen ihletet játékok és filmek által
UI-tervezőként más inspirációs forrásokra támaszkodom munkám elvégzéséhez. Sok inspirációt találok a játékokban. Néhány játék nagyon összetett, és a felhasználói felület tervezőinek ugyanazokat az összetett interfész problémákat kellett megoldaniuk, mint az üzleti projekteken dolgozó felhasználói felület tervezőinek.
A játékok trendeket is jelölhetnek. A Colin McRae Rally menüjében található minimalizmus emlékeztet az iOS7 irányára. Bizonyos szempontból a mostanában divatos felhasználói felület animációs dizájn évekkel ezelőtt megjelent a játékokban. A játékban is nyilvánvaló volt a skeuomorfizmusról a csupasz, funkcionális felületekre és a „lapos kialakításra” való áttérés. Hasonlítsa össze a 2006-os Oblivion-t a 2011-es Skyrimmel. Mindkét játék RPG-k ugyanabban a sorozatban, de a különbség feltűnő.
A Marvel-filmek futurisztikus felületei, mint például az Vasember, szintén inspirációt jelentettek számomra. Nem éppen használható példák, de mégis jobban elgondolkodtatnak a számítástechnika egészén. Szeretnénk a képernyők jövőjét, vagy azt, hogy eltűnjenek a képernyők? Ez valószínűleg jó kérdés, ha egy tervezőkkel teli kocsmában pózolunk.
Tervezőként kemény munkával, kitartással, társaival való beszélgetéssel és borzasztóan sokat olvasol. Körülbelül egy évvel ezelőtt olvastam egy cikket a New York Times-ban arról, hogy olyan 80 év körüli emberekről van szó, akik továbbra is csiszolják mesterségüket. Úgy érzem, csak kezdem. Mi van veled?
