И снова кучно пошло на фронте новых инструментов дизайнера интерфейсов:

1. ToyBox (http://toyboxsystems.com/): создатели перенесли концепцию линтинга из разработки в работу над дизайн-системами. Это серия инструментов (отдельная продукт Measure и плагин Roller для Sketch), которые помогают сравнивать идеальное видение дизайна с реализацией. Они показывают расхождения в макетах и реальном продукте, что облегчает отслеживание косяков. Пока доступен только плагин и они работают только с цветами и шрифтами, но сама задумка крайне интересная.

Это не всё новьё:

2. Sketch.systems (https://sketch.systems/): Инструмент помогает определить все альтернативные и краевые состояния интерфейса — взаимодействие с курсором (наведение, фокус), нулевое, ошибки, загрузка и т.п. Сначала описываете его в виде списка, потом добавляете внешний вид.

3. Axure: анонсирована бета-версия Axure RP 9 — https://www.axure.com/blog/new-in-9. Обещают переработанный интерфейс и полностью переписанную версию для Windows.

4. Framer: тизернули Framer X, серьёзное обновление продукта осенью — https://framer.com/announcement. Информации кроме загадочного видео (https://www.youtube.com/watch?v=bDGDsxn67d4) и пары слов Koen Bok (https://www.facebook.com/groups/framerjs/permalink/1533856133408119/) нет, но там обещают работу с React — есть шанс, что появится ещё один инструмент дизайна для связки с дизайн-системами.

А вот что свежего про инструменты было в недавнем дайджесте — https://jvetrau.com/digest-2018-may/:

5. Apply Matter (https://www.applyds.com/): ещё один инструмент для дизайнеров, который обещает экспорт макетов в код. В комплекте идёт аналитика и другие полезные ништяки.

6. InVision: анонсировали платформу для плагинов к Studio — https://www.invisionapp.com/studio/platform. Как и Adobe XD, они будут давать гранты лучшим разработчикам из своего Design Forward Fund — https://www.invisionapp.com/design-forward-fund. Порог входа для новых инструментов опять увеличился, теперь платформами себя называют все 4 ключевых игрока — Adobe, Figma, InVision, Sketch.

7. Marvel: инструмент открыл API и также стал платформой — https://marvelapp.com/developers. Первые интеграции (https://marvelapp.com/features/integrations) достаточно базовые — Slack, Dropbox, Sketch. Из действительно интересных — Maze (юзабилити-тестирование на базе прототипов Marvel), Lookback и Niice (мудборды).

8. Overflow: вышла публичная бета ― https://blog.overflow.io/announcing-overflow-public-beta-33fafc45d357.

9. Avocode: Выпустили отчёт о популярности тех или иных приёмов работы с макетами за 2017 год ― https://avocode.com/design-report-2017. Дизайнеры стали использовать меньше слоёв и больше систем контроля версий.

10. Wired Elements (https://wiredjs.com/): Коллекция элементов интерфейса на HTML и CSS для стилизации прототипов под бумажные скетчи.

11. Whimsical: История работы над инструментом ― https://whimsical.co/design/fast-collaborative-wireframing-app/.

Бодро идёт, несмотря на начало лета. И это мы ещё не видели Sketch 51, который вот-вот объявится. Кстати, не забудьте переподписаться на рассылки инструментов ― чёртов GDPR сбросил многие из них.

#tools

InVision выпустили электронную книгу о DesignOps ― набирающем обороты термине-аналоге «UX-стратегии» и «дизайн-менеджмента» ― https://www.designbetter.co/designops-handbook. Авторы: Dave Malouf (Digital Ocean), Collin Whitehead (Dropbox), Meredith Black (Pinterest), Kate Battles (Fitbit). Организационные модели, координация команд, Research Ops.

Про формирование Research Ops недавно написала Saskia Liebenberg из Deliveroo ― группы, которая поможет исследователям внутри продуктов ― https://medium.com/deliveroo-design/introducing-research-ops-at-deliveroo-1e4deb141847. Правда, большинство UX-лабораторий и так работают в формате внутреннего агентства, которое помогает всем продуктам. Charlotte Clancy описала роли в этой команде ― https://medium.com/deliveroo-design/elevating-the-impact-of-our-research-3267068937fe.

Кстати, у одноимённой конференции DesignOps Summit 2018 от Rosenfeld Media появилась дата проведения ― https://rosenfeldmedia.com/designopssummit2018/ ― 7-9 ноября в Нью-Йорке. Хотел попасть ещё в прошлом году, но не сложилось ― в этот раз точно доберусь. Моргните, если вы тоже едете.

Вот ещё несколько свежих статей на тему дизайн-менеджмента (или как ещё его назовут через два года):

1. Marco Di Costanzo из IBM описывает подход компании к поиску ключевых моментов в продукте и фокусе всех активностей дизайна и продуктовых команд в целом на них ― https://medium.com/design-ibm/have-you-defined-your-products-core-experiences-b995af69fdc0. Отличный пример того, как дизайнеры могут повысить ценность своей работы.

2. Shaun Archer из Capital ONE описывает типовые проблемы при планировании и проведении дизайн-спринтов ― https://medium.com/capitalonedesign/why-your-design-sprints-always-end-in-tears-5f883c07124a.

3. Команда Airtable показывает, как использовать инструмент для приоритезации продуктового плана по нескольким подходам ― https://blog.airtable.com/3-ways-to-prioritize-your-product-roadmap-with-a-matrix/.

4. Eliel Johnson, глава дизайна Charles Schwab, рассказывает о том, как устроена дизайн-команда в компании ― https://www.invisionapp.com/blog/charles-schwab-design/.

Ops, I did it again! Дизайнеры, как цыгане, постоянно кочуют от тренда к тренду и любят новые блестящие штуки ― термин и концепцию DevOps уже натягивают на дизайн-системы (Design Systems Ops). Бежать и перекрашиваться в новые определения каждые полгода не обязательно, но понимать движуху и её причины полезно ― мы все стремимся сделать инициативы по дизайну системнее и масштабнее.

#designmanagement

Любимые издательства O'Reilly и Rosenfeld Media продолжают выпускать толковые книжки для дизайнеров интерфейсов. Вот что произошло за последние пару месяцев (кстати, ко многим из них есть бесплатные отрывки):

1. Rosenfeld Media: Chris Risdon и Patrick Quattlebaum «Orchestrating Experiences» — https://rosenfeldmedia.com/books/orchestrating-experiences/. Она посвящена проектированию карты взаимодействия пользователя с продуктом в широком смысле, причём авторы старались не ограничиваться цифровыми продуктами или услугами. A List Apart публикует часть 2 из неё — http://alistapart.com/article/orchestrating-experiences.

2. O’Reilly: второе издание Theresa Neil «Mobile Design Pattern Gallery» — https://www.safaribooksonline.com/library/view/mobile-design-pattern/9781449368586/. Они публикуют главу 1 из неё — https://www.oreilly.com/ideas/how-to-enhance-the-navigation-experience-on-mobile-devices. Правда, примеры настолько морально устарели, что я несколько раз перечитал дату публикации — странноватый подход к обновлению.

3. Вышел перевод книги Raph Koster «Theory of Fun for Game Design» — https://www.books.ru/books/razrabotka-igr-i-teoriya-razvlechenii-4872136/?show=1. Она рассказывает о предыстории появления компьютерных игр и теории развлечений в целом. Сайт книги — https://www.theoryoffun.com/.

4. O’Reilly: John Alderman и Christine W. Park «Designing Across Senses» — https://www.safaribooksonline.com/library/view/designing-across-senses/9781491954232/. Они публикуют часть 1 из неё, посвящённую работе с разными чувствами в цифровых продуктах — https://www.oreilly.com/ideas/returning-to-our-senses. Профессия прошла интересный цикл от их внимательного учёта в пром.дизайне до сильного упрощения в эпоху экранных интерфейсов, а теперь целостный подход возвращается.

5. Smashing Magazine открыли предзаказ на свою «Smashing Book 6: New Frontiers in Web Design» — https://www.smashingmagazine.com/2018/06/meet-smashing-book-6/. Они опубликовали отрывок из главы от Виталия Фридмана — https://www.smashingmagazine.com/2018/06/bringing-personality-back-to-the-web/.

Также открылся предзаказ на:

1. Jorge Arango «Living in Information» от Rosenfeld Media — https://rosenfeldmedia.com/books/living-in-information/. В следующем году у них появится ещё 6 книг — https://rosenfeldmedia.com/books/#books-upcoming.

2. Pamela Pavliscak «Designing for Happiness» — http://shop.oreilly.com/product/0636920049036.do.

3. Austin Govella «Hacking Product Design» — http://shop.oreilly.com/product/0636920057895.do.

4. Amber Case и Aaron Day «Designing Products with Sound» — http://shop.oreilly.com/product/0636920051923.do.

У самых счастливых отпуска уже начались, так что будет что почитать в ленивом режиме.

#books

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

Figma 3.0 (https://blog.figma.com/figma-3-0-217d6c248f85): Улучшение прототипирования, полноценная версия анонсированных ранее стилей, управление организацией.

Плагины:
— Relay (https://relayforfigma.com/) позволяет экспортировать графику из макетов Figma прямо в репозиторий разработки.

Zeplin 2.0 (https://blog.zeplin.io/introducing-zeplin-2-0-components-and-a-ton-more-goodies-7c09dacc1f48): Теперь вместе с общими стилями макета показываются и компоненты (символы) — на старте Sketch, позже появится Figma и Adobe XD. Вдовесок — пачка улучшений интерфейса.

Avocode 3 (https://blog.avocode.com/introducing-avocode-3-worlds-first-truly-cross-platform-design-hand-off-tool-b204d518e07f): Работает на Windows, Mac и Linux, можно загружать макеты из Sketch, Photoshop, Adobe XD. Обещают добавить поддержку Illustrator.

Adobe XD: июньское обновление — https://theblog.adobe.com/june-2018-release-adobe-xd-overlays-fixed-elements/. В основном тюнинг по стандартным функциям для инструмента дизайна интерфейсов.

Sketch: Полноценное решение для экспорта макетов Sketch в код на React — https://sketch2react.io/. Это плагин и фреймворк, которые позволяют быстро получить адаптивный прототип. Они используют сетку Bootstrap 4 и шрифты с Google Fonts. Анонс — https://medium.com/sketch-app-sources/introducing-sketch2react-design-with-code-inside-of-sketch-47cd90eab220.

Плагины:
— Meng To запустил онлайн-курс по созданию плагинов для Sketch — https://designcode.io/sketch-plugin.
— Easing Gradient делает градиенты более плавными — https://github.com/larsenwork/sketch-easing-gradient.

Gravit: Corel купил инструмент — https://medium.com/gravitdesigner/welcoming-gravit-to-the-corel-family-9cd0c7f3a32c. Самое время для стандартных шуток «а что, они ещё живы?».

Webflow: Шаблон для wireframes — http://vireflow.webflow.io/about.

Phase: Команда рассказывает о том, как будут устроены библиотеки компонентов — https://blog.prototypr.io/libraries-everything-is-a-component-f62bf7251494. Обещают недостающий в текущих инструментах уровень переменных, на основе которых строятся и компоненты в коде.

Скорость такая, что пока я опубликую этот мини-дайджест, к вечеру появится какой-нибудь Sketch 51 — уже больше месяца не было крупных релизов.

#tools

Сяду на свой любимый конёк дизайн-систем и накидаю свежих ссылок по теме за последние недели:

1. Дизайн-система британских государственных сайтов — https://design-system.service.gov.uk/. Её части были доступны и раньше, но теперь собрали воедино и расширили. Команда дизайн-системы включает инициативные группы из разных подразделений — https://gds.blog.gov.uk/2018/06/22/introducing-the-gov-uk-design-system/. Кстати, они дотошно тестируют компоненты и паттерны на пользователях. Осенний тизер с рассказом о целях — https://gds.blog.gov.uk/2017/10/30/building-the-gov-uk-design-system/.

2. Студия Sparkbox провела опрос среди 400 дизайнеров и разработчиков, работающих над дизайн-системами (86 продуктовых команд) — https://designsystemssurvey.seesparkbox.com/. Получились достаточно характерные ответы о том, для чего им нужна такая инициатива и какую пользу она приносит продукту и самим дизайнерам.

3. CSS Stats: анализирует CSS сайта и показывает использующиеся визуальные стили: цвета, шрифты, отступы — https://cssstats.com/. Отличный способ найти проблемы внедрения дизайн-системы.

4. Nathan Cutis продолжает свой универсальный справочник по описанию компонентов в дизайн-системах. Четвёртая часть о правилах использования — https://medium.com/eightshapes-llc/component-design-guidelines-eca706100e7c. Чуть раньше он писал об инструкциях для разработчиков по использованию дизайн-системы — https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389.

5. Dan Mall рассуждает, должна ли каждая дизайн-система описывать все возможные компоненты или только те, что реально нужны по специфике продукта — http://danmall.me/articles/distinct-design-systems/. Он собрал сравнительную таблицу доступных компонентов для семи известных дизайн-систем.

6. Elliot Dahl показывает примеры реализации шрифтовой сетки в соответствии с 8-пиксельным микро-модулем — https://medium.freecodecamp.org/8-point-grid-typography-on-the-web-be5dc97db6bc.

7. Docz (https://www.docz.site/): фреймворк для описания живых гайдлайнов для дизайн-систем.

Есть что почитать, есть что поковырять на предмет вдохновения. Удачной систематизации дизайна!

#designsystems

Баззворд «DesignOps» грозится вытеснить «UX-стратегию» и другие термины для описания дизайн-менеджмента. Он периодически всплывал в последние годы, но с подачи свежей методички от InVision (https://t.me/pdigest/67) ворвался на вершину хайпа. Термин не создаёт новый смысл (дизайн-менеджмент, UX-стратегия, дизайн-лидерство говорят про то же), скорее называет уже существующее по-новому.

Походу, придётся переименовывать мою серию статей — https://www.uxstrategy.co/. Не то чтобы я бежал за каждым трендом, но DesignOps лучше описывает инициативную группу, которая улучшает инфраструктуру компании для реализации хорошего дизайна — кто и как это делает. Это не просто про работу над конкретным продуктом — скорее про то, как системно улучшить работу разных продуктовых команд. Централизованные дизайн-команды и так живут по этому принципу; в более современной модели а-ля Spotify речь об отдельной команде, которая работает с остальными по внедрению лучших практик.

Чёрт, это попахивает терминологическим спором, самой бесполезной тратой времени после создания погодного чат-бота. Но иногда от этого не скрыться и не все обновления терминов плохи. Jared Spool говорит, что «что-нибудь»-ops — это новое «что-нибудь»-мышление (https://twitter.com/jmspool/status/980631043614134274). Fabricio Teixeira собрал предысторию появления понятия — https://uxdesign.cc/designops-the-questions-youre-probably-asking-yourself-now-fdac491bfe4f (хотя его трактовка термина спорная).

Ладно, хорош трепаться, время свежих ссылочек. Жемчужина в моих новых подписках — блог дизайн-команды Athena Health — https://medium.com/athenahealth-design. В нём много отличных публикаций о дизайн-менеджменте…, тьфу, DesignOps:

1. Scott Mackie описывает подход компании к управлению дизайном на разных уровнях — https://medium.com/athenahealth-design/embedding-product-design-in-a-large-agile-organization-d3b5063d656c. Отличная современная модель — и в плане организации, и в плане методов, и в плане отслеживания результатов.

2. Он же пишет об организации дизайн-команд — https://medium.com/athenahealth-design/creating-a-dual-track-design-leadership-structure-for-large-teams-a8fbe9aba577. У неё два руководителя — эксперт по управлению и по предметной области. В статье неплохое описание специфики каждой из ролей.

3. Jennifer Cardello рассказывает об обновлённом устройстве команды пользовательских исследований — https://medium.com/athenahealth-design/scaling-user-research-in-an-agile-r-d-organization-71f9be1097e2. Отличный набор инструментов, который помогает масштабировать пользу от исследований.

4. Она же описывает структуру DesignOps в компании — https://medium.com/athenahealth-design/how-we-approach-designops-at-athenahealth-8997a1b16ce5. Очень системный и грамотный подход.

5. И снова она рассказывает о масштабном редизайне продукта и том, как дизайн-команда выбрала точки фокуса и измеряла улучшение по ним — https://medium.com/athenahealth-design/establishing-a-design-quality-metric-to-build-design-credibility-61236b8a4567.

Из пяти конференций на тему дизайн-менеджмента (LX Conference, UXSTRAT, Leading Design, DesignOps Summit, Enterprise UX) две проводят Rosenfeld Media. Natalie Hanson регулярно бывает на последней и пишет крутые обзоры выступлений. Вот свежий, на ту, что была 13-15 июня — https://nataliehanson.com/tag/eux18/.

Кстати, открылась продажа билетов на DesignOps Summit 7-9 ноября в Нью-Йорке — https://rosenfeldmedia.com/designopssummit2018/register/?mc_cid=9eea776357&mc_eid=5877482e69 (до 17 июля можно получить хороший скидос). Я уже в деле (пойду на мастер-класс Peter Merholz и Kristen Skinner). Айда вместе :)

P.S. Есть билеты и на Leading Design 10-12 октября в Лондоне (https://2018.leadingdesignconf.com/), но туда эконом-вариант разобрали за пару дней.

#designmanagement #designops

Аня Булдакова, продакт-менеджер в Facebook (а до этого ― в Яндексе и Intercom), рассказывает про аспекты разработки и развития продукта на канале No Flame No Game ― https://t.me/proproduct.

Аня делится советами из собственного опыта (вот, например, про принятие решений ― https://t.me/proproduct/663), рассказывает про полезные книжки и переводит статьи (вот краткое изложение на русском книги про Jobs To Be Done ― https://medium.com/no-flame-no-game/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-jobs-to-be-done-%D0%B8-job-stories-4c57c1dc84cf), а также порой приглашает в гости крутых продуктовых ребят ― например, недавно вышло интервью с Михаилом Карповым, директором по продукту в Skyeng ― https://www.youtube.com/watch?v=0bYH-ywcIjM.

Подписывайтесь → @proproduct

Собрал дайджест продуктового дизайна за июнь 2018 ― https://jvetrau.com/digest-2018-jun/. Спасибо ребятам из Setka за редактор статей и помощь в работе с ним.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

Свежий дайджест продуктового дизайна вышел на прошлой неделе. Вот пять топчанских ссылок из него, которые не попадали в мини-обзоры:

1. Siddhant Mehta из команды мобильного Microsoft Outlook рассказывает, как они используют GitHub как полноценную среду для ведения продуктовых задач — https://medium.com/microsoft-design/github-for-product-and-design-collaboration-b9107177f5b0. Интересный график коммитов в середине статьи, который хорошо показывает наиболее активные фазы работы над дизайном.

2. Термин DesignOps знатно пошумел в июне, собрал все ссылки про него из своих закромов — https://vk.com/@pdigest-designops-definition.

3. Alan Klement приложил метод персонажей и его защитников, пытающихся доказать, что они не привязаны к демографическим данным, которые уводят фокус продуктовой команды от поведения ― https://jtbd.info/yes-personas-focus-on-demographics-and-how-to-fix-that-f27c02498e9d. Даже если фото и небольшое описание контекста занимают небольшую часть описания персонажа, они всё равно искажают мышление.

4. Шикарная историческая справка Inês Almeida о том, как развивалось использование гибких методологий в бизнесе и к каким проблемам для единого customer experience это привело — http://www.apdgroup.com/scaling-agile-not-path-business-agility/.

5. Годная статья Yohann Kunders из ChargeBee о том, как не просто встретить нового пользователя, а сделать его активным — https://www.chargebee.com/blog/beyond-user-onboarding/. Он выделяет работу над «первой милей» и «энной» — это две разные задачи, которые одинаково важны для успеха пользователя.

Полный выпуск — https://jvetrau.com/digest-2018-jun/.

Напомню, что дайджест можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. К концу года прогнозируют 100 миллионов устройств (https://voicebot.ai/2018/07/10/smart-speakers-to-reach-100-million-installed-base-worldwide-in-2018-google-to-catch-amazon-by-2022/); уже 20% американских семей имеют умную колонку (https://www.comscore.com/Insights/Blog/Smart-Speaker-Penetration-Hits-20-Percent-of-US-Wi-Fi-Households). Ну а отечественные хайпожоры вчера стояли в очереди за Алисой. Были вы там или нет, изучить тему полезно.

Главная книжка — Designing Voice Interfaces от Cathy Pearl — https://www.safaribooksonline.com/library/view/designing-voice-user/9781491955406/. Она, кстати, руководит дизайном Google Assistant и описывала недавно основные особенности проектирования голосовых интерфейсов ― https://www.uxmatters.com/mt/archives/2018/05/making-the-shift-from-designing-guis-to-designing-vuis.php.

У каждой крупной платформы есть гайдлайны по проектированию интерфейсов для них:
1. Amazon Alexa — https://developer.amazon.com/alexa-skills-kit/design.
2. Google Assistant — https://designguidelines.withgoogle.com/conversation/
3. Microsoft Cortana — https://docs.microsoft.com/en-us/cortana/voice-commands/voicecommand-design-guidelines
4. Apple Siri — https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/siri/
5. Яндекс Алиса — гайдлайнов по дизайну пока нет, но есть общая документация https://tech.yandex.ru/dialogs/alice/doc/development-docpage/

Лучше всего развита экосистема Alexa — для неё хватает инструментов и интересных экспериментов (у платформы более 50% рынка). Например:

1. Онлайн-сервис Storyline для создания навыков — https://getstoryline.com/.

2. Echoism для их тестирования — https://echosim.io/.

3. Rafal Cymerys из Upside показывает эксперимент по голосовому управлению StarCraft II на базе Alexa — https://blog.upsidelab.io/design-voice-user-interface-starcraft/. Он неплохо подходит для операций, включающих последовательность нескольких примитивных действий, хотя базовые операции всё же проще делать через мышь и клавиатуру.

4. Хватает голосовых игр и квестов вроде Jurassic World — https://www.engadget.com/2018/06/22/jurassic-world-revealed-alexa-voice-game/. Есть интересные комбинации с настолками — https://www.engadget.com/2018/06/29/alexa-when-in-rome-board-game/. И даже Skyrim в ироничном виде — https://www.polygon.com/e3/2018/6/11/17448080/skyrim-alexa-iphone-android-how-to-play.

Кучу свежих новостей и актуальной статистики можно найти на сайте Voicebot — https://voicebot.ai/. А вот просто парочка относительно свежих статей на тему:

1. Несколько стендап-комиков оценили юмор умных помощников Amazon Alexa, Apple Siri, Google Assistant и Microsoft Cortana — https://www.engadget.com/2018/06/26/siri-alexa-cortana-google-jokes/. Например, в Google работает отдельная команда писателей, которые обеспечивают шутки.

2. Jacky Li из Connected Lab провел несколько пользовательских исследований на тему управления функциями машины с помощью сенсорного экрана и голоса — https://uxdesign.cc/why-touchscreens-dont-work-in-cars-69b6ff3d4355. Сенсорные экраны, очевидно, отвлекают водителя. Но и голосовое управление не лучше (свежая статья Nielsen/Norman Group приводит конкретные причины — https://www.nngroup.com/articles/distracted-driving-ux/).

3. Памятка Frederik Goossens по проектированию голосовых интерфейсов — https://www.toptal.com/designers/ui/designing-a-vui.

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

#voiceui

Создателям инструментов для дизайнеров интерфейсов лето не помеха, так что анонсы продолжаются даже в июльскую жару. Причём помимо обновлений давно известных монстров каждый раз появляются новые смельчаки, ныряющие в этот кроваво-красный океан:

persP (https://try.persp.info/): Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременная работа нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы/компоненты). Из новых идей ― поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей ― https://blog.prototypr.io/and-finally-the-day-has-come-world-this-is-persp-13269d6181bf.

Sketch 51 (https://blog.sketchapp.com/styles-in-libraries-and-fixed-elements-in-prototyping-in-sketch-51-aab4074c3f46): Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу. Плагины:
― Timeline 2.0 (https://medium.com/sketch-app-sources/timeline-2-0-interaction-design-for-sketch-f6fc0a852c8a): надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML/CSS/JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).

Affinity Designer для iPad (https://affinity.serif.com/ru/designer/ipad/): Вышла планшетная версия приложения. Первое время можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом от Isabel Aracama — https://www.smashingmagazine.com/2018/07/flat-vector-illustration-affinity-designer/.

Adobe Photoshop для iPad: Bloomberg вбросил информацию, что на Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов — https://www.bloomberg.com/news/articles/2018-07-13/adobe-is-said-to-plan-photoshop-for-ipad-in-app-strategy-shift (сейчас есть простецкий Photoshop Express). Источники анонимные, так что это всё ещё не точно.

Flowmapp (https://flowmapp.com/): Добавили инструмент для описания пользовательских сценариев — https://www.youtube.com/watch?v=CnO6d7lLv6o. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.

Modulz (https://www.modulz.co/): Colm Tuite сравнивает два популярных подхода к дизайну интерфейсов — работа в инструментах-наследниках печатного дизайна, результаты которых потом передаются в разработку, и визуальное программирование, где этого перехода нет ― https://medium.freecodecamp.org/the-design-tool-dilemma-225541c4ad1d. Он с прошлого года работает над инструментом Modulz, который движется во вторую сторону и позволяет в наглядном виде работать с компонентами на React.

InVision: Вышла вторая версия мобильного приложения — https://www.invisionapp.com/blog/invision-mobile-app-ios-android/. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.

Polypane (https://polypane.rocks/): Ещё один инструмент для тестирования адаптивных сайтов в браузере. Stephen Hay, один из ключевых авторов на тему, считает его одним из лучших.

Carbon (https://carbon.now.sh/): Онлайн-сервис помогает сделать эффектную подачу куска кода.

Artboard Studio (https://artboard.studio/): Инструмент помогает делать эффектную подачу макетов интерфейса. Обзор — https://blog.prototypr.io/early-impressions-with-artboard-studio-eee95742420e.

Shotsnapp (https://shotsnapp.com/): Ещё один инструмент для эффектного оформления экранов интерфейса.

Firefox: Появился инструмент для анализа accessibility сайта — https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector.

Overflow: Мощный пример того, что можно делать в инструменте — https://overflow.io/s/F7AGBM/.

Горячая пора во всех отношениях! Причём многие поняли, что делать замену Sketch в целом бесполезно и начали решать нишевые, но очень важные задачи в работе дизайнера вроде информационных карт. Так победим :)

#tools

Конференция по дизайн-системам Design Systems London пройдёт 15-16 ноября в Лондоне — http://www.designsystemslondon.com/. Пока объявлены локальные спикеры без ярких звёзд, но анонс только-только появился. Это уже третья конференция по дизайн-системам в дополнение к Clarity в Сан-Франциско (https://www.clarityconf.com/) и DSConf в Хельсинки (https://dsconference.com/).

Я был на Clarity в прошлом году (https://www.facebook.com/502273249/posts/10155309403678250/), но программа сильно сдала относительно первой в 2016.

Mikhail Gündoğdu побывал на многих выступлениях о дизайн-системах и собрал на их основе неплохую памятку для начинающих — https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b.

А вот ещё парочка крутых рассказов о том, как работают команды дизайн-систем в крупных компаниях:

Шикарный рассказ Diana Mounter о появлении и развитии дизайн-системы GitHub — https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542. Поэтапное развитие, примеры внутренних документов и процессов.

Mark Argyle рассказывает о принципах работы команды дизайн-системы Atlassian — https://www.atlassian.com/blog/inside-atlassian/designops-atlassian-design-studio. Достаточно подробное описание процесса в типовых ситуациях.

Всё больше полезных инсайтов о практической работе команд, всё меньше «основ атомарного дизайна».

#designsystems

Создатели отечественного инструмента UXPressia для работы над customer journey map выпустили версию 4.0 — https://uxpressia.com/blog/introducing-uxpressia-4-0-overview. Появилась совместная работа и расширился инструментарий по всем аспектам — сами карты взаимодействия, персонажи, карта эмоций. Основатель Юрий Веденин (https://www.facebook.com/yuri.vedenin) и команда плотно работают над продуктом и готовы помогать желающим попробовать его. Несколько лет назад они описывали задачи и принцип работы инструмента в рубрике «Дизайн» на vc.ru — https://vc.ru/12495-uxpresso.

Вот ещё несколько недавних материалов на тему customer journey map:

1. Steve Offsey из сервиса Pointillist, помогающего создавать customer journey map, рассказывает о подходах к аналитике этапов карты ― https://www.pointillist.com/blog/what-is-customer-journey-analytics/

2. Richa Prajapati из Salesforce рассказывает о построении customer journey map для сервиса аналитики ― https://medium.com/salesforce-ux/agile-journey-mapping-with-empathy-3e6c5a876347. Они использовали её для поиска проблем пользователей, решение которых улучшает продукт.

3. Rachel Krause из Nielsen/Norman Group показывает, как создавать раскадровки сценариев использования ― https://www.nngroup.com/articles/storyboards-visualize-ideas/. Они показывают кусок customer journey map, причём эти два подхода можно совместить.

Недавно дочитал свежую книгу Chris Risdon и Patrick Quattlebaum «Orchestrating Experiences» на эту тему — https://rosenfeldmedia.com/books/orchestrating-experiences/ (упоминал её в дайджестах). Очень хороший подробный инструктаж по всем аспектам работы с customer journey map, так что рекомендую интересующимся темой.

#cjm

Выходные стартуют через 12 часов. Если вы не планируете дико угорать, вот вам несколько длинных текстов про интерфейсы:

1. 17 октября 2008 года открылся AppStore для iPhone, который здорово изменил модель продаж и распространения цифровых продуктов. К десятилетию магазина Michael Steeber собрал историю изменения дизайна десяти приложений, которые появились в тот день и живут до сих пор ― https://9to5mac.com/2018/07/10/app-store-10-years-design-evolution/.

2. Мощнейший разбор интерфейсных причин, по которым разработчики активно используют командную строку и предпочитают её графическому интерфейсу — https://medium.com/design-ibm/real-developers-dont-use-uis-daea7404fb4e. Micah Linnemeier из IBM работает над профессиональными продуктами и хотел докопаться до реальных плюсов и минусов с точки зрения взаимодействия, а не просто типовых предубеждений.

3. Antin Harasymiv рассказывает об оптимизации интерфейса Google Photos для веба ― https://medium.com/google-design/google-photos-45b714dfbed1. Они нашли несколько сильных решений на стыке дизайна и технологий, которые позволили сделать работу с интерфейсом сильно комфортнее.

Это займёт вас на час-полтора в дачных пробках.

#links

Проектировщик интерфейсов Антон Григорьев ведёт канал https://t.me/uxnotes о подходах к проектированию, паттернах взаимодействия, проведении пользовательских исследований, поведенческой психологии и других полезностях.

Он подбирает для публикации только то, что посчитал годным после прочтения. У меня обзоры интересного более краткие, а Антон делает выжимку из ключевых моментов материала с яркой цитатой. Подписывайтесь — @uxnotes.

Алексей Шайхелисламов описал UX-стратегию S7 Airlines на основе выступления на московском Dribbble Meetup — https://medium.com/@Alexei_Shaikhelislamov/designops-ux-%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D1%8F-%D0%BD%D0%B0-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B5-%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%BE-5a45fb8f699b. Компания стремится стать более зрелой в плане дизайна и выбрала очень системный подход.

Вот ещё парочка свежих рассказов об устройстве дизайн-команд, из которых можно научиться полезному и подсмотреть пару инсайтов:

1. Александра Ермоленко из Rambler Group — https://sredaobuchenia.ru/howtorulerambler.

2. Laura Hahn из Priceline — https://www.invisionapp.com/blog/priceline-design/. Их дизайн-система — https://pricelinelabs.github.io/design-system/.

Ну и другие новинки мысли дизайн-менеджмента:

Шикарный взгляд на правильное понимание и определение ролей в продуктовой команде от Peter Lewis из Capital One — https://medium.com/capitalonedesign/responsibility-without-territory-65501c807f80. Они должны идти от конечного результата и цели, а не просто набора обязанностей — это и результат обеспечивает, и гибкость в тактике даёт.

Dan Brown из EightShapes даёт советы по проведению интервью с лицами, принимающими решения — https://medium.com/eightshapes-llc/the-delicate-art-of-interviewing-stakeholders-d6496443cbec. Как и какие вопросы задавать, чтобы получить максимум полезной информации и успешно закончить проект.

Кстати, я обещал больше не писать обзоры DesignOps. Но, ясное дело, не смог удержаться — https://jvetrau.com/designops-definition/. Дополнил и лучше структурировал свои заметки на тему за последний месяц и выложил в основном блоге — там будет обновляться и пополняться текущая движуха и предыстория. Не благодарите/материте.

#designmanagement #designops

Как научить вашего нового умного питомца команде «голос»? Кинологи говорят, что это требует от собаки выстраивания логической цепочки, что является более сложной задачей. В случае с голосовыми помощниками всё плюс-минус похоже.

Nielsen/Norman Group провели дотошное пользовательское исследование голосовых помощников Amazon, Google и Apple — https://www.nngroup.com/articles/intelligent-assistant-usability/. Получился шикарный разбор текущих проблем как в основном режиме работы, так и в «навыках» от сторонних авторов. Это одна из главных статей месяца — за один присест можно познакомиться с кучей подводных камней. Особенно много нареканий на навыки — их сложно найти, они более дуболомны.

Видно, что голосовым помощникам предстоит пройти очень длинный путь для того, чтобы стать действительно полезными. С другой стороны, смартфоны также имели уйму проблем лет 15 назад, но смогли стать радикально удобнее и практичнее. В общем, один из самых полезных материалов на тему голосовых интерфейсов.

Кстати, в начале недели в московском офисе Google прошёл хакатон по созданию навыков для Google Assistant. В нём участвовали команды из Mail.Ru Group (Delivery Club, ICQ, Pandao, Все аптеки), Clever Pumpkin, Eora.ru, Heads and Hands, Just AI, Redmadrobot, АО Рестрим и X5 Retail Group. Сами концепты — секретики, но выцепил для вас критерии оценки хорошего навыка — https://docs.google.com/document/d/1GKPibWNAmgaj7v8wUgaOM_FyjaOjVjflVsd5ODEabDI (их пока нигде не публиковали). Так сказать, горячий репортаж :)

Можете поэкспериментировать сами через конструктор Dialogflow — https://dialogflow.com/ или Storyline — https://getstoryline.com/. Вот концепт голосового помощника для молодых родителей от William Reano для вдохновения — https://medium.com/nyc-design/smarter-parents-through-a-smart-baby-tracker-a-ux-ui-case-study-27331760f29e.

#voiceui

Весной поучаствовал в онлайн-интенсиве Design Line (@dsgnline). Получился самый подробный и длинный рассказ про нашу дизайн-систему Paradigm — показывал кучу внутренних документов и кусков рабочего процесса. Видео на подходе, там два часа мякотки на одну из самых горячих тем последних лет.

В этот раз ребята пробуют новый формат — воркшоп. Интенсивы больше про новые знания и личную мотивацию, а на воркшопах студенты будут два дня работать с куратором (Миша Шишкин, Денис Башев, Саша Ковальский, Дмитрий Глазырин и другие). Вместе с ними делают проект и разбирают ошибки прямо на месте.

Плохая новость: почти все билеты вместе с кураторами расхватали. Хорошая: ещё можно вписаться в самостоятельное участие, где вы сами смотрите четыре воркшопа и выполняете задания.

Воркшопы (их четыре) стартуют на следующих выходных. Купить билет — http://bit.ly/2mQ1COE

P.S. В этом канале нет и не будет рекламы, но взаимопиар — почти единственный способ растить аудиторию канала в Телеграме. Я иногда делаю ВП, но без фанатизма и в любом случае про то, что не стыдно рекомендовать.

Насмотренность — одно из главных качеств дизайнера интерфейсов. Когда вы решаете сложную интерфейсную задачу, важно экспериментировать и проверять необычные решения. Если делается типовое решение, полезно задаваться вопросом «а не изобретаю ли я велосипед только для того, чтобы похвалиться перед другими дизайнерами». В обоих случаях паттерны и лучшие практики помогают вам либо посмотреть шире на пространство решений, либо технично обойти заготовленные самому себе грабли. Вот несколько свежих:

1. Luke Wroblewski изучил приложения для проката велосипедов и сравнил шаги, которые нужно пройти до начала езды — https://www.lukew.com/ff/entry.asp?1995. Многие неоправданно усложняют процесс, спрашивая лишнее или злоупотребляя обучением использования.

2. Rhiannon Jones из Deliveroo описывает подход компании к написанию сообщений об ошибках — https://medium.com/deliveroo-design/how-to-write-any-error-message-7a3348cce594. Они делят их на несколько категорий и выбирают тональность исходя из этого.

3. Brandon Dorn из Viget предлагает комфортный контекстный способ показа сносок в вебе — https://www.viget.com/articles/of-note-better-text-annotations-for-the-web/.

4. Feifei Liu из Nielsen/Norman Group описывает особенности проектирования интерфейсов для детей ― https://www.nngroup.com/articles/children-ux-physical-development/. Она сопоставляет развитие моторики с возрастом и даёт советы по элементам управления для каждого из них.

5. Алёна Кирдина приводит примеры из игровых интерфейсов, которые полезны и для обычных веб- и мобильных приложений — https://evilmartians.com/chronicles/level-up-for-ux-design-lessons-from-videogames.

6. Edward Scott рассказывает о новом исследовании Baymard Institute, посвящённому управлению профилем и заказами — https://baymard.com/blog/new-research-accounts-self-service.

Как говорит один из моих кумиров Bill Buxton, любой паттерн оптимален для своих задач, но будет неуместным в некоторых ситуациях. Берите их в дело с умом.

#patterns

Новости инструментов дизайна интерфейсов я собираю тыщу лет, но в формате мини-дайджеста это первый юбилей — десяточка! Движуха, как всегда, бодрее всех бодрых — придётся даже разбить на две части:

ЧАСТЬ 1: ДИЗАЙН ИНТЕРФЕЙСОВ

Relate (https://relate.app/): Новый новый инструмент дизайна интерфейсов. Позиционируется как визуальная работа на базе кода (чем-то похоже на Modulz от Colm Tuite) — причём якобы можно сразу работать с компонентами на React (правда, не факт что теми, что использует реальный продукт). Интригующе, но пока из деталей есть только статья от авторов — https://medium.com/relate/design-and-develop-better-together-a955b075d209.

Framer X (https://framer.com/x): Показали видео работы и его основные возможности. Получился цельный инструмент дизайна и прототипирования в духе InVision Studio. Правда, связку с реальными компонентами на React толком не показали — хотя сами компоненты Framer сделаны на React, про их подключение к реальной дизайн-системе не говорят.

Flow (https://createwithflow.com/): Инструмент для работы с анимацией вышел из беты (изначально назывался C4 Studio).

Marvel: Надстройка Userflows позволяет автоматически сгенерировать карту переходов на основе прототипа — https://userflows.marvelapp.com/.

Visual Sitemaps (https://visualsitemaps.com/): Инструмент обещает создавать визуальную карту сайта на основе URL. Пока можно записаться на бета-версию.

Gradient Hunt (https://gradienthunt.com/): Ещё одна коллекция градиентов с быстрой возможностью забрать их CSS.

Шаблоны:
MacOS: Apple добавили в интерфейсные гайдлайны MacOS официальные шаблоны для Sketch и Photoshop — https://developer.apple.com/design/whats-new/?id=07252018. Скачать — https://developer.apple.com/design/resources/.

Figma: Ryan Cordell из Deliveroo рассказывает, как интерфейсные писатели работают совместно с дизайнерами в Figma — https://blog.figma.com/how-to-do-content-design-ux-writing-in-figma-d0e0ee77661e.

SVGator: Пошаговое руководство по работе с инструментом для анимации SVG — https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/.

Screely: История создания от Jurn W — https://medium.freecodecamp.org/how-i-built-my-side-project-and-got-31-000-users-the-first-week-d9053bae5302.

Во второй части — инструменты для поиска инсайтов — https://t.me/pdigest/87.

#tools