29 мая 2019
13 мин на чтение
52

Каким должен быть хороший сайт: краткое руководство и подборка полезных инструментов

author__photo
Елизавета Теряева
Редактор блога
Нет времени читать?



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

Составляющие привлекательного сайта

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

Чтобы понять, как должен выглядеть современный сайт, необходимо рассмотреть, из каких составляющих складывается его привлекательность.

Как продумать привлекательность сайта на каждом этапе

Структура и прототип

Этап прототипирования во многих случаях следует предварять составлением и анализом семантического ядра.

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

Функционал

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

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

  • Цели и задачи;
  • Технические требования;
  • Требования по функциональности;
  • Пользовательские сценарии.

Только потом элементы оформления «нанизываются» на выверенную и тщательно описанную структуру и функции.

Дизайн

Дизайн — обширное понятие, включающее в себя множество компонентов.

  • Веб-дизайн;
  • Графический дизайн;
  • UI- дизайн;
  • UX-дизайн.

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

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

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

Критерии удобного привлекательного сайта

Рассмотрим по отдельности, как внешний вид и функционал сайта влияют на восприятие его пользователями.

Внешний вид сайта

Если все элементы занимают чётко отведённое им пространство, не перекрывают друг друга, разделены по смысловым категориям, это выглядит привлекательно.

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

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

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

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

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

fotonaut.cz/en/: яркий пример сайта, который хочется просмотреть от начала до конца. Много motion-дизайна, отклика и интерактива. Сетка разбита на 5 неизменных по структуре блоков, но каждая страница уникальна и содержит интересное решение. Чётко выстроены акценты по цвету, размеру и расположению элементов. Сочная увлекательная цветовая гамма и живая графика.

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

Функционал

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

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

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

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

caltouch-platform

Коллтрекинг

Покажет, какая реклама приносит звонки, а какая просто тратит бюджет
  • Отслеживайте все звонки с сайта с точностью определения источника рекламы выше 96%
  • Отслеживайте звонки с оффлайн рекламы и визиток с помощью статических номеров
  • Получайте чистый пул номеров, который выделяется именно вашей компании
  • Анализируйте подробные отчеты по звонкам: источник перехода, браузер, девайс, гео и другое
  • Слушайте записи звонков в удобном плеере для повышения качества работы колл-центра и отдела продаж

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

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

ЦИАН Предлагает сразу приступить к поиску недвижимости, а не путает посетителя кучей вводных данных о проекте.

videotuts.ru — не самый привлекательный дизайн, но пользователь сразу попадает в пространство, наполненное нужным материалом — видеоуроками, без прелюдий.

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

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

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

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

Признаком хорошего тона однозначно считается возврат на главную при нажатии логотипа, традиционно располагающегося сверху слева или по центру.

Пользователь хочет, чтобы сайт запоминал его активность и не требовал лишних операций. Автологин, избранное, подгрузка данных карты при оплате, сохранение введённых данных в веб-формах: всё это свидетельствует о продуманности системы и заботе о пользователе. Отличный пример — Aliexpress.

Минимум рекламы или вынесение её в самые труднодоступные локации облегчает работу с сайтом.

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

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

Карта сайта в подвале — очень дружелюбный элемент.

Поиск по сайту — большой плюс при наличии контента.

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

Прилипающее меню — хорошее решение.

Огромный слайдер без полезной информации омрачает пребывание на сайте.

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

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

caltouch-platform

Сквозная аналитика

 от 990 рублей в месяц
  • Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
  • Анализируйте воронку продаж от показов до ROI
  • Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
  • Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
  • Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Оцените
Rate this post
Поделитесь с друзьями
Подпишитесь на обновления
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных.
Пришлите свою статью

Комментарии:

Рекомендуем прочитать
Бесплатный вебинар
Как увеличить выручку в недвижимости в 3 раза
Записаться
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.