najlepsze sklepy internetowe – inspiracje

najpopularniejsze trendy, nowoczesne, funkcjonalne i dopasowane do potrzeb, ranking sklepów ecommerce w najlepszym wydaniu
jaki sklep internetowy, najlepsze sklepy

Najlepsze sklepy internetowe

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ą.

 

Jak powinien być zaprojektowany sklep internetowy ?

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.

sklep internetowy bougessa

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 /

filtrowanie produktow - sklep internetowy

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

przewijanie slider produktow

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 www - 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.

kolekcja sklepu - kafle przewijane

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.

karta produktu - przewijane zdjecia

Stan po najechaniu na miniaturę – lekki zoom.

karta produktu - zoom zdjecie

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.

koszyk w sklepie internetowym

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).

designerski sklep internetowy

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.

karta produktu - 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.

rozwiazania ux sklepu internetowego

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

produkty na sklepie internetowym

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.

funkcjonalny sklep internetowy
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.

lista produktow - drugi widok produktu

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.

karta produktu - designerski sklep

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.

powiekszenie produktu - zoom

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.

czytelne sklepy internetowe

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.

uzytecznosc sklepu internetowego

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.

lista produktow sklepu - dodatkowe informacje

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ć ?

Jaki sklep internetowych 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
14 komentarzy
  • Odpowiedz Łukasz

    7 czerwca, 2019, 8:25 pm

    Sam korzystam z niektórych 🙂

  • Odpowiedz sigma

    12 listopada, 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.

    22 listopada, 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

      22 listopada, 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

    11 grudnia, 2019, 10:28 am

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

  • Odpowiedz SEMPIRE

    16 lutego, 2020, 5:01 pm

    Prostota, przejrzystość i możliwość szybkiej realizacji celu jakim jest zakup to kluczowe cechy dobrych projektów.

  • Odpowiedz Oliwia

    20 lutego, 2020, 6:16 pm

    Dzięki za przydatne informacje. Świetny artykuł i… tylko Presta! 🙂

  • Odpowiedz Bartek

    12 kwietnia, 2020, 8:08 pm

    Zlecilem zbudowanie sklepu na prestashop i wszystko bylo ok do momentu jak sie zainteresowalem koszykiem,poprostu rece opadaja.Koszyk nieintuicyjny,straszny do obslugi dla klienta.Takie koszyki jakie mi proponuja to chyba 20 lat temu byly na czasie.Nie odpuszcze im,jesli tego nie zmienia rezygnuje z projektu.A szkoda bo sklep,ktory zreszta praktycznie sam zaprojektowalem tzn.ja mowilem jak i gdzie co ma byc,jakie kolory itd.jest poprostu idealnie intuicyjny i bezkonkurencyjny.
    A jak Panstwo ocenilibyscie sklep http://www.cbdfeel.pl,oczywiscie nie uwzgledniajac koszyka.
    Nie musze nikomu mowic ze koszyk zaraz po dobrych opisach i zdjeciach jest na 2 miejscu do sukcesu.
    Dobrze ze sa takie strony jak ta.Szkoda tylko ze Ci co buduja raczej nigdy ich nie odwiedzaja,bo 95% polskich sklepow wyglada bardzo slabo.

    • Odpowiedz Mateusz

      13 kwietnia, 2020, 4:57 pm

      Koszyk jak w typowych platformach typu presta etc, jeżeli nie jest dodatkowo przygotowany wygląda właśnie tak.
      Nie wiem dlaczego taka strona główna / tzn długa z wyszukiwarką i menu na 1/4 ekranu, dlaczego guzik na banerze nie działa oraz jest w kolorze tła ? Lista produktów to typowy wygląd, nie ma tu nic innowacyjnego czy projektowanego, karta produktu również typowa, SEO zapewne do przeanalizowania.
      Zapraszamy niedługo kolejne wpisy 😉

  • Odpowiedz Natalia Kuch

    22 kwietnia, 2020, 3:11 pm

    Zawsze warto porównać własną stronę do innych tego typu. Często można wyciągnąć wnioski czego brakuje właśnie u nas. Całe SEO polega przecież na dobrym analizowaniu. Dla mnie zdecydowanie na plus.

  • Odpowiedz kdkgroup

    13 maja, 2020, 7:39 am

    Wybór platformy sklepu jest kluczowa – każda z nich ma swoje ograniczenia związane z możliwością (i ewentualną ceną) edycji poszczególnych elementów. Najprostsze – najszybsze, ale dające najmniej możliwości zmian są rozwiązania typu SaaS. Rozwiązania umożliwiające większe zmiany zazwyczaj wiążą się z większym kosztem jednostkowym.
    Ale zmiany UX’owe mogę poprawić odbiór strony przez potencjalnego klienta oraz wpłynąć na lepszą konwersję.

  • Odpowiedz Wiktor

    26 maja, 2020, 9:46 am

    Zestawienie jest całkiem w porządku, ale brakuje mi dwóch rzeczy. Po pierwsze przykładów z naszego podwórka, a po drugie różnorodności. Owszem, szata graficzna wyżej wymienionych witryn jest ładna, ale czy na pewno funkcjonalna? Ja nie lubię wyskakujących filmików, a od sklepu internetowego wymagam przejrzystości, łatwości dostępu i prostoty. Nie lubię musieć klikać za dużo.
    Czy zatem powyższe sklepy urzekły Was wyglądem czy przystępnością dla użytkownika? Dla mnie one są tylko “ładne”.

  • Odpowiedz Marek

    22 lipca, 2020, 1:28 pm

    Mam odczucie że trochę trendy się zmieniły teraz, chodź wszystko idzie dalej w minimalizm i czysty przekaz – ale widać w obecnych stronach więcej kolorystyki i łagodnych kolorów.

Write a comment

five × 1 =