Zawartość
Kiedy zaczynałem swoją karierę, byłem projektantem stron internetowych. Pracowałem nad projektowaniem stron internetowych przez cztery lata, zaczynając od witryn małych firm, a ostatecznie przechodząc do większych klientów. Dowiedziałem się, że to nie projektowanie graficzne mnie interesuje, ani praca dla większych marek. Bardziej interesowały mnie wzorce paginacji, sposób interakcji ludzi z formami i rzeczy, takie jak postrzeganie wydajności, niż wizualny projekt strony internetowej.
Kiedy oglądałem filmy science fiction, patrzyłem na interfejsy. A kiedy grałem w gry wideo, obserwowałem układ menu. Jeśli którakolwiek z tych cech brzmi znajomo, możesz być w głębi duchem projektantem interfejsu użytkownika.
Zrezygnowałem z pracy w agencji i założyłem własną firmę. Na mojej stronie LinkedIn próbowałem podsumować mój nowy cel zawodowy: stworzyć jak najlepsze oprogramowanie. Minęły cztery lata, odkąd zacząłem jako wolny strzelec, a moja podróż się nie skończyła. Obecnie pomagam w prowadzeniu małej firmy projektującej interfejs użytkownika o nazwie Mononukleoza. Niedawno powitaliśmy naszego czwartego członka zespołu.
W tym artykule chcę opisać, jak to jest być projektantem interfejsu użytkownika, w tym na czym dokładnie polega ta praca, gdzie znaleźć najlepsze zasoby do nauki i jak doskonalić się w swoim rzemiośle.
Co robi projektant UI?
Uważam, że generalnie pracę projektanta interfejsu użytkownika można podzielić na cztery kategorie. Komunikujesz się z klientem, prowadzisz badania, projektujesz i prototypujesz oraz komunikujesz się z programistami. Przyjrzyjmy się bardziej szczegółowo każdej z tych faz.
Komunikacja z klientem
Komunikacja z klientem polega na zrozumieniu problemu klienta. Celem jest opanowanie biznesu klienta, więc początek projektu zwykle wymaga dużo rozmów. Dobrze jest nie wiedzieć zbyt wiele o domenie klienta na początku - możesz spojrzeć na jego firmę w świeży sposób, jednocześnie przewidując możliwe rozwiązania projektowe.
Aby być dobrym projektantem interfejsu użytkownika, musisz w końcu myśleć zgodnie z biznesem swojego klienta. Na przykład twój klient może być w lotnictwie. Praca dla nich sprawi, że w końcu będziesz miał dużą wiedzę na temat tej branży. Tak więc wskazówka dotycząca własnego szczęścia polega na tym, aby mądrze wybrać branże, w których pracujesz, aby nie zostać ekspertem w czymś, na czym Ci nie zależy lub czym się nie interesujesz.
Podczas projektu komunikacja nie ustaje. Jako projektant będziesz stale prezentować swoje prace. W naszej firmie jesteśmy zespołem zdalnym, więc nie mamy wielu spotkań osobistych. Zamiast tego intensywnie korzystamy z udostępniania ekranu za pomocą wideokonferencji. Narzędzia komunikacyjne, takie jak Skype i Slack, są używane codziennie.
Warto łączyć synchroniczne i asynchroniczne metody komunikacji. Telefon jest świetny, jeśli potrzebujesz szybko dużej ilości informacji, ale musisz być w pobliżu w tym samym czasie. Myślimy o Slacku jako o naszej „wirtualnej chłodnicy wody” i używamy Basecamp do zarządzania złożonymi projektami projektowymi. Kiedy projektujemy prototypy za pomocą HTML i CSS, używamy GitHub Issues do bezpośredniego omawiania kodu.
Badania
Oprócz komunikacji z klientem przeprowadzisz wiele badań. Może to obejmować badania terenowe, warsztaty z klientem, analizę konkurencji lub zdefiniowanie strategii - w zasadzie wszystko, co pomoże ci zrozumieć problem.
Badania są tym, co wpływa na twoje decyzje projektowe. To artykuł, który kiedyś przeczytałeś, lub nowa rzecz, którą właśnie wydało Apple. Kiedy nadszedł czas, aby wyjaśnić, dlaczego dokonałeś konkretnego wyboru projektu, Twoje badania są dla Ciebie wsparciem.
Badania mogą być bardzo szerokie. Często testuję nowe urządzenia w celach badawczych lub rejestruję się w nowej aplikacji internetowej, aby przestudiować jej interfejs użytkownika.
Projektowanie i prototypowanie
Jako projektant prawdopodobnie spędzisz większość czasu na projektowaniu i tworzeniu prototypów. Projekt interfejsu użytkownika można rozwijać na wiele sposobów, od szkicowania, przez szczegółowy projekt, po kodowanie.
Metoda, której używasz, w dużej mierze zależy od typu projektu. Co projektujesz? Czy to strona internetowa, czy wolisz nazwać ją aplikacją? Czy korzysta z technologii natywnej? Czy to przeprojektowanie, czy zaczynasz od zera?
W naszej firmie nie ma ustalonego procesu, ale większość projektów przebiega według tej samej zgrubnej kolejności: rozpoczynają się od szkiców i makiet, przechodzą do szczegółowego projektu wizualnego i interaktywnego, a kończą na prototypie.
Jako projektanci spędzamy dużo czasu na myśleniu o naszych narzędziach. Chociaż świetne narzędzia są ważne, nie są najważniejsze. Umiejętność kompetentnego korzystania z pakietu Adobe Creative Suite i aplikacji takich jak Sketch jest odpowiednikiem umiejętności używania ołówka do rysowania lub pędzla do malowania. Nadal musisz wykonać obraz.
Biorąc to pod uwagę, zdrowe zainteresowanie narzędziami to dobra rzecz. Uwielbiam wypróbowywać nowe narzędzia, które mogą pomóc mi być bardziej produktywnym. Moim ulubionym narzędziem do edycji wektorów jest Illustrator, ale większość moich prac związanych z projektowaniem wizualnym jest obecnie wykonywana w Sketch. Inni członkowie zespołu przeszli na nowsze narzędzia, takie jak Affinity Designer.
Narzędzia to bardzo osobisty wybór. Dopóki możemy łatwo współpracować, każdy może wybrać własny. Aby ułatwić rozmowę o naszych projektach z klientami, wykonujemy prototypy za pomocą InVision. Jednak do bardziej zaawansowanego prototypowania używamy HTML i CSS. Wszystko, czego potrzebujesz, zależy od pracy, którą chcesz z nim wykonać.
Komunikacja z programistami
Często zapomnianą częścią pracy projektanta UI jest komunikacja między programistami. W dzisiejszych czasach nie możesz po prostu wysyłać projektów do programistów i mieć nadzieję, że zostaną poprawnie wdrożone. Najlepsi projektanci wiedzą, że wyzwaniem nie jest stworzenie projektu, ale przekazanie go - nie tylko interesariuszom, którzy muszą wyrazić zgodę, ale także deweloperom, którzy muszą go wdrożyć.
Przekazywanie projektu przybiera różne formy: szczegółowe specyfikacje, dostarczenie zasobów, wspólne przeglądanie projektu. To, co ma sens w każdym wystąpieniu, w dużej mierze zależy od tego, czy projekt jest aplikacją natywną czy internetową.
Tradycyjne podejście polega na dostarczaniu zasobów obok projektów ekranów. Projekty ekranu można wykorzystać, aby zobaczyć, jak projekt będzie wyglądał jako całość, podczas gdy zasoby są gotowymi do użycia plikami PNG i SVG z ikonami, więc programiści nie muszą zajmować się edytorem grafiki.
W naszej firmie jesteśmy zwolennikami dostarczania czegoś więcej. Korzystamy z przewodników po komponentach, aby zachować spójność naszych projektów. Kiedy mamy do czynienia z projektem internetowym, dostarczamy szczegółowe zestawy HTML i CSS, udokumentowane kawałek po kawałku, gotowe do wdrożenia. Uważam, że oko projektanta na każdym etapie tworzenia oprogramowania jest jedyną drogą do osiągnięcia celu, jakim jest tworzenie oprogramowania na światowym poziomie.
Aplikacje internetowe a aplikacje natywne
Projektując natywną aplikację na platformę (np. IOS lub Android), zwykle przestrzegasz pewnych wytycznych. Kiedy projektujesz pod kątem internetu, nie ma zbyt wielu wskazówek. Zwykle zdarza się, że Twój klient ma zestaw graficznych wskazówek dla swojej marki, które określają, jak powinno wyglądać.
Jednak te wytyczne są zwykle dostosowane do witryn marketingowych, a ich zawartość nie zawsze prowadzi do dobrych decyzji dotyczących interfejsu użytkownika. Czcionki są zwykle wybierane ze względów marketingowych, a nie ze względu na czytelność. Kolory mogą być odważne i rzucające się w oczy, co sprawdza się w kampanii reklamowej, ale nie w aplikacji, z której korzystasz na co dzień. Te przewodniki muszą być interpretowane.
Istnieje kilka wskazówek dotyczących interfejsu użytkownika w sieci Web. Można argumentować, że internet jest tyglem różnych stylów. Jeśli tworzysz coś, co bardziej przypomina aplikację niż stronę internetową, musisz wiedzieć o powszechnie używanych frameworkach, takich jak Bootstrap i ZURB Foundation. Ramy zaczynają określać, jak rzeczy powinny wyglądać, ponieważ nie chcesz odkrywać koła na nowo. I to prawdopodobnie dobra rzecz.
W naszej firmie lubimy korzystać z Bootstrap. Zapewnia rozsądne domyślne rozmiary dla typowych elementów interfejsu użytkownika, takich jak przyciski, tabele danych i modały.
Podczas projektowania stron internetowych jesteś bardziej ograniczony możliwościami technicznymi sieci. Kiedyś trudno było wdrożyć proste wizualne elementy, takie jak zaokrąglone rogi na stronie internetowej. Te dni już dawno minęły - możesz teraz rysować interfejsy użytkownika z dużą ilością cieni, przejść, animacji, a nawet 3D.
Jako projektant bardziej realistyczne jest przejęcie kontroli nad procesem i projektem w przeglądarce. Nie widziałem, aby wielu projektantów interfejsu użytkownika przejęło programowanie interfejsu użytkownika aplikacji natywnej, ale projektant wykonujący HTML i CSS aplikacji internetowej jest częstym zjawiskiem. Jeśli potrafisz zaprogramować własne projekty, będziesz mieć przewagę nad niekodującymi rówieśnikami, a dla mnie to jedyny sposób, aby naprawdę zrozumieć, jak działa sieć.
Ograniczenia sieciowe
Wkrótce odkryjesz, że nie wszystkie fajne sztuczki, których się uczysz, są obsługiwane w każdej przeglądarce i taka jest rzeczywistość projektowania pod kątem internetu. Dobrze jest przestrzegać dobrze znanych zasad, takich jak stopniowe ulepszanie, w ramach których wczytujesz ulepszone treści, gdy tylko jest to możliwe, ale także zastanawiasz się, jak degradują się one.
Ostatnio popularne stało się „cięcie musztardy”. Wspierany przez zespół internetowy BBC, polega to na rozróżnianiu „dobrych” i „złych” przeglądarek oraz zapewnianiu ograniczonego doświadczenia „złym” przeglądarkom. Jednak tak naprawdę działa tylko w przypadku witryn z treścią.
Jeśli chodzi o doświadczenia podobne do aplikacji, wiele osób ogranicza obsługę tylko do kilku wiodących przeglądarek, aby ułatwić programowanie. Niestety, w ten sposób wracamy do sytuacji z 1996 roku, w której do przeglądania treści potrzebna jest określona przeglądarka.
Poprawa umiejętności
Jak więc być na bieżąco z szybko rozwijającą się branżą internetową i doskonalić swoje umiejętności? Przyjrzyjmy się kilku różnym metodom doskonalenia umiejętności ...
Znajomość platformy
Główną częścią arsenału projektanta jest znajomość platformy. Powinieneś wiedzieć o różnych systemach operacyjnych i o tym, jak ludzie ich używają. Jako projektanci zwykle używamy komputerów Mac, ale wtedy łatwo jest zapomnieć, że większość ludzi korzysta z komputerów z systemem Windows do wykonywania swojej pracy.
Czuję, że możesz coś naprawdę zrozumieć tylko wtedy, gdy sam tego użyjesz. Wolę projektować na komputerze Mac, ale spędzam dużo czasu na śledzeniu ewolucji różnych innych platform. Mam kilka kopii systemu Windows zainstalowanych na komputerze Mac jako maszyny wirtualne. Byłem zajęty testowaniem nowych wersji systemu Windows 10 przy użyciu niejawnego programu testów firmy Microsoft, aby sprawdzić różne zmiany w interfejsie użytkownika.
Regularnie kupuję też nowy sprzęt, aby sprawdzić, jak to działa. Kupiłem Apple Watch tylko po to, aby przetestować platformę. Potem go sprzedałem, bo czułem, że nie wnosi tak wiele do mojego życia.
Co więcej, Internet może być postrzegany jako własny system operacyjny. Stale się rozwija, a nowe funkcje są dodawane co tydzień do każdego dostawcy przeglądarek. Niezwykle warto poznać techniczne aspekty przeglądarek, zwłaszcza dotyczące CSS i możliwości graficznych. Musisz wiedzieć, czym są SVG i WebGL i jak korzystać z interfejsu API animacji sieci Web.
Każda platforma ewoluuje w czasie, a Twoim zadaniem jako projektanta interfejsu użytkownika jest być na bieżąco. W końcu to, co projektujesz, nie żyje w izolacji, ale jest częścią większego ekosystemu oprogramowania.
Wróć do podstaw
To, z czym walczymy dzisiaj, nie różni się tak bardzo od tego, z czym borykaliśmy się 20 lat temu. W książkach jest mnóstwo dobrych rad. Na początek wypróbuj Defensive Design for the Web autorstwa Jasona Frieda i Matthew Lindermana oraz Don't Make Me Think autorstwa Steve Krug.
Jeśli nie znasz pojęć takich jak modalność i afordancja, musisz poczytać. Powinieneś być w stanie wyjaśnić, czym jest prawo Fittsa. Prawo bliskości Gestalt? To jest chleb powszedni projektowania interfejsu użytkownika.
Zainspiruj się grami i filmami
Jako projektant UI w swojej pracy czerpię inspirację z innych źródeł. W grach znajduję wiele inspiracji. Niektóre gry są bardzo złożone, a projektanci UI musieli rozwiązywać te same złożone problemy z interfejsem, co projektanci UI pracujący nad projektami biznesowymi.
Gry mogą również oznaczać trendy. Minimalizm w menu Colina McRae Rally przypomina mi kierunek iOS7. W pewnym sensie projekt animacji interfejsu użytkownika, który jest teraz modny, pojawił się w grach wiele lat temu. Przejście od skeuomorfizmu do pustych, funkcjonalnych interfejsów i „płaskiej konstrukcji” było również widoczne w grach. Porównaj Oblivion z 2006 roku ze Skyrimem z 2011 roku. Obie gry to gry RPG z tej samej serii, ale różnica jest uderzająca.
Inspiracją były również futurystyczne interfejsy w filmach Marvela, takich jak Iron Man. Nie są to przykłady użyteczne, ale sprawiają, że myślę więcej o komputerach jako całości. Czy chcemy przyszłości ekranów, czy chcemy, aby ekrany zniknęły? To chyba dobre pytanie do postawienia w pubie pełnym projektantów.
Jako projektant rozwijasz się dzięki ciężkiej pracy, wytrwałości, rozmowom z rówieśnikami i okropnym czytaniu. Mniej więcej rok temu przeczytałem artykuł w New York Times o ludziach w wieku powyżej 80 lat, którzy nadal doskonalą swoje rzemiosło. Czuję, że dopiero zaczynam. A ty?
