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