Составляющие удобства веб-сайтов

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

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

Но когда перед нами стоит задача создать, скажем, новый интерфейс, очевидность исчезает. Что делает вещь удобной?

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

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

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

  • Эффективность работы
  • Простота и понятность (интуитивность)
  • Комфортность использования
  • Визуальная привлекательность
  • Забота создателей сайта о пользователях

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

Эффективность работы

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

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

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

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

Простота и понятность (интуитивность)

Вторая составляющая удобства веб-сайтов тоже очень важна. Это понятность (или интуитивность). На удобном сайте пользователь без дополнительных объяснений понимает, как выполнить нужное ему действие.

На самом деле, создать простой дизайн очень сложно. Ведь многие элементы в дизайне мы только воспринимаем простыми.

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

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

  • Этап 1: осмысление и проектирование веб-сайта
  • Этап 2: создание дизайна с соблюдением семантики
  • Этап 3: анализ поведения пользователей.

Рассмотрим их немного подробнее.

Этап 1: осмысление и проектирование веб-сайта

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

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

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

Этап 2: создание дизайна с соблюдением семантики

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

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

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

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

Также в веб-дизайне крайне важно избегать паразитических смыслов. Это такое восприятие, которое автор не закладывал в произведение, но из-за недостатков воплощения аудитория воспринимает его некорректно. Например, многие меломаны, которые слушали песню «Ten o'clock postman» шведской группы «Secret Service», часто слышали зловещую фразу «Bring me cholera» вместо той, которую на самом деле пел солист — «Bring me her letter».

Паразитические смыслы также получаются из-за небрежного отношения к построению предложений. Например, фраза: «Студенты, не сдавшие зачет, будут повешены на втором этаже возле деканата в 14:00» на самом деле означает «Список с именами студентов, не сдавших зачет, будет размещен на доске объявлений возле деканата в 14:00».

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


Этап 3: анализ поведения пользователей

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

Чем больше проект, тем больше в нем дизайнерских гипотез. И даже лучшим в мире профессионалам редко удается спроектировать такой дизайн, в котором правильными окажутся все 100% решений.

Комфортность использования

Когда мы говорим «комфортный стул», «комфортный диван» или «комфортная температура», сразу понятно, о чем идет речь.

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

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

Также важно отметить, что в современном понимании комфортность веб-сайта невозможно обеспечить, не заботясь о его инклюзивности.

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

Достаточно подробно принципы веб-доступности описаны в документе под названием «Руководство по обеспечению доступности содержания в вебе» (Web Content Accessibility Guidelines). Эти принципы разрабатывает Консорциум Всемирной паутины (W3C).

Визуальная привлекательность

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

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

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

Забота создателей сайта о пользователях

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

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

Ответом будет «Да!», если команда проекта больше заботится о комфорте пользователей, чем о собственном.

В завершение

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

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

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

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

·
757
·
goodsuper 3
Наступна стаття
Законы композиции и законы гештальта в веб-дизайне
0
Головна