Редизайн нужен, когда существующее оформление и устройство страниц мешают решать задачи сайта. Возраст макета или нехватка обращений сами по себе ещё не объясняют, что следует менять: причиной могут быть содержание, техническая ошибка или неподходящее предложение.
Перед обновлением полезно пройти путь посетителя и собрать конкретные затруднения. Тогда разговор о новом дизайне начинается с того, что должно стать понятнее или удобнее, а не с выбора модного визуального приёма.
В дизайне сайтов и интерфейсов состав изменений зависит от этой проверки. Иногда достаточно переработать несколько состояний и блоков. В другом проекте придётся заново связать страницы, содержание и основные действия.
В материале
Начните с проблемы, которую можно показать
Вместо «сайт устарел» запишите наблюдение: посетитель не находит нужную услугу, условия спрятаны в изображении, форма неудобна на телефоне или одинаковые кнопки выполняют разные действия. Такое описание позволяет проверить причину и результат исправления.
Разделите впечатления команды и затруднения посетителя. Сотрудникам может надоесть цвет, потому что они видят сайт ежедневно. Для клиента важнее прочитать условия, сравнить варианты и понять следующий шаг. Оба вопроса можно обсуждать, но это разные основания для работы.
Посмотрите на реальные материалы. Слишком длинное название, неполное описание и случайная фотография могут разрушать композицию даже в аккуратном шаблоне. Сначала уточните содержание, иначе новый макет повторит прежнюю проблему в другой форме.
Запишите, на какой странице и при каком действии возникло затруднение. Если проблема касается только отправки формы, этого пока недостаточно для вывода о необходимости полной переработки сайта. Нужно понять, какие ещё части действительно требуют изменения.
Не делайте вывод о поведении всех посетителей по одному просмотру. Первичная проверка даёт список предположений и воспроизводимых ошибок. Для решения о большом объёме полезно сопоставить их с доступными данными и наблюдениями за обычными задачами людей.
Отделите оформление от других причин
Сайт может выглядеть аккуратно, но не объяснять услугу. В этом случае нужны сведения и структура. Он может подробно рассказывать о работе, но не передавать сообщения из формы. Тогда сначала разбираются с работоспособностью.
Если на странице нет необходимых условий, увеличение кнопки не заменит их. Если предложение не подходит посетителю, новая анимация не изменит состав услуги. Дизайн помогает представить содержание и пройти действие, но не принимает бизнес-решения вместо компании.
Проверьте изменения вне сайта. Возможно, компания добавила направление, сменила способ обращения или теперь работает с другим типом клиентов. Тогда прежняя структура могла перестать соответствовать задаче, даже если технически всё продолжает работать.
При неизвестном техническом состоянии полезен технический аудит сайта. Он поможет отделить неисправности от вопросов оформления. В состав редизайна затем попадут изменения, для которых есть понятные основания.
Сравнивайте страницы с их назначением. У каталога важны поиск и сопоставление материалов, у страницы услуги — понятное предложение и обращение. Один и тот же декоративный приём не становится универсальным решением для обоих случаев.
Используйте таблицу для первичной диагностики
В таблице ниже симптом связан с проверкой и возможным следующим шагом. Это рабочая памятка, а не автоматический диагноз: решение зависит от того, что покажет ваш сайт.
| Что замечено | Что проверить | С чего можно начать |
|---|---|---|
| Услугу трудно найти | Названия, меню и переходы между страницами | Переработать путь к нужному содержанию |
| Условия постоянно объясняет менеджер | Полноту и ясность описания | Подготовить содержание и его подачу |
| Форма не даёт завершить обращение | Поля, сообщения и получение результата | Исправить действие и проверить его целиком |
| На телефоне трудно пользоваться страницей | Чтение, управление и поведение блоков | Пересмотреть нужные размеры и состояния |
| Разделы выглядят как разные сайты | Повторяемые элементы и правила оформления | Собрать общую систему интерфейса |
| Компания изменила предложение | Соответствие страниц новой работе | Обновить структуру до подробных макетов |
Добавьте к каждому пункту адрес и пример. Для ошибки сохраните последовательность действий. Для непонятного содержания — вопрос, на который страница не отвечает. Это пригодится при подготовке задания.
Отметьте масштаб: отдельный элемент, тип страниц или весь сайт. Одно повторяющееся решение можно изменить сразу в нескольких местах. А внешне похожие затруднения могут иметь разные причины и требовать самостоятельной проверки.
Что сохранить при обновлении
Редизайн начинается не только со списка недостатков. Сохраните то, что уже помогает: понятные названия, полезные сведения, удачные примеры, привычные ориентиры и рабочие действия. Их ценность не исчезает после выбора нового оформления.
В редизайне SGIspread наша работа затронула логотип и интерфейс каталога материалов для дизайнеров. Основную идею знака сохранили, а навигацию связали с форматами файлов. Оформление рассматривалось вместе с задачей просмотра содержимого.
Этот пример показывает подход к составу изменений: новое решение строится вокруг действия человека, а знакомая основа может остаться. Изменить всё до неузнаваемости — самостоятельная задача, а не обязательный признак выполненного редизайна.
Составьте перечень существующих страниц и материалов до начала переноса. Для каждой важной страницы должно быть понятно, сохраняется ли она, объединяется с другой или перестаёт использоваться. Такой список помогает не потерять полезное содержание.
Если меняются адреса, подготовьте соответствия старых и новых страниц. Руководство Google по переездам отдельно описывает карту адресов и постоянные перенаправления на подходящие страницы. Массовая отправка старых адресов на несвязанную главную не заменяет такую работу.
Не смешивайте визуальное обновление со сменой технической основы без причины. Если существующая система поддерживает нужные действия, возможность её использования стоит проверить. Решение о новой основе принимают по ограничениям и дальнейшим задачам.
Как принять редизайн по задаче
Если изменения выходят по частям, проверьте переход между старой и новой подачей. Посетитель может открыть обновлённую услугу из прежнего меню или вернуться в каталог с другой карточки. Названия, обозначения действий и способы связи должны оставаться понятными на всём пути.
Для такого обновления удобно выбрать законченный сценарий, а не случайную группу красивых экранов. Например, список направлений, подробная услуга и обращение. Так можно проверить связанные решения вместе и увидеть, что потребуется остальным типам страниц.
Участники приёмки проверяют разные части. Ответственный за услугу подтверждает содержание, редактор пробует обычное изменение, разработчик проверяет поведение, а человек вне проектной команды выполняет выбранную задачу. Общая оценка не должна строиться только на одном удачном показе макета.
Сохраняйте замечание вместе с основанием. «Сделать кнопку ярче» — уже предложенное решение. «Кнопку перехода не замечают при выполнении этой задачи» — наблюдение, для которого можно сравнить варианты. Иногда помогает положение или текст, а дополнительный цвет создаёт новое противоречие.
До замены рабочей версии определите порядок публикации и восстановления предыдущего состояния при проблеме. Это часть организации обновления. Особенно полезно заранее понять, какие действия нужно повторить сразу после размещения и кто будет получать сообщения о найденных затруднениях.
До макетов запишите критерии проверки. Например, человек находит нужный формат материала, понимает различия услуг и завершает обращение. Критерий должен описывать действие или содержание, а не только настроение оформления.
Проверьте новую версию на тех же задачах, на которых обнаружили затруднения. Используйте настоящие названия, изображения и условия. Демонстрационная страница с короткими образцовыми текстами не показывает все ограничения будущего сайта.
Рассмотрим условный каталог. Раньше формат файла был указан только внутри подробной страницы. В новой версии его показывают в карточке и добавляют понятный выбор. На проверке нужно выяснить, замечает ли человек различие и действительно ли получает нужный материал.
Не считайте факт появления нового блока доказательством удобства. Назначение может остаться непонятным, выбор — не работать, а обозначения — противоречить друг другу. Смотрите на завершение сценария и конкретные затруднения.
Перед публикацией повторите технические проверки: формы, переходы, необходимые подключения и обычное редактирование. Новый макет и работающая реализация — разные результаты. В задании должны быть названы оба, если вы заказываете весь цикл.
После запуска сохраняйте замечания по существу. Какую страницу открывали, что пытались сделать и где остановились? На основе таких сообщений можно планировать следующие изменения, вместо того чтобы снова обсуждать сайт только через «нравится» и «не нравится».
Что делать дальше
- Соберите конкретные затруднения с адресами и примерами.
- Отделите содержание, технические ошибки и вопросы оформления.
- Назовите полезные элементы, которые нужно сохранить.
- Пришлите нам сайт и список наблюдений, чтобы определить объём редизайна.
Читайте также