{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блог Ильи Бирмана: заметки с тегом радиокнопки", "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.", "_rss_language": "ru", "_itunes_email": "ilyabirman@ilyabirman.ru", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/radioknopki\/", "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/radioknopki\/json\/", "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "6203", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/syntax-autonomy-radio\/", "title": "Синтаксис и автономность подписи элемента интерфейса", "content_html": "

На вчерашнем семинаре интерфейсного курса<\/a> разбирали элемент настройки окна:<\/p>\n

\n\"Открывается:\n<\/div>\n

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

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

\n\"Открывается:\n<\/div>\n

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

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

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

Что же в итоге лучше? Кажется, что удобство важнее формализма, и первый вариант побеждает. Но это ловушка! Нет причин выбирать между плохими вариантами, когда можно найти хороший. Вчера, например, сразу же придумали, что вместо слов можно использовать графику: понятные стрелки в две стороны; крестик между ними.<\/p>\n", "summary": "На вчерашнем семинаре интерфейсного курса разбирали элемент настройки окна", "date_published": "2024-01-13T18:04:18+05:00", "date_modified": "2024-01-13T18:00:12+05:00", "tags": [ "автономность", "радиокнопки", "синтаксис интерфейса", "элементы интерфейса" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/syntax-autonomy-radio-1@2x.png", "_date_published_rfc2822": "Sat, 13 Jan 2024 18:04:18 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6203", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/syntax-autonomy-radio-1@2x.png", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/syntax-autonomy-radio-2@2x.png" ] } }, { "id": "6187", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/reversibility\/", "title": "Обратимость элемента интерфейса", "content_html": "

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

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

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

Другой пример необратимости — обозначение незаполненных обязательных полей красной рамкой после расфокуса. Изначально поле выглядит просто пустым; пользователь заходит в него, а потом выходит, так и не заполнив (или заполняет, но потом стирает то, что ввёл). Система обводит поле красной рамкой, подсказывая, что оставить его пустым нельзя. После этого невозможно вернуть поле в начальное «чистое» состояние. Решением могло бы быть плавное затухание красной рамки, чтобы поле вернулось в начальное состояние через секунду.<\/p>\n", "summary": "Обратимость — свойство элемента управления в интерфейсе, при котором пользователь может в любой момент вернуть его в начальное состояние, а в общем случае — свободно переключать между всеми доступными", "date_published": "2023-12-29T18:58:39+05:00", "date_modified": "2024-01-13T18:21:36+05:00", "tags": [ "пользовательский интерфейс", "радиокнопки", "элементы интерфейса" ], "_date_published_rfc2822": "Fri, 29 Dec 2023 18:58:39 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6187", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "6189", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/think-on-2\/", "title": "Думаем дальше № 2 — «Самоутвердился за счёт целого Вольфа Олинса» с Сергеем Стеблиной", "content_html": "

Записали ещё один выпуск экспериментального подкаста<\/a>, теперь вот с Сергеем Стеблиной.<\/p>\n

Продолжаю не знать, что будет дальше, но уже залил на Мейв<\/a> безо всякого оформления. Там вроде бы можно подписаться на РСС, в остальное пока не вникал. Там оба выпуска.<\/p>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n
0:00<\/td>\n Кринжовое интро про радиокнопки<\/td>\n <\/tr>\n
4:20<\/td>\n Когда пару радиокнопок можно заменить чекбоксом и как вообще обойтись без подобных элементов<\/td>\n <\/tr>\n
8:50<\/td>\n Илья читает неожиданную лекцию про радиокнопки<\/td>\n <\/tr>\n
13:41<\/td>\n Дебильные комбинации элементов в интерфейсах Гугля<\/td>\n <\/tr>\n
16:17<\/td>\n Элементы формы мгновенного и немгновенного действия<\/td>\n <\/tr>\n
19:08<\/td>\n Илья и Серёжа о будущем своих учеников<\/td>\n <\/tr>\n
23:27<\/td>\n Серёжа начал делать схему амстердамского метро<\/a>, а оно не нужно<\/td>\n <\/tr>\n
28:00<\/td>\n Нужно ли объездить все трамваи, чтобы нарисовать их схему?<\/td>\n <\/tr>\n
31:22<\/td>\n Дизайнеров бесят другие дизайнеры и их работы<\/td>\n <\/tr>\n
39:06<\/td>\n Сломанные кривые в логотипе Вольфа Олинса и плохой дизайн как вызов<\/td>\n <\/tr>\n
44:28 <\/td>\n Илья не воспринимает бленду всерьёз<\/td>\n <\/tr>\n
46:29<\/td>\n Адоби покупал-покупал Фигму, да так и не купил<\/td>\n <\/tr>\n
57:43<\/td>\n Проекты, за которые мы бы не взялись по личным соображениям<\/td>\n <\/tr>\n<\/table>\n", "summary": "Записали ещё один выпуск экспериментального подкаста, теперь вот с Сергеем Стеблиной", "date_published": "2023-12-29T18:00:45+05:00", "date_modified": "2024-01-13T18:21:11+05:00", "tags": [ "дизайн", "Думаем дальше", "Иллюстратор", "подкаст", "пользовательский интерфейс", "радиокнопки", "транспортные схемы", "Фигма", "Фотошоп", "элементы интерфейса" ], "_date_published_rfc2822": "Fri, 29 Dec 2023 18:00:45 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6189", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "5887", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-76\/", "title": "На интерфейсном курсе: так это кнопка или ссылка? Оказывается, это радиокнопка!", "content_html": "

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

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

\n