Чёрная пятница.
Сегодня все каналы гудят скидками про Чёрную пятницу.
Но скидки мне не так интересны, как подход к визуализации этих скидок на сайтах) Из РУ сегмента очень зашло, как это сделали ребята из Золотого Яблока (сайт им делали ONY).
Посмотрите на красоту: https://goldapple.ru
Что думаете?) Если у вас есть примеры красивых оформлений к ЧП — присылайте, поглядим вместе) Только не ОЗОН. Я теряю сознание от шлака, который там находится на главной при каждых акциях и распродажах.
@jun_hi
Сегодня все каналы гудят скидками про Чёрную пятницу.
Но скидки мне не так интересны, как подход к визуализации этих скидок на сайтах) Из РУ сегмента очень зашло, как это сделали ребята из Золотого Яблока (сайт им делали ONY).
Посмотрите на красоту: https://goldapple.ru
Что думаете?) Если у вас есть примеры красивых оформлений к ЧП — присылайте, поглядим вместе) Только не ОЗОН. Я теряю сознание от шлака, который там находится на главной при каждых акциях и распродажах.
@jun_hi
⠀
Иерархия кнопок.
Даёт пользователям подсказку, какое действие является наиболее важным на экране.
При создании UI кита необходимо убедиться, что в нём есть первичные, вторичные и третичные кнопки. Также, кнопки могут быть с иконками и без, иконки могут быть как слева, так и справа. Это всё нужно учитывать при создании компонентов кнопок и их вариантов.
Первичые кнопки всегда выделяются среди других и Третичные кнопки могут быть гиперссылками и выполнять менее важную функцию в интерфейсе. Вторичные кнопки как правило являются альтернативой первичной.
Помните, что кнопка должна выглядеть как кнопка. Не используйте сложные геометрические фигуры, которые могут сбить пользователя с толку.
И всегда старайтесь писать в кнопке тот текст, функцию которого она и будет выполнять. Если это отправить сообщение, то не открывайте после этого окно регистрации, ведь я хотел отправить сообщение 🙂
Подробнее про кнопочки можно почитать тут, например.
#UXUI
@jun_hi
Иерархия кнопок.
Даёт пользователям подсказку, какое действие является наиболее важным на экране.
При создании UI кита необходимо убедиться, что в нём есть первичные, вторичные и третичные кнопки. Также, кнопки могут быть с иконками и без, иконки могут быть как слева, так и справа. Это всё нужно учитывать при создании компонентов кнопок и их вариантов.
Первичые кнопки всегда выделяются среди других и Третичные кнопки могут быть гиперссылками и выполнять менее важную функцию в интерфейсе. Вторичные кнопки как правило являются альтернативой первичной.
Помните, что кнопка должна выглядеть как кнопка. Не используйте сложные геометрические фигуры, которые могут сбить пользователя с толку.
И всегда старайтесь писать в кнопке тот текст, функцию которого она и будет выполнять. Если это отправить сообщение, то не открывайте после этого окно регистрации, ведь я хотел отправить сообщение 🙂
Подробнее про кнопочки можно почитать тут, например.
#UXUI
@jun_hi
Полезное #3
------------------
Плагины для Figma:
🔸 Fast Variants Properties — пакетно создаёт свойства для вариантов.
🔸 Thumblisher — Очень простой способ ресайзить фрейм под разрешение разных постов соц сетей.
🔸 Contrast — позволяет проверять коэффициенты контрастности цветов
------------------
Интересные сервисы и сайты:
🔹 Animockup. позволяет создавать анимированные мокапы прямо в браузере.
🔹 Loon. Поиск графики на популярных бесплатных фотостоках.
🔹 WhatTheHex. Помогает с цветовым неймингом, достаточно ввести HEX код или выбрать цвет в палитре.
🔥🔥 Paywallscreens. Сайт с огромным количеством примеров paywall экранов (оформления подписки) в разных приложениях. Можно использовать как референсы.
------------------
Бесплатные файлы:
▪️ MingCute Icon v1.6. Набор из 500 базовых векторных иконок, нарисованных по 24-пиксельной сетке.
▪️ Simplified Wireframes. Набор Figma-компонентов для сборки флоучартов.
▪️ Moon Design System. Хорошая основа для дизайн-системы вашего проекта в формате Figma.
------------------
#полезное
@jun_hi
------------------
Плагины для Figma:
🔸 Fast Variants Properties — пакетно создаёт свойства для вариантов.
🔸 Thumblisher — Очень простой способ ресайзить фрейм под разрешение разных постов соц сетей.
🔸 Contrast — позволяет проверять коэффициенты контрастности цветов
------------------
Интересные сервисы и сайты:
🔹 Animockup. позволяет создавать анимированные мокапы прямо в браузере.
🔹 Loon. Поиск графики на популярных бесплатных фотостоках.
🔹 WhatTheHex. Помогает с цветовым неймингом, достаточно ввести HEX код или выбрать цвет в палитре.
🔥🔥 Paywallscreens. Сайт с огромным количеством примеров paywall экранов (оформления подписки) в разных приложениях. Можно использовать как референсы.
------------------
Бесплатные файлы:
▪️ MingCute Icon v1.6. Набор из 500 базовых векторных иконок, нарисованных по 24-пиксельной сетке.
▪️ Simplified Wireframes. Набор Figma-компонентов для сборки флоучартов.
▪️ Moon Design System. Хорошая основа для дизайн-системы вашего проекта в формате Figma.
------------------
#полезное
@jun_hi
Увидел тут в приложении Авиасэйлс в частых вопросах.
«В отличие от вашего бывшего отвечаем не дольше 5 минут».
Как относитесь к такому юмору?) Если это можно назвать юмором, конечно. Я, если честно, не очень, потому что я парень) И у меня нет «бывшего», да и эта шутка давно себя изжила.
@jun_hi
«В отличие от вашего бывшего отвечаем не дольше 5 минут».
Как относитесь к такому юмору?) Если это можно назвать юмором, конечно. Я, если честно, не очень, потому что я парень) И у меня нет «бывшего», да и эта шутка давно себя изжила.
@jun_hi
Озон какое-то воплощение ада.
Понятно, что маркетплейс, понятно, что хочется показать прям всё всё, но это первый и главный экран, а в меня лупят ядовитым розовым, кучей скидок и не ясно, что в итоге делать то))
Озон, дай спокойно посмотреть каталог))
Вы как относитесь к такой «агитации» скидок?))
@jun_hi
Понятно, что маркетплейс, понятно, что хочется показать прям всё всё, но это первый и главный экран, а в меня лупят ядовитым розовым, кучей скидок и не ясно, что в итоге делать то))
Озон, дай спокойно посмотреть каталог))
Вы как относитесь к такой «агитации» скидок?))
@jun_hi
Финтех и Филиппины.
Когда пришёл в Unabank — digital банк на Филиппинах, который появится к 2025 году, в сентябре 2020, команда делала продукт UnaPay. Это выдача кредитов онлайн. Стандартная, как и везде, как показалось вначале. Нужно было с нуля придумать бренд, спроектировать сайт и анкету для получения кредита.
Над брендом думали месяц, но в итоге остановились на ярких цветах, кислотных иллюстрациях в приложении и не прогадали. Общались с Филиппинцами удалённо и показывали наш бренд, параллельно слушали мысли на этот счёт. В обратной связи получили восторг, ведь на Филиппинах так «ядовито» ещё никто не заходил. Английский у Филиппинцев это беда и разобрать сложновато)
Проектировать UnaPay в одиночку по началу было не легко. На Филиппинах другое законодательство, банковские проволоки и юридические ограничения, нежели в РФ. Для выдачи кредита запрашиваются счета оплаты коммунальных услуг, интернета, тв или воды. Подойдёт квитанция, где видно, что платит человек, который берёт кредит. Адрес совпадает с паспортом, по которому платятся ком.услуги. В РФ такого не встречал.
Проектируя анкету на кредит возникали некоторые не понимания. Филиппинцы ненавидят поле ФИО, которое вписывается в один инпут. Они пишут туда фигню и заявка не проходила из-за скоринга. Поэтому ФИО разделили на 3 отдельных инпута и правильность заполнения выросла в каждой третьей заявке. It's magic.
Проблемы возникли и на адресе. На Филиппинах не стандартная система административных единиц. В России это Область, город, улица. У них провинция > город > барангай > улица > дом. Барангай это «двор» в России. Проблема в том, что этих барангаев в одном городе больше десяти. Клиенты не понимали, что вводить: где фактический адрес или адрес прописки. С адресом должен совпадать и зипкод, который пишет клиент, так как потом это сверяется с паспортом.
Решение пришло неожиданно быстро, но пришлось провести много аналитики и посмотреть много цифр, чтобы убедиться, что так сделать можно. В старом варианте клиент заполнял каждое поле в адресе отдельно и в конце заполнял зипкод. Появилась возможность сразу запросить зипкод, а уже по нему притянуть информацию по адресу: область, город, барангай, провинцию. В итоге 5 полей свелись к одному, после которого мы писали «это ваш адрес?». Если да, клиенту оставалось заполнить только номер дома или название билдинга, если нет, то клиент вводил уже вручную. По результатам ввода зипкодов, попадание в адрес было на 90% точным. Но как известно, уникальные бордер кейсы встречаются, которые сложно было предусмотреть сразу.
Конверсия шага выросла на 30%, точную цифру уже не помню.
Какие кейсы были у вас в компании? Какую проблему находили и как решали?)
#личное
@jun_hi
Когда пришёл в Unabank — digital банк на Филиппинах, который появится к 2025 году, в сентябре 2020, команда делала продукт UnaPay. Это выдача кредитов онлайн. Стандартная, как и везде, как показалось вначале. Нужно было с нуля придумать бренд, спроектировать сайт и анкету для получения кредита.
Над брендом думали месяц, но в итоге остановились на ярких цветах, кислотных иллюстрациях в приложении и не прогадали. Общались с Филиппинцами удалённо и показывали наш бренд, параллельно слушали мысли на этот счёт. В обратной связи получили восторг, ведь на Филиппинах так «ядовито» ещё никто не заходил. Английский у Филиппинцев это беда и разобрать сложновато)
Проектировать UnaPay в одиночку по началу было не легко. На Филиппинах другое законодательство, банковские проволоки и юридические ограничения, нежели в РФ. Для выдачи кредита запрашиваются счета оплаты коммунальных услуг, интернета, тв или воды. Подойдёт квитанция, где видно, что платит человек, который берёт кредит. Адрес совпадает с паспортом, по которому платятся ком.услуги. В РФ такого не встречал.
Проектируя анкету на кредит возникали некоторые не понимания. Филиппинцы ненавидят поле ФИО, которое вписывается в один инпут. Они пишут туда фигню и заявка не проходила из-за скоринга. Поэтому ФИО разделили на 3 отдельных инпута и правильность заполнения выросла в каждой третьей заявке. It's magic.
Проблемы возникли и на адресе. На Филиппинах не стандартная система административных единиц. В России это Область, город, улица. У них провинция > город > барангай > улица > дом. Барангай это «двор» в России. Проблема в том, что этих барангаев в одном городе больше десяти. Клиенты не понимали, что вводить: где фактический адрес или адрес прописки. С адресом должен совпадать и зипкод, который пишет клиент, так как потом это сверяется с паспортом.
Решение пришло неожиданно быстро, но пришлось провести много аналитики и посмотреть много цифр, чтобы убедиться, что так сделать можно. В старом варианте клиент заполнял каждое поле в адресе отдельно и в конце заполнял зипкод. Появилась возможность сразу запросить зипкод, а уже по нему притянуть информацию по адресу: область, город, барангай, провинцию. В итоге 5 полей свелись к одному, после которого мы писали «это ваш адрес?». Если да, клиенту оставалось заполнить только номер дома или название билдинга, если нет, то клиент вводил уже вручную. По результатам ввода зипкодов, попадание в адрес было на 90% точным. Но как известно, уникальные бордер кейсы встречаются, которые сложно было предусмотреть сразу.
Конверсия шага выросла на 30%, точную цифру уже не помню.
Какие кейсы были у вас в компании? Какую проблему находили и как решали?)
#личное
@jun_hi
👍1
На yellowimages.com хедер + поиск с фильтрами закрывает почти половину экрана при скролле.
Ладно у меня iMac 4К и экран большой, но если это ноут, то боль. Хотя, так тоже больно)
Что думаете?)
@jun_hi
Ладно у меня iMac 4К и экран большой, но если это ноут, то боль. Хотя, так тоже больно)
Что думаете?)
@jun_hi
Тут Сбер запустил сервис по доставке еды в Беларуси "Еду!". Думаю, кайф, должно быть что-то необычное.
Исполнительный директор говорит «Мы сделали это, сделали гораздо круче других игроков на рынке, сделали за несколько месяцев, сделали вопреки всем ограничениям», — сообщил Горшунов.
Видимо, за пару месяцев удалось скопировать лавку почти подчистую)
У них в инпуте правда, доставка поехала ещё. На QA не нашли денег((
Похоже? Ставлю 9 отличий из 10.
@jun_hi
Исполнительный директор говорит «Мы сделали это, сделали гораздо круче других игроков на рынке, сделали за несколько месяцев, сделали вопреки всем ограничениям», — сообщил Горшунов.
Видимо, за пару месяцев удалось скопировать лавку почти подчистую)
У них в инпуте правда, доставка поехала ещё. На QA не нашли денег((
Похоже? Ставлю 9 отличий из 10.
@jun_hi
Разбор.
В ноябре начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам).
🔥 Запись на ноябрь расписали за 2 дня.
Все разборы бесплатные. Делаю это, потому что хочу помогать и делать добро. Бескорыстно.
Если у вас есть макеты любого проекта, резюме, портфолио работ, вы хотите обсудить UX проекта, показать какой-то флоу — записывайтесь по ссылке: https://fb.sv/U8ukad
Буду очень признателен репостам в каналы / чаты и рекомендаций знакомым дизайнерам, которым это может быть полезно ❤️
@jun_hi
В ноябре начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам).
🔥 Запись на ноябрь расписали за 2 дня.
Все разборы бесплатные. Делаю это, потому что хочу помогать и делать добро. Бескорыстно.
Если у вас есть макеты любого проекта, резюме, портфолио работ, вы хотите обсудить UX проекта, показать какой-то флоу — записывайтесь по ссылке: https://fb.sv/U8ukad
Буду очень признателен репостам в каналы / чаты и рекомендаций знакомым дизайнерам, которым это может быть полезно ❤️
@jun_hi
Calendly
Anton Zakharov
Lead Product Designer в X5 Retail Group. Ранее Product Designer в Точке. Пишу немного про дизайн и жизнь в Telegram: @jun_hi
Дизайнер, привет pinned «Разбор. В ноябре начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам). 🔥 Запись на ноябрь расписали за 2 дня. Все разборы…»
Возможно, баян))
Иногда испытываю проблему: как можно быстро и удобно вырезать объект на картинке с минимальной погрешностью без фотошопа и в вебе, да ещё и с мобилки, иногда.
2 недели назад наткнулся на сервис, который делает это очень быстро и очень прост в использовании. Никаких лишних деталей, рекламы и других отвлекающих факторов.
https://cleanup.pictures/ — пользуйтесь)
Не реклама.
#полезное
@jun_hi
Иногда испытываю проблему: как можно быстро и удобно вырезать объект на картинке с минимальной погрешностью без фотошопа и в вебе, да ещё и с мобилки, иногда.
2 недели назад наткнулся на сервис, который делает это очень быстро и очень прост в использовании. Никаких лишних деталей, рекламы и других отвлекающих факторов.
https://cleanup.pictures/ — пользуйтесь)
Не реклама.
#полезное
@jun_hi
Контрастность.
При проектировании интерфейса важно проверять коэффициент контрастности. Смотря макеты, которые присылают для разбора, вижу в каждом втором одну и ту же проблему. Еле читаемый текст на кнопках, блеклые иконки, инпуты.
Проблема зрения присутствует у 1 из 12 мужчин и 1 из 200 женщин в мире. Если человеку трудно разглядеть, что написано на кнопке, понять, что это за элемент, то пользоваться продуктом желания не будет. Доступный цветовой контраст удобен для всех, а не только для людей с проблемами зрения.
WCAG (Web Content Accessibility Guidelines) говорит о том, что коэффициент контрастности должен быть не менее 4.5:1 для текста стандартного размера. Существуют требования и для крупного текста, иконок, инпутов и других элементов интерфейса.
Инструменты, чтобы проверить контраст цветов, например:
- Stark plugin (Figma, Sketch, Adobe XD, Chrome)
- Colorable
- Google Lighthouse
Удачи и не забывайте о людях с ограничениями.
#UXUI
При проектировании интерфейса важно проверять коэффициент контрастности. Смотря макеты, которые присылают для разбора, вижу в каждом втором одну и ту же проблему. Еле читаемый текст на кнопках, блеклые иконки, инпуты.
Проблема зрения присутствует у 1 из 12 мужчин и 1 из 200 женщин в мире. Если человеку трудно разглядеть, что написано на кнопке, понять, что это за элемент, то пользоваться продуктом желания не будет. Доступный цветовой контраст удобен для всех, а не только для людей с проблемами зрения.
WCAG (Web Content Accessibility Guidelines) говорит о том, что коэффициент контрастности должен быть не менее 4.5:1 для текста стандартного размера. Существуют требования и для крупного текста, иконок, инпутов и других элементов интерфейса.
Инструменты, чтобы проверить контраст цветов, например:
- Stark plugin (Figma, Sketch, Adobe XD, Chrome)
- Colorable
- Google Lighthouse
Удачи и не забывайте о людях с ограничениями.
#UXUI
Полезное #4
------------------
Плагины для Figma:
🔸 Supersearch — продвинутый поиск по всем элементам проекта
🔸 Vivid Gradient — более яркие и насыщенные градиенты, чем встроенные
🔸 Wire Box — преобразование фреймов в их lo-fi версии, нарисованные одним цветом, чтобы было проще думать об архитектуре и взаимодействиях, не отвлекаясь на визуальную составляющую
------------------
Интересные сервисы и сайты:
🔹 Anytype. Стильный лендинг нового сервиса для хранения и обработки персональной информации.
🔹 Справочник. Справочник по дизайну для Apple Watch на русском
🔹 Calltoidea. Большое количество референсов по фильтрам.
🔥🔥 Полезное для новичков. Статьи, новости, паттерны и вдохновиться тоже) Множество статей, полезные новичку и просто на почитать.
------------------
Бесплатные файлы:
▪️ Edge. Набор бесплатных иконок от Craftwork. 150 линейных иконок с острыми углами, каждая в трёх вариантах жирности. Форматы Figma и SVG.
▪️ Scenic. Набор из 60 иллюстраций для использования в качестве фонов сайтов или приложений. PNG бесплатно, исходники вместе с анимированными версиями стоят 78 $.
▪️ Smart Charts Kit. Набор из 15 симпатичных диаграмм для дашбордов, формат Figma.
------------------
#полезное
@jun_hi
------------------
Плагины для Figma:
🔸 Supersearch — продвинутый поиск по всем элементам проекта
🔸 Vivid Gradient — более яркие и насыщенные градиенты, чем встроенные
🔸 Wire Box — преобразование фреймов в их lo-fi версии, нарисованные одним цветом, чтобы было проще думать об архитектуре и взаимодействиях, не отвлекаясь на визуальную составляющую
------------------
Интересные сервисы и сайты:
🔹 Anytype. Стильный лендинг нового сервиса для хранения и обработки персональной информации.
🔹 Справочник. Справочник по дизайну для Apple Watch на русском
🔹 Calltoidea. Большое количество референсов по фильтрам.
🔥🔥 Полезное для новичков. Статьи, новости, паттерны и вдохновиться тоже) Множество статей, полезные новичку и просто на почитать.
------------------
Бесплатные файлы:
▪️ Edge. Набор бесплатных иконок от Craftwork. 150 линейных иконок с острыми углами, каждая в трёх вариантах жирности. Форматы Figma и SVG.
▪️ Scenic. Набор из 60 иллюстраций для использования в качестве фонов сайтов или приложений. PNG бесплатно, исходники вместе с анимированными версиями стоят 78 $.
▪️ Smart Charts Kit. Набор из 15 симпатичных диаграмм для дашбордов, формат Figma.
------------------
#полезное
@jun_hi
Я частенько смотрю англо-язычные видео на NNG и других каналах по UX, либо какие-то записи конференций на английском. И с моим уровнем это проблематично, чтобы сходу понимать суть и не делать кучу пауз.
Решение простое: заюзать Яндекс.Браузер, который в реал-тайме переводит видосы на ютубе (где чаще всего смотрю) сходу, с приятной озвучкой. Ещё и на пол делит (мужской / женский).
Кстати, на мобилке (IOS) тоже работает в приложении Яндекса.
Использую Яндекс.Браузер только для этого, а в остальном шлак.
Это не реклама. Юзайте)
#полезное
@jun_hi
Решение простое: заюзать Яндекс.Браузер, который в реал-тайме переводит видосы на ютубе (где чаще всего смотрю) сходу, с приятной озвучкой. Ещё и на пол делит (мужской / женский).
Кстати, на мобилке (IOS) тоже работает в приложении Яндекса.
Использую Яндекс.Браузер только для этого, а в остальном шлак.
Это не реклама. Юзайте)
#полезное
@jun_hi
👍1