12 דברים שחשוב לדעת על עיצוב חנות איקומרס (עכשיו כש AI עושה את העבודה)
לפני שנתיים כתבתי רשימה של 12 דברים שכל מותג איקומרס צריך לבקש מהמעצב לפני שהמוקאפים היפים מתחילים, כי מוקאפים תמיד משקרים קצת. וכשאני אומרת "קצת" אני מתכוונת להרבה: הם מראים לכם את הכניסה לעולם מכירות האונליין בגרסה הכי טובה שלה: הכל מאוד סימטרי, השם של המוצר קצר, המחירים עגולים, עגלת קניות עם ספרה בודדת, וליד אייקון החשבון האישי איזור שמתאים בדיוק ל-5 התווים של "הי, דן".
אבל המציאות שפוגשת את קטלוג האתר שלכם שונה. לא רק כי לא לכל הלקוחות קוראים דן או שי או גל, אלא כי יש לכם שמות ארוכים של מוצרים, ותתי כותרות, ורמות שונות של מחירים, יותר הנעות לפעולה בעמוד מאשר רק הוספה לסל, שלא לדבר על מבצעים ותוכן וכל מה שקשור לכך שהאתר הוא אתר מכירות דינמי.
מאז זרמו הרבה פיקסלים בענן, וחלק גדול מהעבודה הזו עברה מבן אדם עם קובץ פיגמה לכלי AI עם תיבת פרומפט. הייתם חושבים שזה יסגור את הפער בין המוקאפ למציאות. זה לא קרה. זה אפילו הגדיל את הפער. תבקשו מכל כלי AI לעיצוב או לקוד עמוד מוצר באיקומרס, ותקבלו את אותן ברירות מחדל אידיאליות שפעם הגיעו ממעצב שרודף אחרי סקרינשוט לפורטפוליו, רק מהר יותר ובקנה מידה גדול יותר. הרשימה שלמטה היא אותה רשימה. היא רק נהייתה רלוונטית יותר.
1. פלטת צבעים והיררכיה (ועכשיו, גם הפונט)
ב-2024 היה לי הרבה מה לומר על ספרי מותג שעולים לכם (הלקוחות) אלפי אם לא עשרות אלפי שקלים, אבל שממשיכים להראות איזה יופי הלוגו שלכם ייראה על משאית וכרטיס ביקור, ולא מתייחסים לדיגיטל. תמיד יש 2-3 צבעי דגל (ואם אחד מהם אפור בהיר בכלל זה הזוי), פונט שאתם צריכים לשלם עליו אבל בתכל'ס לא נבדק איך הוא נראה על מסכים, במיוחד מסכי מובייל, והכי הרבה קיבלתם הגדרה של צבע הכפתור של הוספה לסל. אבל מה עם לינקים? כפתורים משניים? מצבי hover? או הגוון הספציפי של הודעות שגיאה? זה עדיין נכון. עכשיו פשוט יש עכשיו גרסה חדשה ורועשת יותר של אותה בעיה, וראיתם אותה גם אם עוד לא היה לה שם.
תפתחו שלושה אתרי איקומרס שנוצרו על ידי AI בשלושה טאבים. אני מהמרת על אחת משתי תוצאות: רקע בז' או לבן שמנת ואלמנטים ירוקים, או רקע תכלת עם אלמנטים בגווני כחול וסגול.
יש סיפור אמיתי מאחורי הגרסה הכחולה-סגולה, וכדאי להכיר אותו כי הוא ממחיש את הנקודה טוב יותר ממה שאני יכולה. היוצר של Tailwind, אדם ווית'ן, הודה בפוסט שהתפרסם ב-2025 והתפשט מהר, שהוא מתחרט שבחר גוון אינדיגו ספציפי כצבע ברירת המחדל של כפתורים ב-Tailwind UI לפני כמה שנים. ההחלטה הקטנה הזו הפכה בשקט לאחד הצבעים הנפוצים ביותר בדאטה שעליו התאמן כל כלי AI לעיצוב, וזו בדיוק הסיבה שכל כך הרבה ממשקים שנוצרים על ידי AI מגיעים כברירת מחדל לאיזשהו גוון של כחול-סגול. הכלי לא בוחר צבע. הוא נותן לכם ממוצע סטטיסטי של כל אתר שהוא אי פעם ראה.
לפונט יש את אותו סיפור. תבקשו מחמישה כלי AI דף בית, וספרו כמה מהם נותנים לכם גרסה כזו או אחרת של אותו sans-serif נקי, מעוגל, חסר אישיות, לרוב Inter או Roboto. זה לא שהכלי אוהב את הפונט הזה. זה שהפונט מופיע כל כך הרבה פעמים במה שהוא התאמן עליו, שהוא נקרא כברירה הכי בטוחה והכי ממוצעת שיש. כבר יש שם לכל התופעה הזו, צבע ופונט ופריסה ביחד: Sea of Sameness. ברגע ששמעתם את זה, אי אפשר יותר לא לראות את זה. בזמן האחרון אני שמה לב יותר ויותר לאתרים בחו"ל שגודל הפונט בהם הופך להיות 10. נכון שהמספר של המשקפיים שלי גדל, אבל זה כאילו היתה שם החלטה שהם הפסיקו לעצב לבני אדם. ממילא סומכים על האייג'נטים שיקראו אותם אז למי אכפת עוד בן אנוש disposable.
שום דבר מכל זה לא אומר להימנע מכלי AI. זה אומר להפסיק לקבל את ההצעה הראשונה שלהם. אם מערכת הצבעים והפונט שלכם מגיעים ישר מהפרומפט הדיפולטיבי, אין לכם מותג, יש לכם את אותו אתר בז'-ירוק או כחול-סגול כמו כל חנות אחרת שנבנתה באותו כלי החודש הזה. וזה מחזיר אותנו לתיקון האמיתי: להגדיר את כל הפלטה בעצמכם, לא רק 2-3 צבעי דגל, אלא את כל הרשימה.
תבחרו פונט ואל תסתפקו בברירות מחדל. נכון שבעברית ההיצע מוגבל יותר, אבל כדאי להשקיע. אתם רוצים שהאתר שלכם יהיה פונקציונלי ובלתי נשכח. לא עוד טאב באוסף ה-AI slop של מישהו.
אותו הדבר לגבי אייקונים. אל תספקו באייקון של העלה של קלוד, או באייקוני הדיפולט של שופיפיי. במיוחד (!) לא כשהם לא רלוונטיים למסרים.
2. שמות מוצרים
עדיין רלוונטי. תנו למעצב שלכם, או לפרומפט שלכם, את שם המוצר הכי ארוך שאתם באמת מוכרים, למשל "טלוויזיה סמסונג 65 אינץ' SMART 4K UE65NU8000", לא פלייסהולדר נקי. תחליטו מה קורה אחרי שתי שורות במובייל, ותוודאו שלחיצה ארוכה או הקשה חושפת את השם המלא. מוקאפים שנוצרו על ידי AI נוטים, אם כבר, יותר לטקסט פלייסהולדר נקי בן שמונה תווים ממה שמעצב אנושי אי פעם עשה, כי זה מה שנראה טוב בדמו. אל תשכחו שעכשיו, עם הגדרות ה Agentic Commerce, אתם חייבים לפרוס את המידע על המוצר בצורה מיטבית כדי שהמוצרים שלכם ייסרקו כמו שצריך.
3. שם משתמש
אותה הערה כמו קודם. "היי, דן" מתאים יפה ליד אייקון עגלה. "היי, אלכסנדרה" זה המבחן האמיתי. תבקשו לראות את זה. מעצב אנושי בנה את המסך או שזה פרומפט, זה לא משנה.
4. מחירים
תחליטו על פורמט המחיר שלכם לפני שאתם מסתכלים על מסך אחד: עם נקודה עשרונית או בלי, ספרה אחת אחריה או שתיים, איך נראה מחיר מבצע לצד המחיר המקורי. אחר כך תבדקו את זה במספר אמיתי בן 4 ספרות, לא את המספר העגול שמופיע כברירת מחדל בכל מוקאפ שנוצר שתראו אי פעם.
יש לכם מחירים לחברי מועדון? האם אתם מציגים 3 רמות של מחיר? האם המחירים אצלכם מוצגים כ"החל מ-" או טווח של מחירים?
המעצבים שלכם לא יודעים את זה. גם קלוד לא. רק אתם יודעים את החוקים העסקיים שלכם – וכל אלה צריכים להשתקף בעיצוב שתקבלו.
5. כמות פריטים בעגלת הקניות
תבקשו לראות 88 באייקון העגלה, לא 1. מסכים נראים הכי טוב כשהכול נוח למי שבנה אותם, אדם או מודל. אתם לא מנהלים פורטפוליו עיצוב, אתם מנהלים עסק.
6. שילוב שפות
לנקודה הזו מגיע יותר מקום ב-2026 ממה שהיה לה ב-2024. כלי AI לעיצוב ולקוד מאומנים בעיקר על ממשקים שמבוססים על אנגלית ואותיות לטיניות, וזה ניכר ברגע שמערבבים עברית, ערבית, או כל פריסת RTL. הפונטים חוזרים לברירת מחדל גנרית, היישור נשבר, ואף אחד לא תופס את זה כי הדמו נראה טוב באנגלית. אם הקטלוג שלכם מכיל שמות מוצרים וטקסטים שמערבבים שפות, והקהל שלכם קורא מימין לשמאל, זה כבר לא פרט של "נחמד שיהיה", זו הגדרה חשובה שצריך להתייחס אליה כבר בהתחלה (כולל הגדרות של פונט באנגלית).
7. Style Guide
זו הנקודה שבאמת השתנתה הכי הרבה. ב-2024 אמרתי לכם להשיג מדריך סטייל כדי שהמפתחים שלכם לא יצטרכו לנחש. זה עדיין נכון, אבל זה ממעיט בערך של מה שמדריך סטייל הוא היום. היום זו שכבת הקלט המילולית של כלי AI: design tokens, מצבי קומפוננטות, כללי ריווח, ניראות של פופ אפ, Tooltip וכו'. אם תתנו (אתם או המעצב שלכם) לכלי AI סטייל גייד חלקי, הוא לא רק יעשה מסך אחד לא עקבי, הוא פשוט ימציא ברירות מחדל משלו. אתם לא רוצים את זה.
8. מצבים ריקים (Empty States)
זה לא התפקיד של המפתח שלכם לפתור את זה, והמעצב שלכם צריך להתייחס לזה גם אם הוא לא קופירייטר. איך נראית עגלת הקניות באתר שלכם אם עדיין אין בה אף פריט? איך נראה חיפוש עם אפס תוצאות? אלה רגעים בהם יכול להיות ללקוחות שלכם חיבור רגשי למותג, ואף כלי, אנושי או אחר, לא יעלה אותם בעצמו אם לא תבקשו.
9. טפסים
תשאלו איך נראה טופס ריק ואז איך נראה טופס מלא. איך נראה דרופדאון, ואיך נראית שגיאה, או חיווי חיובי, ואיפה הם ממוקמים ביחס לשדה בטופס. גם המפתחים שלכם צריכים להראות לכם את כל אלה, ותתעקשו גם שם על הודעות חיווי בעברית ובמיקום מדוייק לשדה אותו יש למעלה (ולא בחלק העליון של העמוד למען השם!)
10. חיוויים
בהמשך לתצוגת חיוויים בטופס, יש עוד כל כך הרבה מקומות באתר שנדרש להציג בהם חיווי – זה הבסיס של כל דבר דיגיטלי תכל'ס: מה קורה כשמוצר נוסף לעגלה או ל wish list? מה אם הלקוח נרשם לרשימת התפוצה? איך נראה פופ אפ של אישור או הודעת שגיאה?
11. תגיות
חדש, חזר למלאי, לא במלאי, מבצע, ללא מע"מ, ללא גלוטן, 1+1, שופינג IL. זו לא רשימת השמות הנפוצים בישראל של משרד הפנים, זה אלמנט בסיסי של תקשורת עם הלקוחות שלכם באתר, ותגיות יכולות גם מקום לשילוב של אישיות המותג שלכם. תבנו בעצמכם את טבלת העדיפויות באקסל: באיזה סדר ובאיזו תצוגה מוצגות שתי תגיות בו זמנית – למשל, מוצר שחזר למלאי וגם 30% הנחה (רמז – כל מה שקשור להנחות ומבצעים תמיד צריך לבלוט יותר). זה בדיוק סוג הלוגיקה המובנית שמתורגמת בקלות לפרומפט או לקובץ tokens היום, אבל המעצב שלכם צריך לדעת שיש אפשרות לשתיים בו זמנית ולכן צריך לתת להן צבעים שונים למשל. גם פה, אל תבקשו שיראה לכם תגית עם "חדש" (ר' "הי, דן") אלא את סוג המבצע עם הטקסט היותר ארוך.
12. צורת כפתור לעומת צורת תגית
הנה עוד פאק של AI שאני מזהה כבר בלא מעט אתרים, וזו גם בעיה של מעצבים שלא מעצבים לדיגיטל. כפתור הוא כפתור. אל תעשו שום דבר באתר שנראה כמו כפתור, אם הכוונה שלכם שהמשתמש לא ילחץ עליו. תגיות טקסט, תיאורי מוצר – כל אלה יקבלו כל צורה אחרת, תביאו מתומנים מבחינתי. רק שלא ייראו כמו כפתור.
תראו את האתר הזה של מותג חדש בעולמות המשקאות האמריקאי – כל האלמנטים פה בעמוד המוצר אינם כפתורים. אני חוזרת, אינם כפתורים. למרות שהאלמנטים בתכלת ממש קוראים להקלקה עליהם.
וזה שסוף סוף יש כפתור אבל הוא באפור? מה יגידו פיקסלי הקיר?
לסיכום
לפני שאתם פותחים את כלי ה-AI לעיצוב שבחרתם לפרויקט חנות האיקומרס שלכם, או שתכף אתם סוגרים עם מעצב לפרוייקט, תתנו לו קודם את הדאטה האמיתית הכי מכוערת שלכם: שם המוצר הכי ארוך שלכם, פורמט המחיר האמיתי שלכם, ההתנהגות האמיתית של העגלה שלכם, התוכן הרב-לשוני שלכם. לא כי הכלי חכם יותר ממה שמעצב אנושי היה. כי הוא עושה בדיוק את אותן טעויות שמעצב ממהר עושה, רק מהר יותר, ובקנה מידה של כל האתר שלכם במקום מסך אחד.
רוצים לראות עוד דברים מעניינים מעולמות האיקומרס? יש לי בלוג חדש בשם dee2see – סקירת חוויות קנייה באתרי DTC עם רעיונות והשראות שאפשר להעתיק בקלות (:
