# Δέκα αποφάσεις σχεδιασμού ηλεκτρονικού εμπορίου που ανεβάζουν μετρήσιμα τις μετατροπές

> Όχι «χρησιμοποιήστε περισσότερο λευκό χώρο», όχι «δοκιμάστε το χρώμα του κουμπιού σας». Οι συγκεκριμένες επιλογές οπτικής ιεραρχίας, φωτογραφίας, τυπογραφίας και κινητού που κινούν πραγματικά τις μετατροπές σε πραγματικά καταστήματα.

Ryan Badger - 3 Νοεμβρίου 2024 - 7 λεπτά ανάγνωσης

## Αποφάσεις σχεδιασμού που κινούν πραγματικά τις μετατροπές

Τα άρθρα σχεδιασμού συνήθως χωρίζονται σε δύο στρατόπεδα. «Χρησιμοποιήστε άφθονο λευκό χώρο!» (πολύ αόριστο) ή «κάντε A/B test σε 47 χρώματα κουμπιού» (πολύ λεπτομερές). Κανένα δεν βοηθά κάποιον που κοιτάζει το κατάστημά του και αναρωτιέται γιατί μετατρέπει στο 1,3%.

Αυτό το άρθρο αφορά τις συγκεκριμένες αποφάσεις οπτικού σχεδιασμού που μετατοπίζουν μετρήσιμα τις μετατροπές στα καταστήματα ηλεκτρονικού εμπορίου. Όχι γούστο. Όχι αισθητική του brand. Οι επιλογές διάταξης, ιεραρχίας, χρώματος και τυπογραφίας που είτε βοηθούν τους ανθρώπους να αγοράσουν είτε τους εμποδίζουν.

## 1. Οπτική ιεραρχία: το πιο σημαντικό πράγμα πρέπει να φαίνεται το πιο σημαντικό

Τα περισσότερα καταστήματα δίνουν ίδιο οπτικό βάρος σε όλα στη σελίδα προϊόντος: κείμενο 16px, τιμή 18px, επικεφαλίδες 18px. Κάθε στοιχείο ανταγωνίζεται· κανένα δεν κερδίζει. Το μάτι δεν έχει σημείο εισόδου.

Διόρθωση: αυτό που θέλετε να γίνει κλικ πρέπει να είναι το μεγαλύτερο, υψηλότερης αντίθεσης στοιχείο της σελίδας.

- Τίτλος προϊόντος: 28-36px
- Τιμή: 20-24px, έντονη, σαφώς οριοθετημένη
- Κουμπί Προσθήκη στο καλάθι: πλήρους πλάτους στο κινητό, το οπτικά βαρύτερο στοιχείο της σελίδας
- Περιγραφές, λίστες προδιαγραφών, πληροφορίες αποστολής: 14-16px, πιο διακριτικά

Όταν κοιτάτε τη σελίδα προϊόντος από 2,5 μέτρα (ναι, κυριολεκτικά, γείρετε πίσω), καταλαβαίνετε ποια είναι η κύρια ενέργεια; Αν ολόκληρη η σελίδα μοιάζει με γκρίζα σούπα, η ιεραρχία σας είναι χαλασμένη.

## 2. Λευκός χώρος γύρω από το CTA, όχι παντού

Το «χρησιμοποιήστε περισσότερο λευκό χώρο» προβάλλεται ως καθολική συμβουλή σχεδιασμού. Αυτό που μετράει πραγματικά είναι ο λευκός χώρος γύρω από τα κουμπιά και τα βασικά στοιχεία, όχι ο λευκός χώρος για χάρη του.

- Τουλάχιστον 40-60px περιθώριο γύρω από την περιοχή Προσθήκη στο καλάθι
- Η τιμή να κάθεται στον δικό της καθαρό χώρο, όχι στριμωγμένη από άλλο κείμενο
- Οι εικόνες προϊόντος να έχουν χώρο (όχι από άκρη σε άκρη χωρίς περιθώριο)

Στριμώξτε πιο σφιχτά όλα τα υπόλοιπα (κριτικές, πληροφορίες αποστολής, σχετικά προϊόντα). Είναι δευτερεύοντα. Η περιοχή του CTA κερδίζει επειδή είναι το μόνο που έχει χώρο να αναπνεύσει.

## 3. Η συνεπής φωτογραφία προϊόντος νικά τη «καλύτερη» φωτογραφία προϊόντος

Ένας κατάλογος 50 προϊόντων όπου οι φωτογραφίες είναι όλες ελαφρώς διαφορετικές (διαφορετικά φόντα, διαφορετικός φωτισμός, διαφορετικό ζουμ) μοιάζει ερασιτεχνικός. Ένας κατάλογος όπου κάθε φωτογραφία έχει την ίδια γωνία, τον ίδιο φωτισμό, το ίδιο κάδρο, το ίδιο φόντο, μοιάζει επαγγελματικός.

Αυτό είναι πρόβλημα όγκου, όχι ποιότητας. Τα 5 κορυφαία best-seller σας μπορούν να έχουν επεξεργασμένες φωτογραφίες hero. Όλα τα υπόλοιπα πρέπει να φωτογραφίζονται πανομοιότυπα, ακόμη κι αν είναι ελαφρώς λιγότερο εντυπωσιακά. Η ασυνέπεια σηματοδοτεί «μικρό, αναξιόπιστο μαγαζί» περισσότερο από τη χαμηλή ποιότητα.

Πρακτικός κανόνας:

- Κύρια φωτογραφία: λευκό ή απλό φόντο, κεντραρισμένο, ίδιο κάδρο σε όλο τον κατάλογο
- Δευτερεύουσες φωτογραφίες: lifestyle / σε χρήση, συνεπής τόνος
- Όλες οι φωτογραφίες στην ίδια αναλογία διαστάσεων και ανάλυση

## 4. Αντίθεση του CTA, όχι χρώμα του CTA

«Τα πορτοκαλί κουμπιά μετατρέπουν X% περισσότερο από τα πράσινα!» Βλέπετε συχνά αυτόν τον ισχυρισμό ως δοκιμασμένο. Μεμονωμένα είναι ανοησία. Αυτό που μετράει είναι η **αντίθεση με τη σελίδα γύρω του**. Ένα πορτοκαλί κουμπί σε πορτοκαλί ιστότοπο είναι αόρατο. Ένα μπλε κουμπί στον ίδιο ιστότοπο είναι φάρος.

Διαλέξτε το χρώμα με την υψηλότερη αντίθεση ως προς την κυρίαρχη παλέτα του ιστότοπού σας. Αν η σελίδα σας είναι λευκό + μαύρο + μπεζ, το CTA σας πρέπει να είναι το ένα χρώμα που δεν εμφανίζεται πουθενά αλλού.

Δευτερεύον σημείο: αποφύγετε τα ghost buttons (μόνο περίγραμμα, χωρίς γέμισμα) για κύρια CTA. Φαίνονται κομψά αλλά τα τεστ μετατροπών τα βγάζουν χειρότερα, επειδή σηματοδοτούν «δευτερεύον» στο μάτι. Χρησιμοποιήστε συμπαγές γέμισμα για Προσθήκη στο καλάθι, Ολοκλήρωση παραγγελίας, Αγορά τώρα.

## 5. Μέγεθος γραμματοσειράς και μήκος γραμμής στο κινητό

Τα περισσότερα καταστήματα για κινητά έχουν κείμενο που είναι πολύ μικρό και πολύ πλατύ. Τα τηλέφωνα εμφανίζουν κείμενο με μεγαλύτερη πυκνότητα pixel· αυτό που είναι 16px στον υπολογιστή μοιάζει μικρό στο κινητό.

Κατώτατα όρια τυπογραφίας για κινητά:

- Κύριο κείμενο: τουλάχιστον 16-18px
- Μήκος γραμμής: 40-60 χαρακτήρες ανά γραμμή
- Διάστιχο: 1,4-1,6 φορές το μέγεθος γραμματοσειράς
- Κουμπιά / στόχοι αφής: ελάχιστο ύψος 44px (οδηγία προσβασιμότητας της Apple)

Αν οι επισκέπτες κάνουν pinch για ζουμ στις περιγραφές προϊόντων σας, η γραμματοσειρά είναι πολύ μικρή. Δοκιμάστε σε πραγματικό τηλέφωνο σε απόσταση χεριού, όχι στον εξομοιωτή κινητού του προγράμματος περιήγησης.

## 6. Sticky Προσθήκη στο καλάθι στο κινητό

Κάντε scroll σε μια μακριά σελίδα προϊόντος στο κινητό: μέχρι να διαβάσετε την περιγραφή, το κουμπί Προσθήκη στο καλάθι είναι 3 οθόνες πιο πάνω. Οι πελάτες που έχουν αποφασίσει να αγοράσουν πρέπει τώρα να γυρίσουν πίσω, κάτι που μειώνει το ποσοστό μετατροπής.

Διόρθωση: ένα sticky κουμπί Προσθήκη στο καλάθι που επιπλέει στο κάτω μέρος του viewport του κινητού μόλις το αρχικό κουμπί βγει από την οθόνη. Ένα πάτημα, ανοίγει το καλάθι, χωρίς κυνήγι με scroll.

Υπολογιστής: το sticky καλάθι γίνεται προαιρετικό (το viewport είναι μεγαλύτερο). Κινητό: αδιαπραγμάτευτο.

## 7. Hero εικόνες που δείχνουν το αποτέλεσμα, όχι το προϊόν

Οι περισσότερες ενότητες hero δείχνουν το προϊόν, απομονωμένο, σε λευκό. Εντάξει για φωτογραφία αναφοράς· λάθος για hero. Το hero πρέπει να μεταδώσει το «πώς είναι η ζωή με αυτό» σε 2 δευτερόλεπτα.

Καλύτερα: το προϊόν σε χρήση, σε πλαίσιο, με ένα άτομο ή ένα σκηνικό που ταιριάζει στον αγοραστή-στόχο σας.

- Περιποίηση δέρματος: κάποιος που το χρησιμοποιεί, πρωινό φως, μπάνιο
- Έπιπλα: το κομμάτι σε πραγματικό δωμάτιο, με ζωή
- Ένδυση: πάνω σε σώμα, σε κίνηση, όχι μανεκέν
- Φαγητό/καφές: που ετοιμάζεται ή απολαμβάνεται, όχι φωτογραφία προϊόντος

Το hero με το προϊόν σε χρήση μετατρέπει καλύτερα από το hero με απομονωμένο προϊόν επειδή κάνει μεγαλύτερο μέρος της δουλειάς της φαντασίας για τον αγοραστή. Μπορεί να δει τον εαυτό του να το χρησιμοποιεί χωρίς να χρειάζεται να φανταστεί.

## 8. Συνεπή στοιχεία σε όλο το κατάστημα

Μια συνηθισμένη αποτυχία: οι σελίδες προϊόντων χρησιμοποιούν ένα στυλ κάρτας, οι σελίδες κατηγοριών άλλο, η αρχική τρίτο. Οι πελάτες το αισθάνονται ακόμη κι αν δεν μπορούν να το κατονομάσουν. Τα καταστήματα φαίνονται αξιόπιστα όταν τα ίδια στοιχεία εμφανίζονται με συνέπεια.

Ένα μικρό design system ηλεκτρονικού εμπορίου είναι:

- Ένα στοιχείο κάρτας προϊόντος (σε χρήση στα προτεινόμενα της αρχικής, στα πλέγματα κατηγοριών, στα σχετικά προϊόντα, στα αποτελέσματα αναζήτησης)
- Ένα σύστημα κουμπιών (πρωτεύον, δευτερεύον, τριτεύον· μόνο αυτά τα τρία)
- Ένα σύστημα στυλ επικεφαλίδων (H1, H2, H3· εφαρμοσμένο με συνέπεια)
- Μία παλέτα χρωμάτων (το πολύ 3 χρώματα brand, συν κλίμακα του γκρι)
- Μία τυπογραφική κλίμακα (το πολύ 3-4 μεγέθη)

Τα περισσότερα καταστήματα φτιάχνουν 15 παραλλαγές του καθενός ενώ θα έφτανε μία. Λιγότερες παραλλαγές = πιο επαγγελματική εμφάνιση.

## 9. Η πρώτη οθόνη είναι η διαφήμιση για το scroll

Η ορατή περιοχή στην πρώτη φόρτωση (above the fold) έχει μία δουλειά: να κάνει τον επισκέπτη να θέλει να κάνει scroll. Αυτό είναι όλο. Μην προσπαθείτε να κλείσετε την πώληση στην πρώτη οθόνη.

Τι χρειάζεται above the fold:

- Για ποιον είναι (σε μία γραμμή)
- Τι είναι το προϊόν (οπτικά, μία καλή εικόνα)
- Ένα σαφές CTA (Προσθήκη στο καλάθι ή Ψωνίστε τώρα)
- Ένα καθησυχαστικό σήμα εμπιστοσύνης (βαθμολογία + αριθμός κριτικών, ή παράθεμα από τον Τύπο, ή αξιόλογος πελάτης)

Τι ΔΕΝ χρειάζεται above the fold:

- Πολλαπλά CTA που ανταγωνίζονται για την προσοχή
- Ένα hero carousel που προχωρά αυτόματα κάθε 3 δευτερόλεπτα (δολοφόνος μετατροπών· οι πελάτες παγώνουν όταν το περιεχόμενο κινείται)
- Κάθε όφελος που έχει το προϊόν
- Γκαλερί μαρτυριών

## 10. Αφαιρέστε το carousel από την αρχική σας

Σχετικό με το παραπάνω, αλλά αξίζει δικό του σημείο: τα hero carousel της αρχικής σελίδας είναι νεκρά. Οι μελέτες δείχνουν σταθερά ότι οι εναλλασσόμενες διαφάνειες hero συγκεντρώνουν κλικ στο 1-3% και μόνο η πρώτη διαφάνεια παίρνει σημαντική προσοχή. Διαλέξτε το ένα μήνυμα που θα βάζατε στη διαφάνεια 1· βάλτε το ως στατικό hero. Ξεχάστε τα υπόλοιπα.

## Τι αναλαμβάνει το Shoprocket

Η βιτρίνα με θέματα έρχεται με πρότυπα που ήδη ακολουθούν την οπτική ιεραρχία, την αντίθεση και τα μοτίβα κινητού παραπάνω. Αν χρησιμοποιείτε το widget embed στον δικό σας ιστότοπο, ελέγχετε εσείς τον σχεδιασμό της περιβάλλουσας σελίδας, αλλά:

- Το **συρτάρι καλαθιού** (όχι καλάθι πλήρους σελίδας) είναι η προεπιλογή
- Υποστηρίζεται **sticky καλάθι στο κινητό**
- **Responsive εικόνες προϊόντων** με αυτόματη παράδοση WebP και σωστές αναλογίες διαστάσεων
- **Site builder + 40+ θέματα** ώστε να μη χρειαστεί να χτίσετε το design system από το μηδέν
- Τα **custom CSS hooks** σας επιτρέπουν να προσαρμόσετε το embed στον ιστότοπό σας

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Τι δεν ελέγχει το Shoprocket: τις hero εικόνες σας, τη συνέπεια της φωτογραφίας σας, τα κείμενά σας, το σύστημα χρωμάτων σας. Αυτά είναι δικά σας να τα φτιάξετε ή να τα χαλάσετε.

> **Συμβουλή:** Ανοίξτε το κατάστημά σας στο κινητό τώρα. Πάρτε μία σελίδα προϊόντος. Βλέπετε το Προσθήκη στο καλάθι χωρίς scroll; Είναι η τιμή σαφώς το δεύτερο μεγαλύτερο στοιχείο; Διαβάζετε την περιγραφή χωρίς να στραβώνετε τα μάτια; Αν η απάντηση σε οποιοδήποτε από αυτά είναι όχι, αυτή είναι η πρώτη διόρθωση σχεδιασμού που πρέπει να κάνετε.

## Εν συντομία

- **Ιεραρχία:** το πιο σημαντικό στοιχείο πρέπει να φαίνεται το πιο σημαντικό. Ελέγξτε με το τεστ των 2,5 μέτρων
- **Λευκός χώρος γύρω από το CTA**, όχι παντού για χάρη του
- **Η συνέπεια φωτογραφίας** νικά την ποιότητα φωτογραφίας. Ένα στυλ σε όλο τον κατάλογο
- **Αντίθεση CTA, όχι χρώμα.** Το χρώμα με την υψηλότερη αντίθεση ως προς την παλέτα της σελίδας κερδίζει
- **Τυπογραφία κινητού: κείμενο 16px+, στόχοι αφής 44px+**
- **Το sticky Προσθήκη στο καλάθι στο κινητό** είναι αδιαπραγμάτευτο
- **Οι hero εικόνες δείχνουν αποτελέσματα** (προϊόν σε χρήση), όχι προϊόν σε λευκό
- **Ένα μικρό design system (3 χρώματα, 4 μεγέθη, 3 παραλλαγές κουμπιών)** φαίνεται πιο επαγγελματικό από 15 παραλλαγές
- **Η πρώτη οθόνη πουλά το scroll**, όχι το προϊόν. Ένα σαφές μήνυμα, ένα CTA
- **Σκοτώστε το carousel της αρχικής**. Το στατικό hero κερδίζει

[Ξεκινήστε δωρεάν δοκιμή](https://app-v3.shoprocket.io/signup) αν θέλετε βιτρίνα με θέματα και αυτά τα μοτίβα ενσωματωμένα. 14 ημέρες, χωρίς κάρτα.

---

- HTML version: https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion
- Language: Ελληνικά (el)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)