התאמת אתרי אינטרנט למובייל

דצמבר 01, 2013 רועי ואקנין

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

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

נפחי התנועה ברשת מפלטפורמות ניידות (טלפונים, סמארטפונים, טאבלטים וכו' - ולמעשה כל מכשיר בעל מסך קטן משמעותית מזה של מחשב רגיל) נמצאים בעלייה מטאורית בשנתיים האחרונות. עפ"י הערכות שונות, עד 2015 מספר הגולשים ברשת מפלטפורמות ניידות יהיה גדול ממספר הגולשים מפלטפורמות שולחניות, וגוגל אף צופה כי רף זה ייחצה עד סוף 2013. כרבע מסך הגולשים מפלטפורמות ניידות בארה"ב עושים זאת אך ורק מפלטפורמות ניידות, ובישראל ללמעלה מ51% מבעלי הניידים יש סמארטפונים.

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

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

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

בהסתמך על המגמות שזוהו באתרים רבים בעת ביצוע המחקר לדוח זה, אנו ממליצים בחום על התאמת אתרים לפלטפורמות ניידות בשיטת Responsive design. מהלך זה הינו השלב הבסיסי והחשוב ביותר בהתאמת שרותי החברה לניידים. במקביל אליו, ניתן ואף רצוי לשקול יצירת web application או אפליקציה מלאה, המשלימה את שרותי האתר (לפרטים נוספים על סוג השירותים המתאימים לאפליקציה ואלו המתאימים לאתר מותאם לניידים- ראו סעיף אפליקציות).

להלן סיכום המגמות הכלליות בתחום אתרי המובייל, כמו גם המלצותינו בנושא:

  • יש לתת עדיפות לבניית אתרים ב Responsive design- זוהי השיטה המועדפת כיום על מנועי חיפוש, ובנוסף, ביחס לשיטות האחרות- היא מעניקה חווית משתמש אופטימלית, חסכון כספי לאורך זמן וניהול תוכן יעיל בהרבה.
  • במקרה של בנייה בטכניקה אחרת- חובה לבצע תיוג מלא של כל העמודים למניעת אובדן כוח ועונשין מכפילויות.
  • בעת הבנייה- חשובה הקפדה על התאמה ויזואלית- אובייקטים גדולים, ובהירות בהנעה לפעולה.
  • בעת הבנייה- חשובה הקפדה על  "ניקיון ויזואלי"-מינימום אובייקטים בעמוד.
  • בעת הבנייה- חשובה הקפדה על פריסה אורכית. הקפדה על הצגת עצמים חשובים במסך העליון.
  • מומלץ: מבנה נפוץ ויעיל: 1-3 לינקים קריטיים בראש העמוד, לאחר מכן אובייקט ויזואלי, ולאחריו תפריט.
  • ב- responsive design- התוכן זהה לעמודי המקור. באתרי ניידים לחברות מסחריות- בד"כ אתר ייעודי, עם מיקוד מאוד גבוה להנעה לפעולה.
  • מומלץ: פיתוח אפליקציה או web app, והצעתן לגולש, כמו גם קידומן בעזרת כפתורי פעולה גדולים ובולטים בעמודי האתר לניידים והאתר השולחני.

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

כללי

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

לצורך איסוף הנתונים וניתוח המגמות המתוארות בדוח זה, ביצענו סקירה נרחבת של חברות בינ"ל גדולות ממגוון תחומים. מבין החברות שנסרקו, אנו מביאים בדוח זה דוגמאות מהחברות הבאות:

  • רכב - מרצדס (האתר האמריקאי), סמארט, וולקסוואגן (האתר הבינ"ל), יונדאי (האתר האמריקאי)
  • חברות השכרת רכב - Thriffty.com, Hertz.com
  • תעופה - KLM, U.S. Airways, air France
  • תיירות - Booking.com , TripAdvisor
  • תקשורת - CBS, CNN, ESPN
  • משקאות - Coca-Cola (אתר בינ"ל), Grolsch,  Grey Goose
  • טכנולוגיה - Dropbox, WordPress.com,  Fork-CMS.com, Facebook.com

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

 1. נחיצות התאמה לניידים - נפחי גלישה מפלטפורמות ניידות

השאלה הראשונה שעולה בכל מקרה בו נשקלת התאמה לניידים, היא- האם יש בכך צורך?

כלומר- אם ישנו קהל משתמשים גדול דיו על מנת להצדיק ביצוע התאמה?

נכון ליוני 2012, היו בעולם לפחות 1.2 ביליון משתמשים בפלטפורמות ניידות סלולריות, עם ממוצע של 15-25% ביקורים מניידים מסך הביקורים באתרים.

יתרה מכך, ההערכה היא שאחוז ניכר מן המשתמשים הללו משתמשים אך ורק בפלטפורמות ניידות לגלישה (נכון ליוני 2012, בארה"ב נתון זה עמד על 25%).

לבסוף, התחזיות של כל החברות הן לגידול עצום בנפחי התנועה הסלולרית בעתיד הקרוב: ב2010, מורגן סטנלי צפו כי עד 2015, מספר הביקורים (לאתרים) מפלטפורמות ניידות יעלה על מספר הביקורים משולחניים. ב- 2011, מייקרוסופט צפו שאירוע זה יתרחש מוקדם מכך- עד סוף 2014. גוגל צופה שאירוע זה יקרה עד סוף 2013.

הערכות מספר משתמשים מפלטפורמות שונות על פי מורגן סטנלי:Evaluating multiple users from different platforms according to Morgan Stanley

 

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

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

2. נחיצות ההתאמה לניידים - יתרונות ההתאמה

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

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

ניתן לתאר מספר אפיקים בהם ישנה תועלת לגולש ולחברה מביצוע התאמה של האתר:

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

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

כדוגמא לכך, ניתן להשוות בין ההתאמה המצוינת של אתר מרצדס בנץ או אתר grey goose, שהגולש בו מקבל תחושה מרשימה ביותר מן המותג, לבין הרושם שמתקבל בגלישה מפלטפורמה ניידת (כדוגמת אייפון) לאתר כמו אתר מוטורולה מוביליטי- זוהי חברה המייצרת ניידים, אך האתר שלה אינו קריא, בגודל לא שמיש ומכיל טכנולוגיות שלא זמינות לחלק מן הניידים. קישור למאמר בנושא באתר FORBES .

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

Example of a site that is not optimized for mobile

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

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

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

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

השפעת מהירות טעינה על שימושיות: סקרים מראים כי כ 70-90% מן המשתמשים נוטשים עמוד שמצריך יותר מ 5 שניות לטעינה. פלטפורמות ניידות, במיוחד אלו העושות שימוש בתקשורת סלולרית, דורשות אתרים "קלים" יותר, אחרת זמן הטעינה בהן ארוך מאוד (בשל רוחב הפס ובשל יכולות העיבוד של סלולריים). התאמה לניידים מייצרת אתרים קלים משמעותית, בשל שינוי ממדי התכנים ונפחם.

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

3. ביצוע התאמה לפלטפורמות ניידות- מצב בפועל ו case studies

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

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

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

אין הדבר אומר כי מצב זה הינו מצב גורף או הסטנדרט המחייב כיום ברשת- בחיפוש נוסף, עלה בידינו (ללא מאמץ רב) לאתר גם חברות גדולות יחסית להן אין התאמה לניידים (כדוגמת אתר נוטלה הבינלאומי nutella.com, או אתר חברת אל על elal.co.il).

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

עפ"י case studies, חברות שזיהו נפח משתמשים ניידים באתרם וביצעו התאמה נכונה לניידים- הרוויחו עלייה ניכרת בנפח תנועה באתר, במספר העמודים הנצפים ובזמן השהות, ובמקביל ירידה בשיעור הנטישה (ע"י צמצום מספר המשתמשים הניידים שראו אתר לא מותאם ונטשו מיד), וחשוב מכל- עלייה במספר ההמרות ובהכנסות.

דוגמאות:

  • אתר baby-gaga.com: נפח הביקורים מניידים הגיע עד כדי 40% מנפח הביקורים הולל לאתר. בתוך שבועיים מסיום ביצוע התאמה לחלק מתכני האתר, נצפו:
  • 64% עלייה מביקורים מניידים
  • 104% עלייה ב unique visitors
  • 82% עלייה במספר הדפים הנצפים מניידים
  • 50% עלייה בהכנסות מניידים

 

  • אתר ticketsnow.com: גילו כי 25% מהחיפושים לכרטיסים בארה"ב מבוצעים מניידים. החליטו לבצע התאמה לאתר ולא אפליקציה, ע"מ להתאים לכל הפלטפורמות, ולאפשר עדכונים ושינויים תכופים יותר, כמו גם לחסוך כסף מעמלות פעילות באפליקציה. בתוך חודש מסיום ביצוע ההתאמה לניידים, נצפו:
  • 8% עלייה בשווי עסקה ממוצעת מניידים
  • שיעור המרה מניידים גדל ב 50%
  • מספר עסקאות גדל ב 100%
  • הכנסה מפרסומות באתר גדלה ב 30%

4. מבנה טכני של אתרים מותאמים

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

עד לאחרונה, היה מקובל לבצע התאמה לניידים על בסיס תצורות נפרדות. במקרה זה, נבנים למעשה 2 (או יותר) אתרים- האחד לשולחניים, והשני (או כל השאר) לנייד בגודל מסוים או מספר גדלים. כאמור, ההפרדה יכולה להיות ברמת הקוד (קרי- אותו URL לכל גרסאות האתר, אך השרת מזהה את הפלטפורמה, ומגיש לכל פלטפורמה את האתר שלה), או ברמת ה URL- 2 כתובות נפרדות, בכל אחת מהן מותקן הקוד רק לגרסא אחת (לדוגמא: example.com לשולחניים ו m.example.com לניידים).

לתצורה זו מספר חסרונות:

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

ועוד סיבות שונות. להלן מספר דוגמאות של אתרים שנבנו בתצורה המפרידה:

הפרדה ברמת ה-URL:

A site adapted for surfing from mobile devices - CBS

CBS

 

A site optimized for surfing from US-airways

US Airways

 

A site optimized for browsing from mobile devices

קוקה קולה

 

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

פיתוחים ברמת הקוד, כמו גם הודעה רשמית של גוגל כי הם מעדיפים את תצורת ה "URL 1, קוד 1"  (מעדיפים תצורה זו- אך מקבלים גם תצורות אחרות. לפרטים ראו בלוג גוגל וובמסטרס), הפכו תצורה זו למקובלת והמומלצת כעת. תצורה זו נקראת לרוב responsive design, משום שהאתר מזהה מהי הפלטפורמה הדורשת (ולרוב- מזהה ספציפית את רוחב המסך בפלטפורמה הדורשת), ומגיב אליה-מתאים בזמן אמת את עיצוב האתר לפלטפורמה הצופה.

בצורה זו, לא משנה מהי הפלטפורמה הצופה, נעשה תמיד שימוש רק ב URL 1 ובאותו קוד, המכיל הנחיות עיצוב (ב- CSS) יחסיות ולא מוגדרות (הגדרות עיצוב "נזילות", קרי- אובייקטים שונים, כמו טקסט או תמונה, אינם מוגדרים לגודל ספציפי- לדוגמא רוחב 100 פיקסל, אלא מוגדרים באופן יחסי, לדוגמא להיות מוצגים ב50% מגודל המסך של הפלטפורמה). לתצורה זו מספר רב של יתרונות:

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

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

לסיכום:

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

5. אסטרטגיית תוכן בעת ביצוע התאמה לניידים

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

5.1.  מבנה תוכן

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

  • אתר רשת CBS:  –שימו לב לגודל כל אחד מן האובייקטים במסך, ולמיעוט האובייקטים.

A site adapted for surfing from mobile devices - CBS

 

יונדאי בריטניה

A site adapted for surfing from Hyundai UK devices

5.2.  כמות תוכן

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

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

5.3. פריסת תוכן

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

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

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

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

Matching Websites to Mobile - Mazda USA

מזדה ארה"ב

 

Matching Websites to Mobile - Renault USA

רנו ארה"ב

5.4.  הרכב תוכן- ייעודי או משוכפל?

Responsive design= תוכן אחיד

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

זוהי הצורה האופטימלית לטיפול בתוכן, מכל הגורמים:

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

תצורה מפרדת - מגמה תלויה באופי האתר

כאשר מבוצעת חלוקה בין אתר שולחני לאתר(ים) לניידים, אזי המגמה הנוכחית בשוק מעורבת, ונראית כתלויה במטרת האתר:

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

דוגמאות: אתר רשת CNN

Adapting websites to mobile - CNN

 

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

דוגמא: אתר KLM – שימו לב למיקוד להנעה לפעולה

Adapting websites to mobile - KLM

 

אתר מרצדס ארה"ב m.mbusa.com - שימו לב שוב למיקוד הברור להנעה לפעולה בעזרת 3 הקישורים שבראש העמוד- בחירת רכב, מציאת סוכנות או מבצעים

Mobile website matching - Mercedes USA site

 

אתר booking.com - שוב- הנעה ברורה לפעולה

Matching websites to mobile - Booking.com

 

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

דוגמא לכך הוא אתר wordpress.com:

Matching websites to mobile - wordpress.com

לסיכום:

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

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

במרבית האתרים שלא נבנו ב responsive design, בוצע צמצום מסוים של התוכן באתר הנייד. המגמות הבאות נצפו כמועילות במספר רב של אתרים, ומומלץ לשמרן לכל אתר נייד שבונים:

  • התאמה ויזואלית- אובייקטים גדולים, בהירות בהנעה לפעולה.
  • "ניקיון ויזואלי"-מינימום אובייקטים בעמוד.
  • פריסה אורכית. הקפדה על עצמים חשובים במסך העליון.
  • מבנה נפוץ ויעיל: 1-3 לינקים קריטיים בראש העמוד, לאחר מכן אובייקט ויזואלי, ולאחריו תפריט.
  • ב- responsive design- תוכן זהה לעמודי המקור. באתרי ניידים לחברות מסחריות- בד"כ אתר ייעודי, עם מיקוד מאוד גבוה להנעה לפעולה.

6. תכונות ייחודיות (features) המאפיינות אתרים ניידים

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

6.1. הפניות אוטומטיות עפ"י פלטפורמה

במקרים שבהם נבנו 2 אתרים נפרדים (או יותר) ב  URL שונים, אתרים רבים מיישמים אסטרטגיה של הפניות הדדיות ע"מ לוודא שלכל פלטפורמה יוצג האתר שנבנה למימדי המסך שלה. בצורה זו, גולש שולחני שמגיע לאתר נייד, מועבר מיידית (מבלי ידיעתו- עוד לפני טעינת האתר) אל האתר השולחני, ולהפך. נקודה זו היא אחת החסרונות של שיטה זו- בבנייה ב Responsive design אין צורך להפעיל מערכים מסובכים שקובעים איזה משתמש מגיע לאיזה אתר, ואין צורך לעדכן את רשימת ההפניות בכל פעם שנייד חדש מופיע בשוק.

6.2. קישור לאתר פלטפורמה מקבילה בפוטר

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

מקובל למקם לינק זה בתחתית העמוד.

דוגמא: אתר KLM – לינק לאתר הרגיל מסומן בעיגול אדום

Adapting websites to mobile - KLM

 

6.3. סרגלים ומתחמים "מתקפלים"

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

דוגמה: אתר espn.go.com עם מתחם ה VIDEO פתוח

Matching Websites to Mobile - espn site

 

אותו אתר (ESPN) עם מתחם הוידאו סגור

ESPN site with closed video complex

 

6.4. סרגלים צדדיים

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

דוגמא: (אתר mobile.mako.co.il) סרגל פתוח:

Mako site with open video complex

 

אתר מאקו - סרגל סגור

Mako site with closed toolbar

 

6.5. הודעות דרך מערכת הודעות NATIVE של המכשיר הנייד

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

6.6.  תשלום ב pay pal

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

7. אפליקציות ייעודיות ומתן העדפה לאפליקציה / אתר מותאם

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

לכלי הנפוץ והמוכר כאפליקציה (יישום קל הניתן להורדה מ iTunes או חנויות אנדרואיד ואתרים מתמחים), נוספה לאחרונה גרסא נוספת- ה web app. Web app הינן עמודי דפדפן שעוצבו בצורה ייחודית, המדמה פעולה ביישום (אפליקציה), ובנוסף מאפשרות שמירה של icon על שולחן העבודה של הדפדפן- נראה זהה לאפליקציה, אך מדובר למעשה ב shortcut פשוט לעמוד האינטרנט בדפדפן. Web apps אינן מצריכות עדכונים כמו אפליקציות רגילות, וגם לא הורדה או רכישה מחנות/ אתר יעודי, אך לרוב מחייבות חיבור פעיל לרשת בכדי לעבוד.

באופן כללי, אפליקציות מועילות מאוד הן לגולש והן לחברה, אך הן אינן מועילות ישירות לאתר, שכן ביקורים ופעולות שהמשתמש מבצע דרך האפליקציה, אינם ביקורים באתר, ואינם נספרים כפעולות שבוצעו בו (ובכך החברה מרוויחה לקוח פעיל, אך האתר מפסיד לקוח פעיל- נקודה שחשוב לשים אליה לב בניתוחי ביצועים). ה Web Apps שונות במובן זה, משום שהן פועלות דרך הדפדפן, ולכן לרוב נספרות כביקור רגיל באתר (אלא אם כן נכתבו במתכוון בתורה שעוקפת את האתר).

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

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

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

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

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

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

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

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

דוגמאות לאפליקציות המוצעות עם כניסה ראשונה: הצעה אקטיבית להתקנת web app בעת כניסה ראשונה לאתר espn.com (תחתית העמוד, בועת הודעה)

 

An example of an application with a first login to ESPN

 

דוגמאות ללינקים וכפתורי פעולה המציעים אפליקציות גם לאחר הכניסה הראשונה:

אתר dropbox.com (כפתור פעולה ירוק גדול)

Example of action buttons that offer an app on a dropbox site

 

אתר tripadvisor.com- טקסט לינק בראש העמוד

 Tripadvisor.com Website

לסיכום:

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

השירותים שלנו

Traffic

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

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

Data & Analytics

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

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

Conversion Optimization

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

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

Content

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

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