Разработка корпоративного сайта на 1С-Битрикс с INTEC.UniverseSite: 10 секретов юзабилити

111.png


С вами снова Ярослав Голуб, директор интернет-агентстваINTEC!

Сегодня мы рассмотрим очень важный вопрос - принципы юзабилити корпоративных веб-сайтов. На эту тему написано уже множество книг и статей. Но, несмотря на обилие информации, я все еще вижу неудобные сайты с запутанной структурой. INTEC работает с ними каждый день. Это не удивительно. Ведь создание корпоративного сайта под ключ - непростая задача. Именно это побудило нашу команду разработчиков создать новое решение для «1С-Битрикс» INTEC.UniverseSite.

Все просто: вы создаете сайт на одной из самых стабильных платформ, а потом редактируете страницы по своему вкусу в пару кликов. Наше решение  уникально и отлично подходит под любую сферу бизнеса. А, главное, вам больше не нужен будет дизайнер или программист. Вы сможете сделать все сами с помощью нашего конструктора. Он позволяет изменить расположение модулей или блоков буквально в пару кликов. Перетаскивайте мышкой тот или иной элемент или блок, располагая его в нужном месте страницы,и  открывайте вашу вселенную дизайна!
[spoiler]
В чем уникальность INTEC.UniverseSite?


Конструктор
Вам больше не нужен верстальщик, дизайнер и программист! Вы просто покупаете необходимое программное обеспечение, компонуете сайт из готовых виджетов, переносите их на сайт и перетаскиваете мышкой по странице. Все просто, легко и быстро. Редактируйте структуру и внешний вид любой страницы и отдельных элементов сайта так, как вам этого захочется. Без правки HTML-кода и в два клика!
Конструктор INTEC.UniverseSite первый в своем роде. Он позволяет работать с профессиональными многостраничными сайтами и интернет-магазинами. Все существующие аналоги — это, как правило, либо конструкторы посадочных страниц, либо конструкторы простеньких сайтов из пяти — шести страниц. Мы решили эту задачу — на нашем конструкторе можно создавать сайт любой сложности.
Шапка
Мы разработали более 10 готовых конфигураций шапки сайта. В том числе и наиболее современный вид — прозрачный фон шапки сайта. Создайте фирменный почерк своей компании!


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


Блог

Добавляйте в блог компании статьи новости. Делитесь с посетителями полезной информацией. Раздел имеет три шаблона вывода контента: плиткой, статьями и мозаикой. Для повышения конверсии в каждой статье можно размещать: товары и услуги, разделы каталога, фотогалерею и иконки.
Дополнительные возможности для редакции «Старт» — корзина, оформление заказа, обмен с 1С, личный кабинет

Страницы услуг в виде Landing Page

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

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

Также к вашим услугам:
  • Уникальный конструктор управления структурой и дизайном интернет-магазина. Он позволяет изменить дизайн и структуру сайта, расположение модулей или блоков контента буквально в пару кликов, перетаскивая мышкой тот или иной элемент или блок, располагая его в нужном месте страницы;
  • Удобная система управления дизайном и структурой сайта. Структура, дизайн сайта и цветовые схемы настраиваются рядовым админом с помощью специального редактора без правки HTML-кода;
  • Профессиональный дизайн сайта продуман до мелочей и учитывает поведенческие факторы пользователей;
  • Более 100 различных вариантов дизайна и цветовых схем.

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


А теперь перейдем к принципам создания корпоративного сайта на INTEC.UniverseSite

В предыдущих статьях я рассказывал, как устанавливать наше решение INTEC.Universe, рассматривал особенности интернет-магазина для редакции «Старт»INTEC.UniverseLite. Сейчас я хочу рассказать вам, как создать классный корпоративный сайт на INTEC.UniverseSite. Все очень просто. Обратите внимание на следующие пункты.
number1.png
Правила юзабилити интерфейсов

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

number2.png

Навигация. Вертикальное и горизонтальное меню

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

number3.png
Отсутствие ошибок

Тестируйте и еще раз тестируйте! Каждый день. Даже в выходные и праздники. Ресурс должен работать корректно, так как каждая секунда его бездействия, каждая битая ссылка или кнопка, ведущая на несуществующую страницу, приведут к потере посетителей и клиентов. Ни один человек не задержится на неработающем сайте. Также не забудьте оформить страницу 404 в стиле вашего ресурса.

number4.png
Грамотное оформление шапки сайта

Именно верхняя часть сайта привлекает внимание пользователей больше всего. Некоторым из них лень листать страницу до конца. Если хедер не содержит нужной пользователю информации (меню, контакты и т. д.), вряд ли он будет тратить свое время на ее поиски. Таким образом, в шапке указываем все данные, которые вы хотите показать клиентам прежде всего. Оформите шапку в корпоративных цветах. Кстати, в решении NTEC.UniverseSite предусмотрено более 10 готовых конфигураций шапки под ключ. Вы точно найдете то, что соответствует задачам вашего бизнеса.



шапки.png

number5.png

Свободное пространство и дизайн

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

текст.png

Качественные тексты и контент

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

статьи.png

Также пробегитесь по основным разделам: «Новости», «Контакты», «Блог», «Проекты», «Сотрудники», «Партнеры», «Компания/Вакансии» и «Лицензии». Добавьте актуальную информацию, новости компании, готовые проекты, фотографии сотрудников (это повысит лояльность партнеров), также не забывайте про лицензии. А конструктор дизайна INTEC.UniverseSite ( с более чем 100 цветовыми схемами) поможет вам по своему вкусу быстро оформить эти разделы. Структура, дизайн сайта и цветовые схемы настраиваются рядовым пользователем с помощью специального редактора, без правки HTML-кода.


number7.png
Поиск по  сайту

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

поиск.png

Быстрая загрузка

Результаты исследований говорят о том, что в среднем пользователи проводят на странице 27 секунд и почти никогда не пролистывают ее до конца. Это происходит потому, что в интернете слишком много мусора и ненужной информации. Если бы вы подробно изучали каждый сайт, вы бы сошли с ума.
Таким образом, у вас есть совсем немного времени, чтобы рассказать пользователю о себе и побудить его на последующие действия. А если загрузка сайта будет занимать большую часть этого времени, то у вас почти нет шансов привлечь потенциальных клиентов — они попросту уйдут на сайт конкурентов. Задачу по привлечению и удержанию клиента и решает юзабилити. Кстати, здесь нелишней будет и адаптивная верстка, которая позволит сайту корректно отображаться на любом устройстве, в INTEC.UniverseSite мы предусмотрели это.
Существует множество инструментов для проверки и анализа скорости сайта: Google PageSpeed Insights, WhichLoadFaster Web Page Performance Test, Pingdom Tools, GTmetrix, Monitis Tools, Load Impact, PR-CY и др.

number9.png
Правило трех кликов

Одно из самых важных правил юзабилити гласит: пользователи должны находить всю необходимую информацию за 3 клика. Простая и удобная навигация — это, разумеется, хорошо. Однако если ваш ресурс обладает сложной структурой с большим количеством категорий и подкатегорий, то правило «трех кликов» не для вас. Гораздо полезнее будет переключиться на обеспечение интуитивности и логично упорядоченной структуры.
Если посетитель на каждом шаге своего следования по вашему веб-ресурсу будет знать, куда он зашел и как вернуться обратно на главную или другую страницу, то путь даже в 10 кликов не проблема. Если посетители по-настоящему мотивированы на выполнение целевых действий, они не остановятся, совершив три клика.

number10.png
Не забывайте про F- и Z-паттерны

Человек склонен изучать данные по определенным шаблонам, которые имеют вид букв F и Z. Можете проверить сами: бегло просмотрите несколько сайтов и запомните траекторию своего взгляда. Теперь вы понимаете, о чем идет речь? Самая важная информация должна находиться ближе к левой стороне экрана. Но тут есть следующий нюанс: данный принцип юзабилити зависит от языка и национальности. Например, носители иврита и арабского языка читают справа налево, а японцы — сверху вниз. Поэтому люди таких национальностей имеют другие паттерны поведения на сайтах.

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

Узнать обо всех возможностях наших решений вы можете в статьях:

Хотите попробовать  INTEC.UniverseSite?
Заполните форму и получите индивидуальные доступы к административной панели демонстрационного сайта.  На ней вы сможете запустить свой корпоративный сайт и оценить все возможности нашего решения в «боевых» условиях.

По всем вопросам обращайтесь по телефонам:  8 (800) 100-45-80, 8 (351) 777 - 80 - 70, sale@intecweb.ru
С уважением к вам и вашему бизнесу,
Ярослав Голуб, руководитель интернет-агентства INTEC

8 (922)750-20-10
golub@intecweb.ru
https://intecweb.ru/
https://vk.com/intecsite

Фото: