מתודולוגיית עיצוב UX/UI: מריסרץ' ועד מערכת רכיבים שאפשר לתחזק

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

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

01 · ריסרץ': קהל, מתחרים, ארכיטקטורת מידע

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

02 · מסע משתמש והחלטה על המסכים

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

03 · היררכיה לפני אסתטיקה

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

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

04 · מערכת עיצוב: טוקנים לפני מסכים

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

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

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

05 · RTL מההתחלה, לא בסוף

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

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

06 · מסירה שאפשר לתחזק

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

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

מה זה משנה מעשית

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

איך מודדים חוויה במקום להתווכח עליה

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

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

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

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