Sklep internetowy Shoper

Jak wygląda projektowanie panelu dla sklepów internetowych Shoper? Na pytania odpowiada Rafał Bochniak, nasz UI Designer.

 

Niemal rok po nowej identyfikacji marki, wprowadzamy kolejną ważną zmianę na platformie sklepów internetowych Shoper – odmieniony panel administracyjny. Nowy panel, nad którym pracujemy, jest naturalnym krokiem naprzód – to konieczna inwestycja, dzięki której w przyszłości będziemy mogli nie tylko przyspieszyć z aktualizacjami, ale i dostarczyć funkcje, które do tej pory w ogóle nie były możliwe.

 

Jak wygląda praca nad projektowaniem nowego panelu dla sklepów internetowych Shoper od strony UI? Od czego wszystko w przypadku Shopera się zaczęło?

Rafał Bochniak, UI Designer w Shoper: Zacznę jeszcze wcześniej, bo od wyjaśnienia, czym właściwie jest UI, czyli User Interface. Bardzo często jest on mylony z UX – User Experience. Można powiedzieć, że UI jest składową UX i w szalonym uproszczeniu jeśli UX jest funkcjonalnym szkicem panelu, tak UI jest już jego wizualnym odwzorowaniem. Doprecyzowaniem z naciskiem na szczegółowość poszczególnych elementów i gotowym projektem do oddania front-developerom. Najczęściej panele administracyjne oraz inne cyfrowe produkty są powiązane wizualnie z wizerunkiem firmy (tzw. branding). W momencie, gdy rozpoczynałem pracę UI Designera w Shoper, tego jeszcze nie było, dlatego był to świetny moment, żeby wszystko przemyśleć i uspójnić. Cofnęliśmy się kilka kroków i postanowiliśmy stworzyć branding, który określa, jak ma wyglądać sama marka Shoper oraz jak mają wyglądać produkty i usługi, które ona oferuje. Branding dodatkowo jako nadrzędny zbiór zasad ma regulować użycie kolorów, fontów, znaków graficznych, rysunków, zdjęć oraz innych typowo BTL-owych elementów.

 

 

OK, mamy branding, co dalej?

Naturalnym krokiem po brandingu, było stworzenie Design Systemu, który wykorzystując jego części, doprecyzowuje elementy typowe dla webu / mobile’u / aplikacji, tj. inputy, dropdowny, modele, scrolle itp. – jednym słowem wszystkie te klocki, z których można zbudować każdy interface webowy, każdą stroną internetową czy aplikację. Oczywiście, żeby taki design system miał sens, trzeba go tworzyć w oparciu o gotowe widoki panelu administracyjnego, strony firmowej czy innych cyfrowych produktów. Najlepiej jeśli są to najbardziej rozbudowane widoki, bo wtedy mamy pewność, że nie trafi się przypadek, którego nie przewidzieliśmy. W ten sposób możemy zauważyć ewentualne wady i tworząc kolejne iteracje, modyfikować system tak, by ostatecznie odpowiadał naszym potrzebom i spełniał UX-owe założenia. Tyle w teorii, bo oczywiście przy tak skomplikowanym systemie jak nasz panel administracyjny, praktycznie każdy widok wymaga zastanowienia, poruszania się w labiryncie ograniczeń i chodzenia na kompromisy, co powodowało, że stworzyliśmy stosunkowo dużo „klocków Lego” o różnych kształtach, z których potem złożyliśmy bogaty Design System.

 

Jak wyglądało przygotowanie do zmian? Ile zajęło tworzenie nowego panelu?

Samo wypracowanie głównych elementów Design Systemu trwało kilka tygodni, ale to żywa struktura podlegająca nieustannie drobnym zmianom, przez co projekt trwał wiele miesięcy. Zmieniając codziennie drobiazgi typu grubość ikon lub ich rozmiar, albo jakiś element tła, ostatecznie po dziesiątkach iteracji, cofnięć i zmian otrzymaliśmy coś, co diametralnie różniło się od tej początkowej, zaakceptowanej już wersji.

 

 

Sklep internetowy Shoper

 

Co było najtrudniejsze w realizacji takiego projektu?

Zdecydowanie sam początek pracy nad panelem. Określenie najważniejszych zasad zachowania interface’u. Wyobraź sobie, że masz tylko kolory i fonty, pracujesz dopiero miesiąc lub dwa w firmie i musisz przewidzieć wygląd każdego najdrobniejszego elementu, który występuje setki razy w panelu i drugie tyle na stronie produktowej. To trochę wróżenie z fusów, ale też praca w oparciu o doświadczenie przy podobnych projektach. Pewne rzeczy są niezmienne i uniwersalne, a w przypadku innych czasem trzeba rzucić kości i zobaczyć, co wypadnie.

 

Dobrze, a na ile to, jak zmienia się panel, jest też np. wynikiem śledzenia światowych trendów?

Staraliśmy się oczywiście, żeby projekt był oparty na najnowszych trendach, jednak nie było to naszym nadrzędnym celem. Musimy mieć na uwadze, że trendy zazwyczaj dotyczą bardzo wąskich grup wiekowych, a z naszego panelu muszą korzystać tak ludzi młodzi, jak i w wieku 50+. Dodatkowo trendy nie zawsze spełniają UX-owe założenia, tj. są ładne i kuszące, jeśli są w twoim typie, ale nieczytelne bądź niezrozumiałe dla ludzi, dla których nie mają znaczenia. Czasem duży przycisk, gruby nagłówek lub duży kontrast mogą nie być najładniejsze, ale mamy pewność, że każdy je zobaczy, przeczyta i właściwie zrozumie. Tak więc staraliśmy się wypośrodkować rozmaite i sensowne naszym zdaniem trendy, ale i użyteczność. Panel sklepu internetowego w końcu nie ma krzyczeć, że jest ładny i odwracać uwagę, ale ma być transparentny dla usera.

 

Sklep internetowy Shoper

 

Sklep internetowy Shoper

 

Na co ty zwracałeś szczególnie uwagę podczas projektowania? Czym nowy panel według ciebie musiał się charakteryzować?

Nie dam rady chyba powiedzieć o jakiejś szczególnej uwadze. Wszystko jest w nim równie ważne, to synergia mikroelementów. Niewątpliwie najważniejsze w projektowaniu UI jest, aby nie zakłócać założeń użyteczności. Jeśli przycisk jest po prawej stronie na górze, to jest w tym jakiś sens (lub powinien być), który musisz znać. Jeśli uważasz, że nie powinien tam się znaleźć i chcesz go przenieść trochę niżej ,bo twoim zdaniem grafika nabierze oddechu i czytelności, musisz przedyskutować tę kwestię z UX-em, bo być może nie znasz szerszego kontekstu. Czasem też, gdy makiety są projektowane przez UX-ów, musisz wiedzieć, co odpowiednio graficznie wybić, a co bardziej schować, bo makieta jest jedynie poglądowa i nie uwzględnia wielu problemów wizualnych, które pojawiają się, gdy naniesiesz konkretne kolory, elementy i fonty o określonej wielkości z Design Systemu. Ważne jest też, by projektując jakiś element zadać sobie pytanie co będzie, gdy wokół pojawią się inne, bądź te same elementy. Inaczej percypujesz jeden przycisk, a inaczej, gdy jest w towarzystwie trzech. Trzeba mieć także wyczucie na zrozumienie zamysłów UX-a, dlatego praca UI i UX w moim odczuciu przypomina trochę pracę arta i copywritera w agencji reklamowej. Nowy panel musiał się charakteryzować przejrzystością i czytelnością. Design musiał być świeży, ale niezbyt krzykliwy i męczący.

 

Przeczytaj więcej:
Poznaj lepiej nowy panel Shoper
Chcesz mieć ładny sklep? Sprawdź 5 trendów ze świata web designu