Удобные веб-сайты

Что значит удобный веб-сайт?

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

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

Общие признаки удобных веб-сайтов

Чтобы понять, удобно ли пользоваться сайтом, не нужно быть экспертом. Если большинство пунктов ниже верны для вашего сайта, вы на правильном пути:

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

Кому это нужно в первую очередь?

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

Посетитель находит то, что ищет: структура контента и меню

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

Начинать с задач посетителя

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

Меню и иерархия страниц

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

Читаемый текст и компоновка страницы

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

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

Формы и способы связи

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

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

Детали, которые вызывают доверие

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

На что мы обращаем внимание в адаптивном веб-дизайне

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

Управление большим пальцем и зоны касания

На телефоне сайтом чаще всего пользуются одной рукой, большим пальцем. Если кнопки и ссылки достаточно велики, чтобы по ним было удобно попадать, и не стоят слишком близко друг к другу, случайных нажатий становится меньше. WCAG 2.2 на уровне AA требует для зон касания, как правило, области не менее 24×24 CSS-пикселей или равного ей промежутка между целями. В процессе адаптивного веб-дизайна мы стремимся с запасом превышать эту границу.

Меню и закрепленные кнопки связи на мобильном

На телефоне самая чувствительная точка — меню. Ссылка «Контакты», потерянная внутри скрытого меню, затрудняет посетителю связь с вами. Поэтому основное действие — звонок, сообщение или бронирование — мы предпочитаем закреплять в легкодоступном месте экрана.

Для ресторана, который только что открылся в Киеве, мы сделали сайт с простой структурой из разделов «Бронирование», «Галерея», «Меню» и «Контакты». Посетитель за несколько касаний попадает в меню и к бронированию, а с помощью закрепленной кнопки связи легко пишет ресторану. Подробности — на странице проекта Celebrity Kiev.

Изображения, таблицы и длинные материалы

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

Проверка адаптивного веб-дизайна на реальных устройствах

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

Планшеты и большие экраны

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

Скорость: невидимая сторона удобных веб-сайтов

Посетитель не замечает скорость сайта как свойство, но медлительность замечает сразу. web.dev, ресурс Google для веб-разработчиков, определяет три основные метрики загрузки, отклика на действия и визуальной стабильности и называет их Core Web Vitals. Для удобных веб-сайтов мы учитываем эти метрики с самого начала проектирования.

• Largest Contentful Paint (LCP): измеряет, когда появляется основное содержимое страницы; для хорошего опыта рекомендуется 2,5 секунды или меньше.
• Interaction to Next Paint (INP): измеряет, насколько быстро страница реагирует на касание или клик; рекомендуемое значение — 200 миллисекунд или меньше.
• Cumulative Layout Shift (CLS): измеряет, насколько смещается содержимое при загрузке; рекомендуемое значение — 0,1 или меньше.

Чтобы убедиться, что эти пороги достигаются для большинства посетителей, рекомендуется отслеживать 75-й процентиль загрузок страниц отдельно для мобильных и десктопа. Подробности по метрикам вы найдете в руководстве по Web Vitals на web.dev.

Дизайнерские решения, определяющие скорость

Скорость — вопрос не только сервера или кода; на нее напрямую влияют и дизайнерские решения. В процессе адаптивного веб-дизайна мы вместе с вами в начале проекта оцениваем такие элементы:

• Большие видео, которые сами запускаются вверху главной страницы, и слайдеры с множеством слайдов
• Большое число разных шрифтов и начертаний
• Фотографии, которые загружаются в размере, намного большем, чем показываются на экране
• Внешние дополнения вроде чата, карты и инструментов соцсетей, добавляемые на каждую страницу
• Изображения и информационные полосы, которые сдвигают текст вниз, потому что для них не зарезервировано место при загрузке

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

Как измерять скорость и следить за ней

Во время разработки мы измеряем скорость тестовыми инструментами, но настоящая картина складывается после публикации по мере поступления данных реальных посетителей. Отчет Core Web Vitals в Search Console показывает, какая группа страниц замедлилась. Если проверять скорость заново после добавления нового плагина или крупного изображения, удобные веб-сайты не тяжелеют со временем.

Доступность: сайт, которым может пользоваться каждый

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

Международный ориентир — Руководство по обеспечению доступности веб-контента (WCAG) консорциума W3C. В WCAG 2.2, опубликованном W3C в октябре 2023 года, руководящие принципы собраны в четыре группы: воспринимаемость, управляемость, понятность и надежность; критерии успешности определены на трех уровнях: A, AA и AAA. Подробности вы можете изучить на вводной странице W3C о WCAG 2.

На что мы обращаем внимание в дизайне и коде

• Возможность пользоваться меню, кнопками и формами только с клавиатуры
• Заметная рамка фокуса, которая показывает, на каком элементе вы находитесь при навигации с клавиатуры
• Осмысленные альтернативные тексты для изображений, которые несут информацию
• Постоянные подписи в полях форм вместо подсказки, которая исчезает, когда начинаешь печатать
• Не передавать информацию только цветом: поле с ошибкой отмечать значком и текстом
• Чтобы страница не разваливалась при увеличении текста, а заголовки шли в правильном порядке

Цветовой контраст тоже входит в этот список. Какие сочетания ваших фирменных цветов остаются читаемыми как текст и фон, мы проверяем на этапе дизайна и при необходимости предлагаем оттенки палитры, адаптированные для экрана.

Проверка доступности

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

Как мы работаем над удобными веб-сайтами

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

1. Изучение существующего сайта

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

2. Карта сайта и вайрфрейм

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

3. Визуальный дизайн

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

4. Разработка и тестирование

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

5. Наблюдение после публикации

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

Что определяет объем работ

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

• Число страниц и разнообразие типов контента
• Готовы ли тексты, фотографии и видео
• Потребность в многоязычной структуре
• Связи вроде системы записи, формы запроса предложения или CRM
• Перенос существующего сайта и перенаправление старых адресов

Частые ошибки в удобстве использования

• Оценивать и утверждать сайт, глядя только на большой экран
• Превращать главную страницу в длинную витрину, где каждый раздел представляет сам себя
• Размещать контактные данные только в самом низу страницы
• Мешать посетителю увидеть контент всплывающими окнами
• Оставлять скорость и доступность на время после публикации

Что нужно подготовить до начала

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

Частые вопросы

Чем удобные веб-сайты отличаются от сайтов, которые просто выглядят современно?

Современный вид влияет на первое впечатление. Удобные веб-сайты же позволяют посетителю без усилий найти нужную информацию и способ связи; хороший сайт дает и то и другое вместе.

Нужна ли отдельная мобильная версия для адаптивного веб-дизайна?

Нет. При адаптивном веб-дизайне, построенном по принципу responsive, один и тот же сайт меняет компоновку в зависимости от размера экрана. Контент и адрес остаются одними, а обновления делаются в одном месте.

Можно ли улучшить пользовательский опыт, не обновляя мой существующий сайт?

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

Влияет ли скорость сайта на позиции в Google?

Google сообщает, что метрики Core Web Vitals используются в его системах ранжирования; но хорошая оценка сама по себе не гарантирует высокого места. Скорость важна прежде всего для того, чтобы посетитель мог пользоваться сайтом и не уходил.

Нужна ли доступность небольшому бизнесу?

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

Как понять, удобен ли сайт?

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

Давайте вместе посмотрим на ваш сайт

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