Лучшие практики модальных окон. Компоненты дизайн-системы

В статье подробно рассматривается все части модального окна и даются конкретные советы по их проектировке.

Стоит отметить, что рассматриваются только десктопные модалки с UI-кита автора статьи, но материал от этого не становится менее полезным.

Внутри статьи:
– Использование;
– Анатомия;
– Размеры и отступы;
– Расположение;
– Появление;
– Прокрутка с прилипанием и без него;
– Переключение объектов;
– UX-редактура.

Ссылка на статью

Призыв к установке приложения

Новая статья от Hard Client. В этот раз идёт разбор блоков с призывом установки приложений на сайтах интернет-магазинов.

Внутри статьи:
– Размещение блока;
– Призыв к действию;
– Highlight приложения;
– Лендинг приложения;
– Кнопки сторов;
– QR-код;
– Целевые страницы.

Ссылка на статью

Сыкло прибыло на место 😬

Мегафон, 1997 год

Сыкун вернулся

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

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

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

Также была плотная пачка лекций с инсайтами и референсами, вызывающими эмоции: Гриша Кочегов про нейронки и их коммерческое применение в дизайне, Макс Десятых про путь развития и «смерти» дизайнера и максимально эмоциональная лекция Владислава Деревянных.

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

Объяснение работы UX-дизайнера на человеческом языке

Бывает так, что родные или друзья спрашивают: «Кем ты работаешь?» и ответить нормально не получается, потому что профессию UX-дизайнера не так-то легко объяснить. Имеется куча разных аспектов и конечный результат работы не всегда осязаем.

Ким Салазар из NNGroup предложила способ объяснения работы UX-дизайнера понятным для всех языком.

Видео на английском, но всего 4 минуты. Тем, у кого английский «из bad и огорчений» могу предложить 2 варианта: Яндекс Браузер с диктором переводчиком, либо перевести нативные титры с ютуба, они на удивление нормально передают смысл.

Ссылка на видео

Кстати, до этого не так часто читал статьи на NNGroup, а там, оказывается, много годноты.

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

Возможно, скоро будет много полезностей на английском языке.

Проектирование валидации форм

Большая статья Виталия Фридмана с подробными разборами подходов, применяемых для валидации веб-форм.

Внутри статьи:
– Многообразие способов форм;
– Недостатки валидации;
– Обработка серьёзных ошибок;
– Паттерн «Поощрять рано, наказывать поздно»;
– Работа с копированием-вставкой;
– Пользовательский отказ от встроенной валидации;
– Проверка по запросу;
– Проверка при отправке.

Ссылка на статью

Может, создать базу знаний в Notion?

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

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

Что думаете?

Про технический этап собеседования

Серия видео от Ивана Васильева — ex. Head of design Альфа Банка, про подготовку к 3-м отдельным частям технического этапа собеседования на должность продуктового дизайнера.

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

Ссылки на видео:
– Презентация портфолио;
– App critique;
– Whiteboard.

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

Ссылка на материалы

UX Scrum- и Kanban-досок в российских сервисах

Исследовательский центр Everest провёл анализ российский сервисов для работы команд по Scrum и Kanban.

Разбираемые продукты:
– Аспро.Cloud;
– Kaiten;
– Яндекс Трекер;
– Битрикс24.

Ссылка на исследование

Сильные и слабые стороны количественных и качественных исследований

Очень старая статья c сайта UX Matters с разбором плюсов и минусов количественных и качественных методов исследований.

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

Внутри статьи:
– Про количественные исследования;
– Про качественные исследования;
– Комбинация методов;
– Саммари по разбору.

Ссылка на статью

Каталог необычных паттернов

Каталог не тривиальных паттернов проектирования, собранный Мэгги Эпплтон, основанный на собственных наблюдениях и исследованиях.

Список паттернов:
– Прозрачность алгоритмов;
– Предполагаемая аудитория;
– Страницы ежедневных заметок;
– Эпистемическое раскрытие;
– Народные интерфейсы;
– Программируемые заметки;
– Зоны для программирования;
– Пространственный веб-сёрфинг.

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

Понравилась система «Сад», привязываемая к каждому посту. Если мысль, разбираемая в публикации, новая и автор ещё не очень уверен в материале, то ставится метка «Саженец», если понимания по теме становится больше и это было отражено в посте — «Бутон», и т.д.

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

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

Про сам контент пока что ничего сказать не могу, успел изучить только паттерны, но судя по прочитанному, годный источник информации.

Ссылка на сайт Мэгги

Психология для UX: учебное пособие

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

Ресурсы в этом учебном пособии сгруппированы по следующим темам:
– Внимание;
– Память;
– Восприятие;
– Принятие решений и выбор;
– Моторные процессы и взаимодействие;
– Мотивация;
– Когнитивные предубеждения;
– Убеждение и влияние;
– Эмоции и восторг;
– Отношение к технологиям.

Ссылка на пособие

Раньше ныл, что было мало реакций, но шейров было много, а теперь всё просело. Неужели стал неполезный материал кидать?

У меня были для этого причины, точнее желание попробовать)

Ссылка на причину

Процесс сравнения товаров

Новый разбор Станислава Храсталёва (автора HardClient). В данной статье рассматривается процесс сравнения товаров в e-commerce.

Внутри статьи:
– Размещение точек входа;
– Кнопка добавления в сравнение;
– Подтверждение;
– Кнопка перехода к сравнению;
– Placeholder страницы сравнения;
– Типы сравнения товаров;
– Сравнение по категориям;
– Прокрутка списка товаров;
– Карточки товаров;
– Сравнение характеристик;
– Удаление из сравнения.

Ссылка на статью

Подборка материалов для продуктового дизайнера

Очень крутые и максимально полезные материалы под точечные запросы и темы.

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

Подборки:
– Продуктовый подход;
– Проектирование UX;
– CustDev;
– Этичный дизайн;
– Галереи вдохновения.