# עשר החלטות עיצוב באיקומרס שמעלות המרה באופן מדיד

> לא 'תשתמש ביותר רווחים', לא 'תבדוק את צבע הכפתור'. בחירות ספציפיות של היררכיה חזותית, צילום, טיפוגרפיה ונייד שמזיזות המרה בחנויות אמיתיות.

Ryan Badger - 3 בנובמבר 2024 - 7 דקות קריאה

## החלטות עיצוב שבאמת מזיזות המרה

מאמרי עיצוב בדרך כלל נחלקים לשני מחנות. "השתמש בהרבה רווח לבן!" (עמום מדי) או "תריץ A/B על 47 צבעי כפתור" (מפורט מדי). אף אחד מהם לא עוזר למי שמסתכל על החנות שלו ותוהה למה היא ממירה ב-1.3%.

הפוסט הזה עוסק בהחלטות עיצוב חזותי ספציפיות שמזיזות באופן מדיד המרה בחנויות איקומרס. לא טעם. לא אסתטיקת מותג. בחירות של פריסה, היררכיה, צבע וטיפוגרפיה שאו עוזרות לאנשים לקנות או מפריעות להם.

## 1. היררכיה חזותית: הדבר החשוב ביותר צריך להיראות הכי חשוב

רוב החנויות נותנות משקל חזותי שווה לכל דבר בדף המוצר: טקסט גוף ב-16px, מחיר ב-18px, כותרות ב-18px. כל אלמנט מתחרה; אף אחד לא מנצח. לעין אין נקודת כניסה.

התיקון: הדבר שאתה רוצה שילחצו עליו צריך להיות הגדול ביותר, בעל הניגודיות הגבוהה ביותר בדף.

- כותרת המוצר: 28-36px
- מחיר: 20-24px, מודגש, מוגדר בבירור
- כפתור הוספה לעגלה: ברוחב מלא בנייד, האלמנט הכבד ביותר חזותית בדף
- תיאורים, רשימות מפרט, מידע על משלוח: 14-16px, שקטים יותר

כשאתה מסתכל על דף המוצר שלך מרחק של 2.5 מטר (כן, תתרחק אחורה ממש), אתה יכול להבחין מהי הפעולה הראשית? אם הדף כולו נראה כמו מרק אפור, ההיררכיה שלך שבורה.

## 2. רווח לבן סביב הקריאה לפעולה, לא בכל מקום

"השתמש ביותר רווח לבן" מוצג כטיפ עיצוב אוניברסלי. מה שבאמת חשוב הוא רווח סביב הכפתורים והאלמנטים המרכזיים, לא רווח לשמו.

- לפחות 40-60px ריווח סביב אזור הוספה לעגלה
- המחיר יושב במרחב נקי משלו, לא צפוף עם טקסט אחר
- לתמונות המוצר נותנים מקום (לא קצה לקצה בלי שוליים)

דחס את כל השאר (ביקורות, מידע על משלוח, מוצרים קשורים) בצפיפות רבה יותר. הם משניים. אזור הקריאה לפעולה מנצח בכך שהוא היחיד שיש לו מקום לנשום.

## 3. צילום מוצר עקבי מנצח צילום מוצר "טוב יותר"

קטלוג של 50 מוצרים שבו התמונות כולן שונות במקצת (רקעים שונים, תאורה שונה, רמות זום שונות) נראה חובבני. קטלוג שבו כל תמונה באותה זווית, אותה תאורה, אותו חיתוך ואותו רקע נראה מקצועי.

זו בעיית כמות, לא בעיית איכות. 5 רבי המכר שלך יכולים לקבל תמונות גיבור מלוטשות. כל השאר צריך להצטלם באופן זהה, גם אם קצת פחות זוהר. חוסר עקביות משדר "חנות קטנה ולא אמינה" יותר מאיכות נמוכה.

כלל מעשי:

- תמונה ראשית: רקע לבן או חלק, ממורכזת, אותו חיתוך בכל הקטלוג
- תמונות משניות: לייפסטייל / בשימוש, גוון עקבי
- כל התמונות באותו יחס גובה-רוחב ואותה רזולוציה

## 4. ניגודיות של הכפתור, לא צבע הכפתור

"כפתורים כתומים ממירים X% יותר מירוקים!" אתה רואה את הטענה הנבדקת הזו הרבה. בבידוד היא שטויות. מה שחשוב הוא **הניגודיות מול הדף שמסביב**. כפתור כתום באתר בעיצוב כתום בלתי נראה. כפתור כחול באותו אתר הוא משואה.

בחר את הצבע בעל הניגודיות הגבוהה ביותר מול הפלטה הדומיננטית של האתר שלך. אם הדף שלך לבן + שחור + בז', הכפתור שלך צריך להיות הצבע האחד שלא מופיע בשום מקום אחר.

נקודה משנית: הימנע מכפתורי רפאים (קווי מתאר בלבד, בלי מילוי) לקריאות לפעולה ראשיות. הם נראים אלגנטיים אבל נבחנים רע בהמרה כי הם משדרים "משני" לעין. השתמש במילוי מלא להוספה לעגלה, ביצוע הזמנה, קנה עכשיו.

## 5. גודל טקסט ואורך שורה בנייד

לרוב החנויות בנייד יש טקסט קטן מדי ורחב מדי. טלפונים מציגים טקסט בצפיפות פיקסלים גבוהה יותר; מה שהוא 16px בדסקטופ מרגיש קטן בנייד.

רצפת הטיפוגרפיה בנייד:

- טקסט גוף: 16-18px לפחות
- אורך שורה: 40-60 תווים בשורה
- גובה שורה: פי 1.4-1.6 מגודל הפונט
- כפתורים / אזורי מגע: גובה מינימלי של 44px (הנחיית הנגישות של Apple)

אם מבקרים צובטים כדי להגדיל את תיאורי המוצר שלך, הטקסט קטן מדי. בדוק בטלפון אמיתי במרחק זרוע, לא בהדמיית הנייד של הדפדפן.

## 6. הוספה לעגלה דביקה בנייד

גלול למטה בדף מוצר ארוך בנייד: עד שקראת את התיאור, כפתור ההוספה לעגלה נמצא 3 מסכים למעלה. לקוחות שכבר החליטו לקנות צריכים עכשיו לגלול חזרה, וזה מוריד את שיעור ההמרה.

התיקון: כפתור הוספה לעגלה דביק שצף בתחתית אזור התצוגה בנייד ברגע שהכפתור המקורי יוצא מהמסך. נגיעה אחת, העגלה נפתחת, בלי ציד בגלילה.

בדסקטופ: עגלה דביקה היא אופציונלית (אזור התצוגה גדול יותר). בנייד: לא למשא ומתן.

## 7. תמונת גיבור שמראה את התוצאה, לא את המוצר

רוב אזורי הגיבור מציגים את המוצר, מבודד, על לבן. בסדר לתמונת ייחוס; לא נכון לגיבור. הגיבור צריך להעביר "איך החיים עם זה" תוך 2 שניות.

טוב יותר: המוצר בשימוש, בהקשר, עם אדם או סביבה שמתאימים לקונה היעד שלך.

- טיפוח עור: מישהו משתמש בזה, אור בוקר, חדר אמבטיה
- רהיטים: הפריט בחדר אמיתי, כזה שגרים בו באמת
- ביגוד: על גוף, בתנועה, לא על בובה
- אוכל/קפה: בהכנה או בהנאה, לא תמונת מוצר

גיבור של מוצר בשימוש ממיר טוב יותר מגיבור של מוצר מבודד כי הוא עושה יותר מהעבודה הדמיונית עבור הקונה. הוא יכול לראות את עצמו משתמש בזה בלי להצטרך לדמיין.

## 8. רכיבים עקביים בכל החנות

כשל נפוץ: דפי מוצר משתמשים בסגנון כרטיס אחד, דפי קטגוריה בסגנון אחר, ולדף הבית יש סגנון שלישי. לקוחות חשים באי-העקביות הזו גם אם אינם יכולים לנקוב בה. חנויות נראות אמינות כשאותם רכיבים מופיעים בעקביות.

מערכת עיצוב קטנה לאיקומרס היא:

- רכיב כרטיס מוצר אחד (בשימוש במוצרים מומלצים בדף הבית, בגריד קטגוריות, במוצרים קשורים, בתוצאות חיפוש)
- מערכת כפתורים אחת (ראשי, משני, שלישוני; רק שלושת אלה)
- מערכת סגנונות כותרות אחת (H1, H2, H3; מיושמת בעקביות)
- פלטת צבעים אחת (3 צבעי מותג לכל היותר, ועוד סקאלת אפור)
- סולם טיפוגרפי אחד (3-4 גדלים לכל היותר)

רוב החנויות יוצרות 15 וריאציות של כל אחד כשאחד היה מספיק. פחות וריאציות = מראה מקצועי יותר.

## 9. המסך הראשון הוא המודעה לגלילה

לאזור הנראה בטעינה הראשונה (מעל לקפל) יש תפקיד אחד: לגרום למבקר לרצות לגלול. זה הכול. אל תנסה לסגור את המכירה במסך הראשון.

מה שצריך מעל לקפל:

- למי זה מיועד (בשורה אחת)
- מהו המוצר (חזותית, תמונה טובה אחת)
- קריאה לפעולה ברורה אחת (הוסף לעגלה או קנה עכשיו)
- אות אמון מרגיע אחד (דירוג + מספר ביקורות, או ציטוט מהעיתונות, או לקוח בולט)

מה שלא צריך מעל לקפל:

- כמה קריאות לפעולה שמתחרות על תשומת לב
- קרוסלת גיבור שמתקדמת אוטומטית כל 3 שניות (הורגת המרה; לקוחות קופאים כשהתוכן זז)
- כל יתרון שיש למוצר
- גלריות המלצות

## 10. הסר את הקרוסלה מדף הבית

קשור לאמור לעיל, אבל ראוי לנקודה משלו: קרוסלות גיבור בדף הבית מתות. מחקרים מראים בעקביות ששקופיות גיבור מתחלפות מקבלות הקלקות ב-1-3%, ורק השקופית הראשונה מקבלת תשומת לב משמעותית. בחר את המסר האחד שהיית שם בשקופית 1; שים אותו כגיבור סטטי. ותוותר על השאר.

## מה Shoprocket מטפלת בו

החנות המתארחת מגיעה עם תבניות שכבר פועלות לפי עקרונות ההיררכיה החזותית, הניגודיות והנייד שלמעלה. אם אתה משתמש בהטמעת הווידג'ט באתר שלך, אתה שולט בעיצוב הדף שמסביב, אבל:

- **מגירת עגלה** (לא עגלה בעמוד מלא) היא ברירת המחדל
- **עגלה דביקה בנייד** נתמכת
- **תמונות מוצר רספונסיביות** עם אספקת WebP אוטומטית ויחסי גובה-רוחב תקינים
- **בונה אתרים + 40+ תבניות** כדי שלא תצטרך לבנות מערכת עיצוב מאפס
- **ווים ל-CSS מותאם** מאפשרים לעצב את ההטמעה שתתאים לאתר שלך

```
<!-- 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 לא שולטת בו: תמונות הגיבור שלך, עקביות הצילום שלך, הקופי שלך, מערכת הצבעים שלך. אלה שלך ליצור או להרוס.

> **טיפ:** פתח את החנות שלך בטלפון עכשיו. קח דף מוצר אחד. אתה רואה את ההוספה לעגלה בלי לגלול? המחיר ברור שהוא הדבר השני בגודלו? אתה יכול לקרוא את התיאור בלי לצמצם עיניים? אם התשובה לאחד מאלה היא לא, זה תיקון העיצוב הראשון לעשות.

## בקצרה

- **היררכיה:** האלמנט החשוב ביותר צריך להיראות הכי חשוב. בדוק עם מבחן 8 הרגליים (כ-2.5 מטר)
- **רווח לבן סביב הקריאה לפעולה**, לא בכל מקום לשמו
- **עקביות בצילום** מנצחת איכות צילום. סגנון אחד בכל הקטלוג
- **ניגודיות הכפתור, לא צבעו.** הצבע בעל הניגודיות הגבוהה ביותר מול פלטת הדף שלך מנצח
- **טיפוגרפיה בנייד: טקסט גוף 16px+, אזורי מגע 44px+**
- **הוספה לעגלה דביקה בנייד** אינה למשא ומתן
- **תמונות גיבור מראות תוצאות** (מוצר בשימוש), לא מוצר על לבן
- **מערכת עיצוב קטנה (3 צבעים, 4 גדלים, 3 וריאנטים של כפתורים)** נראית מקצועית יותר מ-15 וריאנטים
- **המסך הראשון מוכר את הגלילה**, לא את המוצר. מסר ברור אחד, קריאה לפעולה אחת
- **הרוג את קרוסלת דף הבית**. גיבור סטטי מנצח

[התחל ניסיון חינם](https://app-v3.shoprocket.io/signup) אם אתה רוצה חנות מעוצבת עם העקרונות האלה מובנים בה. 14 ימים, בלי כרטיס.

---

- HTML version: https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion
- Language: עברית (he)
- 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), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.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/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)