Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2024.
Паттерны и лучшие практики
Menu-Design Checklist — 17 UX Guidelines
Отличная памятка по дизайну интерфейса меню в вебе от Page Laubheimer из Nielsen/Norman Group. Простой и наглядный чеклист, который начинается с одной из главных проблем — люди читают Рамса и Нормана, а потом прячут навигацию на больших мониторах под иконку.
Designed for delight, built for performance
Atlassian смогли стандартизировать интерфейс drag&drop и его реализацию в своих продуктах. Это позволило здорово поднять производительность и упростить его использование. Alex Reardon, Lewis Healey, Melissa Jaén и Maria Christley описывают процесс работы и детали паттерна, а также делятся кодом.
How To Improve Your Microcopy — UX Writing Tips For Non-UX Writers
Хорошая памятка по написанию интерфейсных текстов от Ирины Сильяновой. Здорово, что они находятся на стыке дизайна (как использовать текст в контексте экрана) и редактуры (как правильно писать).
Checkboxes — Design Guidelines
Памятка по использованию чекбоксов в интерфейсах от Maddie Brown из Nielsen/Norman Group. Одиночные, списки, вложенные и их нюансы.
If Providing Sidebar Filtering, Position the “Size” Filter near the Top and Expand It by Default
Iva Olah из Baymard советует сразу предлагать пользователям интернет-магазинов фильтр по размеру. Они не будут тратить время на поиск одежды, которой по факту нет в наличии.
Anchor Links and How to Make Them Awesome
Will Boyd показывает, как грамотно реализовать ссылки-якори на странице сайта.
Дизайн-системы и гайдлайны
iOS 18 для дизайнеров
Ежегодная конференция Apple WWDC 2024 прошла 10–14 июня — это выставка новых операционок Apple. Интерфейсных обновлений особо нет, в основном развитие самой оболочки и ключевых приложений. Если выделять какие-то вещи, то вот что:
iOS 18
ИИ-платформа Apple Intelligence на базе OpenAI, включая сам ChatGPT. Можно будет переписывать, вычитывать или суммировать тексты в любых приложениях; генерировать изображения в виде скетчей, иллюстраций и анимации (но без фотореалистичных). Искать по фото и в браузере. Правда, работать это будет только на самых свежих моделях iPhone.
Siri сильно прокачана и интегрирована в приложения (ещё) — сможет редактировать фото, дописывать сообщения электронной почты, ранжировать уведомления по важности, кратко пересказывать новости, заполнить форму данными с фото документа (и даже самостоятельно найти его в галерее).
В будущем они могут добавить выбор языковой модели — например, Google Gemini.
Самая сомнительная вещь — жёсткая настройка домашнего экрана, где пользователь может перекрасить все иконки и расставить их как попало (или взять основной цвет фоновой картинки, что тоже убого). Явно не та вещь, которую нужно брать из Android — мистер Джобс крутится в гробу, а сэр Айв пьёт запойно после такого. Система иконок Apple никак не предназначена для этого и выглядит итог максимально чипово. В общем, океан кровавых слёз дизайнеров ожидается уже скоро.
В контрольном центре можно добавить кнопки от сторонних приложений (и вынести конкретные кнопки в нижних углах экрана блокировки).
В сообщениях можно будет сгенерировать эмоджи (Genmoji) под текст сообщения. Поддержка стандарта RCS, который потенциально позволит полноценно переписываться с пользователями Android в iMessage.
В целом они задали свой генеративный визуальный стиль.
Ещё один редизайн стандартного приложения — здоровье.
Запустили отдельное приложение для паролей (ещё).
Появилась запись и расшифровка телефонных разговоров.
Дополнительная поддержка accessibility. Управление взглядом, голосовые “горячие клавиши”, борьба с укачиванием при работе с телефоном в машине. Можно не говорить, а писать сообщения Siri.
В плане безопасности: вход в конкретные приложения только по FaceID или пин-коду, а также отдельные закрытые папки приложений.
Отдельный игровой режим, в котором фоновые приложения меньше отсвечивают.
iPadOS 18
Во-первых, аналогичные возможности Apple Intelligence, дикой настройки главного экрана и т.п.
Во-вторых, наконец-то появится калькулятор. Причём не зря ждали — может распознавать и считать рукописные формулы.
Улучшает качество рукописного текста и может написать им любой текст.
Вкладки внутри приложения могут быть полупрозрачными поверх контента.
watchOS 11
Много обновлений в конкретных способах отслеживания здоровья и развитие ленты виджетов Smart Stack. Отдельное приложение-переводчик.
Прокрутка экрана без касания пальцами — просто по двойному нажатию большого и указательного.
macOS Sequoia
Можно управлять телефоном с компьютера, перетаскивать объекты между устройствами, получать уведомления с телефона на компьютере.
Замена фона в звонках на уровне ОС, т.е. в любом приложении.
visionOS 2
Фото с «глубиной» — при повороте головы видно что там за краями. Редактирование пространственных видео в Final Cut Pro.
Развитие системы жестов — быстрый возврат на главный экран, вызов панели управления, уведомлений и статуса батареи / времени.
Виртуальный монитор Mac Virtual Display, сопоставимый с двумя 4K-мониторами.
Можно передавать изображение с устройств Vision через AirPlay.
Само устройство начнут продавать вне США.
tvOS 18
Функция InSight показывает информацию об актёрах прямо во время просмотра.
Традиционно всё это появится у массового пользователя в сентябре. Но бета-версия будет доступна в июле, а разработчики могут поставить её уже сейчас.
The vibrant evolution — Microsoft’s colorful transformation
Microsoft обновили подход к цветам в своей дизайн-системе Fluent — ушли от утилитарных к более ярким и насыщенным.
Interactive story generation. Make your first story in seconds
В Storybook 8.1 можно создавать компоненты визуально из самого живого гайдлайна, не заходя в редактор. Конечно, это работает только для простого описания состояний, а не сложной логики, но уже упрощает работу.
Visual testing is the greatest trick in UI development
Kyle Gach рассказывает о новом плагине для визуального тестирования компонентов в Storybook, который сильно упрощает процесс.
Converge — A Design Systems Conference
Конференция по дизайн-системам от сервиса ZeroHeight пройдёт 2–4 октября в Брайтоне (Великобритания).
Информационная архитектура, концептуальное проектирование, контент-стратегия
Concept
Хорошая памятка по созданию осмысленных дизайн-концептов от журнала DOC. Они должны быть про основную концептуальную модель взаимодействия, а не просто пыль в глаза.
The Interfaces With Which We Think
Новая серия статей Alexander Obenauer о концептуальных моделях интерфейсах. Пока есть только первые материалы, но автор всегда выдаёт интереснейшие размышления о глубинной логике продуктов для персональной продуктивности.
Новые инструменты дизайна интерфейсов
Figma
Ежегодная конференция Figma Config 2024 прошла 26—27 июня в Сан-Франциско (США). Они опубликовали текстовую трансляцию самого интересного.
На конференции, как всегда, анонсировали уйму шикардоса. Во-первых, большой редизайн самого инструмента под их новую дизайн-систему UI3. Спрятали часть функций (что уже вызвало негатив), сильно обновили внешний вид. Также добавили новое представление со статусом макетов в DevMode. А в FigJam появились страницы.
Кроме этого переработали черновики (теперь они должны быть внутри пространства команды, хотя и и останутся приватными), упрощают тарифы и добавляют логику работы с фрилансерами/агентствами, плюс можно менять базовые текстовые стили вроде курсива без открепления.
Во-вторых, добавили целую линейку инструментов алгоритмического дизайна в основной сценарий работы. Можно сгенерировать дизайн по текстовому запросу (правда, временно отключили после пары публичных конфузов), превратить скриншот в макет по слоям (если он собран на ваших компонентах и стилях), автоматически связывать экраны в интерактивный прототип, генерировать тексты и изображения, убирать фон, переименовывать слои, искать макет или слой по текстовому описанию. В следующей версии планируют генерировать макеты на основе компонентов вашей дизайн-системы. Это тот самый момент, когда вчерашняя магия превращается в обычный повседневный инструмент — он может занять и 5-10 лет, но результат стоит ожидания.
Запустили отдельный инструмент для презентаций Figma Slides (что умеет на старте). Многие дизайнеры и так делали их в инструменте, так что теперь это отдельная продуманная ветка развития. Есть шаблоны, таблицы, подсказки ИИ по тексту и стилю, можно использовать интерактивные прототипы и в целом коллаборацию со слушателями при показе в духе FigJam, а так же интерактивные опросы. Ну и, самое главное — комфортный совместный рассказ презентации без дурацкого «следующий слайд».
Статьи
Is Canva Getting Good?
Johannes Ippen считает, что Canva имеет шансы выйти за рамки восприятия чипового инструмента для нубов. Во-первых, за счёт охвата широкого рабочего процесса от идеи до воплощения самых разных форматов. Во-вторых, за счёт недавней покупки Affinity.
Fockups — F*cked up mockups
Стёб над макетами подачи дизайна — максимальная бытовая кринжуха из реального мира.
Пользовательские исследования и тестирование
Influencing product strategy as a UX researcher — A 3-step guide
Jack Holmes предлагает заполнять модель Kano в 3 этапа. Сначала экспертная версия (единая картина мира у команды), потом опрос пользователей (то, что они ожидают), а в конце — пользовательское исследование, чтобы понять причины разницы во мнениях.
How To Run A Games User Research Playtest
Steve Bromley собрал обзорную статью-навигатор по процессу тестирования игр. Она описывает типичный проект на разных этапах.
Peeking behind the curtain — A new UX researcher’s look into research operations
Suviksha Hirawat описывает свои первые шаги в ResearchOps. Она сделала несколько полезных форматов документов, которые здорово помогли коллегам в компании.
Behavioral audits for better outcomes
Christelle Ngnoumen описывает модель COM-B (Capability, Opportunity, Motivation, Behavior), которую она использует в Voya Financial. Она помогает анализировать поведение пользователей и помогает скорректировать его.
Card Sorting — Pushing Users Beyond Terminology Matches
У карточной сортировки есть проблема — пользователи могут группировать карточки не по смыслу, а по названию. Samhita Tankala и Jakob Nielsen из Nielsen/Norman Group показывают, как бороться с этим.
My Decade with Applied Behavioral Science
Connor Joyce вспоминает свой десятилетний опыт в науке поведения пользователей и отмечает, как поменялась она сама и рынок в целом.
Визуальное программирование и дизайн в браузере
Fine-tuning Text Inputs
Garrett Dimon напоминает про полезные свойства полей форм в HTML, которые облегчают их заполнение.
What Are CSS Container Style Queries Good For?
Juan Diego Rodríguez показывает, как работают Container Style Queries в CSS. Они позволяют менять стиль компонента в зависимости от контекста.
Дизайн-менеджмент и DesignOps
Growth Designer vs. Core Product Designer — A cheat sheet
Siva Sabaretnam описывает разницу между дизайнером роста (growth) и основного продукта в Atlassian. Нюансы могут отличаться от компании к компании, но в целом это отличная и достаточно универсальная модель.
Charmaine Lee’s 10 Rules for Building Developer Tools
Charmaine Lee рассказывает, как работает команда инструмента для разработчиков фильтров Snapchat. Отказ от назойливого onboarding, кросс-командное взаимодействие и другие бодрые штуки.
Product and UX: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о связке между дизайнером интерфейсов и менеджером продуктов.
Про важность дизайн-ревью в продуктовом процессе
Александр Кузнецов рассказывает, как проводит дизайн-ревью в Sber Devices. И прикладывает свой шаблон в Notion.
Командное взаимодействие
Elevating Product Quality — The UX Blitz Approach
Wix регулярно проводит «блицы» — продуктовая команда собирается на 1-3 дня и чинит дизайн-долг. Anne Lillmannstons рассказывает о том, как проходят такие сессии. И почему вообще компания считает это важным.
Продуктовый менеджмент и аналитика
How UX strengthens your venture’s lifecycle
Круглый стол о том, почему многие функции продуктов не используются, который прошёл на конференции Dovetail Insight Out. Тему обсуждали Claire Drumond (Atlassian), Alastair Simpson (Dropbox) и Judd Antin (консультант).
Брендинг цифровых продуктов
The Web Marketing System
Willem Purdy рассказывает о систематизации дизайна маркетинговых материалов Wise. Как они обновили их под недавний ребрендинг.
История
Why alarm clock design speaks about humanity
Chiara Santella показывает, как менялась концепция будильника — от улучшения функциональности в самостоятельных устройствах до переосмысления самой концепции в эпоху мобильных приложений.
Тренды
Алгоритмический дизайн
Using AI to generate web forms from PDFs
Глава дизайна Gov.uk Tim Paul показал, как можно превращать обычную бумажную форму в веб-версию. Он использовал дизайн-систему Gov.uk и автоматически разбивал её на шаги. Демка работает даже на основе бумажного скетча. Исходный код и более ранний эксперимент его коллеги Kuba Bartwicki.
GPT-4o generating Figma designs based on PRD (product requirements document)
ChatGPT-4o может генерировать макеты в Figma на основе спецификации.
Uizard Autodesigner 2.0
Вторая версия умеет генерировать полноценные макеты по текстовому запросу на основе вашего UI Kit или докручивать компоненты, связывать экраны в прототипы, добавлять темы оформления, получить рекомендации по улучшению макета. Их можно дорабатывать в переписке с ботом. Анонс от создателей.
Typeface — Personalized AI Storytelling for Work
Универсальный инструмент алгоритмического дизайна. Может сгенерировать гайдлайны бренда (визуальный стиль и тональность), проанализировав сайт. Предлагает гибкий и визуальный подход к текстовым запросам для генерации графики и текстов (есть куча форматов для маркетинга и пиара).
Synthetic Users — If, When, and How to Use AI-Generated “Research”
«Синтетические пользователи» — мусорная концепция, которая обещает заменить общение с пользователями генерацией от ИИ. Maria Rosala и Kate Moran пытаются разобраться, есть ли какая-то польза от них (спойлёр: почти нет).
Luma Dream Machine
Генератор видео по текстовому запросу. Может в том числе анимировать обычную картинку (поток оживших мемов в первые дни зашкаливал).
Josh Clark & Veronika Kindred — Sentient Design
Rosenfeld Media готовит к выходу книгу Josh Clark и Veronika Kindred «Sentient Design» об алгоритмическом дизайне. Они запустили этот термин вместе с флагманским выступлением и обзорной статьёй, плюс продают услуги типа Sentient Design Sprint.
Cara — Artist Social & Portfolio Platform
Новое сообщество дизайнеров и иллюстраторов, которое решило противопоставиться алгоритмическому дизайну. Они не дают ИИ-продуктам обучаться на основе своих материалов, ну и запрещает публикацию таких работ у себя. Cara запустилась несколько месяцев назад, но недавно резко выросла до 300 000 пользователей.
ToonCrafter — Generative Cartoon Interpolation
Генератор анимационных роликов на основе их первого и последнего кадра.
Turning the Tables on AI
Команда iA предлагает по-другому посмотреть на ChatGPT и похожие сервисы. Если не ждать от них готовый результат, а использовать как собеседника и корректора — результат становится намного качественнее.
Why Are We So Afraid Of Code As A Commodity?
Kris Rasmussen (глава разработки Figma) делится своим мнением про автоматизацию разработки с помощью ИИ — от какой работы не жалко отказаться.
What is Good Design in the Age of AI?
Noah Levin (глава дизайна Figma) делится своим мнением про автоматизацию дизайна с помощью ИИ — от какой работы не жалко отказаться. Он видит прагматичный путь простых маленьких шагов вместо не очень реалистичных космолётов.
Искусственный Интеллект — как генеративные нейросети стали апостолами сюрреализма?
Мария Кувшинова рассуждает о связи идей художников сюрреализма и генеративных изображений. Она обращается к изначальной философии и работам классиков, чтобы проследить связь к текущей волне.
Google Illuminate
Экспериментальный сервис Google превращает научные публикации во что-то вроде подкастов, где эта тема раскрывается в дискуссии.
KLING
Новый добротный генератор видео по текстовому описанию.
How to use Perplexity in your PM work
Lenny Rachitsky показывает правильные сценарии использования ИИ-поисковика Perplexity. Как задавать грамотные вопросы о профессии, рынке и своём продукте.
Record Labels Sue AI Music Services Suno and Udio for Copyright
Звукозаписывающие лейблы подали в суд на сервисы Suno и Udio, которые генерируют музыку по текстовому запросу. Как и во многих других ситуациях с алгоритмическим дизайном, некоторые результаты были слишком похоже на известные оригиналы.
I Will Fucking Piledrive You If You Mention AI Again
Жёсткая прожарка бессмысленных разговоров о внедрении ИИ в продукты от Nikhil Suresh. Большинство компаний не могут справиться с простейшей разработкой базовых вещей, но уже бегут в тему с непонятным для них выхлопом.
Ask LukeW — PDF Parsing with Vision Models
Luke Wroblewski развивает свой алгоритмический поиск по сайту и переосмыслил транскрипции презентаций.
Einstein Copilot for Tableau — Accelerate Analysis with AI
Помощник Tableau Einstein помогает лучше анализировать данные: задавать вопросы, раскапывать данные, делать расчёты.
AI-Image Hype Is Getting Its Inevitable Backlash
Rolling Stone собрали примеры компаний и продуктов, которые намеренно отказываются от генеративного контента и запрещают размещать его.
Keep Beauty Real — Beauty in the AI age
Dove развивает свою изначальную кампанию «реальная красота» и добавляет к ней отказ от генеративных фото и ИИ-обработки.
Reclaiming the brAIn
Фотограф Miles Astray выиграл конкурс ИИ-фотографии 1839 Color Photography Awards с реальным фото. Его дисквалифицировали в итоге, но пранк вышел отменный.
Human or Not? A Social Turing Game
Экспериментальный проект даёт возможность пообщаться с собеседником в чате, а потом угадать — это был человек или бот.
«Т-Банк» запустил «Джуниор-ассистента»
Т-Банк запустил «Джуниор-ассистента», который обучает детем финансовой грамотности.
ElevenLabs Sound Effects
Генератор звуков для видео и подкастов по текстовому описанию.
Audi enhances voice control in current and future models with ChatGPT
Audi добавит ChatGPT в свои машины аналогично Volkswagen (для усиления своего основного ассистента).
Air Canada found liable for chatbot’s bad advice on plane tickets
Авиакомпания Air Canada получила штраф за неверный совет чат-бота, который обманул пассажира с рекомендацией билетов.
Для общего и профессионального развития
T-Shaped vs. V-Shaped Designers
Очередное пополнение в буквах, которыми называют T-образных специалистов — теперь V-образные.
Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор. А ещё — командам Funky Branding за новую айдентику и Бюробукв за шрифт (они пока в бета-версии и будут докручиваться в течение года). Сто тыщ респектов Александру Орлову за прошлые два визуальных стиля.
