Вчера анонсировали iOS 12 — https://www.apple.com/ios/ios-12-preview/. С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.

Неплохие обзоры обновления сделали The Verge — https://www.theverge.com/2018/6/4/17417730/apple-ios-12-iphone-update-best-features-wwdc-2018 и Engadget — https://www.engadget.com/2018/06/04/apple-ios-12-update-wwdc-2018/. Какие визуальные и интерфейсные нюансы можно отметить:

1. iOS-приложения можно будет портировать для MacOS — https://www.engadget.com/2018/06/04/apple-ios-apps-mac-cross-platform-sort-of/. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

2. Уведомления от приложений складываются в стопки — https://cdn.vox-cdn.com/thumbor/m_Y8ggxPlX7nqaMl6dXJxKHTDRA=/1600x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/11476969/groupednotif.gif
и https://www.engadget.com/2018/06/04/ios-12-grouped-notifications/.

3. Apple Books (бывший iBooks) использует шрифт с засечками для заголовков — https://o.aolcdn.com/images/dims?resize=2000%2C2000%2Cshrink&image_uri=https%3A%2F%2Fs.blogcdn.com%2Fwww.engadget.com%2Fmedia%2F2018%2F06%2Fwwdc18-501.jpg&client=a1acac3e1b3290917d92&signature=36b48b85f9a0abf7890f06b46f3acf5ab0c7bd97 и https://www.engadget.com/2018/06/04/apple-books-replaces-ibooks-ios-12/. Палитра визуального языка становится ещё богаче.

4. Как и свежий Android, платформа будет помогать бороться с телефонной зависимостью — https://www.engadget.com/2018/06/04/ios-12-will-help-you-fight-your-phone-addiction/. Неплохой пример экрана с инфографикой оттуда — https://www.apple.com/ios/ios-12-preview/overview/screentime/image_large_2x.jpg.

5. Ещё один стиль кнопок в action sheets — https://www.apple.com/ios/ios-12-preview/overview/notifications/image2_large_2x.jpg.

6. Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности — https://www.engadget.com/2018/06/04/apple-pixar-adobe-standardized-ar-file-format/.

7. Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях — https://www.theverge.com/2018/6/4/17414648/siri-update-new-features-apple-wwdc-2018.

8. Автоподстановка кодов подтверждения, которая поможет мобильным банкам.

9. Умельцы раскопали намёк на тёмную тему — https://developer.apple.com/documentation/uikit/uiuserinterfacestyle?changes=latest_minor. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений — https://www.apple.com/ios/ios-12-preview/features/. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию — https://beta.apple.com/sp/betaprogram/.

#ios #mobile

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

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

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

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