Більшість веб-дизайнерів навчені використовувати одне й те саме: інформаційні панелі SaaS, вітрини електронної комерції та бренди способу життя. Тому, коли на конвеєрі з'являється ливарний завод, постачальник вогнетривів або виробник котлів, інстинктивно виникає бажання скористатися тим самим сценарієм: відеоролик, надрозмірна типографіка, паралакс-скрол. Цей інстинкт майже завжди помиляється.
Промислові покупці не поводяться як споживачі. Вони приходять із номером деталі, терміном виконання та допустимою втратою тертя, яка вимірюється в секундах. Якщо ваш дизайн ігнорує це, ви створили гарний сайт, який підводить єдиних людей, яким він мав служити.
Ось як продумати роботу з дизайну та розробки для клієнтів з важкої промисловості, не втрачаючи при цьому своєї майстерності.
Дізнайтеся, хто насправді на іншому кінці екрану
Персонаж користувача промислового об'єкта — це не звичайний покупець. Це менеджер із закупівель, інженер заводу або керівник служби технічного обслуговування з певною проблемою. Вони часто працюють за комп'ютером у галасливому приміщенні, іноді розмовляють по телефону у вантажівці та майже завжди перебувають під тиском часу.
Це змінює те, як виглядає «гарний UX». Користувачі B2B жорсткіше покарають за тертя, ніж споживачі, оскільки їхній час оплачується, а їхні рішення перевіряються. Висновок для промислових об'єктів простий: ясність перемагає задоволення, а конкретність — переконання.
Перекладіть це в бриф. Запитайте клієнта, які три питання ставить покупець, перш ніж підняти слухавку. Потім переконайтеся, що ці відповіді знаходяться у верхній частині сторінки, яка має значення.
Інформаційна архітектура – це справжня проектна робота
Перегляньте добре побудований сайт постачальника, наприклад, брокера матеріалів Диверсифіковані керамічні послуги, Інк. Ви помітите, що навігація організована навколо двох осей: матеріали, з яких вони виробляють, та галузі, яким вони служать. Це не стилістичний вибір. Це відображає те, як покупець шукає.
Виробника кераміки, який шукає каолін, не хвилює історія вашого бренду. Він хоче переконатися, що ви його пропонуєте, в якій формі та чи обслуговуєте ви їхній регіон. Архітектура, яка відображає цю ментальну модель, перевершить будь-який візуальний акцент, який ви нашаруєте зверху.
Перш ніж відкривати Figma, намалюйте таксономію. Два стовпці на дошці. Один для того, що компанія продає, інший для того, хто це купує. Кожна сторінка в збірці має бути доступна за два кліки з будь-якого боку.
Продуктивність та доступність не є необов'язковими для промислових покупців
Мережі рослин нешвидкі. Польові з'єднання ненадійні. Якщо ваш головний розділ видає відео розміром 4 МБ автоматичного відтворення, ви вже втратили покупця в сільській місцевості Теннессі, яка перебуває в гарячій зоні.
Власний Google Основні веб-значення Керівництво наполягає на швидкій великій кількості робіт (LCP) та стабільних макетах, і ці показники мають більше, а не менше значення на промислових об'єктах. Те саме стосується доступності: покупці старшого віку, середовище з низькою освітленістю та руки в рукавичках на сенсорних екранах – це реальні умови.
- Зменште вагу носія. Статичні, оптимізовані зображення перевершують фонове відео на сторінці закупівель. Збережіть рухомі елементи для тематичних досліджень.
- Поважайте зменшену рухливістьВраховуйте медіа-запит prefers-reduced-motion. Інженери заводу, які працюють на довгі зміни, будуть вам вдячні.
- Отримайте як мінімум WCAG AAСильний контраст, реальні стани фокусування та навігація за допомогою клавіатури – це не театр доступності. Це основи.
- Тестування на обмеженому з'єднанніЯкщо сайт не працює на повільному 3G в Chrome DevTools, він не працює в половині країни.
фотографія та візуальна мова для серйозної аудиторії
Індустріальний не означає потворний, а серйозний не означає нудний. Але візуальний регістр має сигналізувати про компетентність, а не про гонитву за трендами. Важкі шрифти для дисплеїв, які підходять для бренду вуличного одягу, будуть сприйматися менеджером заводу, який спеціалізується на вогнетривкій цеглі, як несерйозні.
Звертайтеся до гуманістичних шрифтів без засічок або перехідних шрифтів із засічками з чіткими цифрами. Технічні характеристики, номери деталей та одиниці вимірювання відображаються всюди на цих сайтах, тому табличні цифри та чітке моноширинне поєднання для таблиць даних варті витраченого часу.
Колір має виконувати функцію, а не прикрашати. Залиште яскравий акцент для закликів до дії та повідомлень, що стосуються безпеки. Все інше може бути розміщено у стриманій палітрі, яка не конкурує із зображеннями продукту.
Шаблони контенту, що конвертують у важкій промисловості
Генерація лідів для промислових постачальників рідко відбувається через яскраву форму внизу цільової сторінки. Це трапляється, коли покупець довіряє, що ви розумієте його процес.
- Сторінки матеріалів та продуктівВкажіть форми, марки, типові застосування та галузі промисловості, в яких вони використовуються. Сторінка про вогнетривкі матеріали, що лиються, повинна читатися як технічний опис, а не як брошуру.
- Галузеві сторінкиВідображайте світ клієнта. Сторінка для foundries повинна використовувати мову foundry, а не загальний маркетинговий текст.
- Чіткість зони обслуговуванняЯкщо клієнт здійснює доставку до десяти штатів, перелічіть їх. Покупці швидко самі себе дискваліфікують, якщо не можуть визначити, на що саме.
- Реальний шлях контактуНомер телефону в заголовку перевершує будь-якого чат-бота. Для деяких клієнтів це одне рішення піднімає кваліфіковані запити більше, ніж будь-який редизайн.
Передача даних, яка робить сайт корисним
Промислові клієнти рідко мають маркетингову команду, яка чекає на обслуговування складної CMS.
Виберіть стек, який клієнт може фактично оновлюватиЕлегантна збірка WordPress з кастомними блоками для специфікацій продуктів переживе індивідуальну безголову систему, до якої ніхто зі співробітників не зможе доторкнутися.
Документуйте закономірностіЗапишіть короткий Loom про додавання нового матеріалу або галузевої сторінки. Через шість місяців, коли клієнт отримає нову вертикаль, він зможе публікувати матеріали, не телефонуючи вам.
Дизайн для промислових клієнтів винагороджує стриманістьПозбавтеся того, що не служить покупцеві, удоскональте те, що служить, і в результаті робота стане однією з найприємніших, яку ви зможете реалізувати протягом року.