אנימציות בחווית משתמש: מאין באת ולאן תשוב

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

מאין באת ולאן תשוב

לחיצה על הטוויטר לוקחת את הצבע המוכר מהכפתור וממלאת את החלל אליו החלון נפתח, ברור לנו בזכות הצבע והכיוון ממנו באה האנימציה מה פתחנו:

Materials Sharing Card
Materials Sharing Card

[sep]

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

Material Message
Material Message

[sep]

מיקום הלחיצה הוא שפותח את החלון החדש, זה מקל על המעבר בין דפים ופידבאק מאוד חזק למשתמש על הלחיצה שלו:

Card reader app design
Card reader app design

[sep]

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

Exercise screen: Set Interaction
Exercise screen: Set Interaction

[sep]

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

Add Exercises Interaction
Add Exercises Interaction

[sep]

נקודת מוצא לפתיחה של הדף – הלואדר עצמו:

 Page Transition
Page Transition

[sep]

Cloud Eval/Optimization App
Cloud Eval/Optimization App

[sep]

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

Translate
Translate

[sep]

Delivery Card
Delivery Card

[sep]

כפתור הפתיחה הופך לכפתור הסגירה, גם במציאות אנחנו פותחים וסוגרים באותו מקום:

Only Text Сontent App
Only Text Сontent App

[sep]

Material Card Interaction
Material Card Interaction

[sep]

על טוהר החוויה, ממש גורם לי לרצות גם לשלוח הודעה:

 Mail Widget Animation
Mail Widget Animation

[sep]

Tab Bar Animation
Tab Bar Animation

[sep]

 Flinto prototype. 3D Touch.
Flinto prototype. 3D Touch.

[sep]

Shared item preview
Shared item preview

 לסיכום

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

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

לטטוריאל לייצוא גיף איכותי

השראה לגיפים

טרנדים וטיפים להצגת העיצוב שלכם בדריבל

אנימציות וחווית משתמש: יד ביד

איך להעלות גיף לפייסבוק

הפוסט נכתב על ידי:

סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

קבלת ה-PDF מותנית ברישום לניוזלטר שלנו (מי שרשום לניוזלטר נחשב חבר בקהילה ולכן אנחנו מפנקים בגישה לכל החינמיים שלנו).


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

×

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: