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

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

1. יצירת חווית משתמש טובה יותר על ידי הכוונת משתמשים

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

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

 

Analyzing GIF…

Analyzing GIF…

 

2. לגרום למשתמש להתאהב במוצר שלכם

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

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

שאלה לי אליכם, איזה כפתור יותר ״עושה״ לכם את זה?

 

1

2

אני מאמין שרובכם בחרתם במספר 1.

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

 

3. להלהיב את הלקוח שלכם

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

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

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

 

4. תיק עבודות

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


לפני סיום… חשוב לציין!

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

לסיכום,

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

מקווה שקיבלתם ערך ממני :)

—————

 

דרך אגב…

אני ורן קרמר השקנו פינה חדשה ביוטיוב של פיקסל פרפקט שקוראים לה ״UI Motion" בה מידי שבוע נעלה מדריכים על איך להנפיש את הממשקים שלנו.
אתם מוזמנים לצפות ב2 הסירטונים הראשונים שהעלנו השבוע:

1.איך לייצר אייקון Like כמו של ספוטיפיי: לינק לסרטון ביוטיוב 
2.איך להעלות מאפטר אפקטס לספריית לוטי: לינק לסרטון ביוטיוב 

 

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

 

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

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




    What is 8 + 2 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;