Дайджест продуктового дизайна, октябрь 2015

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

10 000 подписчиков в «Дайджесте продуктового дизайна» в Facebook
Бодрым темпом группа перешла знаковый порог 10 тыс. подписчиков! Не считая групп по поиску сотрудников, сейчас это самое крупное дизайн-сообщество в Фейсбуке. Спасибо всем, кто помогает со сбором свежих материалов, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. И тем, кто читает все это множество публикаций.

10 000 подписчиков в «Дайджесте продуктового дизайна» в Facebook

Я давно пытаюсь выйти за пределы простого формата группы и пробую новые — изначально это была сводная статья за месяц, недавно появились AMA. Для удобства собрал все долгоиграющие ветки в каталог. Еще один способ доставки — рассылка. Подписаться.

Не знаю, когда счетчик пробьет 15 000, но если не снижать планку, то в следующем году вполне реально 🙂

Паттерны и Best Practices

Отчеты Baymard Institute
Baymard Institute

Письма рассылки

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

Гайдлайны платформ и компаний

Windows 10

UI Kit Windows 10 для Sketch

Shazam Brand Guidelines
Гайдлайны Shazam, выпущенные к обновлению бренда в этом году.

Shazam Brand Guidelines

Facebook Design Resources
Дизайн-команда запустила сайт, на котором собраны полезные материалы, шаблоны и инструменты. Сюда же переехал и UI Kit от Teehan+Lax. Еще из интересного:

Facebook Design Resources

iOS 9

Material Design

Apple Watch

Intimate And Interruptive: Designing For The Power Of Apple Watch

Apple TV

iPhone 6

iPad

Дизайн-принципы

The U.S. Digital Services Playbook

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

Intimate And Interruptive — Designing For The Power Of Apple Watch
Paul Irish и Paul Lewis из команды Android в Google предлагают модель RAIL (Response, Animation, Idle, Load) для оценки скорости работы интерфейса и осмысленной оптимизации по конкретным проблемным местам.

Introducing RAIL: A User-Centric Model For Performance

Study: People May Like Things More Just Because They’re New
Интересное исследование о том, что эффект плацебо работает и в интерфейсах. Если заявить пользователю, что в продукте много новинок, он зачастую будет относиться к нему лучше, даже если это просто слова. Еще немного об исследовании.

Study: People May Like Things More Just Because They’re New

Jobs-to-be-Done

Device inertia and momentum behavior make users seem lazy
Kara Pernice приводит три причины, по которым пользователи не понимают или неэффективно используют интерфейсы. Это инертность по отношению к текущему устройству, инертность поведения и избирательное внимание.

Accessibility

Безопасная анимация

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

A Playbook for Improving Customer Journeys
Стратегии оптимизации Customer Journey от Adaptive Path.

A Playbook for Improving Customer Journeys

A Language of Critique for Information Architecture
Толковый материал о том, как правильно критиковать информационную архитектуру. Автор ссылается на модель M3 (Meta-Modeling Methodology) John Van Gigch (конкретные решения, теории и модели, парадигмы), которую можно применить к интерфейсам.

The Good, the Bad, and the Ugly: A Language of Critique for Information Architecture

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

Adobe Project Comet — User experience, prototyping and design app
Гонка инструментов для дизайна и прототипирования накаляется — Adobe выпускает еще один продукт для дизайна и анимации в своей линейке. Если судить по видео, то это развитие интерфейса Design Space в Photoshop, куда добавлена возможность связать экраны переходами для создания интерактивного прототипа с анимацией. Возможность просмотра прототипов на устройстве, взаимодействие с разработчиками, связка с Photoshop и Illustrator, очень интересная работа с контентом и повторяющимися элементами.

Впечатления Khoi Vinh и чуток деталей о его вовлеченности в продукт. Он пришел в Adobe в августе, когда работа уже вовсю шла, но общается с командой. В статье есть небольшая демка работы с инструментом. Бета-версия появится в начале следующего года, релиз — в течение 2016. Подробнее:

Sketch 3.4
Вышел Sketch 3.4 — по ссылке большой список нововведений и исправлений. Правда, версия оказалась глючной и Bohemian Coding пришлось тут же выпускать обновление 3.4.1. Yap Kwang Yik сделал обзор наиболее интересных улучшений. И немного новых плагинов:

Sketch 3.4

Prototyping App Marvel Acquires Design Tool Plexi
Продукт не успел выйти в полноценной версии, а его уже купил Marvel. Он был заявлен как очередной новый инструмент для дизайнеров в браузере от Colm Tuite и был доступен в виде альфа-версии.

Axure from the Field
Axure наконец-то проснулись и решили ответить контент-маркетологам InVision. Они также запустили серию интервью с дизайнерами, использующими продукт.

Axure from the Field

Floid
Инструментов для мобильного прототипирования много не бывает — Floid, свежак. Анонсирован импорт из Photoshop и Sketch, куча шаблонов для разных устройств и предпросмотр на них, экспорт в GIF и HTML. Достаточно крутой сайт с кучей примеров реализации. Стоит $69. Уже запущено приложение для Mac, скоро будет и для Windows.

Floid

Quill — Collaborative Drawing and Wireframing for Teams
Quill, инструмент для совместной работы над wireframes. Интеграции с другими сервисами, версионность. Все очень базово, но до кучи пригодится.

Quill — Collaborative Drawing and Wireframing for Teams

ProtoSketch — Simple yet powerful graphic design for iPad
Приложение для проектирования и дизайна на iPad. Пока только первый набор функций, обещают десктопный клиент для Mac и прототипирование.

ProtoSketch — Simple yet powerful graphic design for iPad

Stitching a Journey Together in a Prototype
Nathan Curtis о том, как собрать единый прототип продукта, если над его разными частями работают отдельные команды. Он приводит в пример сотрудничество с Marriott International, где решалась такая задача.

Stitching a Journey Together in a Prototype

Флаги стран

Goodbye John Doe
Еще один генератор имен пользователей для использования в интерфейсах.

SketchMyApp — Prototype Driven Design for Photoshop
Надстройка SketchMyApp для Photoshop, позволяющая создавать интерактивные прототипы в нем. Командная работа, предпросмотр на устройстве и все такое.

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

Testing for a user need
David Travis предлагает сценарий для пользовательского интервью, позволяющего оценить потребности пользователей.

Юзабилити-лаборатории

«Море можно сделать поводянистее» — как юзабилити-лаборатория Mail.ru Group помогает понять пользователей

Using Social-Media Tools to Connect with Users: A Case Study
Linnea Smolentzov о том, как использовать соц.сети для пользовательских исследований на примере связки Facebook и Skype.

Доверительный интервал

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

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

BoxBox — A modern design tool
Интерфейсный дизайнер Kevin Lynagh и промышленный Ryan Lucas делают новый инструмент для дизайнеров BoxBox. Потрогать пока нечего, но на сайте много толковых статей на тему со скринкастами работы продукта.

How We Fixed Our Icon Problem
Bobby Grace из Trello о том, как компания систематизировала работу с пиктограммами в интерфейсе. Они опубликовали технологическое решение на GitHub.

How We Fixed Our Icon Problem

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

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

Fuse
Из беты вышел инструмент для создания интерактивных прототипов и трансляции их в код для Android и iOS — на появление беты ушел почти год. В отличии от большинства недавно появившихся инструментов Fuse Tools изначально ориентирован на тесную связку дизайнер-программист. Интерактивный прототип, который вы делаете с помощью инструмента является по сути хорошо написанным приложением на нативном для платформы кодом.

Bootstrap и Foundation

Bootstrap Studio

Сетки

See the Pen Diamond grid with Sass (Transform) by Chen Hui Jing (@huijing) on CodePen.

CSS-анимация

Guide To Using WebP Images Today (A Case Study)
Adrian James и Matt Shull рассказывают о преимуществах формата изображений WebP для оптимизации работы с графикой. Он поддерживается только в современных браузерах, зато дает серьезнуют экономию. Другие материалы по оптимизации работы с графикой на сайтах:

SVG

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

Режимы наложения слоев в CSS

Protein

Webflow CMS

Framer

Метрики и ROI

Что такое вовлеченность читателей и как за нее бороться?
Мои коллеги из команды медиа-проектов Mail.Ru Group собрали шикарный сайт про повышение вовлеченности читателей контентных сайтов. Общая информация про эти действительно полезные метрики, куча материалов на тему и несколько видео-лекций.

Что такое вовлеченность читателей и как за нее бороться?

Retention rate — Как создавать продукты, формирующие привычки?
Олег Якубенков из GoPractice описывает модель формирования привычек у пользователя, которую предложил Nir Eyal в своей книге «Hooked: How to Build Habit-Forming Products». Это пять шагов: внешний триггер → действие → награда → инвестиция → внутренний триггер.

Retention rate — Как создавать продукты, формирующие привычки?

UX-стратегия и менеджмент

Team Models for Scaling a Design System
Шикарнейшая статья Nathan Curtis о том, как строить команду для работы над платформой. Он обсуждает три варианта: единый хранитель, централизованная команда и распределенный формат. Последний, естественно, лучше всего. Кстати, SalesForce используют его модель.

Team Models for Scaling a Design System

Его компания EightShapes как-то выпали из моих радаров, когда роль проектных артефактов сильно уменьшилась (а они были одними из лучших в плане шаблонов и плагинов). Но тут сильнейший уровень мышления на тему. И еще один материал в ту же тему.

6 Indicators of an Organizations UX Maturity Level
Macadamian Technologies сделали одну из самых интересных моделей зрелости UX. И вот они развили ее в достаточно сильный фреймворк. Это общая модель, серия статей и тест, позволяющий оценить текущее состояние UX в компании. Готовлю что-то подобное на этот опросник для завершающей части своей серии, есть что подсмотреть. Кстати, эта серия статей доступна в виде общей методички в PDF.

6 Indicators of an Organizations UX Maturity Level

В продолжение темы:

This Project Rocked! That Project Sucked!
Шикарнейший материал Nathan Curtis о том, как компания EightShapes выстроила систему оценки работы дизайнеров и взаимодействия с клиентами, которая позволяет системно улучшать микроклимат в команде и в целом качество работы.

This Project Rocked! That Project Sucked!

Which UX Deliverables Are Most Commonly Created and Shared?
Занятное исследование Nielsen/Norman Group про востребованность разных типов документации разными участниками команды (менеджеры, разработчики, клиенты). Победитель — интерактивный прототип.

Which UX Deliverables Are Most Commonly Created and Shared?

Folio — Simple Git client for designers
Приложение Folio для командной работы над дизайном, обеспечивающее версионность макетов. Построен на базе Git. Небольшой анонс.

Communicating the UX Vision — 13 Anti-Patterns That Block Good Ideas
Отрывок из книги Martina Schell и James O’Brien «Communicating the UX Vision: 13 Anti-Patterns That Block Good Ideas», которая вышла в этом году. Это глава 16, в которой приводятся 13 техник совместной работы для использования на брейнштормах и других рабочих сессиях. Информация о книге.

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

Кейсы

ReDsgn.Co — ReDesign Stories Worth Sharing
Сайт ReDsgn.co собирает официальные кейсы редизайна и непрошенные концепты.

ReDsgn.Co — ReDesign Stories Worth Sharing

Circling Ourselves: The Story Behind Asana’s Rebrand
Добротный кейс про недавний редизайн Asana, с помощью которого компания смогла хорошо провязать бренд с интерфейсом. Много полезных деталей для тех, кто пытается решить задачу также хорошо. Перевод.

Circling Ourselves: The Story Behind Asana’s Rebrand

И еще одна пачка инсайтов из процесса редизайна. В том числе о том, как поэтапно выкатывать изменения на сайт — изменения произошли достаточно радикальные, но их разбили на несколько этапов. Не кейс, а золото, прям!

Netflix Branding
Отличный кейс Netflix, где студия Gretel предложила концепцию наслаивающихся стеков, которая пронизывает продукты, рекламные материалы и другие способы использования бренда.

Netflix Branding

AMA: Новый главный сайт Москвы
Стартовал второй AMA от UX-Среды и vc.ru. На вопросы о недавно запущенном сайте Правительства Москвы отвечали Адриан Крупчанский (Notamedia, управляющий партнер), Максим Павлов (Notamedia, креативный директор), Александр Арабей (Департамент Информационных Технологий г. Москвы, руководитель проектов) и Николай Бобров (Notamedia, директор по развитию). В сфере гос.сайтов в последние годы происходит много интересной движухи и московский ДИТ тут один из самых заметных. Это новый сайт в их экосистеме и интересно, как он создавался и как будет включен во всю цепочку.

AMA: Новый главный сайт Москвы

Инструмент: Совместная работа над проектированием интерфейса при помощи RealtimeBoard
RealtimeBoard — это онлайн-доска для совместной работы, которая позволяет удобно визуализировать процессы, работать с контентом, обсуждать дизайн и планировать. Команда постоянно проводит эксперименты и тесты, так что решила поделиться своим подходом и инструментами для оценки экспериментов на примере проектирования первой пользовательской сессии.

Инструмент: Совместная работа над проектированием интерфейса при помощи RealtimeBoard

The Illustrated Guide to Product Development
Толковая серия статей инвест-фонда Bolt о работе над гаджетами на примере бокса-сборщика чаевых через кредитку.

The Illustrated Guide to Product Development

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

История

Кому нужен GPS? Забытая история навигатора 1985 года от компании Etak
Шикарнейший рассказ о появлении первого автомобильного навигатора Etak в 1985 году. Компания была перепродана много раз и сейчас ее данными владеет TomTom, а наработки используются во всех современных устройствах.

Кому нужен GPS? Забытая история навигатора 1985 года от компании Etak

Тренды

Scripted interaction
Короткая, но очень емкая колонка Mikael Wiberg, в которой он предлагает переосмыслить понятие «interaction». Изначально это была работа над конкретными действиями пользователя в системе, но чем дальше, тем шире становится понятие взаимодействия с продуктом.

Алгоритмический дизайн

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

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

Умные часы и браслеты

Microsoft HoloLens

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

The «science» in the science of design
Хорошие мысли Donald Norman на тему того, должен ли дизайн использовать научные методы или это слабо прогнозируемый креативный процесс. Нужно использовать все три возможных подхода — опираться на теоретическую базу, анализировать кейсы и использовать навыки и интуицию сильных специалистов.

Польза Dribbble

100 работ за 100 дней

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

Фильмы о дизайне

Adobe Portfolio
Еще один анонс от Adobe — инструмент для создания портфолио Adobe Portfolio.

Adobe Portfolio

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

Книги за 2015 год от издательства O’Reilly

Стажерам

Шуточки про дизайнеров за 400

Getting Started in User Experience
Хороший обзорный материал по UX от Leban Hyde для начинающих. Определение профессии, навыки, книги, советы и т.п.

Дайджест продуктового дизайна в формате презентации
Для онлайн-конференции UX-Марафон попробовал сделать дайджест в формате презентации. Собрал самые интересные новости за последние пару месяцев. Не знаю, есть ли в этом смысл и спрос, но галочку «попробовать презентацию» себе проставил 🙂 Кстати, Сергей Андронов с прошлого года делает свой дайджест в таком формате.

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

From product design to virtual reality
В апреле этого года Jean-Marc Denis, создатель Sparrow и Inbox, перешел в команду Google Cardboard. Он рассказывает о том, почему ему интересно это новое направление и чему пришлось научиться. Помимо этого Жан-Марк предлагает безопасные зоны для физических нагрузок, аналогично комфортным зонам для смартфонов и планшетов.

From product design to virtual reality

Сессии AMA

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

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

Получать свежий дайджест по почте

Leave a Reply

Your email address will not be published. Required fields are marked *