Статьи

25.07.2017

Как сбалансировать юзабилити и дизайн при создании сайта

Перевод статьи Julia Blake — How To Balance Usability and Design When Building a Website

Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные сайты оказываются «ужасными» для большинства пользователей? Одно из основных правил веб-дизайна — «юзабилити на первом месте», однако важно помнить, что дизайн играет не менее важную роль в создании удачного пользовательского опыта. Разработчики совершают большую ошибку, фокусируясь только на юзабилити, и полагая, что это более важно для пользователей. Юзабилити и дизайн обязательно должны идти вместе, как CSS и PHP, как Шапка и Подвал, как макет и его наполнение. Быстрый веб-сайт с дружелюбной формой регистрации, но с неподходящей палитрой цветов и устаревшими шрифтами, никогда не будет иметь успех у пользователей. Мы понимаем, что конечная цель любого разработчика — сделать так, чтобы посетитель сайта стал его постоянным пользователем, а это невозможно сделать, если рассматривать юзабилити и дизайн по отдельности.

Что такое юзабилити сайта?

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

Скорость загрузки — это тоже элемент дизайна

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

  • сжать/ изменить размер изображения
  • очистить кэш
  • не использовать слишком много плагинов, особенно устаревших
  • минификация JavaScript
  • использовать хорошие услуги хостинга

PageSpeed Insights — это бесплатный инструмент Google для анализа скорости работы вашего сайта. Он дает полезные советы и рекомендации о том, как исправить недостатки. WebPage Test — это еще один онлайн инструмент, позволяющий вам проверить работу вашего приложения в любом браузере. Если проблема в том, что страница медленно загружается из-за больших изображений, сжимайте их с помощью этого бесплатного инструмента.

Веб-контент как главное условие для создания удобного и красивого сайта

Написание контента для интернет-аудитории — это непростая задача. Вы должны подобрать убедительные слова, сделать текст читабельным и представить его в удобном виде. Так что же вам нужно предпринять для этого?

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

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

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

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

Первое впечатление создает красивая домашняя страница с высоким уровнем юзабилити

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

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

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

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

Навигация должна быть удобной и приятной

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

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

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

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

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

Улучшите ваш веб-дизайн, чтобы повысить юзабилити

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

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

Есть 3 варианта размещения подписей:

  • выравнивание по верхнему краю;
  • выравнивание по правому или левому краю;
  • положение внутри области;

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

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

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

Юзабилити и дизайн. Два в одном

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

Инструменты для тестирования и улучшения юзабилити сайта

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

Итак, что вам нужно протестировать:

  • доступность;
  • скорость страницы;
  • читабельность текста;
  • навигацию и дизайн;
  • посадочную страницу;
  • взаимодействие с пользователем;
  • адаптивность.

Usabilla

Это платный инструмент тестирования, дающий пользователю большое количество возможностей. С помощью этого инструмента вы можете получать обратную связь о своем веб-сайте на любом этапе его создания. Бесплатная пробная версия доступна в течение 14 дней. Далее полная версия будет стоить вам от $49 до $199 в зависимости от набора функций, который вы выберете.

Loop11

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

TryMyUI

Этот инструмент может показать вам, что делают пользователи на вашем сайте. Каждое тестирование будет стоить вам $30. Вы получаете видеозапись о пользовательском поведении на вашем сайте.

Google Pagespeed Insights

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

Pingdom Website Speed Test

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

Juicy Studio Readability Test

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

Check My Colors

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

Chalkmark

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

Optimizely

Данное приложение тестирует целевые страницы. Улучшение вашего сайта будет для вас бесплатно в первые 30 дней использования (пробная версия). Далее стоимость будет зависеть от выбранного вами функционала. Минимальная стоимость — $17 в месяц.

ClickHeat

Этот инструмент показывает взаимодействие пользователя с вашим веб-сайтом. Он показывает области с наибольшим количеством кликов и «мертвые» участки.

Responsive Design Testing Tool

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

Наиболее простой способ создать красивый и ориентированный на пользователя веб-сайт

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

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

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

Автор — Julia Blake, см. оригинал статьи

Поделиться:

Другие статьи

+7 495 724-60-03

info@userhouse.ru

119435, Москва, Большой Саввинский переулок, 12с5

Мы в соц. сетях:

© 2010–2017 User House