Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-июль 2021.
Fintech Design Conf 2021
Конференция от Райффайзенбанка пройдёт 30 сентября в онлайне. Дизайн-команды современных банков покажут, что интересного происходит в отрасли и расскажут, куда движется индустрия. Они расскажут про интересные запуски и покажут, как устроены дизайн-процессы. Состав: Klarna, Ак Барс, ВТБ, МТС Банк, Райффайзенбанк, Росбанк, Тинькофф, Angry × Хайс и ONY × Blanc. В прошлом году у нас получилось нащупать интересный формат для онлайна, который смотрели 15 000 человек. В этот раз хотим поднять планку и сделать трансляцию ещё более вовлекающей и визуально приятной. Конференция, как всегда, бесплатна и открыта для всех.
Паттерны и лучшие практики
Frustrating Design Patterns: Disabled Buttons
Есть две школы: те, кто не блокирует кнопки в интерфейсе (потому что пользователь часто не понимает причины) и те, кто делает это (мол, это помогает избежать ошибок). Виталий Фридман наглядно разбирает, почему первый подход правильный.
10 Usability Heuristics Applied to Complex Applications
Kate Kaplan из Nielsen/Norman Group применяет интерфейсные эвристики Якоба Нильсена к профессиональным веб-интерфейсам. Она подсвечивает хорошие и плохие примеры.
The voice of the brand: 5 principles for great Marketing copy at Slack
Andrea Drugay из Slack рассказывает о создании и внедрении принципов хороших текстов для маркетинговой коммуникации.
Avatar UI design exploration
Роман Камушкен собрал неплохой обзор возможных состояний аватара пользователя.
Grids
Наглядный справочник по сеткам в вебе от агентства Obys. Показывают, как они работают на примере своих проектов.
Adobe: The Psychology of User Offboarding
Сайт Growth Design подробно разбирает знакомую дизайнерам боль — отписку от Adobe Creative Cloud. И даёт немного советов по лечению интерфейса.
Design Solutions that Increase Access to Telehealth
Fabiola Einhorn из athenahealth приводит лучшие практики интерфейсов дистанционного медицинского обслуживания. Они основаны на её многолетней практике и многочисленных UX-исследованиях.
A UX case study on OpenSea
Peter Ramsey разбирает интерфейс продажи NFT в сервисе OpenSea. Много детских проблем, хотя при таком ажиотаже в теме многие напрягутся, чтобы решить их.
Quick tip: Reviewing a design for accessibility
Ещё один простой чеклист для проверки accessibility.
UX and Net Promoter Benchmarks of Mass Merchant Websites
Jim Lewis и Jeff Sauro делятся новым сравнительным исследованием американских интернет-магазинов. Они замеряют NPS, SUPR-Q и UMUX-Lite.
Accessibility in E-Commerce: Use ‘ALT’ Text to Communicate the Core Content of “Informational” Images (55% of Sites Don’t)
Alex Krzyminski из Baymard даёт советы по грамотному описанию сути изображений в HTML для интернет-магазинов.
E-Commerce Navigation UX: 13 Common Pitfalls & Best Practices
Sally Collins сделала обзор типичных ошибок при проектировании навигации в интернет-магазинах из свежего исследования Baymard. Многое повторяется из года в год, но в любом случае полезная напоминалка.
Stealing Game Animation Techniques to Engage Users
Eli Penner рассказывает об экспериментах с анимацией в вебе, которые он подсмотрел в играх.
Sentence Forms (not Mad Libs)
Adrian Roselli описывает проблемы с некогда хайповыми формами, встроенными в повествование.
Дизайн-системы и гайдлайны
Клуб отечественных дизайн-систем
Перезапустили сайт-коллекцию отечественных дизайн-систем. Первая версия здорово помогла подсветить наработки компаний на рынке, но со временем её стало сложно обновлять. В новой версии всё актуально и легко поддерживается — помимо старых знакомых (Альфа-Банк, БАРС Груп, Дизайн государственных систем, IVI, Контур, Mail.ru Group, Рамблер, Яндекс) наконец-то появились B2B Center, Вконтакте, Газпром Нефть, Райффайзенбанк, Ростелеком и Semrush. Кто-то выпал, ведь основное условие участия — компоненты на технологическом уровне, открытые для всех. Если мы почему-то не знаем о вашей дизайн-системе — присылайте её боту @DSClubbot в Телеграме, обязательно добавим.
Accessible Design Systems: Look Good While Doing Good
Chris LaChance рассказывает, как дизайн-система Pega Cosmos поддерживает accessibility из коробки.
Testing user flows. Verify that your UI works end-to-end
Varun Vachhar показывает, как тестировать целые пользовательские сценарии в дизайн-системе с помощью Storybook и Cypress.
Interaction Testing sneak peek
Storybook готовят к запуску возможность тестирования интерактивных компонентов.
Assembler CSS — Modern UI framework
Свежий CSS-фреймворк для создания компонентов и сайтов.
iOS 15
Jonas Downey анализирует новый интерфейс Safari в iOS 15, где адресная строка переехала вниз экрана и совмещена с основными элементами навигации. Как это влияет на пользовательский опыт и что можно было бы сделать лучше.
Понимание пользователя
Eva PenzeyMoog — Design for Safety
A Book Apart выпустили книгу Eva PenzeyMoog «Design for Safety». Она посвящена созданию ощущения психологической безопасности для пользователей. Выдержка из главы 5.
Новые инструменты дизайна интерфейсов
Figma
Августовские обновления. Улучшение работы с дизайн-системами, плагины и виджеты в FigJam, плагины смогут обновлять прототипы на лету.
Запустили звонки внутри макета, а также сообщения чата внутри курсора.
Плагины
- Copy & Rotate: Плагин позволяет быстро расположить по кругу копии элемента.
- Вячеслав Трушкин: Делает плагин, который позволит вставлять пиктограммы из популярных бесплатных наборов.
- Janet John: Большая подборка.
Шаблоны
Статьи
- Font Awesome: Почему перешли на Figma.
SVG Gobbler
Плагин для Chrome позволяет легко сохранить любые SVG-изображения на странице. Можно быстро получить версию в PNG.
Blobbb
Генератор аморфных пятен в SVG.
Illustrations by Iconfinder
Iconfinder запустили каталог иллюстраций.
Пользовательские исследования и тестирование
Qualitative Usability Testing: Study Guide
Nielsen/Norman Group сделали структурированные подборки своих статей о методах пользовательских исследований. Уже есть качественное юзабилити-тестирование и количественные исследования. На подходе, наверняка, ещё много — контента у них завались.
Six Ways to Improve Participant Recall
Респонденты на пользовательских исследованиях часто забывают или путают произошедшие когда-то события. Jeff Sauro и Jim Lewis рекомендуют приёмы, помогающие им точнее вспомнить такие вещи.
Scaling Research
Блог Ray Opata Olende об управлении UX-исследованиями в компании и их масштабировании.
How to test for accessibility with users at every design stage
Katie Del Angel из Shopify делится опытом проведения UX-исследований для улучшения accessibility с помощью сервиса Fable. Она приводит в пример несколько сценариев.
Приложения для детей: сравниваем варианты интерфейса и выбираем лучший
Usethics рассказывают о методе проведения пользовательских исследований с детьми.
Six Tips for Better Unmoderated Scripts
Yuling An из Facebook даёт советы по составлению сценариев удалённых немодерируемых пользовательских исследований.
Careers in Research & Research Operations Report
Сообщество ResearchOps провело опрос среди 147 своих участников на тему навыков, образования и зарплат.
Data Is More than Numbers — Why Qualitative Data Isn’t Just Opinions
Статьи на тему того, почему качественные исследования не просто мнения, в отличие от количественных, никогда не выйдут из моды. Это вечная дискуссия в огромном количестве компаний на ранних стадиях зрелости. Page Laubheimer из Nielsen/Norman Group приводит хорошую памятку для таких разговоров.
How To Build An Ethical User Research Practice At Any Organization
Devin Harold показывает, как компания может сформировать стандарты этики при проведении пользовательских исследований.
Визуальное программирование и дизайн в браузере
Can I still use…
Jim Nielsen запустил сопроводительный сайт к известному Can I Use, позволяющему убедиться, что определённые функции доступны в браузере. Со временем поддержка прекращается и он отмечает такие ситуации.
A guide to designing accessible, WCAG-compliant focus indicators
Sara Soueidan показывает, как сделать индикатор фокуса с учётом требований accessibility.
CSS Transforms Tutorial
Памятка по работе с трансформациями в CSS-анимации от Josh W Comeau.
Aligning a Button Label Vertically
Ahmad Shadeed предлагает интересный способ точного центрирования текста по вертикали в элементах управления. В вебе это сложнее, ведь межстрочное расстояние и базовая линия шрифта ведут себя по-другому.
A Deep Dive on Skipping to Content
Paul Ratcliffe показывает, как быстро поддержать навигацию с клавиатуры через кнопку «Tab» для пользователей с ограниченными возможностями.
Новые скрипты
Дизайн-менеджмент и DesignOps
UX-Maturity Stage 1: Absent
Sarah Gibbons описывает первый уровень зрелости дизайна в фреймворке Nielsen/Norman Group.
Designing the future, 14 days at a time
Maria Christley делится опытом создания видения будущего для корпоративных интерфейсов Atlassian. Это серия рабочих сессий, которая помогла обрисовать его.
Методологии, процедуры, стандарты
Design Thinking: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о процессе и методах дизайн-мышления.
Брендинг цифровых продуктов
Циан
Продолжение ребрендинга Циан от отечественного агентства Щука. Как и зачем его делали.
Upwork
Ребрендинг одной из главных бирж фрилансеров Upwork от американского агентства Porto Rocha.
Cabify
Ребрендинг испанского сервиса такси Cabify, сделанный собственными силами.
Yelp
Ребрендинг справочника Yelp.
WePresent
WeTransfer запустили своё медиа. Они стали одним из самых ярких примеров связи бренда с интерфейсом и на этом сайте их стилистика раскрывается ещё сильнее.
История
Why are hyperlinks blue?
Elise Blanchard разбирается, почему ссылки в браузерах обычно выделены синим цветом. Она разобрала кучу интерфейсов конца 80х и начала 90х и ссылается на конкретный пункт истории обновления версий у классического браузера Mosaic 12 апреля 1993 года.
KidPix
Браузерная версия классического инструмента рисования для детей, выпущенного Apple в 1989 году.
If 8 Popular Websites Existed In The 90s
Дизайнеры агентства Zyro представили современные интернет-сервисы в виде программ и сайтов 90х.
Alvy Ray Smith — A Biography of the Pixel
MIT Press выпустили книгу Alvy Ray Smith «A Biography of the Pixel», со-основателя Pixar. Она посвящена истории графики в целом с фокусом на цифровой. Выдержка из неё об истории пикселя.
Тренды
Color Trends — Top Popular Colors Used in Stock Photography
Цветовые тренды 2021 года от фотобанка Everypixel.
Алгоритмический дизайн
Shaper — Interface Styles Shaper
Интересный эксперимент Hayk An, позволяющий настраивать интерфейс, собранный на базе компонентов с токенами. Можно получить случайную комбинацию параметров, так что это игрушка на стыке алгоритмического дизайна.
The Rise of Long-Form Generative Art
Tyler Hobbs рассказывает о набирающем обороты применении алгоритмического/генеративного дизайна. Это коллекционные серии произведений, которые продаются через NFT и даже генерируются по определённым верифицированным правилам. Он упоминает платформу Artblocks и свой проект Fidenza на ней.
UX Prototyping for AI. Six ways to prototype AI experiences
Owen Schoppe из Salesforce описывает роль прототипов в интерфейсах на базе искусственного интеллекта. Они помогают моделировать результат генерации и общую логику взаимодействия.
Fishdraw
Генератор рисунков рыб на базе алгоритмического дизайна.
Reducing Carbon Emissions On The Web
Berwyn Powell анализирует углеродный след, который оставляют сайты. Как изображения, видео, скрипты и другие части веба влияют на общую картину.
Для общего и профессионального развития
How I Experience Web Today
Отличный стёб над современным состоянием интернета. Он в утрированном виде показывает кучу ненужного геморроя и обвесов.
Stop asking Linkedin for feedback on your UI design
Nick Groeneveld подсвечивает забавный движ — дизайнеры просят на LinkedIn выбрать один из вариантов дизайна (когда-то для этого использовали Dribbble). Само собой, этот формат не работает.
Academic articles every designer should read
Meghan Wenzel сделала обзор нескольких важных научных и исследовательских публикаций о дизайне. Ценность для бизнеса, поведение пользователей, креативность в целом.
Люди и компании в отрасли
Two perspectives on the designer who Steve Jobs could not hire
Arun Venkatesan описывает историю карьеры промышленного дизайнера Richard Sapper, который также повлиял компьютеры (красная кнопка на IBM/Lenovo ThinkPad — его затея). Он из той же немецкой плеяды, что и Dieter Rams, но использовал другие подходы.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или vc.ru ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
