najlepsze sklepy internetowe – inspiracje

najpopularniejsze trendy, nowoczesne, funkcjonalne i dopasowane do potrzeb, ranking sklepów ecommerce w najlepszym wydaniu
najlepsze_sklepy_internetowe_inspiracje

Najlepsze sklepy internetowe 2019 /cz.1/

W tym wpisie chcemy pokazać najlepsze sklepy internetowe (nasz ranking) na które natknęliśmy się przeglądając różnego typu branżowe portale i strony internetowe, galerie prac agencji interaktywnych z całego świata. Istnieje cała gama sklepów internetowych oderwanych od rzeczywistości, starających się podążać za trendami, przeładowanych animacjami i grafiką. W niektórych przypadkach jest to uzasadnione podejście, czasem można odnieść wrażenie przerostu formy nad treścią.

Poniżej prezentujemy kryteria jakie przyjęliśmy dla wyłonionych sklepów internetowych :

  • wysoki UX/UI sklepu internetowego,
  • łatwość nawigacji oraz dotarcia do produktu,
  • optymalizacja sklepu dla użytkownika (czas wczytania oraz szybkość ładowania podstron),
  • nowoczesny, czytelny design nieprzeładowany efektami typowa stylistyka minimal lub właśnie budujący wrażenie efektem i kolorem.

Bougessa

Sklep internetowy https://bouguessa.com cechuje płynność animacji elementów podczas przewijania, co czyni przebywanie na sklepie przyjemnym.
Dodatkowo sam layout jest czysty i przejrzysty, mimo długiej drugiej sekcji w której mamy tylko dwa zdjęcia, następnie kolejną wysoką sekcję z wideo w tle i dopiero kolejno produkty sklep budzi bardzo pozytywne wrażenia. W tej części warto również dać wyrazy uznania za użycie wideo – jest to bardzo dobra forma zachęcenia i prezentacji produktu, a tak żadko spotykana.

Podstrona : lista produktów gdzie w oryginalny sposób zaprezentowana została opcja filtrowania produktów w formie zdania z opcją wyboru dwóch pól / pola rozwijalnej listy select /

Podstrona : kolekcja – ciekawe rozwiązanie przewijania produktu / umieszczenie nawigacji na środku, które wbrew pozorom nie przeszkadza w odbiorze zdjęć /

Ports1961

Kolejnym przykładem sklepu internetowego który zajął drugie miejsce na naszej liście to Porst1961 – https://ports1961.com. Sklep bardzo czytelny z układem dwukolumnowym – w którym interesujące jest zestawienie sekcji strony głównej. Zamiast klasycznej listy produktów i baneru sklep Porst1961 prezentuje nam na start wideo (dostępne po kliknięciu w sekcję), następnie jedynie 4-cztery kafelki z kategoriami produktów i sekcje kolekcji zachęcające do poznania produktów.

sklep ports1961

Podstrona kolekcji wyposażona została w typowe slidery przewijane lewo-prawo, które do ogólnej koncepcji pasują. Choć brak wg. nas możliwości powiększenia oraz przewijania poprzez przeciągnięcie stanowi minus tej podstrony.

ports_kolekcje_sklepu

Karta produktu – tutaj ciekawym i bardzo użytecznym rozwiązaniem jest zatrzymanie kolumny tekstowej przy przewijaniu strony, czyli tak naprawdę scrollując kartę produktu przewijamy sekcję ze zdjęciami. Dodatkowo po najechaniu na miniaturę otrzymujemy zoom zdjęcia bez dodatkowego okna typu lightbox, brawo! – użytkownik zostaje na tym samym poziomie sklepu internetowego.

ports_karta_produktu_przewijana

Stan po najechaniu na miniaturę – lekki zoom.

ports_karta_produktu_powiekszenie_produktu

Bardzo dobrym pomysłem jest również zastosowany wysuwany panel po dodaniu produktu do koszyka z informacjami o jego statusie, szkoda jednak że zabrakło takiego rozwiązania po kliknięciu w guzik koszyku znajdujący się na górze strony.

ports_koszyk_zamowienie

Pandora Garden - strona internetowa w formie sklepu dla wybranej kolekcji

Przygotowana przez agencję Sorthvid strona Pandora Garden https://us.pandora.net/en/campaigns/pandora-garden (prezentująca produkty Pandora) będąca jednocześnie stroną wizerunkową jest ciekawym pomysłem na pokazanie kolekcji i produktów w formie animowanej strony z opcją wejścia do sklepu z odpowiednio przygotowanych sekcji – slajdów strony. To forma opowieści podczas której poznajemy produkty i kolekcje firmy (przewijając stronę ukazują nam się kolejne zdjęcia przesuwające się w różnym tempie, sekcje graficzne i sprytnie wplecione w nie produkty budujące klimat kolekcji Pandora Garden).

Po kliknięciu na produkt otrzymujemy w oknie lightbox jego prezentację / odzwierciedlenie karty produktu / ze zdjęciem na modelce, ceną i guzikiem ‘kup ‘kierującym do sklepu.

pandora_karta_produktu_w_lightbox

Dobrym pomysłem jest umieszczenie guzika ‘shop the collection’ na samej górze strony na ramce, który po kliknięciu skraca drogę poznania produktów do jednej sekcji prezentującej wszystkie produkty w jednym miejscu.

Kolejna sekcja prezentacji produktów podczas przewijania strony kolekcji Pandora Garden.

pandora_produkty

ETQ - sklep o ciekawej funkcjonalności

ETQ – https://www.etq-amsterdam.com to sklep typu budjący klimat prezentowaniem kolekcji już od strony głównej. ETQ posiada bardzo dobrą funkcjonalność oraz łatwą możliwość dotarcia do produktu. Pomimo że na stronie głównej nie posiadamy typowej listy kategorii produktów zaraz pod banerem gdzie zwykle ma to miejsce sklep broni się i nadaje nowego ciekawego spojrzenia – zainteresowanie produktem poprzez prezentację kolekcji już od pierwszych sekcji strony głównej.


Podstrona kolekcja. Po wejściu w wybraną kolekcję otrzymujemy konkretne produkty poprzedzone wysoką sekcją baneru ze zdjęciem z danej kolekcji by pokazać jak prezentuje się produkt. Choć i tutaj jest równie ciekawie gdyż zdjęcia produktów przeplatane są ze zdjęciami ‘live’ produktu. Jak nie trudno zauważyć produkty nie posiadają ani podpisów, ani cen w stanie przed najechaniem / stan jak prezentujemy poniżej /. Cały panel informacyjny dotyczący produktu jak cena, rozmiar, guzik kup schowany na pierwszym widoku – przy przewijaniu podstrony, pokazuje się on dopiero po najechaniu na konkretnych produkt.

ETQ wykonał również bardzo funkcjonalną opcję jaką jest możliwość przeglądania zdjęć produktu z tego właśnie poziomu listy produktów. Całość pokazywania informacji, przewijania jest bardzo płynna i miękka co czyni sklep atrakcyjnym również pod względem użytkowania.

etq_lista_produktow_sklepu

Karta produktu. Elegancka, prosta i przystępna jeżeli chodzi o czytelne rozłożenie i podział informacji. Po lewej duże zdjęcie produktu, po prawej dane techniczne, cena, guzik kup. Po przewinięciu prosto ale ciekawie rozwiązane przedstawienie produktów – kolejnych zdjęć. Cała podstrona zakończona informacjami których klient może potrzebować będąc w tym miejscu / na karcie produktu / oraz powiązanie produktu z produktami podobnymi.

Powiększenie produktu również pracuje dobrze na sklepie internetowym. Po kliknięciu z karty produktu na zdjęcie otrzymujemy dokładnie to po co kliknęliśmy – duże zdjęcie niczym nie przysłonięte, nie w formie lightboxa, nie na małym ekranie na środku, tylko tak jak potrzeba – duże zdjęcie które dodatkowo możemy za pomocą touchbara suwając góra dół po zdjęciu przybliżać i oddalać. W ‘tle’ po lewej stronie dostajemy opcje zmiany widoku zdjęcia.

Technicznie sklep stoi na bardzo wysokim poziomie wykonania począwszy od czytelności po animacje (zwiń-rozwiń, przesuwanie, przewijanie), które aż chce się oglądać. Układ niby prosty ale w konstrukcji i wykonaniu nie sztampowy, wręcz budący chęc poznania / wspomniane zdjęcia na karcie produktu, czy pomysł na zdjęcia produktu przeplatane zdjęciami ‘live’.

Olivia Des Cressonnieres

Sklep internetowych Olivia Des Cressonnieres w podobny sposób jak wykonał to na co postawiła Pandora, prezentację kolekcji. W odniesieniu do Pandory jest zdecydowanie mniej efektów, mniej wodotrysków, za to jest prościej i czytelniej, głównie dlatego że http://olivia-des-cressonnieres.com/ jest sklepem internetowych samym w sobie, a nie produktem / stroną wspomagającą sprzedaż / na potrzeby kolekcji co nie zmienia faktu odważnego postawienia w sklepie na budowanie już na start wrażenia wizualnego u użytkownika.

olivia-des-cressonnieres sklep

Samo rozwiązanie zastosowane na stronie głównej wymaga jeszcze dodatkowego komentarza. Rozwiązanie menu to podróż po sklepie wg. klucza kolekcji nie kategorii produktu. Wchodząc do kolekcji w dalszym ciągu jesteśmy w strefie budowania wrażenia zdjęciami, grafikami, animacjami by dopiero z tego miejsca dostać się do docelowego miejsca – produktu. Całość elementów jest dobrze podana, nic nie zaburza odbioru przekazu, wiemy gdzie jesteśmy, wiemy jak zmienić kolekcję. Jedyny minus to zbyt mało widoczne i przystępne guziki wejścia do produktu – sam napis shop the collection to za mało, idealnie gdyby sklep postawił również na aktywne kafle kierujące do tego samego miejsca. Na urządzeniach mobilnych guzik jest niestety słabo widoczny.

Po wejściu w konkretną kolekcję ( listę produktów ) otrzymujemy zbyt inwazyjne aczkolwiek na pierwszy raz przyjemnie budujące podstronę animacje oraz dobrze widoczne filtrowanie produktów po tagach : kolczyki, branselotki, nowości etc.. Samą listę produktu dobrze się przegląda, produkty są w formie kafelków na jednolitym tle z efektem po najechaniu – pokazaniem nazwy i ceny produktu. Co ważne całe kafelki są aktywne dla użytkownika, a to jeszcze niestety żadkość, często to nagłówek lub guzik ‘dodaj’ stanowią jedyne przejście do produktu co jest dużym minusem głównie w przypadku użytkownika mobilnego.

olivia-des-cressonnieres_lista_produktow

Karta produktu sklepu internetowego wymagać mogła by lekkiej poprawy o prezentację większego zdjęcia, brak również jak w przypadku wcześniejszych sklepów postawienia i w tym miejscu na dobre pokazanie produktu – animacje, powiększenia, miniatury kolejnych odsłon produktu.

Platforma sklepu internetowego - jaką wybrać ?

Istnieje wiele platform i rozwiązań pozwalających na stworzenie sklepu internetowego dopasowanego do naszych potrzeb. Kwestie wyboru platformy budowy sklepu w rozwiązaniach: dedykowanych, w chmurze, OpenSource, czy gotowych sklepach zostawimy na kolejny wpis.

Projektując sklep internetowy który miałby spełniać wszystkie wymagania jakościowe, techniczne i te od strony administracyjnej z pewnością musielibyśmy zamówić dedykowany sklep pisany od podstaw pod nasze oczekiwania, a to z kolei wiąże się z wysokimi kosztami oraz autorskim kodem, który wiąże nas z firmą developerską na lata.

Jeżeli jednak jak w tym rankingu sklepów internetowych stawiamy na design, nowoczesność, wysokiej jakości dopracowanie detali ze szczególnym zwróceniem uwagi na wersję responsywną sklepu (dla mniejszych ekranów urządzeń mobilnych) to zdecydowanie powinniśmy zainteresować się wdrożeniem sklepu na systemie cms wordpress z modułem sklepowym woocommerce, który posiada nieograniczone możliwości projektowegrafika nie jest ograniczona z góry narzuconym układem autora czy silniku sklepu – posiadamy pełną dowolność wdrożenia, rozbudowy o dodatkowe modułów wspierające sprzedaż on-line (np. newsletter, faktura online, płatności online, ustalenie kosztów przesyłki w przedziałach wagowych, obliczanie kosztów transportu względem odległości od magazynu, implementacja z programiami księgowymi np. Optima ). Dodatkowo jeżeli już znajdziemy płatne moduły Woocommerce są one w relatywnie niskich kosztach w stosunku do autorskich rozwiązań.

SEO optymalizacja sklepu

Techniczne zaniedbania SEO: Niestety sklepy z naszego rankingu wypadają bardzo słabo pod względem optymalizacji SEO. Głównie nie posiadają one zoptymalizowanych meta tytułów, opisów, zdjęcia nie posiadają znaczników alt nie wspominając o nagłówkach H1-H3.  Na pewno nie jest to wina samego sklepu, jego silniku, bardziej prawdopodobne jest to że autorzy nie postawili na SEO w tym przypadku.

Treść i widoczność sklepu : Drugi ważnym aspektem wpływającym na gorsze SEO w przypadku podanych sklepów jest bardzo mała ilość treści ze względu na podejście graficzne i minimalistyczne. Tego typu sklepy (minimalistyczne) trudniej zdobywają wysokie pozycje gdyż to merytoryczna treść i frazy kluczowe w niej zawarte (w sposób naturalny) budują zasięg i widoczność w wyszukiwarce, której w podanych przykładach nie ma.

Istnieją sposoby na obejście i połączenie procesu tworzenia sklepu w stylistyce minimal wraz z bardzo dobrą widocznością ale jest to dłuższy i bardziej czasochłonny proces włączający działania pozycjonerskie na stałe do naszego miesięcznego budżetu. Dochodzi do tego obowiązkowa budowa podstron typu ‘Landing page’ oraz bloga zorientowanego na zdobywanie ruchu z wyszukiwarki. Ruch pozyskiwany jest z wpisów na frazy złożone ( kilku wrazowe tzw. longtailowe ).

Mateusz - planuje i kreuje. Odpowiedzialny za cały zespół Hauerpower oraz główny kontakt z klientem. Specjalizuje się w SEO oraz UX.

All author posts
5 komentarzy
  • Odpowiedz Łukasz

    Czerwiec 7, 2019, 8:25 pm

    Sam korzystam z niektórych 🙂

  • Odpowiedz sigma

    Listopad 12, 2019, 2:10 pm

    Fajne zestawienie i porównanie sklepów pod względem graficznym, wizualnym. Ale z takimi sklepami ciężko jest się wybić. Trzeba naprawdę dobrze zaplanować działania marketingowe, aby dotrzeć do grupy docelowej i zachęcić potencjalnych odbiorców do odwiedzin na stronie. 😉

  • Odpowiedz Marek F.R.

    Listopad 22, 2019, 7:46 am

    Czy można zrobić coś zbliżonego jakością i wyglądem na platformie SaaS? Niektóre z takich platform nie pozwalają nawet edytować tagów h1 bez udziału “programisty”. A jeżeli stawiać sklep samemu, to co jest lepszym rozwiązaniem Presta czy WooCommerce?

    • Odpowiedz Mateusz

      Listopad 22, 2019, 9:00 am

      zgadza się niektóre platformy nie mają dobrego SEO, presta jest ok chociaż tu proste z pozoru zmiany wymagać mogą dużych modyfikacji od strony kodu, woocommerce natomiast to pełna elastyczność w kodowaniu, wyglądzie oraz cała paleta rozwiązań usprawniających funkcjonowanie sklepu, połączenia z wszystkimi możliwymi rozwiązaniami ecommerce dostępnymi na rynku : payU, paypal, integracje z allegro, olx etc.

  • Odpowiedz Marcin Kordowski

    Grudzień 11, 2019, 10:28 am

    Ciekawe zestawienie pytanie mam jedno jaki był cel tego artykułu bo do końca nie rozumiem. 🙂

Write a comment

nineteen − six =