כשאתם נכנסים לאתר שנראה מדויק, נקי ונעים לגלישה, הוא מרגיש טבעי. הכל זורם, הכפתורים במקום, התמונות בגודל המושלם, הכל ממורכז בדיוק.
פעם למדתי בקורס של עמוס עוז, והוא אמר שספר טוב הוא כזה שלא מרגישים בו את הזיעה של הכותב. יכול להיות שאותו הדבר נכון גם בבניית אתרים.
מאחורי הקלעים של בניית אתר, שהוא בסך הכל דף או כמה דפים שאליהם מגיעים כמעט באגביות בעת הגלישה באינטרנט, ישנן שעות על גבי שעות של מחשבה, הגדלה והקטנה של אותיות, התלבטויות בין פונטים, תיקונים ובדיקות, והתעסקות כמעט אובססיבית במרווחים, מרכוזים וצבעים.
ונכון, יש כבר AI, וכביכול, אפשר לעשות את התהליך הזה בפשטות. אבל מה אם אני לא רוצה פשוט, או מהר? מה אם אני רוצה לעשות את זה כמו שאני מדמיינת?
במאמר הבא ניסיתי לשפוך מעט אור על התהליך מאחורי הקלעים, ואם גם אתם אובססיביים מעט כמוני, אולי תוכלו למצוא את עצמכם בתחום גם (ואני מוכנה גם ללוות אתכם בצעדים הראשונים 🙂
שלב 1: המבנה והעיצוב הראשוני – ניסוי וטעייה (או: איך שוב מצאתי את עצמי מדפדפת בכל הפונטים האפשריים ולא מוצאת את הנכון?)
השלב הראשון הוא שלב הניסוי והטעייה. זה הרגע שבו הכל עוד פתוח – וצריך לבחור את הצבעים, להגדיר את המבנה הבסיסי, לשחק עם פונטים (החלק האהוב עליי!), לעצב כפתורים ולבחור גם את הצבע שיסתתר מתחת לאייקון במעבר עכבר. הכל עוד פתוח בשלב הזה, לטוב ולרע.
הטוב הוא שזה שלב יצירתי מאוד. אבל הרע? צריך להיות טובים מאוד בקבלת החלטות. ולמרות שהן קטנות, במוחו של בונה האתרים הן נדמות גורליות במיוחד! הנה דוגמה לכמה מההחלטות האלה.
- כפתורים מעוגלים או מרובעים? כן, כי אין דבר כזה "סתם כפתור". כפתור מעוגל אומר נעים, מזמין, היי, אני ידידותי! כפתור מרובע אומר אני רציני, תסמוך עליי! ואיך אני בוחרת את הבחירה הנכונה שתתאים ללקוח, שתתאים לאתר, ושלא תשגע אותי כי היא לוקחת כל כך הרבה זמן?!
- איזה פונט לבחור? לכאורה, סתם בחירה אסתטית. בפועל היא מייצרת טון רגשי באתר. מפעילה חלקים לא מודעים שקובעים אם להישאר או לא. ויותר מהכל, היא מפעילה בי את האובססיה שגיליתי עוד בגיל קטן לפונטים, זו שמרגשת אותי כשאני מגלה שיצא פונט חדש במאגר החינמי של גוגל, ומתסכלת אותי שכשבחיפוש ה-100 עוד לא מצאתי את "האחד". לפעמים זה נראה קשה יותר מבחירת בן-זוג, בחירת פונט. לא חשוב כמה אפשרויות יש, משהו עדיין יכול היה להיות נכון יותר (OCD אמרנו?).
- מבנה האתר – כל כך הרבה בחירות יכולות להיות פה: כמה אוויר להשאיר בין החלקים? איך גורמים לאנשים להבין מה את/ה עושה בלי לכתוב מגילה? איך להשאיר בפנים אנשים בעולם שיכולת הריכוז בו מוגבלת כל-כך (אם הגעתם לחלק הזה של המאמר זו הוכחה לזה שבכל זאת יש לכם קצת יותר יכולת ריכוז מהממוצע…). ואז, כמובן, יש את הרגע שבו אני מזיזה משהו קצת למעלה, ואז קצת למטה, ואז… מחזירה אותו בדיוק לאותו מקום. רק שעכשיו זה נראה בסדר.
- בחירת תמונות – פעם היו מסתפקים במאגרים דיגיטליים, והיום בעידן ה-AI אפשר פשוט לייצר תמונות! כיף, נכון? לא ממש, כי יש פשוטו כמשמעו אינסוף אפשרויות של תמונות עכשיו. ונוסיף לזה את התחביב שלי להתכתב עם ה-AI ולייצר את התמונות האלה, ייתכן מאוד שאסחף יום שלם רק בפרומפטים ואשכח את המטרה שלשמה התכנסתי – השלמת האתר הזה, שאני עובדת עליו. מי אמר חתול מנסה להפיל כוס על רקע שקיעה? עננים מרחפים בשקיעה. רגע, מה ניסיתי לעשות?!
ונניח שכבר הצלחתי להגיע להחלטות בשלב הראשון, ובניתי את המאקרו, בהתבוננות כוללת על הדף תמיד יש מה להזיז, מה לשנות, תמיד יש החלטה שנראית לא נכונה וכן נכונה ושוב לא… ואם אחליף את הירוק בקבוק לירוק זית? אין לזה סוף.
אך בסופו של דבר, אחרי שהכל מתאים בבניית האתר עבור מחשבים ניידים ומסכים גדולים, צריך גם לעשות התאמה למובייל…
שלב 2: המעבר למובייל – כאילו לעצב אתר חדש מאפס, אבל בלי הכיף של ההתחלה
יש! הצלחתי לקבל מיליון החלטות קטנות! האתר נראה כל-כך יפה! אבל עכשיו, אני מעבירה את ההגדרה למצב מובייל בציפייה לראות איך האתר נראה על מסך קטן, ואז… מה קרה פה??
- כל הטקסטים שהיו מסודרים בצורה מושלמת עכשיו נדחסים כמו רכבת בשעת עומס.
- הכפתורים הענוגים והאסתטיים פתאום תופסים חצי מסך.
- תפריט הניווט נראה אחרת לגמרי….
ברור שמובייל זו התצוגה הכי חשובה, כי הרי אף אחד כבר לא גולש מהמחשב. אבל על הדסקטופ הכל נראה הרבה יותר יפה! האתר הרגיש ממש כמו שצריך. ועכשיו שוב צריך להתחיל במלאכה הסיזיפית של לגרור, להקטין, לשנות רוחבים, להחליף גדלי פונטים, לשנות את מיקום התמונות – ולפעמים זה מרגיש כאילו אני פשוט מעצבת אתר חדש לגמרי.
אבל גם השלב הזה עובר, והנה יש לנו 2 (ובדרך כלל 3) תצוגות למסכים שונים. הגיע הזמן לשלב נוסף ולא פחות חשוב.
שלב 3: ה-QA – ללחוץ על כל כפתור, לתקן כל לינק, ולמצוא תקלות שאף אחד לא מבין איך הן קרו
זהו. האתר מוכן! …בערך. כי עכשיו מגיע שלב הבדיקות הידוע גם בשם "למה זה לא עובד עכשיו?"
אז מה בעצם אני עושה עכשיו?
- אני לוחצת על כל כפתור באתר. כל אחד. חמש פעמים. דרך הדסקטופ והמובייל. ואם אפשר גם דרך מכשיר נוסף כדי לבדוק שאם אחרים נכנסים זה נראה אותו דבר.
- אני בודקת שהלינקים מובילים לאן שהם אמורים להוביל. והם כמובן לפעמים לא. או שהם כן אבל לא נפתחים בחלון חדש. או שהם נפתחים בחלון חדש אבל צבע הלינק כחול זית ולא כחול פוקסיה. או משהו כזה…
- וצריך כמובן גם לבדוק איכשהו את גרסת הטאבלט, למרות שאני בספק אם מישהו אי פעם ישתמש בה. ובכל זאת בודקים.
אחרי שאני עושה את זה מישהו אחר צריך לעשות את זה. ואני תמיד מגלה שפיספסתי משהו. כמה שאני מנסה שלא…
ובכל זאת, אחרי ה-QA אפשר להעלות את האתר לאוויר!
שלב 4: האתר עולה לאוויר! (אבל רגע, רק עוד שינוי אחד קטן…)
אני שולחת ללקוח את הקישור ומחכה לתגובה: "וואו, מדהים! בדיוק מה שרציתי!"
ואז…
"אפשר רק לשנות צבע של כפתור אחד?"
"ותגידי, הכותרת בעמוד הראשי – מה דעתך להחליף אותה למשהו אחר? לא בטוח מה, אני אחשוב על זה."
בסופו של דבר, השינויים נעשים, ואני יודעת שהאתר באמת שלם כשאני מקבלת את המשפט הקסום: "זהו! מושלם! תודה ענקית!!"
אני לוחצת על כפתור הפרסום, צופה באתר החדש זורח לאוויר, ואומרת לעצמי: "עד הפעם הבאה…"
(כי אין דבר כזה אתר שבאמת נגמר.)
ה(אינ)סוף
