Czy zastanawiałeś się kiedyś, dlaczego sklepy spożywcze umieszczają mleko na tyłach sklepu, a czekoladki w pobliżu kasy?
Prosty: umieszczenie niezbędnych artykułów z tyłu sklepu zachęca kupujących do spacerów i przeglądania innych produktów. Układanie małych przedmiotów (jak czekoladki) przy kasie zachęca do impulsywnych zakupów.
To wszystko jest częścią nauki o projektowaniu sklepów. The odpowiedni układ sklepu może zwiększyć sprzedaż, poprawić lojalność i pomóc klientom szybciej znaleźć to, czego szukają.
Twój sklep internetowy nie jest inny. Organizacja i układ Twoich produktów mają duży wpływ na to, co (i jak) klienci kupują od ciebie.
W tym artykule, pokażemy Ci, jak rozplanować produkty, aby zmaksymalizować sprzedaż i konwersje.
3 Kwestie, które należy wziąć pod uwagę przy wyborze układu produktu
Układ produktu może wydawać się prostym problemem, gdy podchodzisz do niego po raz pierwszy. Jednakże, jak większość rzeczy w e-commerce, złożoność pojawia się, gdy zagłębisz się w szczegóły. There are three things you must consider when you choose a product layout:
1. Choice
Choice is a double-edged sword for e-commerce stores. The lack of choice means you limit opportunities. Too many choices, jednakże, and you’ll leave visitors confused.
Effective product layout is essentially a process of balancing this duality. That is: giving the impression of plentiful choice, while still keeping the site easy to use and navigate.
Science says that decision making is mentally taxing. When you confront shoppers with too many choices, they are liable to not make a choice at all.
So how do you overcome this problem in your store layout?
One solution is to use featured images that lead to additional products. Na przykład, notice how Made.com uses separate images for entire product categories (such as “garden furniture”):
Think of this as a teaser to lure in shoppers.
Idealnie, you’ll want to keep your best-selling or most-desired products front and center.
W związku z tym, before you start the layout process, list out the following:
- Your entire product range and their respective categories and subcategories
- Functional categories such as “best selling products”, “featured products”, itp. and the products in them.
The next step is to use this information to construct a well-organized navigational menu. Notice how Amazon organizes products into categories in its menu.
Doing this will help shoppers find what they want without overwhelming them with too many choices.
If your Ecwid store is added to a website, możesz dodać menu nawigacyjne, dodając fragment kodu:
- for a horizontal layout
- dla układu pionowego.
Here are the instructions for Ecwid stores added on WordPress oraz Wix strony internetowe, także. Na stronie Ecwid Instant, dostępne jest tylko menu poziome.
2. Informacje o produkcie
Oto kolejna czynność równoważenia, którą należy wykonać przy wyborze układu sklepu: wyświetlanie informacji o produkcie.
Chcesz przekazać klientom informacje potrzebne do kliknięcia i dokonania zakupu. W tym samym czasie, nie chcesz ich przytłoczyć zbyt wieloma szczegółami – przynajmniej nie zanim znajdą się na rzeczywistej stronie produktu.
Twój model myślowy w tej sytuacji powinien ułatwiać podejmowanie decyzji i wzbudzać zainteresowanie klientów. Zapytaj siebie: Co minimalne informacje czy moi klienci muszą kliknąć produkt?
Przekonasz się, że ta odpowiedź różni się w zależności od sklepu i produktu.
Na przykład, zauważ, że Amazon udostępnia tylko cztery punkty informacyjne na stronie kategorii: Nazwa produktu, Cena £ (w tym rabat), ocena i najwyższa dostępność:
w Ecwidzie, możesz dodawać podobne oceny i recenzje za pomocą aplikacji Stampled.io.
Chociaż ta informacja jest niezbędna dla dużego detalisty, takiego jak Amazon, dla mniejszych firm np Piasek & Biżuteria z kamienia, oceny nie są tak ważne. Stąd, strony kategorii pokazują tylko nazwę produktu i cenę.
Łatwo wpaść w pułapkę podawania zbyt małej ilości informacji na stronach kategorii. The best way to avoid this is to interview your customers and ask them what information they use to make purchase decisions.
3. Store design
How you’ve designed your store will have a big impact on your product layout.
An e-commerce store will typically have three key pages:
- Strona główna
- Category and search pages
- Individual product pages
What products you choose to showcase on each page-type will decide what products your customers end up buying.
Na przykład, note how Amazon promotes its own products on its homepage if you haven’t signed in:
Sklepy często promują najnowsze oferty na stronie głównej. Pamiętaj, aby dostosować te oferty do grupy docelowej. BestMadeCo, na przykład, prowadzi promocję na Dzień Ojca, mając na uwadze głównie męską klientelę.
Skupić się na:
- Dowiedz się, jakie produkty chcesz, aby klienci kupowali (najlepiej sprzedający się, i/lub produktów o najwyższej marży)
- Zachowanie jednolitości projektu na różnych typach stron.
Niezależnie od tego, czy zdecydujesz się wyróżnić swoje bestsellery, czy nowości, Ecwid umożliwia utworzenie kategorii dla wyróżnione produkty na stronie głównej i nazwij go zgodnie ze swoimi potrzebami.
6 Najlepsze praktyki dotyczące układu produktów e-commerce
Chociaż z pewnością możesz stworzyć unikalny schemat układu dla swojego sklepu e-commerce, pomaga przestrzegać kilku najlepszych praktyk.
1. Wypychaj najlepsze produkty i oferty w części widocznej na ekranie
Obszar „powyżej strony widocznej na ekranie” to część ekranu widoczna, gdy klienci po raz pierwszy trafiają na Twoją witrynę. Faktycznie, ten obszar stanowi 80% całej uwagi widzów w większości witryn.
Given the kind of attention this space gets, it’s a good idea to place your top products above the fold. This can include:
- Latest offers, sales and discounts
- Best selling product or product categories
- Recently launched products (works best at the start of a shopping season)
NA Target.com, na przykład, you’ll see the latest offers at the top of the page:
If you have a lot of offers, consider adding a slider, like this example from Walmart. Also note the promotions running below the navigation menu:
Niektórzy sprzedawcy detaliczni unikają konwencjonalnych układów na rzecz promowania wizerunku marki. NA ASOS, na przykład, otrzymujesz wizerunek marki z opcją „Shop Men” lub „Shop Women”.
Ta taktyka sprawdza się, gdy próbujesz promować wizję marki za pomocą lookbooka. Większość sprzedawców detalicznych, jednakże, będzie działać lepiej z konwencjonalnym produktem — najpierw nad układem zagięcia.
Postępuj zgodnie z tą samą ideą na stronach kategorii: wypchnij swoje najlepiej sprzedające się i najwyżej oceniane produkty w stronę zakładki. Na przykład, sprawdź strony kategorii Amazon:
2. Mieszaj układy poziome i pionowe
Zasadniczo istnieją dwa sposoby ułożenia produktów na dowolnej stronie: poziomo lub pionowo.
Układ poziomy pozostaje statyczny. Na krawędzi strony znajduje się przycisk do dalszego przewijania list.
Ten przykład z Amazon lepiej ilustruje sytuację:
w Ecwidzie, ostatnio oglądane produkty są również pokazane poziomo. Możesz wybrać liczbę przedmiotów, które mają być wyświetlane na górze lub na dole witryny sklepowej.
Produkty powiązane to kolejna sekcja zorientowana poziomo. Produkty w tej grupie są konfigurowane indywidualnie dla każdej strony produktu, co pozwala na kierowanie do klientów bardzo trafnych dodatków do ich zamówień. Możesz je wyświetlić na stronach produktów oraz na stronie koszyka.
W przeciwieństwie, układ pionowy nie ma tych przycisków przewijania. Zamiast , podczas przewijania w dół widzisz coraz więcej produktów w układzie przypominającym siatkę. Lubię to:
Idealnie, powinieneś użyć kombinacji obu tych układów:
- Układ poziomy, gdy chcesz pokazać kilka produktów z wielu kategorii, na przykład w Ostatnio oglądane produkty
- Układ pionowy, gdy chcesz pokazać wiele produktów z tej samej kategorii, takie jak strony wyszukiwania i kategorii
3. Postępuj zgodnie z konwencją i oczekiwaniami użytkowników
Są sytuacje, w których chcesz być niekonwencjonalny w swoim projekcie. Układ produktu nie jest jednym z nich.
Układ produktu ma na celu zorientowanie użytkowników, kiedy trafią na Twoją witrynę. Konwencjonalny układ gwarantuje, że znajdą to, czego szukają i nie będą zdezorientowani.
Konwencje, oczywiście, różnią się w zależności od sektora. Jednakże, jest kilka rzeczy, które musisz wziąć pod uwagę:
Użyj układu siatki
W układzie siatki, produkty są ułożone w prostokątnych pudełkach tej samej wielkości, lubię to:
Ten układ od dawna jest konwencją dla witryn e-commerce. Nie tylko Twoi klienci byliby już z nim zaznajomieni, nadaje się również do ekspozycji produktów. Dalej, dobrze się skaluje – możesz wyświetlić tylko jedno pudełko na małych ekranach, lub rozszerz do kilku pudełek na większe.
Podczas korzystania z tego układu, upewnij się, że pudełka są tej samej wielkości. Jak pokazuje to studium przypadku, użycie boksów o jednakowej wielkości może zwiększyć przychody na odwiedzającego nawet o 17%.
Jeśli sprzedajesz z Ecwid, to nie jest dla Ciebie problem – Ecwid ma jednakową wielkość siatki, która automatycznie dostosowuje się do różnych ekranów.
Pokaż nawigację u góry listy produktów
Inną konwencją, której powinieneś przestrzegać, jest umieszczenie opcji sortowania u góry strony.
Klienci oczekują tego miejsca docelowego i naturalnie będą tu zaglądać, gdy trafią na stronę kategorii.
Zorientuj klientów za pomocą bułki tartej
Breadcrumbs to elementy nawigacyjne, które pokazują użytkownikom drogę ze strony głównej, lubię to:
Dodanie ich u góry strony pomaga zorientować odwiedzających. Mówi im, na której stronie lub w jakiej kategorii się znajdują i jak mogą wrócić do strony głównej.
4. Skoncentruj się na wizualizacjach, ale nie zapomnij o tekście na stronach produktów
online, jedynym sposobem na pokazanie produktów są wizualizacje. Dlatego wiadomo, że duże obrazy produktów zwiększają konwersje w e-commerce.
Jednakże, podczas gdy wizualizacje są ważne, Twój układ powinien mieć również miejsce na tekst opisowy. Dobra kopia nie tylko opisuje produkt, ale także pomaga sprzedawać ją i Twoją markę.
Na przykład, zastanów się, w jaki sposób firma BestMadeCo wykorzystuje mocne teksty na swojej stronie głównej, aby sprzedawać niedawno wprowadzony na rynek produkt. Układ pomaga idealnie odtworzyć tekst na obrazie.
Kopia produktu jest szczególnie ważny na stronach produktów. Your layout should give customers all the key information they need to make a decision right above the fold. This should include:
- Cena £ (w tym rabat, represented visually)
- Product rating and number of reviews
- Product and brand names
- Whether the product is in stock (and whether stock is running low)
- Shipping details
- 2-3 key product details
This is an example of how not to layout products. The product page has no copy at all – it’s difficult to make a decision.
As with most things, Amazon’s layout is perfect here, dając klientom wszystko, czego potrzebują do podjęcia decyzji.
5. Dodaj rekomendacje produktów i powiązane produkty
Na stronach produktów, masz dwa cele:
- Przenieś klienta na stronę kasy, lub
- Zachęć klienta do obejrzenia innego produktu
Dla tego ostatniego, powinieneś mieć sekcja polecanych lub powiązanych produktów. Możesz umieścić to po informacjach o produkcie lub przed nimi.
Amazon robi to szczególnie dobrze. Zwróć uwagę na powiązane produkty i „również przeglądane” listy pod zakładką:
Jeśli masz wiele produktów w tej samej kolekcji, pamiętaj, aby je również wyświetlić. Oto dobry przykład z WorldMarket:
Powiązane listy produktów nie zawsze muszą być wizualne. Możesz także wyświetlać podobne wyszukiwania, aby kierować klientów do produktów, które mogą ich zainteresować.
Eksperymentuj z różnymi układami powiązanych/zalecanych produktów. Spróbuj umieścić je nad stopką, poniżej opis produktu, itp.
6. Eksperymentuj ze szczegółami najechania kursorem myszy na strony kategorii
Jednym ze sposobów poprawy współczynników klikalności jest oferowanie dodatkowych informacji, gdy klient najedzie kursorem myszy na obraz produktu na stronach kategorii.
Na przykład, ta strona pokazuje szczegóły produktu i przycisk Dodaj do koszyka po najechaniu myszką:
Celem tej taktyki jest szybkie przekazanie użytkownikom kluczowych informacji. Działa najlepiej, gdy oczekujesz od użytkowników szybkiego przeglądania dużej liczby produktów, jak w sklepach odzieżowych. Może nie działać w przypadku innych kategorii, ale nadal możesz przeprowadzić kilka testów podziału i zobaczyć wyniki.
w Ecwidzie, możesz włączyć przyciski „Kup teraz” na listach produktów, aby ułatwić klientom szybkie przeglądanie (i kup) Twoje produkty.
Gdy klient kliknie taki przycisk, Twój sklep nie otworzy całej strony produktu. Zamiast , Twój klient zobaczy wyskakujące okienko z opcjami produktu:
Jeśli Twój produkt nie ma opcji, trafi prosto do koszyka.
Wniosek
Jeśli chodzi o układ produktu, najlepiej trzymać się konwencji i podążać za tym, co już robią liderzy rynku. Kataloguj szczegółowo swoje produkty, kategoryzować je dokładnie, then organize them out in a standard grid layout.
The best practices shared above will work for most stores across sectors. Try them at your own store!
- How to Fix Your Store’s Navigation
- Wszystko, co musisz wiedzieć o merchandisingu produktów
- Online Merchandising: How to Layout Products in Online Store
- What is Fashion Merchandising, and Why Is It So Important?
- 10 Design Mistakes of Online Stores
- 15 Idealne pary czcionek dla Twojej witryny e-commerce
- Color Theory: Everything You Need to Know about Color Themes
- 7 Creative Ideas for Your Ecommerce Product Page
- The Power of a Hero Image in Web Design
- Niezbędne zasady UX, których należy przestrzegać w sklepie internetowym
- Audyt projektu strony internetowej
- Odblokowanie mocy projektowania UX dla e-commerce
- What’s the Difference Between UI and UX in Ecommerce?
