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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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