הפוסט הופיע במקור ב 24.04.2012 בבלוג של לאה: ליקוטי שיבלים
לאחרונה (בעצם, מאז שחזרתי מחופשת לידה וחזרתי לעצב אתרים) אני נתקלת שוב ושוב בהתעקשות להכניס כמה שיותר מידע בחלק העליון של העמוד, גם על חשבון אוורור העמוד וסידור נכון יותר של אלמנטים עבור המשתמש.
האמת? זה לא היה נראה לי, אז החלטתי לפנות אל האינטרנט לראות מה המומחים אומרים. אז ככה, עד לפני שנתיים, פחות או יותר, המושג של "קו הגלילה" (או "קו קיפול", ובאנגלית:fold, scroll-line) היה מאוד מוחשי. אמנם היו הרבה מחקרים על איפה הוא בדיוק ממוקם על המסך – תלוי ברזולוציית המסך, אופי הדפדפן ומקרי קיצון כמו אנשים כמוני שמנהלים 3 שורות של טאבים פתוחים בדפדפן 🙂 – אבל התבססה ההכרה ש-600 פיקסלים מראש הדף הם עיקר האתר (כשהעיצוב מיועד למינימום 1024*768). כתוצאה, הרבה עמודי בית שעוצבו נתחמו באותם פיקסלים ולא הכילו מידע חשוב מעבר לקו הגלילה מתוך הידיעה שאנשים לא גוללים (ע"פ מחקר של מומחה השימושיות ג'ייקוב נילסן שטוען שרק 23% מהגולשים גוללים).
אבל במהלך השנים האחרונות קרו 2 שינויים מהותיים:
האחד, מותו של “קו הגלילה”. עד שנת 2009 הסטטיסטיקות הראו שכ 50% מהמשתמשים צופים באתרים ברזולוציית מסך של 1024*768. סטטיסטיקות חדשות מינואר 2012 מראות שהיום למעלה מ 70% מהמשתמשים צופים ברזולוציות מסך גבוהות מ 1024*768. אבל, צריך לזכור, רזולוציות המסך הללו מתייחסות לשימוש במחשבים אישיים, והרי הרבה מהמשתמשים גולשים באתר גם באמצעות טאבלטים וסמארטפונים שמשנים את חוקי המשחק (והנה אנקדוטה לחובבי אפל – ההתפלגות מצביעה על 50% לגלישה באייפון)
והשני – למידה של "חוקי המשחק". משתמשים מבינים שיש חיים מתחת לקו ה-600 פיקסל, והעובדה היא שמחקרים רבים מראים שכיום 76% מהגולשים משתמשים בפס הגלילה האנכי ומתוכם 22% מגיעים עד לתחתית העמוד! אפילו ג'ייקוב נילסון שינה עמדה וכפר בחשיבות התהומית שנתן בעבר לקו הגלילה, ובמרץ 2010 הוא הוציא מאמר בעקבות מחקרי "מפת חום" על העובדה שאנשים גוללים כלפי מטה.
אז נכון, המחשבה שדברים חשובים צריך לשים בחלקו העליון של המסך (כמו שם האתר, לוגו, ניווט (בעדיפות לאופקי) והמטרה של האתר/מוצר) היא עדיין נכונה, אבל היא לא צריכה להיות על חשבון עקרונות שימושיות אחרים. הידיעה שיש לנו יותר מ 600 פיקסלים מאפשרת לנו לאוורר את האלמנטים על הדף (ולא לפחד מחורים לבנים! אבל זה כבר נושא לפוסט נפרד לגמרי…), לשפר את הקריאות, להגדיל את הפונט ולתת מרווח בין איזור לאיזור כדי לתת לגולש לנשום בין פסקה לפסקה או מוצר אחד לשני.
פאדי דונלי ב lifebelow600 אפילו הגדיל לומר שאם אנחנו מציגים את הכל בחלקו העליון של הדף, זאת אומרת, מעל לקו הגלילה, אז כל מה שמופיע מתחתיו הוא בזבוז של מקום עבודה. אבל, הוא המשיך וטען, אם נדע לתכנן את כל העמוד עם גירויים להמשך צפייה אז הגולש יגלול כדי לגלות את ה"פרס" – העיקר של העמוד – וכךבעצם חשפנו בפניו עוד מידע מבלי לוותר על עקרונות שמישות.
הנה דוגמא לאתר שעיצבתי ללקוח שלנו: בהתחלה, העיצוב התייחס ל- 3 עמודות תוכן שנועדו להצפת תוכן בראש העמוד. בתהליך העבודה החלטתי לנסות ו"לשבור" את התפישה המקובעת של קו הגלילה ושיניתי למבנה קצת שונה – שורה ראשונה שמציגה 2 פריטים ומתחתיה 3 עמודות. זה הוביל למבנה מאוורר יותר ומעודד קריאה, כשבסך הכל הוספתי לגלילה עוד 100 פיקסלים. לדעתי ממש לא נורא, במיוחד בעמוד שממילא יש בו גלילה.
הנה דוגמא נוספת לאתר שיש בו עדיפות על פריסה ל"שורות" ולגלול מטה על חשבון הצפה של חומרים למעלה:
הרבה אתרים חדשים שעלו לרשת (בעיקר תדמיתיים או פורטפוליו) מבוססים על עמוד אחד עם גלילה ארוכה. אמנם ברובם יש ניווט עליון שמפנה להמשך העמוד אבל העיצוב שלהם לא מתבסס על ההנחה של שימוש בניווט בלבד אלא מסתמכים על הידיעה שהמשתמשים לא מפחדים לגלול למטה.
הנה, אפשר לראות דוגמאות רלוונטיות באתרים האלו:
בסופו של דבר, כדאי לזכור שאנחנו מעצבים אתרים חדשים שלגביהם תפישות העיצוב המסורתיות לא תמיד נכונות, ואם נשתמש בהן הן דווקא עלולות לגרום לעיצוב שלנו להראות מיושן. המקרה של בחינה מחודשת של קו הגלילה חשוב במיוחד לאור העובדה שמסתבר שמשתמשים רבים משתמשים בטאבלטים וסמארטפונים בהם הגלילה מאוד אינטואיטיבית. לכן אני אומרת, אל תפחדו מגלילה! הנה, אפשר אפילו להנות ממנה! 🙂
לקריאה נוספת:
- http://webdesign.tutsplus.com/articles/design-theory/designing-for-the-new-fold-web-design-post-monitorism
- http://uxdesign.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines
- http://www.thewebshowroom.com.au/blog/above-the-fold-v-below-the-fold-in-website-design
- http://uxmyths.com/post/654047943/myth-people-dont-scroll
- http://www.456bereastreet.com/archive/200912/dont_fear_the_fold_people_do_scroll