Dlaczego startupy potrzebują przewodnika po stylach

Nawet dla doświadczonego projektanta stworzenie nowego przewodnika stylu dla danego produktu jest trudne — istnieje wiele możliwych kierunków projektowania, a proces może szybko stać się przytłaczający. Życie w startupie jest gorączkowe, szybkie i pełne frazesów, takich jak „idealne jest wrogiem ukończenia”, „poruszaj się szybko i niszcz rzeczy” lub „uruchom teraz, napraw później”.

Wymyślenie przewodnika po stylu pod takimi hasłami i zmiennymi priorytetami jest wyzwaniem, ale jest koniecznością, jeśli projekt produktu ma odnieść sukces na dłuższą metę.

W ostatnich latach wiele słyszeliśmy o systemach projektowania, przewodnikach stylów, bibliotekach wzorców i projektowaniu atomowym. Chociaż te narzędzia są bardzo przydatne, używanie ich może wydawać się przesadą, gdy chcesz utworzyć tylko kilka ekranów dla MVP lub zademonstrować aplikację. Jednak posiadanie przewodnika po stylach nie tylko ogólnie poprawi proces projektowania, ale sprawi, że Twoja aplikacja będzie bardziej solidna i spójna.

Porozmawiajmy najpierw o głównych zaletach przewodnika po stylu, a następnie dotknijmy trudnego środowiska startupowego. Na koniec omówimy, jak przewodnik po stylu zawsze ewoluuje jako żywy dokument.

Pięć najważniejszych powodów, dla których przewodnik po stylu to dobry pomysł

1. Przewodnik po stylach sprawia, że ​​projekty są konkretne i wyraźne

Jako samotny projektant w startupie — co często ma miejsce — nie ma wielu okazji do przeglądania i kwestionowania decyzji projektowych podjętych przez innych członków zespołu. Chociaż wszyscy mogą współpracować, projekty niekoniecznie są udostępniane innym. Oznacza to, że weryfikację ostatecznych projektów zajmuje tylko jedna osoba.

Przewodnik po stylu zapewni startupowi wskazówki i dokumentację do odniesienia. Będzie to wyzwaniem dla niektórych wyborów projektowych dokonanych przez projektanta lub zespół, ponieważ będą one musiały zostać zweryfikowane w globalnym kontekście aplikacji. Zaprojektowanie komponentu UI, ponieważ działa dobrze na jednym ekranie, nie będzie go ograniczać. Dobrze przemyślany projekt powinien rozwiązać pojedynczy problem projektowy w jednej sytuacji, a także problem powszechny, który pojawia się na innych ekranach Twojej aplikacji.

Przewodnik po stylu sprawia, że ​​ogólny styl projektowania, wytyczne dotyczące marki, specyfikacje i zasady są dostępne dla wszystkich w Twojej firmie. To tylko jedno kliknięcie. Mogą przejść do adresu URL, aby łatwo uzyskać dostęp do przewodnika stylu online lub pobrać plik PDF. Projektowanie staje się zadaniem wszystkich — nie jest już wyłączną odpowiedzialnością zespołu projektowego. To rozsądne podejście, które poprawi interfejs użytkownika Twojego produktu.

2. Przewodnik po stylach sprawia, że ​​Twój projekt jest bardziej spójny

Zapewnia słownik rodzajów dla języka projektowania interfejsu użytkownika. Możesz użyć tej samej terminologii, gdy chcesz przekazać coś, co już wyraziłeś. Wyobraź sobie, że mielibyśmy nieco inne słowa, aby wyrazić to samo:

1. "Pada deszcz; Potrzebuję parasola”.
2. „Pada, potrzebuję parasola”
3. „pada deszcz, potrzebuję mojej parasolki”

Może sprawić, że język stanie się poetycki, ale trudny do zrozumienia. Zasadniczo jest to ten sam pomysł z interfejsem użytkownika witryny lub aplikacji. Aby ułatwić korzystanie, nowe „słowo” należy wymyślać tylko wtedy, gdy naprawdę tworzysz coś nowego. W ten sposób obowiązuje cię ścisła zasada, która mówi: „Tylko komponenty, które wielokrotnie rozwiązują problem projektowy w całym produkcie, są dozwolone w produkcie, a następnie w przewodniku stylistycznym”.

Spójność sprawia, że ​​Twój produkt jest bardziej przyjazny dla użytkownika; wysoce użyteczny produkt może przełożyć się na większe zaangażowanie i sprzedaż.

3. Ponowne użycie tych samych komponentów systemu ułatwia korzystanie z aplikacji

Podobnie jak w przykładzie językowym, kluczem jest spójność. Gdy każdy komponent zostanie zrozumiany przez użytkownika, użyty ponownie w innym kontekście, ludzie będą już zaznajomieni z jego zachowaniem. Jeśli chodzi o interakcje z użytkownikiem, ta spójność poprawia ogólną użyteczność produktu.

Praca z systemem projektowania opartym na komponentach pozwala zaoszczędzić pieniądze, a także ułatwia aktualizację produktu. Jeśli w określonej sytuacji wystąpi problem z użytecznością składnika, można go naprawić raz, a wszystkie inne potencjalne problemy z tym składnikiem również zostaną zaktualizowane.

4. Przewodnik po stylach przyspiesza rozwój Twojej aplikacji na dłuższą metę

Kiedy Twój zespół opracowuje wspólny komponent ekranu, opracowuje rozwiązanie, którego będzie używał również w innych miejscach. Oszczędza to czas programowania — dużo z tego. Gdy Twoja firma się skaluje, może to oznaczać zaoszczędzenie nawet 10-krotności roboczogodzin wymaganych do zbudowania nowego ekranu.

5. Przewodnik po stylu ułatwia wydajność produkcji i innowacje

Stworzenie przewodnika po stylu sprawia, że ​​projekty są bardziej przystępne i łatwo dostępne dla reszty firmy. Deweloperzy i projektanci mogą szybciej i łatwiej prototypować pomysł. Bootstrap jest często chwalony za ułatwienie programistom stworzenia działającego prototypu — Twój przewodnik po stylach służy temu samemu celowi. Stanowi on podstawę odniesienia dla nowego interfejsu użytkownika, który zostanie zbudowany przez programistów, bez konieczności wcześniejszego tworzenia ekranu przez zespół projektowy (nawet jeśli zespół projektowy powinien przeprowadzić kontrolę jakości ostatecznych ekranów).

Wyzwania startupu, przewodnik po stylu w Flux

Tworzenie systemu projektowania w środowisku startupowym nie jest tak liniowe, jak w przypadku bardziej dojrzałej firmy, w której są przyzwyczajeni do bardziej usprawnionego procesu. W bardziej tradycyjnej firmie zespół projektowy przeprowadza badania UX, pomysły i eksperymenty, a następnie opracowuje ostateczny przewodnik po stylu marki. Ten proces nie jest odpowiedni dla wszystkich firm. Startupy pracują w środowisku, w którym ich wizja i wymagania dotyczące produktu zawsze się zmieniają. Pracują z MVP (minimum viable products), niekompletnymi wersjami swoich aplikacji, które służą do testowania ich pomysłu i pokazania użytkownikom jego potencjału.

Jeśli chodzi o tworzenie przewodnika po stylu, może to stać się problemem.

W środowisku, które ciągle się rozwija, projektant zwykle ma problemy z stworzeniem przewodnika po stylu, który powinien być nieco „naprawiony”. Projektant może nie mieć czasu na dokładne przemyślenie wszystkich tworzonych komponentów, nawet jeśli nadal mogą one trafić do następnej wersji aplikacji. Facebook słynie z zamiany menu hamburgerów na nawigację po kartach, gdy trochę dojrzeli. Czy uważasz, że ktokolwiek umieścił tam menu hamburgerów na pierwszym miejscu, dodał je również do przewodnika po stylu na Facebooku?

Możesz nawet pomyśleć, że jeszcze nie czas na tworzenie przewodnika po stylu. Możesz zdawać sobie sprawę, że na dłuższą metę będziesz go potrzebować, ale w tej chwili ważniejsze jest tworzenie ekranów do testowania użyteczności aplikacji. Co więcej, będziesz potrzebować również stron marketingowych, aby promować swoją aplikację. Nagle Twój projekt musi nabrać tempa, a kiedy tworzysz ekrany, zaczynasz dostrzegać wartość posiadania przewodnika stylistycznego, który może zapewnić spójność Twoich projektów i marki firmy.

Problem polega na tym, że nie wiesz dokładnie, kiedy jest właściwy moment, aby zamienić elastyczność na stabilność. Musisz zdecydować, kiedy uruchomić przewodnik po stylach, a kiedy skupić się na tworzeniu ekranów. Optymalnym podejściem może być stworzenie przewodnika stylistycznego w tym samym czasie, w którym dostarczasz ekrany — w ten sposób możesz mieć to, co najlepsze z obu światów.

Zacznij od inspiracji UI

Dobrym sposobem na rozpoczęcie, zwłaszcza jeśli nie jesteś projektantem, jest zebranie przykładów stylów projektowania, które Ci się podobają, a co ważniejsze, na co Twoim zdaniem zareagują użytkownicy. Zbierz jak najwięcej przykładów i umieść je w folderze/tablicy InVision/tablicy Nice/itd. Mogą być używane jako odniesienie i inspiracja wraz z Twoją wrażliwością projektową. Możesz później zbudować na nich bibliotekę wzorów.

Na przykład, kiedy pracowałem nad stylem dla firmy promującej artystów z branży rozrywkowej, zastanawialiśmy się, czy jasne czy ciemne tło będzie miało większy wpływ na naszych użytkowników. Przejrzałem setki różnych stron internetowych poświęconych gram/filmom/produkcjom wizualnym, aby zobaczyć, jak używają ciemnego i jasnego tła.

Zrobiłem arkusz referencyjny, w którym wyróżniłem najczęstsze wzory. Jednym ze zidentyfikowanych przeze mnie wzorców było to, że firmy z tej branży zwykle używały ciemniejszego tła podczas prezentowania swoich produktów, ale używały białego tła w swoich działaniach marketingowych, handlu elektronicznym i sklepach.

Nie musisz zagłębiać się tak głęboko, ale zauważyłem, że wizualne odniesienia pomagają nie tylko w tworzeniu przewodnika po stylach, ale także w pamiętaniu niektórych przypadków użycia, dla których możesz potrzebować zaprojektować. Gdy poczujesz się dobrze z zebranymi referencjami, możesz rozpocząć pracę nad projektem wizualnym.

Zaprojektuj stałe komponenty interfejsu użytkownika

Pracując w startupach trudniej jest tworzyć komponenty niż strony – przynajmniej na początku. Kiedy projektujesz stronę, często masz pomysł na to, jak będzie używana. Nie musi tak być w przypadku projektowania komponentu. Próbujesz zaprojektować dla konkretnego przypadku użycia, ale chcesz, aby był częścią uniwersalnego systemu projektowania i musisz podejść do tego w ten sposób. Na przykład możesz chcieć utworzyć komponent nawigacji podrzędnej z trzema przyciskami. Możesz również potrzebować go do pracy z czterema, pięcioma lub dziesięcioma przyciskami, a także będzie musiał działać na telefonie komórkowym, tablecie i komputerze stacjonarnym. Musisz myśleć z wyprzedzeniem.

Potrzebujesz pewnego poziomu trwałości lub mocy w komponencie. Typowe komponenty nie powinny się często zmieniać i muszą nadawać się do wielokrotnego użytku w wielu miejscach produktu. Na przykład, jeśli interesuje Cię tylko aplikacja na iOS, chcesz przetestować swój komponent na podstawie liczby opcji lub długości treści, niekoniecznie rozmiaru ekranu. Chodzi o to, że jeśli jest to wykonalne w interfejsie użytkownika w wielu miejscach w twojej aplikacji, to wiesz, że jest to komponent, który może być częścią twojego przewodnika po stylach.

Startup musi zaczynać praktycznie od zera, a potem działać szybko. Twój szef może chcieć zaprojektować ekran do końca dnia. Oznacza to, że nie możesz tak naprawdę opracować całego przewodnika po stylach, a następnie wymyślić ekran. Co gorsza, możesz projektować przewodnik stylu z komponentami, które nigdy nie ujrzą światła dziennego, ponieważ zmieniła się wizja firmy. Jak mówią, lepiej wysłać teraz.

Stworzenie świetnego przewodnika po stylach wymaga czasu, a ponieważ stanie się on podstawą Twojego systemu projektowania, chcesz zrobić to dobrze. W środowisku startupowym musisz pracować nad swoim stylem ze wszystkim w tandemie.

Przewodnik po stylach jako żywy dokument

Powinieneś myśleć o swoim przewodniku po stylach jako o pracy w toku. Podobnie jak startup opracowujący swoją strategię, tak samo będziesz w trakcie opracowywania swojego przewodnika po stylu. Będziesz go edytować i dostosowywać z czasem, aż stanie się podstawą Twojego interfejsu użytkownika. Jednym z przydatnych podejść jest rozpoczęcie pierwszej makiety w tym samym czasie, w którym zaczynasz swój przewodnik po stylach. Otwórz dwa pliki swoim ulubionym oprogramowaniem (w moim przypadku Sketch); jeden o nazwie page name , a drugi przewodnik po styleguide . Podczas pracy nad projektem ekranu możesz zacząć wprowadzać do swojego przewodnika stylu elementy, z których składa się Twój projekt.

Gdy zaczniesz robić więcej z nich, wcześnie zauważysz, że niektóre komponenty są głównymi kandydatami do włączenia do przewodnika po stylach. Na przykład, jeśli zdecydowałeś się na styl ikon, wszystkie Twoje ikony mogą od razu znaleźć się w przewodniku po stylach.

Zwykle tworzę sekcję o nazwie „Ikony zrobione do tej pory”. Jeśli w pewnym momencie ktoś potrzebuje ikony, musi najpierw przejrzeć tę sekcję przed utworzeniem nowej.

Inne oczywiste kwestie do rozważenia to kolory, przyciski, selektory, tytuły, nagłówki, tekst główny itp. Jeśli używasz stylu specjalnie do celów marketingowych, możesz rozważyć umieszczenie go w przewodniku po stylach i odpowiednie oznaczenie. W porządku, jeśli nie jesteś całkowicie zdecydowany na konkretny przedmiot. Możesz udoskonalić elementy interfejsu użytkownika w systemie projektowania później, gdy nadarzy się okazja, i odpowiednio zaktualizować przewodnik. Nie zapominaj, że przewodnik po stylach jest żywym dokumentem , zwłaszcza w startupie.

W końcu, kiedy zacznę umieszczać układy w przewodniku, wiem, że zaczynam dochodzić do punktu, w którym wszystkie elementy powinny być blisko stanu końcowego. Ta część wyznacza punkt zwrotny w procesie tworzenia przewodnika po stylach — teraz możesz świętować! Dobrym sposobem na uczczenie takiego kamienia milowego jest stworzenie logo lub ikony (rozważ jej nazwanie) dla wersji 1.0 przewodnika po stylu.

Niektórzy posuwają się nawet do drukowania logo/ikony jako naklejki, więc zespół ma coś w rodzaju trofeum. Jest to również punkt, w którym zwykle wracam do bardziej tradycyjnego sposobu pracy z przewodnikiem, otwierając najpierw ten przewodnik po stylach, a następnie tworząc nowy plik dla dowolnego interfejsu, który należy zrobić.

Wniosek

Jako projektant, tworząc przewodnik stylu tak wcześnie, jak to możliwe, upewniasz się, że Twój startup przestrzega wyższych standardów jakości. Może to być trudne, ale jest warte wysiłku. Solidny, wszechstronny przewodnik po stylach nie tylko pomoże Ci uzyskać lepszy produkt, ale także pomoże obniżyć koszty rozwoju.

Istnieje sposób, aby to się stało nawet w dynamicznym środowisku, w którym podejmowane są szybkie decyzje, a czasami projekty muszą się szybko zmieniać. Mamy nadzieję, że opisany powyżej proces pomoże projektantom w każdym startupie poradzić sobie z wyzwaniami złożoności i szybkości, jednocześnie tworząc solidny przewodnik po stylu z korzyścią dla produktu.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika