Comments 56
Ситигиду и его не информативным кнопкам в меню настроек посвящается…
Неплохо же сделано, например.


Пришлось думать, чтобы понять, что это означает. Плохо, что не сразу очевидно.
У нас в проекте сделано вот так

Т.е. комбинированы 1 и 2 пункты опроса (отображается состояние и действие).

Т.е. комбинированы 1 и 2 пункты опроса (отображается состояние и действие).
Слово «Включено» можно опустить и оставить галочку. Отключить то, что не включено невозможно.
Вы сейчас думаете как программист. Такой подход хорош если вы делаете продукт для программистов и близких к IT людей.
Попробуйте представить себя домохозяйкой, которая совершенно не представляет что может означать галочка в данном случае. А текст «Включено» четко показывает состояние опции даже для человека, вчера севшего за компьютер (в отключенном виде, соотв, вместо галочки другой символ, и текст «Отключено» серый и слегка затемнен).
Попробуйте представить себя домохозяйкой, которая совершенно не представляет что может означать галочка в данном случае. А текст «Включено» четко показывает состояние опции даже для человека, вчера севшего за компьютер (в отключенном виде, соотв, вместо галочки другой символ, и текст «Отключено» серый и слегка затемнен).
Убирать нули после запятой и домохозяйка, ага :)) Программисты думают обычно: «Надо все устройство наружу» и в данном случае ваш вариант программистский.
> Убирать нули после запятой и домохозяйка, ага :))
Такой элемент управления используется в админке интернет-магазина для настройки отображения цены и веса. Соотв, рулить им может человек, вполне далекий от IT. Термин «домохозяйка» был взят просто в качестве иллюстрации (хотя, среди клиентов попадаются и такие).
Такой элемент управления используется в админке интернет-магазина для настройки отображения цены и веса. Соотв, рулить им может человек, вполне далекий от IT. Термин «домохозяйка» был взят просто в качестве иллюстрации (хотя, среди клиентов попадаются и такие).
Кстати, еще можно поменять название на «Нули после запятой» и сделать «Есть» зеленым цветом и ссылка «нет». Это еще проще будет, и галочек не нужно. И от технических терминов «включить-выключить» избавитесь. Тут не включается-выключается, а показывается-скрывается.
сплошное подчёркивание означает переход на другую страницу. Лучше оформить как кнопку или подчеркнуть пунктиром
Сплошное подчеркивание означает гиперссылку, тэг <A>; гиперссылка может и на ту же страницу вести, через хэш. Пунктир — признак всплывающей подсказки, т.е. <abbr> или <acronym>. Кнопка — элемент формы, по смыслу она хорошо подходит, но из стиля выбивается напрочь.
М, поправочка — подчеркивание может быть и подчеркиванием самим по себе, <u>, как средство выделения текста. А гиперссылке обычно сопутствует изменение цвета текста.
Сейчас, чтобы открыть форму ответа вам, я нажал ссылку, подчёркнутую пунктиром.
Да, подчёркивание — это гиперссылка, но с развитием аякса gриходится как-то визуально отделять действия с перезагрузкой страницы или без неё. Принято сплошным подчёркивать переходы, обрывисто(точками или пунктиром) — аякс.
Всплывающие подсказки в наше время вообще отделяют от слов. Например, ставят после слова маленький вопросительный знак?
Да, подчёркивание — это гиперссылка, но с развитием аякса gриходится как-то визуально отделять действия с перезагрузкой страницы или без неё. Принято сплошным подчёркивать переходы, обрывисто(точками или пунктиром) — аякс.
Всплывающие подсказки в наше время вообще отделяют от слов. Например, ставят после слова маленький вопросительный знак?
а вставили именно ссылку =)
Сейчас во времена аякса удобно различать, можно ли по этой ссылке создать новую вкладку, или нет. Раздражает, когда кликаешь по ссылке со сплошным подчёркиванием, а оказывается, что это чисто javascript-«ссылка» (и наоборот, когда открыть в текущем таргете нельзя, но к этому уже привыкли, да и мало таких извращенцев среди крупных сайтов).
Поэтому, если «отключить» — это обычное GET действие, то можно оставить одинарное подчёркивание, а если чисто javascript, то пунктир.
Поэтому, если «отключить» — это обычное GET действие, то можно оставить одинарное подчёркивание, а если чисто javascript, то пунктир.
А ноль — это положение в данный момент, или так будет, если на него передвинуть ползунок?
мне нравится как это реализуется в андроиде — меняется текстовое описание
А мне — не очень, т.к. не очень консистентно это сделать. Пример:
1.
Режим в самолёте: [ ]
Подпись: «Отключить все беспроводные соединения» (это хорошо)
переключаем:
Режим в самолёте: [v]
Подпись: "" (отсутствует; вопрос: что будет, если снять галку?)
2.
Мобильный интернет: [ ]
Подпись: «Подлкючиться к интернету» (и снять n рублей, но это уж пользователь сам догадается)
переключаем:
Мобильный интернет: [v]
Подпись: «Использовать телефон для передачи данных, когда связь по Wi-Fi недоступна» (и что, это произойдёт, когда снимешь галку?)
И т.п., причём во многих пунктах описание не влезает при портретной ориентации. Кю.
1.
Режим в самолёте: [ ]
Подпись: «Отключить все беспроводные соединения» (это хорошо)
переключаем:
Режим в самолёте: [v]
Подпись: "" (отсутствует; вопрос: что будет, если снять галку?)
2.
Мобильный интернет: [ ]
Подпись: «Подлкючиться к интернету» (и снять n рублей, но это уж пользователь сам догадается)
переключаем:
Мобильный интернет: [v]
Подпись: «Использовать телефон для передачи данных, когда связь по Wi-Fi недоступна» (и что, это произойдёт, когда снимешь галку?)
И т.п., причём во многих пунктах описание не влезает при портретной ориентации. Кю.
Второй вариант это скорее не переключатель, а кнопка выполнения действия, которая изменяется в зависимости от состояния системы. Для того что бы восстановить это самое состояние пользователю необходимо будет проводить лишние умственные действия, что не есть хорошо.
Плюс переключатели в UI всё-таки пришли из реального мира, в котором они ведут себя согласно первому варианту.
Плюс переключатели в UI всё-таки пришли из реального мира, в котором они ведут себя согласно первому варианту.
Зависит от ситуации.
Если в каком мастере (т.е. где переключатель будет применен логически позднее, одновременно с другими настройками, например) — то «включИТЬ»/«выключИТЬ».
Если в окне настройки, когда переключатель отображает текущее состояние, либо если состояние меняется сразу в момент переключения — «включеНО»/«выключеНО».
Если в каком мастере (т.е. где переключатель будет применен логически позднее, одновременно с другими настройками, например) — то «включИТЬ»/«выключИТЬ».
Если в окне настройки, когда переключатель отображает текущее состояние, либо если состояние меняется сразу в момент переключения — «включеНО»/«выключеНО».
Согласен, что зависит от ситуации, но в другом ключе:
1) Если переключатель отображается как 2 варианта с указанием активного (radiobuttons) — то он должен отображать текущее состояние
2) Если переключатель совмещенный (кнопка Play/Pause в Windows Media Player), то он должен отображать команду, которая будет выполнена при щелчке на него.
(с) Алан Купер
1) Если переключатель отображается как 2 варианта с указанием активного (radiobuttons) — то он должен отображать текущее состояние
2) Если переключатель совмещенный (кнопка Play/Pause в Windows Media Player), то он должен отображать команду, которая будет выполнена при щелчке на него.
(с) Алан Купер
вот это все и вносит путаницу, особенно когда в рамках одного проекта используются оба варианта
Традиционная галка несет намного большую информативность, чем переключатель такого рода (как на картинке выше).
И мне кажется что нужно избегать, по возможности, такого «дизайнерского» хода.
И мне кажется что нужно избегать, по возможности, такого «дизайнерского» хода.
Согласен, такие переключатели еще на всяких старых лампах смущали как раз именно своим состоянием. Так что может с точки зрения замыкания-размыкания цепи это было удобно, но не для людей. Плох тот контроллер, над которым надо задумываться.
Переключатель — текущее состояние, «галка» — выполняемое действие. Ситуации различные могут быть на самом деле. Нужно поставить себя на место пользователя и подумать, будет ли ему с первого взгляда ясно что делает ваш контрол.
Поспорю. Вы считает со словами «Включить WiFi» должна стоять галка?
Нет. Содержимое текста зависит от типа контрола, а не наоборот.
А зря минусуете. Как пример, у меня дома все выключатели со светодиодом: горит свет — светодиод горит, свет выключен — светодиод «тлеет», электричество отключили — светодиод не горит. Достаточно одного взгляда, чтобы понять состояние, и никаких надписей. Уверен, можно сделать нечто подобное и в других областях.
В виртуальных синтезаторах компьютерных в отдельных синтах этот светодиод еще и кнопка по совместительству. Кликнул раз — загорелось, еще раз — потухло. Минус в том, что не с первого раза ясно, что его можно кликнуть, но он хорошо окупается минималистичностью и ясностью потом.
На самом деле не так важно, что написано на переключателе. Важно как он выглядит. Если пользователь с ходу не задумываясь может понять назначение переключателя, то он выполнен правильно.
Очень хорошо про переключатели написано у Джеффри Раскина, в главе «Режимы». Кому интересно, можно с легкостью найти в гугле текст книги «Интерфейс: новые направления в проектировании компьютерных систем» и почитать. Все действительно зависит от ситуации и конкретного способа/выключателя. Автор книги как раз и описывает ситуации с примерами, когда переключатель может приводить к серьезной путанице, и как можно от этой путаницы избавиться.
Вообще книга замечательная. Кому интересно тема проектирования интерфейсов, очень рекомендую.
Вообще книга замечательная. Кому интересно тема проектирования интерфейсов, очень рекомендую.
Считаю, что переключатель должен показывать и текущий выбор и выполняемое действие. Причём так, чтобы одно не путать с другим. Иначе всегда будет путаница.
Реализации могут быть различными. Например так, как это показали в комментарии повыше (текст + ссылка).
Реализации могут быть различными. Например так, как это показали в комментарии повыше (текст + ссылка).
Писал как-то на эту тему пост в жж wiggum-ralph.livejournal.com/298482.html
Мне нравится, как это сделано в Твиттере (кнопка Follow/Unfollow). В «спокойном» состоянии кнопка отображает текущее состояние (сори за каламбур), а если навести на нее мышку, отображает действие.
Да как угодно обозначайте, только не сокращайте надписи!
На скриншоте музыка включена или звуки? Догадаться можно, но не сразу.

На скриншоте музыка включена или звуки? Догадаться можно, но не сразу.

судя по кнопке-команде «Сброс прогресса» (вряд ли он происходит в момент скриншота), то расшифровка верхних кнопок «Звуки выключить» и «Музыка включить».
Но, наверное, интеллект разработчика отличается от м моего, поэтому либо звуки на самом деле выключены, а музыка включена (это скорее всего), либо автор — нерусский (или машинный перевод).
Я угадал?
Но, наверное, интеллект разработчика отличается от м моего, поэтому либо звуки на самом деле выключены, а музыка включена (это скорее всего), либо автор — нерусский (или машинный перевод).
Я угадал?
Второй вариант верный. Я для себя объясняю так: МузыкА выключена/включена, а не МузыкУ выключить/включить. А разработчики как раз русские, так что всё нормально.
Тогда почему сброса прогресса не наблюдается (ни ETA, ни прогрессбара сброса прогресса и т.п.)? :) В общем, самое главное, предположение по поводу интеллекта подтвердилось, так что я удовлетворён. :)
В некоторых (гораздо более сложных и ответственных) интерфейсах, кстати, так и приходится принимать решение: «так, на этой кнопке написано [выкл.], но я знаю, что авторы ненатуралы, поэтому знаю, что здесь подразумевается включить… включаю… {так и есть | упс, выключилось.}».
Так что вариант со слайдером ( habrahabr.ru/blogs/ui/129976/#comment_4305462 ) или аналогичным составным элементом управления — реально стоящая штука.
В некоторых (гораздо более сложных и ответственных) интерфейсах, кстати, так и приходится принимать решение: «так, на этой кнопке написано [выкл.], но я знаю, что авторы ненатуралы, поэтому знаю, что здесь подразумевается включить… включаю… {так и есть | упс, выключилось.}».
Так что вариант со слайдером ( habrahabr.ru/blogs/ui/129976/#comment_4305462 ) или аналогичным составным элементом управления — реально стоящая штука.
allter "… Я для себя объясняю так..."
В том то и дело что не нужно что бы пользователь себе что-то объяснял, нужно что бы он сразу понимал.
В том то и дело что не нужно что бы пользователь себе что-то объяснял, нужно что бы он сразу понимал.
Я бы предположил, что музыка играет когда мы смотрим на это меню, а если нажать на звуки, будут какие-то тематические звуки. Это как лучший показатель у выключателя света — горящая/не горящая в комнате лампочка.
Все уже давно придумано. Обычный чекбокс идеальный переключатель. И радиобаттон для выбора из нескольких вариантов. Для нескольких состояний еще хорошо подходит слайдер с несколькими фиксированными значениями(размеченной шкалой) и текстовым выводом текущего состояния, ошибиться просто нельзя.
Не всегда дизайн проекта позволяет использовать "… Обычный чекбокс.."
Избегать переключателей (если этого нельзя сделать — исключить неоднозначность любой ценой). А остальное без разницы.
Sign up to leave a comment.
Информативность переключателей