ניצוצות ברשת

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

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

יונית רושו
שתפו כתבה במיילשליחת הכתבה באימייל

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

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

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

אז איך נעביר מסר בשנייה הראשונה וגם תוך כדי גלילה?

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

אולם מהרגע שהתחלתי לגלול, איך אגרום לו להמשיך לגלול ולא להתייאש? איך אמשוך את העין שלו למקום שאני רוצה שהוא יסתכל עליה?

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

http://www.neotokio.it

העשרת חוויית המשתמש

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

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

http://www.michelbergerbooze.com/

נעים ואלגנטי

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

http://fivethirtybrew.com

תמונות נחשפות

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


http://www.whathappensnextbook.com/


מספרים סיפור: דוגמא ששווה אלף מילים

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

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


http://www.redirectdigital.com.br/


כשמתלהבים יותר מדי מהטרנד

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

http://ala.ch/

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

לחצו לטורים קודמים בסדרה

איך מקפלים עולם ומלואו לתוך הסמארטפון?

לא סתם עוד לינק כחול

עגול זה יפה

שחור בולט: אתרים מהצד האחר

טופס שעושה חשק? יש דבר כזה

7 הטרנדים שיעצבו את הרשת ב-2012

7 הטרנדים שכבשו את הרשת ב-2011

אמנות הגלילה: לצלול בסטייל לתוך הרשת

המלך מת, יחי המלך החדש

הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ