Советы по совмещению юзабилити и привлекательности сайта

wordpress themes top 2018-2019Разработчика умения чувствовать целевую аудиторию сайта, подбирая такие инструменты и способы подачи материала, с которыми ей будет проще и удобнее работать. Специалисту, шаманящему над будущим сайтом, приходится постоянно лавировать между требованиями юзабилити, ограничениями SЕО и желанием сделать страницу яркой, эффектной, наполненной впечатляющей графикой и красивыми видео.

Большинство дизайнеров – увлекающиеся, творческие личности, которые часто жертвуют функциональностью ресурса в угоду демонстрации собственного мастерства. Стоит зайти на страничку Рейтинга сайтов Рунета, чтобы убедиться в этом: подавляющее большинство сайтов-победителей практически во всех номинациях демонстрируют обилие мультимедийных средств: от супекачественной графики до изысканных видео-вставок и особенной озвучки сайтов. К сожалению, далеко не 100% этих высокохудожественных решений демонстрируют удобство использования и дружелюбность в отношении юзера. Что делать, чтобы избежать таких перекосов? Как совместить несовместимое? В чем формула идеального сайта? Попытаемся ответить на все эти вопросы в данной статье.

image1-min

1. Графика не должна забивать контент

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

image3-min

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

2. Последовательный дизайн

Хороший сайт всегда базируется на использовании одной стилистики и ограниченного набора визуальных средств. Речь идет о том, чтобы еще на этапе определения концепта веб-страницы заложить основные принципы организации его функциональных зон, выбрать шрифты, базовые элементы навигации. Например: кнопки перехода на другую страницу рекомендуется во всех местах сайта маркировать по единой схеме: цветом, тенью или подчеркиванием. Не стоит миксовать их в случайном порядке, вставляя один раз цветную кнопку, а другой раз текст с изменяющимся размером. Возможно, так сайт будет выглядеть интереснее и подарит пользователю незабываемый опыт, однако, он вряд ли станет доступнее и проще. Основная масса юзеров не получит комфортной навигации по странице, станет гадать над предназначением очередного эффекта. В этом случае срабатывает правило “Лучше меньше, да лучше”.

image2-min

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

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

image5-min

3. Вездесущие иконки

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

image4-min

4. Ключевые элементы страницы

Базовыми элементами каждой веб-страницы, которые задают ее структуру, являются навигационная панель и заголовки. Навигация дает представление о том, какие разделы представлены на сайте и куда пользователю можно перейти дальше. В идеале, навигация должна быть стационарной (даже если пользователь опускает полосу прокрутки, он не должен терять навигационные строчки). На крайний случай подойдет кнопка “Вверх” для быстрого возвращения к шапке сайта. Заголовки, в свою очередь, сообщают суть текущей страницы, передают ее ключевой посыл.

image7-min

В идеале, после завершения работы над каждым разделом сайта, дизайнер должен провести на нескольких посторонних людях простейший “тест на прищуривание”. Для этого открывается конкретная страница, глаза испытуемого прищуриваются, а взгляд сосредотачивается на содержимом. Далее человек должен сказать, что он видит на сайте. Как правило, в таком положении ясно становятся видны главные элементы структуры сайта (именно они будут наиболее различимы из-под сомкнутых век). Если в ходе такого теста человеку становится понятна структура странички (распознается навигация, бросаются в глаза заголовки), значит, с ней все в порядке. И напротив: если в данном конкретном разделе ведется борьба между множеством элементов, значит, с композицией и логикой страницы есть проблемы. В последнем случае потребуется чистить сайт, удалять лишнее, убирать компоненты, которые претендуют на лидерство, хотя по факту не имеют большой ценности. Все эти действия требуются, чтобы внимание потребителя не распылялось, а сайт не был похож на информационную свалку.

image6-min

5. Правильная атмосфера

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

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

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

image8-min

Вывод

Опытные создатели веб-страниц задействуют в своей работе опробованные и гарантированно приносящие успех технологии дизайна сайта:

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

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

Советы по совмещению юзабилити и привлекательности сайта обновлено: Январь 21, 2019 автором: admin