Завтра.
10:00 мск.
Запись.
Разборы.
Июль.
5 минут, чтобы успеть.

@jun_hi

Разбор. Открыта запись на июль.

Кто новенький и ещё, вдруг, не знает :)

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

С этого времени пообщался с 90+ классными ребятами и дал полезную обратную связь каждому.

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

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

———

Кто уже проходил разбор, буду рад вашему отзыву в комментариях, чтобы другие почитали фидбек) Будет полезно)

@jun_hi

Запись закрыта. Это рекорд. 5 минут) Кто успел, увидимся в июле, кто нет, в августе ❤️

Всем спасибо!)

Периодически можно проверять календарь, иногда разборы отменяются по разным причинам и появляется слот)

Портфолио для продуктового дизайнера новичка.

Если вы только начинаете в дизайне, но у вас нет коммерческого опыта и проектов, пост для вас. Что делать?

1. Тема. Определитесь с темой для вашего «пет-проекта». Возможно, есть проблема в вашей повседневной жизни и нет для неё решения. Например, вам каждый день лень выносить мусор из дома. Сделайте сервис, который найдёт людей рядом, которые зайдут к вам, заберут его и получат 20 рублей (например). Для школьников зайдёт на газировку собрать. Проблем вокруг десятки, если не сотни и над каждой можно подумать, как обернуть это в интерфейс, а затем и кейс.

Не делайте в рамках «пет-проекта» CRM систему с 5 000+ функциями и 10 000+ экранами. Достаточно решения одной проблемы вашим интерфейсом.

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

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

3. Тесты. У вас есть тема проекта, пользователи, которые сталкиваются с такой же проблемой, как и вы, небольшая аналитика после проведённых коротких интервью. Проектируйте интерфейс, соберите прототип и проведите быструю коридорку (например), чтобы быстро выявить проблемные места в вашем интерфейсе. Вносите правки, убедитесь, что проблема решается со стороны юзера и оформляйте кейс.

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

5. Проект готов. Вы великолепны.

———

Вот вам примеры 4х кейсов. Все учебные. Но их интересно изучать, особенно Шазам для птиц, блин) Лучше 2-3 таких кейса, чем смотреть 15 бездушых кейсов на биханс с непонятными картинками, по которым ничего не понять.

Кейс 1
Кейс 2
Кейс 3
Кейс 4

———

@jun_hi

Статья о сортировке листинга товаров в E-commerce от ребят из HardClient

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

И ещё много полезного) Рекомендую всем, кто делает магазины.

👉 Читать статью

@jun_hi

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

Ну я и закинул. Ну и меня порекомендовали среди 100+ заявок)

Не знаю, случайность ли это или мой канал действительно интересный, но всем, кто подписался с канала Маркетварь, привет!

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

Пишите, чем занимаетесь, зачем меня читаете и откуда вы :)

Кто с Екатеринбурга, рад встретиться лично за кофе и пообщаться ❤️

@jun_hi

Как СберМаркет использует Яндекс.Толоку для тестирования идей в дизайне.

Внутри:
– Какие проблемы решают с помощью Толоки
– Что нужно знать дизайнеру про Толоку
– Совместимость Толоки с сервисами юзабилити-тестов
– Четыре вида тестов
– Как понять, что пользователи вас понимают
– Как убрать нерелевантных исполнителей

Интересный и малозатратный подход)

👉 Читать статью

———

@jun_hi

Статья от Ромы Шамина про доступность в интерфейсе. Рекомендую прочитать всем)

Внутри:
– Доступность текста и цвета
– Инструменты
– Цветовое кодирование
– Шрифт и зум
– Тёмная тема

👉 Читать статью

@jun_hi

Дизайн-задачи

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

Зачастую задачи звучат в духе «надо сделать кабинет». Или «надо вот сюда добавить вот этот функционал». Далее оунер задачи пропадает и вы остаётесь с этим 1на1. И это нормально.

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

Я никогда не приступаю к отрисовке макетов, пока не получу ответы на все свои вопросы. Иначе зачем нужны продакты, которые не могут ничего рассказать по задаче?)) Мне тем более не ясна её суть, если её даже не понимает бизнес)

Всегда важно понимать, зачем вы делаете ту или иную фичу и для кого вы её делаете. Кто конечный пользователь. Мы делаем решения не для СЕО или для себя, а для юзера.

Поэтому, когда к вам приходят с абстрактной задачей, не бегите открывать Фигму и сразу что-то рисовать. В 100 случаях из 100 время будет потрачено впустую и потом придётся всё переделывать) Зачастую это касается начинающих дизайнеров, которые сразу пытаются придумать решение, ещё ничего не выяснив. Так нинада.

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

———

Как вы подходите к решению абстрактных задач в духе «надо сделать полноценный раздел профиля». И потом продакт пропадает)) Пишите)

@jun_hi

UX тексты в интерфейсе.

Ребята из InDriver написали статью о том, как с помощью текстов можно сделать продукт лучше и показали пару примеров, как они переписали тексты внутри приложения.

Внутри:
– Какая основа нужна для хорошего UX
– Что такое UX тексты
– За что отвечают UX писатели
– UX тексты для бизнеса

И примеры переписанных текстов с пояснением.

Статья не большая и легко читается)

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

👉 Читать статью

———

@jun_hi

Как думаете, почему многие компании уходят в простые лого, которые выглядят как обычный набранный текст?

Старые лого были с какой-то уникальностью. Новые все как один.

Я не знаю ответ, если что 😂 может кто знает) или есть статьи на эту тему.

@jun_hi

Начало недели начну с очень важного совета:

Делайте дизайн хорошо, а плохо не делайте 👍

Всем продуктивного понедельника.

Figma и дарк паттерны.

Наткнулся тут на статью, как Фигма применяет дарк паттерны в своём интерфейсе. Делают они это довольно просто.

У вас есть файл. В файле вы ставите параметр «Все, у кого есть ссылка» и «can edit», то есть все, кто имеет ссылку смогут редактировать файл. Как только человек заходит по ссылке в ваш проект, он автоматически становится редактором и вы автоматически за него платите +15 долларов, сами того не подозревая.

Нет никакой информации об этом в процессе предоставления доступа или, когда кто-то присоединяется к файлу как редактор. Просто в биллинге Фигма добавляет 15 баксов и кайф)

А дальше ещё круче. Этот человек, кто зашёл к вам в файл, как редактор, не зная того, зовёт еще 20 человек по ссылочке. И оп, они тоже редакторы и это ещё +300 долларов в месяц за каждого.

Я так один раз попался, когда Фигма списала не 15 баксов, а 30. Я удивился, а потом вспомнил, что случайно дал знакомому редактора, чтобы он быстро накидал одну штуку за 5 минут, а убрать забыл. На чем и попался)

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

———

Кто-то сталкивался с таким?) Какие ещё дарк паттерны замечали за Фигмой?

@jun_hi

Статья о том, как правильно спроектировать страницу цен на сайте. Кейсов очень много.

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

– Теряют ориентацию, когда большое описание тарифов, так как теряются заголовки столбцов, по которым удобно сравнивать тарифы.

– Если тарифы идут слево направо (частый кейс), то пользователь предполагает, что самый левый тариф – самый дешёвый. Самый правый – дорогой.

– Старайтесь делать максимально простое ценообразование, например как у Stripe или у Fathom Analytics

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

Она на английском, но проблем с переводом, думаю, не будет)

👉 Читать статью

@jun_hi

Есть Нобелевская премия за учёные открытия, а я бы выдал её Стасу, который пишет просто огромные и полезные статьи за E-commerce.

Очередной шедевр про работу с корзиной на сайтах со 135 примерами ошибок и пояснениями к ним.

Внутри:
– Кнопка корзины (как использовать и что с ней делать)
– Подтверждение добавления в корзину
– Элемент корзины в шапке
– Страница корзины
– Placeholder корзины
– Список товаров в корзине
– Допродажи внутри

👉 Читать статью

———

Кто не читал предыдущие статьи, вот они:
– Карточки товаров в листинге
– Фильтрация листинга товаров
– Сортировка листинга товаров
– Работа с поисковой строкой
– Фото на странице товара
– Характеристики товара
– Цена товара и скидки
– Рейтинг и отзывы о товарах
– Допродажа на странице товара

Всем рекомендую почитать в свободное время) Объёма много, но очень полезно.

———

@jun_hi

Самое приятное, что можно получать, когда помогаешь людям и делаешь что-то от души) Такие сообщения греют душу и я понимаю, что делаю всё не зря.

Спасибо всем, кто меня читает и приходит на разборы ❤️

Список сайтов, где можно черпать референсы и вдохновляться (из моих закладок)

– https://godly.website
– https://www.btw.so/marketing/landing-page-examples
– https://shuffle.dev/components/all/all/team
– https://uigarage.net
– https://interfaceingame.com (игровые интерфейсы)
– https://onepagelove.com/inspiration
– https://uxarchive.com
– https://www.uisources.com/screenshots
– https://www.siteinspire.com
– https://madeontilda.ru/
– https://ecomm.design
– https://www.upshift.supply
– https://pagecollective.com/pages/views/landing-page/
– https://klart.io/pixels
– https://minimal.gallery
– https://saaslandingpage.com
– https://www.ogimage.gallery
– https://scrnshts.club
– https://www.lapa.ninja
– https://uihut.com
– https://www.theappfuel.com/flows/onboarding
– https://www.niceverynice.com/components
– https://screenshotcreator.com/inspire
– https://land-book.com/

Лайк, репост))

———

@jun_hi

Модерация респондентов

Мария Нижегородова из ПСБ написала интересную статью про особые категории респондентов на UX-исследованиях.

Она рассказала про пять типов клиентов:
– Дворовый парень со смартфоном
– VIP клиент
– Провинциал
– Эксперт
– Продвинутый

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

Довольно интересно, рекомендую)

👉 Читать статью

@jun_hi

Интересная статья о том, как спроектировать регистрацию с точки зрения пользователя через email или соц.сети, чтобы ничего не забыть.

Внутри:
- Регистрация через Email
- Регистрация и логин через соц.сети
- Логин
- Восстановление пароля
- Итоги

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

👉 Читать статью: https://vc.ru/dev/156552-instrukciya-kak-napisat-idealnuyu-registraciyu

@jun_hi

Увидел тут на просторах. А зачем тестовое давать?))

Кто сталкивался с таким, сильно расстраивались?) вроде и похвалили, но работать не позвали 😂

@jun_hi

Что для вас UX? Как вы понимаете этот термин?

Я встречал на своём пути десятки понятий и все интерпретируют его по-разному) Для кого-то это чёрно-белые блоки (дада), для кого-то это cjm и userflow, для кого-то опыт пользователя))

А для вас?

@jun_hi