Design vs Dev

היום בו הבנתי שמפתחים ומעצבים זה כמו בכל מערכת יחסים + כלים שפיתחתי לגישור על הפערים בינינו.

קרה לכם פעם שמפתח שעבדתם איתו על פרויקט ניגש אליכם ואמר בזלזול משהו כמו – ״אז מה אם הכפתור גדול בחמישה פיקסלים?״ לי זה קרה. והרבה.

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

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

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

 

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

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

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

1. ללמוד את השפה

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

אז במקום Stroke אני אומרת – Border

ובמקום רווח בין אלמנטים – Padding

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

אני ועמרי שפיגל המפתח, עובדים על פרויקט

2. לשתף את המפתחים כבר בשלב האפיון

אפיינתי מסך של שיתוף Dashboards בין משתמשים וקביעת הרשאות העריכה שלהם.

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

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

א. יכולנו פשוט להגיד – זה האפיון, לפי זה נבנה העיצוב, זה עבר לא מעט אנשי UX ו-Product. קח ותעשה!

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

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

בסוף שילבנו בין האפשרויות ובמקום טוגל עשינו דרופ דאון:

איפיון – הפתרון של המפתח – תוצאה סופית

אז מה הרווחנו פה?

  1. דעה של מישהו שחי את עולם ה- Web.
  2. שיתפתי את המפתח בתהליך הבניה של הפיצ׳ר אז הוא מבין אותו יותר.
  3. הוא מרגיש חלק מהתהליך, עם תחושת אחריות ומחויבות יותר גדולה כלפי הפיצ׳ר.
  4. קיבלתי פידבק כבר בשלב האפיון על מגבלות וקשיים שיכולים להיות בזמן הפיתוח והייתה לי את ההזדמנות לפתור אותם בשלב המוקדם הזה.

3. להצטרף ל-Daily

באותו הנושא של הבנת הקשיים אחד של השני, אחד הדברים שיותר עזרו לי הוא להשתתף ב-Daily של המפתחים.

בקליקטייל אנחנו עובדים בשיטת Agile. כחלק מהשיטה כל בוקר מפתחים מקיימים Daily או סטאנדאפ – 10 דקות בהם מספרים איך היה אתמול ועל מה הם מתכוונים לעבוד היום.

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

דיילי של צוות פיתוח בקליקטייל

4. לחשוב כמו מפתח

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

יעל קרן, המנהלת הנהדרת שלי ערכה לנו רשימה של Edge Cases ובכל פעם שאני יושבת מול עיצוב אני בודקת שכיסיתי את כל הדברים לפיה:

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

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

לסיום

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

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

ואולי במקום להיות אחד נגד השני, אנחנו יכולים ליצור לנו עולם חדש ומשותף משלנו עם עבודה יעילה ומהנה.

 

מה הטיפים שלכם לעבודה עם מתכנתים? כתבו לנו בתגובות.

הפוסט נכתב על ידי:

סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

קבלת ה-PDF מותנית ברישום לניוזלטר שלנו (מי שרשום לניוזלטר נחשב חבר בקהילה ולכן אנחנו מפנקים בגישה לכל החינמיים שלנו).


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

×

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: