Руководство по юзабилити

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

Совместно с UI/UX дизайнерами Forte Group мы решили разобраться в 10-ти правилах эвристики, на которых зиждется весь User Experience, а значит весь опыт взаимодействия с онлайн-системами.

UX дизайн или User Experience — это любой опыт, который пользователь получает при взаимодействии с объектом. Это может быть как опыт использования приложения, так и дверной ручки.

Чтобы продемонстрировать важность UX, обратимся к статистике от ведущего в мире UX агентства — Intechnic:

— 70% пользователей могут уйти с сайта, если им не понравится дизайн интерфейса;

— 62% из них поделится своим негативным опытом с другими пользователями;

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

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

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

1. Видимость статуса системы

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

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

2. Схожесть системы с реальным миром

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

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

Классный пример можно найти у компании Spotify (музыкальный стриминговый сервис). Когда ты случайно лайкаешь песню, а потом убираешь лайк, внизу выскакивает фраза «Let’s pretend that never happened»(Давай притворимся, что ничего не произошло). Пользователю приятно, так как система дает лаконичный и по-дружески шуточный фидбек.

3. Свобода действий

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

Это настолько важно, что команда IOS разработала отдельное действие отмены для смартфонов: встряхнуть телефон.

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

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

4. Стандарты

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

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

Еще пример — меню почтовых агентов. Мы уже привыкли, что первыми в списке всегда будут входящие, а в конце списка будут папки Спам и Корзина.

Плохой пример. На сайте BBC есть секция, где люди оставляют комментарии, за которые можно голосовать. Рейтинги Highest обозначены стрелкой вниз, а Lowest стрелкой вверх, (здесь нет логики). Логичнее сделано на Stackoverflow (сайт вопросовответов о программировании).

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

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

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

5. Предотвращение ошибок

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

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

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

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

6. Узнаваемость

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

А теперь представьте: вы пошли в бар, выпили коктейль, решили сходить в туалет и видите вот такое.

И не понимаете, в какую вам дверь. Это очень креативно, но заставляет пользователя думать. В итоге, он может не найти то, что искал, либо найти, но поздно:)

Ниже еще пример с эскалаторами, как одна мелкая деталь может полностью изменить восприятие пользователя.

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

Если ты сомневаешься, что твоя иконка считывается правильно, лучше используй текст.

7. Гибкость

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

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

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

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

8. Простота

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

Обратный пример — поисковик Google. Здесь всё просто, лаконично и интуитивно понятно.

9. Понимание проблем и их решение.

Невозможно избежать ошибок при работе системы. Главное — это правильно объяснить пользователю, почему произошла ошибку и что с этим делать дальше.

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

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

10. Справочные материалы и документация

Почти 10% пользователей читают справочные материалы или проходят туториал для использования системы. Чаще всего пройти туториал система предлагает при первом скачивании или регистрации. У пользователя должен быть выбор: проходить обучение или нет. Справочные материалы всегда должны быть легко доступны, даже если пользователь при первом визите в систему отказался проходить туториал.

Хороший пример туториал от IOS по использованию мышки. Здесь показывается не только ее функционал, но и как она взаимодействует в интерфейсе. Сам туториал можно включить и выключить.

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

На этом всё. Надеемся, вы найдете эти советы и примеры полезными и в дальнейшем будете использовать их при работе с системами. Творите:)

Введение

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

95% создаваемого функционала на базе платформы — это страницы, формы и таблицы. Именно их мы и рассмотрим в этом руководстве более подробно.

Зачем нужно юзабилити?

Для пользователя удобство дает следующие преимущества:

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

Для владельца портала юзабилити дает следующее:

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

Для разработчика удобный сайт дает следующее:

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

Основные принципы юзабилити

1. Простота — самое важное
Делайте интерфейс максимально простым, насколько это возможно. Чем проще интерфейс — тем проще будет пользователю с ним разобраться.

2. Минимум необходимой информации
Не нужно вываливать всю информацию сразу. Дайте необходимый минимум, а остальное скройте в модальных окнах, подтаблицах. Большой объем также приводит к замедлению общей загрузки страницы.

3. Убираем все медленное
Если некая функция приводит к замедлению загрузки, структурируйте ее (например, загружайте по запросу в модальном окне), либо совсем откажитесь от нее. Медленные страницы не могут быть удобными в работе — они будут постоянно рвать ритм работы пользователя.

4. Дайте гибкие инструменты для поиска информации
Дайте удобные фильтры (или объединения фильтров для поиска определенных сущностей, например, «Старые лиды»).
Дайте возможность немедленного поиска по необходимым объектам (Проекты, Задачи, Люди, Финансы и т.д.) с любой страницы.

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

6. «Где я нахожусь?»
Прозрачная навигация. Дайте пользователю точное понимание где он находится с помощью понятного заголовка, тега title и хлебных крошек. Дайте понятную карту действий для пользователя на странице.

7. Управляйте фокусом внимания
На странице есть важные элементы и менее важные элементы. Важные элементы должны быть как можно выше и выделяться через размеры и цвет. Если пользователь не увидел важный элемент, значит его не существует на странице!

8. Адаптивность
Страница должна открываться без горизонтального скроллинга на всех устройствах. При этом имеет смысл некие элементы скрывать на малых экранах как несущественные.

Далее мы рассмотрим основные элементы юзабилити в Falcon Space по различным подсистемам/компонентам.

Удобство страниц

Хлебные крошки

Обязательно указывайте иерархичные хлебные крошки на страницах. Это позволит пользователю понять где он находится.
Пример: Главная > Панель управления > Клиенты > Клиент ABC

Title и заголовок страницы

Укажите максимально лаконично Title для страницы. Title (и заголовок) должны дать пользователю максимально быстро понять, где он находится и что он должен ожидать от страницы.
Заголовок — если у вас используется компонент Таблица/Форма, то имеет смысл скрыть заголовок у страницы и использовать заголовок компонента (специальная галочка в настройках страницы).
Если вам в меню нужно поставить короткое название страницы, то также скрывайте заголовок и вручную выводите в теле страницы более длинный заголовок с h1.

Используйте минимум страниц

Любую дополнительную информацию можно показать в модальном окне (причем в малом или на весь экран). Это может быть либо модальная таблица, либо модальная форма.

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

Скрывайте второстепенные элементы на мобильных

Используйте CSS медиа запросы либо классы Bootstrap d-none d-sm-block и др.

Пример медиа запроса CSS (это правило будет действовать только для экранов с шириной меньше 768px):
@media (max-width: 768px) {
.defMainVideo{max-width: 450px;}
}

Микроразметка

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

Используйте всю силу Bootstrap

В Bootstrap есть множество готовых стилей, которые вы можете применять для своей разметки.
Используйте удобную шпаргалку по Bootstrap — https://bootstrap-4.ru/articles/cheatsheet/
Основные элементы, которые упрощают создание интерфейса:

• кнопки
• иконки Font awesome
• беджи (badge)
• панели (alert)
• отступы (p-, m-)
• вкладки (tabs)
• карточки (cards)

Обязательно создавайте скелет страницы по Bootstrap Grip правилам (container, col-12, col-md-* и т.д.) Подробнее https://bootstrap-4.ru/articles/cheatsheet/#col-1

Используйте отдельный Layout для страниц со сложной версткой

Если вам необходимо внедрить лендинг со своей полностью отдельной версткой, то используйте шаблон Landing. Можно отдельно создать лендинг на Bootstrap, согласовать его, а затем легко внедрить по инструкции в систему.

Важный момент — лендинг обязательно должен быть на Bootstrap, чтобы в дальнейшем было проще поддерживать изменения в системе.

Автосоздание оглавлений

В блоге и документации используется автоматическое создание оглавления из тегов h2-h6. Это позволяет пользователю лучше ориентироваться в большом текстовом материале. Примером может служить данная статья (см. начало статьи). 

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

Юзабилити форм

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

В рамках работы с формами разберем элементы юзабилити. Не забывайте о них.

Разметка формы

Форма должна иметь адаптивную разметку и хорошо смотреться на мобильных (используйте только Bootstrap для разметки).
Делайте ширину полей в соответствии с предполагаемым вводом.
Если форма большая, то не делайте по 1 строке в поле.
Компонуйте форму с компактным расположением полей, располагайте связанные поля рядом.
Располагайте самые важные поля наверху.

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

Элементы стилизации в разметке страниц Falcon Space

Типы полей

В системе более 30 типов полей. Используйте подходящие типы полей, а не ограничивайте 2-3 типами.

Используйте example подсказки

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

Проверка ввода

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

Ctrl + Shift + S

Форма позволяет быстро сохранять данные по комбинации клавиш Ctrl + Shift + S. Это упрощает сохранение и уменьшает риск потери данных при постоянном множественном сохранении данных.

Защита от потери данных

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

Статус заполнения формы

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

Мастер шагов

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

Более подробно режим Мастер описан в документации по формам.

Посмотреть пример формы можно на демостенде https://falcon.web-automation.ru/tst-master

Модальные и popover формы 

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

Модальные формы позволяют скрыть всю второстепенную информацию и показывать ее только по запросу пользователя.
Модальные окна также хорошо использовать для атомарных команд пользователя (например, создать клиента).

Popover формы — это малые формы, которые открываются в отдельном окне. но при этом не перекрывают основное содержимое страницы.

Кастомизации логики вывода данных в форме

Вы можете использовать JS Render правила для управления логикой вывода.
Например, в случае наличия определенной роли выводить некоторые поля (а если нет роли — то не выводить).

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

Редактирование одиночных полей

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

Отображение результата операции

Вы можете отображать результат операции как в отдельном контейнере на странице (через параметр {form-result}), так и в малом окне справа наверху (bootstrap toast).

В большинстве окошко справа сверху — более предпочтительный вариант (настройка EnableSaveAlert=1 в SaveItem SELECT 2).

Юзабилити таблиц

Таблицы позволяют вывести любую списочную информацию в различных режимах вывода.

Что может предложить Falcon Space в качестве удобства таблиц:

Комбинация фильтров

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

Фильтры могут быть различных типов. Самые популярные — это строка ввода, переключатель Да/Нет, комбики и Галочки. Для списковых фильтров вы можете задать любой набор через хранимую процедуру dict.

Стилизация ячеек таблиц

Сортировки и пагинация

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

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

Быстрое создание сущности по 1 полю

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

Редактирование поля в строке

Вы можете редактировать одиночное поле без необходимости загрузки формы редактирования сущности.
Также может быть 2 режима — во всплывающем popover окне и прямо в таблице по щелчку.

Инструменты для показа больших таблиц

Во-первых, вы можете уменьшить шрифт в таблице.
Во-вторых используйте desc_ параметры для вставки описания к столбцам (т.е. по сути это комбинирование столбцов 1 столбец).
В-третьих, используйте режим лупы. Ячейка в таблице увеличивается при наведении на нее курсора.
В-четвертых, спрячьте часть информации в подстроках или модальной форме.
В-пятых, используйте компактный режим (Compact=1). Это уменьшает отступы в ячейках таблиц.

Меню слева также можно сворачивать для более широкой основной области с таблицей.

Множество режимов вывода

Данные можно выводить не только в виде таблицы. Есть еще другие режимы вывода:

• kanban — канбан доска с возможностью перетаскивания по колонкам https://falcon.web-automation.ru/tst-kanban
• calendar — полноценный календарь (как Google Calendar) https://falcon.web-automation.ru/tst-calendar
• chartbar — чартбар (полоски) 
• gantt — диаграмма Ганта 
• progressbar — полоски прогресс-бара

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

Операции

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

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

Групповые операции

Вы можете включить режим выбора строк галочками, причем можно выбирать множество строк через shift (как в Gmail).

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

Данные в подстроке или модальном окне

Через специальные псевдополя (sub_ и modal_) можно задать определенную разметку, которая будет выводить по клику в подстроке или модальном окне (визуально будет добавлена иконка-ссылка к соответствующему полю).

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

Зафиксированная шапка таблицы

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

Зафиксированную шапку можно отключить для шапки (disableFrozenHeader).

Отдельный вид для мобильных

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

Общие рекомендации по юзабилити на Falcon Space

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

Быстрый поиск

Дайте пользователям доступ к панели поиска вверху (обработка в процедуре falcon_search). Пользователь вводит строку, и поиск может осуществляться сразу по нескольким объектам. Алгоритм поиска (как и по каким объектам нужно искать) будет зависеть от ролей текущего пользователя.

Быстрые действия

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

Панель настраивается в GetLayout процедуре. Эта панель доступна с любой страницы в кабинетах, а также содержит по умолчанию горячие клавиши вида Ctrl + Alt + [Num] (Num — это порядок команды в меню быстрых ссылок).

Унифицированный интерфейс

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

Закрепление меню и верхней полоски интерфейса

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

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

Закрепление меню футера на мобильном экране

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

Основное меню

Меню может быть до 2 уровней. Мы намеренно отказались от 3 и более уровней, т.к. неудобно раскрывать более глубокие уровни меню (пример такого меню — Яндекс.Метрика)
Меню подстраивается под роли пользователя (т.е. зависит от набора ролей текущего пользователя).

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

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

Поддержка PWA

Используйте иконки

Активно используйте подходящие иконки Font Awesome. Это делает интерфейс более приятным и компактным. Кнопки можно делать как иконка + текст, либо как иконка + подсказка при наведении.
Найти нужную иконку можно через механизм в Редактировании страниц.
Также хороший инструмент для поиска иконок — https://faicons.com/

Используйте анимацию

Анимация скрашивает будни пользователя (но может и раздражать). Вы можете включать/отключать анимацию по необходимости в GetLayout.
В основном это анимация появления или скрытия элементов (используется библиотека animate.css).

Также в системе есть дополнительная анимация иконок (пример — иконка в верхней панели при наведении).

Заключение 

Мы рассмотрели основные элементы платформы Falcon Space, улучшающие пользовательский опыт.

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

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

Falcon Space — функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space

Время на прочтение
11 мин

Количество просмотров 28K

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

Ясное и осознанное взаимодействие

1. Выбирайте размеры шрифтов

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

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

2. Пишите информативные сообщения об ошибках

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

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода

3. Упростите требования к паролям

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

К примеру, исторически сложилось так, что поля выбора (select box) трудно поддаются стилизации. В большинстве случаев разработчики стараются скрыть стандартные объекты и клонировать их в виде более подходящих DOM-элементов. При этом данные из «клонов» передаются на вход оригинальных элементов.

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

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

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input[type="email"], input[type="tel"], то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

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

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

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

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

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

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

Хорошим решением может быть встраивание процесса обучения в обычную процедуру использования продукта. Допустим, при выполнении архивирования писем в почтовом приложении можно выдавать сообщение «А вы знаете, что можно запускать архивирование с помощью Ctrl + K?». Такой подход позволяет обучать пользователей гораздо мягче по сравнению с традиционными уроками в стиле «обзор всего приложения».

7. Микрокопирование не должно использоваться задним числом

«Микрокопирование» имеет отношение ко всем маленьким инструкциям и подтверждениям, используемым в приложениях.

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

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

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

8. Всегда обеспечивайте наличие контекста

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

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

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

Крайне популярный сегодня material design от Google вывел на новый уровень использование анимации для обеспечения контекста. Нажатие на объект запускает анимированное перетекание из текущей страницы к подгружаемой информации об объекте. Это наглядно показывает логические взаимосвязи, откуда что проистекает и куда пользователь вернётся.

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

9. Атомарные действия

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

Один из замечательных примеров: модальное окошко “compose new tweet” в Twitter’е, представляющее собой модуль для выполнения одного из важнейших действий в этом приложении. Ведь Twitter умрёт, если люди перестанут твитить. Как видите, здесь всё нацелено на то, чтобы пользователь мог сосредоточиться на написании текста, не отвлекаясь ни на что лишнее.

Этот подход работает эффективнее всего при выполнении атомарных действий. При этом вы можете предоставить всё необходимое для совершения действия в рамках того же самого модала.

10. Сообщения об ошибках

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

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

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

11. Сосредоточение уведомлений в одном месте

Благодаря распространению одностраничных приложений мы имеем возможность унифицировать всевозможные пользовательские уведомления. Граница между нативными и веб-приложениями становится всё более размытой. Когда приложению нужно повзаимодействовать с пользователем, то куда легче отправлять все сообщения в какое-то отдельное место, а не размещать их в контексте. Хотя из этого правила есть исключения. Хорошим примером репозитория уведомлений является папка входящих сообщений Gmail. А модуль для организации уведомлений Growl не даст пользователю не заметить важное сообщение.

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

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

12. Избегайте тупиковых состояний

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

13. Предоставляйте пользователю контроль

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

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

14. Избегайте рассеивания внимания

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

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

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

15. Разбивайте большие сложные задачи на более мелкие операции

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

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

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

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

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

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

То же самое можно сказать и о формах пожертвования, в особенности в мобильных проектах. Вы же наверняка хотите, чтобы пользователь подумал: «Надо же, как всё просто» вместо «Да уж, на это нужно время». Улучшение удобства пользования формами напрямую отражается на прибыльности проекта.

* * *

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

Время прочтения: 7 минут

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

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

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

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

Принципы юзабилити web-ресурса

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

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

1. Дизайн — залог доверия к сайту

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

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

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

2. Логичный структурированный контент

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

Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.

3. Важная информация — в левом углу

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

4. Общение с пользователем

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

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

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

6. Ненавязчивое предложение помощи

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

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

7. Разговор на понятном языке

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

8. Отказ от резких перемен

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

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

9. Все возможности — на виду

Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.

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

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее — тем лучше

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

11. Заметное длинное поле поиска

Соответствующая кнопка — лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.

Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

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

12. Больше свободного пространства

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

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

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

Тестирование юзабилити

Новый интерфейс оценивается с двух позиций:

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

Тестирование проводится самостоятельно либо при помощи специальных сервисов — к примеру, Яндекс.Метрики. Чтобы оценить юзабилити своими силами, нужно  набрать группу из 5-6 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.

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

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

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

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

Характеризуется простотой использования, лёгкостью освоения и доступностью интерфейса. Показывает, достигнет ли посетитель своей цели на сайте.

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

Знание этих методов помогают сделать сайт удобным для посетителя.

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

Уровень юзабилити — не абстрактная величина, он имеет единицу измерения, которая определена в международном стандарте ISO 9241-210. Характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели, и называется стоимостью взаимодействия.

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

Дизайнеры стремятся снизить стоимость взаимодействия настолько, насколько это возможно.

• Сокращают количество кликов до цели.
• Увеличивают скорость загрузки страницы.
• Убирают отвлекающие факторы.
• Делают шаги до цели как можно проще.

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

Конверсия — также хорошая мера стоимости взаимодействия. Легко измерить количество пользователей, купивших товар или зарегистрировавшихся на сайте.

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

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

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

• Простота использования. Просто ли новому пользователю ориентироваться на сайте. Не мешают ли дизайн, реклама, всплывающие окна.
• Эффективность. Как быстро пользователь выполнит нужное ему действие: закажет товар, прочитает статью или получит консультацию.
• Запоминаемость. Сможет ли пользователь быстро сориентироваться на сайте при следующем посещении через некоторое время.
• Удовлетворённость. Насколько пользователь доволен внешним видом и информацией. Учитываются все факторы: дизайн, содержание, навигация по сайту.
• Ошибки. Количество ошибок и неправильных действий пользователя при навигации по сайту. Как их предотвратить и исправить последствия.

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

Результат своих исследований Нильсен сформулировал в виде эвристик — законов юзабилити. Разработчики интерфейсов до сих пор используют эвристики как чек-лист для проверки сайта и оценки сложности интерфейса.

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

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

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

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

Система должна общаться понятными фразами и сообщениями. Сложные и узкоспециализированные термины необходимо заменить на простые слова.

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

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

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

И уменьшать шансы их возникновения.

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

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

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

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

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

 Лишние элементы, длинный текст и страница, перегруженная баннерами, — всё это отвлекает от цели.

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

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

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

Чем дольше загружается сайт, тем выше вероятность, что пользователь устанет ждать и уйдёт. По данным исследования Google, 53% пользователей покинут сайт, если он загружается дольше трёх секунд.

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

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

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

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

На курсе «UХ-аналитика» можно подробно узнать про юзабилити и про то, как сделать сайт проще. Что мотивирует пользователей, как правильно анализировать процент отказов, как найти слабые места сайта и увеличить прибыль компании.

Как сделать сайт удобным

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

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

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

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

Что такое юзабилити

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

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

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

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

Почему важно юзабилити сайта

Юзабилити решает несколько важных задач:

1. Помогает пользователям достигать легко целей, ради которых они пришли на сайт.
2. Увеличивает уровень конверсии. Пользователи будут совершать целевые действия только в том случае, если сайт им понятен, а пользоваться им удобно.
3. Влияет на поведенческие факторы, которые оценивают поисковые системы – время, проведенное посетителями на сайте, глубину просмотров и другие.
4. Обеспечивает возврат посетителей, легко увеличивает процент повторных продаж.
5. Дает снижение расходов на поддержание сайта или на обучение персонала работе с программой.
6. Повышение эффективности работы компании за счет того, что персонал не тратит время на то, чтобы разобраться в функционале программы.

Несколько статистических данных в подтверждение изложенных тезисов:

• Анализ Kissmetrics продемонстрировал, что 40% пользователей покидают сайт, если скорость загрузки страниц дольше 3 секунд. Еще один вывод исследования – 40% пользователей уходят с сайта, если не указаны контактные данные, по которым можно совершить звонок или написать.
• Анализ Landauer показал, что если правильно провести предварительное тестирование юзабилити, дальнейшие расходы на поддержание сайта сократятся в три раза.
• Данные, полученные в результате исследования Creative Good, демонстрируют, что благодаря понятной системе оформления заказа количество посетителей возрастает на 40%, а среднюю стоимость заказа – на 10%.
• Исследование User Interface Engineering продемонстрировало, что если покупатели получают полную информацию о товаре, вероятность покупки увеличивается на 25%. При отсутствии информации большинство из них быстро закроют сайт.

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

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

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

В чем измеряется юзабилити

Может показаться, что юзабилити – исключительно субъективная оценка пользователей, но это не так. Это вполне конкретный показатель, который измеряется стандартом ISO 9241-210. Под ним понимаются усилия, которые пришлось приложить пользователям, чтобы достичь своих целей и найти то, что они ищут. Критерий предполагает оценку времени, затраченного на эти цели. Еще один показатель, который можно использовать, — конверсия, соотношение общего количества пользователей к числу совершивших целевое действие.

Для увеличения этих показателей могут приниматься следующие меры:

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

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

Еще один подход предполагает анализ следующих показателей:

1. Эффективность – процент пользователей, которые успешно решили свои задачи.
2. Продуктивность – среднее время, потраченное на решение задачи.
3. Удовлетворенность – эмоциональное состояние пользователей после решения их задачи.

Принципы и правила юзабилити сайта

Хорошим может считаться сайт, соответствующий следующим критериям:

1. Информирует клиента, что происходит в процессе его покупки в каждый момент времени, насколько он близок к цели.
2. Отличается понятной структурой – разделы, подразделы, категории и другие части.
3. Содержит информацию о компании – история, принципы, контакты, адрес и телефон офиса.
4. Говорит на понятном человеку языке.
5. Позволяет сделать выбор.
6. Предлагает удобный простой поиск по сайту.
7. Имеет качественный и полезный контент с SEO, но без сложных терминов и ключевых слов.
8. Демонстрирует в одном месте всю важную информацию, дав возможность быстро познакомиться с ней.
9. Подстраивается под пользователя.
10. Имеет приятный простой минималистичный дизайн с небольшим количеством цветов, но видимым логотипом и названием компании.
11. Помогает исправить недочеты – например, предлагает вернуться назад и отменить совершенное действие, если пользователь посчитает его ошибочным.
12. Позволяет быстро загрузить страницы – например, за счет уменьшения количества рекламных баннеров.
13. Помогает разобраться со сложными моментами.
14. Есть простая навигация, понятное меню.
15. Обеспечивает хорошую функцию обратной связи.
16. Адаптируется под разные типы устройств.
17. Предлагает лаконичную и понятную форму заказа либо регистрации.

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

10 эвристик юзабилити Якоба Нильсена

Якоб Нильсен – специалист по интерфейсам, сформулировавший 10 правил хорошего usability.

Стоит проверить перед запуском, выполнены ли они:

1. Видимость состояния системы. Пользователи должны понимать, что происходит – например, на каком этапе оформления заказа они находятся, прошла ли оплата.
2. Соответствие системы реальному миру. Оценивая интерфейс, пользователи будут ориентироваться на свой прошлый опыт взаимодействия с подобными сайтами.
3. Контроль и свобода. Посетители сайта должны иметь возможность контролировать свои действия и исправлять допущенные просчеты.
4. Согласованность и стандарты. Чтобы покупатели не путались, следует руководствоваться общей политикой – например, использовать простой значок корзины для совершения покупок.
5. Предотвращение ошибок. Дизайн должен быть продуман так, чтобы свести к минимуму их вероятность. Например, можно запрашивать подтверждение каждого действия.
6. Распознавание вместо запоминания. Юзабилити должно обеспечивать простоту навигации: пользователь должен не вспоминать, где на сайте находится информация, которую он хочет найти, а быстро находить ее.
7. Гибкость и эффективность. Сайт должен подстраиваться под посетителя, быть простым и удобным как новичкам, так и опытным пользователям.
8. Эстетичность и минималистичность. Отсутствие ненужных деталей позволяет сразу увидеть главное.
9. Помощь. Если покупатель совершил ошибку, необходимо предложить меры, которые помогут исправить ее.
10. Помощь, инструкции и документация, которые выполняют роль помощников. Система должна работать так, чтобы не возникало необходимости обращаться к справочной документации, но если это потребуется – такую возможность необходимо предоставить.
11. Политика конфиденциальности, если собираются личные данные.

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

Перечислим основные методы анализа юзабилити:

• Счетчики метрик – например, Яндекс.Метрика, которая позволяет увидеть самые интересные для большинства пользователей страницы, клики, проблемные места, шаги посетителя от первого захода на сайт до действия («Вебвизор). Метрики помогают определить конверсию, просмотренные страницы, процент отказов.
• Исследования – интервью, тесты, A/B-тестирование (сравнение двух вариантов).
• Юзабилити-тестирование сайта контрольной группой, набранной, например, среди фрилансеров.
• Удобство работы на сайте с мобильных устройств.
• Оценивание контента с точки зрения грамматических и фактических ошибок.
• Корректность и удобство фильтров, формы заказа, формы поиска.
• Айтрекинг – фиксация направления взгляда, которая помогает узнать, на чем пользователь стал задерживаться дольше. Используются карта перемещений, а также туманная и тепловые карты – методы, позволяющие отследить фиксацию взгляда.

Алгоритм оценки юзабилити:

1. Для начала обязательно определить, какие проблемы должно решить юзабилити – например, использование функционала или частота нужных действий.
2. Формулирование возможных гипотез – просто предположения о том, как работает сайт. Например, «клиентам неудобно читать информацию с телефона».
3. Создание фокус-группы из представителей целевой аудитории.
4. Опрос ЦА на предмет удовлетворенности работой сайта.
5. Проверка юзабилити в специальных простых программах.

Основные ошибки юзабилити

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

1. Структура – отсутствие логики или дублирование элементов.
2. Поиск – незаметный или плохой, неудобный.
3. Хлебные крошки – отсутствие или расположение вне зоны видимости.
4. Листинг – отсутствие подробных описаний товара, услуги или цен.
5. Оформление заказа – человеку предлагается пройти несколько этапов, чтобы оформить заказ.
6. Тексты – отсутствие абзацев и форматирования, недостоверная информация, нет блоков для выделения главной информации или подзаголовков.
7. Визуализация – нет медиаматериалов, сопровождающих тексты, в результате теряется интерес к изучению информации.
8. Дизайн – слишком пестрое оформление с большим количеством деталей, не имеющих практического значения и не несущих пользы для посетителей.
9. Скорость загрузки – ресурс загружается слишком долго.
10. 404 страница и битые ссылки – факторы, негативно влияющие на ранжирование.
11. Адаптивная верстка – неудобство при чтении сайта с мобильных устройств.
12. Капча – слишком сложная или неудобная.
13. Кнопки – на сайте есть неработающие кнопки.
14. Поддержка – отсутствие онлайн-чатов либо они нерабочие.
15. Интерфейс – большое количество цветов, неудобные шрифты, сложный дизайн.

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

При тестировании нового ресурса он должен оцениваться по двум группам характеристик:

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

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

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

Методики, которые используются для тестирования:

1. Исследование в лабораторных условиях.
2. Индивидуальные опросы и интервью.
3. Онлайн-аналитика с изучением статистики.
4. Отслеживание взаимодействия пользователей с сайтом.

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

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

Некоторые примеры задач, которые должны решить тестировщики:

1. Найти информацию о доставке.
2. Оценить дизайн, интерфейс и удобство использования.
3. Найти товары в корзине в личном кабинете.
4. Проверить, насколько легко можно оформить покупку.
5. Получить консультацию сотрудника магазина.

Как улучшить юзабилити сайта

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

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

Несколько советов по изменению юзабилити:

1. Определите, какие платные или бесплатные работы наиболее приоритетны.
2. Вносите изменения постепенно, чтобы отслеживать их влияние на конверсию.
3. Перед каждым обновлением стоит делать бэкапы, чтобы вернуться в предыдущей версии.

Сервисы для автоматической проверки юзабилити

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

• Яндекс.Метрика и Яндекс. Вебвизор – анализ поведения пользователя на сайте.
• Google Оптимизация – данные о поведении пользователей на основе Google Analytics.
• UsabilityHub – оценка сайта реальными пользователями.
• Hotjar – исследование воронки продаж, самых популярных страниц и других показателей.
• Userlytics – сбор фокус-групп с возможностью получения видео о взаимодействии пользователей с сайтом.
• Фабрика Юзабилити – создание тестов, которые попадают к целевой аудитории.
• Usabilla – тестирование реальными пользователями.
• Testograf – простой сервис опросов для оценки дизайна.
• OptimalWorkshop – сервис для загрузки сайта и формулирования задач для фокус-группы, которая его тестирует.
• SitePolice – тестирование сайта пользователями, которые составляют подробные отчеты.

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

Часто задаваемые вопросы

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

UX — User Experienc, пользовательский опыт при взаимодействии с сайтом компании, положительный или отрицательный. UI — User Interface, дизайн сайта и внешнее хорошее впечатление от его посещения.

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

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

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

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

Заключение

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

Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите
ctrl
+
enter

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

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

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

Юзабилити сайта складывается из двух частей:

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

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

Улучшаем UI

Сначала займемся «лицом» – внешней частью. Еще ее называют UI (User Interface) – интерфейс пользователя.

Проверяем такие параметры:

1. Дизайн сайта

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

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

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

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

Смотрим на примеры. Пример 1 – сайт компании, которая строит дома под ключ:

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

Попробуем изменить дизайн и добавить ему аккуратности (заметьте, профессионального дизайнера не привлекаем):

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

Второй пример – это случай, когда дизайн сбивает с толку и дает неверное представление о компании:

Первая мысль – это сайт тренажерного зала. Ан-нет, это сайт интернет-магазина спортивных товаров. Будет лучше показать сам товар, а не того, кто его использует. С точки зрения посетителя, на этой картинке какой-то тип качается «моей» штангой (то есть товаром, который я хочу купить). Покажем просто штангу, а заодно поставим в шапку правильный логотип (на исходном сайте он почему-то лишь в середине страницы):

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

2. Навигация

Это меню (основное верхнее, вспомогательные слева и в подвале) и хлебные крошки. Навигация показывает, что есть на сайте – какие товары/услуги предлагает компания и что можно про компанию узнать. Оптимально использовать 1-2 уровня вложенности. Если их больше, то будет сложно ориентироваться.

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

Старайтесь не ставить на одном уровне меню более 6-8 пунктов. Не забывайте, что объем внимания обычного человека – 5-7 объектов.

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

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

Возвращаемся к примерам. На сайте строительной компании было два меню (вверху и слева), мы можем объединить их в одно. Пункты «Услуги» и «Цены» объединим в один раздел «Услуги и цены» – как-то глупо рассказывать про услуги на одной странице, а про их цены – на другой. Пункт «Схема проезда» уберем вообще, схема будет в разделе «Контакты». Разделы «Вакансии», «Партнеры», «Карта сайта» тоже убираем, основной целевой аудитории этого сайта они не нужны. Пункт «Калькулятор» убираем из меню, делаем его отдельным блоком и ставим в правой части сайта.

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

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

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

3. Шапка

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

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

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

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

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

4. Подвал

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

Текущий футер у сайта из первого примера лишен смысла:

Добавим ему пользы:

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

Футер второго примера лишь чуть-чуть информативнее первого:

Сделаем его более «солидным»:

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

5. Контент

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

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

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

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

К примерам. На сайте строительной компании есть страница про ленточный фундамент:

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

В статье обязательно используем фотографии – ведь 50% людей хлебом не корми, а дай только фотки посмотреть, и даже не важно чьи =)

В примере спортивного магазина возьмем страницу о доставке:

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

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

6. Тексты

И еще пару слов отдельно о текстах. Есть 3 важных момента:

1. Конкретика. Тут все просто. Пишем не «в нашей парикмахерской самые низкие цены», а «мужские стрижки от 300 рублей». Представьте, что рекомендуете компанию лучшему другу. Ему вы не скажете «индивидуальный подход», а доходчиво объясните – «закрепим за тобой спеца, он будет сопровождать все этапы работ и согласовывать с тобой». Не стесняйтесь говорить со своими посетителями таким же понятным языком.
2. «Вы получите». Описывайте не то, что вы сделаете, а то, как от этого станет хорошо клиенту. Не «мы подберем вам лучшую путевку», а «вы проведете 10 дней в месте, о котором мечтали».
3. Целевое действие. Увлекшись написанием правильного текста, не забудьте разместить в нем призыв к действию – Позвоните, Напишите, Оставьте заявку, Перейдите в каталог и пр.

Взглянем на страницу с описанием услуг нашего первого примера:

Из конкретики – только список выполняемых работ. Попробуем добавить фактов, выгоду клиента и целевое действие:

И даже гарантию от срыва сроков сюда добавили (слишком уж больное место, и не только в строительстве).

В примере интернет-магазина обратимся к главной странице:

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

Здесь целевое действие – это клик по карточке товара, поэтому каких-то отдельных кнопок нет.

7. Отзывы и кейсы

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

Что делать, если реальных отзывов нет? Стребуйте их со своих клиентов – за скидку, вкусняшку или большое спасибо. Так как мир не без добрых людей, то хотя бы один из десяти согласится дать отзыв о вас (тем более если за скидку), надо только попросить.

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

К примерам. Портфолио от строительной компании. На один объект – всего одна фотография.

Это мало. Как минимум, штук 10 фото на каждый объект – на разных этапах постройки, под разными углами. Плюс краткое описание – где, что и как строили.

Для интернет-магазина в наше время вот так уже пусто:

Взгляд привычно ищет отзывы:

8. Первый экран

Это та часть страницы, которую вы видите в браузере, не прокручивая страницу. То есть открыли сайт – и все, что в окно поместилось – первый экран.

Когда пользователь открывает из поиска сразу 5-7 сайтов, а затем последовательно просматривает их один за другим, он оценивает именно первые экраны. По результатам этой быстрой оценки 3-4 сайта закрываются сразу, остальные изучаются более тщательно.

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

Смотрим на примере. Вспомним первый экран сайта строительной компании:

Чет не зацепило. Попробуем привлечь попаданием в желание пользователя:

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

Теперь первый экран магазина спорттоваров:

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

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

9. Формы

Самая распространенная форма – обратная связь, «напишите нам». Для интернет-магазинов – форма отправки заказа.

Для пользователя работа с формами – не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость печати, а кто-то еще и с телефона). Поэтому чем меньше полей в форме, тем лучше. Хотя правильнее сказать – чем меньше обязательных полей, тем лучше. Можно оставить в форме и 5-6 полей, если обязательны к заполнению только 2 поля. Кто не поленится и заполнит все поля – хорошо, у остальных нужную информацию выспросит менеджер.

Все поля в форме нужно подписать (в 2-3 слова). Можно добавить небольшое пояснение или пример заполнения. Обязательные поля нужно отметить звездочками – это уже давно стало стандартом.

Как пример рассмотрим форму заполнения заявки на расчет стоимости:

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

10. Поиск

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

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

11. Онлайн-консультант

Полезная вещь, если выполнены 2 условия: консультант не навязывается и консультант действительно работает.

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

И не стоит настраивать «выскакивание» окна «Чем я могу вам помочь» через 5 секунд после  того, как пользователь попал на сайт. Он только начал знакомиться с вашим сайтом, и вопросы у него еще не возникли.

Стандартное место кнопки онлайн-консультанта – правый край окна (либо нижний правый угол).

В качестве примера – провокационный вопрос консультанта на сайте Мосигры:

Всплывает сам после просмотра 3-4 страниц сайта и после 20-30 секунд на странице – то есть когда похоже, что человек зашел в тупик  с выбором игры.

12. Виджеты соцсетей

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

Например, покажите отзывы из ВКонтакте:

Такие отзывы вызывают больше доверия. Но важно, чтобы отзывы были свежими.

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

Улучшаем UX

Теперь переходим к скрытой части – к взаимодействию. Это UX (User eXperience) – опыт взаимодействия пользователя.

Смотрим на:

1. Скорость загрузки

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

2. Отсутствие ошибок

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

3. Увеличение картинок по клику

Дайте юзеру рассмотреть побольше картинок в полном размере (фотографии товаров, портфолио и пр.) – и вот он уже «завис» на вашем сайте, а кастрюля начинает исправно поджаривать суп.

4. Валидация форм

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

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

5. Сообщения после отправки форм

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

6. Статусные сообщения и диалоги

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

Перепишите сообщения естественным языком:

7. Email-уведомления

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

8. Динамический контент

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

Например, если человек пришел на сайт просто из поиска, мы покажем ему стандартный вид:

А если он пришел с объявления «Детские спортивные комплексы», то в слайдере мы поставим на первое место тот из слайдов, который имеет отношение к детям, и ниже блок с детскими товарами тоже поставим первым.

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

9. Полезные инструменты

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

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

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

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

Мелочи

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

Из часто встречающегося:

1. А так можно было?

Не всегда посетители понимают, что картинки на странице можно посмотреть в полном размере (увеличить по клику). Простое добавление иконки «лупы» к картинкам решает эту проблему:

2. Адреса картинок и файлов

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

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

3. Кнопка «Наверх»

Актуальна для реально длинных страниц (например, как эта статья). Стандартное место – справа внизу, но может быть и слева (ВКонтакте, Хабр). Изначально кнопка невидима, но появляется, если человек уже прокрутил 1-2 экранов вниз. Я по старинке пользуюсь кнопкой «Home» на клавиатуре, но статистика показывает, что кнопка «Наверх» тоже имеет своих приверженцев.

4. «Приклеенная» шапка

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

Здесь сразу пример и «приклеенной» шапки, и кнопки «Наверх».

Итог

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

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

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

ТОП советов от маркетолога

1. Делайте конкретное предложение в офферах

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

2. Меньше всплывающих окон

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

3. Поработайте с персонажем

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

4. Проработайте мобильную версию сайта

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

Если у Вас есть мобильная версия, то всегда будет, к чему стремиться. Юзабилити можно проверить и оценить, например, с помощью алгоритма Mobile-first Index от Гугл или «Владивосток» от Яндекс.

5. Используйте F-образный шаблон

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

6. Ускорьте загрузку

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

7. Сделайте содержание страницы / контента

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

8. Используйте перелинковку

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

9. Время на ознакомление

Заботьтесь о пользователях — экономьте их время. Если статью необходимо читать 10 минут, то предупредите об этом. Иначе пользователь может расстроиться от того, что не успел осилить материал. Кроме того, предложите пользователю выслать материал на почту, чтобы он прочел его позже.

10. Размещайте важную информацию слева

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

11. Больше пространства

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

12. Добавьте на сайт поиск

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

13. Перевод страниц на другие языки

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

14. Добавьте яркие кнопки

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

15. Сделайте контакты заметными

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

16. Формы обращения и чат-бот

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

17. Отзывы / комментарии посетителей

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

18. Добавьте полезные виджеты

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

Кстати. Буквально в 2 клика с сервисом Formdesigner Вы можете создать крутой калькулятор, который точно сработает. Внутри простой интерфейс и более 30 элементов для форм. Кликайте -> Formdesigner.

19. Используйте «хлебные крошки«

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

20. Метки на страницах

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

21. Используйте уникальные фотографии

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

22. Информативные сообщения об ошибках

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

23. Игровые элементы и легкие анимации

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

Кстати. Самый простой пример геймификации — сайт-квиз. Сделать можно самостоятельно через конструкторы Marquiz или Envybox ( «in-scale» +500 руб. на баланс). Это самые ТОПовые сервисы, с ними создание квиза обойдется в считанные минуты.

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

24. Ссылки на социальные сети

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

25. Поработайте над удобством чтения

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

26. Упростите требования к паролям

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

27. Простота структуры

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

28. Используйте единую цветовую гамму

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

29. Используйте контрастные призывы к действию

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

30. Сделайте описания подробными

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

31. Добавьте топ частых вопросов

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

32. Добавьте онлайн-консультанта

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

Важно. Сделайте общение с клиентами проще и доступнее с помощью онлайн-чата. Благодаря ему вы не потеряете клиентов, получите больше заявок и как следствие увеличите продажи. Кликайте и тестируйте -> jivosite (по помокоду “inscale” 30 дней бесплатно + 5 операторов)

33. Откажитесь от «простыни текста» на главной странице

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

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

34. Настройте геолокацию

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

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

35. Проработайте рубрики

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

36. Сделайте акции яркими

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

37. Используйте инфографику

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

38. Не допускайте ошибок в текстах

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

39. Избегайте непонятных слов

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

Как оценить юзабилити

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

1. Определить проблемы

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

• Частотность конкретных действий. Нажатие кнопки звонка, заполнение формы, отправка сообщения в мессенжер;
• Использование функционала. Работа с платежной системой, переходы по ссылкам, заполнение отзывов, изучение новостей;
• Использование нововведений. Как на кликабельность повлиял редизайн областей, насколько интересны оказались новые функции, насколько новый виджет захватывает внимание.

2. Сформулировать гипотезы

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

Гипотеза 1. «Клиенты не знают об акционных предложениях компании, так как не читают новости». Значит задача юзабилити была в привлечении внимания с акционными предложениям.

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

Гипотеза 3. «Посетители не используют формы обратной связи, так как они не заметны». Задача тестирования заключается в том, чтобы проверить, насколько возросло использование.

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

3. Фокус-группа

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

Задания могут быть по типу «Открыть то-то», «Зайти туда-то», «Найти то-то». Среди основных показателей эффективности можно выделить: эффективность выполнения (справился — не справился), количество ошибок и время выполнения задания. Фиксировать данные можете, как удобно, хоть в Эксель, хоть в блокноте.

4. Опрос целевой аудитории

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

Вы можете создать опрос в ГуглФормах. Там можно настроить разные виды вопросов, создать условия обязательности, использовать графику для наиболее комфортного заполнения анкет. Кроме того, можно скопировать ссылку на форму и отправить ее напрямую респонденту. А далее сервис сам систематизирует результаты опроса.

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

5. А/В-тестирование

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

Есть бесплатный инструмент от Гугл — Content Experiments, который помогает провести А/В -тестирование и оценить эффективность начального варианта страницы и отредактированного.

6. Проверка в специальных программах

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

Название	Бесплатный период	Платный период
AskUsers	Нет	От 4500 ₽
UsabilityHub	Есть	От 3733 ₽
Usabilla	Есть	Нужно запросить демо
VWO	Есть	От 7391 ₽
4Q	Есть	Нужно запросить демо
Feng-GUI	Есть	От 5000 ₽

Показатели во всех сервисах почти одни и те же, так выбирайте самый удобный для себя. Кроме того, есть еще продукт Я.Метрики — WebVisor и можно использовать Гугл Аналитику.

7. Айтрекинг

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

Самое сложное – это интерпретировать полученные данные. Информация обрабатывается специальным программным обеспечением на основе биг даты. В итоге получается три варианта визуализации:

1. Тепловая карта. На тестируемое изображение накладываются результаты в виде цветовых пятен. Чем теплее цвет, тем больше внимания было уделено этому элементу;
2. Туманная карта. Этоподвид тепловой. Изображение заливают чёрным цветом, а точки фиксации остаются прозрачными;
3. Карта перемещений взора. Здесь видно, какие точки привлекли больше внимания пользователя. А также саму схему перемещения взгляда.

Подробнее про айтрекинг читайте и смотрите в нашей статье:

Интересно. Отслеживайте после каких именно рекламных сообщений Вам поступает звонок от клиента. Для этого используйте Коллтрекинг от Callibri. Так вы узнаете самые эффективные рекламные сообщения и сэкономите бюджет Кликайте и тестируйте -> Callibri (по промокоду 76C6IMERUQ +500 руб. на тестирование)

Коротко о главном

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

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

Интересно. Хотите научиться запускать, оптимизировать рекламные кампании в Яндекс.Директе и Google Ads, оптимально расходовать рекламный бюджет и повышать конверсию сайта? Тогда этот курс для Вас. Кликайте по ссылке и читайте подробнее -> Контекстная реклама с нуля.

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter

Категория 1. Управляйте вниманием пользователя

Выделите точку входа в интерфейс

В каждом интерфейсе должна быть чёткая отправная точка. Куда зрители должны посмотреть вначале? Сделайте это очевидным.

Создайте визуальный контраст для заголовков страниц

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

Направляйте пользователей с помощью визуальной иерархии

Избегайте пустых пространств, «запертых» внутри композиции

Комментарий Проектората: эти несколько советов построены на принципе F-паттерна считывания контента. То есть, пользователи читают сверху-вниз слева-направо и дизайнеру следует избегать неожиданных «прыжков» и «развилок» в восприятии. Всё верно, но не стоит забывать, что некоторые языки читаются справа-налево (http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/">http://he.aliexpress.com/). Это раз. А два — интерфейсы, с которыми пользователи работают ежедневно, не обязательно должны быть легко воспринимаемыми. Они должны быть удобными для выполнения задач пользователя. Пример запертого пустого пространства — чаты в fb, которые появляются в правом нижнем углу экрана один за другим по горизонтали. И ничего плохого в этом нет. Профессиональный софт может обладать высоким порогом входа для новых пользователей, но сторицей окупится после его преодоления.

Компонуйте элементы в одну колонку

Перекройте один элемент другим, чтобы подчеркнуть целостность

Проектируйте интерфейс с учётом гештальт-принципов

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

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

Принципы гештальта

Расположите близкие по смыслу функции или пункты меню ближе друг к другу

Переместите заголовки ближе к релевантному тексту

Поместите заголовок в один блок с озаглавленным текстом

Комментарий Проектората: Артемий Лебедев в 2006 году написал параграф Ководства «Теория близости» (http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/">http://www.artlebedev.ru/kovodstvo/sections/136/). В проектировании это до сих пор правило номер один по частоте использования. На второе место мы бы поставили цветовое кодирование. Затем всё остальное.

Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство

Иногда интерфейс видоизменяется прямо на глазах у пользователя. Сделайте эти изменения заметными, но не вводящими в замешательство.

Добавьте анимацию изменений в интерфейсе

Выделите элементы, из-за которых возникла ошибка

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

Уберите или снимите акцент с ненужной информации

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

Затемните фон за поп-апом или модальным окном

На всех изображениях откажитесь от излишних украшений

Уберите ненужные рамки вокруг элементов

Удалите излишние или очевидные инструкции

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

Комментарий Проектората: прекрасные советы! Можем лишь дополнить ссылкой на видео с Дмитрием Сатиным. Это отрывок из выступления «Психология восприятия». 

Покажите, что содержимое есть за границей видимой области

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

Пусть элементы обрезаются границей видимой области

Добавьте тень, чтобы показать глубину

С помощью слов или графики покажите, что ниже есть дополнительное содержимое

Категория 2. Ведите пользователей к цели

Делайте часто используемые функции и важную информацию доступнее пользователям

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

Предлагайте быстрые варианты для поиска
с первых введённых символов

Создавайте значения по умолчанию
в соответствии с самыми частыми запросами

Показывайте полезную информацию
при наведении курсором на объекты

Не прячьте часто используемые функции

Показывайте на дэшбордах важную информацию

Помещайте популярные варианты
в самый верх выпадающих списков

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

Сообщайте о статусах процессов

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

Демонстрируйте состояние прогресса
и оставшееся время до завершения машинных процессов

Демонстрируйте текущее состояние сложных
или растянутых во времени процессов

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

Показывайте количество элементов в категориях

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

Предлагайте несколько путей достижения одной и той же цели

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

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

Предложите выполнять повторяющиеся
функции с помощью клавиатуры

Позвольте перетаскивать элементы курсором

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

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

Сообщайте о требованиях и параметрах интерактивных элементов

Подготовьте пользователей к каждому взаимодействию с интерфейсом. Что им понадобится? Как им перейти к следующему шагу?

Опишите требования к данным,
которые вводят пользователи

Давайте обратную связь и требования к паролю
в режиме реального времени

Сопровождайте элементы форм универсальными обозначениями

Показывайте, какие поля форм обязательны к заполнению

Комментарий Проектората: здесь мы можем лишь пожаловаться на отсутствие внятного термина в русском языке, передающего смысл слова Interaction (дословный перевод: «взаимодействие»).

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

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

Пишите на кнопках, что конкретно произойдёт после нажатия

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

Показывайте, что будет следующим в списке

Используйте «умные» пункты меню, дающие детальную информацию о результатах их использования

Комментарий Проектората: все эти советы хороши с точки зрения маркетинга в первую очередь. Они отвечают на вопрос «что произойдёт, когда я нажму на эту кнопку?» Это снижает уровень неуверенности перед совершением тех или иных действий и повышает конверсии на посадочных страницах.

Награждайте и создавайте чувство уверенности у пользователей, идущих к цели сквозь ваши интерфейсы

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

Соблюдайте соответствие между ссылками
и страницами, на которые они ведут

Награждайте маленькими победами в начале пути

Полосы прогресса начинайте со значений выше 0%

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

Закрывайте главные потребности пользователей

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

Указывайте, открыт или закрыт ваш офис прямо сейчас

Указывайте актуальность ближайших
событий относительно сегодняшнего дня

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

Категория 3: уменьшите умственные усилия ваших пользователей и поддерживайте скорость их движения сквозь интерфейсы

Избавьте пользователей от подсчётов в уме

Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер.

Показывайте оставшееся количество всяких штук

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

Сообщайте о текущем положении пользователя в интерфейсе

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

Выделяйте текущий раздел в меню навигации

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

В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты

Размещайте полезную информацию в начале заголовков страниц

Упрощайте задачи, связанные с выбором

Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор.

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

В поле поиска сразу предлагайте самые распространённые запросы по мере ввода

Не создавайте гигантских категорий в меню навигации

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

Используйте общепринятые интерфейсы в веб-дизайне

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

Используйте общепринятые меню навигации

Помещайте вспомогательные элементы в правый верхний угол

Комментарий Проектората: оба совета без конкретных примеров проектов абсолютно бесполезны. Глядя на второй совет, задаёмся вопросом, а что нам делать, если на нашем проекте присутствуют все перечисленные вещи? Помещать их в правый верхний угол? Нет. Механизмы расстановки элементов по странице гораздо глубже и сложнее, чем может показаться на первый взгляд. Поэтому, подчеркнём лишь часть совета, написанного выше: не занимайтесь креативом, не понимая принципов, по которым создавались общепринятые паттерны в дизайне. Если же вы их понимаете, то кто же, кроме вас, придумает ещё более эффективные паттерны, чем те, которые уже существуют? ;)

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

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

Показывайте сообщения об успешном завершении важных взаимодействий

Выделяйте объекты, на которые пользователь навёл курсор

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

Уменьшайте негативные эффекты во время ожидания

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

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

Синий цвет снижает раздражение (и повышает расслабленность). Когда пользователи смотрят на синие индикаторы загрузки, время для них летит быстрее (
http://repository.ust.hk/ir/bitstream/1783.1-1752/1/jmr01.pdf).

Поддерживайте вовлечённость пользователей во время длинных периодов ожидания

Заранее предотвращайте загрузку файлов, не подходящих по типу или размеру

Показывайте серию возникающих задач целиком

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

Не рассчитывайте на память пользователей

Не заставляйте пользователей хранить всё в памяти. Держите всю уместную информацию у них перед глазами.

Подписи к полям форм всегда должны быть видимы

Размещайте тексты плейсхолдеров вне элементов форм

Добавляйте кнопки «Копировать» рядом с данными, которые нужно переносить в другие поля

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

Избегайте зигзагообразных паттернов движения глаз

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

Группируйте схожую информацию, чтобы помочь пользователям сравнивать объекты

Выравнивайте подписи к полям в формах по правому краю

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

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

Пользователи должны определять, какие элементы интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI, то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры, популяризованные Доном Норманом в его «Дизайне привычных вещей» (
http://www.amazon.com/gp/product/0465050654).

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

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

Используйте иконки и символы, чтобы передать значение взаимодействий

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

Общайтесь с пользователями с помощью знакомых всем слов и символов

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

Разговаривайте на языке пользователя, а не системы

Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне»

Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…»

Предлагайте кнопку перевода для иностранных языков

Используйте цвета, подходящие по смыслу

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

Увеличьте считываемость вашего интерфейса

Большинство пользователей будут продвигаться по интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот, воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого просмотра.

Сокращайте объём параграфов и выделяйте основные мысли

Размещайте важную информацию в начале списковых элементов

Добавляйте чередующиеся горизонтальные полосы в таблицы

Пишите подзаголовки, раскрывающие суть абзацев

Разбивайте текст визуальным разнообразием

Комментарий Проектората: так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит, для самых маленьких они отлично подойдут.

Делайте текст максимально читабельным

Очевидно, что текст обязан быть легко читаемым. Однако, вот несколько дополнительных советов, которые позволят сделать его считываемость ещё более высокой!

Создавайте сильный контраст между текстом и фоном

Выравнивайте большинство текстов по левому краю

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

Используйте единый стиль в интерфейсах

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

Подготовьте руководство по стилю интерфейса

Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа (
http://ux.mailchimp.com/patterns)

Располагайте меню навигации в одних и тех же местах

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

Создавайте красивые, визуально сбалансированные интерфейсы

Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити (Куросу и Кашимура, 1995,
http://dl.acm.org/citation.cfm?id=223680).

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

Используйте контрастирующие шрифты

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

Категория 4: максимизируйте совместимость для всех пользователей и сценариев

Максимизируйте совместимость с учётом уровней знаний и навыков пользователей

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

Используйте вводные интерфейсы в нужном количестве

Существует четыре основных стратегии по созданию вводных интерфейсов:

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

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

Используйте методы карточной сортировки при создании информационной архитектуры

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

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

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

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

Дайте пользователям выбирать способы сортировки данных

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

Используйте метод персонажей для описания процессов работы с интерфейсом от лица разных пользователей

Не запрещайте пользователям открывать страницы в новых вкладках

Комментарий Проектората: решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы. Что касается сортировок и фильтраций, рекомендуем ознакомиться со «старым, но не бесполезным» уроком Егора Камелева по проектированию универсальных каталогов (www.google.com="" url?q="https"">https://www.google.com/url?q=https://http://www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&...">www.youtube.com/watch?v%3DEfQGWz3L2Q4&sa=D&ust=148....">https://www.youtube.com/watch?v=EfQGWz3L2Q4">). А за методом персонажей, если вы о нём не слышали, снова направляем вас в Гугл.

Максимизируйте доступность вашего интерфейса

Сделайте ваш интерфейс доступным для пользователей с ограниченными возможностями. Это не только хорошая практика, но и в некоторых странах повод для получения дополнительных привилегий (
https://en.wikipedia.org/wiki/Americans_with_Disabilities_Act_of_1990).

Используйте семантическую разметку (метки) в HTML5

Одновременно используйте разные индикаторы для выделения информации

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

Комментарий Проектората: семантическая разметка подойдёт не только для людей с ограниченными возможностями. Если она используется, ваши сайты можно будет просматривать в режиме удобного чтения статей, либо перемещаться от блока к блоку с помощью голосового управления (не только, если пользователь слеп, но и, например, если он управляет автомобилем). Второй совет будет сильно зависеть от контекста, но в большинстве случаев его действительно стоит применять. А вот ссылка на материал про 8% мужчин: www.google.com="" url?q="http"">https://www.google.com/url?q=http://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3&sa=D&ust=1483593605518000&usg=AFQjCNEW2_GkX0RQIWK_3K9yckxZ2NfEeQ">http://apfmj.biomedcentral.com/articles/10.1186/s1....">http://apfmj.biomedcentral.com/articles/10.1186/s1.....

Максимизируйте доступность для полей ввода данных и для крайних сценариев

Пользователи должны иметь возможность вводить разнообразные данные без негативных последствий.

Избавьтесь от неожиданно неприятных посланий в автоматически сгенерированных сообщениях

Надпись на левой картинке: «Желаем повеселиться в Освенциме!». Надпись на правой картинке: «Хорошей поездки!».

Используйте элементы форм, которые «съедают» разные форматы данных

Показывайте результаты, которые решают задачи ищущего

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

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

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

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

Создавайте инструкции для разных браузеров

Надпись справа: «Вижу, вы используете Firefox».

На маленьких устройствах используйте выпадающие списки, занимающие весь экран

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

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

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

Предотвратите возможность возникновения ошибок

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

Отключайте кнопки сразу после того, как по ним кликнули

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

Предлагайте такие поля ввода данных, которые не позволят ввести неподходящие значения

Используйте отзывчивые активацию и отключение элементов в формах

Оформляйте текстовые поля так, чтобы они соответствовали вводимым данным

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

Отслеживайте сигналы о том, что пользователь вот-вот допустит ошибку

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

Отслеживайте слова, которые выражают намерение пользователя

Надпись слева: «Ваше сообщение было отправлено».

Надпись справа: «Вы хотели прикрепить файл к сообщению? Вы написали «Я прикрепил», однако на самом деле ничего не прикрепили». И кнопки «Редактировать» и «Отправить».

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

Надпись на левой кнопке: «Купить».

Надпись на правой кнопке: «Купить ещё один экземпляр».

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

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

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

Отделяйте «мощные» функции расстоянием или цветом

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

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

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

Всегда позволяйте пользователям вернуться назад или восстановить страницу в исходное состояние.

Лучше используйте откаты, а не дополнительные подтверждения

Давайте возможность вернуться «на исходную» в рамках любой страницы или функции вашего интерфейса

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

Явно показывайте кнопку «Закрыть» на модальных окнах

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

Минимизируйте негативный эффект от прерванных последовательностей действий

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

Сохраняйте введённые пользователями данные

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

Комментарий Проектората: и снова всё будет зависеть от технических ограничений системы и пользовательских сценариев. Советы хороши, но не универсальны, используйте их с умом.

Увеличивайте размеры подвижных частей и кликабельных зон

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

Увеличивайте кликабельные зоны элементов за счёт прозрачных границ

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

Делайте ссылкой весь контейнер, содержащий пункт меню

Делайте ссылками корневые пункты меню навигаций, элементы списков, и дополнительные иконки

Часто пользователи кликают на некликабельные элементы. Не боритесь с этими ошибками. Вместо этого добавьте этим элементам кликабельность.

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

Показывайте ценные и подбадривающие сообщения об ошибках

Никогда не пишите стандартное сообщение «Произошла ошибка!» Объясните причину её возникновения и, при возможности, пути решения.

Объясняйте причины возникновения ошибок

Надпись слева: «Упс! Произошла ошибка».

Надпись справа: «Упс! Это старый пароль».

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

Надпись слева: «Упс. Произошла ошибка по причине XYZ. Теперь вы сами за себя».

Надпись справа: «Упс. Произошла ошибка по причине XYZ. Вы можете её исправить с помощью ABC. Кликните, чтобы узнать детали».

Избегайте обращений к пользователю на «вы» в сообщениях об ошибках

Надпись слева: «Упс! Вы забыли ввести индекс».

Надпись справа: «Упс! Пожалуйста, введите индекс».

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

Сохраняйте информацию о предыдущих действиях пользователей

Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе.

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

Выделяйте посещённые ссылки другими цветами

Отмечайте, какие элементы пользователи уже просмотрели

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

Анализируйте поведение пользователей на сайте, чтобы обнаруживать проблемы с интерфейсом

Постоянно вносите итерационные улучшения в интерфейс. Для начала воспользуйтесь простыми советами ниже.

Собирайте обратную связь от пользователей в соответствующих местах интерфейса

Отслеживайте увеличение количества ошибок-404 с помощью уведомлений

Выявите страницы, на которых пользователи «топчутся на месте»

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

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

Вы прочитали перевод статьи Ника Коленды «
125 Easy Tweaks to Optimize Your Website’s UX/UI Today».

Автор перевода и комментариев —
Егор Камелев

Ссылка на первоисточник: http://projectorat.ru/125tweaks/