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