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

בפוסט הזה אני סוקר את המיקרו-חוויות שהם כביכול “לא חובה” אבל הופכים את החוויה הכוללת בtrello להרבה יותר מתגמלת.

נתחיל ברשימה:

1. איך להפטר מתפריט ההמבורגר\קבב\וכו’

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

2. להשוויץ בפיצ’רים חדשים

מה מנהלי פרוייקטים הכי אוהבים בעולם? – להוסיף פיצ’רים חדשים כמובן! בטרלו הבינו את קהל היעד ומצאו דרך יצירתית ‘להשוויץ’ אחרי כל עדכון – הקמע של טרלו מופיע trello new feature inputבאנימציה ולידו תגית ‘new stuff!’ ראיתי בעוד הרבה מקומות הודעות על עדכונים ומשום מה רק פה באמת הופתעתי והתלהבתי – ולכן גם לחצתי לראות מה חדש..

(מיותר לציין שאין לי מה לעשות עם המידע הזה באמת ולא קראתי את העדכונים עצמם אבל היי.. אנימציה של כלב!)

3. להוסיף מיקרו-אינטראקציות

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

4. תוויות עם נגישות בקלות

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

5. איך להציג עזרה (למתחילים)

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

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

6. איך להציג עזרה (למקצוענים)

ומה אם אין לי זמן לכל העזרות שלכם? מה אם אני נולדתי עם מקלדת ביד ואין לי זמן לבזבז על העכבר?

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

7. התאמה אישית למקרה שימוש

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

trelloo4בדוגמא הזו – בעת “הדבקה” של טקסט ממקור חיצוני לתוך “כרטיס” קופץ דיאלוג שמציע לחלק את הטקסט – לפי כמו השורות – למספר כרטיסיות. או במילה אחת – אוטומציה.

8. להשלים את המראה

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

color theifing

color theifing

9. איפה אתה חי?

favico תמונה מתוך little big details

טרלו, כמו הרבה אחרים חי בדפדפן. אבל איך זה מתקשר לחווית השימוש? למשל , טרלו מכיל בתוכו “לוחות” שונים (ללקוחות או פרוייקטים שונים). אם אני כמשתמש בוחר בכל שינוי של צבע רקע ללוח מסויים, כנראה אני רוצה להבדיל בין הלוחות השונים שלי. אז איך אפשר לעזור לי להבדיל ביינהם?  פתרון מקורי הוא שימוש בfavico של האפליקציה. כלומר האייקון הקטן שמופיע בשורת הכתובת בדפדפן (וחשוב מכך – בדפים השמורים) מקבלת את צבע הרקע של אותו לוח, יותר מזה –ALERT כמו בדוגמא הקטנה כאן – גם התראות מוצגות בfavico ככה שאוכל לקבל התראה גם אם אני במרחק של כמה “טאבים” בכרום…

הנה עוד דוגמאות לשימוש בfavico בצורה יצירתית כדי לתת למשתמש מידע.

10. ללמד משתמשים בקלות

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

לסיכום

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

לקריאה נוספת – little-big-details אתר שאוסף מלא חוויות קטנות וחכמות כמו בפוסט הזה.