Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2021.
Курс Future London Academy по продуктовому дизайну 2021
Традиционно курирую курс Future London Academy по продуктовому дизайну. Он пройдёт 24-26 августа в онлайне. В программе Native Design (Kyle Loughlin), Anaplan (Saskia Liebenberg), Huge Inc, Claire Rowland, Arrival (Jure Martinec) и Magic Leap (Daniel Nieuwenhuizen) с рассказами о дизайн-менеджменте, дополненной реальности, accessibility и современном дизайн-процессе в целом. Хотя выбраться из онлайна всё ещё не дают постоянные ограничения, но за скоро как два года пандемии научились делать его дико интересным.
Паттерны и лучшие практики
The perfect link
Rian Rietveld разбирает способы правильно оформлять ссылки на сайтах. Так, чтобы с ними было комфортно взаимодействовать как обычным пользователям, так и людям с ограниченными возможностями.
The UX of video game tutorials
Крутейший разбор подходов к обучению пользователя основным механикам в играх от Bramha Dalvi. Он разбирает разные подходы на реальных примерах.
How to document accessibility as a UX designer
Elise Livingston показывает, как описывать поведение интерфейса для учёта требований accessibility. Получается наглядная спецификация для разработчиков.
Гайд по UX-проблемам
Markswebb предлагают свою классификацию проблем в интерфейсах. Они приводят примеры для каждой из них.
Chatbot Rank 2021 — исследование клиентского опыта чат-ботов в цифровых каналах бизнеса
Markswebb изучили чат-ботов в банках и других популярных отечественных приложениях. Обзор с описанием ключевых проблем.
Command Palette Interfaces
Небольшой обзор комбинации командной строки и подсказок в современных интерфейсах от Philip C Davis. Они дают возможность как быстро набрать команду, так и выбрать вариант из списка.
Chrome vs Brave — How To Use Ethical Design To Win Customers
Сайт Growth.Design разбирает процесс встречи нового пользователя в защищённом браузере Brave.
A UX case study on Apple AirTags
Peter Ramsey проанализировал интерфейс взаимодействия с поисковыми маячками Apple AirTags.
Always Provide a Submit Button Adjacent to the Search Field on Mobile (21% Don’t)
Sally Collins из Baymard рассказывает о лучших вариантах расположения кнопки поиска в интернет-магазинах.
7 Tips to make chatbot sound smarter when things go wrong
Xindeling Pan из IBM показывает, как сделать бота более человечным и лучше отрабатывать тупиковые ситуации.
Direct-to-Consumer Research — 5 Effective Ways for DTC Sites to Tell Their ‘Brand’ & ‘Product’ Stories
Kathryn Totz из Baymard описывает основные выводы из исследования сайтов-магазинов маленьких брендов. Что ожидают пользователи от них.
A UX case study on YouTube Shorts
Peter Ramsey разбирает интерфейс YouTube Shorts, клона TikTok. Клон получился плохим.
94% of the Largest E-Commerce Sites Are Not Accessibility Compliant
Alex Krzyminski из Baymard анализирует ситуацию с поддержкой accessibility в крупных интернет-магазинах. В целом ситуация печальная.
Дизайн-системы и гайдлайны
Semrush Intergalactic Design System
Дизайн-система сервиса Semrush. Компоненты в коде показаны скриншотами со ссылкой на исходник на GitHub, есть библиотеки в Figma и общие принципы построения интерфейсов.
Дизайн-система ПИК-Проект
Дизайн-система строительной компании ПИК-Проект (есть компоненты в коде и шаблоны в Figma). Ссылки на неё нет, но есть описание в портфолио агентства Landau.
WWDC 2021
Apple показали новые версии платформ на ежегодной конференции, которая, как и всё остальное в этом году, прошла в онлайне. Традиционно подсветил обновления, которые касаются дизайнеров интерфейсов:
iOS 15
Это итеративное улучшение на базе текущего дизайна — фокус скорее на возможностях ключевых приложений. Что можно подсмотреть в интерфейсе для своих задач:
Переработанная панель навигации в Safari — это плавающая панель с адресом сайта и списком вкладок вместо стандартного tab bar. В браузере также появились расширения.
Анализ изменений в Safari. Сильно освежается дизайн стандартных полей форм, при переносе адресной панели вниз экрана образуется дырка под «чёлкой», а сама панель может перекрывать элементы навигации внизу сайта.
В уведомлениях показывается фото контакта, а не просто иконка приложения. Они также собираются в мини-дайджест (например, утром).
Новый вид стопок фото в мессенджере. А также индикатор фото, ссылок, музыки и другого контента, которым поделились в мессенджере.
В фотографиях распознаётся текст — его можно скопировать, а по телефону в объявлениях на улице — позвонить. Всё это также можно перевести на другой язык (пока у них ограниченный набор). Камера распознаёт и суть объектов — например, даст справку о достопримечательности или картине.
В приложении «Здоровье» появился необычный список контактов с интересным представлением аватаров (градиентный фон под ними).
Фокусный режим, который выключает часть уведомлений и показывает статус в мессенджере.
Новый вид карт, включая навигацию в 3D и дополненной реальности.
Развёрнутые детальные результаты поиска.
Редизайн приложения «Погода». Добавили декоративные карточки.
В AppStore теперь можно задавать разные иконки приложения, скриншоты, видео и описание для разных сегментов пользователей. Можно также проводить A/B-тесты для поиска лучших вариантов.
В гайдлайнах появился раздел об инклюзивных текстах в интерфейсах.
Можно использовать годный шаблон для Figma от Joey Banks.
iPadOS
Наглядное переключение режима мультизадачности. Среди них появился режим центрированного попапа (например, для написания письма), а все окна одного приложения можно увидеть списком. Для двухколоночного вида можно создавать готовые комбинации.
Ноутбуком и планшетом можно будет управлять с одной клавиатуры и мыши, устройства автоматически связываются друг с другом через Universal Control. Например, можно перетащить картинку с планшета на компьютер.
При подключении клавиатуры приложение показывает горячие клавиши.
Виджеты добрались и до планшета. Как и автокаталог приложений.
Песочница для создания приложений на Swift.
MacOS Monterey
watchOS8
Интерфейс развивается органично, так что пока обошлось без революций. Бета-версия должна появиться в июле, а финальная станет доступна на осенней презентации.
iOS 15, Humane
Команда сервиса Potential предлагает следующий шаг в сохранении баланса между проведённым временем с телефоном и чем-то реально важным. Это идеи для iOS 15 и следующих версий, которые снижают зависимость от соц.сетей и других плохих привычек.
Windows 11
24 июня Microsoft показали Windows 11. Это крупный редизайн, который работает на принципах дизайн-системы Fluent UI. Долгое время её можно было встретить скорее в их легендарных эффектных видео-презентациях, но не реальных интерфейсах. Зимой этот разрыв пропадёт.
Поскольку вы вряд ли делаете приложения для Windows, традиционный разбор по деталям вряд ли имеет смысл. Нет, доля операционки в мире огромная (в районе 75% по разным данным). Но модель универсальных приложений радикально менее востребована, чем у Android и iOS. А гайдлайны важно знать в первую очередь для них. Но из общеобразовательного интереса это полезно.
Дизайнеры Microsoft рассказали об идеологии и изменениях:
Из заметных визуальных обновлений:
Полупрозрачность у окон (материал «акрил» из Fluent Design):
Заметные скругления у элементов:
Мягкие тени:
Новые цветные пиктограммы вместо минималистичных:
Переосмысленная тёмная тема (изначально она появилась в Metro Design ещё в 2010 году, раньше всех на рынке):
Вариативный шрифт Segoe UI:
Куски всего этого можно было увидеть и раньше в экспериментальной Windows X для устройств с двумя экранами, переосмысленных иконках приложений и других регулярных тизерах Microsoft Design. А лента виджетов и вовсе приехала в основную Windows 10 в новом виде месяц-два назад.
Само собой, перепроектированы ключевые экраны и приложения.
Панель задач и меню пуск:
Поиск:
Проводник (он отказывается от меню Ribbon UI, хотя в MS Office этот интерфейс останется):
Настройки:
Магазин приложений:
Неплохой обзор со скриншотами.
В Windows можно будет запускать приложения для Android (через магазин Amazon AppStore). Интересно будет посмотреть на востребованность.
Этим обновлением Microsoft прощается с Metro Design, который всё ещё является основой Windows 10. Идеология была революцией на рынке — в эпоху убогой скеоморфичной цыганщины ребята показали, как должен выглядеть современный цифровой дизайн. К сожалению, историю часто перевирают, так что поверхностное мнение приписывает «плоский дизайн» Apple, которые пришли на эту вечеринку последними.
В долгорочном использовании Metro Design оказался сильно ограничивающим (хотя экосистема приложений на нём не взлетела не поэтому). Но его роль в истории дизайна интерфейсов — наоборот, сильно поменяла отрасль. Посмотрим, что получится у Fluent Design. Как минимум видео-презентации новых приложений каждая вторая компания делает по канону Microsoft.
State of the Windows — How many layers of UI inconsistencies are in Windows 10?
Интереснейший разбор предыстории ключевых элементов интерфейса Windows. В какой версии они впервые поменялись и как обновлялись дальше.
Понимание пользователя
Defining the Behavioural Design Space
Camilla Bay Brix Nielsen, Jaap Daalhuizen и Philip Cash предлагают фреймворк Behavioural Design Space для изменения поведения пользователей. Они проанализировали многие известные теории и концепции на тему и предложили самый цельный подход.
Web Designers Grapple With Downside to Flashy Animation — Motion Sickness
Про режим ограниченной анимации для пользователей с ограниченными возможностями написали аж в Wall Street Journal.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Next Best Behaviours Framework
Dan Ramsden описывает модель поиска наиболее оптимальных следующих действий, который используется в BBC. Она, в свою очередь, базируется на их модели поиска информации.
Новые инструменты дизайна интерфейсов
Figma
Выпустили 30 небольших обновлений и улучшений интерфейса. И получили ещё $200 млн инвестиций. Компания теперь оценивается в $10 млрд.
Продолжают качать идею создания иллюстраций. Музыкальные инструменты: виниловый проигрыватель, синтезатор Teenage Engineering, гитарные эффекты и кассета. Персонаж мультфильма Лука и музыкант Chaz.
Шаблоны
Статьи
UXPin Merge
Импорт компонентов в коде в инструмент дизайна. Он интегрирован со Storybook и популярными фреймворками вроде Material Design. Как это работает.
NextUX
Инструмент для обсуждения дизайн-макетов. Можно комментировать их, нарезать на куски и перестроить. Пара слов от автора.
A Complete Guide To Accessibility Tooling
Подборка сервисов для проверки accessibility от Nic Chan.
Health Icons
Большая коллекция бесплатных иконок на тему здоровья.
Loaf — Animated SVG icon library. SVG animations made easy
Коллекция анимированных иконок и иллюстраций в SVG.
Пользовательские исследования и тестирование
The 2021 UX Research Tools Map
Свежая карта инструментов для пользовательских исследований от User Interviews. Они также добавили вариант в таблице, где проще посмотреть список.
The Anatomy of a Survey Question
Jeff Sauro и Jim Lewis описывают структуру вопроса в опроснике. Как грамотно сформулировать каждую часть.
Collecting Metrics During Qualitative Studies
Kate Moran из Nielsen/Norman Group напоминает, что нельзя делать количественные выводы для качественных исследований с небольшой выборкой респондентов.
Confidence Intervals, Margins of Error, and Confidence Levels in UX
Raluca Budiu из Nielsen/Norman Group простым языком объясняет, что такое доверительный интервал, предельная ошибка выборки и доверительная вероятность в статистике. Без этого невозможно правильно интерпретировать результаты исследований.
Как правильно читать «Спроси маму»: 9 полезных и 3 вредных совета от Роба Фитцпатрика
Анастасия Жичкина и Константин Ефимов анализирует популярную книгу Роба Фитцпатрика «Спроси маму», помогающую проводить глубинные интервью. Что в ней работает, а к чему отнестись критически.
7 Steps Toward Pathfinding Impact
Crystine Gray из Facebook описывает, как лучше рассказать о разведочных пользовательских исследованиях, где не всегда понятна их сиюминутная применимость.
How we used Confluence to run a diary study
Cara Maritz из Atlassian рассказывает, как они использовали Confluence для проведения дневникового исследования. Это сработало, поскольку у клиентов уже был доступ к нему.
Визуальное программирование и дизайн в браузере
The new responsive — Web design in a component-driven world
Прошло больше 10 лет с момента появления концепции адаптивного дизайна. Una Kravets предлагает расширить его и включать все возможные способы подстройки под конкретного пользователя, включая тёмную тему или настройки минимальной анимации.
Container Queries
- Max Böck разбирается, где теперь нужно использовать media queries в грядущую эпоху container queries.
- Geoff Graham собрал толковые обзоры container queries, которые массово появились в последнее время.
Новые скрипты
Дизайн-менеджмент и DesignOps
The 6 Levels of UX Maturity
Kara Pernice, Sarah Gibbons, Kate Moran и Kathryn Whitenton рассказывают об обновлённой модели зрелости дизайна Nielsen/Norman Group. Они сократили её с 8 до 6 этапов. К статье прилагается опросник для оценки своей компании.
UX Paradise, Part 1: Milestones on the Road to UX Maturity
Rolf Molich описывает свою модель зрелости дизайна на примере выдуманной компании и её пути взросления. Во второй части он показывает пошаговый путь формулирования и внедрения дизайн-стратегии.
Archetypes for creative leadership
Matt Chamberlain, Anna Peraino и John Campbell из Airbnb описывают архетипы креативных лидеров, которые сложились в компании. Они показывают, что это не обязательно управление людьми — можно быть просто хорошим экспертом в своей области.
TBM 20/52: A Product Super-Skill (Balancing Divergence and Convergence)
John Cutler описывает типичные проблемы с процессом рождения и отбора идей в компаниях. Он ссылается на двойной алмаз и говорит, что команды страдают или от поспешного, или от запоздалого схождения.
Как поддерживать и развивать сообщество из 85 коммуникационных и продуктовых дизайнеров — опыт Контура
Юля Позднякова из Контура рассказывает о внутренней награде по дизайну в Контуре. Как она помогает сплотить проф.сообщество.
Командное взаимодействие
Asynchronous Design Critique — Giving Feedback
Erin Casali даёт советы по грамотной формулировке критики дизайна. Она предлагает несколько формул, которые хорошо описывают проблему и достаточно корректны для команды.
The magic of collaborating across disciplines
Paisley Laurenzio из Shopify рассказывает, как дизайнеры вовлекают коллег из других профессий в работу над задачами. Она описывает формат парных и групповых сессий.
Кейсы
Designing a tipping experience for Swiggy delivery
Milan Maheshwari рассказывает об экспериментах сервиса доставки еды Swiggy по повышению чаевых для курьеров.
Брендинг цифровых продуктов
Beatport
Ребрендинг музыкального сервиса Beatport от шведского агентства Kruppa Hosk.
Webex
Ребрендинг сервиса видео-конференций Webex от неизвестных авторов.
Reveal
Айдентика CRM-сервиса Reveal от британского агентства Ragged Edge.
Oneflow
Айдентика сервиса документооборота Oneflow от британского агентства MultiAdaptor.
Тренды
Алгоритмический дизайн
NVIDIA Canvas — Turn Simple Brushstrokes into Realistic Images
NVIDIA выпустили бета-версию своего инструмента, который превращает набросок в фотографию природного ландшафта. Пару лет назад они показывали сам концепт, который выглядел крышесносно.
Building Generative Grid Layouts With Quadtrees
Как сделать абстрактную генеративную сетку в духе проекта Pentagram для Graphcore.
Samsung One UI Watch
Samsung презентовали обновлённую ОС для своих умных часов — One UI Watch на базе Google WearOS. Они отказались от своего Tizen.
Для общего и профессионального развития
The problem with UX/UI portfolios
Толковые советы Mark Boulton по оформлению портфолио дизайнера интерфейсов. Что и как представлять в зависимости от роли и уровня.
The State of UX Design Education, Part 2: Graduate Degree and Certificate Programs
Sarah Pagliaccio рассуждает о важности специализированного высшего образования для дизайнеров интерфейсов. Ситуация описана для американского рынка, но она в любом случае показывает, что это дорогое по времени удовольствие, которое нужно тщательно взвешивать.
Rick and Morty + 5 IBMers: Patterns, Winter 2021
Sara Elsharawy рассказывает о программе IBM по обучению молодых дизайнеров. В статье подробно описан один из потоков курса.
Люди и компании в отрасли
Sound Advice. Facebook’s director of sound design
Интервью с Will Littlejohn, главой звукового дизайна в Facebook. Как и над какими проектами они работают.
Sainsbury’s Experience Design
Блог дизайн-команды британской сети магазинов Sainsbury’s.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или на vc.ru ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
