Показываю 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-правила и оставлять сложность только там, где она действительно оправдана.
Комментарии (16)
Goron_Dekar
01.09.2025 08:00
Монохромный тоггл вообще очень спорная идея. Советую немного познакомиться с UX в Израиле, где направление письма, смайлики, тогглы и всё остальное перевёрнуты. Ваша жизнь больше не будет прежней, а в работе получится избежать досадных ляпов типа "ну очевидно, что все читают слева направо, и тогглы работают так же"
Вообще, как мне кажется, текст всегда понятнее чем эти вот иероглифы.
holodoz
01.09.2025 08:00Я терпел до монохромных тогглов. У меня нет этого девайс, нет желания его покупать, но почему-то появилась сильнейшая потребность не допустить появления монохромных тогглов. Галочки вместо радио-баттон - почти смогли меня сподвигнуть на написание комментария, но тогглы просто добили.
kristinazima Автор
01.09.2025 08:00Стиль тоггла может быть любым. Основной посыл в том, что картинки (иконки, тогглы, чек-боксы) читаются гораздо быстрее, чем текст.
proneta
01.09.2025 08:00Я что-то не понял, где автор хоть раз сказала о пикселях? Она не кодирует эти биты на экране. Она работает в UI-среде. Выбрала тогглы и правильно сделала. Последние годы всё идет к новому UI. Сейчас везде требования о ARIA-доступности. Видимость и удобство даже для слепых.
Кристина, ваша статья просто мигнитом притягивет полуслепых любителей чекбоксов и хейтеров из 70-х : "дайте нам чекбокосов, плохо видны тогглы".
Статья о малых экранах. И тогглы придуманы именно для них. В мобильном браузере -- тогглы. Да у меня даже в часах тогглы ! Наверное, MS и начала свой поход на древнюю текстовую WORD-разметку именно из-за жалоб, что хватит уже чекбоксов Второй Мировойы. Вся Win 11 подчиняется модному Fluent Design, она вся на тогглах. Возьмите твикер O&O ShutUp10. У него в коде одни тогглы исключительно. Сейчас тогглам широкая дорога. Студенты в 20 лет берут эту WinUI + FluentUI и штампуют твикеры для настройки Win пачками.
Кристина , сочувствую -- ваши фанаты не понимают, что вы не выкидываете и не добавляете 1 пиксель из тогглов или чекбоксов. Вы работаете в готовом UI.
А изобретателю аксиомы "Если можно, то выкидывайте" порекомендую съездить в Редмонд в MS и задвигать ее там, что ему отгрузили в UI лишних пикселей.
Спецу ниже , кому не дает спать "еврейский вопрос", предлагаю почитать курсы для студентов-ортодоксов -- dir="rtl" в Fluent 2 закладено.Полностью поддерживаю Кристи в ее стратегию "Only Toggle"
vadimk91
01.09.2025 08:00Кто-то вам уже намекнул, поставив минус, что столь категоричность - не признак истины в последней инстанции.
На личном примере: с возрастом появились нарушения зрения, иногда картинка начинает двоиться. Если это чекбокс - даже расплывчатый и двоившийся я распознаю без проблем, отмечен он или нет. А тоггл - представьте, что он разъезжается по горизонтали, и где переключатель, слева или справа? а тем более на монохромном экране, черный фон - это вкл или выкл? я не уверен
Nick0las
01.09.2025 08:00Во времена Win98/2000/XP и например в мобильных телефонах тех времен был отраслевой стандарт:
круглая точка в полом кругу это Radio button - выбор одного варианта из нескольких.
галочка в квадрате это отдельный включаемый вариант. Можно ставить галочки в соседние пункты одновременно.
В текстовых меню которые рисовались только текстовыми элементами моноширинным шрифтом radio button изображались звездочкой в круглых скобках, вот так: (*). А галочки изображались иксом в квадратных скобках, вот так: [x]. И в консольных приложениях так делают со времен Turbo vision и до сих пор. Другое дело, что обычные пользователи уже не помнят turbo vision и никодга не конфигурировали ядро linux в текстовой оболочке на основе ncurses.
Nick0las
01.09.2025 08:00Вообще вы правы, проблема такая есть. При этом если заменить лево/право на вверх/вниз, то у нас считается вверх = включено, а вот в США все не так. В самолетах боинг в кабине у всех тумблеров положение включено = вниз. Поэтому надписи ON и OFF наиболее безошибочны. Точнее мне так казалось пока какой-то эксперт по UX не сделал ON/OFF кнопкой с надписью, так, что надпись на кнопке показывает то действие, которое произойдет если на нее нажать. В итоге перед тобой кнопка на ней написано на ней например OFF, но это значит, что сейчас все включено но если нажать, то выключится.
Вывод - либо сделать как угодно, и пользователь поймет и привыкнет (все уже привыкли к этим выключателям влево/вправо которые пришли из ифона), либо делать многословно: писать "is on"/"is off". Или "turn off"/"turn on" для последнего "креативного варианта".
ionicman
01.09.2025 08:00Для начала я бы шрифт сменил )
На что-то такое
А потом уж все остальное.
Ибо читаемость того, что на картинках, скажем так - не очень.
Есть очень простое правило для малого разрешения - если в изображении/глифе можно что-то выкинуть без ущерба для распознавания - выкидывайте - это повысит скорость общего узнавания и понимания.
Про тогглы - это боль (даже для больших экранов - а какой стейт - это включено???), на маленьком разрешнии - боль в кубе, вместо этого нужно использовать чекбокс.
dom1n1k
01.09.2025 08:00Ну примерно половина пунктов не просто сомнительные, а откровенно бесячие.
Зачем лезть в узкоспециальный продукт с мерками масс-маркета - решительно непонятно.
Gordon01
01.09.2025 08:00Кристина, огромное вам спасибо за эту статью!
Отличные замечания, поправив которые можно сделать продукт лучше. Мне особенно понравилась часть про унификацию нейминга. То что вы даёте примеры - бесценно.
Требования к качественному UI везде одинвковые: и в узкоспециализированом продукте и в масс-макете.Таких статей очень не хватает в русскоязычном сегменте, было бы классно почитать ещё подобные разборы российских разработок.
Nick0las
01.09.2025 08:00Кристина, привет! Статья противоречивая потому что некоторые предложения весьма полезны, а другие бесят. Например унификация имен действий, заголовок и отображение "back" из пункта два. А некоторые вещи сильно подбешивают: например, группировка пунктов ценой увеличения глубины меню и прятание некоторых функций в more actions.
Еще замечание про туториал: он должен быть, но для сложных устройств он должен быть доступен из меню всегда а не показываться один раз и пропадать.
Про различие галочек и кружочков я уже написал выше.
P.S. Флиппера у меня нет. Брал пару раз у друга склонить домофонные ключи и бесцельно потыкать в более сложные карты и пульты (бесцельно потому что они не клонятся флиппером) поэтому с UX флиппера знаком мало. Но вроде все понятно было.
kristinazima Автор
01.09.2025 08:00Добрый день! Я ожидала, что статья окажется противоречивой, и было интересно почитать мнение других людей, особенно, постоянных пользователей продукта.
В статье перечислены проблемные точки, с которыми я столкнулась при первом использовании, и мои фантазии по их решению. Понимаю, что в таком типе интерфейса много технических ограничений + потребности ЦА могут сильно отличаться от моих обывательских (я не отношусь к ЦА, но было интересно поиграться этим устройством).
Например, группировкой меню мне хотелось сократить количество пунктов главного меню, которое выглядит массивным. Но также в пункте 6 предлагаю добавить возможность настраивать меню под себя. Это 2 разных варианта решения одной проблемы.
Спасибо за комментарии, мне интересно посмотреть на интерфейс флиппера с разных сторон и получить новые знания. Также рада, что какие-то предложения видятся полезными =)
nik_the_spirit
Векторные формы выглядят, конечно, чище. Но вы пробовали ваши предложения отрисовать в тех пикселях, что доступны на экране? Галочку в меню, тоглы в стиле iOS, мелкий шрифт в прогресс баре уровня? Все это кажется не получится нормально сделать на реальном экране устройства.
idegree
Тут как будто претензии к UI, а не к UX. Проблема и её решение показано в виде тоггла, да. Но идея то как будто в том, чтобы лишний раз не заходить в пункт меню, чтобы выключить/включить какую-либо настройку. Она не обязательно может быть реализована тогглом.P.S. Отбой, там и так не нужно для переключения проваливаться в пункт.
kristinazima Автор
Мой посыл не про чистоту за счет векторных форм, а про помощь пользователю в быстром считывании информации за счет привычных элементов интерфейса. Стиль галочки и тоггла может быть любым. В устройстве отрисованы маленькие стрелки для кнопки back, думаю, галочки и тогглы тоже получится сделать.
Есть вероятность, что мелкий текст в прогресс-баре не будет читаться. Проблему с отсутствием понимания «Сколько баллов мне осталось до следующего уровня? Как мне их заработать?» можно решить несколькими разными способами, я привела только один в качестве примера.