עיצוב לטלפון קודם: למה מתחילים מהמסך הקטן.

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

מה זה עיצוב לטלפון קודם

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

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

למה זה רלוונטי במיוחד לעסק קטן

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

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

מה משתנה כשמתחילים מהטלפון

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

שאלה אחת לכל אלמנט

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

דוגמה: דף הבית של מוסך

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

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

הסדר הנכון בעמוד טלפון

סדר שעובד ברוב אתרי העסקים:

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

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

אזור האגודל

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

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

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

טפסים ותמונות בטלפון

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

טפסים

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

תמונות

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

מה לא עושים

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

ואז מרחיבים למחשב

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

איך לדעת אם האתר שלכם תוכנן כך

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

לסיכום

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