Решението за шаблон, устойчиво на демонстрации: Меморандум от 6 стъпки

Резюме

Шефът ви току-що избра шаблон за електронна търговия от демо и вие знаете, че той няма да конвертира. Вместо да спорите за вкус, можете да прокарате кандидата през оценка от шест стъпки, която завършва с едностраничен меморандум за решение. Процесът започва с писмена длъжностна характеристика, след това възстановява демото с вашето собствено съдържание, измерва реалната скорост и мобилното поведение, оценява разходите за персонализация и представя компромисите в таблица на разбираем език. Резултатът е документ, който вашият нетехнически шеф може да одобри, без да разбира CSS. Ще спрете да спорите за външния вид и ще започнете да сравнявате доказателства. Тази статия преминава през всяка стъпка с конкретни микро-примери и предупреждения, включително защо безплатните теми рядко са безплатни и защо демо скоростта е измислица.

Шефът ви има демото отворено в един раздел и Slack в другия. Това е начална страница с пълноекранно hero видео, лента с лога на пресата и лента за отброяване до разпродажба, която създава усещане за спешност. „Това е точното“, пише той. Вие сте прекарали три дни в сравняване на оформления, фокусирани върху реализацията, и сте на път да кажете: „Този дизайн всъщност вреди на мобилните реализации“, но сте научили, че изреченията, започващи с „всъщност“, не променят мнения. Това, което променя мненията, е рамка, която показва работата ви.

Ето шестте стъпки, които използвах, за да превърна решението за шаблон от тест за вкус в меморандум за решение. Отнема няколко часа и създава документ, който нетехническият шеф може да одобри, без да се чувства така, сякаш отстъпва.

1. Напишете длъжностната характеристика, преди да отворите каквото и да е демо.

Принципът: не можете да оцените шаблон, докато не знаете за какво е нает да върши работа. Демото на шефа ви има задача: да изглежда като известна марка. Вашият уебсайт има задача: да доведе повтарящ се клиент от „Имам нужда от това“ до „Купих го“ възможно най-бързо.

Затова, преди да отворите дори една тема, напишете кратък абзац за основния сценарий на вашия магазин. За бутик за кожени изделия това може да бъде: „На телефона клиент, който знае какво иска, трябва да може да види цената на продукта и бутона за добавяне в количката, без да превърта. Пътят от този момент до плащането трябва да отнеме по-малко от минута и нищо не трябва да изскача между страницата на продукта и екрана за плащане.“ Това е проверимо твърдение. След това избройте трите или четирите действия, които носят по-голямата част от приходите ви — от търсене до продукт, от продукт до плащане и може би „пазаруване по колекция“ за сезонни купувачи.

Предупреждение: не включвайте визуални предпочитания в длъжностната характеристика. Цветовете, шрифтовете и изрязването на изображения са променливи — ще се изненадате колко много може да бъде заменено чрез CSS. Ограничете се до поведения и ограничения: скорост, видимост на мобилни устройства, дълбочина на навигацията и стъпки на плащане. Когато шефът ви каже „Харесвам голямото изображение“, можете да отговорите: „Можем да запазим голямо изображение и пак да изпълним длъжностната характеристика — но само ако бутонът за добавяне в количката остане на първия екран.“ Не отхвърляте вкуса му; вие го тествате спрямо реалните нужди на магазина.

2. Възстановете демото с вашето собствено съдържание.

Демото на доставчика е подготвено с професионални продуктови снимки, заглавия с точна ширина и текстове, написани от автора на темата. Вашите продукти имат различни съотношения на изображенията, заглавията на продуктите ви са изречения, а страницата ви „За нас“ е три абзаца за устойчивост. Демото може да скрие всичко това.

Затова вземете шаблона в тестова среда и заменете съдържанието с вашето реално — не примерен макет, а действителен продукт с истинското му име и абзац реално описание. След това тествайте трите важни момента: страницата на продукта на екран с ширина 375 пиксела, резултатите от търсенето с дълго име на категория и плащането с вашия реален платежен шлюз. Например магазин за ръчно изработени керамични чаши установява, че продуктовите изображения в демото са заснети на бял фон, но техните снимки имат натоварен фон на работилница — тъмното наслагване на темата прави чашата невидима. Точно такова нещо можете да забележите само със собственото си съдържание.

Това е същината на одит на демо на шаблон — проверка на маркетинга, не на темата. Ако заглавието се пренесе на три реда и избута бутона „Добави в количката“ надолу, това е червен флаг, колкото и добре да изглежда демото.

3. Измерете това, което демото не показва.

Демото работи на оптимизирания сървър на разработчика на темата. Вашият сайт ще работи на вашия хостинг, с вашите плъгини, вашите скриптове за анализи и вашето приложение за изоставени колички. Ето защо скоростта на зареждане на демото е по същество измислица.

Създайте тестов сайт с реалния си инвентар и направете два теста: първо на бърза десктоп връзка, после на реален телефон през 4G с изчистен кеш. Гледайте времето до момента, в който страницата е годна за използване, а не само когато изглежда заредена. Много теми показват заглавието мигновено, но след това блокират оформлението за две секунди, докато скриптът за плъзгача се зарежда — реален проблем на телефони. Също така преминете през плащането на телефон. Някои лъскави теми изглеждат добре на десктоп, но превръщат мобилното плащане в слайдшоу от пет екрана, искайки промо кода преди адреса и показвайки прогнозна доставка след бутона за плащане. Точно тук е полезен мобилно-ориентиран чеклист — той ви кара да проверите дали палецът достига, целите за докосване и дали бутонът „Продължи“ е над първия екран.

Може да се изкушите да се доверите на собствения доклад за скорост на темата. Не го правете. Демо страницата на темата се обслужва от CDN с кеширане, а значката за скорост на темата обикновено е екранна снимка, направена при идеални условия. Вашата среда е различна и това е нормално — тестът се отнася до вашата среда.

4. Оценете разходите за персонализация — и бъдете честни за „безплатното“.

Ето предположението, на което трябва да се противопоставите: безплатните теми са по-евтини. Те рядко са безплатни, защото плащате с време на разработчика. Безплатната тема може да има ограничен панел с опции и всяка промяна по марката — коригиране на заглавката, смяна на hero секцията, добавяне на значка — изисква CSS презапис или дъщерна тема, което означава час от фактурируемото време на разработчика за всяка промяна. Платена тема с добър панел с опции може да се изплати още първия път, когато избегнете една единствена заявка за собствен код.

Но обратното също е вярно: платена тема с вграден конструктор на страници може да бъде по-бавна и по-трудна за поддръжка от лека безплатна тема. Реалният разход не е цената на лиценза; това е разликата между „какво прави демото“ и „от какво се нуждае вашата марка“. Пребройте промените, които реално бихте направили: лого, оформление на заглавката, типография, продуктови решетки, долен колонтитул и значки за доверие. Ако панелът с опции на темата покрива пет от осем, вие сте напред. Ако покрива само две, вие купувате проект, а не тема. Това е част от скритите разходи при избор на грешен шаблон — цената е само началото.

5. Представете компромисите там, където шефът ви може да ги види.

Една таблица струва колкото сто спора, защото премества разговора от „Харесвам този“ до „Ето какво струва този избор.“ Разпечатайте това (или го поставете в Slack), когато сравнявате двама финалисти:

Какво показва демото	Какво трябва да проверите
Hero видеото се възпроизвежда мигновено	Автовъзпроизвежда ли се на мобилни данни, или се превръща в замръзнало изображение с бутон за възпроизвеждане, който никой не докосва?
Продуктовите изображения изглеждат премиум	Вашите продуктови изображения пасват ли на изрязването, без да изгубят продукта от кадъра?
Навигацията е плавна	На реален телефон, достъпно ли е менюто с един палец, или изисква протягане с две ръце по неудобен начин?
Страницата се зарежда бързо	Направете тест за скорост на вашия хостинг, а не на този на доставчика.
Плащането е красиво	Направете реален тестов поръчка. Отбележете колко докосвания и колко превъртания са нужни.

Шефът ви ще види, че някои демо версии печелят чувства, а не продажби. Таблицата превръща тези чувства в отметки.

6. Напишете едностраничен меморандум за решение, който прекратява спора.

Последната стъпка превръща одита в решение. Запазете го до една страница, на разбираем език. Започнете с препоръката, след това покажете три доказателства: мобилния тест, теста за скорост и оценката за персонализация. След това посочете компромиса, който приемате — например: „губим анимираната икона на количката, но печелим по-кратко плащане на телефони“. Завършете със следващите стъпки: какво ще настроите след стартирането и как ще го измерите.

Меморандумът е документ за продажба — продавате на шефа си решение, което той може да защити пред собствения си ръководител. Формулирайте всяка точка в бизнес термини. Вместо „бутонът за добавяне в количката е под първия екран на iPhone SE“, напишете „при най-разпространения размер на телефона клиентите ще трябва да превъртат, за да добавят продукта, което увеличава шанса да напуснат“. Вместо „темата използва много JavaScript“, напишете „страницата се зарежда по-бавно на 4G, а бавните страници се свързват с по-ниска реализация“. Не пропускайте секцията „следващи стъпки“; тя успокоява шефа ви, че не подписвате нещо постоянно — започвате процес, който включва настройки след пускането.

Ако искате по-задълбочен поглед върху съпоставянето на функционалностите на шаблона с целите за реализация, това ръководство за избор на шаблон, който реализира покрива подробния разбор по функции.

Рамката, а не решението, е същността.

Демо винаги ще се появи — нова тенденция, по-бляскава анимация, сайтът на втори братовчед на шефа. Вместо да спорите всеки път, прокарайте кандидата през същите шест стъпки. Демото може да спечели момента, но меморандумът печели срещата. И следващият път, когато ви трябва решение, ще имате процес, който не се интересува колко добра изглежда историята.