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

כתבה זו היא התרגום למאמר המקורי How spoiling the endings emprove UX, אשר פורסם במגזין  WebdesignerDepot ע״י בן מוס.

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

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

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

מעצבים אינם מספרי סיפורים

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

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

ספויילרים במיקרו-אינטראקציות

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

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

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

Thumbnails

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

Jacky Winter היא סוכנות ייצוג של אמנים, מאיירים ואנימטורים. עם מספר גדול ומגוון של כישרונות. הדרך הטובה ביותר לעלעול בין העבודות היא בשימוש המוכר ב Thumbnails.

שימוש ב Thumbnails לא חייב להיות בצורתו הסטנדרטית.

Alexandre Nacache הוא ארט דירקטור ומעצב אינטראקטיב. באתר שלו הוא עושה שימוש באלמנטים שלמים מתוך הפרויקטים שלו במקום להשתמש בגרסאות מוקטנות של תמונת הקאבר של הפרויקט.

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

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

חמש דקות קריאה

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

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

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

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

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

Vimeo היא הפלטפורמה המובילה של הווידאו היצירתי באינטרנט. הם יכלו להציג כל מידע שעולה על דעתם – מפיק, נושא, כותרת – אך במעבר עכבר מעל הThumbnails, הם בחרו להציג את משך הקטע.

Cinelli הוא מותג אופניים איטלקי אופנתי ביותר. גלריית תמונות הדגם שלהם יכלה להסתדר עם הפניות לתמונה ׳הבאה׳ וה׳קודמת׳. גם חצים פשוטים היו מספיקים כדי להעביר את הפונקציונליות של הגלריה. אך המעצבים בחרו שימושיות מעל הכל עם תוספת פשוטה לכפתורים – מספר תמונה X מתוך Y תמונות.

נתונים הולמים

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

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

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

מפות וחיזוקים

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

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

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

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

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

המפתח לעיצוב ממשק משתמש יעיל הוא ספויילרים

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

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

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