עיצוב אתרים רספונסיביים הוא כבר ממזמן לא טרנד אלא פרקטיקה הכרחית לאתרים בימינו. עם האחוזים שהולכים וגוברים של משתמשים אשר גולשים בעיקר בסמארטפון או בטאבלט אי אפשר להזניח את הניראות של האתר בפלטפורמות השונות. האתר שלכם חייב להיראות טוב ולעבוד בצורה אופטימלית בכל גודל מסך.
מה זה בעצם עיצוב רספונסיבי?, זוהי גישה לעיצוב לאתרים שמטרתה לספק את חווית הצפייה האופטימלית למגוון כמה שיותר רחב של מכשירים ומסכים בגדלים שונים, דסקטופ, מובייל וטאבלטים. אתר עם "עיצוב תגובתי" הוא אתר אשר יתאים את התצוגה שלו לסביבת השימוש בו ע"י ממשק דינאמי המבוסס על פרופורציות בין האלמנטים באתר.
התכנון של העיצוב הרספונסיבי והאלמנטים בו צריכים להילקח בחשבון כבר בשלב אפיון האתר ולהילקח בחשבון כחלק מתיעדוף הפי'צרים והתכנים. תזכרו, אתר טוב זה אתר שממיר מבקרים ללקוחות או לפחות הופך מבקרים ללידים. אתר שלא מצליח להמיר גולשים ולהעלות את המכירות שלכם, הוא לא אתר שפועל.
איך לעצב רספונסיבית מבלי לאבד המרות?
בתהליך אפיון האתר למסך המחשב הביתי כבר עברנו שלב קשה וכואב של "פוקוס" בו אנו צריכים לתעדף תכנים ואלמנטים ולשמור על חלקם בעוד אנו מוותרים על חלקים אחרים. התהליך הזה היה קשה אז, ועכשיו הוא הופך להיות אפילו קריטי וקשה יותר.
כאשר אנחנו מסתכלים על האתר שלנו בדרך לעיצוב רספונסיבי אנחנו צריכים לחשוב מחדש על אלמנטים שונים באתר שלנו בידיעה שאנחנו צריכים לחדד אותו יותר לכיוון מטרה ברורה ופשוטה ולוותר על כמה שיותר אלמנטים שמהווים הסחת דעת.
.png)
הפורמטים השונים של עיצוב רספונסיבי
מה המטרה היחידה שאנחנו רוצים מהעמוד - אם במחשב אני יכול לנצל יותר שטח כדי להעביר את המסר שלי ואולי להעביר אפילו מסר מורכב יותר, כאן אנחנו צריכים לפשט אותו כמה שיותר. תחשבו על המטאפורה הבאה - אתם גוללים את המסך מהקצה העליון שלו, יש לכם רק כיוון אחד ללכת בו - למטה. כלומר, אני צריך לספר את הסיפור שלי בצורה כזו שכשאני אסיים לגלול אני אגיע לפאנצ' ליין. במילים אחרות, לאורך העמוד סיפרתם לי כמה טוב מוצר מסויים, הוכחתם לי מה שרציתם, שכנעתם אותי ואני מגיע לסוף הסיפור - לקריאה לפעולה. אם אני אתקל בקריאה לפעולה נוספת לפני הפאנצ' אני כנראה אבצע אותה ולא את זו שרציתם בסוף. אם משהו ברצף של הסיפור לא משכנע אותי, אני אולי אפילו לא אגיע למטה עד הסוף. תנטוו את הסיפור של העמוד שלכם לעבר מטרה אחת בלבד - הקריאה לפעולה של סוף העמוד.
תמונות או טקסט - מסך הסמארטפון או הטאבלט הוא נדל"ן יחסית מצומצם. לא תוכלו לשלב כמויות טקסט גדולות יחד עם הרבה תמונות. יש לך מקום למעט תמונות ומעט טקסט, לעיתים, אחד אפילו צריך להחליף את השני. איזה אלמנט משרת אתכם יותר טוב? תמונות גדולות או טקסט קצר? (שימו לב, מדובר בטקסט קצר, לא טקסט בכללי). קריאה של טקסטים ארוכים במובייל זו חוויה מעייפת שאתם לא רוצים להעביר את הלקוח שלכם. אז מה יפעל יותר טוב עבורכם, תמונה או טקסט?
בלי מריחות - יש לכם מעט מאוד מקום, הגיע הזמן לבדוק איזה חלק מהסיפור שלכם הוא הכרחי לחלוטין ואיזה פשוט "נחמד שיש". תחשבו שנייה על הדוגמה הבאה - הסיפור של שלגיה של דיסני. אפשר לספר אותו בפורטרוט מה שייקח שעה וחצי לפי דיסני, אבל באותה מידה אפשר גם להעביר את כל העלילה בכמה נקודות קצרות. אילו נקודות הייתם טורחים לספר מהסיפור כדי שהוא לא יאבד מהעלילה שלו? מה הייתם משמיטים ומה הייתם כותבים? ככה בדיוק אתם צריכים להסתכל על המוצר או השירות שאתם מספקים. מהו התוכן המדוייק ביותר שהלקוח צריך לדעת כדי להגיע למסקנה שמשתלם לו לקנות או להשאיר פרטים אצלכם?
4 אלמנטים שאסור לוותר עליהם:
1. אמצעי תשלום בולטים - אמצעי תשלום בולטים משמשים לשני דברים, לכוון אנשים למצב של קנייה. בצורה די מעניינת ברגע שגולשים מזהים את הלוגו של paypal, אמריקן אקספרס, מאסטרקרד וכו', המוח משנה מצב והם כבר פתוחים יותר לקנייה. התחושה של "אני כבר עושה את זה" הרבה יותר מוחשית והם יותר מונחי קנייה.
רק החשיפה של אמצעי התשלום כבר מקדמת אתכם לכיוון המכירה
2 ביקורות - ביקורות על המוצר פועלות לטובתכם בשתי צורות, הראשונה היא שמדובר בגורם בונה אמון, "הנה כבר יש לקוחות מרוצים", השנייה היא שמדובר בעוד תוכן שיווקי שאתם יכולים להוריד מהנדל"ן המצומצם שלכם. אם יש לכם ביקורות שמעידות על הנקודות בהם אתם גאים במיוחד במוצר שלכם, תנו להן לעשות את העבודה.
3. במידה ויש אמצעי משלוח - כישראלים אנחנו רגישים לנקודה הזאת אפילו יותר מלקוחות אחרים. השאלה הראשונה שעולה לנו בראש אחרי מציאת מוצר אהוב באתר מכירות בחו"ל הוא - האם הם עושים משלוחים לארץ? הפתרון לשאלה הזאת תקף גם בתוך ישראל. התחושה שאני עוד רגע יכול לקבל את המוצר אליי רק על ידי לחיצת כפתור היא מניעה לפעולה. הבלטה של אמצעי המשלוח מביאה את הקונה לתחושה של "כבר קניתי ואני מחכה למוצר" גם אם הם עוד לא שלפו את כרטיס האשראי. הוסיפו את אמצעי המשלוח כדי לתת ללקוחות להבין שאתם יודעים מה חשוב להם ושאתם חושבים על טובתם עוד לפני הקנייה.
4. כפתורי "קריאה לפעולה" גדולים - לא משנה איך אתם מתכננים לעצב את העמוד שלכם, לא משנה איך אתם מתעדפים תוכן, הכפתור קריאה לפעולה תמיד חייב להיות גדול, קל ללחיצה, ברור ומשכנע. מדובר באחד האלמנטים המשפיעים יותר בעמוד שלכם. אם כפתור הקריאה לפעולה לא תופס את העין, אתם מסתכנים באיבוד קונים רציני.
המעבר לעיצוב רספונסיבי, מעבר לכך שיחשוף אתכם לקונים חדשים ויעזור לכם למקסם את הפוטנציאל של האתר שלכם, גם יספק לכם תובנות חדשות על החברה והמוצר שלכם. ככל שתלמדו יותר טוב מה הפוקוס שלכם בשלבי המכירה (תמונות לעומת טקסט, אילו משפטים פועלים יותר טוב וכו') יהיה לכם הרבה יותר כוח גם כשתחזרו לבחון מחדש את התכנים שלכם גם על מסך המחשב הגדול. פוקוס גדול יותר מוביל לזיקוק התועלות שלכם מול הלקוח מה שבסופו שלדבר, יביא להרבה יותר לקוחות.
התכנים הכי טובים שלנו אצלך במייל, לא תצטרף/י?
בטח שכן!