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

Паттерны и Best Practices

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

• Памятка по использованию изображений в письмах. Кусок из книги Jason Rodriguez.
• Вот это вообще чума — для конференции The Email Design Conference 2015 компания Litmus встроила в почтовую рассылку актуальную ленту сообщений из Twitter.

Absolute vs. Relative Timestamps: When to Use Which
Шеф-редактор UX Movement разбирает относительное и абсолютное значение времени и даты в интерфейсах, пытаясь разобраться, когда какой из форматов лучше использовать.

Встреча нового пользователя

• Небольшое руководство по встрече новых пользователей от Thomas Offinga из Gibbon.

Выдержки из отчета Baymard

• Новая выдержка из отчета, где Christian Holst предлагает использовать единую горизонтальную полоску сортировки и фильтрации вместо двух отдельных областей.
• Jamie Appleseed предлагает задешево персонализировать страницы результатов поиска. На них зачастую выводятся только основные характеристики продукта, но для многие запросы касаются второстепенных параметров. Baymard предлагает выводить рядом с продуктом дополнительную информацию, связанную с текущим запросом — так пользователь сможет сравнивать товары без перехода туда-сюда между списком и описанием товара.

Бургерная навигация

• Про иконку бургера написали даже BBC. Собрали мнения авторов самых нашумевших материалов.
• Steven Hoober говорит о том, что дело не в том, хороша или плоха иконка бургера и ее альтернативы. Он говорит о том, что нужно думать о структуре навигации в целом — т.е. нужно ли вообще прятать элементы навигации.
• Brad Frost предлагает вспомнить о классическом паттерне навигации, когда вместо сворачивания под одну иконку, на экране показывается максимально возможное количество пунктов меню, а остальные прячутся под «еще». На мобильных его не особо любят, а зря.

Free E-book of Web UI Design Techniques: Cards & Minimalism
Коллекция паттернов карточного представления в новой книге UXPin.

3 ways friction can improve your UX
Dina Chaifez о том, что не всегда имеет смысл делать процесс взаимодействия с продуктом идеально гладким и вылизанным. Иногда специально оставленные или спроектированные небольшие «шероховатости» могут повысить вовлеченность пользователей и создать более богатые впечатления.

Разбор анимации в мобильных приложениях

• Carousel для iOS.

Гайдлайны платформ и шаблоны дизайна для них

Обновление Google Design
На конференции Google I/O 2015 был показан Android M, а также серьезно обновлены гайдлайны по всем платформам. На сайте Google Design вместо карточек тайлы, активно продвигается шрифт Roboto Mono — возможно, в этом году нас ждет бум интереса к моноширинным.

FirefoxOS: TVs and connected devices
Mozilla опубликовала гайдлайны FirefoxOS для ТВ. Подход к анимации очень интересный, небольшой рассказ о ее основных принципах.

Дизайн для Windows 10

• Albert Shum, отвечающий за дизайн всех версий Windows, отвечает на злободневные вопросы. Новый интерфейс версий для телефонов подвергся обширной критике и он пытается объяснить решения.
• Статья на TechRadar с дополнительными деталями дизайн-процесса.

Новое для Apple Watch

• NN/g о юзабилити Apple Watch.
• Шаблон для Photoshop.
• Как организатор подкастов Overcast провел оперативный редизайн после того, как дизайнеры смогли пощупать часы вживую.
• Рассказ RedMadRobot о работе над приложением для Билайна.
• Мои коллеги из команды Почты Mail.Ru о том, каково было разрабатывать вслепую. Описано много особенностей платформы.
• Забавный мешап презентационного ролика умных часов IBM WatchPad 2001 года и рекламной речи Jony Ive к запуску Apple Watch тринадцать лет спустя.

50 Meticulous Style Guides Every Startup Should See Before Launching
Еще одна коллекция гайдлайнов и брендбуков.

Принципы дизайна

• Mel Edwards прочитал десятки списков дизайн-принципов разных компаний и составил 6 правил их составления. Хороший троллинг излишнего пафоса во многих примерах.

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

The Psychology of Pricing — A Gigantic List of Strategies
Работа с ценами, их отображением является важной частью дизайна для конверсии. Nick Kolenda подготовил очень и очень крутой обзор психологических стратегий и дизайнерских методов методов представления цен продуктов. В закладки и регулярно перечитывать. Такие мощные вещи попадаются раз в несколько месяцев.

Работа с контекстом пользователя

• Craig Watson о том, как новый Spotify приближает будущее, в котором использование контекста помогает делать продукты лучше.

Secrets, Lies, and Account Recovery — Lessons from the Use of Personal Knowledge Questions at Google
Исследование Google о проблемах в использовании секретных вопросах при регистрации и восстановлении пароля. Помимо того что они плохо запоминаются и их легко подобрать, есть и другие проблемы, ведущие к снижению уровня защищенности пользовательских данных.

Fingers, Thumbs, and People
Steven Hoober собрал основные тезисы из своих исследований за последние пару лет.

Google Ventures On How To Design A Killer Website
Michael Margolis из Google Ventures рассказывает об опыте работы фонда с сервисами электронной коммерции. Они вывели общие принципы воронки покупок, которые работают в самых разных ситуациях, когда покупатель подбирает продукт или услугу. Интересно, что они достаточно широко смотрят на задачу.

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

Think with Paper by FiftyThree
Приложение Paper для рисования на iPad теперь заточено и под скетчи интерфейсов и диаграмм. Оно автоматически преобразует наброски в четкие фигуры и позволяет представлять итоговые работы в приятном виде. Правда, тут же появилась пародия на него.



Проектирование услуг

• Shahrazad Samadzadeh из Cooper о разнице между Customer Journey Map и Service Blueprint.
• Ronnie Battista: «5 факторов успеха и 5 причин неудач Journey Maps».

Employee Experience Journey Mapping workshop slides
Подробный разбор подхода к проектированию процесса найма и работы с сотрудниками от команды Designing CX. В дополнение к презентации выложены все использующиеся шаблоны.



Content-First Design
Steph Hay пишет о контент-прототипах, которые собирают весь контент, использующийся в продукте. Они облегчают в том числе проведение пользовательских исследований.

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

On the Wrist: Android Wear vs. Apple Watch
Luke Wroblewski сравнивает принципы работы и особенности использования Android Wear и Apple Watch. Он делает вывод о том, что на текущий момент на умных часах нужны в первую очередь действия, а не приложения — они слишком тяжеловесны.

В появившейся чуть раньше статье Люк говорит о том, что убирание видимой части интерфейса зачастую просто переносит его в память пользователя — ему нужно знать все жесты, горячие клавиши и другие действия, которые явно не показаны в интерфейсе. Он приводит в пример Android Wear и Apple Watch, где надо помнить очень много для работы с интерфейсом.

Why the Best Wireframe Style Is No Style
Anthony T напоминает, что wireframes должны быть черно-белыми, без применения эффектной для подачи стилистики, как все чаще можно видеть на том же Dribbble. Их задача — передать структуру и логику работы экранов, для того чтобы как можно скорее перейти к дизайну, а не быть отдельным инструментом продажи. Перевод на русский язык.

Getting fluent at the language of iconography
Wenting Zhang пишет о том, что некоторые иконки обозначают существительные, а некоторые — глаголы, и важно не совмещать их. Он также развивает тему единого языка иконок, ведь они не случайно используют шрифты, а первые системы письменности использовали иероглифы, т.е. тоже иконки.

Designmodo Market — Digital Goods Marketplace for Web Creatives
DesignModo запустили магазин шаблонов для дизайнеров.

Новое для Sketch

• Patrick Keenan из Google о том, как работать с Material Design в Sketch.

Новое для Marvel

• Появилась возможность просматривать прототипы на Apple Watch.

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

Qualitative Research Software
В прошлую среду OptimalWorkshop выпустили очень полезный инструмент для хранения результатов ваших пользовательских исследований и поиска по ним. Они пытаются решить реальную проблему — часто результаты тестирований хранятся в разрозненных документах, в разных местах, и информация внутри них никак семантически не связана. Здесь же, все в одном месте, помечено тегами и связано. Сейчас инструмент довольно простой, но думаю, через год-другой ребята сделают нормальный трекер юзабилити-проблем и решений.

How to Find the Sample Size for 8 Common Research Designs
Jeff Sauro приводит размеры выборки респондентов для разных типов исследований. Очень полезный справочник.

Инструменты для пользовательских исследований

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

3 Ways to Combine Quantitative and Qualitative Research
Jeff Sauro описывает три наиболее востребованных способа комбинирования методов качественных и количественных исследований.

A/B-тестирование

• Google Play скоро позволит проводить A/B-тестирование Android-приложений из коробки.

The User is My Mom
Обратка недавней услуге по тестированию интерфейса пьяным: сервис, где пожилая мама его владельца тестирует ваш дизайн. Немного о нем.

Экспертная оценка

• Jeff Sauro о позитивной стороне методики, когда она полезна и применима.

Asking Probing Questions During a Usability Study
Колонка UXMatters, в которой группа экспертов отвечает на вопрос «Что делать, если в ходе исследования пользователь не заметил важный элемент интерфейса».

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

Живые гайдлайны и компонентные системы

• Brad Frost о том, как начать работу над библиотекой паттернов. Он описывает рабочую сессию для всей команды по изучению и структурированию текущих наработок, которая станет основой для будущей дизайн-системы.

Работа с Bootstrap и Foundation

• Инструкция по работе со связкой Bourbon + Neat + Bitters.

Веб-типографика

• Mat Marquis об особенностях использования CSS-свойства «text-rendering», которое улучшает представление текста (в том числе разрешает использование лигатур), но замедляет производительность браузера.
• Marko Dugonjic рассказывает о создании промо-сайта для шрифтов студии Font Bureau, в котором на всю мощь используются возможности адаптивной веб-типографики.

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

• Sara Soueidan о CSS-фильтрах и режимах наложения слоев.
• Dirk Weber рассказывает о возможностях SVG-фильтров и дает пример создания одного из них.

CSS Shapes

• Karen Menezes о возможности обрезки объектов по маске средствами CSS.

CSS-анимация

• Памятка по тому, как использовать кривые смягчения в анимации.

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

• Heydon Pickering об использовании живых регионов ARIA для вывода уведомлений в вебе.
• Мощное выпадающее меню.
• Интересные графические эффекты для ховеров.
• Скрипт, позволяющий трансформировать элементы верстки друг в друга.
• Забавная экспериментальная пузырьковая навигация, чем-то похожая на экран запуска приложений в Apple Watch.
• Will Boyd предлагает крутое решение для интерфейсов, в которые используют уменьшенные версии страниц для ссылок на них. Это JS/CSS-скрипты, которые позволяют уменьшить любой экран до состояния тамбнейла.
• Эффект искажения картинки.

Работа с Flexbox

• Книга Landon Schropp о работе с flexbox с хорошо разжеванными примерами. На сайте можно подписаться на бесплатную рассылку с материалами оттуда, где в наглядном виде рассказывается об основах подхода. Одна из статей-выдержек.

Работа с SVG

• Как воссоздать анимированный логотип Buffer с помощью SVG.

Работа с Pixate

• Пошаговый рассказ о создании анимации а-ля Yelp.

Revisiting :Visited
Joel Califa о том, что пора наконец-то вспомнить про один из ключевых CSS-атрибутов :visited для ссылок и снова отмечать уже посещенные. Он предлагает несколько решений для дешевого внедрения в условиях того, что многие разработчики обнуляют стандартный CSS в своем коде.

Input Type Sandbox
Aaron Ladage запустил небольшую тестовую утилиту для проверки всех разных типов полей ввода в разных браузерах в большом и мобильном вебе. На Smashing Magazine вышла статья с разбором основных находок. В этой ветке будут собираться особенности работы веб-форм в разных браузерах.

StatusPage.io — Hosted Status Pages for Your Company
Сервис Better Error Pages для быстрого создания страниц ошибок. После этого их нужно будет загрузить к себе на сервер.

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

Дизайн-культура

• Как работает дизайн-команда Netflix.
• Как устроена команда Vox Media. У них два типа команд — встроенные, которые занимаются самим продуктом и инструментальные, которые делают общие для всей компании решения.
• Chris Poteet пишет о важности обучения и развития клиентов для того, чтобы работа с ними была более комфортной, а результат не погряз в компромиссах.

Understanding Stakeholders Through Research
Jim Ross описывает процесс сбора информации у клиента и заинтересованных лиц. Зачем нужно такое исследование, как строятся его этапы, как лучше провести рабочие сессии и что должно стать результатом всего этого.

Flawless app — Collaboration tool for developers & designers
Технологическое решение, которое улучшает коллаборацию UI-дизайнеров и front-end-разработчиков в удаленных проектах. Сервис позволяет автоматически создавать гайдлайны и сравнивать начальный дизайн с имплементацией разработчика. В конце июля выходит beta-версия. Авторы открыты для общения с теми, кому знакомы проблемы траты времени на ручное создание гайдлайнов и мутную проверку имплементации «на глаз».

UX Management Roundtable: Challenges 2015
Компания Informaat описывает основные проблемы, стоящие перед современными дизайн-менеджерами. Постоянное развитие дизайн-команд, их интеграция в гибкий процесс разработки, способы делиться находками из исследований со всей компаний и подрядчиками, усиление влияния в компании, использование больших данных. К статье прилагается достаточно подробный PDF с ответами на эти вопросы.

Managing Chaos — Digital Governance by Design
Отрывок из новой книги Lisa Welchman «Managing Chaos», которая вышла в этом году в Rosenfeld Media. Это глава 7, посвященная выстраиванию процессного дизайн-фреймворка.

User Experience for Product Designers
Paul Hershey хорошо описал стандартный процесс проектирования и дизайна интерфейсов в современных реалиях переноса все большей части работ в браузер. Описание некоторых этапов, конечно, можно расширить, но общий обзор хороший.

Критика дизайна

• Советы по проведению критики дизайна от Neal O’Grady из Webflow.

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

You Won’t Believe What These Five Lenses Can Show You About Your Product
Статья Scott Sehlhorst о пяти линзах продуктовой стратегии, которые помогают формировать конкретные планы. Потребительские и отраслевые тренды, конкурентная среда, финансовое здоровье продукта, технологическая среда, операционная эффективность.

Sweating the UX Details
Свежая презентация Stephen P. Anderson о разнице между требованиями к продукту и experience, а также ключевых составляющих достижения второго компонента — культура, процессы и ценности.

Кейсы

Редизайн The Guardian

• Как The Guardian переработал подход к работе с горячими новостями. Статья рассказывает о формате представления и уведомлениях, а также показывает историю вопроса.

Интерфейсы в играх

• О работе Blizzard над интерфейсом Heartstone.

Кейсы редизайна

• Рассказ о редизайне австралийского государственного сайта Business Victoria.
• О недавнем редизайне Netflix.

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

• Любительское Android-приложение Kickstarter.

Тренды

2014 Design Value Index Results and Commentary
Jeneanne Rae из Design Management Institute рассказывает об индексе рыночной стоимости Design Value Index (DVI) для компаний, которые активно вкладываются в дизайн. Он, правда, работает только для крупных и давно существующих компаний и имеет массу оговорок, но в любом случае интересен. Перевод на русский язык.

15 Mobile UX Facts and Insights 2015
Jeff Sauro приводит подборку фактов о пользователях мобильных и планшетов. Это цифры статистических и пользовательских исследований, касающихся общих моментов использования и работы с конкретными сервисами.

Тренды 2015

• Benjie Moss об использовании генеративных паттернов и других сложных визуальных структур в современном вебе, созданных с помощью веб-стандартов.
• Прогноз интернет-трендов на 2015 от KPCB.

Виртуальная реальность

• На конференции Google I/O 2015 помимо новой версии Cardboard было выпущено приложение Cardboard Design Lab, наглядно показывающее основные принципы дизайна для виртуальной реальности.
• Оказалось, что для Cardboard Design Lab Google снова привлек ustwo. В блоге студия рассказывает о принципах дизайна для виртуальной реальности, заложенных в приложение. Учитывая насколько они жгут, один из главных кандидатов на покупку большой компанией :)

Умные часы

• <a href="«www.engadget.com/2015/05/29/atap-project-soli%20>Project Soli

Носимая электроника

• Лаборатория Google ATAP представила на Google I/O 2015 инициативу Project Jacquard по работе с носимой электроникой — он назван в честь легендарного промышленного ткацкого станка, одного из символов технологической революции. Его также курирует Иван Пупырев.

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

• Ravi Sawhney о том, что гораздо больше пользы принесут «senseables», интегрированные в окружающую среду, чем текущее понимание носимых устройств. Речь о том же интернете вещей, который в этом концепте собирает фитнес-информацию.
• Designing for the Internet of Things — бесплатная книга от O?Reilly на 270 страниц. Включает избранные главы из пяти книг издательства про интернет вещей.

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

• Territory Studio поделилась скринами интерфейсов из AVENGERS: Age of Ultron.
• Интервью со студией Territory, работавшей над интерфейсами в Avengers 2.
• Интересная нарезка из старых и более современных фильмов, показывающих штампы взаимодействия с технологиями. Необходимость постучать, взлом компьютерных систем, мейнфреймы и т.п.
• Интервью с John Underkoffler, дизайнером интерфейсов Minority Report.

Why ’mobile first’ may already be outdated
Paul Adams из Intercom предсказывает закат подхода Mobile First. Проектировать нужно для системы экранов и исходить от задачи пользователя, некоторые задачи более естественно решать на мобильном устройстве, а другие — на большом экране. Нет общего подхода, который работает для всех.

We Tested How Googlebot Crawls Javascript And Here’s What We Learned
Adam Audette рассказывает об эксперименте с поисковым роботом Google. SEO-специалисты говорят, что нельзя использовать на странице скрытый контент, который активируется с помощью JavaScript — поисковики не индексируют его. Но по факту оказалось, что многие востребованные ситуации вполне себе отрабатывают. SEO часто ограничивает дизайнеров в этом плане, но, возможно, что скоро это закончится.

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

Продуктовые дизайнеры

• Пятая часть сериии Eli Schiff о маргинализации UX.
• Ivana McConnell предлагает посмотреть на проблему взаимодействия между дизайнерами и разработчиками с другой стороны. Одно из самых популярных сейчас решений — это развитие сопутствующих навыков, когда дизайнер учится верстать, а разработчик — разбираться в дизайне. Но можно ведь и просто наладить более тесное взаимодействие.
• Melissa Mandelbaum о важных качествах продуктового дизайнера.

Sketchnotes SF Meetup, Round 17 — People & Faces
Kate Rutter проводит в Сан-Франциско ежемесячные митапы по Sketchnotes. Это презентация с одного из недавних.

• Mike Rohde считается изобретателем Sketchnotes. Слайды с его воркшопа на конференции DSGNDAY 2014.
• Karin Bosch о создании эскизов на iPad.
• Не в чистую sketchnotes, но часть да. Записные книжки дизайн-команды Optimizely. Интересно, как подходы отличаются от роли.

Перевод книги Mailchimp «The UX Reader»

• Улучшения и итерации.

The Future of Web Design is Hidden in the History of Architecture
Забавный взгляд на историю веб-дизайна, где Mike Sall пытается сравнить ее вехи с общей историей искусства. Спорно местами, но точка зрения интересная.

wwwhere
Еще коллекция ресурсов и материалов для тех, кто делает сайты и сервисы

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

Consistency in UI Design: Creativity Without Confusion
Общая согласованность интерфейса, «основы имба-дизайна» и свежие кейсы про все это от Amazon, Adobe, Reddit и Jawbone.

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

Jony Ive Is Apple’s First Chief Design Officer
На прошлой неделе произошло важное для всей профессии событие — Jony Ive получил позицию Chief Design Officer в Apple. На C-уровне дизайнеры оказываются нечасто, да еще и в такой знаковой компании. Robert Brunner, который в свое время нанял Айва, дает комментарий о том, почему это важно для всей отрасли. Для справки можно посмотреть полную иерархию корпоративных должностей, условно принятых в тех же Штатах.

Покупки дизайн-студий крупными компаниями

• McKinsey купила компанию Lunar Design.
• Peter Merholz по поводу покупки Lunar McKinsey пишет о том, что сейчас происходит разделение рынка дизайн услуг. Крупные компании-консультанты Deloitte, Accenture, McKinsey — пытаются перехватить рынок стратегического дизайн-консультирования, с этим и связаны многие из недавних приобретений. Традиционные дизайн агентства вытесняются с уровня стратегии и уровень реализации «больших идей», заданных консультантами.
• Быстрое дополнение от Peter Merholz. Возможно, покупка Lunar связана с успехом Frog на их миллиардном проекте с Disney Magic Band. MicKinsey тоже захотелось застолбить место на рынке дизайн-стратегии.
• Wired о покупке McKinsey Lunar.

Закрытие LayerVault

• Сайт DesignerNews продан компании MetaLab, которая обещает развивать его и не обвешивать рекламой. Теперь он работает по адресу www.designernews.co.

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

UX STRAT 2014
Отчет о втором дне конференции UXSTRAT 2014, которая прошла 7-9 сентября в Boulder, Colorado (США).

MX 2015
Видео с конференции MX 2015, прошедшей 20-21 апреля в Сан-Франциско (США).

Service Experience 2014
Видео с конференции Service Experience 2015, прошедшей 13-14 ноября в Сан-Франциско (США).

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