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

למה "ואוו" כל-כך חשוב?

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

stephen

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

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

זיקוקין די-נור ואנימציה

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

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

אנימציות יכולות לקרות במעברים בין מסך אחד לשני, או בין מצב אחד לשני בתוך אותו מסך, כמו למשל ב-USA Today:

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

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

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

 

11-01-2014 20-09-41

 

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

מחוות (Gestures)

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

11-01-2014 20-24-20בשבוע שעבר עלתה לאוויר Jelly של מקים טוויטר Biz Stone. האפליקציה מאפשרת לשאול שאלות, עם או בלי תמונה, ולקבל תשובה מהרשת החברתית הרחבה שלכם. הצד השני של המטבע הוא מענה לשאלות של אחרים. כשנכנסים לאפליקציה מגיעים לחלק הזה די במהירות. נעשה בו שימוש במחווה ייחודית, flick (תנועה מהירה) למטה ש"זורקת לפח" את השאלה הנוכחית, או פשוט מדלגת עליה, אם לא מתאים לכם לענות עליה.

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

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

מיקרו-קופי ואישיות

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

11-01-2014 21-17-35

תתפלאו, אבל גם לרשות אבטחת נמלי התעופה של ארה"ב (ה-TSA) יש הומור. נסו לחפש פילים באתר שלהם ותראו בעצמכם:

tsa elephnat

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

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

ebay - microcopy - 10-04-2013 09-36-02

 

משחקיות

התחום של Gamification הגיע לשיא בשנתיים-שלוש האחרונות. מעבר ל-buzz, יש למשחקיות הרבה כוח בהנעת משתמשים, ביצירת Engagement. אם אתם עדיין לא מכירים את הנושא, הנה דרך נהדרת להתחיל: הרצאה של Sebastian Deterding. אם תספיקו, יש עוד כרטיסים בודדים לסדנה שלו ב-22/1.

מה לא הזכרתי?

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

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

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

שייך לנושאים: , , , , ,