Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Веб-дизайн

Хочу задачу: конфигуратор Мерседеса

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

В начале картинка с бессмысленным заголовком и текстом «Перейти к предложению». Сразу-то нельзя предложение сформулировать? В меню видим пункты «Модельный ряд» и «Купить». Куда мне идти, если я хочу купить, выбрав из модельного ряда? Снизу стоят четыре микроскопических машинки и больше ничего нет. Зачем прятать остальные за ссылку «Показать больше»?.. Ну да ладно, тут можно про каждую деталь писать отдельный пост о том, почему это всё бред.

В принципе, такая же история и у Ауди:

— В каком браузере вы проверяли вёрстку?
— В смысле, а её надо ещё в браузере проверять?

И у БМВ не лучше:

Удивительно, но все сайты производителей автомобилей сделаны отвратительно, причём чем круче автомобиль, тем хуже сайт.

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

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

«Фильтр (0), Сортировать по..., Загрузить онлайн-код» — такое ощущение, что я попал в программу управления складом фанеры, написанную 15 лет назад и с тех пор ни разу не тронутую. Вёрстки нет нигде никакой, особенно посмотрите на прямоугольники с машинами! Полная жесть, основные характеристики вывалили просто из базы данных как есть, как будто это сайт для оптовой закупки метизов в Саратовской области. Хотя чего это я обижаю Саратовскую область? Там бы по-любому сделали сайт получше.

Ткнул в первую тачку, и попал сюда:

Специальная модель, Специальная модель, Специальная модель! Что специальная модель? Нихрена непонятно: три аббревиатуры, милипусечная картинка, 220 штук. Весь смысл спрятан хрен знает куда. Слева от большой тачки сверху неведомые иконки. Просто мрак какой-то.

Кручу ниже, и там начинается самый смак — опции:

Это безумие одинаковое у всех. Во-первых, у всех опций максимально тупые, бессмысленно «продающие» названия, из которых нереально понять, в чём суть опции. Во-вторых, картинки нихрена не иллюстрируют и не объясняют. В-третьих, опции уложены по-масонски, чтобы я в них заблудился. И там такой хреноты восемь экранов.

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

Видите, целая куча фигни, которая стоит 0. Казалось бы, надо брать? Ну, может, кроме «[SA-634] Отсутствие аптечки». Но нет, дело в том, что на самом деле все указанные тут цены ничего не значат. Вот ставлю я галочку у «[SA-B24] Пульта д. у.», а мне говорят:

То есть да, пульт-то бесплатный, но это потому что он входит в опцию «Стояночное отопление», которая стоит 117 штук. Ёлки, так нахрена вы мне тогда пульт отдельно предлагаете?

И оно всё так. После включения любой галочки сайт 5 секунд думает, и потом может её включить, а может сказать, что для её включения нужно выключить три других.

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

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

Мерседес, давай попробуем сделать?

С одной стороны, Мерседес, конечно, может себе позволить не думать о том, какой у него сайт. С другой стороны, Мерседес может себе позволить и сделать нормальный сайт.

 7 комментариев    1447   2018   автомобиль   веб-дизайн   хочу задачу

Серый текст на белом и на чёрном

Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.

Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:

Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным. Типографично:

Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой:

Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:

Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.

У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).

Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.

Ещё про серый текст:
Не забледняй

 10 комментариев    3809   2018   веб-дизайн   дизайн   типографика

Ещё штуки в Зерулсе 2.0

Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.

Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.

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

В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.

В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.

В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.

Наверняка что-то забыл.

См. также страничку о проекте.

 1 комментарий    5   2018   веб-дизайн   видеоблог   этот сайт

Текст поверх фотографии

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Текст поверх фотографии

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Текст поверх фотографии

Или кладёт контрастную плашку:

Текст поверх фотографии

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Текст поверх фотографии

Это всё костыли: в результате хуже видно и фотку, и текст.

Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:

Текст поверх фотографии

Здесь почти весь текст читается нормально без костылей (много других проблем, но сейчас не о них речь):

Текст поверх фотографии

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Текст поверх фотографии

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Текст поверх фотографии

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

Читайте также секрет дизайнерских правил.

В заметке использованы работы студентов-дизайнеров.

 1005   2017   веб-дизайн   дизайн   студентам

Фактоиды должны отличаться от товаров

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

Дизайнеры, которые уже научились этому, иногда допускают такую ошибку:

Фактоиды должны отличаться от товаров
Студенческая работа в Школе стажёров

Они делают фактоиды слишком похожими на товары. Из-за этого оба эффекта ослабляются: вёрстка выглядит однообразнее, а фактоиды не привлекают внимание.

Правильно — делать фактоиды совсем другими, чем товары:

 89   2017   веб-дизайн   дизайн сайтов   студентам

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

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

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

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

Новости сайта — 2017

Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.

За новое меню огромное спасибо Игорю Адаменко — он мужественно всё сверстал, несмотря на то, что я всё время просил невозможное. Даже сделал анимацию гамбургера в крестик как я хотел. Мы ещё заморочились с Фиттсом там: если вы поводите мышкой по новому меню, вы увидите, что области клика всех элементов очень большие.

Раздел проектов стал лучше. Раньше там проекты выводились бессмысленной матрицей, отсортированной по времени добавления. А сейчас проекты разделены на смысловые кучки:

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

Если вы пробовали пользоваться моим поиском по блогу раньше, вы знаете, что он был не очень. Во-первых, он не умел склонять слова, поэтому искать по-русски было мучительно. Во-вторых, сама выдача была просто лентой найденных заметок, среди которых увидеть нужную (или что она нихрена не нашлась) было нереально.

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

Пока там всё равно много что работает не так, как надо. Но уже сильно лучше, чем было, поэтому новый поиск я выкатил.

Про него я ещё напишу отдельно подробнее, пока лишь скажу, что решающую роль в его появлении сыграл Роман Парпалак — это с ним мы в своё время делали умный поиск для Зерулса.

 8   2017   веб-дизайн   дизайн   проекты   этот сайт

Новый сайт Эгеи

Запустили с Ильёй Страйковым новый сайт Эгеи:

Предыдущий сайт был сделан сто лет назад, и даже по тогдашний меркам был ну так. А последние годы вообще было непонятно, что это за хрень там такая висела. Хотелось всё взорвать, но находились дела поважнее.

Теперь вот нормальный сайт, где нормально объяснено, что за Эгея, и почему она клёвая. Отдельное спасибо Максиму Ильяхову.

Документация переехала в Гугль-док — ссылки на статьи живут в разделе «Помощь». Если вы увидите ошибку в документации, сможете написать комментарий прямо там. И мне будет проще её дополнять.

 3   2016   веб-дизайн   продукты   релиз   Эгея
2016   веб-дизайн   дизайн   чтиво   шрифты

Кнопка «Купить» всегда доступна

Мы рисовали страницу машины для Энви, и там справа есть жёлтый блок, который мы называли «ценником» — на нём кнопка «Арендовать»:

Кнопка «Купить» всегда доступна

Обычный сценарий попадания на страницу машины такой: на главной клиент указывает желаемые даты аренды, нажимает «Найти» и потом кликает в доступную машину. Возможно, однако, что клиент долго думал над выдачей, и когда кликнул, машину уже арендовал другой. Или он перезагрузил страницу машины через пару дней, с тем же результатом. Так что клиент может оказаться на странице машины с указанными датами, в которые машина недоступна. Значит, арендовать её будет нельзя.

Ещё на главной мы сразу показываем клёвые машины. Клиент может выбрать любую из них, не указав даты. В таком случае даты вообще не будут указаны, и арендовать машину тоже будет нельзя. Чтобы клиент, столкнувшись с недоступной кнопкой «Арендовать», не растерялся, мы продублировали поля дат прямо в ценнике.

Пошёл я презентовать дизайн Илье Синельникову (один из создателей Энви). Рассказываю, значит, про тот ценник.

Нам, говорю, не нравилось, что кнопка «Арендовать» бывает недоступна — это против полезного действия: сайт ведь для того, чтобы машины арендовали. Но как арендуешь машину, которой нет, или без дат? Сначала подумали, что надо автоматом подсовывать ближайшие доступные даты. Но это засада: вдруг человек вообще не заметит, что мы поменяли ему даты, оплатит аренду, приедет в те дни, когда он сам хотел, а у нас машины нет? Мы, говорю, думали ещё над инструментом, который бы как-то аккуратно подсказывал, на какие даты поменять, но в этой итерации мы не успеем такое сделать, поэтому пока предлагаю блокировать кнопку.

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

Тут Илья перебивает:
— Что-то ты усложняешь, пусть кнопка просто всегда доступна, пофиг на даты.

Что? Машины же может не быть в эти даты.

— Да плевать, — говорит Илья, — клиент готов денег заплатить, а ты ему не даёшь, это же бред. Пусть заплатит, а мы как-нибудь разрулим.

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

Для Ильи ситуация выглядела так, что я своим интерфейсом пытаюсь помешать его клиенту заплатить ему деньги. С точки зрения бизнеса мои сложности выеденного яйца не стоят — ну не подходят даты в редком случае — ну дадим тебе Мерс вместо Форда. Намного хуже, если клиент из-за этого вообще отвалится. В самом страшном случае, если раз в жизни попадётся клиент, которого не устроит ну прям никакая другая сколь угодно крутая машина — вернём деньги и извинимся.

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

Принцип: кнопка «Купить» всегда доступна.

 127   2016   Бюро   веб-дизайн   дизайн продуктов   дизайн сайтов   работа
Ранее Ctrl + ↓