יעלה ויבוא חתן האירוע, חליף החליפה, מוכתר הווסט. הגענו לאיפה שקורה הקסם – עמוד המוצר. יש פה מלא דברים מעניינים! נתחיל עם האתר של Suit Supply. קדימה:
עמוד מוצר – הנעות לפעולה + גלריה
כבר עם הכניסה לעמוד המוצר, ה"אווירה" של העמוד עושה וואו. תראו כמה שקט יש בצד הימני וכמה כבוד יש לתמונה ולמוצר. כל החלק הימני, המאוד מינימליסטי, נגלל לכל אורך העמוד עם הגלילה שלו.
יש פה לא מעט הנעות לפעולה, וההיררכיה שלהן עובדת בדיוק לפי תבנית הסריקה של המשתמש – דומה לצורת האות F. בהתחלה אנחנו סורקים את התמונה, עוברים ימינה לפרטים ולפעולות לפי היררכיה – בחירת מידה, אפשרות לקסטם, שמירה למועדפים – ממשיכים חזרה לחלק השמאלי ואז רואים גם את כפתור ה Shop the Look. גם אתם סרקתם ככה? מזל טוב, אתם אנושיים (:
יש מוצרים שיש להם ואריאציות של צבעים – גם אלה מוצגים בעמוד המוצר עם תמונת הפריט לבחירת הצבע.
תראו משהו מעניין – במובייל יש הנעה לפעולה מרכזית אחרת – בחירת מידה. אין פה את הכפתור של הקסטומיזציה. זה לא רק בפורמט הסטיקי של הפאנל, אלא כהחלטה בעמוד המוצר עצמו. אל תדאגו, האפשרות לקסטם תופיע בשלל מקומות לאורך תהליך הקנייה. אם יש לכם כמה הנעות לפעולה בעמוד המוצר, מעבר להיררכיות נכונות, דיוק במיקרו קופי ובדיקות A/B Testing למה עובד טוב יותר, שווה לשקול גם אפשרות להוריד את אחד הכפתורים אם אפשר "לפצות" על זה בהמשך התהליך וכמובן בהתאם ליעדים עסקיים.
חוץ מזה, תראו את התמונה (אולי קשה קצת לראות פה) – אבל זה זום יפהפה על הבד ועל הפרטים, וממש אפשר "להרגיש" איך הבד יישב על הגוף.
עוד דוגמה לתמונה משלל גלריית התמונות של המוצר – זום אין על הבד עצמו, עם טקסט הסבר על ה benefits שלו ללקוח. יפהפה.
יש אפילו התייחסות לאיפה החליפה נתפרה. Zegna הוא מותג חליפות גברים ובגדי גברים בן 110, שכל כולו איכות ו Lux. ברור שיתייחסו לזה בעמוד המוצר. זו חליפה של $1,000 וכל תמיכה בסיפור שמאחורי הבד, המותג, המעצב וכו' מאפשרת ללקוח להוריד חסמים בדרך לקנייה, וחרטת קנייה ישר אחרי.
Shop The Look
עוד פיצ'ר נהדר שמתגלה בגלילה – Shop the Look. אנחנו רואים את החליפה על מספר דוגמנים כשכל אחד מהם לובש אותה עם פריטים אחרים. מתחת לתמונת הדוגמן יש את כל הפריטים אותם הוא לובש, כך שאפשר לעשות קנייה מרוכזת של כל ה Look. דוגמה נוספת:
מידות
אז עפנו על החליפה והתקדמנו לצעד הבא – בחירת מידה.
תראו את האתגר פה. ה מ ו ן מידות. במקום לדחוס את כל המידות בעמוד המוצר (למרות שיש לזה פתרון), פותחים פה פאנל עם כפתורים ברורים, נוחים להקלקה גם במובייל, ובאים יחד עם כל סט הכלים הנדרש בכל הקשור למידות, המרות, הסברים וכו' .המקבילה של המורכבות הזו באיקומרס היא עמוד מוצר של חזיות, שם הלקוחה בוחרת גם את ההיקף וגם את גודל הקאפ – זוכרים שבראש רשימת הסיבות להחזרה נמצאת הסיבה הפשוטה "הגודל לא מתאים לי"? ומכאן תבינו למה מושקעים כל כך הרבה מאמצים – החל מפתרונות UX לסטארטאפים שבאים לתת פתרונות למציאת המידה המדוייקת של הלקוח.
שימו לב לכפתור ה Size Chart משמאל למטה (אפשר היה להדגיש אותו יותר, זה נכון)
לכל דגם באתר של Suit Supply יש טבלת מידות משלו (גם כי מדובר במותגים שונים עם מידות שונות). גם במובייל טבלת המידות נראית טוב ושימושית (רק די כבר עם האפור בהיר, בחייאת! זו החלטה עיצובית לא טובה ב-כ-ל-ל בדיגיטל כי הכל נראה inactive), כולל האפשרות לגלול בצורה נוחה את טבלת המידות, אפשרות להמיר בהקלקה פשוטה בין אינצ'ים לסנטימטרים, ניראות טובה של הטבלאות (הפרדה שנוצרת בשימוש בלבן ואפור לסירוגין).
אם במקרה שאלתם את עצמכם מה זה Shoulder Width? או כל שאלה אחרת לגבי המונחים בצד השמאלי של הטבלה, בהקלקה על המונח עוברים למסך הסבר + איך מודדים. פשוט פשוט פשוט!
בחרנו את המידה – כפתור ההוספה לסל נצבע בשחור (כלומר, נהיה active), ואפשר להוסיף לסל. אבל יש פה עוד 2 דברים נהדרים – פירוט של מה כוללת החליפה (ואילו מידות נבחרו), ותוך כמה זמן היא תגיע לבית הלקוח. כל המידע נפרש בצורה ברורה ועונה על כל השאלות שהלקוח לא ידע שהוא צריך כרגע תשובות עליהן.
עוד משהו קטן אם אנחנו כבר כאן – רואים את האייקון של הקסטומיצזיה ליד חלק מהמידות פה (36L לדוגמה) – בהקלקה על המידה יש הסבר ברור שאפשר להזמין את המידה באמצעות קסטומיזציה בלבד.
בכלל באתר יש מה שנקרא Size Passport – מדידה והתאמה של המידות. אחרי שמזינים את הנתונים פעם אחת, האתר יודע להציג כבר את הפריטים המתאימים לנתונים שבחשבון הלקוח. אפשר גם ללכת למדידות בחנות הפיזית – אני רוצה להאמין שמדידה שם מעדכנת כרטיס לקוח באתר הקיים.
הוספה לסל
אחרי הוספה של פריט לסל מופיע החיווי על ההוספה, יחד עם תצוגה מרהיבה של הפריטים שכבר ראינו ב Shop the Look למעלה.
קונפיגורטור חליפה
אם לא עפתם על כל ה UX של האתר הזה עד עכשיו, ו/או לא התחלתם תוכנית חסכון כדי לרכוש לעצמכם ז'קט יום אחד, תראו את הקונפיגורטור של Suit Supply. יש כל כך הרבה ניואנסים בחליפות Custom Made, לרמת התפר של הכפתור הסמוי בחגורה והצבע של החוט של רקמת ראשי התיבות של הלקוח מתחת לכפל של הצווארון. זה משוגע.
גם פה יש לי הרבה מה לומר על השימוש באפור בהיר, אבל בגדול החלוקה של המידע והפעולות ברורה. לכל חלק בחליפה יש את הפרמטרים לקיסטום שלו, ובצד שמאל אפשר לראות את המחיר הסופי ושוב, את זמן הגעת החבילה ללקוח.
גם במובייל הכל מאוד ברור וכל בחירה של כל אחד מהפרמטרים משנה את תמונת המוצר הגדולה (שאפשר גם לעשות עליה זום).
לכל אפשרות בחירה יש תמונה מלבד טקסט ההסבר, ואם יש תוספת מחיר לבחירה מסויימת, היא תוצג באופן ברור. יש בקופניגורטור הזה ירידה לפרטי פרטים, ממש ממליצה לנסות בעצמכם.
אפשר להוסיף את החליפה המקוסטמת לסל הקניות, ואפשר לסיים את הקנייה באחת מהחנויות הפיזיות של Suit Supply. שירות hi end למוצרים hi end. כלומר הלקוח יכול לעשות את כל הבחירות והדיוקים באתר, ולקבוע פגישת מדידה סופית בחנות. שירים יד (בשרוול מעוצב!) מי שזוכר את הפרק ב"חברים" כשג'ואי מגלה שלא כל החייטים לוקחים מידות כמו שלקחו אצלו (:
גם בקונפיגורטור יש אפשרות ל UpSale – המוצר המקורי הוא חליפת שני חלקים. פה יש גם הצגה יפה של ווסט, כחלק כבר מה Flow של התאמת החליפה. מה זה עוד $229 אחרי שכבר השקענו את כל הזמן הזה?
סיכום של הקונפיגוטור כל הבחירות שנעשו והעלות הסופית, ואפשרות הוספה לסל או סיום הקנייה / מדידה סופית בחנות פיזית.
סל קניות
המוצר המקוסטם מוצג בסל הקניות לפי כקבוצה המורכבת מפריטים נפרדים. כמו שצריך.
שני דברים אחרונים:
אחרי כל הטוב הזה, אפשר לתת פידבק על משהו אחד קטן:
סגירת סל קניות "צף" (תצוגת הסל על גבי עמוד שאינו עמוד הסל עצמו) – אפשר לסגור את סל הקניות באמצעות הקלקה על החלק השמאלי (המוחשך), אבל הפעולה האינטואיטיבית לסגירה היא לחיצה על כפתור ה X. הבעיה פה היא שהאיקס שאתם רואים מוחק את המוצרים מסל הקניות.
אפשר לפתור את זה באמצעות הוספה פשוטה של כפתור סגירה משמאל למעלה (יכול להיות גם המילה Close אם לא בא לכם לבלב את הלקוחות עם יותר מידי איקסים)
.
הפרטים הקטנים – ואחד אחרון טוב לסיום – האייקון של סל הקניות הוא בין מזוודה לשקית בוטיק יוקרתית. נייס.
עפתי, כבר אמרנו? נסיים את הפוסט מ Supply אחד לאחר:
