Jak utworzyć przewodnik po stylach: Zacznij od struktury interfejsu użytkownika

Pytania i odpowiedzi z projektantem UX AdRoll na temat tego, dlaczego to zrobiliśmy i czego się nauczyliśmy

Ten post na blogu jest pierwszym z serii, który kronikuje podróż przewodnika po stylach, od jej stworzenia, po dostarczanie dojrzałych ram interfejsu dla naszych zespołów, a na koniec destylowanie unikalnego głosu i tonu dla naszych produktów.

Cześć! Jestem Arya Srinivasan, badaczka UX w AdRoll. Usiadłem z Masonem Lee, projektantem UX pracującym nad produktem API reklam natywnych AdRoll, aby porozmawiać o jego pracy nad opracowaniem przewodnika po stylu AdRoll.

Arya: Na początek, dlaczego zacząłeś projekt przewodnika po stylach? Jaki problem wymagał rozwiązania?

Mason: Problem polegał na niespójności projektowej, zarówno w odniesieniu do produktów, jak i do jednego produktu. Na przykład przycisk, który powinien wyglądać tak samo wszędzie, ale w rzeczywistości różni się kolorem, wagą czcionki i stylem obramowania.

Przyciski wyglądają inaczej w makietach poszczególnych projektantów i naszych aplikacjach.

Szybki rozwój AdRoll sprawił, że skupiliśmy się na prędkości. Jesteśmy teraz większą firmą z wieloma produktami, więc jako projektant uważam, że ważne jest, abyśmy podkreślali konsekwencję w sposobie prezentacji naszych produktów: poprzez projekt.

Aby skupić się na projektowaniu, najpierw musieliśmy naprawić istniejące niespójności. Projektanci UX zazwyczaj koncentrują się na jednym lub dwóch produktach, więc aby nasz zespół zastanowił się nad projektem we wszystkich produktach, organizuję cotygodniowe spotkanie „UI Smackdown” w celu omówienia wytycznych dotyczących interfejsu użytkownika.

Na każdym spotkaniu analizowaliśmy niespójności projektowe, aby zdecydować o jednym projekcie. Po kilku spotkaniach projektanci nadal pytali mnie o prawidłowy kolor lub wypełnienie itp. Potrzebowaliśmy centralnego dokumentu zawierającego wszystkie odpowiedzi, więc stworzyłem naszą strukturę interfejsu użytkownika w Sketch jako źródło dla projektantów. Ilekroć zdamy sobie sprawę, że brakuje komponentu lub chcemy dołączyć nowy, omawiamy go i dodajemy do głównego pliku interfejsu użytkownika.

Arya: Wspomniałeś, że chcesz, aby AdRoll była firmą zorientowaną na projektowanie - co przez to rozumiesz?

Mason: Chcę, aby AdRoll umieścił projekt na pierwszym planie, aby wyróżniał się na tle konkurencji - uznawany przez klientów za dobrze zaprojektowany produkt, który naprawdę zaspokaja ich potrzeby.

Arya: Jakie były twoje najbliższe cele przewodnika po stylu? Czy masz długoterminową wizję tego projektu?

Mason: Moim krótkoterminowym celem jest spójność projektu między projektantami poprzez standaryzację naszych komponentów interfejsu użytkownika. Chcę, aby projektanci mówili tym samym językiem, mówiąc o projektowaniu. Na przykład w trybie modalnym lub rozwijanym inżynierowie budują na podstawie sugestii projektanta. Jeśli elementy projektu różnią się między projektantami, inżynierowie zrobią ten sam element na różne sposoby.

Moim średniookresowym celem jest zdefiniowanie tego stylu w naszym kodzie w „RollUp”, wewnętrznej bibliotece komponentów interfejsu użytkownika AdRoll. Jeśli mamy predefiniowany arkusz stylów, wszyscy nasi inżynierowie muszą go skopiować. Projektanci i inżynierowie mogą mówić tym samym językiem.

Arya: Czy napotkałeś jakieś problemy podczas tworzenia przewodnika po stylu? Jak je rozwiązałeś?

Mason: Jedną z największych przeszkód było uzyskanie wpisu od ludzi z różnych zespołów produktowych. Aby zaangażować wszystkich, zorganizowałem spotkanie z jasną listą punktów porządku obrad do omówienia. Przedstawiłem niespójności projektowe, takie jak różne menu rozwijane między produktami. Dostarczenie dowodów wizualnych uruchamia rozmowy, a ostatecznie ludzie dbają o swój produkt i chcą spójności.

Kolejnym wyzwaniem było ustalenie zasad. Mówiąc o standaryzacji komponentu, powinien on mieć zastosowanie wszędzie i w każdym kontekście. Musisz pomyśleć o każdym przypadku krawędzi. Komponent musi być elastyczny, ale jednocześnie wystarczająco funkcjonalny, aby był łatwy w użyciu, użyteczny i przydatny.

Oto przykład elastyczności naszego przewodnika po stylach. Nasza początkowa decyzja dotycząca dopełnienia w tym menu kierowania geograficznego była zbyt duża, dlatego zmieniliśmy przewodnik po stylu, aby uwzględnić ten przypadek użycia.Przed (po lewej), Po (po prawej)

Naprawdę chcę wezwać jeszcze jedno wyzwanie! Nazewnictwo może być trudne. Jak powiedziałem wcześniej, chcę, aby projektanci i inżynierowie mówili tym samym językiem, ale należy to zrobić ostrożnie. W przypadku czegoś tak prostego jak menu rozwijane, faktycznie mamy kilka odmian (jedna z polami wyboru, druga z polami wyboru i blokiem tekstowym, a druga to standardowe menu rozwijane). Jak nazwać trzy różne listy rozwijane, aby istniało uniwersalne zrozumienie, które z nich?

Semantyka jest trudna; nasze nazewnictwo musi mieć sens. Użyliśmy fajnych narzędzi do współpracy, aby uzyskać konsensus przy podejmowaniu decyzji o nazwie. Na przykład Wake pomógł nam zebrać wszystkie otwarte pytania i problemy, omówić rozwiązania, monitorować decyzje Smackdown interfejsu użytkownika i kontynuować rozmowę z większym zespołem ds. Produktów poprzez integrację ze Slackiem.

Jak wykorzystaliśmy Wake do omówienia niespójności interfejsu użytkownika i współpracy w zakresie reguł składników.

Arya: Czy jest coś wyjątkowego w interfejsie użytkownika AdRoll, o którym trzeba pamiętać przy tworzeniu przewodnika po stylu?

Mason: Nasz pulpit jest bardzo obciążony danymi. Ponadto proces tworzenia kampanii daje reklamodawcom szereg dźwigni do wyciągnięcia. Aby zaspokoić potrzeby mniej doświadczonych reklamodawców, chcemy mieć skuteczne ustawienia domyślne. W naszych produktach komponenty mają złożone funkcje, ale wyglądają na proste i łatwe w użyciu.

Arya: Czy są jakieś rzeczy, o których chciałbyś wiedzieć, kiedy zacząłeś tworzyć przewodnik po stylu?

Mason: Chciałbym mieć głębsze zrozumienie tego, jak działają wszystkie nasze produkty od samego początku. Na przykład dzielimy się działaniem naszego odpowiedniego produktu podczas naszego cotygodniowego spotkania poświęconego krytyce projektowej, więc wiem, jak SendRoll (nasz produkt do przekierowywania poczty e-mail) działa na powierzchni, ale nie mam głębokiej wiedzy o SendRoll, którą robi jego projektant. Myślę, że dopracowane zrozumienie produktu zdecydowanie pomaga w pracy nad przewodnikiem po stylu, ponieważ dzięki temu lepiej rozumiem wszystkie potencjalne przypadki użycia.

Arya: Jaki jest zatem najlepszy sposób na osiągnięcie wspólnego zrozumienia procesu projektanta i jego produktu?

Mason: Mimo że naprawdę koncentrujemy się na wysyłce naszych produktów, dzielimy się naszym procesem projektowym podczas cotygodniowego spotkania poświęconego krytyce projektowania. Myślę, że możemy być lepsi w zamykaniu pętli po każdym spotkaniu - w jaki sposób projektant uwzględnił informacje zwrotne ze spotkania? Gdy produkt zostanie wysłany i użyty przez naszych reklamodawców, możemy również udostępnić sposób, w jaki reklamodawcy korzystają z produktów na podstawie danych analitycznych.

Arya: Czy były jakieś zasoby, o których wspominałeś podczas pracy nad tym projektem?

Mason: Czytałem Atomic Design autorstwa Brada Frosta, szukałem informacji w Internecie i rozmawiałem z innymi projektantami UX na MeetUps. Jeśli uważasz, że dana firma stosuje dobre wzornictwo, jest całkiem prawdopodobne, że rozmawiała o swoim przewodniku po stylu gdzieś w Internecie.

Arya: Jaki jest status naszego przewodnika po stylu?

Mason: Przechwyciłem i ponownie przejrzałem wszystkie elementy interfejsu użytkownika, których używamy w naszych różnych produktach, i pogrupowałem je w podstawy, komponenty, wzory i strony, które będą służyć jako źródło prawdy dla naszych projektów interfejsu użytkownika.

Możesz sprawdzić podstawowe i komponentowe elementy interfejsu użytkownika na Dribbble. Jeśli znasz Atomic Design, pogrupowałem poziomy „atom” i „cząsteczka” w coś, co nazywam „komponentami”. Na przykład połączenie tytułu formularza i danych wejściowych ułatwia innym projektantom łatwe kopiowanie wypełnionego formularza pole.

Dziękuje za przeczytanie!

Podczas opracowywania naszego przewodnika po stylach zwróć uwagę na nadchodzące tematy:

  • Jak struktura interfejsu użytkownika upraszcza współpracę
  • Opracowywanie nowych arkuszy stylów opartych na frameworku interfejsu użytkownika
  • Jak zbudować stronę internetową Style Guide
  • Podróż do znalezienia naszego głosu i tonu