מדוע חייבים להשתמש בהיררכיה ויזואלית כדי להשאיר את הגולשים באתר

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

שימוש בחלל לבן

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

שבירת צבעים

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

שינוי גודל או פריסה

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

אפשר גם לשלב

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

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

תפסת מרובה לא תפסת

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