העיצוב במובייל ובמחשב ו... כמה מילים על ה"אצבע השמנה" ו"האוזן של העורך"

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

אחד הפרמטרים שנקבעו על ידי גוגל בשנים האחרונות הוא נושא הרספונסיביות, או בשמו העברי – ההתאמה למובייל [סמארטפונים, טאבלטים, אייפדים וכיו"ב מכשירים ניידים חכמים ושנונים מסוגים שונים].

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

העיצוב במובייל ובמחשב

איך עושים את זה נכון?

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

מיחד - התאמת העיצוב למסכים ניידים הוא מאתגר, באשר ההבדלים המהותיים בין עיצוב למסך סטטי גדול [ 24 אינץ' - 17 אינץ'] לבין עיצוב למסך נייד פלקסבילי [שגודלו בממוצע כ- 8 -4 אינץ'} והוא גם ניתן לסיבוב של 360 מעלות. ומאידך - העיצוב חייב להתחשב בהרגלי הגלישה, כי אלה שונים מהותית מהרגלי הגלישה במחשב נייח וגם בתנאי הצפייה המשתנים.

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

העיצוב חייב לאפשר גלישה איכותית וחוויית גלישה נוחה ובהירה.

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

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

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

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

גוגל מעדיף אתרים מהירים גם במובייל

מהירות הטעינה מושפעת מגורמים רבים ושונים.

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

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

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

התאמת עיצוב למובייל היא משימה לא פשוטה

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

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

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

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

איך עושים את זה?

למשל:

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

• כדאי שלתוכן המוצג באתר תהיה פלקסביליות / כלומר: גמישות, המאפשרת לשנות את גודלו בעזרת האצבעות. [להגדיל ולהקטין את התוכן במידת הצורך].

• חשוב למתן את הופעת הבאנרים – פופאפים וחלונות קופצים בנייד.

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

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

• לדלל עד מאד את השימוש בקוד.

• להתחשב בזיהוי מיקום של הגולש – קחו לדוגמא את אפליקציית וויז [יש גם אתרים רבים כמותה] – שמזהים איפה נמצא הגולש, ו"מציעים" לנו להכנס לסניף הקרוב.

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

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

גם על כך כתבתי רבות.

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

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

למשל:

• בלוג - לא כדאי לעלות את כל הפוסטים יחד, כדאי לעלות בכל פעם קבוצת פוסטים [3 -4 פוסטים בכל גלילה].

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

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

• תיק עבודות ארוך ומסואב, פוגם מאד בחוויית הגלישה.

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

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

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

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

• גודל הפונט הוא בעל חשיבות קריטית. אין סיבה להציג טקסט צפוף ובלתי קריא. כדאי לחשב את רוחב הפיסקה [כ-280 - 300 פיקסל] ולא פחות חשוב - את אורכה. בכל מקום בו אפשר לקצר, כדאי לקצר.

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

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

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

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

הגלישה במובייל מתבצעת עפי"ר בגלילה ארוכה מלמעלה למטה.

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

שתי שורות תחתונות -

• עיצוב האתר במובייל, חייב להיות שונה [ברב המקרים והאתרים] מהעיצוב במסך המחשב.

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

בהצלחה !

ואם יש לך עניין או צורך בביצוע העבודה, אפשר לפנות אלי