Samouczek dotyczący procesu projektowania dla programistów: zapewniaj lepszy interfejs użytkownika/UX na czas

Od redakcji: Lubos Volkov jest doświadczonym projektantem, który przez całą swoją karierę pracował zdalnie z wieloma programistami. Jako projektant produktu w Toptal, Lubos codziennie współpracuje z członkami zespołu z różnych działów, w tym inżynierii, społeczności i treści. Jest utalentowanym projektantem, którego umiejętności komunikacyjne przyczyniają się do jego sukcesu. W tym samouczku Lubos dzieli się swoimi doświadczeniami i sposobami optymalizacji przepływów pracy UI i UX projektanta-programisty, które prowadzą do wysokiej jakości produktów dostarczanych w terminie lub przed terminem.

Praca ze świetnym projektantem lub zespołem projektowym może być nieocenionym atutem każdego zespołu. Dzięki przejrzystym kanałom komunikacji i swobodnej współpracy projektant powinien dać Ci wszystko, czego potrzebujesz, aby przyspieszyć proces budowy i maksymalnie ograniczyć pytania i zamieszanie.

Co Ty, twórca UX, możesz zrobić, aby zapewnić, że zbudowany przez Ciebie produkt zostanie dostarczony na czas bez poświęcania jakości interfejsu użytkownika i doświadczenia użytkownika?

Moja odpowiedź: Zaangażuj swoich projektantów od pierwszego dnia i utrzymuj ich zaangażowanie w całym procesie rozwoju UI/UX. Upewnij się, że ustaliłeś jasne linie komunikacyjne i spójną komunikację między programistami a projektantami.

Czy masz wszystko, czego potrzebujesz?

Najgorszą rzeczą, jaka może się przydarzyć podczas implementacji dowolnego interfejsu użytkownika, jest __brak komunikacji między projektantem a deweloperem __(chyba że są to ta sama osoba). Niektórzy projektanci uważają, że ich praca jest wykonywana po wysłaniu PSD. Ale to po prostu źle! Musisz stworzyć ciągły przepływ pracy komunikacji, który będzie trwał po dostarczeniu PSD.

W wielu przypadkach minie trochę czasu, zanim projektanci zobaczą rzeczywistą implementację projektu UI/UX. Ku ich zaskoczeniu, kompilacja jest często zupełnie inna niż początkowa gra. (Zdarzyło mi się to więcej niż raz. Wysłałem pliki źródłowe z pełnymi opisami i prototypami interakcji, ale kiedy w końcu zobaczyłem projekt, kilka miesięcy później, miał inny układ, inne kolory i nie było żadnych interakcji.)

Niektórzy projektanci mogą mnie za to nienawidzić, ponieważ ten proces projektowania wymaga z ich strony dużo „dodatkowej” pracy. Jednak tworzenie i dostarczanie pełnych zasobów i informacji w zorganizowany sposób jest lepsze dla projektu i zespołu jako całości.

Jeśli programista ma przed sobą wszystko, czego potrzebuje, przyspieszy to proces. Czyste PSD to po prostu za mało.

Czego potrzebujesz, aby praca została wykonana skutecznie i wydajnie?

Oto zalety, których programista powinien oczekiwać od projektanta, aby wprowadzić projekt UI/UX do wdrożenia:

• Plik zasobów — projektant powinien umieścić każdy element aplikacji w jednym pliku. Ten plik powinien zawierać przyciski, pola wyboru, style nagłówka, czcionki, kolory itp. Zasadniczo, na podstawie informacji zawartych w tym pliku, programista powinien być w stanie odtworzyć dowolny interfejs od podstaw. Deweloperowi znacznie łatwiej jest wyeksportować dowolny element z jednego pliku PSD, niż szukać go w wielu plikach.

• Zasoby — upewnij się, że programiści otrzymują wszystkie wymagane zasoby, ponieważ plików źródłowych nie należy już dotykać.

• Prototypy interakcji — Dni „statycznych ekranów” już dawno minęły. Korzystanie z inteligentnych interakcji i animacji w celu usprawnienia przepływu pracy i wdrażania UX jest obecnie powszechną praktyką. Ale nie możesz po prostu powiedzieć „to wsunie się od lewej” do programisty. Projektant powinien stworzyć rzeczywisty prototyp tej interakcji. Prototyp powinien zawierać informacje takie jak prędkość, prędkość itp., a projektant powinien określić każdą z tych wartości.

• Konwencja nazewnictwa — poproś o strukturę nazewnictwa plików, aby wszystko było zorganizowane. Ułatwi to obojgu nawigację po plikach. (Nikt nie lubi mieć rzeczy ukrytych w folderze w tle.)

• Zasoby HDPI - Żyjemy w „trudnych czasach”, z ogromną gęstością ekranów. Upewnij się, że projektant dostarczy obrazy we wszystkich wymaganych rozdzielczościach, dzięki czemu Twoja aplikacja będzie wszędzie wyglądać chrupiąc. Uwaga: użyj jak największej liczby wektorów; to bardzo ci pomoże (svg).

Jeśli zauważysz, że czegoś jeszcze brakuje podczas wdrażania, nie bój się; zadzwoń do projektanta i poproś o to. Nigdy nie pomijaj i nigdy nie oszczędzaj! Jesteście członkami tego samego zespołu, a waszym zadaniem jest dostarczanie możliwie najlepszego produktu. Jeśli projektant zawiedzie, ty również zawiedziesz.

Praca w toku

Wykorzystaj swoich projektantów podczas procesu tworzenia UI/UX. Nie trzymaj ich na uboczu, oczekując, że po prostu „pchną piksele”. Projektant widzi możliwe innowacje jeszcze przed rozpoczęciem wdrożenia. Aby to wykorzystać, trzymaj ich w pętli. Zapewnij im dostęp, aby mogli zobaczyć i przetestować prace w toku. Doskonale zdaję sobie sprawę, że nikt nie lubi dzielić się niedokończonymi projektami. Ale o wiele łatwiej jest wprowadzić zmiany w środku kompilacji niż na końcu. Może to zaoszczędzić czas i zapobiec niepotrzebnej pracy. Gdy dasz projektantowi szansę przetestowania projektu, poproś go o sporządzenie listy problemów i rozwiązań oraz zasugerowanie usprawnień.

Co zrobić, gdy programista wpadnie na pomysł, który zmieni wygląd aplikacji? Porozmawiaj o tym z projektantem i nigdy nie pozwól programiście modyfikować projektu bez konsultacji z projektantem. Ten proces projektowania zapewni, że kompilacja pozostanie na dobrej drodze. Świetny projektant ma rację dla każdego elementu na ekranie. Wyjęcie pojedynczego elementu bez zrozumienia, dlaczego się tam znajduje, może zrujnować wrażenia użytkownika.

Zarządzanie projektami UI/UX

Projektanci uważają, że programiści mogą ożywić projekt w jeden dzień, a nawet w godzinę. Ale, podobnie jak świetny projekt, wielki rozwój wymaga czasu i wysiłku. Trzymaj swojego niespokojnego projektanta na dystans, pozwalając mu zobaczyć postępy w budowie. Korzystanie z zewnętrznego oprogramowania do zarządzania projektami, aby upewnić się, że każda wersja jest uwzględniona, to świetny sposób, aby upewnić się, że nie przegapisz ważnych informacji omawianych w rozmowie e-mail lub sesji Skype. I bądźmy szczerzy: czasami zmiany i działania nie są nawet komunikowane, dopóki się nie wydarzą.

Bez względu na to, z jakiego rozwiązania korzystasz, wybierz jeden proces przepływu pracy, który przyjmie cały zespół i będzie konsekwentnie stosował. W naszym zespole próbowałem popchnąć Basecamp, ponieważ tego właśnie używałem, ale nasi front-endowi programiści myśleli, że ma on ograniczone funkcje. Używali już innego oprogramowania do zarządzania projektami do śledzenia błędów, postępów itp., takiego jak JIRA, GitHub, a nawet Evernote. Zrozumiałem, że śledzenie i zarządzanie projektami powinno być jak najprostsze, więc przeniosłem mój przepływ pracy do projektowania interfejsu użytkownika do JIRA. Chciałem się upewnić, że rozumieją mój przepływ pracy i postępy, ale nie chciałem, aby poczuli, że projektowanie to kolejna rzecz, którą trzeba zarządzać.

Oto kilka sugestii dotyczących narzędzia do zarządzania projektami:

• Basecamp — śledzi postęp zadań związanych z projektowaniem i rozwojem oraz umożliwia łatwe eksportowanie zadań. Posiada również prostego klienta mobilnego.
• JIRA — w pełni konfigurowalna platforma, na której można łatwo skonfigurować niestandardowe tablice dla różnych obszarów. Na przykład zorganizuj tablice do śledzenia działań, takich jak back-end, front-end, design itp. Myślę, że klient mobilny jest nieco słaby, ale jest to świetne rozwiązanie dla większych zespołów i zawiera funkcję śledzenia błędów.
• E-mail — świetnie nadaje się do prowadzenia rozmowy lub wysyłania obrazów. Zachowaj jednak ostrożność , jeśli korzystasz z poczty e-mail w celu uzyskania opinii. Rzeczy mogą się łatwo zgubić.

Możesz także wypróbować Trello i inne oprogramowanie do zarządzania projektami, ale najczęściej używane w naszej branży to Basecamp i JIRA. Ponownie, najważniejsze jest znalezienie systemu zarządzania projektami, z którego każdy może korzystać w sposób spójny, w przeciwnym razie jest to kwestia sporna.

Projektowanie i rozwój UX idą razem

Projektant i deweloper to potężna kombinacja. Pamiętaj, aby jak najczęściej przeprowadzać burzę mózgów na temat interfejsu użytkownika i UX. Deweloperzy powinni być chętni do pomocy projektantowi w tworzeniu pomysłów, podczas gdy projektant powinien mieć przynajmniej podstawową wiedzę na temat wykorzystywanej technologii.

Wspólnie opracujcie proces projektowania. Nie wdrażaj na ślepo tego, co tworzą twoi projektanci. Bądź proaktywny i stwórz coś, co wygląda pięknie i zapewnia doskonałe wrażenia użytkownika, korzystając z dwóch różnych perspektyw. Projektanci myślą nieszablonowo i widzą szalone animacje, pomysły, piksele i przyciski, podczas gdy programiści widzą technologię, progi prędkości i ograniczenia.

Z mojego doświadczenia wynika, że ​​każdy projektant ma bzika na punkcie pikseli i ciekawych koncepcji. Ale czasami projektant dochodzi do punktu, w którym ma pomysł, ale programista odsuwa się i mówi: „Po wdrożeniu to nie zadziała dobrze. Będą problemy z konsumpcją wydajności”. Ostatnio chciałem zaimplementować okno modalne z rozmytym tłem, ale to rozmycie powodowało duże czasy ładowania. Aby rozwiązać ten problem, deweloper zasugerował użycie zwykłej, pełnokolorowej nakładki, która ładuje się szybciej i zachowuje jakość obrazu. Projektanci, zwróćcie uwagę: nie narażajcie na szwank wrażenia użytkownika podczas projektowania.

Sprzężenie zwrotne

Informacja zwrotna od projektanta jest kluczowa i musi się odbywać tak często, jak to możliwe. To prawdopodobnie najbardziej czasochłonna (i energetyczna) rzecz, jaką zrobisz. Ale musisz go zaadaptować, aby móc zapewnić doskonałe rezultaty. Oto kilka wskazówek dotyczących projektowania UX i interfejsu użytkownika, jak sprawić, by Twoja opinia była doskonała.

• Bądź wizualny — informacja zwrotna musi być jak najdokładniejsza. Najlepszym sposobem, aby był dokładny, jest wykonanie prostego zrzutu ekranu i zaznaczenie problemu, który chcesz naprawić. Byłoby jeszcze lepiej, gdybyś miał zdjęcia aktualnej implementacji, a nie jak ma wyglądać . Komunikacja wizualna wyeliminuje 50% pytań.

• Bądź opisowy — informacja zwrotna powinna być dokładna. Nie możesz po prostu powiedzieć „przesuń ten przycisk w górę”. Projektant musi określić, o ile pikseli przycisk ma się przesunąć, jakiego wypełnienia użyć itp. Zawsze dołącz wyjaśnienie problemu i odpowiednie rozwiązanie. Zajmie to dużo czasu, ale warto.

• Bądź cierpliwy — pamiętaj, że projektant i programiści nie skupiają się na tym samym. Jeśli programiści nie w pełni rozumieją pomysł projektanta, może to prowadzić do zamieszania i złych decyzji. W każdym przypadku obie strony muszą być cierpliwe i chętne do pomocy innym członkom zespołu. Czasami jest to naprawdę trudne, ale jest to umiejętność miękka, której każdy projektant i programista powinien się nauczyć.

Jest całkiem oczywiste, że te rzeczy muszą być połączone razem, aby stworzyć z nich odpowiedni proces projektowania. Ale jakie narzędzie może faktycznie pomóc w przekazywaniu opinii?

• E- mail - nie boję się powiedzieć, że jest to nadal najpopularniejsza platforma do przekazywania informacji zwrotnych. Używanie go jest całkowicie w porządku, jeśli będziesz przestrzegać kilku prostych zasad.
  • Najpierw użyj jednego wątku e-mail, aby uzyskać opinię. Nie umieszczaj poszczególnych poprawek w nowym e-mailu z innym tematem.
  • Po drugie, utwórz listę poprawek. Spróbuj usiąść i pomyśleć o każdym poprawce lub poprawce, którą zauważyłeś.
  • I wreszcie, nie wysyłaj od razu dużej listy. Spróbuj rozbić go na mniejsze, indywidualne listy i przejść część po części.

• Skype (Hangouts) — Voice to naprawdę potężne narzędzie do przekazywania opinii. Możesz od razu zadawać pytania i odpowiadać na nie. Pamiętaj jednak, aby po rozmowie robić notatki i wysyłać następną wiadomość (e-mail).

• Narzędzia do współpracy — szczerze mówiąc, nie jestem wielkim fanem narzędzi do współpracy. Ale mają dużą korzyść. Pomagają w utrzymaniu informacji zwrotnej. Zadawanie pytań i odpowiadanie na nie jest szybkie i pozostaje tam na zawsze.

Oto kilka świetnych narzędzi:

Adnotacja do opinii:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Narzędzia współpracy:

• http://www.invisionapp.com/
• https://basecamp.com/

Wniosek

Stwórz przepływ pracy systemu i projektowania UI/UX, który utrzyma otwarte linie komunikacyjne w całym procesie projektowania i rozwoju. Umożliwi to realizację świetnych pomysłów, prognozowanie potencjalnych problemów i priorytetyzację ważnych kwestii.

Deweloper i projektant mogą razem tworzyć wspaniałe rzeczy, o ile chcą pracować jako zespół . Ucz się od siebie nawzajem i projektuj samouczki, takie jak ten!