Руководство по юзабилити сайтов на Falcon Space

Введение

В данном руководстве мы рассмотрим различные способы, как сделать интерфейс личного кабинета пользователя максимально простым, понятным и удобным для пользователя с помощью средств платформы 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://falconspace.ru/tst-master

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стилизация позволяет сделать таблицу более простой в анализе. Отмечайте проблемные моменты красным (badge badge-danger), а позитивные зеленым (badge badge-success).

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

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

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

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

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

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

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

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

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

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

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

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

• kanban - канбан доска с возможностью перетаскивания по колонкам https://falconspace.ru/tst-kanban
• calendar - полноценный календарь (как Google Calendar) https://falconspace.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

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

Более подробно про сравнение PWA и нативного мобильного приложения

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

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

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

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

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

Заключение 

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

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

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