UX ו-UI: מה ההבדל, איך הם עובדים יחד ומה כל אחד מהם מחליט בפועל במסך

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

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

UX בקצרה: האם אפשר להשיג את המטרה

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

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

UI בקצרה: האם מבינים מה רואים

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

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

דימוי אחד שעוזר, ואיפה הוא נשבר

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

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

דוגמה ראשונה: טופס הרשמה

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

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

דוגמה שנייה: אפליקציה לקביעת תור

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

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

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

איפה הם נפגשים

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

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

מה כל אחד מהם מודד

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

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

איך זה נראה בתהליך עבודה אחד

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

מי עושה מה בצוות

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

איך מזהים אם הבעיה היא UX או UI

כשמסך "לא עובד", השאלות האלה עוזרות לכוון את התיקון:

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

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

טעויות נפוצות

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

שאלות שקוראים שואלים

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

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

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

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

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

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