מה זה UX ו-UI, למה כולם עושים הפרדה ביניהם (UX/UI) ולמה אנחנו לא?

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

 

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

 

The Difference Between UX and UI Design
אספנו מגוגל מגוון דוגמאות לתמונות שמנסות להמחיש את ההבדל בין UX ל- UI.

 

לא סתם זה ככה, יש לחלוקה הזו חשיבות גדולה: ההבדל בין ה-״חוויה״ (User Experience)  ל״ממשק״ (User Interface) הוא משמעותי כאשר מבדילים בין תפקידם של אנשי המקצוע ומגדירים לכל אחד את גבולות הגזרה והסמכויות בעבודה שלו. 

 

למעשה, הפרדת הכוחות בין תחום ה-UI וה-UX זה לא משהו שקרה מזמן. מי שלמד עיצוב גרפי לפני 10 שנים, לא הכיר את המונחים הללו כפי שהם באים לידי ביטוי היום. האיש שטבע את המונח User Experience) UX) היה החוקר דונלד (דון) נורמן עוד במילניום הקודם, והספר שלו The Design of Everyday Things למעצבי UX הוא פחות או יותר ה״כמעיין המתגבר״ לאדריכלים; בין אם אתם מסכימים איתו ובין אם לא, הוא נחשב התנ״ך של חווית משתמש. הרבה ממה שנכתב שם כשהוא יצא בשנת 1988, רלוונטי גם היום ומשמש כיסודות איתנים בעולם הדיגיטל ובכל מה שמגדיר ממשקים בין אדם למכונה.

 

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

 

UX design - UX-UI

 

UX – User Expiriance – עיצוב חוויית משתמש
 

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

 

UI design - UX-UI

 

UI – User Interface – עיצוב ממשק משתמש
 

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

 

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

 
UX-UI – Product Design – עיצוב מוצרים דיגיטליים
 

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

 

אז למה אצלנו ב-Hello לא מפרידים בין תהליכי UX ו-UI?
 

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

 

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

  • זה חוסך בזמן (וגם בתקציב כמובן), לנו וללקוח.

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

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

  • זה מאפשר להבין מהר מאוד אם משהו עובד או לא בלי צורך לדמיין או לשער.

  • זה מאפשר חופש עיצובי. איש ה-UI לא צריך למלא אחר ״תבניות״ Wireframes, אלא יש לו יד חופשית להביא לשולחן העבודה את הפתרונות היצירתיים שלו מתחום חוויית המשתמש שגם יתאימו לשפת המותג.

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

  • אם יש כאן לקוחות פוטנציאלים, אל תיקחו את זה אישית, אבל גילינו ש-99% מכם, גם המקצוענים והמנוסים ביותר, לא יודעים לקרוא שפת אפיון ולא יודעים להתייחס אליה בהתאם. אם נדייק- יצא לנו בעבר להיתקל המון פעמים בהערות איפיון בשלב העיצוב- מה שהעלה את השאלה- איך בדיוק האיפיון אושר?
    ככה הגענו למסקנה שלאפיון כשלב ראשוני אין משמעות בתהליך כי ברגע שרואים אותו מעוצב הוא מקבל משמעות אחרת. במקום זה אנחנו מציירים flow מהיר של המשתמש ביחד עם הלקוח ומשם יוצאים ישר לעיצוב.