מיקרו-אינטרקאציות, כי היופי נמצא בפרטים הקטנים

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

1. נלחץ על כפתור הכנת הקפה.

2. המכונה תופעל כעת ותתחיל לחמם את המים על פי הפרמטרים שהוגדרו מראש.

3. נורית חיווי תהבהב ותציין שהמכונה קיבלה את הפקודה.

4. המכונה תתחיל להשמיע צלילים שמעידים שמשהו קורה (טחינת פולים, זרימת מים וכו').

5. אנימציית ה- LED (אם יש לכםן) תראה את ההתקדמות של תהליך ההכנה.

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

7. במידה ויש תקלה כלשהי המכונה תפסיק את התהליך ותציג הודעת שגיאה.

8. בסיום ההכנה, כלומר מזיגת הקפה לכוס, המכונה תחזור למצב המתנה.

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

בשלב הזה נכון יהיה לו בוגרי התואר השני בהנדסת אנוש (human factors engineering) ירימו גבה, שכן התיאור של מיקרו-אינטראקציות מזכיר בבירור את הרעיון הותיק יותר של ניתוח מטלות היררכי (hierarchical task analysis). ואכן מדובר על אותה גברת בשינוי אדרת, או יותר נכון - עם אדרת המתאימה קצת יותר לעולם של עיצוב אינטראקטיבי למערכות מורכבות.

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

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

איך אינטראקציות משפרות את חוויית המשתמש?

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

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

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

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

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

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

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

דן סייפר דן בס(יי)פר שלו (סליחה 😅):

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

בואו נצלול למודל המתואר הספר.

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

לפי סייפר, מ״א מורכבת מ- 4 רכיבים: טריגר, חוקים, משוב ומצבים/לולאות.

טריגרים

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

1. טריגר משתמש: פעולה מכוונת של המשתמש כמו לחיצה, הקשה, תנועת יד, פקודת קול וכו'.

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

חוקים

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

משוב

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

1. ויזואלי (אנימציה, שינוי צבע, שינוי צורה של אייקון וכו')

2. שמיעתי (צליל, טון)

3. תחושתי (רטט)

לולאות ומצבים

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

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

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

יישום בפועל

סייפר (Saffer) מציע 2 גישות לשילוב מיקרו-אינטראקציות בתהליך העיצוב:

על-בסיס מקרה-קצה (case-to-case basis)

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

1. מהו הטריגר (פעולת משתמש או מצב מערכת) שמפעיל את מ״א הזו?

2. מהם הכללים ששולטים בהתנהגות של המ״א הזו?

3. איזה משוב (ויזואלי, שמיעתי, מגעי) צריך להיות מסופק למשתמש על בסיס הכללים?

האם יש מצבים (התנהגויות חלופיות) או לולאות (מצבים חוזרים) למ״א הזו?

גישה הוליסטית

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

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

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

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

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

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

בחירות וקוסטומיזציות

ולידציה וקידום של טפסים

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

פעולות גרירה

כפתורים ממונפשים

התחלה / עצירה

מיקרו-אינטראקציה תעזור לנו לסמן למשתמש מתי פעולה התחילה / הסתיימה.

אנימציות גלילה

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

מצבי שגיאה/הצלחה

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

אנימציות טעינה

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

תוספות מהנות

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

לסיכום

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