Аня Булдакова, продакт-менеджер в 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

ЧАСТЬ 2: ПОИСК ИНСАЙТОВ

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

Pyoneer (https://www.pyoneer.io/): Интересный интегрированный инструмент для поддержки дизайн-мышления. В нём богатый набор возможностей — customer journey map, персонажи, агрегация обратной связи из разных источников для поиска возможностей роста, привязка аналитики. И всё это на базе «двойного алмаза».

Пять лет назад дизайнеры Mailchimp построили мощную базу знаний, объединяющую знания о пользователях из множества источников (пользовательские исследования, аналитика, обратная связь, изучение конкурентов и рынка и т.п.), которая позволяет быстро получить ответы на множество вопросов — https://alistapart.com/article/connected-ux.

Долгое время время в теме был чуть ли не полный штиль — из аналогичных примеров было слышно только про Atlassian (https://www.youtube.com/watch?v=6gvbdFLU73M), WeWork (https://vimeo.com/215143249), Nasdaq (http://nasdaqdesign.com/mosaiq/) и Intuit. Но недавно начали появляться специализированные сервисы для работы с базой инсайтов. Они помогает агрегировать данные пользовательских исследований, обратную связь и другие каналы, чтобы находить среди них полезные идеи для развития продукта:

— Dovetail (https://dovetailapp.com/)
— Aurelius (https://www.aureliuslab.com/)
— NomNom (https://nomnominsights.com/)
— Reframer от Optimal Workshop (https://www.optimalworkshop.com/reframer)

В прошлом году побывал в гостях у NomNom и получил пачку полезных советов по внедрению подхода у нас в команде — https://jvetrau.com/fla-2017/. Мы крутим эту идею давно, но без готовых инструментов она выглядела неподъёмной. Сейчас внедрение стало куда более реальным, так что снова включились в активную работу — глядишь, к дизайн-системе для предсказуемой выкатки продуктов добавится инсайт-система для не менее предсказуемого поиска идей по их развитию.

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

P.S. В первой части — инструменты дизайна интерфейсов — https://t.me/pdigest/86.

#tools

Июльский дайджест полностью готов — осталось только нажать «Опубликовать» утром в понедельник. Вот несколько целостных памяток и наборов принципов из него:

1. Amber Case говорит о проблемах современных экранов, которые излучают синий свет — это сажает глаза и мешает сну — https://medium.com/@caseorganic/why-blue-light-is-so-bad-the-science-and-some-solutions-d992a352464b. Синий свет выделяет наибольшую энергию, поэтому в другой статье она и учёные рекомендуют оранжево-красные, которые используют военные и та же BMW — https://www.fastcompany.com/90177573/how-blue-became-techs-favorite-color-and-why-it-shouldnt-be.

2. Louise Downe, глава дизайна Government Digital Services (делают GOV.UK) приводит свои принципы проектирования услуг — https://blog.louisedowne.com/2018/06/14/15-principles-of-good-service-design/.

3.1. Памятка по поддержке пользователей с ограниченными возможностями от команды американских гос.сайтов — https://accessibility.digital.gov/.

3.2. На эту же тему Microsoft записали серию коротких обучающих роликов — https://www.youtube.com/playlist?list=PLtSVUgxIo6KqBBGqNdPQG64f-hTs1YxFM.

Конечно, на днях стартовал третий месяц лета и конкуренция за внимание огромная, но мало ли, успеете устать от отдыха так, что захочется полезного :)

#principles

Онлайн-школа дизайна и иллюстрации Bang Bang Education знатно пошумела этим летом с фильмом "100 лет дизайна". Да и темп выпуска новых курсов от сильных отечественных дизайнеров у них не утихает — это один из главных игроков на рынке онлайн-образования для дизайнеров.

Школа ведёт канал в Телеграме — https://t.me/bangbangeducation. В нём уйма полезного — свежие беседы с арт-директорами, дизайнерами, руководителями дизайн-студий и стартапов; рассказы про новые курсы; советы; подборки полезных ссылок и находок (в основном по графическому дизайну, по истории дизайна, по дизайн-мышлению и немного по искусству) под тегом #абсолютный_список.

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

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

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

8 августа одной из старейших UX-компаний Nielsen/Norman Group исполняется 20 лет. Якоб Нильсен собрал самые популярные статьи за каждый год работы компании — https://www.nngroup.com/articles/nielsen-norman-group-20-years/ — они делают огромную услугу проф.сообществу, делясь с нами такой массой полезностей. Причём зачастую это достаточно глубокие и актуальные материалы, которые всё ещё задают тренды спустя столько лет.

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

1. Продолжение рассказа о большом пользовательском исследовании голосовых помощников Alexa, Google Assistant и Siri. Во второй статье они пишут об отношении людей к таким устройствам и ожиданиям о качестве ответов и формате диалогов — https://www.nngroup.com/articles/voice-assistant-attitudes/. Про первую было в недавнем обзоре голосовых интерфейсов — https://t.me/pdigest/83 — это один из лучших материалов на эту горячую тему. Более ранняя публикация на тему — https://www.nngroup.com/articles/voice-first/.

2. Хвалят основанное на жестах управление iPhone X — https://www.nngroup.com/articles/iphone-x/. Удивительно: компания очень настороженно относится ко многим новым интерфейсным решениям (зачастую оправданно).

3. Разбирает один из самых известных концептов компании ― F-образный паттерн чтения сайтов — https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/. Правда, многие понимают его совсем неправильно ― он сигнализирует о не очень эффективной организации контента, а не оправдывает её. Она приводит другие паттерны поведения пользователей при работе с информацией.

4. Выводы из исследования о том, как пользователи относятся к почтовым рассылкам — https://www.nngroup.com/articles/newsletters/. Например, понятие "спам" изменилось — сейчас им всё чаще называют письма от сервисов, на которые пользователь сам подписался.

5. Исследование на тему навязчивости разных форматов рекламы в вебе и на мобильных — https://www.nngroup.com/articles/most-hated-advertising-techniques/. Правда, оно делалось на базе wireframes, а не реальных баннеров, но в любом случае смотрели на влияние разных отвлекающих факторов и в целом анти-рейтинг выглядит логично.

6. Jeff Sauro и Christian Rohrer из Capital ONE создали интегральный метод экспертной оценки юзабилити PURE — https://www.nngroup.com/articles/pure-method/. Он хорошо работает для поиска и ранжирования наиболее явных проблем в тех продуктах, где проведение юзабилити-тестирования сложно. Статья Jeff Sauro — https://measuringu.com/pure/.

Я был на их серии мастер-классов Usability Week в 2012 году — https://www.nngroup.com/courses/. Они, конечно, достаточно базовые. Но это отличный способ закрыть пробелы в ключевых навыках. 3-дневный курс от Bruce Tognazzini в его рамках так вообще идеальный ликбез — он хоть и основан на его книге 1994 года, но эти принципы были и будут актуальны ещё долго.

Компанию основали мастодонты профессии — Jakob Nielsen, Donald Norman и Bruce Tognazzini (он, правда, светится на публике меньше). Они вырастили отличную команду, которая постоянно рассказывает наружу интереснейшие находки. Так что спустя 20 лет остаются не просто важной для истории компанией, но и одним из ключевых её двигателей.

#industry #links