Социальные сети.

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

Вход через соц.сети позволяет пользователям использовать свои существующие учётки в Facebook, Twitter, Google, LinkedIn или другие для регистрации в вашем продукте.

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

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

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

И ещё, если аудитория в основном IOS, то сейчас можно добавлять вход через Apple. (Sign with Apple ID).

#UXUI

@jun_hi

Обновленные комментарии в Figma (думаю, некоторым зайдёт).

— Добавлен поиск по ключевому слову или имени
— Добавлен аватар автора комментария
— Предварительный просмотр при наведении
— Можно не делать треды в Слаке по макетам, а всё сразу обсудить в Фигме и разметить ключевыми словами
— Можно выделять целые флоу, просто их обвести.
— Появятся реакции на сообщения (оО)

Нововведения станут доступны для всех пользователей в ближайшие несколько недель.

Читать подробнее
И тут

#figmanew

@jun_hi

Командная работа

Дизайнеру важно работать с командой и постоянно с ней взаимодействовать.

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

🟢 Хорошо, когда дизайнер общается с командой. Все имеют доступы к его макету (но не к странице, где дизайнер работает и пробует множество решений), а к странице, где показываются промежуточные результаты, чтобы каждый мог оставить комментарий и дать пользу. Важно как можно раньше начинать демонстрировать то, что вы проектируете. Как продактам, так и разработчикам. И в целом полезно обсуждать макеты на разных этапах. Так, кто-то может увидеть нарушение логики во флоу, а кто-то дать полезные рекомендации, как можно флоу сделать удобнее.

---------------------------

Про разработчиков чуть раскрою.

Вовлекайте их в процесс проектирования постоянно. Прислушивайтесь к их советам и узнавайте как они «создают» ваши макеты в коде. Важно понимать, насколько ваше решение в макете будет сложным и времязатратным. Необходимо понимать, как продукт работает технически, хотя бы на минимальном уровне (не нужно уметь писать backend).

Буду рад услышать ваши мнения на этот счёт. Как вы взаимодействуете с командой? 👨‍💻

#личное

@jun_hi

Текст и элементы управления.

Элементы управления (например чекбокс / радиобаттон) лучше располагать перед текстом.

Такое единообразие более удобное с визуальной точки зрения и создаёт ощущение упорядоченности пользовательского интерфейса.

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

#UXUI

@jun_hi

Полезное #2

------------------

Плагины для Figma:

🔸 Ghost — генерирует скелетон-экраны (заглушки загрузки) на основе вашего проекта

🔸 Shaper — набор разнообразных шейпов, которые будет непросто нарисовать стандартными инструментами. Сердечко, капля, спираль, звезда и так далее

🔸 SBOL Typograph — плагин для исправления и форматирования текста на основе правил типографики со встроенным Ёфикатором.

------------------

Интересные сервисы:

🔹 Startup 5. Полностью переработанный конструктор сайтов и лендингов от команды Designmodo. Внутри есть масса готовых блоков, из которых можно быстро собирать типовые страницы.

🔹 Mesh gradients. Платные плагины для Sketch и Figma для создания сложных сетчатых градиентов. Лицензия на одного стоит 10$ в год, на команду — 40.

🔹 UIHut. Недавно обновился до версии 2.0 и стал номер 1 на ProductHunt. Внутри огромное количество шаблонов, иллюстраций, иконок и масса других файлов.

------------------

Бесплатные файлы:

▪️ Ultimate color palette system. Удобная заготовка системы цветов проекта в Figma.

▪️ 3D icons. Более 120 качественных 3D-иконок в разных форматах. Каждая отрендерена в 4 стилях и 3 разных положениях, всего получается более 1440 изображений.

▪️ Mockup's Iphone 13. Подборка бесплатных мокапов Iphone 13 в блоге Dribbble.

------------------

#полезное

@jun_hi

⠀
Пароль.

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

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

#UXUI

@jun_hi

Кто вдруг не смотрел, Яндекс выложил 18 видео со своих лекций по дизайну.

Полезная информация об особенностях дизайна продуктов, коммуникаций, прототипировании и анимации, а также о работе в команде.

Посмотреть тут

@jun_hi

#видео

Саша Окунев недавно выступал на стриме от Фигмы и дал очень много полезного контента на тему дизайн-системы в Озоне.

Рекомендую к просмотру)

youtu.be/SunT0K5ULH4

И файл презентации бонусом: https://figma.fun/qxp2NF

@jun_hi

#дизайнсистема

Что делаю в Х5 Retail Group? 

Коротко, что это. X5 Retail Group, — российская розничноторговая компания, которая управляет продуктовыми торговыми сетями «Пятёрочка», «Перекрёсток», «Карусель», цифровыми бизнесами «Vprok.ru Перекрёсток», «5Post», «Около» и медиаплатформой «Food.ru».

---------------------------

Я пришёл в х5 на внутренние интерфейсы магазина Vprok.ru с 3000+ сотрудников, которые работают в ПО ежедневно.

Задача — создать единое окно для сотрудников: операторы, супервизоры, маркетинг, копирайтеры и другие отделы, которые взаимодействуют с функционалом из единого места. Проблема состоит в том, что в процессе звонка у оператора открыто десяток вкладок, которые превращаются в кашу и оператор путается, где и что у него открыто и где какую информацию смотреть.

Так как продукт только в начале пути, то вначале проектируется интерфейс для операторов, которые принимают тысячи звонков каждый день. 

Что сделал за 3 месяца:

1) Провёл анализ текущего интерфейса. Разобрал «до косточек» на сущности, которые присутствуют у той или иной роли и отобразил в миро со скриншотами и логикой, как это работает. Текущий интерфейс проектировали 6 лет назад на стандартных фреймворках и уже устарел. Функционал разрастается стремительно, но интерфейс не даёт возможности масштабироваться.

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

3) После сбора аналитики, общения с операторами и разбора текущего интерфейса, началась работа по изменению как с точки зрения ux, так и ui.

За следующие 2 месяца спроектировал 100+ экранов и собрал кликабельный прототип, с помощью которого проверял решения короткими юзабилити тестами с операторами. В процессе звонка оператор решал задачи а я смотрел на процесс решения, задавал вопросы в конце и делал вывод, нужно ли что-то изменить или нет.

С октября задач стало сильно больше и я стал лидировать направление внутренних интерфейсов Впрок. Меньше стал работать руками, но делать больше менеджерских задач. Об этом потом 🙂

---------------------------

Давайте познакомимся, где работаете и что делаете в компании?
Какие задачи? Насколько большая команда?

#личное

@jun_hi

Начали разбор работ с Богданом из EPAM!) Приходите, кто хочет послушать)

https://www.youtube.com/watch?v=UWYwrWB79j4

@jun_hi

Чёрная пятница.

Сегодня все каналы гудят скидками про Чёрную пятницу.

Но скидки мне не так интересны, как подход к визуализации этих скидок на сайтах) Из РУ сегмента очень зашло, как это сделали ребята из Золотого Яблока (сайт им делали ONY).

Посмотрите на красоту: https://goldapple.ru

Что думаете?) Если у вас есть примеры красивых оформлений к ЧП — присылайте, поглядим вместе) Только не ОЗОН. Я теряю сознание от шлака, который там находится на главной при каждых акциях и распродажах.

@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

Увидел тут в приложении Авиасэйлс в частых вопросах.

«В отличие от вашего бывшего отвечаем не дольше 5 минут».

Как относитесь к такому юмору?) Если это можно назвать юмором, конечно. Я, если честно, не очень, потому что я парень) И у меня нет «бывшего», да и эта шутка давно себя изжила.

@jun_hi

Озон какое-то воплощение ада.

Понятно, что маркетплейс, понятно, что хочется показать прям всё всё, но это первый и главный экран, а в меня лупят ядовитым розовым, кучей скидок и не ясно, что в итоге делать то))

Озон, дай спокойно посмотреть каталог))

Вы как относитесь к такой «‎агитации»‎ скидок?))

@jun_hi

Финтех и Филиппины.

Когда пришёл в Unabank — digital банк на Филиппинах, который появится к 2025 году, в сентябре 2020, команда делала продукт UnaPay. Это выдача кредитов онлайн. Стандартная, как и везде, как показалось вначале. Нужно было с нуля придумать бренд, спроектировать сайт и анкету для получения кредита. 

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

Проектировать UnaPay в одиночку по началу было не легко. На Филиппинах другое законодательство, банковские проволоки и юридические ограничения, нежели в РФ. Для выдачи кредита запрашиваются счета оплаты коммунальных услуг, интернета, тв или воды. Подойдёт квитанция, где видно, что платит человек, который берёт кредит. Адрес совпадает с паспортом, по которому платятся ком.услуги. В РФ такого не встречал.

Проектируя анкету на кредит возникали некоторые не понимания. Филиппинцы ненавидят поле ФИО, которое вписывается в один инпут. Они пишут туда фигню и заявка не проходила из-за скоринга. Поэтому ФИО разделили на 3 отдельных инпута и правильность заполнения выросла в каждой третьей заявке. It's magic.

Проблемы возникли и на адресе. На Филиппинах не стандартная система административных единиц. В России это Область, город, улица. У них провинция > город > барангай > улица > дом. Барангай это «двор» в России. Проблема в том, что этих барангаев в одном городе больше десяти. Клиенты не понимали, что вводить: где фактический адрес или адрес прописки. С адресом должен совпадать и зипкод, который пишет клиент, так как потом это сверяется с паспортом.

Решение пришло неожиданно быстро, но пришлось провести много аналитики и посмотреть много цифр, чтобы убедиться, что так сделать можно. В старом варианте клиент заполнял каждое поле в адресе отдельно и в конце заполнял зипкод. Появилась возможность сразу запросить зипкод, а уже по нему притянуть информацию по адресу: область, город, барангай, провинцию. В итоге 5 полей свелись к одному, после которого мы писали «это ваш адрес?». Если да, клиенту оставалось заполнить только номер дома или название билдинга, если нет, то клиент вводил уже вручную. По результатам ввода зипкодов, попадание в адрес было на 90% точным. Но как известно, уникальные бордер кейсы встречаются, которые сложно было предусмотреть сразу.

Конверсия шага выросла на 30%, точную цифру уже не помню. 

Какие кейсы были у вас в компании? Какую проблему находили и как решали?)

#личное

@jun_hi

На yellowimages.com хедер + поиск с фильтрами закрывает почти половину экрана при скролле.

Ладно у меня iMac 4К и экран большой, но если это ноут, то боль. Хотя, так тоже больно)

Что думаете?)

@jun_hi

Разбор.

В ноябре начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам).

🔥 Запись на ноябрь расписали за 2 дня.

Все разборы бесплатные. Делаю это, потому что хочу помогать и делать добро. Бескорыстно.

Если у вас есть макеты любого проекта, резюме, портфолио работ, вы хотите обсудить UX проекта, показать какой-то флоу — записывайтесь по ссылке: https://fb.sv/U8ukad

Буду очень признателен репостам в каналы / чаты и рекомендаций знакомым дизайнерам, которым это может быть полезно ❤️

@jun_hi