מכירים את הרגע הזה שבו אתם מבינים שמה שקורה בחוץ מצריך מכם שינוי פיזי של ממש? זה מין רגע מזוקק של תובנה שאוקיי, צריך לעשות פה שינוי כי מה שעבד עד עכשיו כבר לא עובד לנו. בעיקר כשמדובר בשינוי טכנולוגי, לא תפישתי. כל ההקדמה הפילוסופית הזו באה כדי לתאר מה שקורה בתקופה האחרונה בשוק המשקאות האמריקאי – מקטגוריה של קפה, תחליפי חלב ומשקאות תוססים פה ושם, קמה וצמחה מפלצת של עוד ועוד תתי קטגוריות כשבראשם משקאות פונקציונליים (תשתו מים ועל הדרך גם תכניסו לגוף אלקטרוליטים למשל), משקאות מבוססי פטריות, תחליפי קפה, בירות ויין ללא אלכוהול (אז מה הכיף), משקאות אנרגיה, סודה עם או בלי גזים וכו' וכו'. אבל מה קורה כשדפי המוצר עם התבניות המוכרות של שופיפיי ו – WooCommerce לא מותאמים לדרישות הסחר המתפתח?
בחירה של יותר מפרמטר אחד היא לא דבר חדש – אנחנו מכירים את זה מאתרי אופנה למשל – צבע ומידה. או אתרי קניית חזיות – צבע, מידת קאפ והיקף. באתרי תוספי מזון אנחנו גם מכירים בחירה של כמות ואפשרות לקנייה חד פעמית או מנוי (אפילו בארץ!) – אבל כשמדובר בשוק המשקאות, יש להם כמה אתגרים שמתחילים לסבך את העסק.
קודם כל – טעם. באתרי אופנה כחול כהה הוא כחול כהה. אדום הוא אדום. אבל מה קורה כשצריכים להציג טעם? במיוחד כשלכל מותג יש המצאות של טעמים משלו – היביסקוס לימוני, אגאבה תוססת, אפרסק מנומנם? או כשמדובר בגדלים לא קונבנציונליים כמו שתכף תראו? תוסיפו את האלמנט הזה לבחירות נוספות שהלקוח אמור לעשות – גודל, כמות ותדירות, ותגיעו לעמוד קטגוריה שנראה ככה:
באתר של Open Water עמוד הקטגוריה מציג את כל אפשרויות הקנייה של כל מוצר. שימו לב לגודל שנקרא Tallgirl שמובן (פחות או יותר) רק אחרי שמבינים שיש גם גודל של פחית רגילה. ואז גם להבין שהמספר שבתוך העיגול שליד תמונת הפחית הוא לא הכמות שיש בפחית אלא הכמות שיש ב – Case אחד. כלומר כמה השקעה קוגניטיבית הלקוח צריך לעשות כדי בסך הכל לקנות מים!
בפוסט של היום נראה כמה דוגמאות לאתרים של מותגי משקאות שלא קיבלו את הממו על חוויית קנייה זורמת (סטגדיש!) והפכו את האירוע לשילוב של עבודה על אקסל ובלבול מתמשך:
הירוק היום ירוק מאוד
עמוד המוצר של המותג Blue Bear, או כמו שאתם רואים – Green Bear. הרעיון נחמד – בואו ניקח את הצבע המרכזי של המוצר הספציפי ונשנה אלמנטים בעמוד המוצר שיתאימו לאותו הצבע. אבל מה קורה כשכל האלמנטים נהיים באותו הצבע? בשלוש מילים – חוסר היררכיה ויזואלית. ביותר משלוש מילים – וואיי וואיי איזה בלגן קחו את המעצב לשיחה בבקשה (או תנו פרומפט חדש לקלוד דחוף).
חמשת תגי היתרונות (Immunity, Hydration, Refreshing, Balanced, Focus), האייקונים, כל אפשרויות גודל האריזה, הפאנל של יצירת המנוי, כל הטקסטים וכפתור ההוספה לסל, כולם באותו צבע או בשני גוונים של אותו הצבע בדיוק.
עד שמגיעים בכלל לכפתור הקנייה, העין כבר למדה לדלג על ירוק, כי אין שום אלמנט בעמוד שיעצור אותה. התיקון לא מסובך: לתת לירוק של הפחית להישאר בכל מקום שהוא כבר נמצא בו, אבל להגדיר צבע נוסף, עבור הדברים הבודדים שהלקוח באמת צריך לזהות מהר – גודל האריזה הנבחרת, צורת הקנייה (מנוי מול קנייה בודדת), כפתור ההוספה לסל. כל השאר יכול להישאר שקט – טקסטים בשחור, אייקונים בשחור, וכן הלאה.
במלאי או לא במלאי?
באתר של Unwell עמוד המוצר הוא אכן unwell. גם כאן יש חזרה על אותם צבעים, מה שיוצר עומס ויזואלי – אבל זה עוד ניחא. המסגרות של כפתורי בחירת הטעמים הן מקווקוות. עכשיו אנחנו מכירים צורות מקווקוות – כל ספר בסיסי של לימודי UX מסביר שצורה כזו מייצגת לא במלאי, בקרוב, מקום ריק שאפשר לגרור לתוכו אלמנטים, וכו'. אז לא רק שצריך לעבור ולקרוא את השם של כל אחד מהטעמים (אפשר היה לשלב אייקון למשל), הצורה שלהם נתפשת כאילו הם לא במלאי וחבל.
התיקון כמעט מביך בפשטותו: לתת לכל כפתור בעמוד את אותה מסגרת של קו אחיד. אפשר לתת צבע שונה לכל טעם, לא רק אייקון. אם המוצר לא במלאי, רק אז המסגרת יכולה להיות מקווקוות והמילוי של הכפתור באפור.
גם פה אפשר לשנות את הטקסטים בעמוד לשחורים, וגם לוותר על המסגרות של האייקונים בחלק העליון של העמוד, מה שיהפוך אותו לקל יותר לסריקה ולביצוע רכישה במקום להיתקל בבלבול קוגניטיבי.
במלאי או לא במלאי 2
מהאנשים שהביאו לכם את במלאי או לא במלאי 1 (שראינו בדוגמה למעלה), קבלו את גרסת ההמשך: האתר של Journee מציג את השלב הבא באבולוציית הבילבול – גם כפתור הוספה לסל, וגם כפתור לא במלאי. החתול של שרדינגר, אבל בפחית ולא בקופסה.
זה אולי רק באג – אבל זה באג רציני. ואם הלקוח שלכם נתקל בבעיה בעמוד הזה ובעמודים האחרים של האתר, יש סיכוי טוב שהוא לא יעשה פה קנייה בסופו של דבר כי לא באמת יהיה ברור לו אם המוצרים יגיעו אליו או לא.
הנה דוגמה לאיך כן לבנות עמוד כזה
New Brew פותרים בדיוק את האתגר של בחירת טעם, גודל אריזה, מנוי או לא, ובכל זאת גורמים לשלושתם להרגיש קלים באופן מפתיע. אין פה שום דבר מתוחכם או מתחכם – רק היררכיה ויזואלית ברורה ומראה אחד לכל החלטה, כך שאף אחת מהן לא הייתה צריכה להתחרות באחרות או להוסיף לעומס הקוגניטיבי של בחירת פחית סודה:
הטעם הנבחר, Yuzu, מוצג על רקע ירוק צהבהב מלא שגדול באופן ברור מארבעת התמונות הקטנות יותר של הטעמים האחרים לצידו, כך שהעין מוצאת את הבחירה הנוכחית עוד לפני שקוראים את המילה Yuzu.
גודל האריזה משתמש באייקונים של קופסאות מוערמות יחד עם המספרים בתחתית האייקון – בקופסה אחת יש 12 פחיות – ועוד קופסאות מצטברות ככל שהכמות עולה, כך שהקפיצה בכמות נקלטת עוד לפני החישוב. האריזה היחידה שאזלה מהמלאי, של ה- 4 פחיות, מקבלת ייצוג ויזואלי ברור של סטטוס מלאי.
בחירת מנוי או קנייה חד פעמית גם הוא משתמש בצורה נבונה בצבעוניות: האופציה הנבחרת מוצגת בצבע ליים מלא, והשניה מוצגת בתוך תיבה פשוטה עם מסגרת ועם התגית SAVE 20% בצורה נקייה וברורה. כפתור ההוספה לסל בצבע שונה לגמרי מהצבעים שמעליו ומשלים את הפלטה בצורה יפהפיה כך שברור ללקוחות איפה צריך ללחוץ.
אם מחפשים תבנית להעתיק, זו האחת שלכם.
מה למדנו מזה?
-
הצבע הבולט ביותר בעמוד צריך להיות שמור לכפתור שיכניס לכם כסף. אם התגיות, האייקונים, הטקסטים וכל אפשרויות הבחירה חולקים את אותו צבע עם כפתור ההוספה לסל, שום אלמנט בעמוד לא נתפש כחשוב יותר מאחרים.
-
אל תעצבו אופציה זמינה במסגרת מקווקוות. הטיפול הזה כבר אומר "עוד לא מוכן" בכל מקום אחר באינטרנט, ולשאול אותו בשביל טעם שאפשר לקנות ממש עכשיו עולה לכם במכירות עוד לפני שמישהו קרא מילה.
-
תנו ללקוחות שלכם רמזים ויזואליים שיקלו עליהם את סריקת העמוד – בלוק של צבע צבע, אייקונים שמשתנים לפי כמות, קו חוצה על מה שאזל וכל דבר שנותן למשתמש שלכם להבין מייד מה קורה מבלי להתחיל להקליק על כל מוצר או להתאמץ ולקרוא כל שם או תיאור.
