Переделал иконки «Яндекс.Маркета»

Всем привет!

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

Например, когда пользуюсь хорошим приложением, и вижу какой-то мелкий косяк, который постоянно мозолит глаза.

Ну и зачем тебе это?

Сразу оговорюсь, я люблю дизайн продуктов Яндекса, сам немножко там помогаю в Практикуме. А докопался именно потому что остальной дизайн, что вижу, уже вообще ничего не спасёт — хоть гранату кидай, хуже не будет.

Иконки Маркета меня бесят почти каждый день, в них есть незначительные (а в случае с купонами и значительные) косяки. На коммерческие показатели, я уверен, это никак не влияет, но Маркет же будет развиваться? Когда косяки накопятся, сколько будет стоить, например, перерисовать сотню кривых иконок в нормальный вид? А тысячу? Да ладно, шучу, немного будет стоить, но всё равно хочется повеселиться прямо здесь и сейчас.

Что не так с иконками

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

Штрихи

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

Это — нифига не целостно. Скриншот из фигмы, можно бить ногами, но не по лицу

С диагональными штрихами особо ничего не сделаешь, я не стал их сильно пинать. Тут только следить за тем, как они рендерятся в режиме pixel preview Фигмы.

Цвета

Предполагаю страшное: Дизайнер иконок тыкнул пипеткой в инфицированный джипегом скрин текста (там 222221) и цвет получился немного 222222. Ерунда, а бесит. Всё же оставлю основной цвет иконок таким, как получился, а не цветом текста.

Скриншот из фигмы, ну ты понял

Смыслы

Тут всё почти норм. Обмазал какашками то, что не нравится. Впрочем, как и обычно.

Тут речь только о смыслах

Оптическая компенсация

Пиксели

Изначально я делал скрин на ойфон, там хорошее разрешение матрицы, но дизайнер яндекса допустил одну весёлую ошибку. Толщина штриха 3 px. Ну на твоём мониторе — так вообще 1.5 px. Ничего, купишь однажды нормальный, когда инвестиций поднимешь. Так вот, а у иконки ширина 40 px. Если линия идёт строго по центру, она попадает между пикселями, и край штриха рендерится плааавно и невероятно отстойно полутонами. Так делать нельзя, надо смещать такие иконки на полпикселя, тогда из штрихи будут резкие и дерзкие. Чёткие, как пацаны во дворе.

Хрень какая-то Неизвестный дизайнер Яндекса, земля его карьере пухом
Чёткая иконка Автор — Саша, в связи с чем принимаю поздравления
Моё любимое занятие при ревью макетов. В США меня бы уволили за неполиткорректность

Процесс (нет)

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

В моих фантазиях это происходит как-то так

Всё же немного фарша покажу:

Ну и что в итоге?

Как видите, после вечера усердной охоты за пикселями для обывателя ничего не изменилось. Но мне приятнее на такое смотреть. Публикации только какие-то хреновые, ну и плевать. Я развлёкся и ладно.

И пара скринов, можно открыть на ойфоне:

Сами иконки:

Ееее, мазня от пережатия

Итог

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

Для дизайнеров маркета ссылка. Очень расчитываю, что кровь из глаз поубавится, как внедрят. Хотя, этож надо признаться в косяках. Смутно себе представляю, как дизайнер иконок придёт к тимлиду и скажет: «Я обмделалса, вот рамдомный чумвак почимнил наши икомки, дамвай замемим». Но всякое может быть.

Всем, кто дочитал до конца — вы лапочки. Пока!

0
48 комментариев
Написать комментарий...
Jeremy B.

Я правильно понял, что в простую композицию значков в одной проекции, вы добавляете значок коробки в 2ух проекциях и меняете, более чем, понятный значок «копирования» на(3 звездочки и пол документа) непонятный и сложный?))

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо за обратную связь!

Да, всё правильно понимаете. Смыслы важнее, хоть сами конки можно ещё улучшать и улучшать. Думал сделать иконку заказов в виде чека, но потом такой: «Какой же это к чёрту чек, если приезжает коробка со скотчем?!».

Вообще, надеюсь, Маркет скоро перестанет ненавидеть окружающую среду с их валовым объёмом заказов-то, и уберёт эти коробки к чёрту. В том числе и из иконок.

Ответить
Развернуть ветку
RMirsaitov

Я один не заметил никакой разницы?

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Привет! Никто не заметил)

Ответить
Развернуть ветку
Вадим Д.

Отнюдь, сударь! Я заприметил отличия 😀

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо!)

Ответить
Развернуть ветку
Monkey Do

Новые какие-то стремные же, ну

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо!)
Стараюсь.

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

Работа не доделана. Раз взялись за компенсацию, то нужно смотреть на баланс между иконками. «Вакансии», к примеру, куда более плотные графически, чем остальные, из-за чего заметно выбиваются.

«Списки сравнения» будто стремятся вправо относительно коробки сверху (которая тоже сильно выбивается не только весом, но и другим углом). 

Звездочки в «Мои публикации» превратились в кляксы, да и сама метафора трех звезд над коробкой (?) весьма странная. 

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

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

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо за замечания!
Всё по делу, вакансии и коробка реально слишком плотные, но по-другому не придумал, а дальше было лень. Кстати, тут на VC прикольная иконка вакансий, можно бы её перерисовать. Три звёздочки — тоже согласен, компромисс, но лучше копипасты.

Что касается пользовательских путей — суперспорно. Это только тестами проверяется. Любое экспертное мнение в этой области без тестов не ценнее тупейной бумаги.)

Совсем без иконок — тоже хорошая идея, так многие похожие приложения делают и не парятся. Но надо смотреть на скорость навигации пользователей тогда. Тех, кто только пришёл и кто попользовался несколько дней каждым вариантом)

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

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

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

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

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Слово «очевидно» — табу для меня. Хотя сам иногда грешу)
Количество кликов и часто используемые сценарии — хрень. Тесты на скорость навигации по наиболее критичным коммерческим сценариям онли.

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

Почему часто используемые сценарии хрень?

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Часто используемые — не равно общее удобство и не равно важные сценарии с точки зрения бизнеса.

Если условный пример (но я его придумал, хоть в жизни похожее происходит). Для пользователя частый сценарий в интернет-магазине — поиск товара и отслеживание доставки. Но на первых местах — промо.

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

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy
Часто используемые — не равно общее удобство и не равно важные сценарии с точки зрения бизнеса.

Никто и не говорит, что оно равно. Часто используемые — это демонстрация интереса (см. картинку).

Удобство интерфейса — это вещь, которая была описана тысячу раз (у того же Джона Рёскина исчерпывающая книга, в которой даже есть формулы расчета скорости работы с интерфейсом и описанием психологических привычек и когнитивных искажений). То, как люди работают с интерфейсами уже изучено вдоль и поперек, и с тех пор интерфейсы, как и привычки, практически не менялись. Да, они стали быстрее, красивее, появились дополнительные средства ввода, но суть осталась та же: нужно куда-то тыкать.

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

Для пользователя частый сценарий в интернет-магазине — поиск товара и отслеживание доставки. Но на первых местах — промо.

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

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

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

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

Ответить
Развернуть ветку
Roman Shchedrin

Может у Джефа Раскина? )
Рёскин жил, когда интерфейсы если и были то деревянные какие-нибудь. Если не так понял, киньте название книги, плиз.

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

Ой, да я их вечно путаю :-) 

Спасибо вам!

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо! Обязательно ознакомлюсь с литературой по дизайну!)

Ответить
Развернуть ветку
Game Topia

А как по вашему экран может показать не целый пиксель?
Прежде чем рассуждать на такие темы нужно понимать оговаривать вид иконок - шрифт, растр или свг, поскольку с каждым из них связано куча нюансов, начиная от разного пиксельратио у мониторов и заканчивая кривыми графическими редакторами. Кроме того, от самого гуи зависит, он тоже может все перекосабочить.
Цвет, это также может быть фишка, поскольку глазу приятнее немного неточные цвета.
И иконки это вообще больная тема - масштаб или неправильная адаптация всегда приводит к плачевным последствиям. Нарисовали под один размер, а под другой просто отмаштабировали в самом редакторе. И все! Кроме того, это может вообще может быть автоматизированно. А тесты на пиксиль перфект один в один, это фантастика.

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо за обратную связь, вопросы хорошие)

1. Экран рендерит неполный пиксель, как полутон, там выше в скрине показано — получается размытие.

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

3. Про цвета соглашусь, но не соглашусь. Долгая история.

Прежде чем рассуждать на такие темы, мне пришлось много какашек съесть, поверьте)

Ответить
Развернуть ветку
Game Topia

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

И вы уверенны, что иконка сорок пикселей, а не сорок восемь и отступами?

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

3.7 у меня нет. Есть 2.7 и 3.2 для компенсации жирности и в зависимости от угла диагональной линии. В диагональных штрихах так можно.

Три пикселя превратятся в полтора на экранах 72 ppi.
Цитата: «Ну на твоём мониторе — так вообще 1.5 px. Ничего, купишь однажды нормальный, когда инвестиций поднимешь.»

Там, где у айфона иконка укладывается в 40 физических пикселей, на плохом мониторе она укладывается в 20. То есть как бы в вёрстке она и есть 20 px (виртуальных), но для мобилок дизайнят сразу в коэффициенте 2x (физических).

Почитайте статью: https://vc.ru/design/19864-pixels-in-mobile-design
там много нюансов, но если вкратце: делайте в 2x и будет вам счастье)

Ответить
Развернуть ветку
Game Topia

Это вы прочитайте про атрибут ratio тега meta.
И помимо патио, также у каждой ОС и каждого редактора свои движки рендера под каждый тип графики. Поэтому нецелочисленные размеры и координаты это всегда плохое решение. 

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Просто откройте на айфоне в 6 дюймов оба приложенных скрина)

Ответить
Развернуть ветку
Game Topia

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

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Согласен!
Буду ждать тогда ваш вариант и инструкции, как сделать хорошо)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Большое спасибо за тёплые слова!)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sovetov Petr

Саш, не думал о том, что просто милорд-фронтендер брал не компонент, а иконку без контейнера?)

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Петь, привет! Давно не слышались!
Не, не думал, потому что тогда иконка должна быть в дизайне типа 80 px с толщиной штриха в 6 px. Так никто не рисует. А ещё на отвественности дизайнера проверять за всякими милордами их кривую вёрстку. А в случае сложности доработок контейнера, тупо нарисовать, бл, в нужном размере. Короче, дизайнер виноват, казнить. Как и обычно. Заводите следующего)

Ответить
Развернуть ветку
 Anatoly Bereznyak

Выглядит чётко

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо, стараюсь.

Ответить
Развернуть ветку
Артем Антонов

Надо обыграть слово «яма»

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Я.Ма
Готово!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Триколор

Можно вопрос: внутри яндекса работают неплохие специалисты, почему они не видят или просто игнорируют эти косяки?

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

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

И да, там работают очень хорошие специалисты, иконки — не особо приоритетная вещь. Думаю, беклог у них длиной аж до Луны)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Ничего не понял, но на всякий случай — спасибо!)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Non Existence

Товарищ дезигнер, какие нафиг пол-пикселя ? Вы действительно считаете, что иконка будет стоять на экране как вкопанная. Где гарантия, что при скроллинге ваша иконка не попадёт в промежуток между пикселей. А как начсёт AAx4 AAx8 AAx16 ? У каждого браузера свой алгоритм для четкой графики, в том числе и ClearType. Да и вообще, как можно сравнивать скрин с векторным изображением. Одним словом - фигма.

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо большое за комментарий!
1. Действительно думаю. Скроллинг дискретен.
2. Кратное увеличение разрешения не ведёт к аллиасингу, если иконки пиксель-перфект (я про виртуальные крупные пиксели, в которых может оказаться сколько угодно неделимых реальных)
2. На скрине как раз рендеринг графики из вектора в растр. Браузеры и приложения рендерят пиксель-перфект графику одинаково, а то, что вы озвучили, касается шрифтов)

Ответить
Развернуть ветку
Мария Торопыгина

Я когда увидела иконку «вакансии», честно подумала что это советская мясорубка

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Ахахаха, интересная ассоциация!)

Ответить
Развернуть ветку
Анна Иванова

Вы как хотите, но мне понравились купоны

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо!
Очень приятно. Я украл принцип из убера и Яндекс лавки)

Ответить
Развернуть ветку
Кондрат Кондратенко
Автор

Спасибо, что оценили подход!
Да, со всем согласен, кроме коробки. Она там глобально используется. Например «оставить у двери» )

Ответить
Развернуть ветку
45 комментариев
Раскрывать всегда