Руководство по usability

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

Совместно с 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Время прочтения: 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 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.

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

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

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

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

Но надо понимать, что понятие «красота» субъективно — оно основано на личных предпочтениях и вкусах, и то, что может привлечь одного посетителя, может оттолкнуть другого, не так ли?

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

Не только дизайн, но и такие термины, как юзабилити (usability, удобство использования), UI (user interface, пользовательский интерфейс) и UX (User eXperience, пользовательский опыт) — это составляющие любого интернет-магазина, от которых зависит, насколько успешен он будет и станет ли он драйвером роста вашего бизнеса.

Содержание статьи

Разница между UI-дизайном и UX-дизайном

UI-дизайн
UX-дизайн

Рекомендации по разработке UI и UX интернет-магазина

Рекомендации по разработке эффективного пользовательского интерфейса
Рекомендации по разработке эффективного пользовательского опыта

Рекомендации по UI/UX для различных типов клиентов

Охотники за выгодой
Властный покупатель (ориентированный на продукт)
Исследователь
Странствующий покупатель
Лояльный покупатель

Вместо заключения: как угодить всем?

Разница между UI-дизайном и UX-дизайном

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

UI-дизайн

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

Важность брендового гайдлайна

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

Пример брендбука

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

Фирменный шрифт Парка Горького 

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

Руководство по UI-стилю

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

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

Лучшие программы для UX и UI-дизайна в 2019 году

UX-дизайн

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

Разработка персон клиентов (моделей покупателей) 

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

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

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

Разработка маршрутов путешествия пользователей

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

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

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

Как онлайн-магазины используют подсказки, чтобы подтолкнуть к покупке

Рекомендации по разработке UI и UX интернет-магазина

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

Рекомендации по разработке эффективного пользовательского интерфейса:

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

Рекомендации по разработке эффективного пользовательского опыта:

• начните с маркетинга и понимания своей целевой аудитории. Плавный и лишенный разного рода барьеров и препятствий маршрут — ключевое звено в юзабилити интернет-магазина, поэтому, если вы не понимаете, как привлечь пользователей и что управляет их поведением, вы не сможете создать сайт, который будет отвечать их потребностям и ожиданиям;
• привлекайте пользователей, создавая хорошее первое впечатление — как визуально, так и с точки зрения содержания. Ваша контент-стратегия должна быть согласованной, резонировать с интересами конечных пользователей и непосредственно следовать маршруту путешествия основных категорий покупателей;
• создавайте контент, который будет вызывать эмоции. Люди тянутся к другим людям, им важны их личные истории и опыт. Оживить сайт поможет удачно подобранный стиль ваших текстов, фотографии и видео реальных людей — людей, стоящих за созданием вашего продукта или услуги, и тех, кто использует ваш продукт или услугу. Не забывайте слова Майи Энджелоу (Maya Angelou), американской писательницы: «Люди забудут то, что вы сказали, но они никогда не забудут, что вы заставили их почувствовать»;
• тестируйте каждый сценарий на предмет его плавности и бесшовности: могут ли пользователи найти то, что им нужно, на каждом этапе своего путешествия? загружаются ли страницы интернет-магазина достаточно быстро или они заставляют посетителей уходить и продолжать свои поиски в другом месте? Старайтесь измерить успех каждого этапа путешествия: это важно, чтобы понять, насколько эффективно вы провели работу с каждой точкой касания.

Не бесите пользователей: 10 типовых ошибок юзабилити в интерфейсе

Рекомендации по UI/UX для различных типов клиентов

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

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

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

Охотники за выгодой

Что их интересует: купоны на скидку, промо-акции, скидки, распродажи, бесплатная доставка.

Лояльность к бренду: низкая.

Вероятность совершения покупки: средняя.

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

UI/UX-рекомендации для охотников за выгодой:

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

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

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

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

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

Властный покупатель (ориентированный на продукт)

Что его мотивирует:

• конкретная потребность (поменять то, что у них уже есть, или купить что-то абсолютно новое);
• необходимость.

Лояльность к бренду: низкая/средняя.

Вероятность совершения покупки: средняя.

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

UI/UX-рекомендации для властных покупателей:

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

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

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

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

Исследователь

Что их мотивирует:

• конкретная цель, но не конкретный продукт или бренд;
• собрать максимум информации.

Лояльность бренду: низкая/средняя.

Вероятность покупки: средняя.

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

UI/UX-рекомендации для исследователей:

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

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

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

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

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

Странствующий покупатель

Что мотивирует странствующего покупателя: никаких конкретных нужд или желаний нет.

Лояльность бренду: низкая/средняя. 

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

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

UI/UX-рекомендации для странствующих покупателей:

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

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

Лояльный покупатель

Что мотивирует лояльного покупателя:

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

Лояльность к бренду: высокая.

Вероятность совершения покупки: средняя/высокая.

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

UI/UX-рекомендации для лояльных покупателей:

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

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

10 шагов к более эффективному удержанию клиентов

Вместо заключения: как угодить всем?

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

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

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

Прокачайте свой онбординг!

По материалам: businessclan.com , inchoo.net