{ "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": "6754", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/rational-screen-area-usage\/", "title": "Рациональное использование площади экрана", "content_html": "

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

Квиктайм при просмотре видео рисует интерфейс перемотки лишь на небольшую часть ширины экрана:<\/p>\n

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

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

Налоговая в выбиралке валюты не даёт увидеть, какую валюту я выбираю:<\/p>\n

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

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

Аналогично Гугль-фонтс прячет настройку шрифта вот в такое меню с прокруткой:<\/p>\n

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

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

Ну и так далее. Постоянно что-то, что можно показать целиком без прокрутки, запихивают в амбразуру.<\/p>\n

А вот обратные примеры. У Спотифая не вместилось «С возвращением» и три кнопки на большой экран:<\/p>\n

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

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

Яндекс-музыка туда же:<\/p>\n

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

Нафига прятать что-то там в кнопку «Настроить», у вас есть целый экран, я тут могу унастраиваться без лишних кликов!<\/p>\n

В дефолтном дизайне Айтюнса на огромном 32″ 6К мониторе в высоту экрана влезает три трека! Три:<\/p>\n

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

Тут я затрудняюсь дать комментарий.<\/p>\n

Не только в музыкальных программах это. Вот Гугль-докс не может уместить названия файлов:<\/p>\n

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

Ну какой идиот, а? Ну вон же полно место по бокам, и это при моей любимой ширине окна 1024 даже1 Нахрена, нахрена ты обрезал названия?<\/p>\n

Кинопоиск спрятал две кнопки («Неинтересно» и «Просмотрен») в многоточие:<\/p>\n

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

Просто космический идиот. Ещё и нарисовал подсказку, которая заняла столько же места, сколько заняли бы обе кнопки без подсказки! Да у тебя целый экран вот посвящён моим отношениям с этим фильмом. Что может быть важнее, чем показать кнопки настройки этих отношений? Для чего ты сэкономил это место?<\/p>\n

А вот классический Лончпад Эпла:<\/p>\n

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

У него много проблем, но сама идея прекрасна: для выбора приложения используется весь экран. Целиться в иконки одно удовольствие. Бывает, захватил откуда-то файл одной рукой, тащишь его на место нужной программы, в это время другой жмёшь шорткат Лончпада и бросаешь файл на программу, потому что она как раз оказывается под курсором где надо.<\/p>\n

А сейчас что? Только вот так:<\/p>\n

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

Всему тесно, и чуть что возникает прокрутка.<\/p>\n

Как будто дизайнеры постоянно забывают, зачем нужен интерфейс, который они рисуют. Это превращается в какую-то формальность, типа, надо запихать на экран такие-то элементы, а значимость этих элементов и роль в сценарии пользователя вообще никак на это запихивание не влияет.<\/p>\n", "summary": "Одна из проблем, встречающихся в дизайне многих продуктов — нерациональное использование площади экрана", "date_published": "2026-06-14T18:33:02+05:00", "date_modified": "2026-06-14T18:32:52+05:00", "tags": [ "вёрстка", "Гугль", "дизайн", "дизайн продуктов", "дизайн сайтов", "пользовательский интерфейс", "эпицентрический дизайн", "Эпл", "Яндекс" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/quicktime-small-drag.jpg", "_date_published_rfc2822": "Sun, 14 Jun 2026 18:33:02 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6754", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/quicktime-small-drag.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/lkfl-currency-sizing@2x.png", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/google-fonts-dropdown@2x.png", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/spotify-size.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/yandex-music-setup.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/itunes-density@2x.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/google-docs-filenames-dont-fit@2x.png", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/kinopoisk-doesnt-fit.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/launchpad-high-sierra.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/app-library-tahoe@2x.jpg" ] } }, { "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-03T20:13:35+05:00", "date_modified": "2026-03-22T22:28:29+05:00", "tags": [ "адаптив", "дизайн сайтов", "пользовательский интерфейс" ], "_date_published_rfc2822": "Sun, 03 Aug 2025 20:13:35 +0500", "_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-01T22:02:27+05:00", "date_modified": "2024-06-01T22:02:21+05:00", "tags": [ "дизайн сайтов", "пользовательский интерфейс" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/deliver-fragile-things.jpg", "_date_published_rfc2822": "Sat, 01 Jun 2024 22:02:27 +0500", "_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-02T11:51:06+05:00", "date_modified": "2024-05-02T11:51:01+05:00", "tags": [ "дизайн сайтов" ], "_date_published_rfc2822": "Thu, 02 May 2024 11:51:06 +0500", "_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-17T21:11:54+05:00", "date_modified": "2024-02-17T21:11:50+05:00", "tags": [ "дизайн сайтов", "листание и прокрутка", "пользовательский интерфейс" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/galleries-1@2x.jpg", "_date_published_rfc2822": "Sat, 17 Feb 2024 21:11:54 +0500", "_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