החלטת תבנית חסינת הדגמה: תזכיר ב-6 שלבים

סיכום

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

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

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

1. כתוב את תיאור התפקיד לפני שאתה פותח הדגמה כלשהי.

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

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

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

2. בנה מחדש את ההדגמה עם התוכן שלך.

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

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

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

3. מדוד מה ההדגמה לא מראה.

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

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

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

4. תמחר את עלות ההתאמה — והיה כן לגבי "חינם."

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

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

5. הצג את החלופות במקום שהבוס שלך יוכל לראות אותן.

טבלה שווה מאה התכתבויות כי היא מזיזה את השיחה מ"אני אוהב את זו" ל"הנה מה שהבחירה הזאת עולה." הדפס את זה (או הדבק ב-Slack) כשאתה משווה בין שתי מועמדות סופיות:

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

הבוס שלך יראה שכמה הדגמות ממירות רגשות, לא מכירות. הטבלה הופכת את הרגשות לתיבות סימון.

6. כתוב תזכיר החלטה בן עמוד אחד שמסיים את הוויכוח.

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

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

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

המסגרת, לא פסק הדין, היא העיקר.

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