המסך הראשון באתר: איך בונים hero שגורם להישאר.

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

למה המסך הראשון הוא החלק החשוב ביותר באתר

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

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

שלוש שאלות שהמסך הראשון עונה עליהן

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

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

איך כותבים כותרת שאומרת משהו

הכותרת היא החלק החשוב ביותר במסך. השוו בין שתי אפשרויות:

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

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

שיטה בשלושה צעדים

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

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

דוגמה

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

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

כפתור אחד ראשי

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

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

תמונה או אובייקט שמספרים משהו

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

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

למה סליידר הוא בדרך כלל רעיון רע

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

מה להוציא מהמסך הראשון

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

המסך הראשון בטלפון

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

סימן אמון קטן

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

רמז שיש עוד

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

בדיקה של חמש שניות

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

לסיכום

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