-
Sklep internetowy wyróżniający się z tłumu
dodano 20.11.2008 / komentarzy: 16 / autor: agressiva
Jak daje się zauważyć niewielu początkujących webdesignerów zabiera się za projektowanie sklepów www. I nic dziwnego gdyż nie jest takie proste, jakby się wydawało. W tym artykule dowiecie się na co zwracać uwagę i co jest priorytetem w szablonie sklepowym.
Bardzo ważna jest grafika, wizualizacja tematyki sklepu na tyle dobra, aby przyciągnęla uwagę potencjalnego klienta sklepu. Jednak nie jest to w przypadku tego typu serwisu najważniejsze w wyglądzie witryny. Poza przykuwającą uwagę szatą graficzną ważny też jest układ (czyli rozmieszczenie poszczególnych elementów sklepu na stronie), a także maksymalna czytelność. Trzeba pamiętać, że sklep www może mieć szerszą publikę niż np. serwis o grach komputerowych i należy brać pod uwagę fakt, że klient może należeć do każdej grupy wekowej. Przedstawię Wam kilka ważnych elementów w budowie sklepów www oparte na przykładach z sieci (funkcjonujące sklepy www oraz projekty graficzne).1. Układ
Rozmieszczając poszczególne fragmenty sklepu na szablonie powinno brać się przede wszystkim pod uwagę ważność każdego z nich.
Nie trudno jest sobie wyobrazić, że takim jednym z bardziej priorytetowych elementów jest “katalog produktów“.Najlepiej umiejscowić go dość wysoko, tak aby klient wchodząc do sklepu mógł go od razu dostrzec i powinien widzieć wyraźnie z jakich kategorii złożona jest oferta. W zależności od zaawansowania sklepu, może taki katalog być ułożony w poziomie lub w pionie - to jest już rzecz gustu, należy jednak pamiętać o jak najprostszej nawigacji i przemieszczaniu się na stronie. Ułatwiony dostęp do wyszukiwanego produktu ułatwi także wielopoziomowość katalogu, a także wyszukiwarka produktów. Powinniśmy zadbać o to, aby na stronie głównej znalazła się przynajmniej podstawowa wyszukiwarka po słowach kluczowych z możliwością dalszego szukania zaawansowanego, gdzie klient mógłby dobrać wybrane przez siebie parametry szukanego przedmiotu.
Przykładem na dobrze rozmieszczony katalog są następujące projekty:
Przykładowe wyszukiwarki:
2. Produkty
W sklepie www kolejnym bardzo ważnym elementem są sprzedawane produkty.
Dlatego też powinniśmy je odpowiednio wyeksponować na stronie, sprawić, żeby nie sklejały się z sobą. Zwrócić uwagę też należy na cenę i parametry produktu (lub opis), cenę należy obrać nieco innym kolorem niż inną treść przy produkcie, tak aby była ona dobrze widoczna. Na widoku ogólnym wszystkich produktów z danej grupy można umieścić krótki opis produktu - najlepiej nie za długi, aby nie obciążać tej podstrony sklepu zbyt dużą ilością tekstu a jedynie konkretami. Nazwa produktu może być napisana innym krojem czcionki (pasującym do ogólnego stylu strony) lub wyróżniona może być innym kolorem tła lub tez kolorem własnym.
Nie zapominajcie, że we właściwie każdym, płatnym czy nie, skrypcie sklepowym można oznaczyć produkty jako “nowość”, “promocja” i / lub “wyprzedaż” - bez wątpienia trzeba je jakoś oznaczyć i wyróżnić na stronie. W tym celu można stworzyć na stronie kolumny w których innym kolorem tła lub nagłówka można zaznaczyć takie istotne sprawy dla sklepu. Często wykorzystuje się też “metki” - różnego rodzaju graficzne elementy, indywidualne dla każdego rodzaju produktów, bardzo modne szczególnie w erze web 2.0.3. Widok produktu
Nie wiem jak inni ale ja lobię kiedy widok ogólny pojedynczego produktu nie jest specjalnie obładowany treścią. Powinny znaleźć się tutaj takie informacje o produkcie jak:
- nazwa produktu
- cena (detaliczna lub hurtowa z zaznaczonym podziałem w razie co)
- opis (jego opis zależy od producenta)
- parametry typu waga, ilość, materiał, wymiary etc.
- kwestia gwarancji
- dostępność
- koszt przesyłki
- akcesoria, które można zakupić do danego produktuParametry najlepiej ustawić jeden po drugim, zachowując zdrowy odstęp, aby wszystko było czytelne i nie sprawiało problemu przy wyborze innego rodzaju produktu: o innej kolorystyce, rozmiarze itp.
Wygospodarować należałoby też miejsce na dodatkowe zdjęcia prezentowanego produktu, aby zapewnić klientowi największą możliwość zapoznania się z ofertą. Do powiększania zdjęć można użyć przeróżnych skryptów, np. lightbox, thickbox, jquery lightbox i in. To z pewnością uatrakcyjni sklep.
Możliwość dodania produktu do koszyka czy też schowka powinno być dobrze widoczne, w tym celu projektując grafikę dobrze jest posłużyć się ikonami. Wtedy user wie i intuicyjnie porusza się po sklepie nie czytając koniecznie wszystkich instrukcji, ale pamiętając co oznacza konkretna ikona.Dobrymi przykładami na prawidłowy i wygodny obraz widoku pojedynczego produktu są:
3. Panel klienta
Administratorzy sklepów czasami narzucają konieczność wcześniejszej rejestracji nowego klienta przed dokonaniem zakupu, a niektórzy nie. Umiejscowienie panelu logowania jest dość istotne w takiej sytuacji. Nie powinniśmy pozwolić na to, aby user zaczął błądzić po stronie tylko dlatego, że nie ma oficjalnej informacji o braku konieczności rejestracji szczególnie w chwili gdy chcemy dokonać jednorazowego zakupu (swoje dane teleadresowe podajemy podczas realizowania zamówienia). Oczywiście jeżeli user się zarejestruje mimo, ze nie musi to pozostanie po nim ślad, a mają dobrze przyrządzony regulamin możemy pozwolić sobie na wysyłanie do wszystkich klientów wiadomości o najnowszych produktach, itp., oczywiście nie zapominając aby useromi pozwolić na rezygnację z otrzymywania takich wiadomości.
4. Koszyk
Z doświadczenia w przygotowywaniu szablonów pod sklepy oraz z dokonywanych zakupów w sklepach internetowych najróżniejszych, mogę powiedzieć, że pozytywna sprawą są dwa koszyki. Konkretnie mam tutaj na myśli jeden “skrócony” umieszczony na każdej podstronie, abyśmy wiedzieli ile produktów już mamy w koszyku oraz jakie są to produkty i jaki jest aktualny koszt zakupów. W takim koszyku warto umieścić link do “pełnego” koszyka, za pomocą którego będziemy mogli usunąć wcześniej wrzucony produkt, zmienić ilość zamówionych przedmiotów oraz wybrać formę płatności za zakupy oraz formę przesyłki.
Jeżeli zleceniodawca nie wymarzy sobie innych dodatków to są to podstawowe fragmenty składające się na sklepowy wirtualny koszyk.5. Dodatkowe “ficzery”
Od jakiegoś czasu weszło w życie sklepowe wiele dodatkowych opcji. Są to oczywiscie kwestie funkcjonalności ale projektując grafikę należy mieć je na uwadze.
Zaliczamy do nich:a) Opinie o produkcie
Coraz więcej sklepów wprowadza tą opcję w działalność sklepu. Pozwala ona na stworzenie swojego rodzaju społeczności na stronie. A przy okazji nowy user, czy też klient, który zamierza “coś” kupić, może dowiedzieć czy warto i jak sprawdza się to “coś” w życiu codziennym. Nie da się ukryć - bardzo przydatna rzecz.b) Tagi
Pojawiają się już na wielu serwisach, Pomagają w pozycjonowaniu strony, a także przy wyszukiwaniu bardziej sprecyzowanych artykułów, a w sklepach produktów. Dobrze jest przewidzieć miejsce na stronie głównej gdzie wyświetlane byłyby te słowa / frazy. Z czasem funkcjonowania sklepu zrobiłoby ich się bardzo dużo, dlatego też można ograniczyć ich wyświetlanie np. do 10 najpopularniejszych.b) Lista życzeń (Wishlist)
Amazon.com wprowadził już jakiś czas temu coś co nazwa się Lista życzeń. Chodzi tutaj o to, że mają swoją stronę www i posiadając na niej tzw. dotację PayPalową, można ją zamienić na widok produktu, który bardzo by się chciało mieć. Jeżeli posiada się dość szeroką i wdzięczną widownię, można liczyć na to, że po jakimś czasie może ktoś nam sprezentuje to co byśmy chcieli. Pomysł jest bardzo fajny, ale trudno mi powiedzieć czy ma on przyszłość w Polsce. Czas pokaże. Jednak projektując sklep można przy widoku pojedynczego produktu wygospodarować miejsce na wygenerowanie linka do tego produktu już na zasadzie fragmentu htmla, aby Ci co chcą coś takiego wrzucić do siebie na stronę mogli to zrobić bez problemu.Edycja
Tak jak kolega nizej w komentarzach zauważyłam, na Merlin.pl istnieje coś takiego jak “lista życzeń”. Fukcjonuje ona jednak nieco inaczej niż ta wspomniana przeze mnie wyżej na Amazon.com.
Konkretnie gadżet ten na Merlinie działa niczym motorek napędzający nowych userów do rejestracji w systemie. Jedynym sposobem na poinformowania swoich znjomych o swojej liście życzeń jest wysłanie im maila z ta infomacją, ale… jeżeli dany znajomy nie ma konta na Merlin.pl wtedy nie zobaczy listy jaką mu przesłaliśmy. Biorąc pod uwagę, że sporo osób takimi listami może być zainteresowanych to na pewno zarejestrują się w sklepie i dokonają lub nie dokonają zakupu. Dlatego też nazywam to motorkiem…
Uważam, że amazon.com wprowadził zdrowsze zasady i pozwala userom na o wiele wygodniejsze korzystanie z wprowadzonej usługo.Podsumowanie
Tak jak widzicie, łącząc wszystkie wyżej wymienione elementy w całość otrzymamy prawdopodobnie sklep idealny.
Dla każdego grafika w przypadku sklepów jak i innych stron najważniejszy jest wygląd - żeby był super, wyglądał lepiej niż na innych stronach, etc etc. Ale należy pamiętać, że przepiękny layout nie zawsze idzie w parze z funkcjonalnością, gdzie jeżeli chodzi o sklepy to podstawa.
Jeżeli poszukujecie zbiorów sklepowych to polecam katalog: YourShops.pl - tutaj znajdziecie bardzo dużo sklepów internetowych z podziałem na kategorie tematyczne.Życzymy przyjemnego projektowania sklepów internetowych!
Przeczytaj też podobne wpisy:
Komentarze / dodaj komentarz
autor: Burger
dodano: 20.11.2008
A jakieś darmowe i płatne sklepy CMS znacie moze?
autor: Kuras
dodano: 20.11.2008
Znamy
autor: Kuras
dodano: 20.11.2008
Ja ostatnio jestem na etapie poznawania PrestaShop - http://www.prestashop.com/
Jest to nowy CMS i bardzo dobrze się zapowiadający
Konkuręcją, jeśli można tak to nazwać jest Magento - http://www.magentocommerce.com
A płatne… tutaj jest wiekszy wybór
autor: agressiva
dodano: 20.11.2008
Magento uber alles - niedlugo sie za niego biorę, wiec pewnie coś o nim napiszę
autor: Kuras
dodano: 20.11.2008
Zapomniałem dopisać że fajny wpis!
Ja bym wyboldował na początku że należy zacząć od funkcjonalności/użyteczności/czytelności a potem skupić się na grafice.
To też ważne “Ale należy pamiętać, że przepiękny layout nie zawsze idzie w parze z funkcjonalnością, gdzie jeżeli chodzi o sklepy to podstawa.”
autor: agressiva
dodano: 20.11.2008
Spoko
Mam nadzieje, że ludki zrozumieją bez problemu jakie jest przesłanie artykułu 
autor: marxy
dodano: 20.11.2008
Zgodzę się z tym, jednak należy dodać i podkreślić, że grafika sklepu internetowego to dosyć poważna sprawa i warto nie szczędzić na tym elemencie pieniędzy, czy też czasu.
A wszystko to za sprawą mentalności niektórych ludzi (po części też mnie) w której dobry i profesjonalny sklep nie może sobie pozwolić na kiepski wygląd.
Tak więc dobry i zaufany sklep = zachęcający i schludny wygląd.
autor: agressiva
dodano: 20.11.2008
Otóz to Marxy…
Choc powiem szczerze, jakis czas temu trafilam na sklep bardzo niepozorny z wyglądu… taki troszkę zaniedbany pod tym wzgledem, ale za to bardzo pozytywnie zaskoczyła mnie obsługa i dbałosc o realizowane zamówienia.
Takze różnie z tym byla, niekiedy “szare myszki” okazują się całkiem porządne
autor: Lymorn
dodano: 20.11.2008
Również sądzę, że funkcjonalność to podstawa. Dlatego sądzę ze sklep powinien mieć w miarę możliwości maksymalnie uproszczoną grafikę (w sensie “bajerowośći”) na rzecz schludnego (najlepiej jeszcze lekkiego) i przejrzystego wyglądu, przedstawiania oferty jak i samych produktów i funkcjonalności, którą można poznać po “rzucie oka” bez zbędnego szukania po stronie.
Jak dla mnie poza sama oferta w sklepie internetowym, bardzo duże znaczenia ma (a często traktuje się to po macoszemu): łatwy dostęp do informacji o sklepie, wysyłce i kosztach i przede wszystkim kontakt ze sklepem, nie ma kontaktu, to od razu opuszczam sklep, bo nie mam zamiaru się narażać na potencjalne nie przyjemności.
Bardzo fajny wpis, lecz znów temat rzeka, zostały poruszone ogólne kwestie, ale to i tak bardzo dużo, bo o sklepach można napisać nie jedna książkę
pomijając takie aspekty jak: co sprzedaje sklep (odzież, elektronika, sport, meble, …), czy działa na ogólnym rynku, czy w jakieś niszy (subkultury, hobby, …), i jaką ilością produktów dysponuje, czy jest to konkretna marka (mniej produktów) i wiele, wiele innych aspektów warunkujących osobowość sklepu, a co za tym idzie także klienta i jego upodobania.
autor: Lymorn
dodano: 20.11.2008
Dodam jeszcze (na postawie poprzednich komentarzy), że bardzo chętnie zapoznałbym się (i pewnie również kilka jak nie więcej innych osób) również z zestawieniem skryptów/platform do prowadzenia sklepu, tych darmowych jak i płatnych.
Od siebie dorzucam do tematu ZenCart-a, na którego się ostatnio natknąłem, ale jeszcze nie testowałem.
autor: agressiva
dodano: 20.11.2008
Lymorn - wiadomo, wiekszośc tematów z dziedziny webdesignu i webmasteringu to tematy rzeki, na temat, których można by bylo pisać ksiązki.
Ale tutaj chodzi o to, żeby niektórym naświetlić najwazniejsze rzeczy bez zbędnego wodolejstwa i wnikania w szczegóły.
I tak ogólny wygląd i funkcjonalność sklepu uzależnione jest nie tylko od projektanta tylko od klienta (pomijam sytuacje, kiedy wykonawca lub podwykonawca potrafi wcisnąć każdemu klientowi wszystko - co dla mnie jest niepojete). Klient zazwyczaj wie czego chce , bo zna swoją konkurencję, potrafi powiedzieć co chce mieć u siebie a czego nie, wie mniej wiecej co jest potrzebne do dobrego przedstawienia produktów… jezeli jednak jego wiedza jest mniej głeboka wtedy wchodzi projektant i tłumaczy (na bazie oczywiście swojego doświadczenia).
A tutaj przedstawiłam Wam to co przy prawidłowym sklpie występować powinno.
autor: Kuras
dodano: 20.11.2008
POTWIERDZAM!
Dlatego dziwie się dlaczego tak wiele sklepów nie ma takich informacji w nagłówku.
autor: Azirafal
dodano: 25.11.2008
Hmm, ten artykuł jest trochę dziwny. Dziwny w sensie - niekompletny, z nieaktualnymi danymi, nie do końca zrozumiałe kryteria itp.
Po pierwsze - istnieje w Polsce sklep, który wprowadził opcję wishlist (listy życzeń). Od miesiąca ma je Merlin.pl
O wprowadzeniu których było dość głośno jakiś czas temu, więc dziwne, że nagle w tym zestawieniu tejże informacji zabrakło.
Po drugie - myślałem, że to artykuł o istniejących sklepach, a nie o screenach z deviantartu z powpisywanym “Lorem ipsum”?
autor: agressiva
dodano: 25.11.2008
wiesz czasami poprawne od strony wizualnej sklepy istnieją… jeszcze w projekcie, ale nikt nie ma możliwosci ich realizacji.
A te istniejace nie czesto spelniaja niektóre wymagania…
A merlin ma liste zyczen - owszem, ale działa na innej zasadzie niż wyżej napisałam…
autor: Azirafal
dodano: 25.11.2008
A nie jest przypadkiem tak, że te “sklepy”, które niby istnieją, ale tylko jako projekt… no, po prostu nie istnieją z jakiegoś powodu? Bo np. nikt się nie zainteresował projektem? A może projekt jest fajny tylko na papierze (tfu, przepraszam - na monitorze)? Fajne projekty dla wyimaginowanych i wymyślonych firm czy sklepów można ładnie wymyślić, ale potem może nie być fizycznej możliwości zaimplementowania tego wszystkiego tak jak trzeba…
I nie wiedziałem, że istnieje “lista życzeń, którą opisałam na podstawie Amazona i tylko ta”, a każda inna się nie liczy. Jak dla mnie lista życzeń merlinowa jest jak najbardziej pełnoprawnym elementem zbioru “lista życzeń”
Może i działa na innej zasadzie, ale zaciemnianie stanu faktycznego przez “nie działa tak, jak to opisałam, więc dla mnie nie istnieje”, no to juz nie jest profesjonalne podejście do tematu, nieprawdaż? Pisanie, że nikt w Polsce tego nie zrobił, ba! nie pomyślał nawet by “przy widoku pojedynczego produktu wygospodarować miejsce na wygenerowanie linka do tego produktu” jest ewidentnym kłamstwem, bo Merlin właśnie coś takiego posiada.
autor: palmiak
dodano: 25.11.2008
Z tego co widzę artykuł został poprawiony. Przepraszamy za to, że umknął nam ten fakt.
Sam dopiero dzisiaj zobaczyłem wishlisty na merlinie i przyznam, że na początku bardzo się ucieszyłem (już oczami duszy widziałem taką listę życzeń z boku vivee), jednak gdy doczytałem, że trzeba być zarejestrowanym userem, żeby taką listę zobaczyć to cała moja radość prysła. Nie do końca rozumiem tego sens.
Napisz komentarz