Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-март 2015.

Паттерны и Best Practices

UX 365 — Discovering user experience one word at a time
Hannah Atkin в своем блоге собирает визуальный словарь UX-терминов.

Baymard E-Commerce Product List Usability
Выдержки из отчета Baymard Institute, посвященного страницам списка продуктов на сайтах электронной коммерции:

• О том, что полезно делать дополнительные параметры сортировки для конкретных категорий. Это позволит не получать полупустых результатов с помощью фильтрации. Правда, предлагаемое решение находится на границе фокуса внимания, да еще и добавляет пару элементов в конце не меняющегося списка, так что не факт, что будет работать.
• Большая статья для Smashing Magazine об инструментах фильтрации списков.

Banish the Hamburger Menu, Adopt Pizza Menus
Nielsen/Norman Group рассуждает о неэффективности бургерного меню и предлагает более современные варианты: пицца-меню и суши меню для восточного рынка. В продолжение темы:

• Luke Wroblewski показал кебаб-меню.
• Luke Wroblewski собрал примеры кейсов, когда спрятанная навигация ухудшала показатели вовлеченности и глубины просмотра.

6 types of digital affordance that impact your UX
Paula Borowska описывает 6 типов аффордансов.

Mobile User Experience: Limitations and Strengths
Raluca Bidiu из Nielsen/Norman Group собрала неплохую подборку текущего состояния сильных и слабых сторон мобильного контекста использования сервисов. Занятно, правда, что при этом сайт компании до сих пор не адаптирован для телефонов.

Приложения «Медузы»: как получать одни пятерки
Circa предложили ненавязчивый способ получить от пользователей оценку приложения. У приложений Meduza это решение дало отличный выхлоп.

Понимание пользователя

ReactiveDesign
Подборка принципов восприятия скорости работы интерфейсов.

Practical Empathy
Вторая глава книги Indy Young. «Эмпатия приносит баланс». В продолжение темы:

• Ещё одна статья на тему от Seung Chan Lim.

7 Things Every Designer Needs to Know about Accessibility
Хорошая памятка по обеспечению доступности от Jesse Hausler из SalesForce.

It’s Not Enough To Be Fast: How Emulating Human Interaction Is Key To Improving Digital...
Обзор исследований и концепций на тему того, как синхронизация общения по всем каналам помогает точно передавать смысл сообщения. Только 7% смысла передается словами, остальное — тональность и язык тела. Статья разбирает способы поднять эту цифру в онлайн-общении.

Информационная архитектура, концептуальное проектирование, контент-стратегия

Can ’User-Experience’ Experts Become ’Customer-Experience’ Experts?
Некоторые традиционные UX агентства начинают себя пробовать в CX. Toby Bottorf o переходе из User Expereince в Customer Experience.

Content Migration Alone Is Not An Effective Content Strategy
Kara Pernice из Nielsen/Norman Group дает рекомендации по миграции контента при редизайне интранет-сайтов. Важно отфильтровать невостребованную информацию и не тянуть ее в новую версию.

Проектирование и дизайн экранов интерфейса

Design Universal Windows Platform (UWP) App
Microsoft опубликовал гайдлайны по дизайну универсальных приложений для Windows 10. Общие принципы адаптивных интерфейсов новой платформы, а также шаблоны — правда, почему-то только для PowerPoint и Adobe Illustrator. В последних числах апреля проходила конференция Build 2015 для разработчиков, часть выступлений которой было посвящено дизайну:

• Создание доступных приложений.
• Работа с разными способами ввода в приложениях.
• Панельная дискуссия: Дизайн для разработчиков.
• Проектирование адаптивного интерфейса.
• Создание гибких и масштабируемых интерфейсов.
• Математика масштабирования интерфейсов с эффективными пикселями.

Nokia 1100 — The PSD mockups you’ve always wanted
На 1 апреля студия Aerolab подготовила шаблон Nokia 1100 в PSD. После этого дизайнеры на Dribbble активно подключились к переводу известных приложений под этот формат. Обещают также шаблон электронных часов Casio F-91W. И еще немного:

• David Stefanides подготовил шаблон Nokia 3310.

Новое для Material Design

• Гайдлайны заметно расширились.

Новое для Apple Watch

• Шаблон иконки приложения в PSD.
• Статья о создании Apple Watch с отличным оформлением.
• Один день с Apple Watch. Шикарный обзор от The Verge.
• Небольшой рассказ Jason Zimdars о создании Basecamp для Apple Watch.
• Nir Eyal применяет модель Кано для анализа функциональности Apple Watch.
• Неплохое описание проблем, с которыми сталкиваются разработчики и дизайнеры для первого поколения часов.
• Как Epicurious нашли сценарии использования, которые имеет смысл реализовывать в часах.
• В кейсе Things показан интересный прототип устройства. Ну и само решение дико интересное в плане паттернов.
• Интересный концепт приложения для игры Dying Light, когда оно выступает в роли второго экрана. Впервые вижу такой сценарий использования.
• Подборка кейсов о дизайне известных приложений.

Новое для Android Wear

• Со дня на день выйдет крупное обновление платформы, которое здорово расширит ее возможности. Подключение к wi-fi и работа без связки с телефоном, упрощенный режим отображения приложений для экономии энергии, жесты рукой для работы с уведомлениями, ну и, конечно же, рисование эмоджи!

Современные редакционные CMS

• Сетку от Look at Me перевели на английский и выпустили как отдельный продукт. Он отчасти повторяет промо-сайт Arcticle и не называет цен — нужно обращаться с запросом напрямую.

Инструменты паблишинга

• Еще одна красивая история про The Grid, о том, что он поможет дизайнерам работать головой, а не руками.
• Конструктор Atavist, похожий по духу на Tilda. Чуть подробнее о нем и его создателях.
• Простой конструктор тем для Wordpress. Позволяет в том числе собирать одностраничники.
• Конструктор персональных сайтов, который отлично подойдет и для других одностраничников.
• В ReadyMag появился классический скроллинг сверху вниз, так что теперь можно делать сайты, а не журналы. Кроме того, пропало ограничение на количество проектов в бесплатной версии.

Почтовые рассылки

• Фреймворк для создания адаптивных писем. Протестирован в большинстве почтовых сервисов.

Новое для Sketch

• Что нового в версии 3.3.
• Удобный поиск плагинов для Sketch.
• Достаточно подробно расписанный сценарий работы с адаптивным дизайном в Sketch.
• Набор символов для построения интерфейсных диаграмм и схем.
• Простой способ проверки локализации на разные языки в макетах.

Новое для Pixate

• Появилась возможность обсуждать прототипы.

Новое для InVision

• Теперь можно собирать прототипы приложений для Android Wear и Apple Watch.

Пользовательские исследования и тестирование, аналитика

The three lenses of usability evaluation
David Travis из UserFocus приводит три подхода к проведению пользовательских исследований, которые хорошо показывают связь методов с общей стратегией компании. Хороший пример подстройки обширного инструментария UX-специалиста под конкретную ситуацию.

The Future of UX Research: Uncovering the True Emotions of Our Users
Обзор современного состояния психофизиологических исследований от Andrew Schall.

Do Users Notice Your Design Elements? 3 Ways to Find Out
Jeff Sauro описывает три способа узнать, что пользователи осмысленно увидели что-то в вашем дизайне — опросы, eye-tracking и наблюдения. В каждом из них есть свои оговорки, ведь взгляд человека может попасть на элемент неосознанно.

How to Measure the Reliability of Your Methods and Metrics
Jeff Sauro предлагает четыре способа проверки надежности методов и метрик пользовательских исследований. Сравнение мнений разных экспертов, повторные опросы, вариативность порядка и набора вопросов, разделение опрашиваемых на несколько выборок.

A Guide to User Testing
Краткий справочник по разновидностям методов юзабилити тестирования от Jerry Cao. Продолжение и полная версия справочника, описывающая более 30 методов тестирования в книге от UXPin.

Пользовательские опросы

• 10 основных проблем проведения пользовательских опросов, влияющих на качество получаемых данных.
• Памятка Gabriel Biller и Lada Gorlenko о проведении дешевых пользовательских опросов. Что делать в ситуации наверняка некачественной базы респондентов.

No More Pogo Sticking: Protect Users from Wasted Clicks
Aurora Bedford о том, как использовать аналитику для того, чтобы выявить случаи pogo sticking — когда пользователи в поисках информации заходят на страницу и тут же возвращаются обратно, на найдя того, на что рассчитывали.

Руководители Wargaming об исследовании поведения игроков в World of Tanks и других играх
Как работает команда аналитики в Wargaming. О задачах, аудитории, инструментах, подходах. В продолжение темы:

• Как команда Wargaming использует когнитивные искажения в своей работе.

3 Reasons Why Crowdsourcing Fails
Craig Tomlin обозначил три основные проблемы пользовательских исследований с помощью опросов на сайте. Нерепрезентативная выборка, слова людей расходятся с их поведением, некорректные вопросы.

Визуальное программирование и дизайн в браузере

An In-Depth Overview Of Living Style Guide Tools
Роберт Харитонов сделал хороший обзор инструментов для ведения живых гайдлайнов на Smashing Magazine. Здорово, что они разбиты по классам «зрелости» и возможностей. В продолжение темы:

• Фреймворк Bass CSS.

Новые скрипты

• Motion Blur средствами SVG.
• Как дешево сделать горизонтальный скролл в мобильных на CSS, где один из элементов уходит за границы экрана.
• Список новостей в виде тайлов с анимированным открытием полного текста.
• Генератор круговых меню.
• Генератор узоров из треугольников. Тренд Low Poly начала прошлого года теперь совсем просто повторить.
• Кого-то достал вопрос о центрировании в CSS. Специальный сервис генерирующий решения для разных видов центрирования.

Нарезка мобильного дизайна

• Инструмент Resonator для мобильных дизайнеров и дизайн-интеграторов сильно обновился. Теперь поддерживаются 9.PNG.

Работа с SVG

• Раскраска фонового SVG.

Работа с цветом

• Еще один способ CSS-анимации градиентов.
• Скрипт для применения тем оформления к любым частям интерфейса.

Эффекты наложения слоев в современных браузерах

• Обзор возможностей CSS-фильтров от Mahdi Dibaiee.
• Простой разбор с возможностью поиграть с параметрами от Robin Rendle.

Новое для Quartz Composer

• Вышла вторая версия Avocado от IDEO.

Работа с CSS-анимацией

• Помимо управления CSS-анимацией в новом Chrome появятся работа с цветом и шрифтами.

Работа с Flexbox

• Команда Vox Media о механизме Gliss для адаптивности статей, построенной на ограничениях в духе Grid Style Sheets.
• 6 распространенных проблем в CSS, из-за которых ломается сетка.
• Достаточно подробная наглядная шпаргалка по свойствам Flexbox от Dimitar Stojanov.

Метрики и ROI

Can Good Design Be Measured?
Ответвление от серии Pamela Pavliscak на тему измерения дизайна.

Управление интерфейсными проектами, процессами и командами

Юрий Ветров — От дизайн-команды к дизайн-культуре
Моя презентация с конференции CodeFest 2015 о том, как перейти от построения дизайн-команды к выстраиванию дизайн-культуры. Это четвертая часть в серии про UX-стратегию — к лету появится в виде расширенной статьи. Третья, кстати, сейчас на вычитке в UXMatters.

Лет пять-семь назад все говорили о правильных процессах, но сейчас их уже недостаточно — это скорее гигиеническое требование и ориентир. Выручают общие ценности, благодаря которым дизайн-командой может стать вся компания. Эта презентация о ее выстраивании дизайн-культуры, которая зависит от трех составляющих — команды, лидеров и набора базовых процедур. Часть тем не успел раскрыть в этом формате, но к статье картинка будет более целостной. В продолжение темы:

• James Kalbach предлагает посмотреть на модель работы джаз-группы в качестве образца для современных дизайн-команд. Кажущаяся легкость импровизации возникает за счет общего языка, внимания к другим участникам команды и принятия неопределенности. Само выступление, правда, говорит об этом на не слишком понятном узкоспециализированном языке.
• Как сервис Hudl использует интересную модель командной работы, предложенную Spotify несколько лет назад. В ней компания делится по четырем срезам — отрядам, племенам, отделениям и гильдиям. Это позволяет наладить эффективное взаимодействие по самым распространенным ситуациям, при этом сохраняя структуру более-менее гибкой.
• Как дизайн-агентство Prodigi переформатировало структуру компании в кросс-функциональные команды. По сути, продуктовые команды.
• Dave Gray разрабатывает методику Culture Mapping, как способа описания копоративной культуры. Его жерабочий черновик руководства по Culture Mapping.

Git Large File Storage
GitHub открыл возможность отслеживать версионность крупных файлов, в том числе медийных и графических. Это явное приглашение для дизайнеров подключаться к одному из самых популярных инструментов для совместной работы. Анонс с небольшим объяснением. В продолжение темы:

• Создатели сервиса Pics.io для хранения и обмена фото для профессиональных фотографов адаптировали его для версионности дизайна. Она работает в связке с Google Drive.

4 Things Strategists Can Learn From UX Designers
На SXSW Google провела панель, посвященную совместной работе UX-дизайнеров и продуктовых стратегов. По ссылке короткая выжимка из нее.

Resist the Redesign
Alina Senderzon из ZURB пишет о редизайне, как крайней мере внесения изменений в продукт. Одна из причин такого желания — постепенное накопление расхождений в продуктах, которое зачастую выражается в разнице в кнопках. В нашей команде это также проявилось, хотя причины тут не только в дизайнерах — решить эту проблему раз и навсегда может только технологическое решение. В продолжение темы:

• И еще одна статья Alina Senderzon о редизайне как способе постепенной унификации. Она приводит пример работы над письмами рассылки, когда они смогли прийти к простому и легкому решению после того как пожили с первым подходом.

How To Become A UX Leader
Robert Hoekman Jr также пишет о том, что должен делать UX-лидер.

Becoming Design-Infused: 2 Necessary Mutations to Organizational DNA
Многие компании пробуют стать более ориентированными на дизайн, но мало у кого это получается по-настощему. Jared Spool о том, почему иногда продукт с идеальным UX может стать провальным на рынке и о двух секретах, без которых невозможна такая трансформация. Во-первых, без изменения бизнес-модели и бизнес-процессов полный переход невозможен. Примеры, правда, не то чтобы масштабируемые. Во-вторых, нужна внутренняя мотивация в компании, желание организации меняться чтобы найти свое настоящее призвание, а не только перемены, как реакция на конкуренцию и изменение рыночной ситуации. Они также запустили новый бренд конференции UX Advantage по UX-стратегии.

When Change Is Constant — A Spiral UX Design Model
Hang Guo предлагает спиральную модель дизайн-процесса. Она базируется на классической спиральной модели разработки с адаптацией под специфику UX. Не очень понятно, зачем она нужна и чем отличается от гибких методов, но в копилку концепций сгодится.

Design Collaboration in the Enterprise: Building the Foundation of Brilliance
Новая книга UXPin про совместные техники работы и взаимодействия в дизайн-команде.

Продуктовый менеджмент и аналитика

Features do not a Product Roadmap Make
Scott Sehlhorst пишет об отличиях дорожной карты от беклога и других документов, описывающих функциональность продукта. Он отвечает на вопрос «почему», а не только «что» и «когда».

Кейсы

Непрошенные редизайны

• Концепт уведомлений на заблокированном экране от Sudesha Pantham.

The Score Bug: A Case Study on Creating Digital On-Screen.
Интересное решение для спортивных трансляций. Juan J. Ramirez предлагает расширить блок статуса матча и показывать в нем таймлайн основных событий.

Бургерный дизайн

• О редизайне Meduza, который исповедует похожие принципы. Врезки называются «линиями», их также легко перемещать по странице и включать/выключать.

Designing Urban Walks
Антон Реппонен и Данил Криворучко о работе над мобильным приложением Urban Walks.

История

The Demo
Опера The Demo по мотивам эпохальной презентации Дугласа «The Mother of All Demos». Штука сомнительная, но сам факт попадания в культуру забавен. Чуть подробнее. На ней присутствовали многие из тех кто работал с Дугласом, в том числе его ассистент на презентации William English.

Тренды

Тренды 2015

• Группа известных дизайнеров о трендах этого года и ближайшего будущего. Не все свежо, но есть много новых мыслей.
• Большой обзор Trendwatching об интерфейсах без видимого интерфейса. Управление жестами, голосом, взглядом.

The Fall of the Designer
Eli Schiff, мастер дизайн-дискурса 80 уровня, очень интересно пишет о роли дизайнера в эпоху, когда с одной стороны визуальная стилистика стала сверх-минималистичной, а профессиональные требования ожидают от специалиста смены фокуса на работу в коде. Не все посылы в статье здравые, но он смотрит на проблему с большого количества точек зрения и приводит много интересных цитат. Все части серии:

• Первая часть чуть более спорная.
• Третья часть о последователях отзывчивого дизайна, не задумывающихся о его смысле.
• Четвертая часть, очень толковая. О влиянии плоского дизайна на ценность специалистов.
• Пятая часть о маргинализации UX.

Why We Need A Haptic Design Language For Wearables
Компания Immersion предлагает дизайн-язык и платформу TouchSense Core для носимых устройств, которые позволят использовать их возможности более тонко и с умом. Уведомления делятся на пять типов — срочно, позже, в обычные и фоновые, системные и для каждого из них описываются принципы хорошего дизайна.

Дизайн для виртуальной реальности

• Google запустил программу поддержки виртуальной реальности Cardboard VR. Приложения для виртуальной реальности запускаются на смартфоне, вставленном в очки, сделанные, например, из картонной коробки.
• Руководство по дизайну для Google Cardboard (пока там не так много информации).
• Иллюстрированное введение в дизайн для VR от Matt Sundstrom и перевод статьи на русский.

Дизайн для фаблетов

• Новая версия стандартного плеера в iOS8 пытается решить многие проблемы больших экранов. Перенос значительного количества элементов управления вниз, использование свайпа для переключения между основными разделами как в WinPhone.
• Luke Wroblewski предлагает задать рамки текущего понимания мобильного дизайна. 4-5,5«, портретная ориентация, управление одной рукой.

Автомобильные интерфейсы

• Решение Ferrari для автосалонов, которое с помощью дополненной реальности позволяет кастомизировать машину.
• Экспериментальные очки дополненной реальности от Mini, которые будут идти в комплекте с машиной. Интересно, что решение на стыке гаджета и аксессуара в духе бренда. Еще немного о них.

Gridset Responsive Report 2014
Gridsetapp публикуют результаты исследования современного дизайна. В частности, как адаптивный дизайн повлиял на умы и настроения дизайнеров и компаний.

Rolling out the mobile-friendly update
С 21 апреля выдача Google на мобильных пессимизирует не адаптированные для телефонов сайты.

What Is Object-Oriented Experience Design?
Sharon Carter разбирает понятие объектно-ориентированных интерфейсов. Это удобный способ описания дизайна, который позволяет легче работать с возможными действиями и общаться с разработчиками.

Welcome To The Brave New World Of The Corporate-Sponsored Artist
Интересный тренд — крупные компании спонсируют работу художников и исследователей. Для кого-то это маркетинг, но, например, Autodesk считает это сильным методом пользовательских исследований, когда они видят процесс работы потребителя своих продуктов во всех деталях и на всех стадиях.

Web UI Trends Present & Future: The Elegance of Minimalism
Свежая книга UXPin про современные тренды и минимализм.

Интернет вещей

• Интересные размышления Ted McCarthy о том, как менялся дизайн-процесс от физических объектов к программным интерфейсам, и как он может поменяться в эпоху интернета вещей. Упрощается доступ к пользовательской аналитике, уменьшается время реакции продуктовой команды.

Интерфейсы в кино

• Jake Sargeant, автор интерфейсов из Tron и Oblivion, сделал реальный интерфейс анализа данных для компании ProtectWise, специализирующейся на безопасности. Интересный пример проникновения концептов в реальную жизнь.
• Об интерфейсах из сериала Black Mirror.

Для общего и профессионального развития

Web Design Stack
Коллекция инструментов и сервисов для веб-дизайнера. Дизайн, разработка, продакшн, менеджмент, маркетинг, обучающие курсы и объявления о работе. Так же есть раздел с шпаргалками и новости из мира дизайна. Все в удобном виде каталогизировано, регулярно пополняется и получает рейтинг авторов ресурса.

The Golden Ratio — Design’s Biggest Myth
John Brownlee из Fast Co Design запустил дискурс на тему золотого сечения. Он откопал первоисточник мифа о его всесильности при создании гармоничного дизайна. Его часто приписывают в том числе Леонардо Да Винчи, хотя он просто помогал знакомому оформлять книгу на эту тему. Это один из ярких примеров пост-рационализации и поиска паттернов даже там, где их нет.

В ответной статье Darren Crescenzi, входящий в список самых креативных людей по версии Fast Company, жестко и развернуто критикует статью. Где-то с фактами, где-то на эмоциональном уровне.

White Space in Web UI Design (The Power of Nothing)
Еще одна книга UXPin, о свободном пространстве в дизайне.

Онлайн-курсы

• Видео-курсы для дизайнеров UXTree.
• Курс по accessibility, платный ($199).
• Amsterdam University of Applied Sciences запускает на Iversity бесплатный 6-недельный курс по прототипированию взаимодействия.

Advice from UX Heroes: 9 Golden Nuggets
Rian van der Merwe говорит о том, что надо бы поосторожнее бросаться в крайности и не переквалифицировать дизайнеров в разработчиков. Иначе они окончательно превращаются в исполнителей из тех, кто должен думать о продуктах.

Нерадивые дизайнеры

• Тест на неадекватного креативного директора.
• Тест на UX-шарлатанство.

Advice from UX Heroes: 9 Golden Nuggets
Ведущий подкаста UX Intern Wesley Noble рассказывает о том, чему научился за время его ведения.

Люди и компании в отрасли

Ways We Work
Сайт Ways We Work cобирает интервью дизайнеров и других продуктовых специалистов.

Отрывки из книги Khoi Vinh «How they got there»

• Часть интервью с Nicholas Feltron.

Отрывки из книги «Helvetica / Objectified / Urbanized: The Complete Interviews»

• Кусок интервью с Massimo Vignelli.

Материалы конференций

UXPeople — Конференция о дизайне, UX, интерфейсах и проектировании взаимодействия
5 июня в Москве в Инфопространстве пройдет конференция UXPeople 2015.

UX STRAT 2014, part 1: Overview and Workshop Reviews
Отчет Pabini Gabriel-Petit о первом дне конференции UXSTRAT 2014, проходившей 7-9 сентября в Boulder, Colorado (США).

Conference Review: UX Strategies Summit 2014, part 2
Отчет Pabini Gabriel-Petit о втором дне конференции UX Strategies Summit 2014, проходившей 10-12 июня в Сан-Франциско, США.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им. Для удобства навигации начал собирать список «веток» в группе с обзорами.