Декабрь '17

В ноябре я запустил Телеграм-канал и экспериментирую с его форматом. Просто ежемесячной рассылки свежего выпуска маловато, а дублировать ленту Фейсбук-группы бесполезно и трудозатратно — именно поэтому я год и не решался взяться за Телеграм. Первая попытка — выдержка наиболее интересного в группе за неделю (например, про тренды и инструменты), судя по первым отзывам это попадает в ожидания читателей. Подписывайтесь.

Организаторы UXSTRAT запускают новую конференцию, посвящённую дизайну интерфейсов виртуальной реальности. Она пройдёт 3-4 мая 2018 года в Сан-Франциско. Анонс от организатора Paul Bryan, включая полезную карту навыков для специалистов в этой области.

Игорь Губайдулин собрал список дизайн-конференций 2018 года.

• Небольшие интервью с дизайнерами гос.сервисов Великобритании о том, как устроена их работа.
• Команда GOV.uk собрала митап для дизайнеров государственных сайтов и запустила тематическую группу для обсуждения насущных вопросов.

InVision сняли небольшой документальный фильм о версии дизайн-мышления от IBM и трансформации компании в целом.

Рассказ о шрифтовых экспертах Thomas Phinney и Allan Haley, которые помогают решать политические и экономические скандалы благодаря своему глубокому зданию истории шрифтов и технологий печати. Это помогает им определить, был ли подделан документ. Перевод.

Толковый пинок под зад начинающим дизайнерам от Ильи Сидоренко ― как правильно строить карьеру на раннем этапе. Важно не бояться общаться с окружающим миром, в том числе более опытными коллегами ― это сильно сокращает путь тем, что подтверждает или опровергает свои планы по развитию.

Манифест дизайнерской этики в духе клятвы Гиппократа. Ciara Taylor и Samantha Dempsey рассказывают, как и зачем она появилась.

Ste Grainer даёт советы по развитию навыков продуктового дизайнера. Многие говорят о том, что важно уметь работать с кодом, но это только одно из возможных направлений развития. Он также перечисляет способы обучения в теории и на практике.

Неплохое описание навыков и обязанностей проектировщика интерфейсов в дизайн-команде СКБ Контур.

Станислав Рапп достаточно ёмко описывает подход к организации критики дизайна. Её ценность, процесс, пример из личной практики.

• Ещё одно интервью с Territory Studio об интерфейсах в новом «Бегущем по лезвию».

• BBC запустили интерактивный рассказ на базе Amazon Echo ― получилось что-то вроде квеста.

• В третьем квартале 2017 продажи умных часов и браслетов слегка упали. Тройка лидеров по продажам: Apple, Xiaomi, Fitbit.

Andrew E. Freedman попробовал поработать на компьютере целый день в шлеме виртуальной реальности используя новые возможности Windows. Получилось утомительно и не особо удобно. В продолжение темы:

• Каталог бесплатных 3D-моделей для использования в приложениях дополненной и виртуальной реальности от Google.

Bill Pardi разжёвывает дизайнерам основные принципы анализа больших данных.

Команда Facebook Messenger подготовила анализ истории развития общения с помощью коротких сообщений и мессенджеров и описывает своё видение того, как они меняются. Много интересных цифр и статистики.

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

• Концепт мессенджера от Cuberto с пачкой свежих идей.

Два интерфейсных гения Bret Victor и Alan Kay анонсировали экспериментальный проект новых компьютерных классов, где дети и взрослые учатся работать с технологиями с помощью офлайновых инструментов.

Подборка 11 экспериментальных проектов Adobe, показанных на конференции MAX 2017. Многие из них основаны на платформе алгоритмического дизайна Sensei. Самые интересные ― SceneStitch для быстрой замены целых частей фото, Puppetron для стилизации фотографий под работы иллюстраторов (кажется, модель не нужно тренировать заранее) и PhysicsPak для создания сложного паттерна в любой форме.

Другие новости алгоритмического дизайна:

• Отечественный сервис Trendmind помогает генерировать дизайн одежды. Один из его основателей Татьяна Попова рассказывает историю создания.
• Исследовательская инициатива Google PAIR на тему пользы современных решений на базе искусственного интеллекта в профессиональной среде. Анонс.
• Philipp Schmitt собрал фотоальбом с помощью алгоритмов. Посмотреть вживую.
• David Venturi проанализировал общедоступные онлайн-курсы по машинному обучению и составил их рейтинг.
• Команда Netflix продолжает разрывать шаблоны и рассказывает о следующем поколении своей технологии автоподбора промо-баннеров для фильмов. Они научились персонализировать кадр для конкретного пользователя в зависимости от того, что лучше зайдёт ― например, настроение сцены или кадр с конкретным актёром.
• Экспериментальное приложение от Google автоматически собирает комикс в несколько кадров из видео. Выбирает нужные моменты, располагает их в шаблоне, обрабатывает с помощью фильтров.
• Новый офис Autodesk в Торонто спроектирован и оформлен с помощью их инструментов алгоритмического дизайна. Отличный пример использования в своей собственной жизни того, что продвигаешь.
• Microsoft добавили в Word помощника по составлению резюме, который ориентируется на других кандидатов с LinkedIn. Он подсказывает, какие навыки лучше добавить и на что делать упор, чтобы получить конкурентоспособный профиль и адаптировать его под конкретную вакансию.
• Justin O’Beirne дотошнейшим образом сравнивает карты Google и Apple. Он пытается разобраться, как Google умудрился получить высокую графическую и смысловую детализацию зданий и зон активности даже для небольших городов и посёлков. Компания использует подходы алгоритмического дизайна и выделяет уйму полезной информации из спутниковых снимков и панорам улиц.
• Matthew Milan из Normative предлагает термин «дизайн для кентавров», описывающий особенности дизайна для будущей связки человека и алгоритмов.
• Исследовательская группа в Google научила алгоритм оценивать «лайкабельность» фотографий.

Экспериментальный инструмент от группы исследователей MIT подсказывает предположительную визуальную заметность элементов на странице или в макете. Получается тепловая карта, которую впоследствии должно подтвердить или опровергнуть реальное eye-tracking исследование. Для сравнительно простых интерфейсов это вполне рабочий инструмент, хотя нужно критически относиться к результатам для более-менее сложных продуктов. Видео работы.

Ежегодный обзор трендов от Fjord. Он всегда один из самых сбалансированных.

Другие прогнозы на 2018 год:

• Толковый обзор визуальных и интерактивных трендов 2018 от дизайн-команды Webflow без вечного тухляка вроде «анимации, фоновых видео и крупных заголовков».
• Ольга Шевченко из Vintage Web Production участвует в жюри Awwwards и отмечает одни из самых заметных выразительных приёмов, которые используют современные промо-сайты и сайты компаний.
• Ежегодный обзор трендов от журнала uxdesign.cc, которые перебирают приличное количество публикаций за год.
• Craig Phillips троллит ежегодные обзоры трендов серией дурацких прогнозов.
• Jakob Nielsen пытается спрогнозировать рост количества UX-специалистов и замахнулся аж на 100 млн человек к 2050 году. Он ссылается на три предпосылки: больше специалистов в компаниях, которые уже системно занимаются дизайном, больше компаний, которые начинают делать это, и больше стран, где есть такие компании.

Руководитель дизайн-команды Mesosphere Lee Munroe описывает процесс дизайна в компании. Он достаточно типовой, но неплохо развёрнут.

Владислав Якимов из Собаки Павлова проанализировал метод парного проектирования. В статье описан процесс и показания/противопоказания к применению. 8 Instincts of Great Facilitators Dan Brown описывает основные навыки фасилитатора, которые помогают провести удачные рабочие сессии по проектированию интерфейса.

Kara Pernice и Kathryn Whitenton подсказывают, как действовать в ситуации, когда менеджер или заказчик предлагает странные решения. Важно не вступать в конфликт, а лучше изучить суть идеи, а после этого на практике объяснить её работоспособность или провальность.

Мощный лонг-рид Lee Vinsel с глубокой критикой дизайн-мышления. Он копает в сторону нездорового отношения к понятию «инновации» и абстрактному желанию «переизобрести что-нибудь» без попытки осознать, как эта вещь или явление работает и в чём именно его проблемы. Дизайн-мышление — отличный способ популяризации вдумчивого дизайн-процесса для недизайнеров; проблема в том, что зачастую всё заканчивается просто на уровне простого выплеска «креативной энергии».

Конспект выступления Daniel Burka из Google Ventures о том, как дизайн помогает снижать риски при запуске нового продукта или функции.

Des Traynor из Intercom показывает пример того, как много вопросов по реализации продуктового решения нужно решить даже для маленького изменения.

Alexander Osterwalder показывает, как снижать риски новых продуктов по трём критериям (желанность, жизнеспособность, реализуемость) с помощью его шаблонов бизнес-модели и ценностного предложения.

Jeff Sauro разбирает причины того, почему шкала NPS состоит из 11 пунктов и что будет, если заменить её на 5 или 10. Спойлёр: методика поломается и данные исказятся, так что их станет невозможно сравнивать с другими по отрасли.

• Руководство Craig Clayton по реализации дизайн-макета в Xcode.
• Инструкция Meng To по анимации приложений для iOS 11 с помощью Swift и Xcode.

• SASS-код позволяет создать сетку из шестиугольников-сот на базе CSS Grid.

• Воспроизведение анимации «аплодисментов» в Medium. Как делалось.
• Лёгкая библиотека для реализации параллакса на JavaScript.
• Эффектный скрипт анимации SVG-иллюстраций с помощью JavaScript.
• Nick Butcher показывает принцип реализации эффектной анимации полигональных объектов.
• Реализация эффекта глитча на CSS.

Моя коллега Ксения Стернина описала популярные методы пользовательских исследований гифками.

Jeff Sauro даёт пять простых критериев для оценки успешности интерфейса, который проверяется через удалённое немодерируемое юзабилити-тестирование. Отсматривать десятки и сотни видео бывает утомительно, так что способ быстрее обнаруживать проблемы важен.

• Интервью с основателем Tilda Никитой Обуховым об истории и будущем продукта.

• Вышла версия 1.5. Появилось приложение для просмотра прототипов на Android/iPhone-телефонах. В следующем году появится интеграция со Sketch и FuseJS с возможностью использовать просто JavaScript.

• Вышло большое обновление инструмента для создания макетов. Видео показывает работу с векторными объектами, адаптивность и другие обязательные вещи.
• Бесплатный онлайн-курс по Framer от Руслана Шарипова. Плейлист на YouTube.
• Пошаговое руководство по созданию анимации во Framer от Саши Окунева.

Павел Лаптев описывает историю виртуальной реальности и показывает, как прототипировать такие интерфейсы с помощью Framer и браузерного фреймворка A-Frame.

• Небольшая памятка по работе с новым инструментом анимации Haiku от Nad Chishtie.

• Обзор обновлений в основном продукте InVision, которые будут доступны в начале следующего года.
• InVision запустили небольшой венчурный фонд для создателей дизайн-инструментов — недавние инвестиции помогают.

• UXPin показали свой экспериментальный инструмент для импорта реальных компонентов в коде в свой инструмент дизайна. Оказалось, не в Sketch, но обычно такие примеры вдохновляют создателей плагинов и других надстроек.

• Декабрьское обновление Adobe XD. Очень ленивое.

Новый инструмент для дизайнеров заточен под дизайн-систему в правильном понимании ― дизайнер использует визуальное представление React-компонентов, а не банальный UI Kit. После моды на конверторы из кода в Sketch создатели инструментов наконец-то добрались до правильного подхода.

Sketch 48 Вышла версия 48. В этот раз без больших рывков: управление цветовыми профилями, развитие Sketch Cloud и библиотек, поиск и замена цвета, улучшенное масштабирование символов и много мелочей.

Интересные плагины:

• Плагин SketchCleaner помогает причесать макеты — убрать ненужные стили, переименовать слои, найти скрытые элементы, привести к единому виду свойства объектов (например, границы).
• Официальный UI Kit для iOS от создателей Sketch.
• Плагин Chart позволяет создавать простые графики и диаграммы в макетах.

Chris Spalton из Foolproof активно делает sketchnotes на конференциях и описывает ситуации, в которых скетчи помогают в работе над интерфейсом.

Dan Brown описывает универсальный подход к проведению любой рабочей сессии по концептуальной проработке интерфейса. Это общая канва, в которую вполне ложатся популярные «брендированные» процессы.

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

• Обмен высказываниями между Chamath Palihapitiya (бывшим вице-президентом по росту Facebook) и Марком Цукербергом об отрицательных эффектах психологических уловок, которые использует компания. Первый приносит извинения за недальновидность, второй говорит, что компания исправилась, в ответ на что первый первый смягчает позицию.

Интересный эксперимент на тему того, как потребители запоминают логотип бренда. Группу респондентов попросили набросать логотипы 10 широко известных компаний. В результате выделились их наиболее запоминаемые черты.

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

• Jim Nielsen собрал простой онлайн-тест на узнаваемость логотипов. Насколько форма символа известных брендов позволяет узнать его по общим очертаниям.

• Rod Sheeter из Google показывает, как работать с нестандартными шрифтами в Android. Статья более техническая, но в любом случае полезная.

• Удивительно: Nielsen/Norman Group, которые очень настороженно относятся ко многим новым интерфейсным решениям (зачастую оправданно), хвалят основанное на жестах управление iPhone X.
• Обновление UI Kit для iOS 11 от дизайн-команды Facebook. Есть шаблоны для Photoshop, Sketch и Origami.
• Sebastiaan de With рассказывает об оптимизации интерфейса фото-приложения Halide для iPhone X ещё до того, как его показали. Выход безрамочного iPhone предсказывали многие, поэтому им важно было подготовиться к запуску.

Сергей Никишкин продолжает рассказ о дизайн-системе Acronis описанием генератора пиктограмм — как дизайнеры хранят их и передают в продукты.

Ken Skistimas, глава дизайн-системы GE Predix, рассказывает о работе над её новым поколением. Толковый пример того, какие задачи стоят перед зрелой платформой. Другие новости дизайн-систем:

• Неплохой пример постепенного перехода к использованию переменных от Matt Hippely из VMWare. Это помогло их дизайн-системе Clarity внедрить тёмную тему оформления.

Безумно интересное выступление Cristobal Castilla о дизайн-системе FIG в Facebook. Рассказ касается в основном шаблонов для Sketch и Origami, но затрагивает компоненты в коде и подход к развитию платформы в целом. Для дизайнерских инструментов собственными силами написан какой-то космический набор дополнений, прослоек и плагинов. Помимо удобства организации это даёт возможность использовать иконки из единого репозитория с разработкой, подключать данные из личного профиля (это удобно и для прототипирования, и для юзабилити-тестирования). Это очень и очень мощный ориентир того, как можно организовать работу с дизайнерскими инструментами.

Ben Brignell собрал ещё одну мощную коллекцию дизайн-принципов, которая в чём-то даже крупнее классического Design Principles FTW.

В этом году многие отечественные компании показали свои наработки по дизайн-системам. Особенно активизировались к осени ― каждый месяц кто-то да анонсировал свою дизайнерско-технологическую платформу. Мы с Андреем Сундиевым давно работаем над дизайн-системами и решили придать импульс их развитию в России запустили сайт-коллекцию Design Systems Club.

На сайте собрана информация о компаниях, про активность которых мы знали наверняка: библиотеки компонентов, статьи, презентации и т.п. Сейчас представлены организации с открытыми живыми гайдлайнами: Альфа-Банк, Дизайн Государственных Систем, Mail.Ru Group, Rambler & Co, Яндекс, а также те, кто описывал их в статьях: Acronis, МегаФон и Тинькофф. Мы слышали про наработки в ещё нескольких компаниях (2ГИС, Авито, EastBanc Technologies, Контур, Райффайзен, Сбербанк, Qiwi), но не имели конкретных ссылок, на которые могли бы сослаться. Главный критерий упоминания на сайте — компания понимает под «дизайн-системой» технологический фреймворк, а не банальный UI Kit в Sketch (или классический гайдлайн на скриншотах). Если мы про вас незаслуженно забыли или переврали в описаниях ― пишите Андрею Сундиеву​ или мне​. Мы хотим подхлестнуть обмен опытом между компаниями и показать, что всё не так сложно и вполне посильно. Например, в конце сентября на микро-конференции UX-Среда прошёл круглый стол, целиком посвящённый этой теме, и общий интерес со стороны российской аудитории доказал её актуальность. Чем больше на слуху удачных примеров и людей, с которыми можно пообщаться по актуальным проблемам внедрения, тем быстрее будет развиваться отечественный рынок.

Конечно, мы не забываем про лучший и главный сайт-коллекцию дизайн-систем. Но большинство компаний в нашей подборке работает на русскоязычном рынке и переводить библиотеки компонентов только для попадания туда не особо оправдано. Для первой версии сайта мы, в первую очередь, собрали все ссылки вместе. В дальнейшем займёмся развитием идеи ― станет понятнее и нагляднее, появится возможность сравнивать прогресс компаний. Подпишитесь на рассылку, чтобы получать всё свежее раз в месяц. И не бойтесь начать — первый шаг вполне по силам даже небольшим компаниям.

На примере приложений банков Казахстана UsabilityLab провели сравнительное исследование и вывели отраслевой юзабилити-профиль приложений.

• Baymard Institute напоминают, что маски для ввода данных должны учитывать локализацию. Это касается как минимум телефонных номеров, но есть и другие поля.
• Christian Holst из Baymard пишет о том, что делать, если в выпадающем списке остался только один элемент после фильтрации выше в этой форме.

Обновлённая статистика по конверсии в мобильных интернет-магазинах от Nielsen/Norman Group. Хотя она всё ещё хуже обычных компьютеров и по процентам, и по деньгам, разрыв стремительно сокращается.