Pull to refresh

Comments 14

Добавлю еще про «лево-право». Положение «вправо» чаще ассоциируется с «включенностью» тумблера. Видел как-то на сайте стильный тумблер, но при этом с перепутанным «лево-право», долго тупил и переключал, прежде чем понял, что логика отзеркалена.
Возможно, и не является частой проблемой, но упомянуть стоит. Опять же, есть и страны, где текст читается справа-налево… Там с интуитивным положением может быть другая ситуация.
Использовал react и material-UI.
Сделал форму с переключателями и кнопкой «Сохранить».

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

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

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

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

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

Очень помогает material дизайн от Google.
Любые действия, такие как нажатие кнопки, включение или выключение переключателя, имеют свой визуальный эффект.
И вместе с отключением элементов формы, индикацией загрузки делают действительно интерфейс отзывчивым.
Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.

Включение и отключение "действия" — это тоже переключение бинарного состояния. Не понимаю я этой высосанной из пальца разницы. Это просто два варианта визуализации одного и того же контрола — переключателя. Есть ещё третий вариант — "отжимаемые кнопки", которые в активном состоянии, например, заливаются светом. И, честно говоря, последний вариант мне нравится больше, за счёт как правило кастомной иконки.


Кроме того, не вижу причины делать разную визуализацию радиокнопок и чекбоксов. Радиокнопки — частный случай связанных чекбоксов. А связаны они могут быть самыми причудливыми способами. Обычно эта связь понятна из контекста. В тех же случаях, когда она не очевидна (обычно всякие тупые анкеты), то там и различие между квадратиками и кругличками не сильно спасает и зачастую делают приписку, что "можно выбрать несколько вариантов".

С тех как переключатели вошли в моду я так и не смог к ним привыкнуть. В них концептуально заложена та же самая проблема, что и в выключателях света: приходится угадывать где «вкл», а где «выкл». И как автор статьи верно подметил — костыли типа текстовых подсказок не всегда помогают — если написано «off», то остается сомнение — «currently off» vs «turn off». Конечно, можно увеличить количество костылей, можно размещать подсказки не внутри, а слева и справа, можно спасать положение цветовой сигнализацией (серенькое — выкл, яркое — вкл), но генетически заложенная проблема переключателей до конца не исчезнет.

Другое дело — флажки. Изумительно компактный и интуитивно понятный интерфейс, понятный без слов. Изобретенный еще до начала эры компьютеров.
Согласен. Может быть, обладаете информацией, откуда вообще эти тумблеры появились (неужели apple?) и для чего? Неужели для кого-то квадратик с галочкой не интуитивно понятен? Были какие-то исследования, или маркетологи всё решили сами?
Да, Apple. Вероятно, идея была в том, что на тач-экране сделать случайное нажатие значительно проще, чем случайный свайп.
В переключателях для выделения включенного состояния желательно использовать яркие цвета в стиль сайта или приложения, а для выключенного — серые и мрачные. В примере, где «Цвет шрифта обозначает текущее положение» я бы не сразу понял состояние переключателя.
А как тогда отображать случай недоступности этого переключателя? Например он зависим от ещё одного переключателя и пока тот выключен, этот недоступен. Да и типичная проблема современных «дизайнёров» всплывает: серый текст на сером фоне, который хорошо смотрится, но плохо читается.

Раз нельзя использовать, то и нечего показывать. :-)

Обычно показывать надо, чтоб пользователь видел зависимости. Иначе возникает проблема: пользователь ищет фичу A, но из-за фичи B её не видно и он предполагает, что программа просто не может в A.

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


Ну или давайте более конкретные примеры обсуждать.

«Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем» — это не закон Фиттса, это здравый смысл. А закон Фиттса звучит совсем по-другому, как минимум там ещё упоминается расстояние до объекта. Это фраза как минимум дилетантская.
В целом не согласна, что у переключателей и галочек разные предназначения. По мне, эти элементы друг друга дублируют.
В первый раз я столкнулся с «переключателями», купив сенсорный телефон. В нормальных интерфейсах я привык так: то что нажимается (кнопки), надо нажимать, то что двигается (ползунки) — двигать. Не помню уже, сколько времени прошло, пока я понял, что для переключения сдвижного переключателя в него надо просто ткнуть (при этом на двигающийся по нему палец он не реагирует) — но до сих пор я считаю эту логику абсолютно наркоманской.

И да, в то время как наши космические корабли вовсю уходят от скевоморфизма, мы заменяем довольно-таки абстрактные чекбоксы слабоинтуитивной и кривой имитацией физического тумблера. Стыдно должно быть.
Sign up to leave a comment.

Articles