Pull to refresh

Comments 56

Ситигиду и его не информативным кнопкам в меню настроек посвящается…
Пришлось думать, чтобы понять, что это означает. Плохо, что не сразу очевидно.
согласен, вы меня прямо опередили =)
не понятно к чему относится переключатель, к чему относится текст жирным, графическое и цветовое решение кнопок далеко не интуитивно
У нас в проекте сделано вот так



Т.е. комбинированы 1 и 2 пункты опроса (отображается состояние и действие).
Слово «Включено» можно опустить и оставить галочку. Отключить то, что не включено невозможно.
Вы сейчас думаете как программист. Такой подход хорош если вы делаете продукт для программистов и близких к IT людей.
Попробуйте представить себя домохозяйкой, которая совершенно не представляет что может означать галочка в данном случае. А текст «Включено» четко показывает состояние опции даже для человека, вчера севшего за компьютер (в отключенном виде, соотв, вместо галочки другой символ, и текст «Отключено» серый и слегка затемнен).
Убирать нули после запятой и домохозяйка, ага :)) Программисты думают обычно: «Надо все устройство наружу» и в данном случае ваш вариант программистский.
> Убирать нули после запятой и домохозяйка, ага :))

Такой элемент управления используется в админке интернет-магазина для настройки отображения цены и веса. Соотв, рулить им может человек, вполне далекий от IT. Термин «домохозяйка» был взят просто в качестве иллюстрации (хотя, среди клиентов попадаются и такие).
Кстати, еще можно поменять название на «Нули после запятой» и сделать «Есть» зеленым цветом и ссылка «нет». Это еще проще будет, и галочек не нужно. И от технических терминов «включить-выключить» избавитесь. Тут не включается-выключается, а показывается-скрывается.
Да, кстати, это похоже на диалоговое окошко подтверждения отмены чего-либо (где одна из кнопок «отмена»).

В общем, куча разных коннотаций (например, зелёным цветом может отображаться «рекомендованность» того или иного состояния и т.д.). Их все надо учитывать при проектировании интерфейса.
сплошное подчёркивание означает переход на другую страницу. Лучше оформить как кнопку или подчеркнуть пунктиром
Сплошное подчеркивание означает гиперссылку, тэг <A>; гиперссылка может и на ту же страницу вести, через хэш. Пунктир — признак всплывающей подсказки, т.е. <abbr> или <acronym>. Кнопка — элемент формы, по смыслу она хорошо подходит, но из стиля выбивается напрочь.
М, поправочка — подчеркивание может быть и подчеркиванием самим по себе, <u>, как средство выделения текста. А гиперссылке обычно сопутствует изменение цвета текста.
Сейчас, чтобы открыть форму ответа вам, я нажал ссылку, подчёркнутую пунктиром.

Да, подчёркивание — это гиперссылка, но с развитием аякса gриходится как-то визуально отделять действия с перезагрузкой страницы или без неё. Принято сплошным подчёркивать переходы, обрывисто(точками или пунктиром) — аякс.
Всплывающие подсказки в наше время вообще отделяют от слов. Например, ставят после слова маленький вопросительный знак?
а вставили именно ссылку =)
Сейчас во времена аякса удобно различать, можно ли по этой ссылке создать новую вкладку, или нет. Раздражает, когда кликаешь по ссылке со сплошным подчёркиванием, а оказывается, что это чисто javascript-«ссылка» (и наоборот, когда открыть в текущем таргете нельзя, но к этому уже привыкли, да и мало таких извращенцев среди крупных сайтов).

Поэтому, если «отключить» — это обычное GET действие, то можно оставить одинарное подчёркивание, а если чисто javascript, то пунктир.
А ноль — это положение в данный момент, или так будет, если на него передвинуть ползунок?
Если судить по iOS, то «в данный момент».
мне нравится как это реализуется в андроиде — меняется текстовое описание
А мне — не очень, т.к. не очень консистентно это сделать. Пример:

1.
Режим в самолёте: [ ]
Подпись: «Отключить все беспроводные соединения» (это хорошо)

переключаем:
Режим в самолёте: [v]
Подпись: "" (отсутствует; вопрос: что будет, если снять галку?)

2.
Мобильный интернет: [ ]
Подпись: «Подлкючиться к интернету» (и снять n рублей, но это уж пользователь сам догадается)

переключаем:

Мобильный интернет: [v]
Подпись: «Использовать телефон для передачи данных, когда связь по Wi-Fi недоступна» (и что, это произойдёт, когда снимешь галку?)

И т.п., причём во многих пунктах описание не влезает при портретной ориентации. Кю.

Второй вариант это скорее не переключатель, а кнопка выполнения действия, которая изменяется в зависимости от состояния системы. Для того что бы восстановить это самое состояние пользователю необходимо будет проводить лишние умственные действия, что не есть хорошо.
Плюс переключатели в UI всё-таки пришли из реального мира, в котором они ведут себя согласно первому варианту.
Зависит от ситуации.
Если в каком мастере (т.е. где переключатель будет применен логически позднее, одновременно с другими настройками, например) — то «включИТЬ»/«выключИТЬ».
Если в окне настройки, когда переключатель отображает текущее состояние, либо если состояние меняется сразу в момент переключения — «включеНО»/«выключеНО».
Согласен, что зависит от ситуации, но в другом ключе:
1) Если переключатель отображается как 2 варианта с указанием активного (radiobuttons) — то он должен отображать текущее состояние
2) Если переключатель совмещенный (кнопка Play/Pause в Windows Media Player), то он должен отображать команду, которая будет выполнена при щелчке на него.

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

Проблема «переключателей-кнопок» в другом — они не позволяют сразу определить все множество возможных действий. Вот откуда вы знаете, что у кнопки «Play/Pause» нет третьего назначения? :)
Традиционная галка несет намного большую информативность, чем переключатель такого рода (как на картинке выше).
И мне кажется что нужно избегать, по возможности, такого «дизайнерского» хода.
Согласен, такие переключатели еще на всяких старых лампах смущали как раз именно своим состоянием. Так что может с точки зрения замыкания-размыкания цепи это было удобно, но не для людей. Плох тот контроллер, над которым надо задумываться.
При чем галочка у всех вызывает правильные ассоциации. Как собственно и крестик.
А еще галочка более гибка — тут тебе и вкл\выкл и да\нет и т.п. При чем она в принципе может иметь любой цвет — и все равно будет понятно ее смысл.
Переключатель — текущее состояние, «галка» — выполняемое действие. Ситуации различные могут быть на самом деле. Нужно поставить себя на место пользователя и подумать, будет ли ему с первого взгляда ясно что делает ваш контрол.
Поспорю. Вы считает со словами «Включить WiFi» должна стоять галка?
Нет. Содержимое текста зависит от типа контрола, а не наоборот.
от типа или состояния?
Скажу так, все зависит от стиля UI, от контекста. На некоторых формах и галку можно сделать, а где то неуместно будет смотреться. В общем, ответ на вопрос топика неоднозначен. То, что написал в первом предложении первого комментария, это скорее для более общего случая.
UFO just landed and posted this here
UFO just landed and posted this here
А зря минусуете. Как пример, у меня дома все выключатели со светодиодом: горит свет — светодиод горит, свет выключен — светодиод «тлеет», электричество отключили — светодиод не горит. Достаточно одного взгляда, чтобы понять состояние, и никаких надписей. Уверен, можно сделать нечто подобное и в других областях.
В виртуальных синтезаторах компьютерных в отдельных синтах этот светодиод еще и кнопка по совместительству. Кликнул раз — загорелось, еще раз — потухло. Минус в том, что не с первого раза ясно, что его можно кликнуть, но он хорошо окупается минималистичностью и ясностью потом.
В самолётах для этого есть кнопка: «проверить сигнализацию» или что-то вроде этого. При нажатии загораются лампочки там, где они не перегорели (и, соответственно, где можно что-то переключить, при условии, что самолёт исправен). :)
На самом деле не так важно, что написано на переключателе. Важно как он выглядит. Если пользователь с ходу не задумываясь может понять назначение переключателя, то он выполнен правильно.
Очень хорошо про переключатели написано у Джеффри Раскина, в главе «Режимы». Кому интересно, можно с легкостью найти в гугле текст книги «Интерфейс: новые направления в проектировании компьютерных систем» и почитать. Все действительно зависит от ситуации и конкретного способа/выключателя. Автор книги как раз и описывает ситуации с примерами, когда переключатель может приводить к серьезной путанице, и как можно от этой путаницы избавиться.

Вообще книга замечательная. Кому интересно тема проектирования интерфейсов, очень рекомендую.
Считаю, что переключатель должен показывать и текущий выбор и выполняемое действие. Причём так, чтобы одно не путать с другим. Иначе всегда будет путаница.
Реализации могут быть различными. Например так, как это показали в комментарии повыше (текст + ссылка).
Мне нравится, как это сделано в Твиттере (кнопка Follow/Unfollow). В «спокойном» состоянии кнопка отображает текущее состояние (сори за каламбур), а если навести на нее мышку, отображает действие.
Да как угодно обозначайте, только не сокращайте надписи!
На скриншоте музыка включена или звуки? Догадаться можно, но не сразу.
судя по кнопке-команде «Сброс прогресса» (вряд ли он происходит в момент скриншота), то расшифровка верхних кнопок «Звуки выключить» и «Музыка включить».

Но, наверное, интеллект разработчика отличается от м моего, поэтому либо звуки на самом деле выключены, а музыка включена (это скорее всего), либо автор — нерусский (или машинный перевод).

Я угадал?
Второй вариант верный. Я для себя объясняю так: МузыкА выключена/включена, а не МузыкУ выключить/включить. А разработчики как раз русские, так что всё нормально.
Тогда почему сброса прогресса не наблюдается (ни ETA, ни прогрессбара сброса прогресса и т.п.)? :) В общем, самое главное, предположение по поводу интеллекта подтвердилось, так что я удовлетворён. :)

В некоторых (гораздо более сложных и ответственных) интерфейсах, кстати, так и приходится принимать решение: «так, на этой кнопке написано [выкл.], но я знаю, что авторы ненатуралы, поэтому знаю, что здесь подразумевается включить… включаю… {так и есть | упс, выключилось.}».

Так что вариант со слайдером ( habrahabr.ru/blogs/ui/129976/#comment_4305462 ) или аналогичным составным элементом управления — реально стоящая штука.
allter "… Я для себя объясняю так..."

В том то и дело что не нужно что бы пользователь себе что-то объяснял, нужно что бы он сразу понимал.
Я бы предположил, что музыка играет когда мы смотрим на это меню, а если нажать на звуки, будут какие-то тематические звуки. Это как лучший показатель у выключателя света — горящая/не горящая в комнате лампочка.
Все уже давно придумано. Обычный чекбокс идеальный переключатель. И радиобаттон для выбора из нескольких вариантов. Для нескольких состояний еще хорошо подходит слайдер с несколькими фиксированными значениями(размеченной шкалой) и текстовым выводом текущего состояния, ошибиться просто нельзя.
Не всегда дизайн проекта позволяет использовать "… Обычный чекбокс.."
Говоря «обычный» я имел ввиду «функционально обычный», а оформление конечно можно менять.
Избегать переключателей (если этого нельзя сделать — исключить неоднозначность любой ценой). А остальное без разницы.
Sign up to leave a comment.

Articles