שדרגו את העיצוב באתר - כך תבנו אנימציות מושלמות

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

בואו נפרק את הנושא, ברשותכם.

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

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

שימוש באנימציה לטובת מיקוד הגולש

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

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

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

כאן מצאתי קונספט של תהליך מילוי טופס – שונה במעט.

נוציא לרגע את ההחלטות/סגנון העיצובי שנבחר – ואליהם אתייחס רק בקצרה כרגע:

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

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

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

הקלה על ניווט באתר

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

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

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

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

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

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

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

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

הנפשה למען מניעת נטישה

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

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

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

עידוד אינטראקציה

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

אסביר:

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

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

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

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

יצירת עניין והדגשת תוכן

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

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

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

מה שמוביל אותי לנקודה הבאה…

יצירת עומק באתר

כשאני אומרת עומק, אני מתכוונת בדיוק לזה, בדוגמא הבאה.

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

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

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

כלי כמו זה, בידיו של משתמש יצירתי, מביאים למצב בו ניתן לייצר חוויה חדשה בזכות תנועה קלה, בלי לבוא על חשבון נוחות השימוש. אגב, האתר בו הדוגמא נמצאת? בזמן ששיחקתם עם זה, גוגל קלט זמן שהייה גבוה, ולכן יחליט לדרג את האתר גבוה מעט יותר – כי הוא יודע לייצר עניין אצל גולשיו. Win-win situation!

הנגשת מידע מסובך

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

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

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

ומה יש לגוגל להגיד בנושא?

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

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

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

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

ובכל זאת – מתי לא להנפיש?

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

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

החלק המעניין – איך עושים את זה

שיווקתי את הרעיון די והותר. אז מהם ה- Tools of the trade שבהם משתמשים כדי ליצור את כל הדברים המעניינים הללו? ובכן, לרוב מדובר בשילוב של מספר דברים. קודם כל, שפת ה-CSS המוכרת לרובנו העוסקים במלאכה מאפשרת להגיע לתוצאות מעניינות מאוד, ללא שימוש בשום עזר חיצוני נוסף.

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

כלי חשוב נוסף הוא כמובן JavaScript – ובאופן ספציפי, ספריות דוגמת jQuery ו-MooTools שהופכות את מלאכת ההנפשה לקלה בהרבה.

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

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

סוף דבר

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

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