Skip to Content Contact Us
דף הבית » המחשבות שלי » שבע טעויות UX ו-UI שחשוב להימנע מהן באתר האי קומרס שלכם
שבע טעויות Ux ו Ui 1

שבע טעויות UX ו-UI שחשוב להימנע מהן באתר האי קומרס שלכם

משה רדמן

מאי 14, 2019

UX ו-UI – מה זה?

ממשק משתמש (User Interface – UI) וחווית משתמש (User Experience – UX) נראים לעיתים לבעלי אתרים ואנשי שיווק כ-Buzzwords, אך בפועל, מדובר באלמנטים שיכולים לחרוץ את דינו של האתר שלכם ולהוות סיבה מרכזית להצלחתו או כשלונו. מאידך, UX ו-UI מעולים יכולים לשפר את כל המדדים שלכם באתר- הגדלת זמני שהייה, קיטון באחוזי נטישה, גידול באחוזי ההמרה, גידול בסל הקניות ועוד ועוד. מי מכם שצריך לקחת רגע צעד לאחור – מוזמן לקרוא מאמר קודם שפירסמתי על מהו אתר אי קומרס ואיך מתחילים אחד כזה – זה בטוח יעזור לכם להיכנס לעניינים 😉 

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

חווית משתמש (UX)

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

ממשק משתמש (UI)

עיצוב UI מתייחס ל״פנים״ של האתר, משמע – לאחר שמעצבי ה-UX מכינים את התשתית, מעצב ה-UI צריך להפיח באתר את הרוח, הצבעים וה-DNA שמייחדים אותו. אם נמשיך עם משל בניית דירת המגורים, אז מעצב UI הוא סוג של ״מעצב פנים״- הוא אחראי לדאוג שהאתר יספק את התחושה שבעליו מעוניינים לספק.

פעמים רבות נשאלתי ״מה יותר חשוב, UX או UI?״ והתשובה היא – גם וגם! אין אחד בלי השני ואין מוצר דיגיטלי מוצלח באמת (על אחת כמה וכמה אתר אי קומרס) מבלי שיש לו גם UX מצוין, גם UI מצוין וגם תאימות בין שניהם (לעיתים רבות מידי אני רואה מעצבי UI שמנסים לעצב אתר בצורה מסוימת, גם אם היא יפה, שלאו דווקא תואמת את ה-UX של האתר ואת ״כוונת המשורר״).

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

מה הן 7 הטעויות שחובה להמנע מהן באפיון ועיצוב אתר אי-קומרס?

טעות 1: מעט מידי קריאות לפעולה (Call To Action – CTA)

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

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

הקפידו על עיצוב פשוט ויעיל.

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

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

השתמשו בצורות נוחות שניתן ונגיש ללחוץ עליהן (מלבנים, אליפסות).

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

השתמשו (כשרלוונטי) ב-FOMO* (חרדת ההחמצה – Fear of Missing Out) במטרה להמחיש למשתמש את החשיבות בהזמנה מידית (דיל מיוחד, מלאי אחרון וכו׳).

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

מעט CTA

 

טעות 2: יותר מידי פופ אפים

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

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

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

– נהלו תעדוף פנימי בין הפופ אפים השונים בצורה כזו שמשתמש שרלוונטיים אליו שני פופ אפים שונים יקבל רק אחד מהם (את זה שנראה לכם חשוב ורלוונטי יותר) ולא בטעות את שניהם בו זמנית או זה אחר זה. *בקרוב מאוד מאמר שמתמקד בעבודה נכונה עם פופאפים – גם בהיבטי UX ו-UI וגם בהיבטי CRO. רוצה עדכון עם עליית המאמר? הירשמו לניוזלטר השבועי שלי.

יותר מידי פופ אפים

 

טעות 3: התאמה לא מספקת למובייל

פעמים רבות בעבר כתבתי על חשיבותו ושליטתו של המובייל, אבל במקרה הזה אף פעם אין ״יותר מידי״ – המובייל הוא המלך! הגלישה ממחשבים שולחניים ולפטופים נמצאת במגמת דעיכה תמידית, בעוד הגלישה במובייל רק צומחת משנה לשנה; אי לכך, חשוב מאוד להתאים את האתר שלכם בצורה המיטבית למובייל. זה כבר מזמן לא התאמה למובייל או Mobile First, אלא Mobile Only – תתחילו מהמובייל ורק אחרי שהאתר מתאים בצורה המקסימלית למובייל, אז ״תגזרו משמעויות״ ותעבדו על הדסקטופ.

נושא ה-UX מאוד רלוונטי בבואנו להתאים אתר אי קומרס למובייל, שכן בניגוד לקונספציה המקובלת באתרים רספונסיביים (אתרים מותאמים למובייל) שבה כלל האלמנטים שמופיעים באתר ״הרגיל״ (האתר ל-Desktop) פשוט נדחסים לאתר במובייל, בפועל, איש UX טוב יידע לוותר על אלמנטים מסוימים מהאתר ״הרגיל״ וכלל לא להביא אותם לידי ביטוי במובייל, בעוד שאת האלמנטים החשובים באמת הוא יידע להבליט מאוד במובייל.

טעות 4: קצר וקולע ולא ארוך וצולע…

הגולשים שלכם רוצים לקבל מידע בצורה מהירה וקלה לעיכול, הם לא מעוניינים להשיג מידע באמצעות קריאה אינסופית של טקסט (כמובן שהנ״ל רלוונטי לאתרי B2C שמפוקסים על מכירות, ולא בהכרח נכון במקרים של אתרים שתכליתם תוכן מקצועי, העשרה וכו׳), גם אם אתם מוכרים מוצרים ש״מחייבים״ טקסטים ארוכים – כמו במקרה של חברות ביטוח, בנקים, מימון וכו׳. תעבדו קשה מאוד על מנת לזקק את מה שחייב ותפעלו במטרה להנגיש את הטקסטים כדי לא להעיק על המשתמש – תעיקו? הוא פשוט יעזוב אתכם ויחפש את מבוקשו במקום אחר. דוגמה מעולה (!) להנגשה של טקסט משפטי (שחייב להיות ארוך ומייגע) ניתן למצוא בדוגמה הבאה מ-WIX: החבר׳ה ב-WIX הוסיפו לתנאי השימוש של השירות את ItsThatEasy# שזה בעצם תכל׳וס (סוג של אמ:לק) של כל אחת מהפסקאות ב״שפה של בני אדם״. זה גאוני כי מצד אחד הם ״סימנו וי״ למחלקה המשפטית וכתבו את הטקסטים הארוכים והמשפטיים ומאידך זה מנגיש למשתמש ומזקק לו מה כל פסקה רוצה ממנו ואיפה שווה להתעמק בקריאה (אם בכלל) ומשרת את היעד שלכם לספק חוויה טובה יותר למשתמשים שלהם.

טעות 5: שימוש בפונטים לא קריאים, גדלים לא נכונים וצבעים לא נכונים

לעיתים רבות מידי אני נתקל באתרים יפים, מרשימים, חוויתיים שבסופו של דבר ״נופלים בקטנות״- טקסט לבן על כפתור תכלת, טקסט שחור על כפתור בצבע נייבי, פונטים לא אחידים שמשדרים חוסר מקצועיות ועוד. חשוב לזכור שבסופו של יום, אתר אי קומרס טוב עם UX ו-UI נכונים לא צריך להיות הדבר הכי יפה בעולם (תסתכלו על אמזון, בוקינג, הוטלס, עלי אקספרס ואחרים). אנשי שיווק – דיגיטל רבים מידי מייחסים חשיבות מכרעת לאלמנטים כמו פונטים, פלטת צבעים וכו׳, אך מבחן המציאות מוכיח שיש נקודות אופטימום כלשהי בין נראות מרשימה ומיוחדת לבין נוחות ופשטות; שימוש, ולא בהכרח היפה ביותר, הוא הנגיש ביותר ו / או הממיר ביותר. הטיפ היחידי שלי בגזרה הזו הוא פשוט – אחרי שבניתם, אחרי שעברתם ועיצבתם והשקעתם, תעברו ״עם האצבע״ כפתור-כפתור, Funnel-Funnel, מסך-מסך ותוודאו שכל הכפתורים, כל הפונטים, כל הצבעים תומכים את השפה הכללית של האתר ומשרתים את ה-KPI’s שלכם. דוגמה טיפוסית שיצא לי להיתקל בה פעמים רבות: באתר אי קומרס, בעמוד התחברות לחשבון (אחרי שמשתמש כבר מילא עגלה ורוצה להתקדם לצ׳ק אאוט), פעמים רבות אתה רואה שלושה כפתורים (באותו גודל ואותה בולטות):

האחד – התחברות לחשבון

השני – יצירת משתמש

והשלישי – כניסה כאורח

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

מצ״ב דוגמה לאתר SaaS מצוין (אתר הבית של דרופבוקס) שברור לגמרי מה-UX וה-UI שלו מה מטרת העמוד (לגרום לאנשים להירשם).

הרשמה ברורה

* ראוי לציין כי הנושא של ״כניסה כאורח/ת״ הוא נושא שלאט לאט מתפוגג והאתרים הגדולים ביותר בעולם – asos, Zalando, אמזון ואחרים לא מאפשרים היום כלל רכישה כאורח/ת. כמובן שזה תלוי תחום, תדירות שימוש וכו׳, אבל המגמה היא ברורה – כולם רוצים Data וכולם רוצים לקוחות רשומים ומאושרי דיוור על מנת לייצר איתם אינטראקציה בהמשך (יצירת עסקה נוספת עם לקוח קיים זולה פי 7! מגיוס לקוח חדש).

טעות 6: תמונות חסרות ו/או באיכות ירודה

הגולשים שלכם “לא פראיירים” והם מצפים מכם לעמוד בשורה אחת עם המותגים המובילים ביותר בעולם (מזכיר לכם שאמזון, ebay, asos, Booking ואחרים נמצאים במרחק קליק אחד מהם). אם אתם משתמשים בתמונות מתוך מאגרים כלליים (Shutterstock וכדומה), או פשוט תמונות באיכות גרועה, הגולשים שלכם ירגישו את חוסר המקצועיות וזה ללא ספק יפגע להם בחוויה הכללית שהם חווים מהאתר שלכם. הקפידו על תמונות באיכות טובה, על מבחר כמה שיותר גדול של תמונות, על שילוב וידאו / צילום 360 במקומות שזה רלוונטי. כמובן שחשוב לוודא שהתמונות לא כבדות מידי, שכן תמונות במשקל גבוה במיוחד יכולות לפגוע דרמטית בביצועים והמהירות של האתר.

תמונות חסרות או באיכות ירודה

 

טעות 7: עבודה עם ״דעות״ ו״תחושות בטן״

אם הגעתם עד פה, זה אומר שאתם באמת מבינים את החשיבות של UX ו-UI מצוינים לאתר האי קומרס שלכם ו״הרווחתם״ את הזכות לשמוע את הטעות החמורה מכולן שחובה להימנע ממנה בעולם הדיגיטלי – טכנולוגי שלנו. בניגוד למצב שהיה נהוג בעבר בו ״יחידי סגולה״ ידעו ״לפצח״ ו״להרגיש״ את הצרכנים בצורה המדויקת ביותר, העידן החדש שבו הכל מדיד והכל בר שינוי במהירות, דורש פחות ״תחושות בטן״ ויכולות מיסטיות ויותר עבודה על בסיס Data ונתונים. אז תמנעו מהטעות הגדולה מכולם ואל תעבדו על פי הרגשה או תחושה, אלא רק על בסיס Data, Data ועוד קצת Data… יש התלבטות? תבדקו! יש שתי חלופות? תעלו אותן ותראו מה עובד? יש השערה חדשה של עובד/ת חדשים? אל תשללו! תעלו ניסוי לאוויר ותנו ל-Data להחליט…

לסיכום

כפי שציינתי לעיל, UX ו-UI מצוינים הם אבן יסוד בהצלחה של אתר אי קומרס (יחד עם שיווק נכון, תמחור, תמהיל מוצרים ועוד), וזה מסוג המקומות שאני ממליץ ללקוחותינו לא להתפשר בהם ולעבוד עם אנשי ה-UX וה-UI הטובים ביותר. מלבד טעויות UX/UI שדיברתי עליהן כאן, במאמר אחר שלי תמצאו 10 טעויות נפוצות באתרי אי קומרס שכדאי להימנע מהן. אז אומנם לא הצלחתי להעביר את כל התורה של UX ו-UI מצוינים לאתרי אי קומרס, אבל מקווה שלפחות הצלחתי למנוע מכם לעשות את 7 הטעויות הקריטיות ב-UX ו-UI באתר שלכם. לעוד מהלכים שיעיפו את אתר האי קומרס שלכם לשמיים תוכלו לקרוא ממש כאן או בקטגוריית “אי קומרס” בבלוג שלי. תהנו!

לכל המאמרים בנושא אי-קומרס באתר >>

שאלות ותשובות

מזה UX?

חווית משתמש (UX) – עיצוב UX מתייחס ל״שלד״ של האתר, משמע – לכל אותם רכיבים / קומפוננטות ואלמנטים בתוך האתר שלכם – קרוסלות, סרגלי חיפוש, תמונות, באנרים, כפתורים וכו׳. אם נקביל את זה לתהליך בניה של דירת מגורים, אז ניתן לומר שאיש/ת ה-UX הם מי שמשרטטים את הדירה, את הקירות, את החיפויים, את המסדרונות ואת המעברים, אך הם אינם מתעסקים בעיצוב הפנים, בצבע או בריהוט.

מזה UI?

ממשק משתמש (UI) – עיצוב UI מתייחס ל״פנים״ של האתר, משמע – לאחר שמעצבי ה-UX מכינים את התשתית, מעצב ה-UI צריך להפיח באתר את הרוח, הצבעים וה-DNA שמייחדים אותו. אם נמשיך עם משל בניית דירת המגורים, אז מעצב UI הוא סוג של ״מעצב פנים״- הוא אחראי לדאוג שהאתר יספק את התחושה שבעליו מעוניינים לספק.

מה יותר חשוב UX או UI ?

התשובה היא – גם וגם! אין אחד בלי השני ואין מוצר דיגיטלי מוצלח באמת (על אחת כמה וכמה אתר אי קומרס) מבלי שיש לו גם UX מצוין, גם UI מצוין וגם תאימות בין שניהם (לעיתים רבות מידי אני רואה מעצבי UI שמנסים לעצב אתר בצורה מסוימת, גם אם היא יפה, שלאו דווקא תואמת את ה-UX של האתר ואת ״כוונת המשורר״). אז אחרי שחידדנו את ההבדלים בין UX ל – UI ואת החשיבות של שניהם כמקשה אחת, בואו נצלול ישר לשבע טעויות ה-UX ו-UI שחשוב מאוד להימנע מהן באפיון ועיצוב אתר אי קומרס.

איך פונטים וצבעים משפיעים על האתר שלי?

לעיתים רבות מידי אני נתקל באתרים יפים, מרשימים, חוויתיים שבסופו של דבר ״נופלים בקטנות״- טקסט לבן על כפתור תכלת, טקסט שחור על כפתור בצבע נייבי, פונטים לא אחידים שמשדרים חוסר מקצועיות ועוד. חשוב לזכור שבסופו של יום, אתר אי קומרס טוב עם UX ו-UI נכונים לא צריך להיות הדבר הכי יפה בעולם (תסתכלו על אמזון, בוקינג, הוטלס, עלי אקספרס ואחרים). אנשי שיווק - דיגיטל רבים מידי מייחסים חשיבות מכרעת לאלמנטים כמו פונטים, פלטת צבעים וכו׳, אך מבחן המציאות מוכיח שיש נקודות אופטימום כלשהי בין נראות מרשימה ומיוחדת לבין נוחות ופשטות; שימוש, ולא בהכרח היפה ביותר, הוא הנגיש ביותר ו / או הממיר ביותר. הטיפ היחידי שלי בגזרה הזו הוא פשוט - אחרי שבניתם, אחרי שעברתם ועיצבתם והשקעתם, תעברו ״עם האצבע״ כפתור-כפתור, Funnel-Funnel, מסך-מסך ותוודאו שכל הכפתורים, כל הפונטים, כל הצבעים תומכים את השפה הכללית של האתר ומשרתים את ה-KPI's שלכם. דוגמה טיפוסית שיצא לי להיתקל בה פעמים רבות: באתר אי קומרס, בעמוד התחברות לחשבון (אחרי שמשתמש כבר מילא עגלה ורוצה להתקדם לצ׳ק אאוט), פעמים רבות אתה רואה שלושה כפתורים (באותו גודל ואותה בולטות): האחד - התחברות לחשבון השני - יצירת משתמש והשלישי - כניסה כאורח כאשר בפועל, ברור לגמרי שהאינטרס של האתר הוא שהמשתמש ירשם או יתחבר, והצפה של שלוש אופציות בהיררכיה יחסית זהה רק מקשה עליו להחליט ומרחיקה אותו מההרשמה, אך למרות זאת אותם אתרים ״שכחו״ לתמוך בזה ב-UX וב-UI של האתר.

האם זה הכרחי להתאים את האתר שלי למובייל?

חד משמעית כן. פעמים רבות בעבר כתבתי על חשיבותו ושליטתו של המובייל, אבל במקרה הזה אף פעם אין ״יותר מידי״ - המובייל הוא המלך! הגלישה ממחשבים שולחניים ולפטופים נמצאת במגמת דעיכה תמידית, בעוד הגלישה במובייל רק צומחת משנה לשנה; אי לכך, חשוב מאוד להתאים את האתר שלכם בצורה המיטבית למובייל. זה כבר מזמן לא התאמה למובייל או Mobile First, אלא Mobile Only - תתחילו מהמובייל ורק אחרי שהאתר מתאים בצורה המקסימלית למובייל, אז ״תגזרו משמעויות״ ותעבדו על הדסקטופ. נושא ה-UX מאוד רלוונטי בבואנו להתאים אתר אי קומרס למובייל, שכן בניגוד לקונספציה המקובלת באתרים רספונסיביים (אתרים מותאמים למובייל) שבה כלל האלמנטים שמופיעים באתר ״הרגיל״ (האתר ל-Desktop) פשוט נדחסים לאתר במובייל, בפועל, איש UX טוב יידע לוותר על אלמנטים מסוימים מהאתר ״הרגיל״ וכלל לא להביא אותם לידי ביטוי במובייל, בעוד שאת האלמנטים החשובים באמת הוא יידע להבליט מאוד במובייל.

 

 

Back top top