Основы эффективного дизайна сайта

12.01.2017

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

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

Чтобы в конце работы над сайтом не допустить таких разочарований, а заодно уменьшить финансовые затраты на разработку сайта, рекомендуется применять UCD (user-centered design). Этот подход основывается вовлечении пользователей в процесс проектирования на раннем этапе.

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

Аналитика целевых пользователей

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

Разработка пользовательских сценариев

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

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

Разработка прототипа

Следующий этап - это разработка прототипа (макета сайта). Назначение макета сайта – визуализировать реализацию сценариев. Созданный прототип проверяется на предмет того, выполнимы ли пользовательские сценарии. Условия проекта определяют степень детализации макета сайта. Прототип сайта разрабатывается очень быстро. Если этот этап по времени занимает больше недели, значит, прототипирование понято неверно.

Оценка или юзабилити-тестирование

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

Спецификация прототипа

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

В завершении каждого этапа обязательно происходят проверки (тестирование, согласование, оценка). В ходе проверок результаты возможны корректировки. Даже если объем работы выполнен и нравится заказчику и исполнителям проекта, но что-то не соответствует требованиям целевой аудитории или непонятно пользователям – макет сайта изменяется. Проектирование сайта, ориентированное на пользователя, носит итеративный характер.

Итеративность не  означает “бесконечность”. Как правило, работы по проектированию занимают не больше месяца.

Такая методика имеет большой плюс - это юзабилити-эффект. Но мы можем назвать еще два преимущества:

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

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

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


Сайт ПАО "Мосэнергосбыт" предлагает москвичам услуги установки и замены счетчиков. Посещаемость сайта велика: ежемесячно 50 000 просмотров. Но большой объем текстовой информации, плохое юзабилити и устаревший дизайн не доводил потенциальных клиентов до заказа услуг. Более того, ПАО "Мосэнергосбыт" является абсолютным лидером на рынке, поэтому сайт компании должен быть эталоном для остальных участников.

Было
Стало

Пример модернизации сайта ПАО "Мосэнергосбыт"

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

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


Строительная компания «Юникс Строй» обратилась с проблемой низкого уровня продаж при стабильно высоком трафике.

Было
Стало

Пример модернизации сайта компании«Юникс Строй»

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

Мы переосмыслили  концепцию и предложили посетителям, которых интересовали пеноблоки, еще 3 варианта: дома из кирпича, из газоблоков, и новинку - дома из блоков с декоративным покрытием. Кроме этого, на сайте внедрены сервисы для удобства посетителей, возможность заказа в три клика, разработан новый функционал каталога с проектами домов. Результат проведенной работы не заставил себя долго ждать. Только за первый месяц на новом сайте значительно улучшились показатели: глубина просмотра страниц увеличилась на 42%, время пользователя на сайте выросло на 33%.


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