Показываю 7 приемов по улучшению UX для Flipper Zero, чтобы понизить порог входа для новых пользователей и повысить интерес к последующему исследованию устройства для уже существующих.
1. Сделать простыми и понятными меню и первый вход в устройство
Сейчас все меню перегружены большим количеством информации и техническими терминами, в этом сложно разбираться, нужно часто обращаться к документации на сайте. Но можно понизить порог входа новых пользователей через простую подачу информации, например:
Сократить количество пунктов в главном меню путем группировки и дать понятные (не технические) названия объектам и их группам:
«Remote Control» для Infrared и Sub-GHz;
«Cards & Keys» для NFC, RFID и iButton;
GPIO переименовать в Hardware (GPIO);
«Computers» для Bad USB и U2F.
Пример упрощенного меню с помощью группировки и переименования объектов
Спрятать редко используемый функционал под кнопку «More actions», а дополнительную текстовую информацию под кнопку «Info» и выдавать это по запросу пользователя. Также удобно использовать QR-коды со ссылками на подробную документацию на сайте.
Пример упрощения меню для Sub-GHz путем переноса редко используемого функционала под кнопку «More actions», а дополнительной информации в «Info» со ссылкой и QR-кодом на документацию Добавить краткий туториал при первом использовании устройства, чтобы познакомить пользователя с имеющимися возможностями.
Пример приглашения пройти туториал Или предоставлять 2 мода:
для новичков (Newbee) с базовым функционалом и подсказками;
для прошаренных (Pro) с полным функционалом.
Спрашивать у пользователя, какой мод он хочет активировать при первом взаимодействии с устройством, а в настройках давать возможность сменить мод.
Пример окна выбора мода
2. Использовать узнаваемые паттерны дизайна
Flipper Zero это уникальное устройство, которое по-умолчанию подразумевает непростой путь обучения для пользователя. Но этот путь можно облегчить, используя узнаваемые паттерны дизайна, такие как:
1. Общепринятые иконки и терминологию
Например, использовать «More actions» вместо «Extra actions» в меню RFID. «Save», «Set» или «Apply» вместо «OK» при сохранении пин-кода.
Пример использования общепринятых названий кнопкам «More actions» и «Set» вместо «Extra actions» и «OK» в меню RFID и при сохранении пин-кода соответственно. Для выбранного элемента в списке обычно используют иконку галочки, а не «(*)».
Пример с общепринятой иконкой галочки для выбранной опции в меню Flipper Zero и Playdate
2. Узнаваемую структуру
Например, добавить заголовки (крошки) в меню объектов, чтобы пользователь понимал, где именно сейчас находится. Особенно полезно для объектов с похожим набором кнопок, такие как Sub-GHz и 125 kHz RFID.
Пример узнаваемой структуры — наличие заголовков в меню объектов Sub-GHz и 125 kHz RFID Отображать в каждом окне, как вернуться назад — в установке пин-кода и в информационном окне Mifare Classic 1K это не очевидно.
Примеры экранов установки пин-кода и информации о Mifare Classic 1K с отображением кнопки «Back»
3. Предсказуемые способы взаимодействия
К примеру, круглая кнопка «Back» должна всегда возвращать на шаг назад, о чем заявлено в документации, но это правило не работает для всех подтверждающих окон в Settings -> Storage.
Не соответствие документации по поводу работы круглой кнопки «Back», не работает в подтверждающих окнах в ‘Settings -> Storage’ Для переключения On/Off привычно использовать тоггл. Он сразу показывает, что есть всего 2 функции: вкл/выкл.
Пример использования On/Off тоггла в настройках Flipper Zero, iOS и Steam Deck Слово «arrows» в установке ПИН-кода заставляет задуматься, о чем именно идет речь. Хорошо бы добавить иконки стрелок для наглядности.
Наглядное отображение стрелок, которые пользователь может использовать при установке ПИН-кода Обычно, скролл в меню и клавиатуре заканчивается на верхних, нижних и боковых точках. Тогда можно быстро бежать до первых и последних элементов и взаимодействовать с устройством «вслепую». Сейчас у Flipper Zero скролл везде сквозной.
Сквозной скролл в меню и клавиатуре Flipper Zero 
Пример останавливающегося скролла на крайних точках в меню и клавиатуре Steam Deck
3. Следовать единой дизайн-системе
Отсутствие системного подхода по всему интерфейсу заставляет пользователя обучаться на каждом следующем экране, будто он каждый раз открывает новый интерфейс. Это снижает эффективность и скорость работы. В дизайн-систему входят:
1. Стандартизированный набор компонентов
Например, использовать единый стиль иконки для обозначения кнопки «стрелка» на джойстике. Каждая новая иконка заставляет пользователя задумываться, что именно она обозначает.
Пример использования (4-х разных стилей для обозначение одной и той же кнопки на джойстике) единого стиля иконок для стрелок Также использовать единый стиль для заголовков меню.
Пример использования единого стиля для заголовков меню
2. Шаблоны экранов
К примеру, применять единую структуру для подтверждающих окон:
Заголовок;
Описание;
Кнопки «подтвердить» и «отменить».
Пример использования единого шаблона для подтверждающих окон
И единый шаблон для меню. Сейчас где-то имеются заголовки, где-то нет.
Пример использования единого шаблона меню — с заголовками Также шаблон порядка одинаковых экшенов в меню объектов. Например, если взять меню «125 kHz RFID» за основу с порядком экшенов: Read, Saved, Add Manually, Extra Actions, то меню для «NFC» было бы: Read, Extract MF Keys, Saved, Add Manually, Extra Actions.
Пример единого шаблона для похожих меню, как NFC и 125 kHz RFID
3. Единообразие в терминологии
Сейчас присутствует много разных наименования для одинаковых действий:
Read / Learn
Info / About
Cancel / Go back
Delete / Remove
Пример одинаковых наименований для действий
Также в рамках одного объекта используются разные наименования, например, в секции «Infrared», выбираешь добавление «Remote» и сохраняешь «Button» — это путает.
Пример единого наименования объекта на всех окнах в «Infrared» секции
4. Разрешать восстанавливать удаленные объекты
В таких сложных системах важно давать право на ошибку, чтобы пользователь не боялся рисковать и быстрее обучался. Удобно иметь возможность восстановить только что удаленный объект.
Сейчас непонятно, какой именно объект был удален, так как в окне написано только «Deleted», и нет возможности отменить действие.
5. Давать быструю и понятную обратную связь
Важно своевременно давать понятную обратную связь в виде визуальных подсказок, отображающих пользователям результат их действий. Это снижает тревожность и повышает доверие к системе.
Например, при сканировании карты RFID непонятно, процесс сканирования еще происходит или уже все прошло и нет смысла ждать дальше.
Пример бесконечной анимации процесса сканирования RFID карты А во время использования функции «Drag&Drop» выбранный элемент почти не отличается от невыбранного, то есть действие тяжело считывается. Можно добавить больше отступа от края экрана и стрелку, указывающую на активированный элемент, что дает более очевидную визуальную подсказку.
Пример наглядного отображения выбранного элемента в «Drag&Drop» функционале
6. Предоставлять гибкие настройки меню
Сейчас в системе много различных настроек, что позволяет легко адаптировать интерфейс под себя. Но не хватает возможности скрывать редко используемые объекты в меню, чтобы они не мешали при каждом взаимодействии с устройством.
7. Геймифицировать
Такой масштабный и непростой в изучении продукт важно разбавлять дофаминовыми вбросами в виде ачивок и наград, что будет стимулировать пользователя продолжать изучение. Это можно делать через:
1. Отслеживание прогресса обучения/исследования
У устройства имеется персонаж — дельфин, которого можно прокачивать. Переход на новый уровень происходит за счет частого использования устройства, но нет понимания, что именно нужно сделать, чтобы получить бол��ше баллов? Сколько баллов мне осталось набрать до следующего уровня? Где посмотреть историю уже заработанных баллов?
2. Вызовы и соревнования
Сейчас из ачивок только уровни, достижением которых нельзя ни с кем поделиться. От этого нет никакой мотивации в достижении нового уровня. Хорошо бы добавить ачивки под различные действия, например, за успешное копирование 13-ти NFC карт или за копирование 5-ти разных типов устройств. Также хочется иметь возможность делиться своими достижениями с сообществом, вести статистику на официальном сайте флиппера, например, как у Steam Deck.
Заключение
Flipper Zero — масштабный продукт с уникальным функционалом, для изучение которого пользователям нужно приложить немало усилий. Но этот процесс можно заметно упростить, если опираться на проверенные UX-правила и оставлять сложность только там, где она действительно оправдана.
