Dołącz do czytelników
Brak wyników

Technologia

8 maja 2020

Jak stworzyć skuteczny panel sklepu internetowego?

21

Jak wygląda projektowanie panelu dla sklepów internetowych? Z Rafałem Bochniakiem, UI Designer w Shoper, rozmawia Karolina Bartnik-Kura.

Karolina Bartnik-Kura: Jak wyglądała 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ę wcześniej  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, to 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ę w Shoperze, nie istniał język wizualny ani dla firmy, ani produktów, ani nic nadrzędnego, co mogłoby wszystko powiązać. Dlatego był to świetny moment, żeby wszystko przemyśleć i ujednolicić. 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.

KB: Dobrze, miałeś branding, co dalej?

RB: 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.

KB: Jak przygotowałeś się na zmiany? Ile zajęło tworzenie nowego panelu?

RB: 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.

KB: Co było najtrudniejsze w realizacji takiego projektu?

RB: 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...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 wydań magazynu "E-commerce Polska"
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ...i wiele więcej!
Sprawdź

Przypisy