Переделал иконки «Яндекс.Маркета»
Всем привет!
Меня зовут Саша, я люблю хулиганить с дизайном. Сегодня решил докопаться до мышей в «Яндекс.Маркете». Иногда хулиганить полезно, но есть и минусы: в сетчатке выжглась пиксельная сетка, а глаза мироточат от всякого, что видишь постоянно тут и там.
Например, когда пользуюсь хорошим приложением, и вижу какой-то мелкий косяк, который постоянно мозолит глаза.
Ну и зачем тебе это?
Сразу оговорюсь, я люблю дизайн продуктов Яндекса, сам немножко там помогаю в Практикуме. А докопался именно потому что остальной дизайн, что вижу, уже вообще ничего не спасёт — хоть гранату кидай, хуже не будет.
Иконки Маркета меня бесят почти каждый день, в них есть незначительные (а в случае с купонами и значительные) косяки. На коммерческие показатели, я уверен, это никак не влияет, но Маркет же будет развиваться? Когда косяки накопятся, сколько будет стоить, например, перерисовать сотню кривых иконок в нормальный вид? А тысячу? Да ладно, шучу, немного будет стоить, но всё равно хочется повеселиться прямо здесь и сейчас.
Что не так с иконками
На картинке привёл небольшой анализ. Слово-то какое смешное. VC укокошит к чёрту все мои подписи своими оптимизациями картинок для быстрой загрузки поганых джипегов, поэтому продублирую часть текстом дальше.
Штрихи
Штрихи пляшут. В диагональных штрихах букв, кстати, толщина чуть больше горизонтальных и чуть меньше вертикальных — наши глаза воспринимают такие штрихи как одинаковые. В иконках уже по ситуации, конечно, но надо, чтобы общий вид ансамбля смотрелся целостно.
С диагональными штрихами особо ничего не сделаешь, я не стал их сильно пинать. Тут только следить за тем, как они рендерятся в режиме pixel preview Фигмы.
Цвета
Предполагаю страшное: Дизайнер иконок тыкнул пипеткой в инфицированный джипегом скрин текста (там 222221) и цвет получился немного 222222. Ерунда, а бесит. Всё же оставлю основной цвет иконок таким, как получился, а не цветом текста.
Смыслы
Тут всё почти норм. Обмазал какашками то, что не нравится. Впрочем, как и обычно.
Оптическая компенсация
Пиксели
Изначально я делал скрин на ойфон, там хорошее разрешение матрицы, но дизайнер яндекса допустил одну весёлую ошибку. Толщина штриха 3 px. Ну на твоём мониторе — так вообще 1.5 px. Ничего, купишь однажды нормальный, когда инвестиций поднимешь. Так вот, а у иконки ширина 40 px. Если линия идёт строго по центру, она попадает между пикселями, и край штриха рендерится плааавно и невероятно отстойно полутонами. Так делать нельзя, надо смещать такие иконки на полпикселя, тогда из штрихи будут резкие и дерзкие. Чёткие, как пацаны во дворе.
Процесс (нет)
Я сначала хотел его описать, но потом забил и забыл. Там в анализе понятно, что я буду исправлять. А выпендриваться, типа как ты в процессе делаешь и у тебя руки из плеч, а не как у всех — не это отстой. Отложу до момента, когда надо будет впечатлить какую-нибудь девчонку.
Всё же немного фарша покажу:
Ну и что в итоге?
Как видите, после вечера усердной охоты за пикселями для обывателя ничего не изменилось. Но мне приятнее на такое смотреть. Публикации только какие-то хреновые, ну и плевать. Я развлёкся и ладно.
И пара скринов, можно открыть на ойфоне:
Сами иконки:
Итог
Я знатно повеселился, не всё же дизайнерами управлять, составлять карты компетенций, планировать продуктовую дизайн стратегию, и вот эти все ваши биг дата, блокчейн, машинлёнинг, Герман Греф.
Для дизайнеров маркета ссылка. Очень расчитываю, что кровь из глаз поубавится, как внедрят. Хотя, этож надо признаться в косяках. Смутно себе представляю, как дизайнер иконок придёт к тимлиду и скажет: «Я обмделалса, вот рамдомный чумвак почимнил наши икомки, дамвай замемим». Но всякое может быть.
Всем, кто дочитал до конца — вы лапочки. Пока!
Я правильно понял, что в простую композицию значков в одной проекции, вы добавляете значок коробки в 2ух проекциях и меняете, более чем, понятный значок «копирования» на(3 звездочки и пол документа) непонятный и сложный?))
Спасибо за обратную связь!
Да, всё правильно понимаете. Смыслы важнее, хоть сами конки можно ещё улучшать и улучшать. Думал сделать иконку заказов в виде чека, но потом такой: «Какой же это к чёрту чек, если приезжает коробка со скотчем?!».
Вообще, надеюсь, Маркет скоро перестанет ненавидеть окружающую среду с их валовым объёмом заказов-то, и уберёт эти коробки к чёрту. В том числе и из иконок.
Я один не заметил никакой разницы?
Привет! Никто не заметил)
Отнюдь, сударь! Я заприметил отличия 😀
Спасибо!)
Новые какие-то стремные же, ну
Спасибо!)
Стараюсь.
Работа не доделана. Раз взялись за компенсацию, то нужно смотреть на баланс между иконками. «Вакансии», к примеру, куда более плотные графически, чем остальные, из-за чего заметно выбиваются.
«Списки сравнения» будто стремятся вправо относительно коробки сверху (которая тоже сильно выбивается не только весом, но и другим углом).
Звездочки в «Мои публикации» превратились в кляксы, да и сама метафора трех звезд над коробкой (?) весьма странная.
Не знаю, какую именно задачу вы себе ставили, но похоже на то, что вы хотели улучшить меню в целом, но в сущности, оно осталось таким же тяжело воспринимаемым. Сейчас в нём очень много пунктов и все они одинаковые. Иконки стоят слишком близко к тексту и на таком мелком формате недостаточно различимы, чтобы играть значимую роль. По сути, они сейчас там для красоты.
Раз это целый раздел, то почему бы вообще не отказаться от этого меню? Можно ведь сразу показывать последний заказ, если он активен, чтобы пользователь мог сразу увидеть его статус. Показывать списки сравнения, избранные товары, лишний раз напоминая и подстегивая. А все остальные функции, а-ля «Настройки», могли бы идти списком ниже. Получился бы информативный интерфейс, удобный пользователю и выгодный бизнесу (пользователь меньше тратит время на путь, больше видит, чаще сам себе напоминает о том, что в избранном что-то есть). А так, если честно, какая-то бессмысленная работа.
Спасибо за замечания!
Всё по делу, вакансии и коробка реально слишком плотные, но по-другому не придумал, а дальше было лень. Кстати, тут на VC прикольная иконка вакансий, можно бы её перерисовать. Три звёздочки — тоже согласен, компромисс, но лучше копипасты.
Что касается пользовательских путей — суперспорно. Это только тестами проверяется. Любое экспертное мнение в этой области без тестов не ценнее тупейной бумаги.)
Совсем без иконок — тоже хорошая идея, так многие похожие приложения делают и не парятся. Но надо смотреть на скорость навигации пользователей тогда. Тех, кто только пришёл и кто попользовался несколько дней каждым вариантом)
Вы переоцениваете значение тестов и недооцениваете силу знаний о том, как решать дизайнерские задачи. Это довольно простой интерфейс с довольно простыми метриками. Очевидно, что пользователи чаще пользуются одними инструментами и реже другими. Чтобы это понять, не нужно проводить тесты, достаточно посмотреть на уже собранные метрики.
И так же очевидно, что чем короче путь пользователя, чем меньше он принимает решений на пути, тем лучше всем. Дальше берем задачи, которые возникают у пользователей: посмотреть статус заказа, посмотреть избранное, убедиться, что купон не истек. Смеряем с метриками и смотрим, какие задачи возникают чаще, какие реже, и сокращаем пути.
Тесты, безусловно, полезны, но это не панацея. И жаль, что сейчас люди так помешались на тестировании целой кучи простых штук вместо того, чтобы поглубже копнуть.
Слово «очевидно» — табу для меня. Хотя сам иногда грешу)
Количество кликов и часто используемые сценарии — хрень. Тесты на скорость навигации по наиболее критичным коммерческим сценариям онли.
Почему часто используемые сценарии хрень?
Часто используемые — не равно общее удобство и не равно важные сценарии с точки зрения бизнеса.
Если условный пример (но я его придумал, хоть в жизни похожее происходит). Для пользователя частый сценарий в интернет-магазине — поиск товара и отслеживание доставки. Но на первых местах — промо.
В меню маркета сценарии показаны равносильными для того, чтобы не получилось, что те же настройки или вакансии посещаются примерно никогда. Они не частые, но важные.
Никто и не говорит, что оно равно. Часто используемые — это демонстрация интереса (см. картинку).
Удобство интерфейса — это вещь, которая была описана тысячу раз (у того же Джона Рёскина исчерпывающая книга, в которой даже есть формулы расчета скорости работы с интерфейсом и описанием психологических привычек и когнитивных искажений). То, как люди работают с интерфейсами уже изучено вдоль и поперек, и с тех пор интерфейсы, как и привычки, практически не менялись. Да, они стали быстрее, красивее, появились дополнительные средства ввода, но суть осталась та же: нужно куда-то тыкать.
А задачи бизнеса — это вещь, которая обсуждается наряду с задачами пользователя и имеют такой же вес. Интерфейс — это баланс между ними. При достаточно хорошем изучении продукта и пользователей, а так же при достаточном знании самой области, большая часть тестов не нужна. Одна только «Матрица системы» (см. «Матрица системы у Горбунова), составленная с участием бизнеса даёт исчерпывающее понимание сути, пользы и показывает, какие решения наиболее оптимальны.
Для пользователя частый сценарий в интернет-магазине — поиск товара и отслеживание доставки. Но на первых местах — промо.Это разные задачи, которые должны одинаково хорошо выполняться для пользователей, которые находятся на разных этапах взаимодействия с магазином.
В меню маркета сценарии показаны равносильными для того, чтобы не получилось, что те же настройки или вакансии посещаются примерно никогда. Они не частые, но важные.Мы не знаем, для чего оно сделано именно так, но не нужно быть дизайнером, чтобы понять, что в этом меню придется каждый раз искать пункт среди прочих, потому что они практически ничем не отличаются.
В общем, Александр, я вам очень горячо рекомендую ознакомиться с литературой по дизайну. Думаю, что вам будет очень полезно узнать, как подобные задачи решаются правильно и без траты времени на кучу вариантов и тестирования.
Может у Джефа Раскина? )
Рёскин жил, когда интерфейсы если и были то деревянные какие-нибудь. Если не так понял, киньте название книги, плиз.
Ой, да я их вечно путаю :-)
Спасибо вам!
Спасибо! Обязательно ознакомлюсь с литературой по дизайну!)
А как по вашему экран может показать не целый пиксель?
Прежде чем рассуждать на такие темы нужно понимать оговаривать вид иконок - шрифт, растр или свг, поскольку с каждым из них связано куча нюансов, начиная от разного пиксельратио у мониторов и заканчивая кривыми графическими редакторами. Кроме того, от самого гуи зависит, он тоже может все перекосабочить.
Цвет, это также может быть фишка, поскольку глазу приятнее немного неточные цвета.
И иконки это вообще больная тема - масштаб или неправильная адаптация всегда приводит к плачевным последствиям. Нарисовали под один размер, а под другой просто отмаштабировали в самом редакторе. И все! Кроме того, это может вообще может быть автоматизированно. А тесты на пиксиль перфект один в один, это фантастика.
Спасибо за обратную связь, вопросы хорошие)
1. Экран рендерит неполный пиксель, как полутон, там выше в скрине показано — получается размытие.
2. Приложение или страница в браузере знают ширину экрана именно в пикселях, там контейнеры точные прямо в пикселях тоже. Для этого даже есть коэффициенты, чтобы один и тот же размер физический укладывался одинаково в разное количество пикселе. Коэффициенты кратные, поэтому если плотность пикселей в два раза выше — граница векотра точно так же будет проходить по границе пикселя и иконка будет чётким пацаном. Ну и разработчиков кастрируют за относительные единицы в иконках, например, когда их масштабирует резиново.
3. Про цвета соглашусь, но не соглашусь. Долгая история.
Прежде чем рассуждать на такие темы, мне пришлось много какашек съесть, поверьте)
Я понимаю то, что вы написали. Я просто до сих пор так и не понял вы вместо трёх пикселей предлагаете делать три и семь? Если да, то это ужасная идея и именно по этому я и спросил про рендер пикселей. Если вы понимаете о рендере, то почему говорите что три пикселя превратятся в полтора?
Ну а дальше сложно говорить не понимая о каком виде иконок идёт речь.
И вы уверенны, что иконка сорок пикселей, а не сорок восемь и отступами?
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 и будет вам счастье)
Это вы прочитайте про атрибут ratio тега meta.
И помимо патио, также у каждой ОС и каждого редактора свои движки рендера под каждый тип графики. Поэтому нецелочисленные размеры и координаты это всегда плохое решение.
Просто откройте на айфоне в 6 дюймов оба приложенных скрина)
Вы напроч игнорируете тип иконок, среду их разработки и движок их рендера. Сравнивать иконку и скрин может только чувак, который вообще не в теме.
Согласен!
Буду ждать тогда ваш вариант и инструкции, как сделать хорошо)
Комментарий недоступен
Большое спасибо за тёплые слова!)
Комментарий недоступен
Саш, не думал о том, что просто милорд-фронтендер брал не компонент, а иконку без контейнера?)
Петь, привет! Давно не слышались!
Не, не думал, потому что тогда иконка должна быть в дизайне типа 80 px с толщиной штриха в 6 px. Так никто не рисует. А ещё на отвественности дизайнера проверять за всякими милордами их кривую вёрстку. А в случае сложности доработок контейнера, тупо нарисовать, бл, в нужном размере. Короче, дизайнер виноват, казнить. Как и обычно. Заводите следующего)
Выглядит чётко
Спасибо, стараюсь.
Надо обыграть слово «яма»
Я.Ма
Готово!
Комментарий недоступен
Можно вопрос: внутри яндекса работают неплохие специалисты, почему они не видят или просто игнорируют эти косяки?
Это хороший вопрос. Опираясь на свой опыт вне Яндекса, могу сказать, что когда продукт большой, то есть разумные пределы задротства, после которых уже вложения в пиксельхантинг не приносят результатов)
И да, там работают очень хорошие специалисты, иконки — не особо приоритетная вещь. Думаю, беклог у них длиной аж до Луны)
Комментарий недоступен
Ничего не понял, но на всякий случай — спасибо!)
Комментарий недоступен
Товарищ дезигнер, какие нафиг пол-пикселя ? Вы действительно считаете, что иконка будет стоять на экране как вкопанная. Где гарантия, что при скроллинге ваша иконка не попадёт в промежуток между пикселей. А как начсёт AAx4 AAx8 AAx16 ? У каждого браузера свой алгоритм для четкой графики, в том числе и ClearType. Да и вообще, как можно сравнивать скрин с векторным изображением. Одним словом - фигма.
Спасибо большое за комментарий!
1. Действительно думаю. Скроллинг дискретен.
2. Кратное увеличение разрешения не ведёт к аллиасингу, если иконки пиксель-перфект (я про виртуальные крупные пиксели, в которых может оказаться сколько угодно неделимых реальных)
2. На скрине как раз рендеринг графики из вектора в растр. Браузеры и приложения рендерят пиксель-перфект графику одинаково, а то, что вы озвучили, касается шрифтов)
Я когда увидела иконку «вакансии», честно подумала что это советская мясорубка
Ахахаха, интересная ассоциация!)
Вы как хотите, но мне понравились купоны
Спасибо!
Очень приятно. Я украл принцип из убера и Яндекс лавки)
Спасибо, что оценили подход!
Да, со всем согласен, кроме коробки. Она там глобально используется. Например «оставить у двери» )