Как устроены сайты крупнейших ИТ-интеграторов России. Обзор UX/UI-аналитика

Отрасль ИТ-интеграторов в России представляет собой динамично развивающийся сектор, играющий ключевую роль в цифровой трансформации бизнеса. В контексте UI/UX-анализа сайтов крупнейших российских ИТ-интеграторов важно учитывать, что эти компании работают в специфической B2B-среде. Их сайты должны не только демонстрировать технологическую экспертизу, но и обеспечивать удобство навигации для потенциальных клиентов, заинтересованных в сложных и индивидуальных решениях. 

Что вы узнаете из статьи

Для обзора мы выбрали сайты крупнейших российских компаний-интеграторов, которые задают стандарты в отрасли. Их сайты являются отражением подхода к взаимодействию с клиентами, что делает их ценным объектом для анализа лучших практик и выявления потенциальных зон улучшения в UI/UX-дизайне.

При анализе сайтов мы обратим внимание на:

• привлекательность и информативность первого экрана;
• навигацию и структуру сайта, удобство поиска информации;
• формы обратной связи и лидогенерирующие элементы;
• адаптивность сайта для разных устройств.

Мы — диджитал-агентство Beavers Brothers с собственной командой аналитиков, дизайна, мобильной и веб-разработки. Более 10 лет мы работаем с ИТ-компаниями. Среди них: Microsoft, SAP, Autodesk, Oracle, Kaspersky, 1C, Банк России, Точка, УБРиР и др. Входим в ТОП-5 веб-студий для ИТ-компаний (разработчиков ПО). Посмотрите наши ИТ-проекты

КРОК. Сайт, на котором нельзя заблудиться

КРОК — ведущий российский ИТ-интегратор, предоставляющий широкий спектр услуг, от системной интеграции до облачных решений, с акцентом на информационную безопасность и инновации. Компания владеет сетью дата-центров и стремится к созданию цифровой экосистемы.

Первое впечатление от сайта — эффект “вау". Он достигается за счёт лаконичной подачи и яркой, динамичной визуальной составляющей. Несмотря на известность компании, на сайте присутствует краткое описание деятельности. Также на сайте есть необычный интерактивный элемент — возможность переключения между светлой и тёмной темами. Такой подход демонстрирует внимание к деталям и желание создать положительный пользовательский опыт.

Навигация по сайту проста и интуитивно понятна. Заблудиться здесь практически невозможно: в верхнем меню размещены ссылки на четыре основных раздела, что позволяет быстро сориентироваться. Деятельность компании представлена через отраслевые направления, что облегчает поиск нужной информации. Стоит отметить, что демонстрация отраслевой экспертизы — обязательный элемент практически каждого рассматриваемого нами сайта.

Презентация компании не ограничивается одним сайтом. В экосистему входят несколько бренд-проектов и сайтов решений, позволяющих более глубоко погрузиться в изучение конкретных направлений деятельности или узнать о карьерных возможностях. Этот подход, как мы увидим далее, является характерной чертой крупных игроков на рынке ИТ-интеграции, стремящихся к созданию комплексного онлайн-присутствия. Множество сайтов позволяет компаниям не только дифференцировать свои услуги, но и более эффективно взаимодействовать с различными целевыми аудиториями.

Помимо стандартной формы обратной связи с набором полей, характерным для B2B-сегмента, компания предлагает альтернативные способы взаимодействия. Пользователям предлагается присоединиться к Телеграм-каналу, где публикуются новости и анонсы мероприятий, или подписаться на полезную рассылку. Такой подход демонстрирует стремление компании к построению долгосрочных отношений с клиентами, предоставляя им выбор удобного формата получения информации.

Сайт демонстрирует высокий уровень адаптивности для мобильных устройств. Интерфейс корректно отображается на экранах различных размеров, сохраняя при этом удобство навигации и доступность всех функциональных элементов. Это обеспечивает положительный пользовательский опыт независимо от того, какое устройство использует пользователь.

Общее впечатление от сайта КРОК — крайне положительное. Лаконичная, но тщательно продуманная подача информации, интуитивно понятная навигация и сильный визуальный ряд создают ощущение профессионализма и внимания к деталям. Безусловно, столь краткое описание направлений деятельности вряд ли подойдет компаниям меньшего масштаба, однако для КРОК, с его устоявшимся авторитетом и узнаваемым брендом, — это оптимальное решение. Сайт демонстрирует, что даже в B2B-сегменте можно создавать привлекательные и удобные интерфейсы, которые эффективно доносят ключевые сообщения до целевой аудитории.

Инфосистемы Джет. Пример для подражания

Инфосистемы Джет — крупный российский ИТ-интегратор, специализирующийся на системной интеграции в области информационной безопасности и инфраструктурных решений. Компания активно участвует в крупных ИТ-проектах, предлагая также разработку ПО и аутсорсинг.

Первый экран сайта создаёт впечатление уверенного профессионализма, чётко донося информацию о компании и её главных направлениях деятельности. Пользователь сразу видит ключевые сферы экспертизы, что облегчает понимание специализации компании. Визуальное оформление сдержанное и не отвлекает от основного контента.

Структура сайта компании заслуживает особого внимания и может служить образцом для подражания. В верхнем меню представлены все ключевые разделы, при этом оно не перегружено лишними элементами. Удобное выпадающее меню позволяет быстро находить нужную информацию. Несмотря на внушительный перечень решений и услуг, навигация остаётся интуитивно понятной благодаря грамотной организации меню. Такой подход существенно экономит время пользователя, избавляя от необходимости совершать лишние клики в поисках нужной информации.

Поиск услуг и решений на сайте организован с учётом удобства пользователя. Инструменты поиска позволяют находить необходимую информацию с помощью фильтров по направлениям и отраслям, а также через полнотекстовый поиск. Это значительно упрощает процесс поиска, позволяя быстро находить релевантные решения, соответствующие конкретным потребностям и запросам.

Помимо поиска услуг и решений, на сайте также реализована возможность поиска проектов по направлениям и отраслям. Этот подход, позволяющий пользователям быстро находить релевантные кейсы, достаточно распространён в отрасли и будет встречаться на нескольких других сайтах, рассматриваемых в рамках данного обзора.

Формы обратной связи на сайте размещены продуманно, логично и именно там, где пользователь ожидает их увидеть. Кнопки "Оставить заявку" присутствуют на первом экране целевых страниц, а внизу каждой страницы размещена развёрнутая форма. Сайт не навязывает покупку, но при этом обеспечивает лёгкий доступ к инструментам связи. Это создаёт комфортную среду для потенциальных клиентов, позволяя им самостоятельно принимать решение о взаимодействии с компанией.

На сайте можно найти ссылку на журнал JETINFO, который представлен как отдельный контентный ресурс. Это демонстрирует стремление компании не только к предоставлению услуг, но и к созданию ценного информационного пространства для своей аудитории. Наличие такого ресурса подчёркивает экспертность компании и позволяет ей делиться своими знаниями и опытом с клиентами и партнёрами.

Адаптивность сайта под мобильные устройства реализована на высоком уровне. Все интерактивные элементы, включая поиск и формы обратной связи, корректно адаптированы под экраны различных размеров. Они не просто сжаты, а именно переработаны для удобного использования на мобильных устройствах, что обеспечивает комфортный пользовательский опыт на разных устройствах.

В целом сайт оставляет впечатление добротно и аккуратно выполненной работы. Удобная навигация, чёткая структура и продуманное размещение элементов делают его интуитивно понятным для пользователя. Учитывая, что, согласно кейсу разработчика, на создание сайта было затрачено всего четыре месяца, результат можно считать отличным. Сайт демонстрирует, что даже в сжатые сроки можно создать качественный и функциональный ресурс, отвечающий потребностям бизнеса и пользователей.

ЛАНИТ-Проекты. Необходимый минимум

ЛАНИТ-Проекты — ведущий системный интегратор России. Компания проектирует и внедряет комплексные ИТ-решения для крупных государственных и корпоративных клиентов. Управляет сложными технологическими проектами, создавая локальные, облачные и платформенные решения. 

Первое впечатление от сайта ЛАНИТ-Проекты радикально отличается от сайта материнской компании. Здесь пользователя встречает строгий, мощный визуал и чёткое позиционирование компании как надёжного партнёра в реализации сложных ИТ-проектов. Лаконичность и сдержанность дизайна подчёркивают серьёзность намерений и высокий уровень профессионализма, создавая атмосферу уверенности и стабильности.

Структура сайта ЛАНИТ-Проекты лаконична, возможно даже чрезмерно. Для просмотра внутренних разделов пользователю необходимо перемещаться по страницам, что требует больше времени и менее наглядно, чем реализация расширенного выпадающего меню. Такой подход, хотя и подчёркивает строгость и сдержанность дизайна, может затруднить навигацию для пользователей, привыкших к более традиционным и интуитивно понятным интерфейсам.

Лидогенерирующие кнопки размещены аккуратно и ненавязчиво, гармонично вписываясь в общий стиль сайта. Однако размещение формы обратной связи на странице "Контакты" может показаться несколько непривычным для пользователей, привыкших к более традиционному её положению в верхнем меню или на целевых страницах.

Адаптивная версия сайта, к сожалению, требует доработки. Очевидные недочёты в отображении элементов и навигации на мобильных устройствах портят общее впечатление. Недостаточная оптимизация мобильной версии может негативно сказаться на пользовательском опыте тех, кто предпочитает использовать смартфоны и планшеты.

Сайт ЛАНИТ-Проекты является частью обширной экосистемы компании и, безусловно, успешно презентует деятельность компании. Тем не менее, ему не помешала бы более глубокая проработка с точки зрения структуры и навигации, а также тщательное финальное тестирование. Улучшения в этих областях позволили бы создать более удобный и интуитивно понятный интерфейс, что, в свою очередь, положительно сказалось бы на пользовательском опыте и общем восприятии сайта.

Softline. Классика корпоративного жанра

Softline — это глобальный поставщик ИТ-решений и сервисов, предлагающий широкий спектр услуг, включая облачные решения, кибербезопасность, программное и аппаратное обеспечение, а также цифровую трансформацию.

Внешний вид российского сайта Softline заметно отличается от аналогов, причём не в лучшую сторону. Первое, что бросается в глаза, — это трехъярусное меню. В нём собраны не только основные разделы, но и второстепенные запросы, что создаёт общее впечатление перегруженности.

Развёрнутое выпадающее меню предоставляет полный спектр услуг и решений компании, что позволяет пользователю быстро сориентироваться без необходимости переходить по множеству страниц. Однако визуально меню выглядит перегруженным и избыточным. Возможно, стоило бы рассмотреть более компактное и структурированное дизайнерское решение.

Внутри раздела "Услуги и решения" представлена комплексная система поиска, включающая фильтры по отраслям, направлениям и вендорам, а также полнотекстовый поиск. Такой подход обеспечивает пользователям возможность быстро и эффективно находить необходимые предложения, сокращая время на поиск и повышая удобство взаимодействия с сайтом.

Такая же реализация поиска по фильтрам и полнотекстовому запросу присутствует и в разделе "Проекты", что значительно упрощает поиск интересующих кейсов. Это удобное решение позволяет пользователям быстро находить проекты, соответствующие их конкретным потребностям и отраслевой направленности.

Кнопки обратной связи на сайте Softline размещены в привычных и логичных местах, где пользователи ожидают их увидеть. Помимо стандартной формы обратной связи, компания предлагает подписаться на рассылку, что позволяет получать актуальную информацию о новостях и событиях.

Адаптивная версия сайта Softline изобилует блоками с горизонтальной прокруткой, что является не самым удачным решением. Горизонтальная прокрутка менее удобна для пользователей, чем вертикальная, и значительная часть контента может остаться незамеченной. Этот и ряд других моментов свидетельствуют о том, что адаптивности сайта под мобильные устройства не было уделено достаточно внимания.

Сайт Softline, безусловно, является ярким примером крупного корпоративного ресурса с обширным объёмом информации и наличием отдельных продуктовых сайтов. Он успешно справляется с задачей презентации продуктов и услуг, а также обеспечивает удобный поиск информации. Однако сайту не помешало бы обновление внешнего вида, избавление от устаревших элементов и замена стоковых фотографий на более современные и аутентичные изображения. Эти изменения позволили бы улучшить визуальное восприятие сайта и сделать его более привлекательным для пользователей.

IBS. Нестандартное решение: мультисайтовость

IBS — крупная российская ИТ-компания, специализирующаяся на сложных проектах для крупных предприятий. Компания предоставляет широкий спектр услуг, от разработки бизнес-приложений до системной интеграции, помогая клиентам повышать эффективность бизнеса с помощью цифровой трансформации.

Первый экран сайта сразу же захватывает внимание динамичным роликом, который хочется посмотреть со звуком. Видео создаёт эффект погружения и задаёт тон всему сайту, демонстрируя современный и технологичный подход компании.

Сайт обладает достаточно понятной структурой, однако к навигационному меню могут возникнуть вопросы. При открытии оно полностью перекрывает экран, что вынуждает пользователя совершать дополнительный клик для доступа к контенту. Это может показаться не самым удобным решением, особенно для тех, кто привык к более традиционным и компактным меню.

Многие направления деятельности компании вынесены на отдельные сайты, что, безусловно, позволяет более детально их раскрыть. Однако это уводит пользователей с основного ресурса и затрудняет быстрый поиск информации по разделам. В то же время нельзя однозначно утверждать, что такой подход не является эффективным. Он может быть оправдан в случаях, когда необходимо акцентировать внимание на конкретных продуктах или услугах, требующих глубокого погружения.

В разделе "Проекты" реализован уже знакомый нам подход: фильтры по отрасли и направлению в сочетании с полнотекстовым поиском. Это обеспечивает удобство и эффективность поиска релевантных кейсов, позволяя пользователям быстро находить проекты, соответствующие их конкретным запросам.

Кнопка "Оставить заявку" удобно закреплена в навигационном меню, что позволяет пользователю обратиться к ней в любой момент, без необходимости поиска. В нижней части страницы пользователя встречает развёрнутая форма обратной связи. Этот приём компания активно использует и на сайтах своих услуг, что свидетельствует о стремлении к упрощению взаимодействия и обеспечению доступности связи.

Адаптивная версия сайта выглядит достаточно хорошо, однако некоторые спорные решения всё же присутствуют. Например, расположение отдельных элементов или взаимодействие с ними на мобильных устройствах может вызывать вопросы. В целом адаптивность выполнена на достойном уровне, но требует точечной доработки для достижения оптимального пользовательского опыта.

Сайт IBS представляет собой интересный эксперимент мультисайтовости, когда различные направления деятельности представлены на отдельных, связанных между собой ресурсах. К сожалению, оценить эффективность такого подхода и узнать о результатах эксперимента не представляется возможным. Однако, очевидно, что компания стремится к созданию комплексного онлайн-присутствия, позволяющего более детально раскрыть каждое из своих направлений.

Т1 Интеграция. Лабиринт решений

Т1 Интеграция — крупная российская ИТ-компания, входящая в холдинг «Т1», специализирующаяся на системной интеграции и сложных ИТ-проектах. Компания предлагает широкий спектр услуг от разработки бизнес-приложений до облачных сервисов.

На первом экране сайта пользователя встречают решения, что создаёт необычное первое впечатление. С первого взгляда можно даже подумать, что это не главная страница, а внутренний раздел, посвящённый конкретным продуктам или услугам. Такой подход может показаться нестандартным, но, вероятно, преследует цель сразу же продемонстрировать ключевые предложения компании.

В целом навигация по сайту требует доработки. Отсутствие ключевого раздела "Решения и услуги" в верхнем меню усложняет поиск информации об услугах компании. Слайдер с решениями и услугами на главной странице не решает эту проблему. Это создаёт неудобства для пользователей, которые привыкли к более интуитивно понятной навигации и быстрому доступу к ключевой информации.

Поиск на сайте ориентирован на определённые типы контента: несмотря на то, что он воспринимается как глобальный, в результатах выдаются только пресс-релизы. Аналогичная ситуация с кейсами: чтобы их найти, необходимо тщательно изучить сайт. Это создаёт значительные неудобства для пользователей, стремящихся быстро получить информацию о предложениях и реализованных проектах компании.

Пользователю предлагается связаться с компанией по телефону, что может быть не всегда удобно в современном цифровом мире. Лидогенерационная форма присутствует только на странице продукта, что ограничивает возможности для потенциальных клиентов, желающих оставить заявку на других страницах сайта. Отсутствие удобных инструментов для обратной связи может снизить конверсию и усложнить взаимодействие с компанией.

В целом сайт оставляет противоречивое впечатление. Визуально он выглядит современно, но функционально — отстает от конкурентов. Неудобная навигация, ограниченный поиск и отсутствие лидогенерационных элементов могут снизить его эффективность в привлечении потенциальных клиентов.

Айтеко. Тернистый путь

Айтеко — российский системный интегратор, который специализируется на ИТ-инфраструктуре для крупных организаций. Компания предлагает широкий спектр услуг от системной интеграции до информационной безопасности, участвуя в цифровой трансформации различных отраслей.

Главная страница десктопной версии решена довольно необычно и лаконично — она представлена всего одним экраном. Такой подход может показаться нестандартным, но, вероятно, преследует цель сразу же продемонстрировать ключевые предложения компании и привлечь внимание посетителей.

Переходя в раздел "Решения", пользователь сталкивается сразу с несколькими навигационными приёмами: ссылками на внутренние разделы (которые визуально больше похожи на якоря), тегами и списком всех решений. Однако, чтобы понять, как работает каждый элемент, необходимо самостоятельно их протестировать.

Из-за дизайнерского решения с блочной структурой страница выглядит перегруженной. Поиск нужной информации на такой странице затруднён. Визуальная сложность затрудняет восприятие контента и может оттолкнуть пользователей, привыкших к более простым и понятным интерфейсам.

На внутренних страницах сайта полностью исчезают меню и подвал, что вынуждает пользователя для дальнейшей навигации использовать кнопку "назад" в браузере. Лидогенерационные элементы на целевых страницах отсутствуют, что ограничивает возможности для взаимодействия с компанией.

Каким образом было спроектировано путешествие пользователя по сайту и к чему оно должно было привести, остаётся не вполне ясным. Логика навигации и целевые действия, которые должен совершить пользователь, не очевидны. Это может свидетельствовать о недостаточной проработке пользовательского опыта и отсутствии чётко сформулированных целей для сайта.

Rubytech. Ожидание vs Реальность

Компания Rubytech — российский разработчик и интегратор сложных ИТ-решений, специализирующийся на создании и внедрении высоконагруженных ИТ-инфраструктур, а также разработке программно-аппаратных комплексов.

С первых секунд пребывания на сайте возникает ощущение некоторой небрежности в исполнении, несмотря на визуальную яркость. Мелкие недочёты создают впечатление недоработанности. Это ощущение усиливается по мере изучения сайта, где обнаруживаются и другие шероховатости, влияющие на общее восприятие.

Верхнее меню содержит все основные разделы, что, безусловно, удобно. Однако реализация выпадающего меню значительно упростила бы поиск продуктов, сделав его более быстрым и интуитивно понятным. В настоящее время список продуктов представлен в виде отдельной страницы с большим количеством ссылок, что может затруднить навигацию и поиск нужной информации. 

Страницы продуктов выполнены в достаточно скромном стиле, и, к сожалению, также не обошлись без недочётов. Самым заметным из них является неудачный дизайн кнопки "Отправить заявку", которая выглядит неактивной. При нажатии на неё открывается ссылка mailto, что может быть неудобно для пользователей, у которых не настроена почтовая программа или возникли проблемы с её работой. Такой подход может оттолкнуть потенциальных клиентов и снизить эффективность сайта.

Другие страницы сайта выглядят более проработанными и информативными, что создаёт не очень удачный контраст с продуктовыми страницами.

Адаптивная версия сайта в целом повторяет десктопную и особых нареканий не вызывает. Конечно, есть мелкие недочеты, но в целом сайт корректно отображается на мобильных устройствах, и навигация остаётся удобной. Это позволяет пользователям комфортно взаимодействовать с сайтом независимо от используемого устройства.

Что запомнить: тренды, которые помогут сделать сайт удобным

В результате проведённого обзора мы выделили несколько ключевых UX-приёмов, которые помогут создать удобный и информативный сайт. Эти приёмы охватывают различные аспекты пользовательского опыта и позволяют сделать сайт компании более привлекательным, понятным и эффективным для пользователей.

1. Выпадающее меню. Это эффективный инструмент, который позволяет пользователям быстро ориентироваться на сайте, предоставляя мгновенный доступ ко всем услугам и разделам с любой страницы, без необходимости возвращаться на главную страницу.
2. Залипающее меню. Дополняя преимущества выпадающего, оно обеспечивает постоянный доступ к навигации и лидогенерирующей кнопке, сохраняя их в поле зрения пользователя на любой странице.
3. Простая структура. Для обеспечения удобства и быстрого доступа к ключевой информации необходимо выделить основные разделы (О компании, Услуги и решения, Проекты, Медиацентр, Карьера, Контакты) и избегать излишнего количества ссылок в верхнем меню.
4. Принцип "один блок = один экран". Обеспечивает лаконичность и удобство восприятия информации, особенно на главной странице, но может быть успешно применён и на внутренних страницах для создания чёткой и структурированной подачи контента.
5. Поиск в решениях, продуктах, проектах. Обеспечьте пользователям возможность быстро находить нужную информацию, внедрив удобные фильтры и полнотекстовый поиск.
6. Отраслевая экспертиза. В B2B-сегменте крайне важно продемонстрировать потенциальным клиентам свой отраслевой опыт, предоставив подробную информацию об отраслях, в которых компания имеет компетенции.
7. Лидогенерация. Для эффективной лидогенерации разместите кнопку сбора заявок в верхней части страницы (первый экран/залипающее меню) в сочетании с раскрытой формой внизу, а в теле страницы используйте кнопки аккуратно, избегая перегрузки и дублирования.
8. Подробный подвал. Обязательно дублируйте структуру меню в подробном подвале, включая разделы второго и даже третьего уровня вложенности, чтобы предоставить пользователю дополнительную возможность найти интересующую его информацию.

И, конечно, важно поддерживать сайт в актуальном состоянии, адаптируя дизайн к реальному контенту и своевременно обновляя информацию. Иначе такие недочёты, как неработающее видео или ссылки на заблокированные ресурсы, могут создать препятствия для получения обращений с сайта и негативно сказаться на репутации компании.