פורסם במקור ב smashingmagazine.com על-ידי Dmitry Fadeyev בספטמבר 2009. תרגום: יניב שריג
כאנשי חוויית משתמש בוודאי תסכימו כי שמישות היא פן קריטי בעיצוב אתרים. בין אם אתם עובדים על אתר פורטפוליו, חנות וירטואלית או אפליקציית ווב, עיצוב האתר בצורה נעימה ומהנה מהווה חלק מרכזי בהצלחת האתר. מחקרים רבים נעשו במהלך השנים האחרונות על אספקטים שונים של עיצוב ממשקים באינטרנט. התוצאות של מחקרים אלו עוזרות לנו לשפר את האופן בו אנו מאפיינים ומעצבים אתרים. בכתבה זו נציג כמה ממצאים והנחיות עבודה לשיפור חוויית המשתמש באתרי אינטרנט.
1. מיקום אידיאלי של שמות שדות עובדים – מעל השדה
מחקר שנעשה על-ידי UX Matters מגלה כי המיקום האידיאלי עבור שמות של שדות בטפסים הוא מעל השדות עצמם. בטפסים רבים, שמות השדות ממוקמים לשמאל או לימין (בעברית) השדה, ויוצרים על-ידי כך מבנה טופס בעל שני טורים; ייתכן ומבחינה ויזואלית הטופס נראה טוב, אך אין זה המבנה הקל ביותר לשימוש. כיצד זה קורה? טפסים הם בדרך כלל בעלי אוריינטציה אנכית, כלומר המשתמשים ממלאים את הטופס מלמעלה כלפי מטה. הטופס נסרק כלפי מטה תוך כדי מילוי השדות. לכן המיקום של שמות השדות בקו ישר עם תנועת העין מקל על השימוש בטופס.
[הערת המתרגם- Tumblr שינו מאז פרסום הכתבה המקורית את עיצוב טופס ההרשמה שלהם ועכשיו הוא כולל הצגת שם השדה בתוך השדה עצמו, פתרון פופולרי בכמה אתרים גדולים כגון טוויטר וכד'.]
מיקום של שם השדה לצד השדה מעלה בעיה נוספת: האם יש ליישר את שמות השדות לימין או לשמאל? יישור לשמאל (באנגלית) הופך את הטופס לקל לסריקה אך מנתק את שם השדה ממיקום השדה עצמו ומקשה על שיוך של שם שדה לשדה. יישור לימין (באנגלית) עושה את ההיפך: הופך את הטופס למעוצב בצורה יותר נעימה אך מקשה על סריקה של שמות השדות. מיקום שמות שדות מעל השדות עצמם עובד בצורה מיטבית במרבית המקרים.
2. משתמשים מתרכזים בפנים אנושיות
אנו נוטים לרכז את תשומת הלב שלנו בפנים ובעיניים של בני אדם. ההימשכות שלנו לפנים ולעיניים של אנשים אחרים היא רק ההתחלה; מסתבר שאנו נוטים להסתכל לכיוון אליו מופנה המבט של הדמות בתמונה.
מחקר נוסף מראה כי אנחנו נמשכים באופן אינסטינקטיבי לפנים, אך אם הפנים מופנות לכיוון מסוים, אנחנו נוטים להסתכל לאותו כיוון. נצלו תופעה זו בכדי לכוון את תשומת הלב של המשתמשים שלכם לאזורים החשובים ביותר באתר.
3. איכות העיצוב היא אינדיקציה לאמינות האתר
מחקרים רבים נערכו בכדי לנסות ולהבין מה משפיע על תפיסת האמינות של אתר בעיני המשתמשים.
ממצא מעניין ממחקרים אלו הוא שאנשים אכן שופטים ספרים לפי איכות העטיפה שלהם, או לחילופין, אתר אינטרנט לפי איכות העיצוב שלו. אלמנטים כגון לייאאוט, טיפוגרפיה, וצבע – כולם משפיעים על האופן בו האתר נתפס בעיני המשתמשים; אתר מעוצב טוב אינו מקרין בהכרח תדמית טובה, אלא כזאת המותאמת לקהל הספציפי של אותו אתר. היבטים אחרים המשפיעים על מהימנות האתר כוללים: איכות התוכן, כמות טעויות, תדירות העדכונים באתר וקלות השימוש.
4. רוב המשתמשים אינם גוללים
מחקר של ג'ייקוב נילסן מתחילת שנות האלפיים על התנהגות הגלילה של משתמשים מגלה כי רק 23% מהמבקרים באתר לראשונה, גוללים את הדף כלפי מטה. המשמעות היא כי 77% הנותרים אינם גוללים את הדף; הם מסתכלים רק על התוכן מעל הפולד (האזור הנראה של העמוד ללא גלילה). יותר מזה, מספר המשתמשים שגוללים קטן בכל ביקור נוסף באתר, עם 16% בלבד של משתמשים הגוללים עמוד בביקורם השני באתר. ממצא זה מדגיש את חשיבות מיקום התוכן בדף האינטרנט, בייחוד בדפי נחיתה.
ממצא זה אינו מעודד דחיסה של כל המידע בחלק העליון של האתר, אלא מצביע על החשיבות של אזור זה. דחיסה של האזור העליון בתוכן רק תהפוך תוכן זה ללא נגיש; כאשר המשתמש רואה יותר מדי תוכן, הוא אינו יודע מהיכן להתחיל.
לפיכך, ממליץ נילסן על האלמנטים החשובים ביותר שצריכים להיות בכל דף בית, היכן שרוב המשתמשים יכנסו לאתר בפעם הראשונה:
א. שם האתר
ב. מהו הערך שהאתר מספק עבור המשתמש
ג. ניווט לפעולות העיקריות באתר הרלוונטיות למשתמש
עם זאת, הרגלי גלישה של משתמשים השתנו בצורה דרמטית מאז נערך מחקר זה. מחקרים אחרונים מראים כי משתמשים גוללים דפים אפילו עד לתחתית האתר ומרגישים לגמרי נח עם זה. משתמשים רבים מעדיפים גלילה על-פני דפדוף בין עמודים, ועבור משתמשים רבים, המידע החשוב ביותר אינו נמצא בהכרח מעל הפולד (שבעצמו הופך למושג ארכאי במקצת עם המגוון הרחב של גדלים שונים של מסכים הקיים בשוק) למידע נוסף, הציצו במחקרים: Unfolding the fold של קליקטייל, Paging VS Scrolling, Blasting the Myth of the Fold.
5. מבחני שמישות אפקטיביים אינם צריכים להיות מרובי משתתפים
מחקר של ג'ייקוב נילסן על המספר האידיאלי של נבדקים במבחני שמישות העלה כי מבחנים עם חמישה נבדקים מצליחים לגלות 85% מסך הבעיות באתר, בעוד מבחנים עם 15 משתתפים יגלו, לצורך העניין, את כל הבעיות באתר.
הבעיות המשמעותיות ביותר מתגלות בדרך כלל אחרי הנבדק הראשון או השני. משתתפים נוספים רק מאשרים את הבעיות העיקריות שהתגלו, ומצביעים על שאר הבעיות המינוריות באתר. שני משתתפים בלבד ימצאו קרוב לודאי חצי מסך הבעיות באתר. המשמעות של עובדה זו היא שבחינת שימושיות של אתר אינה צריכה להיות תהליך אינטנסיבי, יקר, או מרובה משתתפים. התובנות המשמעותיות ביותר מגיעות בהבדל בין אפס נבדקים לנבדק אחד, אז אל תפחדו ממבדקים מעוטי משתתפים, כל מבחן שמישות עדיף על-פני אי-ביצוע מבחן שכזה כלל.
6. חלל לבן משפר את ההבנה של תוכן האתר
רוב המעצבים מבינים את החשיבות של חלל לבן בדף, שהוא החלל הריק בין פסקאות, תמונות, כפתורים ואלמנטים נוספים בעמוד. חלל לבן מאפשר לאלמנטים השונים "לנשום". משחק עם החלל הלבן מאפשר לנו גם ליצור קיבוץ של תכנים מסוימים לכדי קטגוריה אחת. קיבוץ זה חשוב בכדי לבנות היררכיה של אלמנטים על –גבי המסך ובכדי להראות שאלמנטים מסוימים קשורים אחד לשני (לדוגמה, כפתור מסוים הקשור לסט של רכיבים)
חלל לבן הופך את התוכן לקריא יותר. מחקרים מראים כי שימוש נכון בחללים לבנים בין פסקאות ובשולי הפסקה מגדיל את ההבנה של הטקסט בכ-20%. קוראים מגלים כי קל יותר להתמקד בתוכן מרווח כהלכה. למעשה, הלייאאוט של דף אתר אינו משפיע באופן קריטי על ביצועי האתר אך משפיע בצורה רחבה על שביעות רצון הקוראים וחוויית השימוש הכללית באתר.
מצוין!
עוד מאמרים כאלה הם מבורכים.
לגבי הממצא הראשון, נכנסתי לקישור עצמו ב-UX Matters וחשוב לציין שהממצאים המצוטטים כאן הם מ-2006, הכתבה עצמה מכילה עדכון מ-2011 שמציג את הדברים קצת אחרת…למשל, המבנה המוצג כאן כטוב ביותר מתאים בעיקר לטפסים פשוטים ולמובייל ואילו בטפסים מורכבים יותר עדיף לשים את התוויות משמאל לשדה וליישר לשמאל (בהנחה שהטופס באנגלית כמובן…).
היי אולגה,
מה שאת כותבת לא מדויק. קרוליין ג'ארט כותבת בעדכון מ-2011 שני דברים:
1. התוויות מעל השדה טובות לטפסים פשוטים, בווב או במובייל. בטפסים מורכבים יותר זה לא בהכרח תופס. הסיבה היא (להערכתי, היא לא כותבת את זה) שבטפסים מורכבים האורך של הטופס עשוי להיות גורם משפיע על הרצון למלא אותו. תוויות מעל השדה גורמות לטופס להיראות ארוך.
2. תוויות משמאל לשדה שמיושרות לשמאל (באנגלית) גורמות ליותר זמן סקאדות (דילוג העין) אבל זה לא בהכרח אומר שנוצר יותר עומס קוגניטיבי. היא טוענת שיישור שמאלי כשהתוויות מורכבות ("complex") גורם דווקא לצמצום העומס הקוגניטיבי ולא להגדלתו.
היא גם מספרת על מחקרים שהראו שאין הבדל משמעותי בין יישור ימני באנגלית (משמאל לשדה, צמוד אליו) ליישור עליון.
בסיכום התגובה שלה היא אומרת שתוויות מעל השדה טובות לטפסים פשוטים, טפסים למובייל וטפסים שדורשים לוקליזציה (בגלל גודל המילים המשתנה).
מנסיוני, גם יישור שמאלי וגם יישור ימני (שניהם משמאל לשדה) יכולים לעבוד, כל עוד המרחק בין התווית לשדה לא גדולים. כשהמרחק גדל זמן הדילוג של העין מהתווית לשדה יכול להפוך גורם משמעותי בעומס החזותי והקוגניטיבי.
זה קורה הרבה לפני שהתווית מתרחקת למרחק כזה, למשל:
http://www.hashulchan.co.il/?pg=subscribe&CategoryID=405
אני מסכים שרשימות מטבען מציגות רק תמונה חלקית. למזלינו, אין אמיתות מוחלטות ולכן אנו יכולים לבוא כאנשי מקצוע ולהציע את הנסיון שלנו במקרים שונים ועל גבי פלטפורמות שונות בכדי להצביע על הפתרון המועדף, ולפעמים אולי גם להציע דרך חדשה ומקורית להתגבר על מטלה סטנדרטית. אני דווקא שמח שיש מחקרים שונים ושהמסקנות בהם מתעדכנות כל כמה שנים. זה אומר שהתחום דינמי וגם אולי מרמז שהמשתמשים עצמם משתנים בהתאם למגמות של עיצוב. אני חושב שניתן לראות את זה במיוחד בעיצוב אתרים ששואל אלמנטים מעולם העיצוב למובייל.
עוד בנושא שדת בטפסים:
http://uxmovement.com/forms/why-users-fill-out-forms-faster-with-unified-text-fields/
[…] שלו להשתמש באתר. כך למשל תמונות מסוימות יוצרות משיכה – פנים אנושיות למשל, ועיצוב יכול להקל את ההבנה של השימוש באתר –למשל פשטות […]