Интерфейсы сайтов требования

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

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

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

Вначале думаем, потом делаем

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

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

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


Пример быстрого наброска и полученного результата

От большего к меньшему, от общего к частному

Это второе простое правило. И оно также часто нарушается.

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

Это правило целиком применимо ко всем аспектам и жанрам дизайна.

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


Пример пошагового уточнения и доработки макета от общего к частному.

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

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

Итак, подытожим: «От большего к меньшему, от общего к частному».

Модульная сетка

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

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

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


Пример использования модульной сетки


Пример использования модульной сетки

Масштабируемость

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


Отображение эластичного сайта на различных мониторах

Итак, делая «резиновый» дизайн не забываем, что:

  • Общая композиция не должна нарушаться ни при каком разрешении монитора у посетителя.
  • Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта.
  • Вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах.
  • Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border).
  • Исключение могут составлять лишь картинки. И то, жесткий размер в px для многих изображений — ограничение лишь по вертикали.

«Сжатие-растяжение»

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

Первое, с чего нужно начать — это найти минимальное сжатие сайта.

Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760 px и 990 px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.

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

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

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

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

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

Запас на рост сайта

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

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


Пример «безболезненного» изменения/добавления древовидной навигации первого и второго уровня

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


Пример «безболезненного» перемещения,
изменения/удаления блоков сайта

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

Шрифтовая схема

Большая часть сайтов смотрится цельно и завершенно при построении дизайна на основе одного-трех шрифтов.

Базовый шрифт — основной шрифт материалов сайта.

Акцидентный — шрифт для заголовков.

В некоторых случаях вводятся дополнительные шрифты для:

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

Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна быть цельной и использоваться на всех страницах сайта.

Всё последующее оформление информации на сайте должно строится на базе общей схемы.


Шрифтовая схема простого корпоративного сайта

Реакция на пользователя

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

Рассмотрим типичные элементы.


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

В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.

Типичный набор:

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

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


Различные состояния элемента навигации

Ссылки, расположенные в тексте, всегда подчеркнуты и должны отличаться по цвету от основного текста.

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

Читайте так же:  Материнский капитал тульская область

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

Ссылки с дополнтельными свойствами

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

Таких иконок требуют ссылки:

  • альтернативное получение данных (RSS, PDA, версия для печати)
  • скачивание файлов, расположенных на сервере
  • обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ, картографические сервисы, Википедия и т.п.)
  • e-mail адресов
  • открытие форм
  • открытие ссылки в новом окне


Примеры использования дополнительных иконок «в жизни».

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


Один из примеров использования псевдоссылок.

Табы — это некоторая смесь элемента навигации и элемента управления.

Для них учитываем состояния:

  • таб неактивен
  • наведен курсор (opt)
  • загрузчик содержания (opt)
  • таб активен


Фрагмент сайта, на котором видны сразу три состояния табов: активный таб, наведен курсор и обычное, неактивное, состояние.

Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.

Оформление содержания

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

Именно изучая информацию пользователь проводит самую большую часть своего времени на сайте. И именно по этой причине нужно уделить оформлению содержания должное внимание.

Задачи сайта и его содержание всегда разное. Поэтому оформлять это содержание также всегда нужно по разному.


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

Элементы содержания

Сразу нужно сказать, что предусмотреть заранее все возможные варианты оформления нельзя. Мы рассмотрим лишь типичные.

Например, для корпоративного сайта:

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

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

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


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

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

Павел Колодяжный. Арт-директор и основатель дизайн-бюро «make».
Специализируется на разработке интернет-сайтов и проектировании интерфейсов.
Общий стаж в дизайне — 9 лет. Как автор и со-автор причастен к появлению на свет более сотни сайтов и около трех десятков интерфейсов. Среди работ есть проекты для таких компаний, как Sunbay Software, Space Andventures, Pulsar Software Systems, Canon Inc., Yandex, Yamaha Motors. Не смотря на прежние достижения считает, что самые интересные проекты еще впереди.

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

Ярославу Трофимову (из Inspire) за советы и конструктивную критику текстов.

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

Всем пользователям Живого Журнала и Хабрахабра, за комментарии, отзывы и вопросы, благодаря которым я доработал и расширил этот материал.

Примеры хорошего веб-дизайна

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

Советы по дизайну для успешного сайта

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

Например, вот сайт магазина Tessemae’s, который продает приправы:

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

А вот пример из сферы услуг — современный сайт архитектурно-строительной компании Kephart:

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

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

  1. Знайте уровень своего пользователя (сайт, с помощью которого можно строить математические модели будет сильно отличаться по интерфейсу от онлайн-магазина с одеждой).
  2. Используйте уже известные модели (если пользователь не поймет, как пользоваться меню сайта, то он вряд ли уделит время его содержимому).
  3. Создавайте визуальную иерархию (покажите пользователю, что самое важное и четко разделяйте блоки текста, чтобы упростить просмотр).
  4. Не усложняйте (если что-то можно сделать еще проще — делайте).

Например, Wunderlist использует значки и принципы, которые знакомы пользователям по почтовым (перетаскивание дел в списке, inbox, чат) и офисным приложениям и календарям (оповещения, сортировка), а также стандартное для бумажных списков вычеркивание выполненных дел:

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

Например, на сайте Starbucks использован фирменный оттенок зеленого и черный — цвет основного напитка, который компания продает в 67 странах мира:

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

5. Можно ли доверять этому сайту? Корпоративный сайт, где в качестве средства связи указан только адрес электронной почты, вызывает недоверие у пользователей. Блоги, об авторах которых ничего не известно, кажутся ненадежными. Магазины, которые не рассказывают ничего о способах оплаты и доставки не получают заказов. Поэтому проверьте:

  1. Понятно ли, кому принадлежит сайт?
  2. Заметен ли логотип компании?
  3. Предоставляются ли подробные контактные данные: почтовый адрес, карта проезда, время работы, номера телефонов, адрес электронной почты.
  4. Есть ли на сайте раздел, посвященный сотрудникам компании? Наличие такого раздела создает ощущение уже состоявшегося знакомства.
  5. Имеются ли на сайте отзывы клиентов и портфолио?
  6. Что известно об истории компании? Как давно она существует? Кто основатель? Кто инвесторы? Какие у компании цели?
  7. Есть ли сведения о гарантийном возврате и обслуживании? Условиях использования и политике конфиденциальности?

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

Также пользователю сразу показывают стоимость техники — это вызывает доверие.

Последние тенденции в дизайне сайтов

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

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

Читайте так же:  Расписка о залоге при покупке квартиры

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

Использование анимации и видео

Фоновые видео и анимация используются с целью сделать сайт более живым и интерактивным. Вот пример на странице нашего IT-ивента:

Распространение UI-паттернов

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

Чтобы понять, можно ли следовать той или иной тенденции, спросите себя:

  1. Повлияет ли она понимание цели сайта?
  2. Усложнит ли новый дизайн навигацию?
  3. Помешает ли она пользователям выполнять действия с сайтом? (Например, регистрироваться или оставлять отзывы.)
  4. Способна ли она исказить имидж бренда?

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

Образование | UX и UI : основные понятия дизайна цифрового продукта

Подпишись
на рассылку

Лучшие публикации Теплицы, доставленные на твой email

Подпишись
на Теплицу(Pro)

Не пропусти лучшие новости для экспертов в области IT, активистов, дизайнеров

Подпишись
в Фейсбуке

Не пропусти лучшие публикации Теплицы, руководства, анонсы мероприятий

Подпишись
ВКонтакте

Не пропусти лучшие публикации Теплицы, руководства, анонсы мероприятий

Подпишись
в Телеграм

Не пропусти лучшие публикации Теплицы, руководства, анонсы мероприятий

Подпишись
на YouTube

Не пропусти видео-уроки, скринкасты, записи вебинаров и мероприятий

Наталья Баранова

Всего материалов: 528

UX и UI : основные понятия дизайна цифрового продукта

В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.

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

UX (User eXperience) дизайн – комплексный подход к взаимодействию интернет-пользователя с интерфейсом сайта, мобильного приложения или программы. Он призван разработать максимально удобный и легкий для восприятия продукт для целевой аудитории. UX дизайн отвечает за то, как продукт функционирует и какие эмоции вызывает у пользователей.

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

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

UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.

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

Термины в UX дизайне

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

2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.

3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.

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

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

6. Фокус-группа (Focus Group) – группы потенциальных пользователей вашего продукта, которые формируются, чтобы получить от них обратную связь. Мнение фокус-групп важно на этапе планирования продукта, сбора всех требований к нему. Участники высказывают свое мнение о прототипах, задачах, стратегиях, выбранных для создания продукта.

7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.

8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.

9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.

10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.

11. Прототип (Prototype) – первоначальный дизайн интерфейса или продукта, который нужен для получения отзывов от пользователей, участников проекта и заинтересованных специалистов.

12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.

Термины в UI дизайне

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

2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.

3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.

4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.

5. Навигация, меню (Navigation) – это форма, система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.

6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.

7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.

8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.

9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».

Юзабилити веб-сайта: основы

Время чтения: 10 минут

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

Читайте так же:  Пособия по профилактике плоскостопия в доу

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

  • Изучаемостью . Благодаря логично расположенным элементам и знакомым паттернам взаимодействия с ними, пользователь быстро осваивает интерфейс сайта, не прилагая для этого существенных усилий.
  • Эффективностью . Любой пользователь, посетивший сайт, стремится выполнить определенную задачу. Если ему удалось достичь цели быстро и легко, навигация сайта и организация контента отвечает требованиям юзабилити.
  • Минимальным количеством ошибок . Любая ошибка нарушает непрерывность опыта пользователя и вынуждает его повторять выполненные действия снова. Полностью избавиться от ошибок нельзя, так как пользователь может сталкиваться с ними из-за собственных неверных действий. Задача UX-оптимизатора – свести к минимуму вероятность возникновения таких ошибок, а также предусмотреть их простое исправление – например, в случае с некорректно заполненной формой.
  • Эстетичным дизайном. Критерий эстетики субъективен, однако внешний вид сайта должен соответствовать сложившимся нишевым стандартам – сайт автозапчастей с преобладанием розовых оттенков будет выглядеть также странно, как сайт онлайн-банкинга с «футуристичным» и экспериментальным интерфейсом. Новаторство никто не отменял, но здравый смысл должен быть на первом месте.

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

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

Юзабилити – это мощное оружие в борьбе за клиентов и жизнеспособность компании.

Юзабилити и особенности пользовательского восприятия

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

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

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

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

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

Основы юзабилити веб-сайта

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

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

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

2. Размещение кликабельного логотипа в шапке сайта (как правило – слева) – еще один общепринятый стандарт. Лого должно отображаться на каждой из страниц, давая пользователю возможность в один клик вернуться на главную страницу.

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

4. На каждой странице должно присутствовать наименование раздела сайта.

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

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

7. Неотъемлемая часть качественного пользовательского опыта – отправление сайтом cookies на устройство пользователя.

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

Главная страница

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

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

2. На главной странице должен быть представлен наиболее актуальный контент – свежие материалы блога, информация об акциях, ссылки на основные функции/продукты сайта, форма для генерации лидов и так далее.

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

Текстовый контент

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

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

При размещении готового текста на сайте следует учитывать базовые юзабилити-рекомендации:

1. Стандартный кегль – 12 п. Этот размер удобен для восприятия большинства пользователей. При этом кегль должен изменяться в зависимости от устройства, используемого пользователем (если мы говорим об адаптивной верстке).

2. Для чтения с экрана предпочтительны шрифты «sans-serif», то есть, шрифты без засечек. Типичные шрифты семейства sans-serif – Arial, Helvetica.

3. Обязательное условие – хороший контраст между фоном и текстом. Условный фиолетовый текст на синем фоне – это нечитабельное и болезненное сочетание.

Контраст и читабельность.

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

Простое форматирование текста в сочетании с хорошо читаемым шрифтом и контрастным фоном значительно облегчает восприятие информации.

Практические шаги навстречу хорошему юзабилити

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

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

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