הפיכת חיים עם מיקרו-אינטראקציה ואנימציה ממשק משתמש לחיים באמצעות שיתופי פעולה של מעצבים

אנו יכולים ליצור חוויה מענגת למשתמשים באמצעות מיקרו-אינטראקציה ואנימציית ממשק המשתמש!

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

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

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

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

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

מה הם? מדוע זה טוב לחוויית המשתמש? מדוע מעצבים ומפתחים צריכים לשלב אותם בעבודתם? כיצד צוותי עיצוב מוצרים יכולים לעבוד יחד כדי לשפר אותם?

מהן מיקרו-אינטראקציות ומדוע צריך להיות אכפת לנו מהן?

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

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

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

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

למרות ש"פעולות "אלה לובשות מספר צורות שונות, כמה דוגמאות נפוצות כוללות:

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

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

עקרונות מיקרו-אינטראקציות

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

  1. המשכיות (ודקויות)

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

2. חיזוי

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

3. טרנספורמציה

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

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

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

כיצד מפתחים ומעצבים יכולים לעבוד יחד כדי לחיים מיקרו-אינטראקציות לחיים

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

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

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

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

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

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

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

  1. רעיון האנימציה לא מועבר בצורה ברורה מספיק.

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

2. המעצב לא יודע אם האנימציה עובדת טוב עד שהוא יבדוק ובדוק את אב הטיפוס של המפתח.

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

3. המעצב והמפתח אינם באותו דף

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

מהם פתרונות לבעיות אלה?

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

כעת, אנו כבר לא מתווכחים אם לכלול מיקרו-אינטראקציות או לא, אנו בוחנים דרכים להפוך אותם לטובים עוד יותר!

מדריך לקונספט ואינטראקציה עם שלד

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

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

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

  1. מושג אינטראקציה שלד (מחקר תנועה)

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

2. מדריך אינטראקציה

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

3. כישורי אב-טיפוס למעצבים

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

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

אם אתה מכיר קידוד:

  • נייד: Xcode, סטודיו אנדרואיד
  • נייד או אינטרנט: פרמר
  • אינטרנט: אנימציית CSS

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

  • Invision ומרבל

אם ברצונך ליצור אינטראקציות מפורטות יותר:

  • עקרון, Adobe CC, אוריגמי סטודיו ופיקסייט

אם אתה רוצה ליצור אינטראקציות מפורטות + הנפשה:

  • תופעות לוואי

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

אינטראקציות צוות מענגות מייצרות מוצרים מענגים

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

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

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

למידע נוסף על ממשקי API, קוד פתוח, אירועי קהילה ותרבות מפתחים ב- Capital One, בקר ב- DevExchange, פורטל המפתחים החד-פעמי שלנו: Developer.capitalone.com.