משחפיקציה של ממשק משתמש באינטרנט

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

נקודות (Points)

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

Google Image Labeler

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

Waze

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

רשימת מובילים (Leaderboard)

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

Stackexchange

StackExchange היא רשת אתרים המחולקת לפי קטגוריות (למשל ux.stackexchange.com האהוב על כולנו) בה ניתן לשאול שאלות ולקבל תשובות תמורת ניקוד. בצילום המסך, אנו רואים את ששה המשועממים הגדולים שכרגע מובילים את הטבלה. החבר'ה הם סלבס של ממש באתר וזכור במיוחד שמישהו שאל שאלה": "מה Jon Skeet לא יודע?" וקיבל מבול של תשובות מבדרות למדי (כולל כמובן, מג'ון סקיט בעצמו).

אתגרים (Challenges)

Challenge או Trophy או Badge זו הדרך לציין הצלחה של השחקן בביצוע משימה שהיא לאו דווקא חלק מהמטרה המרכזית של המשחק. לדוגמא, ביצירת המופת Call Of Duty: Modern Warfare 2, יכולת לקבל Trophy אם היית הורג 7 תרנגולים תוך 10 שניות. זה גרם לי לחוויה מטופשת כשבזמן שאני מותקף על-ידי עשרות טרוריסטים אני עסוק בלהתרוצץ ולחסל תרנגולים. האתגרים לא חייבים להיות מוגדרים מראש, אלא ניתן לבקש מהשחקנים להגדיר בעצמם את האתגרים: צירפתי שתי דוגמאות מתוך מיליון שקיימות באינטרנט:

Mint.com

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

Nike+

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

סמני עכבר משתנים (Custom cursors)

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

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

שימו לב לדוגמא של Elder Scrolls IV:Oblivion:

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

Google Maps

כשגוררים את המפה ב Google Maps, משתנה הסמן לסימן של יד גוררת. זאת דוגמא מעולה ליישום של נושא ה Custom Cursors אשר עוזר למשתמש להבין את הפעולה המתבצעת.

אייקונים (Icons)

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

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

DonQ

DonQ מייצרים רום. הם כל כך גאים במוצרים שלהם שהם העזו להפוך אותם לאייקונים:

קרוסלות

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

שימו לב לתפריט העליון המאפשר ביצוע פעולות על הדמות. משחקים עושים שימוש יותר "אקסטרימי" בקרוסלות  מהWEB כשניתן לראות בהרבה משחקים קרוסלות שמחליפות את התצוגה בכל העמוד. ("Full page carousels"). בJQuery כבר מזמן יצרו רכיב חצי-אוטומטי לייצור קרוסלות. יש כל כך הרבה קרוסלות שם בחוץ שזה מרגיש כמו גן משחקים. ניתן לראות באתר הזה 33 דוגמאות של קרוסלות.

חוק פיטס (כן, הוא שוב…)

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

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

Sketchbook Pro

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

מה עוד?

תחום המשחפיקציה הוא תחום בוער עכשיו באינטרנט. יש וויקי שמרכז את הנושא ונותן הרבה דוגמאות באתר http://www.gamification.org . באתר ניתן ללמוד על קונספטים נוספים כמו Free Lunch, Combos , Quests ועוד. אשמח לשמוע על עוד רעיונות ודוגמאות שלכם לשימושים מדליקים באלמנטים משחקיים בממשק משתמש.

ביום שלישי, 27/12/2011, נקיים מפגש ערב בנושא "גיימיפיקיישן והצד האפל של UX". המפגש יתקיים במרכז הבין-תחומי בהרצליה. אתם מוזמנים לקרוא עוד על המפגש ולהבטיח את מקומכם.