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

• היא מגיעה עם כל הפיצ'רים שאתר איקומרס צריך Built-In, בלי תחכומים ובלי הרבה תקלות.
• בזכות היותה קוד סגור, התוספים שנבנו עבורה נבדקו, מה שמפחית את אי-הודאות בהתאמה למערכת ועבודה יותר חלקה איתה.
• המערכת מתוחזקת ע"י Shopify העולמית, מה שמוריד מכם את הצורך לדאוג לתחזוק ולעדכון האתר.
• מערכת ניהול תוכן קלה ופשוטה לניהול מוצרים, קטגוריות ואף פיצ'רים חיצוניים

למה מעצבים כ"כ חוששים מ-Shopify?

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

אבל, זוהי הנחת יסוד לא נכונה. קיימת השפעה רבה על נראות אתרי Shopify, וחשוב שלא להזניח את החלק הזה.

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

אספנו לכם 5 טיפים הנוגעים לעיצוב אתר ה- Shopify שלכם, כדי להצליח ולשלב בין הידע המקצועי של אנשי UX/UI שלכם למבנה התבניתי של המערכת:

1. בחרו תבנית נכונה

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

2. תמונות, תמונות, תמונות

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

השקיעו בצילום הפריטים, בחרו תמונות איכותיות ומעניינות, שמציגות את המוצרים שלכם בצורה נחשקת, רלוונטית ויפה.
*בונוס: השקיעו ברשתות החברתיות הרלוונטיות לעסק (אינסטגרם/ פינטרסט) וממשקו אותם לאתר. התמונות מרגישות אמיתיות ומחוברות לעולם האמיתי 🙂

 

3. הפחיתו עומס ויזואלי מהגולשים

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

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

 

4. עזרו לגולשים להגיע ליעד

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

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

 

5. השתמשו בצבעים רלוונטיים

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

עלינו לשים לב שאנחנו בוחרים בקפידה את צבעי הכפתורים וה-CTA באתר. גם אם צבע המותג הוא אדום, את כפתור ההמשך נבצע בירוק או בכל צבע חיובי אחר.

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