powrot do bloga

Najlepsze sklepy internetowe – inspiracje

Najlepsze sklepy internetowe – inspiracje

Najpopularniejsze trendy, nowoczesne, funkcjonalne i dopasowane do potrzeb. Ranking sklepów ecommerce. Inspiracje ecoomerce w najlepszym wydaniu.

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 inspiracji sklepów internetowych. Czyli naszym zdaniem co powinien zawierać dobry sklep by sprzedawał :

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

Zobacz naładniejsze inspiracje sklepów internetowych

Sklep internetowych - Bouguessa

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 rzadko spotykana.

bougessa sklep internetowy
bouguessa sklep internetowy

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 /

wyszukiwarka na sklepie internetowym
bougessa wyszukiwarka

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

widok kolekcji na sklepie internetowym

Sklep internetowy - Ports 1961

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.

ports sklep w typie minimalistycznym
sklep internetowych 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.

slidery w kategoriach w sklepie internetowym
podstrona kolekcji 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.

karta produktu z przewijanymi zdjeciami
Widok karty produktu

Stan po najechaniu na miniaturę – lekki zoom.

intuicyjna karta produktu w sklepie
Widok karty produktu po przewinięciu

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.

postaw na duze produkty w twoim sklepie internetowym
koszyk - wysuwany panel z produktami

Pandora Garden - strona internetowa w formie sklepu

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

animowany sklep internetowy typu portfolio
nowoczesne sklepy internetowe prezentujące kolekcje w formie sliderów

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.

zadbaj o duze produkty w Twoim sklepie
Karta produktu w formie lightboxa z prezentacją zastosowania produktu

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.

prezentacja produktow w sklepie internetowym
lista produktów w kategorii oraz porównanie ze zdjęciem to ciekawe połączenie dające użytkownikowi wyobrażenie o zastosowaniu produktu

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

slider animowany z produktami na sklepie
Animowany slider pionowy produktów

sklep ETQ - rozwiązania ecoomerce 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.

dobry ux sklepu to czytelnosc i intuicyjnosc
sklep ETQ prezentujący nowoczesne projektowanie UX i UI

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.

zadbaj o stan po najechaniu na produkt
Stan produktu po najechaniu - widoczne nie drugie ujęcie, a zdjęcie real

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.

duze zdjecia zachecaja do zakupu
Czytelna i intuicyjna karta produktu

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.

warto zadbac o zoom dla produktu
Powiększenie zdjęcia - płynne animacje i możliwość dokładnego oglądnięcia produktu

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 - czytelna prezentacja kolekcji

Sklep internetowy 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 internetowym 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 pozytywnych doświadczeń użytkownika.

nie przeladowuj swojego sklepu internetowego efektami
Pozytywne doświadczenia użytkownika - UX dla sklepu internetowego

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.

nowoczesny design poprawia pozytywne doswiadczenia uzytkownika
MInimalizm projektowania UI dla sklepu internetowego przyciąga zdjęciem i układem elementów

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.

jednolite tla dla produktow daja spojnosc wizualna
Prezentacja na jednolitych tłach daje czytelny odbiór produktu

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 projektowe – grafika 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 internetowego

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