Блоги: заметки с тегом радиокнопки

Синтаксис и автономность подписи элемента интерфейса

Илья Бирман — Sat, 13 Jan 2024 18:04:18 +0500

На вчерашнем семинаре интерфейсного курса разбирали элемент настройки окна:

Здесь нарушен синтаксис. Синтаксически радиокнопки — это набор однородных членов предложения, остальные члены которого даны в общей подписи. Здесь подпись «не открывается» не сочетается с общей подписью «Открывается». Формально мы как бы выбираем между вариантами: открывается влево, открывается вправо, открывается не открывается.

Чтобы исправить синтаксис, нужно все радиокнопки сделать обстоятельствами, то есть чтобы они отвечали на вопрос «как?»:

Стало правильно синтаксически, но возникла другая проблема: неавтономность.

Автономность — это когда для понимания смысла элемента не нужно знать, что находится вокруг. Например, компьютер спрашивает, хотите ли вы удалить файл. Если подтверждающая кнопка называется «Да», то она неавтономна, потому что приходится читать, что спрашивают перед ней. А если кнопка называется «Удалить», то она понятна сама по себе, автономна.

Во втором варианте последняя радиокнопка потеряла автономность. Чтобы понять, что именно «никак», приходится читать общую подпись. А вариант «не открывается» был самодостаточным.

Что же в итоге лучше? Кажется, что удобство важнее формализма, и первый вариант побеждает. Но это ловушка! Нет причин выбирать между плохими вариантами, когда можно найти хороший. Вчера, например, сразу же придумали, что вместо слов можно использовать графику: понятные стрелки в две стороны; крестик между ними.

Обратимость элемента интерфейса

Илья Бирман — Fri, 29 Dec 2023 18:58:39 +0500

Илья Бирман:

Обратимость — свойство элемента управления в интерфейсе, при котором пользователь может в любой момент вернуть его в начальное состояние, а в общем случае — свободно переключать между всеми доступными состояниями. Необратимость, соответственно, когда у элемента есть состояния, в которые после некоторых действий его вернуть нельзя. Хорошо спроектированные элементы обратимы.

Пример необратимого элемента — группа радиокнопок, из которых изначально не выбрана ни одна. После выбора одного из вариантов, его уже невозможно «развыбрать», нет никакого способа вернуть группу в пустое состояние, что создаёт дискомфорт и фрустрацию. В правильной радиогруппе всегда выбран ровно один элемент, в том числе, в начальном состоянии, поэтому она обратима.

Даже если для перехода к следующему шагу обязательно необходимо выбрать какой-то вариант, это не отменяет требования обратимости. Это чисто механический момент, не связанный с ролью элемента. Обратимость работает на уровне элемента, а не внешнего по отношению к нему интерфейса; она влияет на ощущение управляемости. Поле ввода не сопротивляется тому, чтобы из него стёрли все символы, даже если оно обязательное. Любой другой элемент, если он в принципе предполагает «пустое» состояние, должен давать к нему вернуться.

Другой пример необратимости — обозначение незаполненных обязательных полей красной рамкой после расфокуса. Изначально поле выглядит просто пустым; пользователь заходит в него, а потом выходит, так и не заполнив (или заполняет, но потом стирает то, что ввёл). Система обводит поле красной рамкой, подсказывая, что оставить его пустым нельзя. После этого невозможно вернуть поле в начальное «чистое» состояние. Решением могло бы быть плавное затухание красной рамки, чтобы поле вернулось в начальное состояние через секунду.

Думаем дальше № 2 — «Самоутвердился за счёт целого Вольфа Олинса» с Сергеем Стеблиной

Илья Бирман — Fri, 29 Dec 2023 18:00:45 +0500

Илья Бирман:

Записали ещё один выпуск экспериментального подкаста, теперь вот с Сергеем Стеблиной.

Продолжаю не знать, что будет дальше, но уже залил на Мейв безо всякого оформления. Там вроде бы можно подписаться на РСС, в остальное пока не вникал. Там оба выпуска.

0:00	Кринжовое интро про радиокнопки
4:20	Когда пару радиокнопок можно заменить чекбоксом и как вообще обойтись без подобных элементов
8:50	Илья читает неожиданную лекцию про радиокнопки
13:41	Дебильные комбинации элементов в интерфейсах Гугля
16:17	Элементы формы мгновенного и немгновенного действия
19:08	Илья и Серёжа о будущем своих учеников
23:27	Серёжа начал делать схему амстердамского метро, а оно не нужно
28:00	Нужно ли объездить все трамваи, чтобы нарисовать их схему?
31:22	Дизайнеров бесят другие дизайнеры и их работы
39:06	Сломанные кривые в логотипе Вольфа Олинса и плохой дизайн как вызов
44:28	Илья не воспринимает бленду всерьёз
46:29	Адоби покупал-покупал Фигму, да так и не купил
57:43	Проекты, за которые мы бы не взялись по личным соображениям

На интерфейсном курсе: так это кнопка или ссылка? Оказывается, это радиокнопка!

Илья Бирман — Fri, 28 Oct 2022 15:51:00 +0500

Илья Бирман:

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

Участица говорит, что это элемент, чтобы «выбрать». Ах вот оно что. Так значит, там вообще нужны радиокнопки! Вопрос другого участника показывает, в чём проблема неправильного выбора элемента. Целых 11 минут:

Это фрагмент № 76 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 февраля 2022 года.

До 28 октября идёт запись на курс, который пройдёт с 29 октября по 27 ноября.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: представляем выбор внятно радиокнопками

Илья Бирман — Wed, 31 Aug 2022 17:47:27 +0500

Илья Бирман:

Покупателю по умолчанию даётся гарантия на год. Но за день можно увеличить срок гарантии. Как это показать в интерфейсе, чтобы человек понял? 2 минутки:

Это фрагмент № 72 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 4 февраля 2022 года.

До 23 сентября идёт запись на курс, который пройдёт с 24 сентября по 23 октября.

Почитать о курсе

Программа, отзывы, запись

На интерфейсном курсе: редактура привела к радиокнопке

Илья Бирман — Tue, 26 Oct 2021 14:32:36 +0500

Илья Бирман:

В домашке у участницы курса — текст на полях формы. Он длинный, его никто не прочитает. Редактируем — и вдруг приходим к тому, что чекбокс на форме надо поменять на радиокнопки. История о силе редактуры в дизайне интерфейса. 4 минуты:

Это фрагмент № 49 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 19 марта 2021 года.

До 7 ноября идёт запись на курс, который пройдёт с 13 ноября по 12 декабря.

Почитать о курсе

Программа, отзывы, запись

Радиокнопки вместо вкладок

Илья Бирман — Mon, 28 Jun 2021 00:04:45 +0500

Илья Бирман:

В нашей таблице синтаксиса интерфейса есть такой кусочек, где у вкладки зачёркнута функция «выбор»:

О чём речь. Иногда начинающие дизайнеры интерфейса рисуют вкладки для выбора, например в форме заказа делают вкладки «Доставка» (и в ней поля адреса) и «Самовывоз» (и в ней карта точек самовывоза). Ошибка тут в том, что вкладки — это элемент навигации. Переключаясь между табами мы ничего не выбираем; есть как бы и то, и другое, просто мы сейчас смотрим на что-то одно.

Скажем, если мы переключим в настройке вкладку из Desktop в Screen Saver, то это не значит, что мы вместо рабочего стола хотим заставку использовать. Для выбора нужно использовать радиокнопки.

Вчера нашёл пример обратной ошибки:

В Фотошопе вот эти радиокнопки в группе Tone Balance должны быть вкладками. Здесь мы не выбираем, в какой части тонов мы хотим настроить цветовой баланс, как можно было бы подумать. На самом деле, переключение между ними просто показывает CMY-двигунки для соответствующей части тонов; каждая из таких троек бегунков настраивается независимо, а при нажатии на OK применятся они все.

На интерфейсном курсе: физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм

Илья Бирман — Fri, 26 Mar 2021 00:23:26 +0500

Илья Бирман:

Показываю примеры клёвых интерфейсов, взаимодействовать с которыми можно не глядя: радиокнопки (настоящие), джойстики и рукоятки в самолёте, фотоаппарат Фуджифильм:

00:00 Интерфейс радиоприёмника: радиокнопки
02:30 Интерфейс американского военного самолёт
04:14 Интерфейс фотоаппаратов «Фуджифильм»

Это фрагмент № 33 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 25 ноября 2020 года.

До 2 мая идёт запись на курс, который пройдёт с 8 мая по 6 июня.

Почитать о курсе

Программа, отзывы, запись

Табы и радиокнопки

Илья Бирман — Sat, 19 Nov 2016 16:33:10 +0500

Илья Бирман:

Максим Ильяхов обновил Главред: теперь он не только подсвечивает стоп-слова, но и проверяет синтаксис. Между режимами переключают табы:

Но табы — элемент навигации, а не выбора. Переключая табы, мы ожидаем оказаться в другом месте. В данном случае мы остаёмся в том же месте, просто меняется режим. В таком случае правильно использовать радиокнопки:

Рисовать и табы, и радиокнопки можно по-разному, но главное, что их отличает — табы визуально связаны с областью, содержимое которой меняется при переключении. В настройке Мака табы нарисованы как радиокнопки:

Табами их делает размещение на рамке переключаемой ими области.

В Главреде чтобы превратить табы в радиокнопки, достаточно оторвать их от текстовой области. В этом случае будет плохо понятно, что выбрано сейчас, но это другой вопрос.

Ошибку с табами вместо радиокнопок нередко допускают в заданиях участники интерфейсного курса и студенты Школы стажёров, поэтому когда я рассказал про это Максу, мы договорились, что я ещё и пост напишу.