{ "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\/dizayn-saytov\/", "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/dizayn-saytov\/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": "6512", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/mobile-desktop-recognizability\/", "title": "Взаимоузнаваемость мобилы-десктопа", "content_html": "

До какой степени дизайн может меняться при адаптации под мобилу?<\/p>\n

У меня есть такой критерий: мобильный и десктопный дизайны должны быть взаимоузнаваемы. Если я пользовался сайтом на компьютере, а потом зашёл с телефона, всё должно быть в ожидаемых местах. Ну и наоборот.<\/p>\n

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

Я не согласен с идеей разделения сценариев. Это когда рассуждают в духе: «На мобиле обычно люди смотрят на бегу, поэтому им важнее раздел X, чем раздел Y, так что давайте поставим его выше». Тут нарушается принцип взаимоузнаваемости.<\/p>\n

Можно поставить дизайн десктопа и мобилы рядом и задать себе вопрос: можно ли сказать, что это одно и то же, просто как бы в разном масштабе? человек, знакомый с одним дизайном, будет уверенно ориентироваться во втором? Если нет, я бы попросил переделать.<\/p>\n", "summary": "До какой степени дизайн может меняться при адаптации под мобилу?", "date_published": "2025-08-03T18:13:35+03:00", "date_modified": "2026-03-22T20:28:29+03:00", "tags": [ "адаптив", "дизайн сайтов", "пользовательский интерфейс" ], "_date_published_rfc2822": "Sun, 03 Aug 2025 18:13:35 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6512", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "6300", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/grusha\/", "title": "Висит груша, нельзя скушать: проблема дизайна", "content_html": "

Разберём проблему в дизайне сайтов, которую можно назвать «висит груша, нельзя скушать». Смысл в том, что тебе что-то показывают или о чём-то рассказывают, но взять это нужно в каком-то другом месте.<\/p>\n

\n\"\"\n<\/div>\n

Это фрагмент студенческой работы, дизайн сайта службы доставки. Написано: «Доставляем хрупкие вещи». Допустим, мне надо доставить хрупкую вещь. Текст идеально попадает в мою потребность, я ваш клиент! Но тут нет никакой кнопки или ссылки, это просто пассивый блок. Я должен сам разобраться, где и как оформить заявку. В данном случае в другом конце страницы есть кнопка «Рассчитать», которая открывает форму, где нужно будет указать, что вещь хрупкая.<\/p>\n

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

Ещё бывает такая структура сайта, когда есть отдельно страница о продукте, а отдельно какой-то интернет-магазин, где продукт уже можно купить. Всякие банки и мобильные операторы так любят делать: ты читаешь промостраницу о тарифе или вкладе, но не можешь просто подключить себе — надо обязательно сперва залогиниться и где-то в дебрях личного кабинета найти то же самое. Я вроде когда-то писал о таком, но не могу найти.<\/p>\n

Если вы показываете в одном месте, а даёте в другом, то вы теряете конверсию на ровном месте.<\/p>\n", "summary": "Разберём проблему в дизайне сайтов, которую можно назвать «висит груша, нельзя скушать». Смысл в том, что тебе что-то показывают или о чём-то рассказывают", "date_published": "2024-06-01T20:02:27+03:00", "date_modified": "2024-06-01T20:02:21+03:00", "tags": [ "дизайн сайтов", "пользовательский интерфейс" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/deliver-fragile-things.jpg", "_date_published_rfc2822": "Sat, 01 Jun 2024 20:02:27 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6300", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/deliver-fragile-things.jpg" ] } }, { "id": "6284", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ne-stat-klientom\/", "title": "Не стать клиентом", "content_html": "

Бизнесы ставят на своих сайтах кнопку «Стать клиентом». А надо ставить кнопки «Взять кредит», «Записаться на пробный урок», «Вызвать электрика» или «Заказать доставку». Потому что ни у одного человека в мире нет задачи «стать клиентом»! У людей есть задачи взять кредит, записаться на пробный урок, вызвать электрика или заказать доставку.<\/p>\n

Это вы внутри себя называете людей «клиентами». Но люди так о себе не думают. Через надпись «Стать клиентом» вы транслируете людям безразличие к их задачам и сфокусированность на собственных.<\/p>\n", "summary": "Бизнесы ставят на своих сайтах кнопку «Стать клиентом». А надо ставить кнопки «Взять кредит», «Записаться на пробный урок», «Вызвать электрика» или «Заказать доставку»", "date_published": "2024-05-02T09:51:06+03:00", "date_modified": "2024-05-02T09:51:01+03:00", "tags": [ "дизайн сайтов" ], "_date_published_rfc2822": "Thu, 02 May 2024 09:51:06 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6284", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "6241", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/pageable-galleries-suck\/", "title": "Листаемые галереи товаров — это плохо", "content_html": "

Иногда у вас что-то не влезает в ширину и вы делаете листалку:<\/p>\n

\n\"\"\n<\/div>\n

Если вы пытаетесь так показать товары, то это неудачный дизайн.<\/p>\n

Дело в том, что листать — сложно. Прокрутка — самое приятное и дешёвое действие, для которого у нас есть выделенные жесты и элементы управления на всех устройствах. А для листания приходится целиться в какие-то маленькие стрелочки (Фиттс негодует), да ещё и кликать потом.<\/p>\n

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

Крутить в бока в принципе нормально, если ты смотришь с телефона или Мака, но у многих людей мышки с вертикальными колёсами — и в их мире нет нормальной горизонтальной прокрутки.<\/p>\n

Бывает, листание делают автоматическим:<\/p>\n

\n\"\"\n<\/div>\n

В таком дизайне товары, банеры или фотографии сменяют друг друга через некоторые промежутки времени. Здесь проблема в неуправляемости: бывает, ты пытаешься что-то разглядеть или прочитать на одной картинке, а её вдруг сменяет другая. Иногда это лечат тем, что автолистание замораживается, если навести мышку, то это ж ещё догадаться надо, что оно так сработает!<\/p>\n

Кроме того, непонятно, что надо сделать, чтобы оно таки пролисталось. Тут тоже много вариаций: стрелочки для ручного листания могут появляться при наведении либо сами эти полоски могут кликаться (в любом случае снова привет от Фиттса). Всё это — это явные костыли.<\/p>\n

Ещё хуже — когда листание работает вертикально:<\/p>\n

\n\"\"\n<\/div>\n

Тут ко всем бедам добавляется ещё и противоречие с существующей прокруткой.<\/p>\n

Если вы хотите показать несколько разных, но равнозначных элементов на странице, используйте прокрутку.<\/p>\n

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

Ещё есть классная штука — скиминг. Это когда вы проводите мышкой по одной фотке, а она сменяется другими фотками этого же товара. Скиминг изобрёл Эпл в древней версии Айфото или Аймуви. Вот если у вас есть галерея товаров с нормальной прокруткой, а наводя на любой товар вы можете ещё и проскимить его разные фотки, то получается полный кайф.<\/p>\n", "summary": "Иногда у вас что-то не влезает в ширину и вы делаете листалку", "date_published": "2024-02-17T19:11:54+03:00", "date_modified": "2024-02-17T19:11:50+03:00", "tags": [ "дизайн сайтов", "листание и прокрутка", "пользовательский интерфейс" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/galleries-1@2x.jpg", "_date_published_rfc2822": "Sat, 17 Feb 2024 19:11:54 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6241", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/galleries-1@2x.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/galleries-2@2x.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/galleries-3@2x.jpg" ] } }, { "id": "6238", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-136\/", "title": "На интерфейсном курсе: дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?", "content_html": "

традицию контекстно дисейблить кнопку, и почему она теряет актуальность в формах всякого екомерса. 2 минутки:<\/p>\n

\n