Вы открываете на телефоне сайт мастера, чтобы узнать, приедет ли он в ваш район, и отправить фотографию поломки. На первом экране играет видео, в меню написано «Наш мир», а большая кнопка приглашает «Начать путешествие». Графика может быть безупречной; найти нужный ответ пока невозможно. Именно в такой ситуации становится видно удобство сайта, которое не оценишь по картинке макета.
Это не запрет на видео или характерный язык бренда. Вопрос в том, может ли человек выполнить конкретное действие. В принципах удобства интерфейса Nielsen Norman Group есть понятная обратная связь, знакомые слова и возможность распознать действие без угадывания. Ниже — пять мест, где эти принципы полезны обычному сайту компании.
1. На первом экране есть атмосфера, но нет услуги
Видео мастерской и фраза «Создаём ваше будущее» задают настроение. Если название услуги, город и способ связаться появляются только через несколько экранов, посетитель не знает, куда попал. Напишите сразу, что делаете, для кого и где. Пусть видео подкрепляет описание. Проверьте, что текст читается на разных кадрах и остаётся доступным при медленном соединении.
2. Меню передаёт характер бренда, но не помогает искать
Пункты «Откройте», «Вдохновение» и «История» не подскажут, где услуги, цены и контакты. Для главного меню подойдут обычные названия: «Услуги», «Цены», «Работы», «Контакты». Выразить характер можно заголовками, фотографиями и деталями страницы. На телефоне проверьте, удобно ли меню открывается и закрывается.
3. Красивая типографика прячет важные условия
Тонкие буквы и светло-серые подписи выглядят спокойно в макете. На улице с телефона они могут сделать нечитаемыми цену, ограничения услуги и пояснения к форме. WCAG дают измеримые критерии контрастности и управления с клавиатуры. Проверьте страницу на настоящем телефоне, увеличьте текст, пройдите её без мыши. Если строка содержит важное условие, к ней нельзя относиться как к украшению.
4. Движение отвлекает от чтения
Заголовки, возникающие при прокрутке, и кнопки, которые меняют место, могут эффектно смотреться в презентации. Но человек вынужден ждать или повторно искать элемент. Спросите себя, что анимация объясняет. Если это лишь декор, убедитесь, что содержание видно и без неё, а настройки уменьшенного движения учитываются. Видео с демонстрацией процесса может помочь; обязательный просмотр ролика до цены — едва ли.
5. Форма обещает одно, а делает другое
Кнопка «Узнать цену» открывает анкету на десять полей, после отправки появляется только «Спасибо». Будет ли расчёт, звонок или встреча, непонятно. Назовите кнопку по реальному действию, спросите лишь необходимое для первого ответа, укажите обязательные поля. После отправки объясните следующий шаг. Отправьте тестовое сообщение и убедитесь, что оно пришло в нужный ящик: зелёная надпись на экране не доказывает доставку.
Быстрая проверка перед редизайном
Дайте человеку, который не знает сайт, задание: «Найди услугу в своём городе, узнай ориентир по цене и отправь запрос с фотографией». Не подсказывайте. Запишите, где он остановился и что понял неверно. Повторите путь на небольшом телефоне и с клавиатурой. Один такой опыт не заменит исследование всех клиентов, но покажет очевидные препятствия, которые команда привыкла не замечать.
Начните с проблем, перекрывающих основное действие: неработающей формы, отсутствующего района работы или спрятанного контакта. Оттенок кнопки можно менять позже. Если человек находит страницу, но всё равно спрашивает базовые условия, поправьте содержание. Для редизайна полезнее список трёх задач посетителя и места сбоя, чем список модных эффектов.