Июнь '15

Стали доступны видео с конференции UI19, которая прошла 27-29 октября 2014 в Бостоне, США. Правда, за деньги.

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

Основные европейские и американские события UX и веб-дизайна второго полугодия 2015.

• Интервью с командой Meerkat.
• Интервью с создателями Dribbble.

• Fast Co Design про покупку Lunar.

Интересно, что накануне назначения Jony Ive на сайте британского Design Counsil вышла статья на тему важности появления этой позиции. Ее переработал и дополнил The Guardian.

Autodesk нанял Maria Guidice, директора продуктового дизайна Facebook. Компания планирует унифицировать сотню своих продуктов. В этой ветке будут собираться новости об интересных назначениях дизайнеров. В продолжение темы:

• Kate Aronowitz, еще один бывший дизайн-директор Facebook, переходит в финансовый стартап Wealthfront.

Оказывается, SAP запустил исследовательскую лабораторию Communications Design Group под руководством легендарного Alan Kay. Мало того, в команду нанят Bret Victor. Алан размышляет о том, как повторить атмосферу знаковой лаборатории Xerox PARC, давшей основы современных компьютеров. Крайне интересно, что это даст SAP, долгое время славившейся одними из худших интерфейсов в мире.

Новая книга UXPin о теории цвета для веб-интерфейсов. В обойме немного теории, тренды, инструменты и примеры на штуках от Mozilla, Squarespace...

• Кусок интервью с Evan Sharp из Pinterest из книги.

• Воркшоп по написанию букв.

• Sam Gerstenzang о том, чему он научился в команде Imgur о работе дизайнера с продуктом.
• Jesse Weaver пишет о том, что с ума сходить не надо и конвертировать дизайнеров в разработчиков и наоборот вредно. Вот глубокое понимание специфики коллег и эмпатия — это да.

Статья на основе свежего выступления Brad Frost об особенностях и философии дизайна в современном вебе. Много ключевых идей собраны вместе.

Подкаст от Cennydd Bowles и Val Head о моушен-дизайне и анимации для дизайнеров. Запись и текстовая версия первого выпуска.

Комикс UX Hero от Tal Florentin, посвященный жизни мифического продуктового дизайнера Jonathan Sketch. Первая книга уже готова и доступна бесплатно, за $39 можно получить первые 6 выпусков. Формат помасштабнее давно известного открывателя жанра OK/Cancel.

Влад Головач объявил о важной инициативе: «К сожалению, на русском языке выходит слишком мало оригинальных материалов про пользовательские интерфейсы и связанные темы (хотя и сравнительно много переводов и компиляций, а уж презентаций и выступлений вообще как грязи). Нам с Сашей Белышкиным это кажется неправильным и даже немного постыдным, поэтому мы придумали фонд (и выделили бюджет), который без условий платит деньги за оригинальные публикации. Соответственно, если у кого-то у вас в списке задач на будущее есть пункт „Собраться и написать уже наконец-то статью о [интерфейсная тема]“, знайте, что у вас есть шансы не просто написать статью (и стать грамотнее, умнее, научиться лучше писать и т.д.), а ещё и получить 3000 рублей в качестве бонуса. Откладывать только не надо, потому что бюджет не вечен. P.S. Особенно роскошно это предложение для тех, кто по какой-то причине нас, Usethics, не любит. Лишить нас с Сашей личных сбережений должно быть не просто полезно, а неизъяснимо приятно!»

Patrick Mankins о тонкостях создания таких интерфейсов в духе фильма «Her».

Компания Net-a-Porter пробует построить в интернете концепцию социального шопинга, т.е. похода по магазинам с подружками. По факту это что-то вроде собственного Pinterest, но инициатива интересная.

• Claire Rowland о принципах дизайна для IoT.

• Хотя сама по себе идея пичкать простое устройство функциональностью телефона спорная, в статье Fast Co Design достаточно подробно рассказывается о принципах взаимодействия, заложенных в T9-подобную клавиатуру для часов.

• Claudio Guglieri из F-I и David Navarro провели мощное исследование интерфейсов в кино. На основе этого они выступают с большой презентацией, на промо-сайте есть много деталей об этом.
• статья, посвященная приборным панелям транспортных средств всех форм и габаритов в фантастическом кино. Перевод на русский.

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

Mark Wilson размышляет о том, почему бум инфографики постепенно сходит на нет. Похоже, она просто перестала быть вау-штукой и стала еще одним рабочим инструментом. Кроме того, необходимость адаптировать ее для мобильных сильно подрезала экспрессивные возможности.

• Raluca Budiu из NN/g о принципах расчета изменения UX-метрик при редизайне.
• Sana Rao рассказывает о работе над новой страницей профиля в Twitter.

• Редизайн NY Times от Артема Тройного.
• Редизайн LinkedIn от Flávio Argemi.
• Приложение VSCO для Mac.

Еще один мощный рассказ о том, как радикально поменялся дизайн Google. Хотя инициативы по приведению продуктов в порядок начались еще давно, революция случилась во многом благодаря Mathias Duarte, который выстроил новое видение дизайна и процессов, а благодаря тесному общению с Larry Page провел все это в жизнь. Перевод на русский.

• Michael Bamberger об особенностях использования MVP в корпоративном секторе. Вчистую их использовать сложно из-за тяжеловесности среды и бюрократии, необходимо воспринимать их как MVE, т.е. эксперименты.

• Советы вчерашним выпускникам и завтрашним стажерам от известных дизайнеров в отрасли.
• Thomas Lockwood также дает советы вчерашним выпускникам и завтрашним стажерам.
• Вторая часть плана Fred Beecher по отбору и обучению «UX подмастерьев».

• Zeplin вот-вот выйдет из беты, так что команда опубликовала тарифы.

• Michael Davis-Burchat, Daniel Szuc и Josephine Wong пишут о том, как воспитывать культуру пользовательских исследований через формирование базовых привычек и ритуалов.

• Philip Hodgson о 6 вещах, которые мешают UX оказывать заметное вляние на бизнес, оставаясь на обслуживающих ролях, «посудомойками» для других дисциплин. Начиная от таких капитальных вещей, как отсутствие достаточное поддержки на уровне топ-менеджмента и неумения обучить организацию о ценности UX, заканчивая клиническими случаями увлечения карго-культами, излишней замктутостью и академичностью.

Сервис Relay позволяет обсуждать дизайн в Slack. Это плагин, который позволяет легко экспортировать макеты из Photoshop, Sketch или браузера для совместного обсуждения. В обсуждении на ProductHunt привели пару аналогов.

Jeff Sauro предлагает использовать данные повторных продаж клиенту для оценки пользовательской лояльности. Правда, поступают они часто с задержкой и посчитать их не так легко. В продолжение темы:

• Обзор способов измерения лояльности к бренду.

Мои коллеги из команды контент-проектов запустили блог, в котором рассказывается об их опыте учета редакционных метрик, форматах подачи, инструментах редакции и журналиста. У них также есть группа в Фейсбуке, в которой публикуются исследования, разбор практических примеров, дискуссии и обсуждения. Несколько самых интересных публикаций:

• Объемы трафика на ресурс или страницу материала ничего не говорят об эффективности работы редакции. В самом деле, если читатели не увлечены содержанием, то трафик бесполезен. Хорошую журналистику невозможно измерить количеством трафика и CTR заголовка. Но кое-чем другим можно.
• Главные вызовы онлайн-журналистики: дефицит «времени на вас»; сократившееся «время концентрации внимания».

Andrew Chen приводит средние цифры по возвращаемости пользователей Android-приложений. Дневная аудитория падает на 77% в течение первых трех дней, 90% в течение месяца и 95% в течение трех месяцев. При этом долгосрочно удерживать пользователей удается тем, кто смог зацепить их на более-менее регулярные запуски в течение первых 3-7 дней. Для этого нужно не спамить раздражающими уведомлениями, а пытаться активировать новичков.

• О SVG-анимации в JS-фреймворке Greensock.
• Практическое руководство по подготовке и последующему использованию SVG в вебе.
• Демо работы графических фильтров в SVG.
• Обзор текущего состояния и способов работы с анимацией в SVG.

• Простой обучающий сайт по азам JavaScript.

• Chris Coyier разбирает способы работы с выделением текста в браузере.
• Капли дождя на чистом CSS.
• Бодрая анимация кнопки отправки формы.
• Коллекция скриптов разворачивания карточки в подробную информацию.
• Коллекция скриптов эффектов прокрутки страницы.
• Эксперимент, в котором страницу можно редактировать голосом.
• Библиотека Dynamics.js для создания анимации, приближенной к физической модели.

• JS-библиотека Vibrant.js позволяет распознавать наиболее яркие цвета на картинке.
• Интересный эксперимент с анализом цветовой палитры лучших сайтов на Awwwards, начиная с 2009 года.
• Набор CSS для создания конических градиентов.
• Скрипт позволяет создавать заглушки на время загрузки изображений с градиентов из основных цветов изображения.

• Andrew Johnson о возможностях интерполяции шрифтов в вебе.
• Шпаргалка по созданию адаптивной шрифтовой сетки с помощью CSS-пре-процессора SASS.
• Мощный эксперимент студии Letterror по работе с адаптивными шрифтами и интерполяцией в вебе. Когда Just van Rossum рассказывал на конференции Серебро Набора 2014 о своем десктопном инструменте Robofont, четкой картины по тому как представить это в вебе у него не было. И вот спустя полгода его же словолитня показала работающий пример.

• Безумно крутой пример того, как с помощью обрезки по маске был создан сайт про исчезающие виды животных, нарисованных полигонами.

Protein синхронизирует компоненты интерфейса, их представления в векторе и обратно в код. Команда анонсировала проект на FrontendConf в Москве и Web Standards Days в Петербурге. Protein может конвертировать любые компоненты интерфейса в вектор для использования в Sketch или Adobe Illustrator и обратно. То есть изменения из Sketch будут попадать обратно в библиотеку в виде кода — как Dropbox для компонентов интерфейса. Авторы говорят, что это принципиально другой подход, который, как обещается, решит проблемы взаимодействия дизайнеров и разработчиков. Дизайнеры теперь смогут использовать живые компоненты для создания макетов и синхронизировать их кодовое представление в фоне. Просто работайте над дизайном ;) Теперь у вас будет одна библиотека компонентов, над которой будут работать дизайнеры и разработчики. Одновременно! Protein переворачивает разработку с ног на голову, пропагандируя в первую очередь создание компонентов разработчиком, а затем их использование дизайнером в макетах интерфейса. Страница проекта в Фейсбуке и презентация.

• Оказалось, что у 2GIS работает интересный инструмент контроля верстки Makeup. Он позволяет наложить код на макет и найти расхождения. Также можно посмотреть, что будет с блоком при выводе в него нестандартного контента. Демо-сайт.
• Гайдлайны Envato Market.
• Перевод статьи Brad Frost об инвентаризации паттернов на русский.

Моя презентация о платформенном мышлении с конференции UX People 2015. Как перестать плодить документацию и начать жить. Все это сжигает уйму времени на бумагомарательство — силы уходят на полировку побочных документов, а не продукта. Нужно воспринимать работу над продуктом как создание и развитие платформы, а не конкретный релиз. Я рассказывал немного об этом в конце 2013 и 2014 года. Но там был упор на конкретные кейсы, а в этой презентации — пошаговая инструкция по созданию такой платформы. По количеству слайдов это уровень «nightmare», но задача действительно сложная. В конце презентации длинный список всех тех, благодаря кому эта картина выстроилась в единое целое и начала внедряться на практике. Изначальная идея была простой, первый прототип платформы появился в середине 2012 года. Но по мере перевода все большего количества сервисов на нее видение корректировалось и расширялось. У нас огромное количество продуктов и вопросов по каждому из них, так что мы еще в пути. Поэтому серия будет продолжаться :) Видео выступления. Там, правда, не все и в очень быстром темпе.

Jeff Sauro дает рекомендации на случай, когда в собранных по результатам пользовательских исследований данных есть пробелы. Неполные данные можно удалить или восстановить несколькими способами.

Памятка Jeff Sauro о сводном анализе продуктов и интерфейсов, а также его разновидностях.

• О том, как создавался интерфейс новой версии Hype.

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

• Появилась интеграция с Dropbox.

Axure выпустили приложения AxShare для просмотра прототипов на Android и iPhone. Они будут доступны и в офлайне.

• Шаблон Apple Watch.
• Прототипы можно встраивать в любые страницы.

Новое поколение продукта Macaw, с гораздо более широкими возможностями. Те, кто купил первую версию, получат скидку.

• Появились командные аккаунты, облегчающие совместную работу.
• Еще одна простая обучалка по созданию несложного экрана с прокруткой и pull-to-refresh.

• Mark Jenkins о том, как быстро подставлять в макеты реальные данные из JSON.

• InVision выпустили всеобъемлющий набор элементов / экранов для мобильных приложений: Sketch, Photoshop, поддержка экранов высокой плотности, легкая кастомизация.
• На подходе пятая версия InVision. В блоге компании начали описывать основные улучшения.
• Они также поддержат режим artboards в новом Photoshop — считай, автоматом соберут прототип из него.
• Теперь из InVision можно сразу публиковаться на Dribbble.

Примерно в то же время Pasquale D’Silva сделал очень толковый и глубокий разбор состояния современных дизайнерских инструментов. В первой части он говорит о прототипировании сложного взаимодействия и анимации, предлагая интересную категоризацию. Во второй смотрит в сторону инструментов игровых дизайнеров. Кажется, и тут нас ждет анонс нового продукта :)

Josh Puckett из команды Dropbox говорит о проблемах современных инструментах дизайна. Немногие из них заточены под адаптивность на уровне рабочей области и он предлагает свое видение правильного решения. Похоже, скоро нас ждет анонс свежего инструмента! Перевод на русский и продолжение, об использовании в прототипах реальных данных.

Небольшое пошаговое руководство по анимации в Photoshop от Stephen Petrany. Это ограниченный в возможностях, зато почти всегда доступный инструмент.

Вышел Adobe CC 2015. Это одно из крупнейших обновлений Adobe за все время. Оно коснулось всех продуктов компании. Добавлено несколько мобильных приложений и два новых сервиса: Adobe CreativeSync и Adobe Stock. Для продуктового дизайнера прежде всего интересен новый Photoshop. Ребята из Сан Хозе наконец выяснили, что уже много лет создают не инструмент для редактирования фотографий, а скорее помощника дизайнера. Плюс «внезапно» поглотивший многих дизайнеров Sketch. В результате продукт получил массу новых возможностей и изменил странное поведение старых:

• Artboards: монтажные области, позволяющие создавать несколько экранов разного размера в одном документе, сильно облегчающие работу, экспорт и просмотр макетов.
• Множественные стили слоев: стало возможным создавать несколько одинаковых стилей слоя накладывающихся друг на друга.
• Новый диалог экспорта, заменивший Save For Web.
• Библиотеки: создаете один раз, например, тулбар. Используете в других местах, затем меняете исходник, меняется везде. Развитие Smart Object.
• Приложение-компаньон для просмотра дизайна на устройствах (iOS уже, Android на подходе).
• Photoshop Design Space: совершенно новый интерфейс для Photoshop специально для дизайнеров.
• Множество мелких твиков как с точки зрения производительности, так и взаимодействия: одна возможность накладывать внутренние полупрозрачные Stroke чего стоит! :-)
• Adobe Stock — это фото-векторный сток, встроенный во всех продукты компании.
• Adobe CreativeSync — новый подход к обмену всеми вашими дизайн-ресурсами. Он автоматически синхронизирует ваши файлы, шрифты, фотографии, ресурсы, параметры, метаданные, элементы из Adobe Stock для всех ваших устройств и программ.

Небольшое видео «Что нового для UI/UX дизайнера». Остальные изменения и новые фишки других продуктов на официальной странице.

• Отчасти про интерфейсы, отчасти общепознавательно. Статья The Verge про историю и принципы работы игровых автоматов, которая во многом ссылается на книгу «Design for Addiction».

• Чеклист по обеспечению доступности от Ire Aderinokun.

• Paul Montoy-Wilson предлагает термин «anticipatory computing» для интерфейсов, активно использующих текущий контекст пользователя.

Перевод статьи Alan Klement о том, почему персоны и User Story это вчерашний день и почему стоит использовать Job Story. Еще один хороший прием, который может сделать работу продуктовой команды эффективной.

Интересное исследовование Jonathan Flombaum из Johns Hopkins University о восприятии цвета. Он показал, что люди не помнят точный или даже более-менее правильный цвет, а скорее наиболее близкий к нему основной. В продолжение темы:

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

Большая подборка шаблонов устройств, в которых представлены руки разных рас. Они платные, но позволяют лучше попадать в аудиторию.

• Команда Todoist о том, как они сделали редизайн приложения после появления реального устройства.
• Наглядные советы по дизайну приложений для часов от Артема Дашинского.

• Google запустил свой рейтинг приложений для Android с лучшим дизайном. Среди победителей — мессенджер Telegram.
• Дизайн-команда Google запустила блог на Medium.
• Первая часть мощного кейса редизайна Chrome под новые гайдлайны от Sebastien Gabriel.
• Обзор ключевых интерфейсных элементов Android M и их свойств.
• Taylor Ling пишет о том, что важно делать оптическое выравнивание для иконки внутри главной плавающей кнопки.