איך לבנות עמוד בית מוצלח ואיכותי

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

עמוד בית – מה בכלל הבעיה…?

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

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

1. קובעים מטרות לדף הבית

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

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

2. בניית רשימת רכיבים שתורמים ישירות למטרה שנקבעה

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

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

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

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

4. הרכבת תשתית ראשונית לדף הבית

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

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

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

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

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

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

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

5. ארגון הרכיבים הפחות חשובים למטרה

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

סיימנו!

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

בהצלחה!

*המאמר תורגם ושוכתב מחדש ממאמרו של D Bnonn Tennant