ארכיון אתרים ודפי נחיתה - מגזין השיווק הדיגיטלי

המדריך לארכיטקטורת מידע: תכנון נכון של תוכן וניווט באתר

omerg — Fri, 20 Aug 2021 15:10:38 +0000

מבוא

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

הנה כמה מההגדרות שניתנו לה:

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

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

מה זו ארכיטקטורת מידע?

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

מערכות ארגון מידע
מערכות מיתוג
מערכות ניווט
מערכות חיפוש

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

משתמשים

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

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

הקצב שבו צורכת ילדה בת 12 את הטיקטוק שלה שונה מזה שבו צורכת קשישה בת 87 את הדואר האלקטרוני שלה. לכל אחת מהן צריך להתאים את התוכן ואת האופן שבו הן חוות אותו כך שיוכלו למצוא ולהבין אותו בקלות.

תוכן

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

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

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

בעלות – מי הבעלים של התוכן, מי אחראי על יצירת התוכן ועדכונו. האם כל התוכן נוצר על ידינו או שחלקו/כולו שייך לצד ג' וניתן לנו ברישיון
פורמט – באיזה פורמט קיים התוכן? קובץ MP3, טקסטואלי, טבלת קטלוג וכו'
מבנה – תמיד חייבת להיות היררכיה מהתוכן החיוני והחשוב ביותר לפחות קריטי. הרחבתי בעבר על היררכיה ויזואלית. חשוב מאוד לבנות את האתר כך שיעשה שכל לא רק למשתמשים, אלא גם למנועי החיפוש. פידבק על בניית האתר שלכם תוכלו למצוא ב-Google Search Console אחרי שהטמעתם שם קובץ של האתר שנקרא sitemap.xml שבו מפורט המבנה המלא של האתר
Metadata – זהו מידע המתאר אלמנטים אחרים של מידע חיוני באתר: שם קובץ, טקסט אלטרנטיבי לבעלי מוגבולויות, תאריך יצירת הקובץ, טאגים (מילות מפתח חשובות בפוסט), קטגוריות וכו'
היקף – כמות התוכן הקיים. למידע הזה יש חשיבות גם מבחינת גודל השרתים שבהם האתר ישב וגם במהירות השרתים, כדי שהמשתמשת תדע למצוא במהירות ובקלות את מה שחיפשה מתוך הררי המידע
דינאמיות – מה תדירות ומהירות השינויים שנעשים בתוכן

הקשר

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

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

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

וויזואליזציה של ארכיטקטורת מידע

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

ארכיטקטורת מידע מלמעלה למטה (Top Down)

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

דוגמה לאתר כזה יש למשרד האוצר:

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

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

גישת top down היא גישה של היררכיה: המידע החשוב ביותר נמצא בעמוד הבית, והמידע החשוב בכל עמוד נמצא בראשו (מצד ימין בעברית ומצד שמאל בלעז).

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

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

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

ארכיטקטורת מידע מלמטה למעלה (Bottom Up)

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

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

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

לגישה הזו קוראים גם מודל מסד הנתונים.

לינקים

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

זו אחת הסיבות שלינקים פנימיים בתוך אתר (internal links) כל כך חיוניים ל-SEO איכותי.

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

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

מערכות של ארכיטקטורת מידע

מערכות ארגון מידע (Organization Systems)

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

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

סכימת ארגון אלפביתית

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

סכימת ארגון כרונולוגית

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

דוגמאות: אתרי חדשות, בלוגים.

סכימת ארגון גאוגרפית

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

סכימת ארגון נושאית

חלוקה על פי נושאים ונושאי משנה.

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

סכימת ארגון משימתית

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

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

סכימת ארגון מבוססת קהל יעד

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

כאן בדוגמה אתר Udemy המעולה של קורסים אונליין:

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

סכימת ארגון היברידית

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

מערכות מיתוג (Labeling Systems)

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

מיתוג הוא: איך לקרוא לדברים?

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

ההמלצה הראשונה שלי היא לא להמציא את הגלגל, היכן שהגלגל כבר הומצא. אנשים מצפים לכפתור "buy now" בסיום בחירת פרטי המוצר, ופחות מצפים ל-"Go for it. We believe in You" שעלול לבלבל אותם, ולא משנה כמה מגניב זה. בסיטואציות יוצאות דופן בהן יש צורך בהגדרת קטגוריה, כותרת, מונח מסויים או הנעה לפעולה שבהם משתמשים לא נתקלו בעבר, חשוב להשתמש בטקסט מתאר וברור (ואם אפשר קצר) ככל הניתן. מה שלא כדאי זה להשתמש במונחים שיגרמו למשתמשת לגרד בראשה בבלבול.

בואו נבחן את התפריט באתר של חברת ארקפה (שאין לי שום בעיה עם הקפה שלהם):

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

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

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

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

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

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

עבור מי המיתוג?

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

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

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

סוגים של מיתוגים

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

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

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

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

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

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

מערכות ניווט (Navigation Systems)

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

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

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

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

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

סוגים של מערכות ניווט

מתייחסים תמיד לכמה מערכות ניווט מרכזיות:

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

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

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

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

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

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

שימו לב לתפריטים הבאים של אתר הרהיטים DAX:

ישנם כאן שני תפריטים:

Top Menu – בו יש מידע כללי על אודות החברה, מידע קבוע על הסניפים ואיך ליצור איתם קשר (לרבות ברשתות חברתיות) ובחירת שפה.

Main Menu – בתפריט הראשי יש את כל קטגוריות המוצרים, ועכבר עליהן פותח את תת התפריט עם פירוטים של תתי קטגוריות. גלילה למטה תעלים את ה=top menu ותשאיר רק את התפריט הראשי.

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

לעומת זאת מי שיבחר מהתפריט הראשי "לקוח עסקי", יקבל למטה תפריט מקומי שונה לחלוטין:

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

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

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

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

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

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

מערכות חיפוש (Search Systems)

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

השאלה הראשונה שאתם צריכים לשאול את עצמכם היא: האם אני בכלל צריך מערכת חיפוש?

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

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

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

יכולות מנוע החיפוש תלויות:

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

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

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

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

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

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

לסיכום

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

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

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

איך לבנות דף נחיתה שממיר

omerg — Wed, 21 Jul 2021 06:22:00 +0000

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

אז כמו תמיד, נתחיל מהתחלה.

מה זה עמוד נחיתה ולמה צריך אותו?

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

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

בפשטות – עמוד נחיתה זהו דף אינטרנטי שבו יש מידע אודות המוצר/שירות שאנחנו מציעים ולפחות הנעה לפעולה אחת (Call to Action, או בקיצור CTA – בדרך כלל כפתור, מספר טלפון או לינק אחר).

קצת יותר מורכב – איך לבנות את העמוד כך שמי שנכנס אליו ישתכנע ללחוץ על ה-CTA ולבצע את הפעולה הרצויה .

תכונות חיוניות לעמוד נחיתה טוב

חוק אומר: "אתה חייב לעשות זאת כך". עיקרון אומר: "זה עובד, ותמיד עבד".

רוברט מקי

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

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

בהירות (Clarity)

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

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

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

אל תגרמו לי לחשוב

סטיב קרוג

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

בהמשך המאמר נפרט איך בתכ'לס עושים את הכל ברור ונהיר יותר.

עושר במידע גורם לעוני בתשומת לב

זוכה פרס נובל לכלכלה ופרס טיורינג הרברט סיימון

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

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

מבחן 5 השניות

המקלים מתייחסים למבחן 5 השניות (על אף שמחקרים מראים שאנשים מגבשים דעה על הנראות של אתר (או כל דבר אחר) אחרי חצי שניה).

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

יש לכם עד 5 שניות להבין:

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

עברו 5 שניות ואתם לא בטוחים מי נגד מי? כדאי לשנות את עמוד הנחיתה.

קחו לדוגמה את עמוד הנחיתה הזה של רובין:

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

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

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

לעומת זאת:

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

שימו לב למבנה הקלאסי של האזור העליון בעמוד:

כותרת ראשית – מסבירה בצורה ברורה, בהירה ואם אפשר מגניבה מה המוצר/שירות שלי עושה. האלמנט הבולט ביותר בעמוד
כותרת משנה – משלימה את הכותרת הראשית, פעמים רבות מכינה לפעולה. מעט פחות בולטת מהכותרת הראשית
כפתור – Call to Action. קודם כל, חשוב שיהיה אחד… הכפתור צריך להראות כמו כפתור מבחינה וויזואלית ודינמית (כאשר העכבר מעליו רצוי שישנה צבע/גודל). מומלץ לא יותר מ-CTA אחד בעמוד נחיתה. אם אין ברירה חשוב להגדיר ויזואלית (צבע, גודל) וטקסטואלית מה ה-CTA העיקרי ומה המשני. חשוב שה-CTA יופיע עוד לפני צורך בגלילה. זה בעיקר קריטי במכשירים ניידים אבל לא רק

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

טיפים חשובים לשיפור בהירות

חללים

להפחתת עומס בעמוד, לקריאות טובה יותר, להבנה של מבנה העמוד – הוסיפו חללים בין האלמנטים השונים (padding, margin).

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

חללים פאסיביים (נקראים גם חללים שליליים או nagative space)- חללים מחוץ לאזור התוכן העיקרי, חללים בין אובייקטים (Margin או Padding)

חללים אקטיביים – חללים בתוך אזור התוכן העיקרי. למשל הרווח בין כותרת לטקסט שמתחתיה.

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

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

קונטרסט

הטקסט חייב להיות קריא.

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

הנה דוגמא לא מוצלחת:

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

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

שמישות (Usability)

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

שמישות היא עד כמה נוח לבצע פעולות בעמוד הנחיתה:

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

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

קריאות?? (Readability)

איך אנשים קוראים באינטרנט? הם לא.

ג'ייקוב נילסן

אנשים לא קוראים באינטרנט. הם סורקים

סטיב קרוג

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

דבר נוסף שמקל על הקריאה – שורות קצרות. מה שלא יהיה: 12-14 מילים בשורה מקסימום. אם זו כותרת – עד 5 מילים בשורה וכותרת משנה 6-8 מילים בשורה. כל זה מאתגר יותר באנגלית, כי אותו משפט באנגלית ארוך בכ-25% מזה בעברית.

בדוגמה כאן יש 2 מילים בכותרת הראשית ו-7-8 מילים בכותרת המשנה:

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

עוד מומלץ להשתמש בטקסט סן סריף ולא בטקסט סריף שהינו פחות קריא.

כדאי להשתמש לעיתים קרובות ברשימה לא ממוספרת, כמו זו:

זה קריא
זה ברור
זה מזמין
וחשוב לזכור שקריאטיביות לא חייבת להפגע כתוצאה מממשק ברור וקריא!

הטקסט הזה ברור מדי וקל מדי להבנה. ביזיון. בושה וחרפה. פאשיסטים!

אף אחד אף פעם

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

היררכיה ויזואלית (Visual Hierarchy)

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

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

הררכיה וויזואלית פירושה חשיפה הדרגתית (Progressive Disclosure) – כלומר רק המידע הנחוץ יופיע ברגע המתאים.

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

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

מוסכמות (Conventions)

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

החוק של ג'ייקוב לחוויית משתמש

באנגלית זה נשמע הרבה יותר טוב.

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

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

דוגמאות למוסכמות:

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

נגישות

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

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

אמינות

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

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

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

חשוב לשדר:

מקצועיות – גם אדם שהצטרף לציוויליזציה המערבית רק לאחרונה ידע מיד להבדיל בין אתר שנראה מקצועי לאתר שנראה חובבני. מבחינת קריאות, ויזואליזציה ותחושה כללית
רוגע – מסרים כמו: התשלום מאובטח, כספך יוחזור תוך 30 יום אם לא תהיה מרוצה מהשירות, היתכנות חברתית (social proof) – "250,000 כבר הצטרפו לשירות שלנו", לא נעשה שימוש בפרטים האישיים שלך מלבד לטובת מה שהסכמנו עליו בתנאי השימוש. גם צבעים מרגיעים זה לא מזיק (אלא אם המסר הכללי של עמוד הנחיתה דורש הפחדה. אני לעולם לא אמליץ על זה, אבל זה עובד)
אמינות – רשימת חברות שהן לקוחות שלנו/שותפים שלנו, פרסים שקיבלנו, המלצות, שיתופי פעולה ומחקרים רציניים התומכים בטכנולוגיה שלנו

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

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

אז ממה בתכלס בנוי עמוד נחיתה?

כותרות

אורך

הייתי כותב לך מכתב קצר יותר, אבל לא היה לי מספיק זמן

מארק טווין

כותרת ראשית: לא יותר מ-2 שורות. אם בכל זאת אין ברירה אז 3. לשאוף לשורה אחת.

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

יישור (Alignment)

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

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

מסר

המסר צריך להיות קודם כל (כמובן) ברור ובהיר, ספציפי ומכוון בסופו של דבר ל-CTA.

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

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

הנעה לפעולה (Call To Action או CTA)

הוא חייב להראות כמו משהו שאפשר ליצור איתו אינטרקציה:

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

הנה דוגמא לעמוד בית בעייתי:

בעמוד הבית הזה אין בכלל CTA לפני גלילה (above the fold).

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

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

וזו עוד דוגמא לעמוד בית בעייתי.

וויז'ואל

תמונות

תמונה אחת שווה אלף מילים

קונפוציוס

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

לא להתבייש לעורר רגש:

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

רוצים דוגמה פחות מובנת מאליה? שימו לב לעמוד הבית של מדל"ן:

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

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

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

קונטרסט – רצוי תמונות שנוטות לבהיר בלבד או לכהה בלבד, למקרה שתרצו שהטקסט של הכותרות וה-CTA יהיו מעליה והיא תשמש כרקע. תמונות "מעורבבות" עושות כאב ראש לטקסט, שמתקשה להיות ברור בכל המקומות. יש פתרונות כמו:

הצללה של הטקסט, אבל כעיקרון זה לא מומלץ
overlay – כיסוי שכבת צבע ה"מטשטשת" את התמונה והופכת אותה לרקע, אבל אז קחו בחשבון שלא בטוח שיהיה קל וברור להבין על מה התמונה ומה המסר שלה. רצוי לעשות שימוש בצבע לבן או שחור ברמת עכירות (opacity) של 80%-95% – כך רמת הקריאות לא תרד

מתי לא כדאי להשתמש בתמונה?

לא תמיד נרצה להשתמש בתמונה מסויימת. יכולות להיות מספר סיבות:

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

ווידאו

מומלץ להשתמש רק אם מדובר בווידאו איכותי (לא חייב להיות ברמה של סטודיו של מארוול אבל רצוי שלא יראה כאילו נלחץ לכם הקלטה בווידאו של הנייד כשהוא בכיס של המכנסיים).

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

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

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

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

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

תכנים

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

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

דוגמה לחלוקה כזו מלמעלה למטה:

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

טפסים

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

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

לסיכום

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

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

מקווה שהמאמר הזה עונה לכם לפחות על חלק מהשאלות או ההתלבטויות.

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