Comments 17
Векторные формы выглядят, конечно, чище. Но вы пробовали ваши предложения отрисовать в тех пикселях, что доступны на экране? Галочку в меню, тоглы в стиле iOS, мелкий шрифт в прогресс баре уровня? Все это кажется не получится нормально сделать на реальном экране устройства.
Тут как будто претензии к UI, а не к UX. Проблема и её решение показано в виде тоггла, да. Но идея то как будто в том, чтобы лишний раз не заходить в пункт меню, чтобы выключить/включить какую-либо настройку. Она не обязательно может быть реализована тогглом.
P.S. Отбой, там и так не нужно для переключения проваливаться в пункт.
Мой посыл не про чистоту за счет векторных форм, а про помощь пользователю в быстром считывании информации за счет привычных элементов интерфейса. Стиль галочки и тоггла может быть любым. В устройстве отрисованы маленькие стрелки для кнопки back, думаю, галочки и тогглы тоже получится сделать.
Есть вероятность, что мелкий текст в прогресс-баре не будет читаться. Проблему с отсутствием понимания «Сколько баллов мне осталось до следующего уровня? Как мне их заработать?» можно решить несколькими разными способами, я привела только один в качестве примера.
Монохромный тоггл вообще очень спорная идея. Советую немного познакомиться с UX в Израиле, где направление письма, смайлики, тогглы и всё остальное перевёрнуты. Ваша жизнь больше не будет прежней, а в работе получится избежать досадных ляпов типа "ну очевидно, что все читают слева направо, и тогглы работают так же"
Вообще, как мне кажется, текст всегда понятнее чем эти вот иероглифы.
Я терпел до монохромных тогглов. У меня нет этого девайс, нет желания его покупать, но почему-то появилась сильнейшая потребность не допустить появления монохромных тогглов. Галочки вместо радио-баттон - почти смогли меня сподвигнуть на написание комментария, но тогглы просто добили.
Стиль тоггла может быть любым. Основной посыл в том, что картинки (иконки, тогглы, чек-боксы) читаются гораздо быстрее, чем текст.
ииии... этот посыл не верен.
Я что-то не понял, где автор хоть раз сказала о пикселях? Она не кодирует эти биты на экране. Она работает в 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"
Кто-то вам уже намекнул, поставив минус, что столь категоричность - не признак истины в последней инстанции.
На личном примере: с возрастом появились нарушения зрения, иногда картинка начинает двоиться. Если это чекбокс - даже расплывчатый и двоившийся я распознаю без проблем, отмечен он или нет. А тоггл - представьте, что он разъезжается по горизонтали, и где переключатель, слева или справа? а тем более на монохромном экране, черный фон - это вкл или выкл? я не уверен
Во времена Win98/2000/XP и например в мобильных телефонах тех времен был отраслевой стандарт:
круглая точка в полом кругу это Radio button - выбор одного варианта из нескольких.
галочка в квадрате это отдельный включаемый вариант. Можно ставить галочки в соседние пункты одновременно.
В текстовых меню которые рисовались только текстовыми элементами моноширинным шрифтом radio button изображались звездочкой в круглых скобках, вот так: (*). А галочки изображались иксом в квадратных скобках, вот так: [x]. И в консольных приложениях так делают со времен Turbo vision и до сих пор. Другое дело, что обычные пользователи уже не помнят turbo vision и никодга не конфигурировали ядро linux в текстовой оболочке на основе ncurses.
Вообще вы правы, проблема такая есть. При этом если заменить лево/право на вверх/вниз, то у нас считается вверх = включено, а вот в США все не так. В самолетах боинг в кабине у всех тумблеров положение включено = вниз. Поэтому надписи ON и OFF наиболее безошибочны. Точнее мне так казалось пока какой-то эксперт по UX не сделал ON/OFF кнопкой с надписью, так, что надпись на кнопке показывает то действие, которое произойдет если на нее нажать. В итоге перед тобой кнопка на ней написано на ней например OFF, но это значит, что сейчас все включено но если нажать, то выключится.
Вывод - либо сделать как угодно, и пользователь поймет и привыкнет (все уже привыкли к этим выключателям влево/вправо которые пришли из ифона), либо делать многословно: писать "is on"/"is off". Или "turn off"/"turn on" для последнего "креативного варианта".
Для начала я бы шрифт сменил )
На что-то такое
А потом уж все остальное.
Ибо читаемость того, что на картинках, скажем так - не очень.
Есть очень простое правило для малого разрешения - если в изображении/глифе можно что-то выкинуть без ущерба для распознавания - выкидывайте - это повысит скорость общего узнавания и понимания.
Про тогглы - это боль (даже для больших экранов - а какой стейт - это включено???), на маленьком разрешнии - боль в кубе, вместо этого нужно использовать чекбокс.
Ну примерно половина пунктов не просто сомнительные, а откровенно бесячие.
Зачем лезть в узкоспециальный продукт с мерками масс-маркета - решительно непонятно.
Кристина, огромное вам спасибо за эту статью!
Отличные замечания, поправив которые можно сделать продукт лучше. Мне особенно понравилась часть про унификацию нейминга. То что вы даёте примеры - бесценно.
Требования к качественному UI везде одинвковые: и в узкоспециализированом продукте и в масс-макете.
Таких статей очень не хватает в русскоязычном сегменте, было бы классно почитать ещё подобные разборы российских разработок.
Кристина, привет! Статья противоречивая потому что некоторые предложения весьма полезны, а другие бесят. Например унификация имен действий, заголовок и отображение "back" из пункта два. А некоторые вещи сильно подбешивают: например, группировка пунктов ценой увеличения глубины меню и прятание некоторых функций в more actions.
Еще замечание про туториал: он должен быть, но для сложных устройств он должен быть доступен из меню всегда а не показываться один раз и пропадать.
Про различие галочек и кружочков я уже написал выше.
P.S. Флиппера у меня нет. Брал пару раз у друга склонить домофонные ключи и бесцельно потыкать в более сложные карты и пульты (бесцельно потому что они не клонятся флиппером) поэтому с UX флиппера знаком мало. Но вроде все понятно было.
Добрый день! Я ожидала, что статья окажется противоречивой, и было интересно почитать мнение других людей, особенно, постоянных пользователей продукта.
В статье перечислены проблемные точки, с которыми я столкнулась при первом использовании, и мои фантазии по их решению. Понимаю, что в таком типе интерфейса много технических ограничений + потребности ЦА могут сильно отличаться от моих обывательских (я не отношусь к ЦА, но было интересно поиграться этим устройством).
Например, группировкой меню мне хотелось сократить количество пунктов главного меню, которое выглядит массивным. Но также в пункте 6 предлагаю добавить возможность настраивать меню под себя. Это 2 разных варианта решения одной проблемы.
Спасибо за комментарии, мне интересно посмотреть на интерфейс флиппера с разных сторон и получить новые знания. Также рада, что какие-то предложения видятся полезными =)
Улучшаю UX во Flipper Zero