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

כמה סוגי סמנים יש במוצר שלכם? בעצם כמה סוגי סמנים אתם בכלל מכירים?

See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.0

עוד שאלה, מתי השתמשתם לאחרונה ב crosshair?

איך אומרים את זה בעברית? “כוונת”?

למה קל להתעלם מהסמנים

  • ממשקי מגע \קול\ AR – עתיד הממשקים הגרפיים שסוחפים את המשתמשים לא משתמשים בכלל בעכבר
  • אתם חושבים שאין חשיבות לסוגי הסמנים השונים.

למה שיהיה אכפת לכם?

הנה 3 סיבות מצויינות:

מזמינות

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

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

אורינטציה

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

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

משהו שמצאתי מעניין למשל, בכללים של פלטפורמת הVR של גוגל מדגישים את הייתרונות של מימוש “השלט” בלייזר ואיךל הוא עוזר למשתמש:

הייתרונות בעיצוב סמן לייזר הם:

  • Faster to notice and follow than just a cursor.
  • Best way to communicate the angle of the ray and help with the intuitive feel of how the orientation of the controller input affects the ray.
  • Realtime feedback.
  • After using another interaction mode (driving, flying, rolling), showing the laser is a clear indication that the interaction mode has changed to ray-based UI input.

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

במאמר הזה – מעצב מפיייסבוק מסביר על תהליך העבודה בעיצוב האוואטרים ל facebook VR.

עוד זה מדבר וזה בא

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

Figma’s Sean VS. Hana working on a horribly colored train app

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

אם עץ נופל ביער ולא היה *דינג*

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

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

אינטראקציות אחרי ובזמן פעולות בממשק מגע – material design

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

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

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

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

How to

הנה מאמר למפתחים שרוצים ליישם:

Changing the Cursor with CSS for Better User Experience (or Fun)