UX, UI ועיצוב מוצר בעברית, משלב המחקר ועד המסירה לפיתוח

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

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

שישה שלבים, מהשאלה ועד המסירה

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

1. מחקר — להבין לפני שמציירים

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

2. הגדרה — לבחור מה פותרים

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

3. שלד — זרימות וסקיצות

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

4. ממשק — העיצוב שרואים

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

5. בדיקה — לראות אנשים אמיתיים מנסים

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

6. מסירה — מהקובץ לצוות הפיתוח

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

ומה עם עברית?

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

מה לא תמצאו כאן

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