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

Паттерны и лучшие практики

True Lies Of Optimistic User Interfaces ^[2]
Интересная концепция «оптимистичных интерфейсов» от Дениса Мишунова. Он говорит, что пользовательские действия успешно обрабатываются системой в 97-98% случаев. И можно отказаться от предварительной проверки результата отправки, чтобы сразу показывать успешность действия. Это применимо не для всех интерфейсов, но там, где цена ошибки невысока — действительно улучшит впечатления от использования продукта.

^[2]

Designing a Usable Dashboard ^[3]
Отличная памятка Rahul Gulati о том, что важно помнить при проектировании дашбордов.

The dangers of delightful design ^[4]
John Saito из Dropbox пишет о том, что с использованием приёмов delight нужно быть осторожнее. Они быстро надоедают, поэтому размещать их стоит на тех экранах, куда пользователь редко возвращается.

Hamburger menu alternatives for mobile navigation ^[5]
Zoltan Kollin разбирает альтернативы бургерному меню.

Отчёты Baymard Institute

• Christian Holst разбирает влияние количества полей в форме оформления заказа на конверсию ^[6].
• Ещё одна выдержка из исследования о том, как слишком жёсткие требования к паролю приводят к отказу от покупки в 18% случаев ^[7].
• Baymard обновили своё исследование форм-аккордеонов на страницах оформления заказа ^[8].

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

• Обзор текущего состояния дизайна для почтовых рассылок от Jason Rodriguez из Litmus ^[9].

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

Дизайн-системы

• Как устроена команда DesignOps в Airbnb ^[10]. Она занимается дизайн-системой и другими инфраструктурными задачами в компании.
• Henry Bayuzick из Etsy рассказывает, как дизайнеры используют «песочницу» в дизайн-системе ^[11] для того, чтобы делать прототипы в коде.
• Яндекс анонсировал Depo, среду прототипирования на базе БЭМ. Он будет опубликован 1 марта 2017. Ранее они также выложили Beast, ещё одно решение на эту тему ^[12].
• Открытая дизайн-система Ant Design ^[13] на React. В сопровождение к ней идут шаблоны для Sketch, Omnigraffle и Axure ^[14]. Часть страниц осталась на китайском.

iOS 10

• Шаблоны iOS 10 в Sketch и Craft Library от Tushar Merwanji ^[15].
• В шаблонах Great Simple Studio появилась поддержка Figma ^[16].

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

Государственный сайт, доступный для людей с ограниченными возможностями ^[17]
Команда «Дизайна госсистем» создала чек-лист доступности сайта для людей с ограниченными возможностями, который нужно прибить над рабочим столом каждого дизайнера и фронтендера. Он подходит к любым проектам (совсем не только государственным) в нем нет ничего лишнего. В нем только исключительно важная, критичная и полезная информация.

^[17]

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

• Apple запустили раздел на сайте компании, посвящённый инициативам по accessibility. ^[18]

The Distribution of Users’ Computer Skills — Worse Than You Think ^[19]
Сильные выкладки Jakob Nielsen о том, насколько хорошо у пользователей с компьютерной грамотностью. Он ссылается на данные исследований населения стран ОЭСР, которые показывают крайне неутешительные цифры для любителей насильно приучать пользователей к новому — только 5% знакомы с технологиями на приличном уровне, 26% вообще ничего не понимают. Посередине между этими значениями — группы с умеренно слабым пониманием технологий.

^[19]

The Power Law of Learning — Consistency vs. Innovation in User Interfaces ^[20]
Шикарный материал Raluca Bidiu из Nielsen/Norman Group о том, почему привычные интерфейсные решения работают лучше инноваций, сделанных ради самих инноваций. Она ссылается на результаты пользовательского тестирования, где виден баланс между скоростью обучения и положительным эффектом для производительности. Зачастую новые решения просто ухудшают узнаваемость, не успевая получить пользу от повышенной скорости работы.

^[20]

UX Design Across Different Cultures, part 1 ^[21]
Jenny Shen делится своим опытом проектирования интерфейсов для разных стран и культур. Она описывает особенности пользователей в Голландии, Германии и других странах.

Color Binoculars ^[22]
Экспериментальное приложение Color Binoculars от Microsoft позволяет людям с нарушениями цветового восприятия увидеть обычные цвета.

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

The Ramp Down to Real ^[23]
Ryan Singer из Basecamp показывает, как пошагово пройти от продуктовой задачи к конкретному решению на примере обучающего видео.

How to Build a Problem Statement ^[24]
Dan Brown предлагает шаблон для описания пользовательской проблемы, которую будет решать продукт.

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

Adobe MAX 2016 and the Future of Creativity and Design ^[25]
На конференции Adobe MAX показали обновлённую линейку Creative Cloud. В Adobe XD добавились ^[26] слои и символы, плюс возможность обсуждать прототипы, но версия для Windows так и не вышла (хотя её можно запросить через бета-каналы). У Photoshop появился ^[27] продвинутый поиск по элементам макета и функциям, можно переносить слои в XD (через копирование SVG). Перевод ^[28].

^[25]

Одна из ключевых частей анонса — платформа Adobe Sensei ^[29], которая позволяет реализовывать более умные функции. На старте заявлены вещи вроде распознавания объектов на фото, сегментация аудитории и т.п. С помощью машинного обучения и других практик работы над искусственным интеллектом они планируют сильно обогатить всю линейку инструментов ^[30]. Они запустили отдельный сайт Adobe I/O ^[31] для таких инициатив.

Adobe XD

• Adobe показали сразу пачку функций для совместной работы ^[32], которые выйдут в следующем году. Тут и Zeplin (спецификации + гайдлайны), и Figma (совместная работа + версионность), и комментирование макетов и прототипов, плюс версия для Windows вот-вот появится. На месте Sketch я бы очень напрягся в следующем году.

Sketch 41 ^[33]
Вышел Sketch 41. Обновилась иконка приложения и подкрутили внешний вид в целом. Но самое крутое — теперь можно заменять символы ^[34], так что легко заменить, например, обычную кнопку на главную. Также готовят поддержку touch bar на новых МакБуках. Перевод ^[35].

^[33]

Другие новости инструмента:

• Sketchode ^[36], ещё один сервис для просмотра макетов Sketch теми, у кого нет инструмента.
• Плагин, помогающий выстраивать типографику по золотому сечению ^[37].
• Курс для начинающих работать со Sketch от команды InVision ^[38].
• Плагин, позволяющий синхронизировать макеты Sketch с документами и таблицами Google Docs ^[39].
• Александр Пасевин показывает, как реализовать компонент кнопки в Sketch с предсказуемо прилипающей к тексту иконкой ^[40]. Правда, этот хак ломает экспорт ресурсов для разработчиков.

Gallery ^[41]
Появилась страница инструмента Gallery, который по духу похож на Wake. Можно запросить инвайт.

Adobe After Effects

• Facebook выложили свой скрипт, позволяющий экспортировать анимацию из After Effects в JSON ^[42]. Дальше его можно импортировать куда угодно — и в нативный код, и в веб. Интересно, что команда Skype делал такую же штуку лет 5 назад, что позволило быстро экспериментировать с моушен-дизайном и уйти в серьёзный отрыв в этом плане (на тот момент мало кто делал анимацию на таком уровне).

InVision

• Кажется, скоро функция Inspect будет доступна не только для корпоративных тарифов ^[43].

Craft by InVision LABS

• Появилась бета-версия Craft Sync ^[44], который позволяет просматривать макеты Sketch вне инструмента со всеми деталями (слои, спецификации).

Pop

• Marvel покупает инструмент прототипирования Pop ^[45]. Инвестиции двухгодичной давности дают о себе знать?

Adobe Photoshop

• Плагин Copio ^[46], который позволяет копировать слои между разными файлами через CTRL/Command+C/V.
• Советы по работе с библиотеками элементов Adobe CC ^[47]. Правда, скриншоты отчасти на французском.

Principle

• Несколько советов по работе с Principle от Kamil Janus ^[48].

Platforma Flowcharts for Web ^[49]
Шаблоны для проектирования интерфейсов в Sketch, Illustrator и Figma от Great Simple Studio. Набор платный ($38), но есть пробник.

Affinity Designer

• Версия для Windows вышла из беты ^[50].

Современные инструменты паблишинга

• WebEdition ^[51], ещё один простой инструмент паблишинга.

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

Agile Development Is No Excuse for Shoddy UX Research ^[52]
Atul Handa и Kanupriya Vashisht дают советы по интеграции пользовательских исследований в жёсткий формат agile-разработки. Они предлагают делить исследования на три типа — стратегические (направление развития продукта), тактические (работа конкретной функциональности) и проверочные (отдельные паттерны и решения).

^[52]

The Facilitation Spectrum — From Babysitter to Therapist ^[53]
Jeff Sauro подсказывает, как модератору вести себя на пользовательских исследованиях с разными типами респондентов.

The Difference between Observed and Latent Variables ^[54]
Jeff Sauro рассказывает о разнице между наблюдаемыми и скрытыми переменными, которые используются при анализе данных пользовательских исследований.

Zarget — Analytics Tool for Webite Design, UX Research and Usability Analysis ^[55]
Zarget, ещё один инструмент для веб-аналитики интерфейсов. Тепловые карты, карты прокрутки, опросы, A/B-тестирование, воронки конверсии.

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

• Сергей Востриков из 1С-Битрикс пишет о проблемах проведения A/B-тестирования для продуктов на старых технологиях ^[56].

Project Management for User Research — The Plan ^[57]
Susan Farrell из Nielsen/Norman Group приводит пример плана проведения пользовательского исследования.

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

CSS Reference ^[58]
Шикарный сайт CSS Reference, который в очень наглядном и понятном виде разжёвывает свойства CSS для дизайнеров и других специалистов, которые хотят научиться верстать.

^[58]

I totally forgot about print style sheets ^[59]
Бесценная памятка по подготовке печатных версий веб-страниц от Manuel Matuzovic. Пошаговое улучшение всех аспектов вывода веба на бумаге.

^[59]

CSS Flags ^[60]
Коллекция флагов стран мира на чистом CSS.

Работа с SVG

• Chris Coyier говорит о вялом продвижении стандарта SVG 2.0 ^[61]. Хотя, по его словам, там и нет никаких революций.
• Новый год на носу, так что всем придётся использовать много снежинок. Генератор снежинок в SVG. ^[62]

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

• Интересный эффект для всплывающих элементов ^[63].
• Шикарные эффекты наклона а-ля Apple TV ^[64].

CSS-анимация

• Крутейшая статья Anand Sharma о том, как оптимизировать CSS-анимацию ^[65]. Его продукт Gyroscope безумно хорош в этом.

Flexbox и CSS Grid

• Oliver Williams об особенностях работы с CSS Grid ^[66].

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

Pay Down Design Debt with Polish Day ^[67]
Dave Rau из Optimizely описывает формат «дня полировки» для исправления проблем в продукте. Команда выделяет день на исправление багов и оценивает список найденных проблем так, чтобы закрыть наиболее критичные.

^[67]

The Biggest Problem Facing UX Design ^[68]
Толковая дискуссия Ben Newton с несколькими дизайн-менеджерами по поводу современных ожиданий от дизайн-команды. Особенно интересен кусок про австралийский банк Westpac, где Jake Causby выстроил интересный подход с customer journey map.

Forrester: Design-Led Firms Win the Business Advantage ^[69] (PDF)
Свежий отчёт Forrester о том, как устроены современные компании, в которых дизайн зрелый и работает на всех уровнях.

The State of UX in 2016 ^[70]
Leah Buley провела ещё один опрос дизайн-менеджеров о современном подходе к построению UX в компании и актуализировала выводы.

^[70]

Abstract ^[71]
Инструмент Abstract облегчает командную работу и ведение интерфейсной документации. Это построенная на базе Git система хранения файлов с версионностью, в которой можно отмечать ход работ над дизайном.

^[71]

Duco ^[72]
Приложение-помощник Duco для проведения дизайн-спринтов от студии New Haircut.

^[72]

A Design Team’s Guide to Leveling ^[73]
Designer Fund работают над толковой серией статей о дизайн-менеджменте. Первая посвящена системе роста дизайнеров и их должностям. Вторая даёт общие советы по управлению дизайн-командами ^[74]. Третья говорит о том, как найти общий язык с менеджментом и разработкой ^[75]. Четвёртая — про ROI дизайна ^[76].

Целеполагание для дизайнеров

• David Service показывает формат описания проблем, которые ценны для пользователя и бизнеса ^[77].

Организация дизайн-критики

• Kristin Zibell описывает свой подход к проведению критики дизайна ^[78]. Она предлагает разделить его на три этапа: убедиться в правильности выбранного направления, проверить наличие всех экранов и пройтись по их конкретным деталям.
• Советы Austin Knight на тему того, как не пытаться слишком уж защищать свою работу на сессиях критики дизайна ^[79].

Построение дизайн-культуры

• Как работает дизайн-команда инструмента паблишинга Weebly ^[80].

Define Your Process To Master Time, Gain Clarity, And Take Control ^[81]
Советы Alexander Charchar по оптимизации рабочего процесса и планирования проектов для фрилансеров.

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

^[82]Laura Klein — Build Better Products ^[82]
Rosenfeld Media выпустили книгу Laura Klein «Build Better Products». UXmatters публикует главу 11 ^[83] из неё, посвящённую работе с метриками.

Улучшаем метрики продукта, спрашивая «Почему пользователи остаются?» ^[84]
Олег Якубенков советует смотреть не на то, почему пользователи уходят, а то, ради чего они возвращаются. Он предлагает взять группу пользователей, которые давно пришли в продукт и продолжают использовать его, изучить их поведение и оптимизировать интерфейс под эти сценарии.

^[84]

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

• В соседней статье Aurora Harley из Nielsen/Norman Group говорит похожие вещи ^[85]. Не стоит фиксироваться на причинах отказа, лучше изучать возвращаемость.

Методологии, процедуры, стандарты

Компетенции UI+UX — Профессиограмма интерфейсостроения ^[86]
Два года назад Usethics начали работу ^[87] над профессиональным стандартом «Специалист по дизайну графических и пользовательских интерфейсов», а в декабре 2015 он был утверждён и опубликован. Правда, стандарт тяготел слишком формализованными формулировками и подачей, так что Владислав Головач, один из главных идеологов этой работы, решил подготовить гражданскую версию. Он собрал инициативную группу, которая в течение полугода описывала профессиональные компетенции и навыки современного продуктового дизайнера — а их разброс очень большой. Сегодня результаты наконец-то опубликованы. Документ очень большой и в будущих версиях наверняка упростится навигация по нему, но уже сейчас это огромное подспорье для отечественной профессии.

^[86]

Спасибо Владу и команде за этот титанический труд: Алексей Незнанов, Алексей Копылов, Фёдор Борецкий, Антон Калашников, Дарья Куликова, Ярослав Перевалов, Владимир Сандин, Павел Сушков, Екатерина Филатова, Екатерина Черняева и Анастасия Чуракова. Новости можно отслеживать на странице профстандарта ^[88].

Кейсы

Inside the 21st-Century Craze for Redesigning Everything ^[89]
Отличная статья New York Times о редизайне как решении реальных проблем и жанре дизайнерской деятельности в целом. Много мыслей и примеров о том, когда это уместно, а когда является просто профессиональным зудом и не находит отклика у обычных людей, потому что просто нет потребности.

^[89]

Designing for Persuasion, Emotion and Trust ^[90]
Толковый рассказ Игоря Губайдулина о том, как он использовал принципы PET (persuasion, emotion, trust) при работе над интернет-магазином La Shoopa. Он заинтересовался методикой при подготовке к сертифицированию по программе User Experience Certified Analyst от Human Factors International. Другие кейсы редизайна:

• Jason Zimdars рассказывает о редизайне мобильного приложения Basecamp ^[91].
• Простой, но достаточно толковый рассказ Юлии Хусаиновой о дизайне веб-сервиса Shyp ^[92].

Why Is It So Hard to Make a Website for the Government? ^[93]
Лонг-рид New York Times о сложностях создания хороших интерфейсов в гос.секторе. Они рассказывают о команде, работавшей в рамках инициативы Code for America, и проблемах внедрения реальных изменений.

Designing Social Customer Support ^[94]
Kathy Baxter из Salesforce описывает принципы работы службы поддержки пользователей в социальных сетях.

История

The Origins and Evolution of Thinking Aloud ^[95]
Jeff Sauro копает истоки исследовательского метода размышлений респондента в слух. Показано его развитие от психоанализа в конце 19 века до текущего использования в работе над интерфейсами.

^[95]

Augmented Reality — The Past, The Present and The Future ^[96]
История гаджетов и технологий дополненной реальности, а также обзор текущего состояния.

Pushing That Crosswalk Button May Make You Feel Better, but ... ^[97]
Ещё одна статья на тему эффекта плацебо у светофоров, лифтов и термостатов. Немного истории и забавных фактов.

Тренды

Юрий Ветров — Алгоритмический дизайн ^[98]
Моя презентация об алгоритмическом дизайне, которую показывал на User Experience Russia 2016 и в Одессе. Она выросла из летней заметки ^[99] и статьи ^[100], а ещё раньше — из подборки ссылок, которые собирал 4 года.

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

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

• AIC перевели мощнейшую статью Samim Winiger и Roelof Pieters об алгоритмическом дизайне. ^[101]

^[102]Cathy Pearl — Designing Voice User Interfaces ^[102]
В декабре выходит книга Cathy Pearl «Designing Voice User Interfaces», посвящённая проектированию голосовых интерфейсов. O’Reilly публикует выдержку из главы 2 ^[103] с обзором процесса проектирования. В продолжение темы:

• Чему научился Amazon за два года коммерческого использования голосового помощника Echo ^[104]. Много интересных деталей об истории развития продукта и проблемах.

Frog’s 5 Steps To Predicting The Future ^[105]
Скоро начнётся публикация трендов на следующий год, а пока frog design описывают свой процесс создания таких прогнозов. Они плотно работают с клиентом, для того чтобы представить будущее его отрасли.

^[105]

Gartner’s Top 10 Strategic Predictions For 2017 And Beyond ^[106]
Скоро начнётся публикация трендов на 2017 год и один из первых Gartner. 10 прогнозов на ближайшие 5 лет, в том числе о затухании рынка приложений и переходе части работы с вебом в голосовое общение с виртуальными помощниками. В этой ветке будут собираться тренды на 2017 год.

Мессенджеры и боты

• Идеи команды Kip по стандартизации интерфейсов ботов ^[107].
• Интересный эксперимент с формой, которая превращается в общение с ботом ^[108]. Описание принципов работы ^[109].

IxDA Interaction Awards 2017 ^[110]
Опубликован шорт-лист номинантов премии IxDA Interaction Awards 2017. Это 74 наиболее ярких проекта этого года в 6 номинациях.

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

• Что видит автопилот Теслы ^[111].
• Американская ассоциация безопасности на дорогах думает о требованиях к производителям смартфонов автоматически включать режим упрощённого интерфейса для водителей ^[112].

Алексей Копылов — Как интернет вещей «убьет» известные нам методики проектирования интерфейсов ^[113]
Презентация Алексея Копылова о проектировании интерфейсов для интернета вещей.

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

5 Things I Learnt as a Designer at LEGO ^[114]
Jonathan Bree рассказывает о своём опыте работы в LEGO. Он описывает ключевые принципы работы компании, которые очень близки по духу к современному продуктовому дизайну.

Lessons Learned From A Marathon, 26-Hour Design Session ^[115]
Занятная история 26-часового дизайн-марафона от молодой студии HAWRAF, выпускников Google Creative Lab. Хотя полезность полученных решений невелика, это шикарный способ сплотить начинающую команду, получить навыки работы в жёстких ограничениях и в целом засветиться на рынке (они делали живую трансляцию происходящего).

^[115]

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

• Треш-паттерны ввода телефонного номера ^[116].
• 100 отговорок для нерадивых дизайнеров ^[117] (перевод ^[118]).

The Art of Stealing: How to Become a Master Designer ^[119]
Michael Abehsera показывает, как механика ребаундов на Dribbble позволяет улучшать идеи. Он приводит несколько примеров эволюции макетов.

Бесплатные онлайн-курсы

• Курс «Product Design: The Delft Design Approach» от университета Delft ^[120].

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

UXers ^[121]
Каталог UX-компаний по всему миру.

^[121]

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

Подписывайтесь на рассылку ^[123]! Письмо приходит один раз в месяц.

Автор: Mail.Ru Group

Источник ^[124]