עיצוב עמוד תיק העבודות: היכן הולכות לאיבוד פניות
המבקר מגיע לעמוד תיק העבודות עם משימה משלו — להשוות ניסיון של אחרים למקרה שלו. אם במסך הראשון הוא רואה סלוגן מופשט במקום תוצאה, ומתחתיו רשת תצוגות מקדימות בלי כיתובים, אין לו במה להיאחז, והוא ממשיך לגלול מתוך אינרציה. ממפות הגלילה ואירועי הלחיצה רואים: למידע על הפרויקט מגיע חלק קטן מהקהל, ולפנייה — בודדים.
העזיבה של המבקר כמעט תמיד ניתנת להסבר. הקייסים אינם מסודרים לפי סוג המשימה, התחום או היקף העבודה, ולכן האדם נאלץ לקרוא הכול ברצף בחיפוש אחר קייס רלוונטי אחד. גלריות נמסרות ברזולוציה המקורית ומורכבות במלואן רק ברגע הצפייה — תחילת ההיכרות עם העבודות הופכת להמתנה. איש הקשר מוסתר בתחתית העמוד, והרגע שבו העניין בשיאו נשאר בלי פעולה.
אנחנו מעצבים את עמוד תיק העבודות ככלי לסינון משימות מתאימות, ולא כתערוכה. תחילה אנו מגדירים לפי אילו סימנים המזמין מזהה את הפרויקט "שלו", ואחר כך עורכים את הקטלוג כך שהסימן ייקרא בלי לחיצה. בתוך הקייס אנחנו שומרים על מבנה אחיד: מה נדרש, מה עשינו, מה יצא בסוף — ההשוואה אורכת שניות.
בהמשך אנו בודקים השערות על תנועה אמיתית: משנים את המסך הראשון, את סדר הקייסים, את מיקום הטופס ובוחנים כיצד משתנים עומק הצפייה ושיעור הפניות. תיקונים שאינם משפרים את הדרך ליצירת קשר — מבטלים.
האפקט של עיבוד מחדש של העמוד: הזמן עד ליצירת קשר ועומק הצפייה
אחרי העיבוד מחדש אנחנו מסתכלים לא על סך הביקורים, אלא על תרחיש הצפייה: מאיזו עבודה האדם מתחיל, לאן הוא ממשיך, ובאיזה בלוק הוא סוגר את הלשונית.
מפות גלילה והקלטות סשנים ב-Яндекс Метрике מראות זאת ישירות — בגרסה הישנה חלק ניכר מהמבקרים לא גלל עד לבלוק עם הפרויקטים ועזב את העמוד כבר מהמסך הראשון.
עומק הצפייה הוא נגזרת של סדר העבודות. כשבהתחלה מוצבים שלושה קייסים שתואמים את סוג המשימה של הלקוח, ומתחת לכל אחד מופיע צירוף קצר של "מה היה — מה עשינו — מה נהיה", מספר הצפיות לביקור גדל: האדם גולל לא לשם גלילה, אלא כדי להשוות את המקרה שלו לזה של אחר.
הזמן עד לפנייה מתקצר בהתאם מכמה דקות לעשרות שניות — יצירת הקשר מפסיקה להיות משהו שמחפשים בתחתית העמוד.
בהמשך פועלת ההישארות. שיעור הנטישה בעמוד יורד כשהמסך הראשון מציין מיד את ההתמחות ומציג תוצאה מדידה, ולא סלוגן כללי. ביקורים חוזרים גדלים מסיבה אחרת: את העמוד שומרים ומעבירים לעמית כטיעון בדיון פנימי על הספק, ולכן חוזרים כבר עם שאלה קונקרטית.
כדי לא לפרש החלפה של מקור התנועה כשיפור, אנחנו מגדירים יעדים על לחיצה על איש הקשר, מסננים כניסות שירות ומשווים תקופות באורך זהה עם התאמה לעונתיות. אז עומק הצפייה, הזמן עד לפנייה ושיעור הנטישות נקראים כתוצאה של שינויים במבנה, ולא כגל אקראי.
מצבי עבודה: פריסה קבועה ומערכת בלוקים גמישה
הבחירה בין פריסה קבועה למערכת בלוקים גמישה היא החלטה לא על המראה החיצוני, אלא על האופן שבו תיק העבודות יעמוד בעשרות קייסים חדשים. פריסה קבועה מצוירת עבור סט מסוים של שלושה עד שישה פרויקטים: קומפוזיציה מדויקת, שליטה מלאה בהדגשים, תוצאה צפויה ברוחב ייחוס.
המחיר — עבודה ידנית על כל קייס חדש וגרסה רספונסיבית שנבנית מחדש: מיקומים קשיחים אינם מסתדרים מחדש למסך צר.
מערכת בלוקים גמישה נבנית מרשת מודולרית וטיפולוגיה: כריכה, מדדים, גלריה, המלצה, תוצאה.
העקרונות של רשת כזו נידונו עוד ב-Модульные сетки של Мюллер-Брокманн, ובאינטרנט הם נותנים את העיקר — קייס חדש מורכב מאלמנטים מוכנים, והגרסה הרספונסיבית מתקבלת מסידור מחדש של עמודות, ולא מפריסה שנייה. גבול הישימות — תרחיש חזותי לא סטנדרטי: עבורו מתכננים בלוק בנפרד.
| אפשרות | מתי מתאימה | מגבלות |
|---|---|---|
| פריסה קבועה | 3-6 קייסים חזקים, עדכונים נדירים, הימור על קומפוזיציה ייחודית | פרויקט חדש — בנייה ידנית; מסכים צרים דורשים הרכבה נפרדת |
| מערכת בלוקים גמישה | תיק העבודות גדל, 10+ קייסים, נדרשים כללים אחידים להגשה | תרחיש לא סטנדרטי שובר את התבנית — נדרש סוג בלוק חדש |
| היבריד | בלוקים לרוב הקייסים, פריסה קבועה לפרויקטים המובילים | שני ענפי כללים במקום אחד — יקר יותר לתחזוקה |
בפועל לרוב מנצח ההיבריד: רשת ובלוקים טיפוסיים מכסים את השגרה, והפריסה הקבועה נשארת לקייסים שמוכרים.
שלבי העבודה על הפריסה: מניתוח המשימות ועד ההעברה
הפריסה של תיק העבודות היא לא תמונה, אלא פתרון טכני: היא מגדירה את מבנה הנתונים, את מצבי האלמנטים ואת היקף העבודה לקידוד. לכן אנחנו מתחילים לא בציור, אלא בניתוח ובשלד — תיקון ברמת הסכמה אורך דקות, ואותו תיקון בגרפיקה מוגמרת מחייב לעבוד מחדש על חצי מהעמוד.
-
ניתוח המשימות. מבררים את מי העמוד משכנע ואיזו פעולה מבצע המבקר. מגדירים אילו פרויקטים מציגים, באיזה סדר ומה מוכיח כל קייס: תפקיד בפרויקט, תוצאה, לוח זמנים.
-
סכמת העמוד. מרכיבים את מבנה הבלוקים וההיררכיה: כמה קייסים נראים מיד, היכן יושבים המסננים, כיצד נפרסת רשימה ארוכה. בפלט — מפת עמוד עם עדיפויות והיקף תוכן לכל בלוק.
-
אב-טיפוס. שלד בלי גרפיקה: רשת, פרופורציות של בלוקים, לוגיקת מעברים וסינון. בודקים על תוכן אמיתי — שמות קצרים וארוכים, מספר שונה של תמונות, תוצאה ריקה של המסנן.
-
ציור. שפה חזותית מעל השלד המאושר: טיפוגרפיה, מרווחים, מצבי כרטיסים בעת ריחוף וטעינה, גרסאות רספונסיביות למסכים צרים.
-
בדיקת הפריסה. מריצים לפי רשימת בדיקה: ניגודיות, קריאות ברוחבים ביניים, התנהגות הרשת בשורה לא מלאה, אורכי כיתובים, מצבי שגיאה.
-
העברה לפיתוח. מוסרים לא תמונות, אלא סט מפורק: קומפוננטות, מרווחים, כללי רשת, פלטה וסגנונות גופן. הקידוד מקבל החלטות חד-משמעיות במקום ניחושים.
תוצרים אחרי העבודה: פריסות, ספריית קומפוננטות, כללים
אחרי המסירה נשארת בפרויקט לא תיקיית תמונות, אלא מערכת עובדת: פריסות של עמודים, ספריית קומפוננטות וכללים שלפיהם תיק העבודות מתפתח בלעדינו. את ההעברה בודקים לפי רשימה — אם סעיף לא ניתן לפתוח, לערוך ולהרכיב ממנו עמוד חדש, הוא לא נחשב כנמסר.
- קבצי המקור של הפריסה. קובץ עם מבנה שכבות נקי ושמות מובנים: עמודים, סקשנים, קומפוננטות. בלי שכבות מסוג "עותק 2" — מעצב חדש נכנס לפרויקט ביום, ולא מפענח ארכיון שבוע.
- ספריית קומפוננטות. כפתורים, שדות, כרטיסי עבודות, מסננים, חלונות קופצים — עם מרווחים, גדלים וקשרים מוגדרים. תיקון של כפתור פעם אחת מעדכן אותו בכל עמודי תיק העבודות.
- מצבי בלוקים. לכל אלמנט אינטראקטיבי מתוארים מצב רגיל, ריחוף, לחיצה, טעינה, תוצאה ריקה ושגיאה. המפתח לא צריך לנחש מה מציג המסנן כששום דבר לא נמצא לפי תג.
- פריסות של עמודים. מחשב, טאבלט, טלפון — עם תוכן אמיתי: שמות פרויקטים ארוכים, רשת של עשרות עבודות, כיתובים בשתי שורות. הקידוד לא נשבר במקרים שלא נכנסו למצגת.
- כללי עריכה. מה אפשר לשנות בתוך המערכת: כריכות משלך, סדר כרטיסים, סט תגים. מה דורש אישור: רשת, צמד גופנים, פלטה.
- הוראות ומגבלות טקסט. הטון של התיאורים, אורך הכותרות, דרישות לכריכות ולצילומי מסך — כדי שעבודות חדשות יתווספו באותו סגנון.
כל זה עובר לצוות של המזמין עם מדריך קצר להרכבת העמוד. בהמשך תיק העבודות גדל מבפנים: פרויקט חדש מוצב לפי תבנית מוכנה, בלי להזמין פריסה מחדש.
קייס: כיצד השתנתה התנהגות המבקרים אחרי העיבוד מחדש
הפרויקט — אתר של סדנה שבונה בתים לפי פרויקטים אישיים: «Северный дом». תיק העבודות תפס חצי מהעמוד הראשי ונראה כרשת תצוגות מקדימות אחידה: כעשרים אובייקטים, כרטיסים זהים, כיתובים בסגנון "בית ביער אורנים".
מדידות לחודש לפני העיבוד מחדש: לבלוק עם האובייקטים הגיעו 38% מהמבקרים, עומק הצפייה — 1.4 עמודים, את כרטיס האובייקט פתחו שניים מתוך מאה, ופניות שהתחילו מתיק העבודות הניבו פחות מחמישית מהבקשות.
מה הראו המדידות
מפות חום הסבירו את הסיבה: אנשים סקרו את השורה הראשונה של התצוגות המקדימות, לא מצאו תשובה לשאלות "איזה בית זה, מה השטח, מה נכלל בעבודה" ועזבו בלי להגיע לטופס.
תיק העבודות פעל כוויטרינה של תמונות, ולא כטיעון: המבקר נאלץ לנחש בעצמו את היקף הפרויקט ולהרכיב סיפור מתוך הכיתוב.
מה שינו ומה נהיה
את הכרטיס בנו מחדש סביב התוצאה: כריכה עם האובייקט המצולם, שלושה פרמטרים עיקריים — שטח, לוח זמנים, הרכב העבודות — ופסקה קצרה על משימת המזמין. בסוף האובייקט הוסיפו בלוק של עבודות דומות ומעבר לחישוב.
מהרשת הוסרו כל הדברים שאינם נושאים מידע, והתמונות נמסרו בפורמט מודרני עם טעינה עצלה — העמוד החל להיפתח מהר יותר באופן ניכר.
אחרי אותו חודש מדידות: לבלוק עם האובייקטים מגיעים 74% מהמבקרים, עומק הצפייה עלה ל-3.1 עמודים, את הכרטיס פותח כל חמישי, והנטישות בתיק העבודות ירדו מ-68% ל-41%. הפניות מתיק העבודות גדלו פי שלושה והפכו לנקודת הכניסה העיקרית לבקשה — קודם דרכן הגיעה בערך כל שישית, ועכשיו יותר ממחצית. המספרים נלקחו מאותה פאנל אנליטיקה על תקופות ברות השוואה, בלי עיגולים לכיוון הנוח.
מה לעשות אם האתר כבר מקודד ואי אפשר לשנות את המבנה
כן, עם קידוד מוכן אפשר לעבוד, וכמעט תמיד זה זול יותר מהרכבה מחדש מלאה. את העיצוב מפרידים מהסימון: צבע, מרווחים, רדיוסים, צללים וטיפוגרפיה מוציאים למשתנים, ואת הכללים פורסים בשכבות — אז ערכים חדשים מכסים ישנים באופן צפוי, ולא "לפי המשקל" של הסלקטור.
שינויים נקודתיים הם החלפת ערכים של משתנים והגדרה מחדש של בלוקים בודדים, ולא עריכה של מבנה המסמך. עדכון העיצוב מתבצע באיטרציות: תחילה הקצב הכללי של העמוד — רשת, מרווחים אנכיים, סולם כותרות, ואחר כך מצבים (ריחוף, פוקוס, כרטיס פעיל). כל איטרציה נבדקת בנפרד, ולכן רגרסיות נתפסות מיד, ולא בסוף.
מגבלות המבנה מורגשות בשני מקומות: סדר הבלוקים במסך צר והקומפוזיציה של כרטיסי תיק העבודות. את הראשון פותרים בסידור מחדש של אלמנטים קיימים בלי לערוך את הסימון, ואת השני — באלמנטים פסאודו ובמסגרות-עטיפה שנותנות את ההדגשה הנדרשת בלי להוסיף צמתים חדשים למסמך.
בנפרד אנחנו שומרים על מה שאסור לשבור: סמנטיקה של כותרות, סדר מעבר במקלדת, ניגודיות טקסט ועבודת הטפסים. אם עיצוב חדש דורש סימון אחר, זה נרשם כמשימה נפרדת עם הערכה — אסור לשנות מבנה במסווה של קוסמטיקה.
בפועל השאלה "האם אפשר לעדכן את העיצוב בלי הרכבה מחדש" כמעט תמיד נפתרת ב"כן". הציגו את הקידוד הנוכחי — נחזור עם תוכנית של שינויים נקודתיים ורשימה של מקומות שבהם בכל זאת נדרשת עריכת סימון.
שאלות טכניות נפוצות: רשתות, מצבי בלוקים, עריכות
שאלות על קידוד בדרך כלל צצות בשלב הקבלה — כשהעמוד כבר מורכב, והרשת מתנהגת אחרת מאשר בפריסה. להלן ריכזנו את מה שהמהנדסים של המזמין מבהירים לרוב לפני ההתחלה: כיצד בנויה הפריסה, כיצד מתוארים מצבי האלמנטים ומה קורה לעיצוב אם העריכות מגיעות אחרי האישור.
אנחנו מוסרים את הפריסה יחד עם תיאור הרשת: עמודות בסיס, נקודות שבירה, התנהגות המרווחים ביניהן. כך הקידוד לא מתווכח עם העיצוב, ומצבי הכפתורים והשדות — רגיל, ריחוף, פוקוס, לחיצה, מושבת — מתוארים עבור כל וריאנט, ולא מומצאים על ידי המפתח תוך כדי.
הרשת של העמוד נמתחת או קבועה?
נמתחת: העמודות נמתחות בטווח מוגדר, ובנקודות השבירה הפריסה מסתדרת מחדש לפי הכללים המתוארים. רוחב קבוע נשאיר רק לבלוקים שבהם חשובה קומפוזיציה מדויקת — למשל, כרטיסי עבודות בגלריה.
כיצד מועברים מצבי הכפתורים כך שהקידוד לא יתפצל מהפריסה?
בטבלת מצבים נפרדת: לכל כפתור — רגיל, ריחוף, פוקוס, לחיצה, מושבת ומצב טעינה. המהנדס לא בוחר גוון ועובי מסגרת בעצמו, ולכן לא נוצרים מקומות שנויים במחלוקת בקבלה.
מה אם עריכות הפריסה יגיעו אחרי האישור?
תחילה בודקים אם העריכה נקודתית או מערכתית. נקודתית — מרווח, צבע, סדר בלוקים — מכניסים לאותו פרק בתיאור ומוסרים לפיתוח. מערכתית, שמשנה את הרשת או את סט המצבים, מוציאים כשלב נפרד עם הרכבה מחדש של המסכים הנגועים.
כיצד נבדקת הרספונסיביות?
מריצים את הפריסה בנקודות השבירה המתוארות וביניהן — שם לרוב נשברים המעברים והמרווחים. העיצוב נחשב כמאושר כשכל המצבים ורוחבי המסכים מאושרים, ולא רק המראה העיקרי של העמוד.
נדון במשימה: נראה את סכמת העמוד ונחזור עם הערכה
כדי לחזור עם תוכנית עבודה והערכה, ולא עם מילים כלליות, אנחנו צריכים חומרי מקור על עמוד תיק העבודות וגבולות ברורים של המשימה. בדרך כלל מספיקות שיחה אחת וגישה למה שכבר קיים: האתר הנוכחי, פריסות, מאגר קוד, נתוני אנליטיקה.
בדיון על המשימה כדאי לסגור:
- תפקיד העמוד: ויטרינה של קייסים, כלי מכירה או נקודת כניסה מחיפוש — מכך תלויים המבנה וההיקף.
- חומרי מקור: פריסות, לוגו, מדריך סגנון, גופנים עם רישיונות, תמונות ווידאו של פרויקטים, טקסטים מוכנים.
- מודל תוכן: אילו יישויות בעמוד — פרויקטים, תחומים, שירותים, המלצות, כמה רשומות בהתחלה ומי ממלא אותן.
- גישות: אחסון, דומיין, פאנל ניהול, מאגר קוד, מערכות אנליטיקה — תמסרו לנו או שנעבוד דרך מנהל המערכת שלכם.
- מגבלות: דרישות לקידום אורגני, סימון לרשתות חברתיות, נגישות ותמיכה בדפדפנים ישנים.
- אינטגרציות: לאן הולכות הפניות מהעמוד — טופס, CRM, תפוצות דיוור, מערכות רישום פנימיות.
- קבלה ולוחות זמנים: מי מאשר מצדכם, כמה איטרציות של עריכות אנחנו מקצים, והאם יש תאריך שעד אליו העמוד צריך לעבוד.
אחרי השיחה אנחנו שולחים תוכנית עבודה לפי שלבים עם הערכה והנחות: מה אנחנו עושים, מה נדרש מצדכם ובאיזה שלב. אם חלק מהחומרים עדיין לא מוכנים, נסמן זאת בסעיף נפרד — המבנה והתוכן מאושרים לפני הקידוד, ולא אחריו.
