Дизайн, който продава: защо всичко започва не от красивата картинка, а от логиката на екраните
„Направете го красиво“ е най-честото желание към дизайнера и най-безполезното. Красотата е субективна, не може да се провери и на нея не може да се стъпи в спор. Сайтът, който харесва собственикът, и сайтът, който носи заявки, съвсем не винаги съвпадат.
Дизайнът, който продава, не започва от палитрата и не от референциите. Той започва от логиката на екраните: какво разбира човекът, в какъв ред и какво действие прави след това.
Какво изобщо значи „дизайнът продава“
Не продава картинката. Продава последователността, в която се свалят възраженията. Човекът влиза с въпроса „подхождате ли ми“ и си тръгва или с отговор, или без него.
Практическият критерий е прост: ако след преглед на страницата посетителят не може със свои думи да каже какво правите, за кого е и какво да прави след това, дизайнът не работи, колкото и красива да е анимацията.
Логиката на първия екран
На първия екран се пада най-големият дял отказвания. На разположение са около пет секунди и в тях трябва да се затворят три въпроса:
- Къде попаднах. Каква е тази компания и с какво се занимава, без метафори и слогани.
- За мен ли е. Признак за аудитория: бранш, мащаб, тип задача.
- Какво да правя нататък. Едно очевидно действие, а не пет равностойни бутона.
Заглавие от рода на „Ние създаваме бъдещето“ не затваря нито един от трите. Заглавие „Сайтове и уеб услуги за производствени компании“ затваря два наведнъж.
Ред на блоковете, който работи
Редът не е случаен. Той повтаря последователността от въпроси в главата на човек, който избира изпълнител.
| Блок | На какъв въпрос отговаря | Какво се чупи без него |
|---|---|---|
| Първи екран | Къде попаднах и за мен ли е | Отказ за пет секунди |
| Проблемът | Разбирате ли моята ситуация | Няма разпознаване, текстът звучи чуждо |
| Решение и услуги | Какво точно правите | Неясно е какво може да се поръча |
| Казуси | Справяли ли сте се с такова досега | Думи без доказателства |
| Процес | Как ще протече това | Страх от неизвестното, отложено решение |
| Цена или ориентир | Мога ли да си го позволя | Човекът отива при онези, които са казали число |
| Призив за действие | Какво да направя сега | Интерес има, заявки няма |
Блоковете могат да се разместват според конкретния бизнес, но нито един не може да отпадне безнаказано. Най-често отпадат цената и процесът, а точно те влияят най-силно на конверсията в B2B.
Един екран – едно действие
Когато на екрана има три еднакво ярки бутона, човекът не избира нито един. Това не е мързел: изборът изисква усилие, а усилие никой не иска да харчи.
Работещото правило е едно основно действие на екран, визуално по-силно от останалите. Второстепенните варианти остават, но изглеждат второстепенно: текстова връзка вместо бутон, приглушен цвят вместо акцентен.
Защото „красиво“ понякога пречи
Няколко похвата, които изглеждат ефектно в портфолио и развалят резултата на реален сайт:
- Тънък светъл шрифт върху снимка. Изглежда скъпо, не се чете на слънце и на евтин екран.
- Анимация при появата на всеки блок. При бързо скролване човекът вижда празни места вместо съдържание.
- Бутон само с контур. Често изобщо не се възприема като бутон.
- Нестандартни икони вместо надписи. Не всеки успява да отгатне какво означава знакът.
- Видео на цял екран в началото. Отнема секунди зареждане точно там, където са най-скъпи.
Нито един от тези похвати не е лош сам по себе си. Лошо е, когато се избират заради вида, без да се провери как се държат с реално съдържание и на реални устройства.
Какво да проверите, преди да рисувате
Тези въпроси спестяват седмици преправяне:
- Кое е най-дългото заглавие, което може да има в този блок? А най-краткото?
- Какво показваме, ако казусите засега са два, а мрежата е за шест?
- Как изглежда блокът без картинка, ако не е качена?
- Какво вижда човекът, когато формулярът е изпратен, и какво при грешка?
- Как изглежда този екран на телефон с ширина 360 пиксела?
Как да разберете, че дизайнът работи
Не по усещане, а по три проверки:
- Тест от пет секунди. Покажете първия екран на човек извън проекта и го скрийте. Нека преразкаже с какво се занимава компанията.
- Тест в сиво. Погледнете макета в нюанси на сивото. Ако основното действие спре да изпъква, то се е държало само на цвят.
- Тест с палец. На телефон всички важни бутони трябва да са в обхвата на една ръка.
Красивата картинка е следствие, а не цел. Първо логиката на екраните и последователността от отговори на въпросите на клиента, после типографията, цветът и детайлите. В този ред сайтът и изглежда добре, и носи заявки. В обратния – обикновено само първото.
