rwd

Od kilku już lat słyszymy, że kolejny rok będzie rokiem mobile. Nie inaczej prezentuje się rok 2014. Coraz więcej naszych urządzeń mobilnych staje się pełnoprawnymi komputerami osobistymi, a co za tym idzie rosnąca liczba osób dokonuje zakupów właśnie za ich pomocą.

To urządzenia mobilne dyktują aktualnie, w jaki sposób projektowane są serwisy e-commerce, bo już niedługo to właśnie na nich będzie realizowanych większość transakcji on-line. Triumfy święci też coraz bardziej popularna technologia RWD. Nie powinien dziwić więc fakt, że poniżej prezentowane trendy w projektowaniu, w dużej mierze mają na celu zapewnienie jeszcze lepszego mobile experience w sklepach internetowych. 

1. Mobile first i RWD

Serwis e-commerce powinien dopasować się do potrzeb użytkownika, nie odwrotnie. Dlatego tak ważne jest, aby wygląd sklepu dostosowywał się do ekranu urządzenia, na jakim jest wyświetlany. Mobilny boom spowodował, że zasada mobile first wykorzystywana w technologii Responsive Web Design z powodzeniem może być uznawana za wiodący obecnie trend w projektowaniu sklepów internetowych.

RWD

Mimo, że wśród polskich użytkowników inteligentnych telefonów zakupy przez smartfona nie cieszą się aż taką popularnością, jak np. w USA, możemy śmiało założyć, że niedługo będą. Już teraz niektóre z zagranicznych witryn e-commerce raportują, że 50% ich ruchu pochodzi z urządzeń mobilnych. Co więcej, szacunki przewidują, że do 2017 roku tylko 20% wyszukiwań będzie pochodziło z urządzeń desktopowych i laptopów! Chyba nikogo nie stać na utratę 80% potencjalnego ruchu.

Nawet w polskich realiach, gdzie tego typu trendy są zwykle mniej lub bardziej tłumione przez nadal ograniczoną dostępność do nowych rozwiązań technologicznych, czy ciągły brak zaufania użytkowników do zakupów online, rok 2014 to najwyższy czas na wprowadzenie zmian. Każdy sklep, który do tej pory nie zainwestował w wersję mobile-friendly powinien zacząć działać, aby nie pozostać w desktopowym tyle.

Responsive Web Design to nie wszystko! Powoli okazuje się, że zasada mobile first przestaje kojarzyć się tylko z technologią RWD i wyrasta na ogólny paradygmat w projektowaniu serwisów internetowych. Coraz więcej nowatorskich rozwiązań w designie e-commerce sprowadza się do jeszcze większego „umobilnienia” internetu. Świetnym przykładem jest podejście Finger Friendly Interfaces aka Finger Friendly Design, które zakłada tworzenie wygodniejszych interfejsów do obsługi za pomocą palców. Przez to coraz rzadziej będziemy widzieć paski do przesuwania zawartości stron, natomiast buttony nawigacyjne czy klikalne linki będą większe i łatwiejsze w użyciu. Co ciekawsze, pojawiają się już próby tworzenia interfejsów, które będzie można łatwo obsłużyć podczas biegu czy w rękawiczkach, gdyż w takich warunkach często korzystamy z tych urządzeń.

2. Flat Design

Czasy, w których twórcy layoutów sklepów internetowych kreowali projekty prezentujące ogrom ich technologicznych i projektowych umiejętności dawno odeszły w niepamięć. Obecnie coraz mniej osób (nie tylko związanych z designem) jest zainteresowanych wymyślnymi dodatkami i przykuwającymi wzrok elementami. Bardziej popularne stają są przyjazne użytkownikowi interfejsy zgodne ze słynną zasadą głoszoną przez Steve’a Kruga – don’t make me think. Takie, które nie wymagają od użytkownika poświęcania czasu na rozgryzienie obsługi nawigacji serwisu, czy aplikacji. Sztandarowym przykładem takiego projektowania jest właśnie Flat Design.

RWD

Flat design może być traktowany jako wyrafinowany, a zarazem bardziej uniwersalny kuzyn minimalizmu. Głównym założeniem tego nurtu jest skupienie się na prostocie i wyrazistości stron kosztem skomplikowanych tekstur i wzorów oraz równoczesną likwidacją wszelkiego rodzaju cieni, gradientów, szumów i innych mieniących się elementów. Co więcej, w wielu projektach niweluje się elementy 3D rezygnując z skeumorfizmu jakże popularnego w ostatnich czasach szczególnie wśród produktów firmy z nadgryzionym jabłkiem. Płaskie projektowanie wytycza kompletnie nową, niepopularną dotąd drogę podkreślającą dwuwymiarowość ekranu w opozycji do modnej dotychczas, nieco markowanej grafiki trójwymiarowej.

Trend projektowania płaskiego bardzo mocno zamieszał w 2013 roku, czas jednak pokaże czy ten mocny impakt utrzyma się w tegorocznych projektach. Główną przyczyną rosnącej popularności tego rozwiązania było świetne dopasowanie go do galopującego wzrostu popularności wielofunkcyjnych urządzeń mobilnych i wspomnianej wcześniej technologii RWD. Płaskie projektowanie pozwala tworzyć lżejsze i bardziej przejrzyste interfejsy, co jest szczególnie ważne na małych ekranach. Biorąc jednak pod uwagę głosy krytyczne wobec flat design’u, warto zauważyć, że orientują się one zazwyczaj wokół powtarzalności projektów. Nie da się ukryć, że największy walor płaskiego projektowania, jakim jest minimalizm formy, może okazać się jego największą bolączką. Ewentualna dominacja flat design’u może spowodować, że Internet zaleje fala bardzo podobnych do siebie serwisów, odróżniających się od siebie tylko szczegółami. To już jednak kwestia nośności samego trendu i kreatywności web designerów.

3. Parallax i Infinite Scrolling

Od czasów rewolucji Web 2.0 nie mieliśmy do czynienia z tak dużą zmianą w zakresie user-experience, jaką zapewniło nam wprowadzenie nowych technologii przewijania stron. Nowatorskie rozwiązania o wiele bardziej angażują użytkowników, zapewniając im poczucie rzeczywistego ruchu na stronie. Olśniewające animacje, naturalność w nawigacji (szczególnie na urządzeniach mobilnych) oraz możliwość budowania interesujących opowieści w ramach jednej strony, to tylko niektóre z zalet innowacyjnych metod scrollowania. Poniżej wyszczególniłem dwa z nich, które w 2014 będą pojawiać się częściej przy okazji nowych odsłon serwisów, nie tylko e-commercowych.

Pierwsza technologia związana jest z terminem paralaksy, który występuje m.in. w meteorologii, astronomii czy fotografii i w humorystyczny sposób można go podsumować sformułowaniem „punkt widzenia zależy od punktu siedzenia”. Bardziej szczegółowo chodzi o efekt zmiany pozycji obserwowanego obiektu spowodowaną przesunięciem się obserwatora. W uproszczeniu, obiekty bliższe naszemu oku mają większą paralaksę, przez co pojawiają się i poruszają szybciej niż przedmioty w tle. Parallax scrolling to w najprostszym ujęciu technologia polegająca na poruszaniu się różnych elementów strony (w trakcie przewijania) w odmiennym tempie. Rozwiązanie to daje iluzję głębi. Dzięki relatywnie prostej zmianie w kodzie jedna warstwa porusza się szybciej od drugiej, przez co użytkownik ma wrażenie efektu 3D. Strony stworzone z wykorzystaniem parallax scrolling bardzo łatwo wykorzystać do przedstawienia użytkownikowi interaktywnej opowieści (zawierającej również elementy audio), która poprzez swoje efekty na długo zapadnie w jego pamięć lub po prostu sprzeda dany produkt. Niewątpliwym problemem tej technologii jest jej wydajność i optymalizacja pod urządzenia mobilne oraz zgodność z wymaganiami SEO.

Infinite scrolling funkcjonuje w sieci od kilku lat, niemniej dopiero w ubiegłym roku mamy do czynienia we wzrostem popularności tego rozwiązania. Zasadniczo technologia sprowadza się ciągłego i automatycznego doładowywania contentu wraz z przewijaniem strony w dół, eliminując tym samym konieczność paginacji. Głównymi zaletami tego rozwiązania są naturalne dostosowanie do urządzeń mobilnych, prostota przeglądania stron z wieloma wynikami i szybkość, w jakim są one załadowane. Pojawiają się również wady takie jak: zagubienie użytkownika (np. powracającego ze strony produktu), problem z dotarciem do stopki czy brak możliwości otwarcia konkretnej strony w paginacji. Niemniej jednak, najprawdopodobniej to ta technologia ma szansę na dłużej zagościć w różnego rodzaju witrynach e-commerce.

4. Personalizacja i konfiguratory produktów

W czasach rosnącej konkurencji na rynku e-commerce rośnie wiedza klientów, a co za tym idzie ich wymagania względem e-sprzedawców. Mając świadomość często bardzo wysokiego stopnia rywalizacji sklepów, użytkownicy słusznie są przekonani, że to sklep powinien zabiegać o ich względy i dostosowywać się do ich potrzeb. Oczekują, że jego oferta będzie wyjątkowa i jak najlepiej dopasowana do ich wymagań. Badania pokazują, że ok 74% konsumentów frustruje się, gdy oferta i reklamy na serwisach, które odwiedzają, nie odpowiadają ich zainteresowaniom. Dlatego też użytkownicy są coraz bardziej skłonni dzielić się swoimi danymi, kiedy znają konkretny powód ich zbierania, jakim jest dostosowanie oferty do ich upodobań.

Pionierem w personalizacji e-commerce ponad dekadę temu był Amazon, który już wtedy za pomocą skomplikowanych algorytmów starał się „matchować” klientów z produktami. W między czasie pojawiła się cała masa rozwiązań analizujących różnego typu dane w celu zbudowania jak najpełniejszego profilu konsumenta. Szczególnie w dobie popularności BIG DATA mamy do czynienia z wysypem różnego typu oprogramowania, które w sposób automatyczny, a co najważniejsze dynamiczny personalizuje doświadczenia odwiedzających stronę. Zanim jednak w pełni nauczymy się wykorzystywać potencjał BIG DATA, warto w najbliższym czasie zwrócić się ku metodom nieco mniej złożonym, a w skuteczny sposób mogącym podnieść nasz wskaźnik konwersji. Bazując tylko na podstawowych danych klienta jak imię, płeć czy sposób poruszania po stronie, możemy dotrzeć do klienta z przekazem, który o wiele bardziej będzie mu odpowiadał. Jeżeli dodamy do tego dynamicznie tworzone treści i mądrze zaprojektowane CTA, może okazać się, że nie potrzebne nam będą tony dodatkowych danych, aby klienci byli bardziej zadowoleni.

Kolejnym przykładem dostosowania oferty do oczekiwań klientów są konfiguratory produktów, które pozwalają użytkownikom w prosty sposób stworzyć własną ofertę zgodną z ich upodobaniami. W tym przypadku nie ma konieczności analizowania indywidualnych preferencji klienta. Wystarczy udostępnić mu odpowiednie narzędzie, a on sam zdecyduje, jakiego produktu potrzebuje. Każdy z nas woli posiadać unikalny produkt, co więcej zadowolenie wzrasta, gdy jest to coś stworzonego przez nas samych. Rozwiązania tego typu z jednej strony angażują użytkowników, potęgując ich pozytywne emocje względem naszej marki. Z drugiej strony zwiększają sprzedaż, gdyż o wiele trudniej jest zrezygnować z zakupu, gdy widzimy nasze dzieło.

5. Nowe formy nawigacji

Coraz większa ilość e-sklepów odchodzi od tradycyjnych form nawigacji w kierunku bardziej kreatywnych rozwiązań. Z jednej strony jest to wynik zarówno mobilnej „presji”, która naciska na webmasterów, jak i oczekiwań klientów wymagających jeszcze łatwiejszej obsługi serwisów. Z drugiej strony jest to efekt duetu HTML5 i CSS3 dającego dostęp do niedostępnych dotąd możliwości kreowania nowatorskich rozwiązań. Poniżej prezentuje dwa trendy, które w 2014 niewątpliwie wpłyną na niejeden serwis e-commerce.

Nawigacja zdjęciami to w ostatnim czasie zyskująca na popularności tendencja, będąca następstwem mody na serwisy pokroju Pinterest. Na ich wzór użytkownicy mają do dyspozycji wygodne w przeglądaniu kolumny z ofertą, dzięki którym zakupy są jeszcze bardziej zwizualizowane, a windowshopping nareszcie jest dostępny również w sklepach on-line. Generalnie w ostatnim czasie nietrudno nie zauważyć swoistego boomu na używanie bardzo dużych, świetnej jakości grafik nie tylko w kontekście prezentacji produktu. Otwiera to nowe perspektywy w zakresie designu serwisu, jak również daje użytkownikom możliwość głębszego spojrzenia na detale. Dodatkowo nawigacja poprzez zdjęcia oprócz waloru estetycznego świetnie dopasowuje się do realiów mobilnych i wspomnianego już podejścia Finger Friendly UI.

Ruchoma belka nawigacyjna to często pokaz kunsztu webmastera biegle posługującego się HTML5 i CSS3, z wykorzystaniem frameworka jQuery. Dzięki nim twórca strony ma możliwość zmiany sposobu, w jaki działa nawigacja w serwisie, w znaczącym stopniu upraszczając użytkownikowi poruszanie się po nim. Na pierwszy rzut oka podróżująca za użytkownikiem belka nawigacyjna nie wydaje się być niczym niesamowitym, ma to jednak niewiarygodne znaczenie w kontekście utrzymania zaangażowania użytkownika. Abstrahując od samej funkcjonalności, tego typu nawigacja odznacza się również wysokimi walorami estetycznymi.

Autorem tekstu jest Piotr Chwiedziewiczbest.net. Jest to założony w 2000 roku software house specjalizujący się w realizacjach klasy enterprise z zakresu e-commerce i portali korporacyjnych. W ramach tych systemów tworzone są zaawansowane integracje z zewnętrznym oprogramowaniem oraz dedykowane konfiguratory produktów. Firma bazuje na autorskich platformach Extreme Commerce i Extreme CMS, które wdrożyła m.in. dla Poczty Polskiej, Raben Group, Euro Florist, Chocolissimo, Pyramid International.