• Wixer

אנימציה באתרים - עשה ואל תעשה

עודכן ב: ינו 16

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


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



דוגמא להוספת אנימציה מהעורך תוכן של וויקס

הכירו את הבסיס של אנימציה

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


מעצבי האתרים של Wix מחלקים את השימוש באנימציה לשלוש קטגוריות שונות:


● מיקרו אינטראקציות: השימוש בהן עוזר לגולשים להבין באופן בהיר ומהיר אינטראקציות קטנות (כמו הקלקה על כפתור). ניתן להשיג זאת על ידי שימוש ב- hover box effects.

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

● שעשוע וקישוט: קטגוריה זו מוסיפה לאתר שלכם קצת סטייל כמו גלילת Parallax


רוצים לקרוא עוד? הנה מדריך לשימוש באנימציה ואיורים בעיצוב אתרים.


מתינות היא חוזקה, לא חולשה

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


משימה אחת בלבד - רק אחת

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


● הנחיית תנועת האתר באמצעות אנימציה שמראה לגולשים מתי לגלול והיכן להקליק.

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

● הדמיית השפעת המוצר שלכם או השירות שאתם מספקים.

● שבירת הגלילה הסטטית באתר שלכם עם מעט תנועה.

● יצירת אוירה מסויימת באתרים שמתאימים במיוחד לתוכן מונפש, למשל, חנות אונליין לבגדי ילדים.


האם מצאתם הצדקה לשימוש באנימציה כמו המקרים האלו? מצויין! אז אתם מוכנים! (רק אל תשכחו את פסקת המתינות).


אז מה מנפישים? (ובעיקר מה לא!)


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


● דברים שמניעים התנהגות (למשל, כפתורי ניווט, קריאות לפעולה, או תמונות מקושרות).

● אלמנטים מנווטים (חצים, גלילת רקע)

● אלמנטים של טעינה

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


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


הפשטת התוכן

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


הקהל מכריע

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


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


לעוד מאמרים על וויקס? לחצו כאן

צריכים עזרה בבניית אתר הוויקס שלכם? וויקסר




WIXER היא חברה שמציעה פתרונות משלימים על מערכת וויקס.

קיבוץ עמיר ד.נ.ג עליון 1214000 ת.ד 124

טלפון:    052-5622806

דוא"ל:    dor.izraeli@gmail.com

מכירות:  office@wixer.co.il

whatsapp.png
מתקשה? מעוניין בהדרכה אישית על מערכת וויקס?