Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2023.
Паттерны и лучшие практики
How to Adapt Long-Page Designs for Better Scanning
Советы Christopher Butler показывает пример перестройки длинной промо-страницы в более читабельный формат. И выделяет ключевые правила такого переосмысления.
Create Powerful Prototypes To Test and Fine-Tune Your Designs
Kosuke Shiraishi из Indeed напоминает про роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
Bottom Sheets — Definition and UX Guidelines
Page Laubheimer из Nielsen/Norman Group разбирает особенности использования «шторок» в мобильных интерфейсах. Статья полезная, но с оговоркой про спорную рекомендацию всегда использовать явную иконку «крестика» для закрытия — не нужно переизобретать системные элементы операционных систем.
The Password Game
Безумная игра, высмеивающая идиотские требования к паролям.
Skeleton Screens 101
Короткая шпаргалка по «скелетным» экранам загрузки от Samhita Tankala из Nielsen/Norman Group.
Federal Trade Commission Proposes Rule Provision Making it Easier for Consumers to “Click to Cancel” Recurring Subscriptions and Memberships
Федеральная Торговая Комиссия США обсуждает требование для подписочных сервисов, чтобы пользователи могли отписаться от них простым способом.
UX and NPS Benchmarks of Theme Park Websites (2023)
MeasuringU опубликовали новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
Дизайн-системы и гайдлайны
WWDC 2023
5-7 июня прошла ежегодная WWDC, выставка новых операционок Apple. Лёгкое дежавю из такого же поста прошлого года: как и месяц назад в Android 14, интерфейсных обновлений особо нет, в основном развитие самой оболочки и ключевых приложений. Зато количество мемов про очки Vision Pro перебило всю новостную повестку. Если выделять какие-то вещи, то вот что:
visionOS
Очки виртуально-дополненной реальности Vision Pro работают на новой ветке операционных систем. Она относительно преемственна остальным — те же иконки приложений, аналогичные стандартные компоновки типа браузера и компоненты типа вкладок. Сами приложения могут иметь одно или несколько окон, глубину в 3D и своё пространство.
Очки непрозрачные, но могут работать как в режиме дополненной, так и полностью виртуальной реальности (ну и показать ваши глаза на внешнем экране). Core 77 в деталях изучили промышленный дизайн.
Управление жестами (без специального контроллера), голосом и взглядом. Также авторизация по зрачку, включая Apple Pay. И отслеживание движений головы.
3D-камеры для картирования окружающей среды.
Кое что по созданию приложений для visionOS уже можно почитать и посмотреть:
- Human Interface Guidelines
- Принципы дизайна интерфейсов (ещё) и их подробный разбор
- Много скриншотов из эмулятора
- Ранняя документация для разработчиков
- Andy Matuschak: Подробный обзор интерфейсной парадигмы и основных решений. Он когда-то работал в Apple и в целом экспериментировал с этим направлением.
Коммерческая успешность под большим вопросом — только большие проекты типа Microsoft HoloLens, Google Glass / Cardboard / Daydream, Magic Leap или Meta остались нишевыми B2B-шными, а то и вовсе похоронили миллиарды инвестиций, не считая десятков менее известных. Сами сценарии и модель использования — пока что скорее «монитор побольше» с теми же приложениями. Но в плане мультиплатформенной дизайн-системы пример очень интересный. Профессия точно обогатится интересным опытом и наработками в этом плане.
iOS 17
Появился режим стенда с крупным ландшафтным представлением приложений:
Виджеты стали интерактивными — например, можно включать приборы умного дома или выполнять задачи из напоминалок:
Интересные стилистические приёмы:
Всплывающее меню приложений для iMessage
Отслеживание ментального
здоровья
Настраиваемый экран звонка для конкретных контактов:
Airdrop позволяет передавать данные и контакты при прикосновении устройств:
Предлагает дописать текст по нажатию на пробел в духе Gmail.
Упрощается подключение к гостиничным телевизорам через AirPlay с помощью QR-кода:
Live Speech сможет говорить вашим голосом, если немного потренировать его.
Немного полезных материалов и видео для дизайнеров:
iPadOS 17
Виджеты на экране блокировки.
Можно реагировать с помощью жестов на звонках FaceTime:
watchOS 10
Редизайн ключевых приложений.
Прокручиваемая стопка виджетов:
macOS Sonoma
Общие виджеты с iPhone:
Любые приложения для созвонов могут накладывать вырезанную фигуру говорящего на презентацию:
Можно поделиться любым файлом прямо в любое приложение для созвонов — хорошее соответствие стандарту удалённой работы:
Традиционно всё это появится у массового пользователя в сентябре. Но бета-версия будет доступна в июле.
Modern CSS For Dynamic Component-Based Architecture
Stephanie Eckles собрала все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
Понимание пользователя
WCAG 2.2, quick and simplified
Mike Gower из IBM простым чеклистом разложил свежий стандарт accessibility WCAG.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Product IA is hard to talk about
Dan Brown рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ).
Новые инструменты дизайна интерфейсов
Figma
На конференции Config 2023 анонсировали одни из самых масштабных и ценных обновлений инструмента.
Самое главное — переменные. Они позволяют сделать две вещи — токены (причём они стараются соответствовать черновику будущего стандарта W3C) и более сложную логику взаимодействия в прототипах. Lukas Oppermann подробнейшей разложил по полочкам системную работу с токенами. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
Инструменты для разработчиков стали полноценным отдельным режимом работы. Он показывает спецификации дизайна на более понятном языке для программистов и верстальщиков, имеет плагины к популярным планировщикам задач и средам разработки (например, Jira, GitHub, Linear, Storybook и VS Code). Правда, есть риск что теперь придётся платить деньги и за разработчиков, при том что до этого они могли смотреть спецификации бесплатно.
Figma купила нашумевший стартап Diagram, который запустил энтузиаст алгоритмического дизайна Jordan Singer с командой. Они делают простые и достаточно прагматичные решения, которые наверняка скоро попадут в Figma. В статье описаны несколько сценариев использования, которые уже помогут в повседневных задачах — например, автоматическая категоризация идей из брейнштормов (дико нудное дело).
В самом редакторе тоже добавлено много крутого: auto layout теперь может переносить объекты внутри контейнера на новую строку при недостатке ширины, освежили общий интерфейс учётных записей и просмотра проектов, предпросмотр шрифтов в списке их выбора.
Adobe XD
Alex Ivanovs заметил, что Adobe постепенно убирает возможность скачать инструмент. Явно о его закрытии не говорили, но после покупки Figma это было неизбежно.
Durves
Простой инструмент позволяет сделать что-то похожее на схематичную поверхность ландшафта.
Sketch 97
Переименование сразу множества слоёв, приложение Mirror для iPad и другие обновления интерфейса.
SVG Hub — Custom-color elements ready to paste into your project
Коллекция рисованных от руки элементов дизайна на SVG.
Пользовательские исследования и тестирование
Measuring Tech Savviness with Technical Activity Checklists
Jim Lewis и Jeff Sauro сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.
When and Why to Use a Click Test
Памятка MeasuringU по использованию метода тестирования интерфейсов с помощью «первого клика».
Heuristic Evaluations — How to Conduct
Памятка по проведению экспертной оценки от Kate Moran и Kelley Gordon из Nielsen/Norman Group. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.
How and Why to Include Users in UX Workshops
Matt Brown из Nielsen/Norman Group говорит о пользе приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.
How to Ensure Participant Fit and Credibility
Памятка по поиску и отбору респондентов для пользовательских исследований от User Interviews.
Tips for recruiting B2B UX research participants
Советы Mary Nolan по поиску респондентов для пользовательских исследований B2B-продуктов.
Testing the Future — A Guide to Testing AI Products with Users
Дмитрий Старков описывает методы пользовательского тестирования продуктов на базе алгоритмов.
How Teams Do Continuous Discovery Research Today, According to Research
User Interviews пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих пользовательских исследований.
Does Thinking Aloud Uncover More Usability Issues?
Jeff Sauro и Jim Lewis продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.
The Power of Desk Research in User Research
Sue Duris из Condens описывает метод кабинетных исследований и ситуации, в которых он полезен.
Визуальное программирование и дизайн в браузере
Новые скрипты
Дизайн-менеджмент и DesignOps
An Error Messages Scoring Rubric
Tim Neusesser и Evan Sunwall из Nielsen/Norman Group предлагают чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.
Creating impact with Research Ops — Leveraging the power of communities
Emma Boulton оценивает плюсы и минусы централизованной и погружённой оргструктуры для пользовательских исследователей. И показывает, как лучше всего отработать в каждой из ситуаций.
How to measure UX research impact — A multi-level framework
Karin den Bouwmeester предлагает свой фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.
How Research Operations impacts organizational culture
Советы Rohan Irvine по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.
No Handoff — We can stop throwing our work over the fence
Shamsi Brinn предлагает концепцию «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.
Storm vs. calm leadership tactics
Советы Design Dept. для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.
Командное взаимодействие
The workshop and facilitator de-coded
Jenny Hsiao Sanchez из IBM описывает памятку для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.
Кейсы
Behind The Curtains Of Wikipedia Redesign
Alex Hollender и Jon Robson рассказывают о редизайне Wikipedia в формате интервью.
Designing the latest generation of Uber Navigation — Maps built for ridesharing
Dylan Babbs рассказывает о редизайне навигации в Uber. Они делали много интерактивных прототипов разного уровня сложности и активно тестировали их.
Брендинг цифровых продуктов
Pinterest Motion Design System
Язык анимации Pinterest от американского агентства DIA.
OpenAI
Айдентика горячей OpenAI от французско-американского агентства Area17 (больше деталей).
TheFork
Ребрендинг сервиса бронирования ресторанов TheFork от британского агентства Design Studio.
InVision
Обновление айдентики InVision от британского агентства Ensemble.
Askly
Айдентика сервиса Askly для общения с пользователями сайта от эстонского агентства Tabasco.
Unmind
Ребрендинг сервиса Unmind для ментального здоровья сотрудников компаний от американского агентства Ragged Edge
Nike Design System
Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.
Тренды
2023 Logo Trend Report
Тренды в логотипах 2023 года от LogoLounge.
The Best in Packaging From 2023 — Dieline Awards Winners Revealed
Тренды в упаковке 2023 года от Dieline.
BentoGrids
Сайт-коллекция трендовых бенто-сеток.
Алгоритмический дизайн
Framer AI — Generate and publish your site with AI in seconds
Framer запустил ветку алгоритмического дизайна в своём инструменте. Он позволяет сгенерировать сайт по текстовому описанию, а потом докручивать отдельные элементы из набора предложений.
Toyota Research Institute Unveils New Generative AI Technique for Vehicle Design
Toyota экспериментирует с алгоритмическим дизайном для работы над машинами. Это один из самых разумных процессов — дизайнер делает первый набросок стиля, дальше алгоритм предлагает несколько вариантов его оптимизации (например, для лучшей аэродинамики). Дизайнер выбирает одно из предложений и дорабатывает его.
AI: First New UI Paradigm in 60 Years
Jakob Nielsen считает, что современные генераторы по текстовому запросу — это новая интерфейсная парадигма после пакетной обработки в первых компьютерах и командной строки. Впервые пользователь описывает сам конечный результат, а не последовательность команд для его получения.
Adobe Express — Free Online Photo & Design Tool
Adobe запустили новый простой инструмент дизайна Express для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.
The future of Illustrator is here — Hue will never be the same
Adobe добавили в Illustrator экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка алгоритмического дизайна Firefly.
ClipDrop Uncrop
Простой сервис позволяет дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).
9 *Human* Challenges with Using AI Co-Pilots
Stephen P Anderson разбирает проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.
Spline AI — 3D Design faster with AI
Инструмент Spline для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.
Runway Gen-2
Инструмент генерирует короткие видео по текстовому описанию.
Illustroke — Vector illustrations from text prompts AI
Генератор векторных иллюстраций по текстовому запросу.
Language Model Sketchbook, or Why I Hate Chatbots
Maggie Appleton сделала несколько концептов интерфейса взаимодействия с чат-ботами на базе алгоритмического дизайна. Как они могут уточнять и дополнять текст.
MusicGen by Facebook
Генератор музыки по текстовому описанию от Meta. Обзор.
TikTok parent ByteDance launches music creation and audio editing app in closed beta in the US
TikTok запустили экспериментальное приложение Ripple, которое помогает пользователям генерировать и редактировать музыку. Можно напеть мотив и оно превратит его в заготовку песни.
TikTok’s new Script Generator tool uses AI to write ad scripts for you in seconds
TikTok добавил генератор сценариев для рекламных роликов.
Mercedes drivers can soon turn to ChatGPT for voice control
Mercedes добавит ChatGPT в свою автомобильную платформу MBUX. Он расширит возможности голосового помощника.
«Яндекс Маркет» добавил YandexGPT — нейросеть сможет создавать описания товаров
Яндекс Маркет будет генерировать описание товаров с помощью YandexGPT
ElevenLabs — Prime AI Text to Speech. Voice Cloning
Сервис клонирует ваш голос и может озвучить им любой текст.
Duolingo Max Uses OpenAI’s GPT-4 For New Learning Features
Duolingo встроили модель GPT-4 в продукт — пользователи смогут учиться в диалоге и получать дополнительные пояснения.
AI is sleepwalking us into surveillance
Arvind Sanjeev показывает, как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.
Have I Been Trained?
Сервис позволяет проверить, использовались ли ваши данные или фото для обучения алгоритмов. Это часть более крупной инициативы Spawning по защите своих персональных данных от обработки.
How to make a QR code with Stable Diffusion
Как самому сделать иллюстративные QR-коды от nhciao, которые собраны с помощью Stable Diffusion и работают на самом деле. Оригинальный пост.
Finch и PlanFinder
Инструмент алгоритмического дизайна помогает делать наброски планов помещений.
Generative AI Takes Stereotypes and Bias From Bad to Worse
Bloomberg на реальных примерах показывают, как сервисы генерации изображений по текстовому запросу воспроизводят расовые и гендерные стереотипы.
Для общего и профессионального развития
archives.design
Библиотека книг и других материалов по графическому дизайну, которые хранятся в интернет-архивах.
Justin Dauer — In Fulfillment. The Designer’s Journey
Вышла книга Justin Dauer «In Fulfillment» о влиянии дизайнера на продукт, бизнес и мир в целом. Отрывок из главы 3.
Design Under Constraints — Challenges, Opportunities, And Practical Strategies
Paul Boag даёт советы дизайнерам о том, как снимать ограничения в своей работе. Они отличают дизайн от искусства, но не всегда высечены в камне.
Люди и компании в отрасли
Дизайн-студия Ростелекома
Сайт дизайн-команды Ростелекома.
Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор. А ещё — командам Funky Branding за новую айдентику и Бюробукв за шрифт (они пока в бета-версии и будут докручиваться в течение года). Сто тыщ респектов Александру Орлову за прошлые два визуальных стиля.
