Quantcast
Channel: Архивы Конференции - Юрий Ветров об интерфейсах
Viewing all 36 articles
Browse latest View live

Открытая микро-конференция UX-Среда #18 @ Mail.Ru

$
0
0

25 сентября в новом офисе компании Mail.Ru прошла восемнадцатая открытая микро-конференция UX-Среда. В течение дня специалисты по проектированию и дизайну интерфейсов из разных подразделений компании, а также приглашенные гости выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Степан Фролов (Pravoobladateli.ru), Мария Васильева и Катя Каминская (UI Design), Катерина Умнова и Иво Димитров (InGenius Systems / UI Modeling Company).

Степан Фролов (Pravoobladateli.ru)

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

Мария Васильева (UI Design)Катя Каминская (UI Design)

Следующими были Мария Васильева и Катя Каминская из UI Design. Они рассказали о своем опыте проведения удаленного юзабилити-тестирования. Они все чаще используют этот подход для исследования пользователей из других городов и смогли набить шишек по ходу дела. По факту оно оказывается не дешевле обычного и требует больше времени на подготовку и проведение, а также имеет ограничения по технической части и минимальному опыту респондентов. Зато они будут работать в более естественном контексте, да и исследователь сэкономит время на командировки. К сожалению, половина видео-записи презентации была утеряна.


Катерина Умнова

Катерина Умнова побывала на одиннадцатой конференции UXWeek 2013 в Сан-Франциско. И рассказала о том, как она проходила и что интересного было на мероприятии. Катя прошлась по ключевым темам, презентациям и мастер-классам — получился хороший обзор.

Иво Димитров (InGenius Systems / UI Modeling Company)

В завершение Иво Димитров (InGenius Systems / UI Modeling Company) рассказал о практическом использовании геймификации. В качестве ключевой модели для этого он взял октализ Yu-Kai Chou — инструмент для определения конкретных игровых механик при проектировании интерфейса. Он описывает восемь ключевых практик и конкретные паттерны по каждой из них, а также приводит примеры популярных веб-сервисов с моделями октализа. В итоге Иво предлагает таблицу для расчета игровой модели.


Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. К нам регулярно приходят коллеги из Яндекса, Рамблера, UI Design, UsabilityLab и других компаний. Помещение и сам формат UX-Среды вмещает 40-60 человек, поэтому мы будем рады видеть докладчиков и слушателей из других компаний. Пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с UX-Среды #18, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.


Микро-конференция UX-Среда #19 в рамках User Experience Russia 2013

$
0
0

7 ноября в рамках конференции User Experience Russia 2013 в офисе компании Mail.Ru прошла девятнадцатая микро-конференция UX-Среда. В течение дня специалисты по проектированию и дизайну интерфейсов из разных подразделений компании, а также приглашенные гости выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Сергей Кадомский и Софья Чебанова (WarGaming), Дмитрий Плотников (МегаПлан), Кирилл Романовский и Полина Выдрич (Mail.Ru).

Кирилл Романовский (Mail.Ru Group)Полина Выдрич (Mail.Ru Group)

Первым были мои коллеги из подразделения e-commerce Mail.Ru Кирилл Романовский и Полина Выдрич. Они рассказали об опыте унификации дизайна большого веба и мобильных приложений. За достаточно короткий срок они успели перезапустить и стартовать полдюжины сервисов силами небольшой команды, причем сделать это в единой узнаваемой стилистике и логике построения интерфейса. Кирилл и Полина детально прошлись по всем ключевым аспектам работы над этой группой продуктов, включая организацию процесса и непосредственную работу над дизайном и интерфейсом. К сожалению, видео на конференции не записывалось. Зато доступна подробная статья об этом кейсе.

Сергей Кадомский (Wargaming)

Следующим был Сергей Кадомский из “Мира танков”. Он занимается продуктовой аналитикой и детально изучает то, как работает игра и сообщество вокруг нее. Речь шла об источниках данных, методах их анализа и дополнительных исследованиях. Сергей рассказал о том, как этот процесс происходит в компании и какие особенности накладывает игровая индустрия.

София Чебанова (Wargaming)

София Чебанова из Wargaming ответила на вопрос о том, применимо ли юзабилити-тестирование в играх. Дело в том, что классический подход с исследованием конкретных сценариев использования имеет мало смысла в многопользовательских играх. Во-первых, игровая сессия протекает по непредсказуемым путям и сложно говорить о ее эффективности. Во-вторых, активное социальное взаимодействие сильно влияет на восприятие происходящего игроком. Однако хотя классические подходы и имеют ограничения, с оговорками их можно использовать и в играх. Презентация пока недоступна.

Дмитрий Плотников (МегаПлан)

Из основной сетки UX-Среды выпал на другой день Дмитрий Плотников, отвечавший за дизайн новой версии сервиса МегаПлан. Он в деталях рассказал о том, какие проблемы существовавшего продукта компания пыталась решить и почему были выбраны те или иные решения. Интересно было узнать об их видении рынка — конкурентами МегаПлана считаются не другие инструменты планирования задач, а обычные почтовые сервисы. Ведь потенциальные пользователи продукта, у которых еще не сформировалась четкая потребность в специализированном продукте, используют в первую очередь их для совместной работы над проектами. Презентация пока недоступна, но появится в доработанном виде.

Под конец мероприятия руководитель нашей UX-лаборатории Наташа Спрогис устроила экскурсию по ней. Желающих набралось несколько десятков, так что программа осмотра оказалась бурной и динамичной.

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. К нам регулярно приходят коллеги из Яндекса, Рамблера, UI Design, UsabilityLab и других компаний. Помещение и сам формат UX-Среды вмещает 50-70 человек, поэтому мы будем рады видеть докладчиков и слушателей из других компаний. Пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с User Experience Russia 2013 и UX-Среды #19, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

P.S. Спасибо нашей ивент-команде за помощь в организации, в первую очередь Даше Байдаковой.

Микро-конференция UX-Среда #20 в рамках World Usability Day 2013

$
0
0

16 ноября в рамках конференции World Usability Day 2013 в офисе компании Mail.Ru прошла двадцатая микро-конференция UX-Среда. В течение дня специалисты по проектированию и дизайну интерфейсов из разных подразделений компании, а также приглашенные гости выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Игорь Мыслинский (UsabilityLab), Давид Исаханян и Анна Михина (Тинькофф Кредитные Системы), Наталия Спрогис (Mail.Ru), Александр Киров (Pebble), Дмитрий Зимин (Киноход) и мой рассказ.

Давид Исаханян (ТКС Банк)Анна Михина (ТКС Банк)

В этот раз UX-Среда была посвящена мобильным интерфейсам. И первыми были Давид Исаханян и Анна Михина (ТКС Банк). Они рассказали о том, как создавалось мобильное приложение банка для iPhone, одно из самых удачных среди отечественных. А также версиях для других платформ. Среди которых, кстати, также одни из самых сильных приложений для Windows Phone и Windows 8. Ближе к концу Давид и Аня заглянули вперед и показали еще не выпущенную версию мобильного клиента для iOS7.

Игорь Мыслинский (UsabilityLab)

Незадолго до этого в другом зале свой мастер-класс по проектированию мобильных приложений начал Игорь Мыслинский (UsabilityLab). Был аншлаг и сложно пробиться, но пришедшим было интересно и они плотно работали над задачами в течение нескольких часов. Видео и презентация недоступны.

Наталья Спрогис (Mail.Ru Group)

Руководитель UX-лаборатории Mail.Ru Group Наталия Спрогис рассказала об особенностях пользовательских исследований на мобильных и планшетах. В презентации было много интересного о текущих особенностях процесса, оборудовании и специализированных программах, их тюнинге и частых проблемах. В нашей лаборатории есть отдельный мобильный eye-трекер от Tobii и Наташа рассказала об опыте его использования. А под конец показала пример видео использования мобильного приложения в реальном мире, снятого с помощью камеры GoPro. Это пока не самый комфортный вариант для регулярных исследований, но он наглядно показал влияние окружающей среды и параллельных задач пользователя на работу с приложением.

Александр Киров (Pebble)

Мой бывший коллега Александр Киров, который теперь работает в компании-производителе умных часов Pebble, рассказал о текущих трендах в отрасли. Он перечислил наиболее известные компании и продукты носимой электроники с обзором их плюсов и минусов. А также описал особенности платформы Pebble и свое видение рынка в целом и трендов в их интерфейсах.

Юрий Ветров (Mail.Ru Group)

Я подготовил презентацию о фреймворке Mail.Ru для мобильных сайтов. В ней подробно рассказано о том, как мы сумели найти механизм дизайнерско-технической унификации — единственном способе быть уверенным, что дизайн не поломается при переходе из макетов в реализацию. Сейчас на этой платформе работает десяток наших мобильных сайтов, скоро к ним добавится еще несколько. В нашем подразделении порядка сотни проектов и единственный способ управлять их дизайном — свести к нескольким гайдлайнам. Тогда запуски новых продуктов и редизайны существующих будут идти гораздо легче. А обновлять можно будет сразу группу сервисов.

Дмитрий Зимин (Киноход, экс-Рамблер)

В завершение Дмитрий Зимин рассказал о своем переходе из проектировщиков в продукт-менеджеры и как строилась работа над мобильным приложением Кинохода с другой стороны. Он много рассказывал о цифрах — стоимости хорошего дизайна, результатах экспериментов, аналитике. Получилось кратко, но живо и жизненно. И также с анонсом грядущего обновления приложения для iOS7.

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. К нам регулярно приходят коллеги из Яндекса, Рамблера, UI Design, UsabilityLab и других компаний. Помещение и сам формат UX-Среды вмещает 50-70 человек, поэтому мы будем рады видеть докладчиков и слушателей из других компаний. Пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Фотографии с World Usability Day 2013 и UX-Среды #20 будут доступны позже. Следите за лентой анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

P.S. Спасибо нашей ивент-команде за помощь в организации, в первую очередь Даше Байдаковой и Екатерине Роман.

Dribbble Meetup 2014 в Москве

$
0
0

24 мая в Москве прошел Dribbble Meetup 2014. На этой неформальной конференции для дизайнеров выступили два десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Степан Бурлаков (Freeger), Pokras Lampas, Макс Костенко, Александр Зайцев, Таня Саенко (Ряжанка), Александр Хмелевский (SoftFacade), Дмитрий Новиков (MacPaw), Андрей Давликанов, Алекс Бендер, Александр Нохрин, Роман Храмов (Cuberto), Дмитрий Чута (Chapps), Павел Скрипкин (Mail.Ru Group), Алишер Якупов и Олег Андрианов (Одноклассники), Саша Бурт, а также внеплановый Антон Карташов (Иннова). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.

Вместе с Олегом Андриановым мы проводим митап уже во третий раз при поддержке Mail.Ru Group и с согласия самого Dribbble. Причем на этот раз это совсем официальное мероприятие #dribbblemeetup. Первый раз получился очень интересным и бодрым, хотя и партизанским по организации. В прошлом году получилось развить идею и сделать мероприятие масштабнее — пришло около 400 слушателей и полтора десятка спикеров. В этот раз мы снова пошли вперед и побили свои рекорды — около 550 слушателей и 17 спикеров. Местом проведения выбран новый офис Mail.Ru Group на Ленинградском проспекте, который и вместил всех.

Dribbble был создан Дэном Седерхольмом (Dan Cederholm), основателем американской дизайн-студии SimpleBits. Приглашение для публикации своих работ получить непросто и, как следствие, на сайте присутствуют только качественные работы и лучшие дизайнеры со всего мира. А с появлением командных аккаунтов крупные интернет-сервисы вроде Facebook, Dropbox, Evernote, Google оперативно публикуют свежие куски своих свежих работ. Наша команда в Mail.Ru Group также публикует свои наработки в ходе редизайна продуктов компании и создания новых сервисов.

Алишер Якупов (Одноклассники)

Программу снова открыл Алишер Якупов из Одноклассников, который анонсировал конкурс для дизайнеров Russian Design Cup 2014. Он будет проходить уже во третий раз, причем на этот раз — еще и в офлайне. Детали появятся уже летом, а пока он описал основные изменения и планы на будущее.

Алекс Бендер

Следующим был Алекс Бендер. Он хорошо известен в сообществе своими сочными скеоморфными иконками, от которых не отказался и после тотальной флэтизации всего и вся. Алекс объяснил, почему он считает этот подход актуальным и востребованным, а также пошагово описал процесс их создания.

Дмитрий Чута (Chapps)

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


Александр Нохрин

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


Дмитрий Новиков (MacPaw)

Как и в прошлом году, Дмитрий Новиков из MacPaw провел мастер-класс по Sketch, недавно вышедшей третьей версии. В этот раз интерес к инструменту был еще выше, да и времени на выступление получилось побольше. Так что Диму не отпускали с вопросами ни сразу после выступления, ни во время обеда.

Во время обеда Олег Андрианов раздал 40 инвайтов авторам интересных портфолио. Посетители митапов давно искали такую возможность и благодаря помощи Dribbble мы смогли получить большую пачку приглашений для участников.

Александр Зайцев

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

Степан Бурлаков (Freeger)

В этот раз у создателя студии Freeger Степана Бурлакова получилось выступить на митапе. Он рассказал о своем опыте переезда в США и работы как в качестве самостоятельно дизайнера, так и собственной студии. У него огромный опыт работы над масштабными проектами с крупными заказчиками, а также успешный пример ведения бизнеса агентства. Удалось узнать много деталей и нюансов, причем Степана еще долго не отпускали с вопросами и он устроил спонтанное выступление в холле после своего рассказа.

Таня Саенко

Таня Саенко стала первой девушкой, выступившей на митапе. Она рисует самые добрые иконки на Dribbble и рассказала о нюансах их создания, включая пошаговый процесс и особенности взаимодействия с клиентами. Во время и после ее презентации в Твиттере зашкаливала няшность — Таню назвали “Саенко-тян” :)


Александр Хмелевский (SoftFacade)

Александр Хмелевский из SoftFacade рассказал об опыте использования инструмента прототипирования InVision для мобильных приложений, которые делает компания. Он один из самых сильных среди существующего многообразия и здорово облегчает работу по проектированию интерфейсов и взаимодействию с клиентами.


Макс Костенко

Небольшой мастер-класс по созданию иллюстраций провел Макс Костенко. Его характерные эффектные работы востребованы не только в России и на примере известного постера к фестивалю Cannes Young Lions он пошагово показал свою технику создания таких работ.

Андрей Давликанов

Работающий над 2D-играми Андрей Давликанов рассказал о своих нескольких проектах. Получился неплохой обзор инструментов, техник, плюсов, минусов и подводных камней. Много времени было уделено анимации, которая имеет ряд ограничений.


Pokras Lampas

Эффектный рассказ о своих работах сделал Pokras Lampas. Он много выступает в разных городах России и активно преподает, так что подача получилась живой и бодрой. Презентация была также посвящена работам и истории их создания, а также техникам исполнения. После нее и оживленной серии вопросов Покрас оставил серию своих фирменных автографов.


Олег Андрианов (Одноклассники)

Более подробный обзор инструментов прототипирования мобильных приложений подготовил Олег Андрианов из команды Одноклассников. Он прошелся по возможностям и ограничениям наиболее востребованных из них — Flinto, Marvel, InVision, а также привел набор полезных плагинов и надстроек для работы с мобильным дизайном.

Роман Храмов (Cuberto)

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


Павел Скрипкин (Mail.Ru Group)

Мой коллега Павел Скрипкин сделал сравнительный обзор Adobe Edge Animate и AfterEffects как инструментов для создания интерфейсной анимации. Акцент был сделан на первом, как более подходящем для системной работы над сложными взаимодействиями и идеологически современном.

Алекс Бурт

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

Антон Карташов (Иннова)

Бонусом по завершению основной программы стал небольшой мастер-класс Антона Карташова из Инновы по созданию анимаций в Origami для Quartz Composer. Его рассказ и презентация Алексея Соломатина из Digital October на эту же тему не попали в основную программу из-за ее перегруза. Но для оставшихся пары десятков человек Антон прошелся по основным техникам работы с инструментом и надстройкой.

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

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

P.S. Спасибо нашей ивент-команде за помощь в организации, в первую очередь Даше Байдаковой и Наталье Троицкой.

Микро-конференция UX-Среда №21 в рамках User Experience Russia 2014

$
0
0

23 октября в рамках конференции User Experience Russia 2014 в офисе Mail.Ru Group прошла двадцать первая микро-конференция UX-Среда. В течение дня специалисты по проектированию и дизайну интерфейсов из разных подразделений компании, а также приглашенные гости выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Антон Гугля (LinguaLeo), Дмитрий Щеглов (Сбербанк), Ярослав Шуваев (БВШД), Анна Михина и Давид Исаханян (Банк Тинькофф), Ксения Стернина (Mail.Ru Group), Павел Скрипкин (Mail.Ru Group), Юлия Мархадаева (Nimax) и мой рассказ.

Юрий Ветров (Mail.Ru Group)

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

  1. Гарантированная унификация дизайна. Метод разработки и обновления продуктов использует единую базу кода, в которой хранятся один раз созданные и проверенные интерфейсные паттерны.
  2. Масштабирование улучшений. Доработав паттерн в одном из проектов (например, повысив глубину просмотра в блоке новостей по теме), можно быстро раздать его остальным и поднять продуктовую эффективность всей линейки сервисов.
  3. Постоянная актуальность дизайна. Уход от героических редизайнов раз в несколько лет к регулярной гигиене. Перезапуски отнимают много сил и теряют тысячи мелких наработок, прикрученных к продукту за долгое время его развития.
  4. Меньше рутины для дизайнера, больше фокуса на продуктовые задачи. Наконец-то появляется время подумать о чем-то помимо бесконечной поддержки достаточного состояния дизайна.

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

Антон Гугля (LinguaLeo)

Антон Гугля из LinguaLeo рассказал о том, как выстраиваются дизайн-процессы в компании. Это очень зрелый и системный подход, позволяющий не только эффективно решать задачи, но и развивать дизайн стратегически. Мы идем похожим путем, но я немного завидую Антону в том, что в монопродуктовой компании проще сфокусироваться и быстрее идти по всем фронтам.


Дмитрий Щеглов (Сбербанк)

Руководитель отдела дизайна продуктов и сервисов в Сбербанке Дмитрий Щеглов рассказал о развитии мобильного направления. Их мобильным банком пользуется более 2,5 миллионов человек и несмотря на байки об особенностях аудитории, команда не боится развивать его в современных направлениях. Дмитрий рассказал о подходах к работе над продуктами, которые позволяют выпускать обновления часто и держать рейтинг в AppStore на отличном уровне.

Ярослав Шуваев (БВШД)

Ярослав Шуваев курирует интенсивы по UX/UI в Британке, которые являются одним из лучших способов профессионально прокачаться. Он рассказал о программе, ее истории и планах. Я участвовал в двух интенсивах и мне очень понравился уровень аудитории — туда приходят практикующие специалисты, имеющие как минимум средний уровень квалификации, что позволяет говорить о достаточно сложных темах, не копаясь в основах. Следующий курс пройдет с 12 по 20 января.

Презентация в виде одностраничника.

Давид Исаханян (ТКС Банк)Анна Михина (ТКС Банк)

Еще одним рассказом про банки стало выступление Давида Исаханяна и Анны Михиной из Банка Тинькофф. Они описали особенности работы над бизнес-приложениями компании. Их особенность в том, что пользователю выдается корпоративных смартфон, платформа которого может отличаться от использующейся на личном устройстве. Это сильно ограничивает интерфейсные решения — владелец iPhone может не знать особенностей Android. В банке также используется продвинутый UI Kit, позволяющий собирать приложения из готовых кусочков кода с натянутым на него дизайном.

Ксения Стернина

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

Павел Скрипкин (Mail.Ru Group)

Павел Скрипкин из нашей дизайн-команды описал особенности дизайна и запуска обновленного портального меню, которое появилось на продуктах Mail.Ru Group этим летом. На первый взгляд задача кажется простой, но она требует учесть реальные потребности почти четырех десятков сервисов, у каждого из которых свои задачи, свое руководство и своя команда. Помимо этого, необходимо технологическое решение, которое позволит легко и централизовано раздавать и обновлять меню на всех проектах. В общем, задача потребовала уймы сил и времени, зато позволила систематизировать общепортальные решения.

Юлия Мархадаева (Nimax)

Юлия Мархадаева из Nimax закрыла серию выступлений очень подробным гайдлайном по составлению гайдлайнов. Ранее она выпустила серию статей (http://www.cmsmagazine.ru/library/items/graphical_design/guideline-for-web-projects/) на эту тему и в своей презентации описала все эти аспекты. Основные разделы гайдлайна, особенности применения для разных типов проектов, опыт работы с клиентами. Получился очень емкий базовый справочник.

Макс Десятых (RedMadRobot)

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

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с User Experience Russia 2014 и UX-Среды № 21 (день 2), а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

Микро-конференция UX-Среда №22 в рамках World Usability Day 2014

$
0
0

22 ноября в рамках конференции World Usability Day 2014 в офисе Mail.Ru Group прошла двадцать вторая микро-конференция UX-Среда. В течение дня специалисты по проектированию и дизайну интерфейсов из разных подразделений компании, а также приглашенные гости выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Алексей Соломатин (Digital October), Ирина Ерохина (Localway), Наталия Спрогис и Ксения Стернина (Mail.Ru), Иван Замесин (Яндекс), Алексей Полехин (Нетология) и мой рассказ.

Юрий Ветров (Mail.Ru Group)

Я открыл секцию презентацией о подходе фоновых исследований — как много читать, знать и не офигевать. Сложность продуктов все растет, а формат работы современных продуктовых команд становится более динамичным. От нас ждут достаточно высокого уровня профессиональной эрудиции, который набрать бывает непросто, а поддерживать ― и того сложнее.

Я плотно работаю с информацией по профессии и структурирую понимание по ее областям, с которыми работаю или наверняка поработаю в будущем. Изначально тратил на это уйму времени, но постепенно научился справляться с этим адовым потоком, так что теперь уходит час-полтора в день. В презентации рассказал, почему считаю это важным, как устроены информационные потоки и как это выручает меня на практике. Там ОЧЕНЬ много ссылок на всевозможные подборки и списки. Какие-то уже полные, какие-то еще только собираются.


Алексей Соломатин (Digital October)

Алексей Соломатин из команды NPTV в Digital October провел мини-мастер-класс по работе с анимацией в Quartz Express. Инструмент позволяет делать очень интересные вещи, хотя и имеет уйму проблем — сложен в обучении, не имеет удобной возможности предпросмотра на устройстве, больше не поддерживается Apple. Но он позволяет получить очень интересные решения и Алексей показал процесс их создания от простых до достаточно хардкорных. Недавно он также выпустил коллекцию патчей для Quartz для анимации интерфейсов ТВ-приложений. Подписывайтесь на него на GitHub.

Ирина Ерохина (Localway)

Ирина Ерохина рассказала о запуске сервиса рекомендаций Localway, дочернего проекта AnyWayAnyDay. О том, как родилась идея продукта, искали визуальные и интерфейсные решения, работали с удаленными и внутренними дизайнерами, получали фидбек от пользователей и улучшали сервис. Кстати, там уже вышли две мои бургерные подборки (честные и гурманские) и скоро появится еще парочка :)


Наталья Спрогис (Mail.Ru Group)Ксения Стернина (Mail.Ru Group)

Мои коллеги Наталия Спрогис и Ксения Стернина сделали первый рассказ об опыте психо-физиологических исследований в нашей юзабилити-лаборатории. У нас есть много интересного оборудования — для измерения кожно-гальванической реакции, ЭМГ (электромиограмма), частоты сердечного ритма, ЭЭГ (электроэнцефалограмма). Но для того чтобы полноценно использовать его необходимы инструменты агрегации данных из нескольких источников и методы анализа этой информации. А с этим много проблем и тонкостей, хотя кое что уже получается — обо всем этом Наташа и Ксения и рассказали в презентации.


Иван Замесин (Яндекс)

Иван Замесин из Яндекса в начале осени опубликовал крайне интересную статью о lean-исследованиях в компании. Это более динамичный формат получения обратной связи от пользователей, когда менеджеры могут пообщаться с ними в любой день — процесс налажен так, что в офисе ежедневно есть респондент. Это не отменяет классическую UX-лабораторию, а скорее расширяет доступный продуктовым командам аналитический инструментарий. Что особенно круто в описываемом lean-подходе — менеджеры прокачивают исследовательские навыки и становятся сами по себе достаточно неплохими специалистами в этом плане.


Алексей Полехин (Нетология)

Алексей Полехин подробно прошелся по учебным программам Нетологии для дизайнеров и проектировщиков. Уже есть или появятся в ближайшее время курс по UX от Алексея Копылова, курсы по адаптивному дизайну, основам графического дизайна, проектной работе, презентации, а также серия вебкастов. В презентации также рассказано об общих принципах построения курсов и особенностях онлайн-обучения в целом.


Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны видео выступлений с World Usability Day 2014, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

Микро-конференция UX-Среда №23: Дизайн новостных сайтов

$
0
0

10 декабря в офисе Mail.Ru Group прошла двадцать третья микро-конференция UX-Среда, посвященная дизайну новостных сайтов. Приглашенные гости, а также специалисты из разных подразделений компании выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были дизайнеры известных новостных сайтов Александр Гладких (Lenta.ru, Ведомости), Илья Рудерман (РИА Новости), Алексей Быстров (Look at Media), Эдуард Цветцих (РБК), Денис Шепелев (BFM.ru, Русский пионер), Сергей Паранько и я от нашей команды, а также Антон Реппонен (USA Today) по Скайпу. Модерировала дискуссию Таня Смирнова (DepositPhotos).

Антон Реппонен (Anton & Irene)

Открыл программу Антон Реппонен из студии Anton & Irene, ранее возглавлявший дизайн в Fantasy Interactive. С помощью телемоста из Нью-Йорка он достаточно подробно рассказал о работе над редизайном USA Today и опыте создания новостных сайтов в целом. Этот запуск оказался большим успехом для компании, так что сразу после него в студию пошел бесконечный поток заказов от других известных медийных брендов. В итоге Антон и команда поучаствовали в полусотне тендеров, концептов и исследований. Что с одной стороны дало уйму глубоких знаний по теме, а с другой — надолго отбило желание участвовать в таких проектах.

USA Today, старый и новый дизайн

USA Today — одна из старейших и крупнейших газет США. Она первой стала выходить в цвете — этим и обусловлено устоявшееся цветовое кодирование разделов. При этом долгое время ее интернет-версия не особо развивалась, так что серьезно отстала от конкурентов. Терять было уже нечего, так что накануне 30-летия газеты команда F-I получила карт-бланш на смелые решения и, несмотря на чуть не проваленный первоначальный этап работы, смогла совершить мини-революцию в формате подачи контент-проектов. Правда, они полагаются скорее на силу и опыт экспертов в дизайне, чем на глубокие исследования и аналитику, поэтому про эту часть рассказывалось мало. Тем не менее, шаринг материалов издания после редизайна вырос очень мощно, что отметили многие американские специалисты в области СМИ. Так же, как и трафик — на несколько сот процентов.

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

  • Американские СМИ такие же негибкие в плане новых рекламных форматов, как и отечественные. Если не хуже — бизнес-составляющая довлеет сильнее, а конкуренция безумная, так что в случае неудачных инициатив команда рискует быть уволенной. Рисковать решаются далеко не все. При этом крупному рекламодателю вроде Nike гораздо проще закинуть два типовых баннера на тысячи сайтов, чем морочиться с экспериментальными форматами.
  • Один из самых известных специалистов по газетному дизайну Jacek Utko попытался работать в Америке — с его уровнем и знаниями можно небольшими усилиями превратить многие из них в конфетку. Но все та же боязнь команд брать на себя риск сильно ограничивает возможности изменения.

Илья Рудерман (Moscow Design Studio)Александр Гладких (Charmer)Алексей Быстров (Look at Media)Эдуард Цветцих (РБК)Сергей Паранько (Mail.Ru Group)Юрий Ветров (Mail.Ru Group)Денис Шепелев (Agima)

После перерыва началась панельная дискуссия с участием Ильи Рудермана, Александра Гладких, Алексея Быстрова, Эдуарда Цветциха, Дениса Шепелева, Сергея Паранько и меня. Мы заранее заготовили список толковых вопросов от экспертов, но еще не успели прогнать новый формат UX-Среды, так что в основном спрашивали из зала. Пришло порядка 130 человек, многие из которых представляли ведущие отечественные СМИ — Ведомости, Популярная Механика, Серебряный Дождь и другие, поэтому общаться было интересно и в ходе панели, и в перерывах.

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

  • Использование бесконечной прокрутки статей, как это делают Time.com и многие другие издания. И его сравнение с другим альтернативным подходом от USA Today, когда статьи открываются в попапах.
  • Боковая панель с лентой свежих материалов сайта а-ля тикер в Фейсбуке. Механизм хороший, но со своими ограничениями.
  • Рекомендации и провязки контента, его переупаковка. Подходы у всех плюс-минус одинаковые, но есть много нюансов.
  • Работа с социальными сетями и трафиком оттуда.
  • Пользователи в большинстве случаев попадают сразу на страницу публикации, минуя главную страницу издания.
  • Обсуждения и их модерация. Некоторые издания закрывают комментарии на сайте, переводя дискуссии в социальные сети. Наши Новости Mail.Ru недавно также отключили их волевым решением.

Мощный отчет также написал Сергей Король.

Мы брали достаточно долгую паузу в проведении UX-Среды — искали новый формат, который позволит дать толчок ее развитию. Вместе с Таней Смирновой из DepositPhotos мы нашли достаточно хороший вариант — панельная дискуссия по достаточно узкой теме. Это позволило сделать качественный рывок — послушать сильных отечественных специалистов по дизайну пришло около 130 человек вместо 40-60 раньше, да и обсуждение проходило бодрее. Так что будем продолжать именно в этом виде.

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с UX-Среды № 23, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

Микро-конференция UX-Среда №24: Лонг-риды и современные инструменты паблишинга

$
0
0

1 апреля в офисе Mail.Ru Group прошла двадцать четвертая микро-конференция UX-Среда, посвященная лонг-ридам и современным инструментам паблишинга. Приглашенные гости, а также специалисты из разных подразделений компании выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Никита Обухов (Tilda), Максим Павлов (Notamedia), Игорь Кочмала (КП), а также Кирилл Данченко (Readymag) по Скайпу. Модерировала дискуссию Таня Смирнова (DepositPhotos).

UX-Среда №24

Кирилл Данченко (Readymag)

Как и в прошлый раз, мы начали с телемоста. Кирилл Данченко, со-основатель и CEO одной из первых платформ для паблишинга Readymag, рассказал об истории ее создания, текущих возможностях и планах по развитию. Он показал ранние версии интерфейса и описал, как второй со-основатель Антон Герасименко видел себе будущее, в котором дизайнер сам может создавать промо-сайты, презентации и публицистику в вебе без помощи разработчиков. Это было на заре текущего бума подобных сервисов, так что Readymag можно считать со-авторами тренда.

Никита Обухов (Tilda)Максим Павлов (Notamedia)Игорь Кочмала (КП)

После перерыва началась панельная дискуссия с участием Никиты Обухова, Максима Павлова и Игоря Кочмала. Мы заранее заготовили список толковых тем для обсуждения от экспертов и чередовали их с вопросами из зала. Пришло порядка 130 человек, многие из которых представляли ведущие отечественные СМИ — Sanoma, Первый Канал, РБК, НТВ, Esquire, Россия Сегодня, ТАСС и другие, поэтому общаться было интересно и в ходе панели, и в перерывах.

UX-Среда №24

Эксперты представляли три ключевых стороны, работающих над созданием лонг-ридов — СМИ (КП), платформа (Tilda) и веб-студия (Notamedia). Это позволило посмотреть на проблему со всех ракурсов. После краткого рассказали о себе и проектах, над которыми работали участники дискуссии, началось обсуждение трендов, успешных приемов и паттернов, особенностей рынка, нюансов работы с редакцией и рекламодателями. Вот некоторые из тем:

  • Комсомольская правда — один из пионеров формата в Рунете. Благодаря тому, что контент для больших статей всегда готов в печатной версии и необходимости синхронизировать с ней публикацию в онлайне, они собирают лонг-риды в течение недели. Их первый опыт «Америка заколоченных небоскребов» также уложился в эти рамки. На момент проведения UX-Среды они готовились перейти на Tilda и новые материалы собираются уже на этой платформе.
  • Год назад Никита Обухов готовил к запуску Tilda и хотел облегчить жизнь дизайнерам и издателям. По факту ему пришлось активно заниматься продуктовой работой помимо улучшения подачи материалов и расширения коллекции модулей. Оказалось, что потребность не так велика — многие не думают об эффектно поданном контенте, не знают, как его делать и зачем. Так что Никите приходится еще и образовывать рынок, эта активность особенно заметна последние полгода.
  • Четкого мнения на один из главных вопросов бизнеса — какой выхлоп дают лонг-риды — собрать не удалось. Участники дискуссии во многом сходились на том, что это просто еще один формат подачи публикаций в дополнение к существующему арсеналу, который дает еще и имиджевый выхлоп. Мы в Mail.Ru Group имеем пока небольшой опыт запуска лонг-ридов, но один из недавних примеров с сериалом «Физрук» дал мощный выхлоп — 33% докрутили эту длиннющую страницу до конца, 90% посетителей страницы посмотрели сериал. Для нас это стало примером того, как можно считать эффективность таких публикаций.
  • Большинство сошлись на том, что рекламу размещать в таких публикациях нет смысла — скорее, сам лонг-рид должен быть коммерческим спец.проектом, если на нем планируется зарабатывать.
  • Мобильный веб продолжает активно наращивать долю, да и переходы публикации получают во многом из соц.сетей, которые также потребляются все больше со смартфонов. Поддержку этих устройств легко организовать, если лонг-рид делается на собственной или сторонней платформе, но для созданных вручную проектов это достаточно долго и дорого.
  • Одно из перспективных направлений развития формата — это добавление интерактива и игровой механики, когда читатель активно взаимодействует с лонг-ридом. Что-то подобное пытается делать В-О-С.

UX-Среда №24

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с UX-Среды № 24, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.


Dribbble Meetup 2015 в Москве

$
0
0

23 мая в Москве прошел Dribbble Meetup 2015. На этой неформальной конференции для дизайнеров выступили полтора десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Команда Zeplin, Игорь Мустаев (Лавка букв), Анатолий Громов (Fjord), Данил Криворучко (Charlex), Олег Турбаба (SFÇD), Павел Шумаков (Вконтакте), Елена Лазутина, Алексей Рыбин (Great Simple Studio), Андрей Кармацкий (Яндекс), Антон Карташов (Иннова), Павел Скрипкин (Mail.Ru Group) и Евгений Беляев (Авито), Дмитрий Новиков (MacPaw), Дмитрий Чута (Chapps), Олег Андрианов (Одноклассники). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.

Вместе с Олегом Андриановым мы проводим митап уже в четвертый раз при поддержке Mail.Ru Group и с согласия самого Dribbble. С прошлого года это совсем официальное мероприятие #dribbblemeetup, причем одно из самых крупных в мире. Первый раз получился очень интересным и бодрым. В 2013 году получилось развить идею и сделать мероприятие масштабнее — пришло около 400 слушателей и полтора десятка спикеров. В 2014 мы снова пошли вперед и побили свои рекорды — около 550 слушателей и 17 спикеров. Ну а на этот раз планка опять поднялась — 600 слушателей. Местом проведения выбран новый офис Mail.Ru Group на Ленинградском проспекте, который и вместил всех.

Dribbble был создан Дэном Седерхольмом (Dan Cederholm), основателем американской дизайн-студии SimpleBits. Приглашение для публикации своих работ получить непросто и, как следствие, на сайте присутствуют только качественные работы и лучшие дизайнеры со всего мира. А с появлением командных аккаунтов крупные интернет-сервисы вроде Facebook, Dropbox, Evernote, Google оперативно публикуют свежие куски своих свежих работ. Наша команда в Mail.Ru Group также публикует свои наработки в ходе редизайна продуктов компании и создания новых сервисов.

Вадим Ростоцкий (Одноклассники)

Программу открыл Вадим Ростоцкий из Одноклассников, который анонсировал конкурс для дизайнеров Russian Design Cup 2015. Он будет проходить уже в четвертый раз. Недавно появились детали и состав жюри, среди новых лиц — Артем Геллер и Павел Шумаков.

Игорь Мустаев (Лавка букв)

Первой презентацией Игорь Мустаев из Лавки букв здорово вдохновил присутствующих своей любовью к мелу. Игорь давно занимается леттерингом, а в дополнение к этому — преподает на курсе Ильи Рудермана в Британке. Одна из его недавних работ — новогодние заставки Первого канала, здорово нашумевшие в дизайнерском сообществе. Об этой и других работах, а также своей технике он и рассказал.

Анатолий Громов (Fjord)

Анатолий Громов из шведского офиса Fjord рассказал, чем занимается в компании и как устроен типовой процесс работы над проектом, а также разнице между продуктовым и сервисным дизайном. У него была, наверное, самая длинная сессия вопросов и ответов — аудитории было интересно узнать как можно больше о работе компании.

Евгений Беляев (Avito)Павел Скрипкин (Mail.Ru Group)

Евгений Беляев (Авито) и Павел Скрипкин (Mail.Ru Group) недавно запустили Resonator — инструмент для облегчения нарезки мобильного дизайна и другой графики для передачи разработчикам. Они рассказали о проблематике этого нелегкого процесса и показали, как их продукт облегчает жизнь.

Олег Турбаба (SFCD)

Лучшим спикером первой части митапа по мнению слушателей оказался Олег Турбаба из питерского офиса SFÇD. Он рассказывал об анимации в интерфейсах и начал с более-менее простых и понятных вещей. Но по ходу презентации и разбора своих работ, очень сильных и необычных, становилось все интереснее и интереснее. За последние пару лет все более-менее научились основным вещам и даже успели перешагнуть ступень разумного с перебором «пружинок», а рассказ Олега ответил на вопрос «что дальше».

Антон Карташов (Иннова)

Антон Карташов из Инновы закончил первую часть глубоким рассказом о работе с Origami для Quartz Composer. Антон накопил приличный опыт работы с инструментом и недавно запустил сайт-справочник по работе с ним. Это было хорошо видно в презентации, которая будет дико полезна всем, кто хотел бы создавать особо динамичные прототипы.

Павел Шумаков (Вконтакте)

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

Pelin Kenez (Zeplin)Berk Cebi (Zeplin)Ismail Ceylan (Zeplin)Merih Akar (Zeplin)

Полным составом на митап приехала команда Zeplin — Pelin Kenez, Berk Cebi, Ismail Ceylan и Merih Akar. Инструмент облегчает взаимодействие между дизайнерами и разработчиками, передавая ресурсы и спецификации быстрее и проще. Россия была третьей страной по количеству пользователей на момент выступления, так что интерес к продукту и рассказу о нем оказался высоким. Вскоре после конференции команда переехала из Турции в Сан-Франциско — готовиться к полноценному релизу и развивать его дальше.

Елена Лазутина

Обладательница интересного и необычного стиля Елена Лазутина порадовала слушателей очень личным рассказом о том, как создаются эти иллюстрации. По ее словам, это простой, но очень эффектный в результате подход с выбором несложной палитры, которая варьируется в конкретной работе и дает добрый и душевный результат.

Алексей Рыбин (Great Simple Studio)

Арт-директор новосибирской Great Simple Studio Алексей Рыбин — большой специалист по UI-китам, которые он часто публикует на Dribbble. А с запуском DesignModo Market они стали еще заметнее. Алексей рассказал о том, как устроен бизнес на готовых интерфейсах и как студия работает над ними.

Данил Криворучко (Charlex)

Данил Криворучко, арт-директор нью-йоркской студии Charlex, описал историю создания приложения Urban Walks, выпущенного недавно вместе с Антоном Реппоненом и студией Гиперболоид. Он также прошелся по особенностям работы в американском агентстве, так что презентация получилась еще и личной. Слушатели выбрали Данила лучшим спикером второй части митапа.

Олег Андрианов (Одноклассники)

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

Дмитрий Чута (Chapps)

Дмитрий Чута из Chapps подготовил вторую версию своего прошлогоднего рассказа об анимации. Помимо категоризации подходов и решений, он обозначил проблему инструментов — большинство имеющихся сейчас решений дают на выходе видео или GIF, что равносильно передаче макета в JPG. Если мы хотим выйти за границы совсем базовой анимации, нужно серьезно переосмыслить связку дизайнер-разработчик.

Андрей Кармацкий (Яндекс)

Глава дизайна картографических сервисов Яндекса Андрей Кармацкий немного подустал рассказывать о продуктах и решил поговорить о своих экспериментах в визуализации данных, в первую очередь картографических. Вскоре после конференции стало понятно почему — Андрей покинул компанию. У него одна из лучших в России экспертиз по этой теме, поэтому было крайне интересно послушать его.

Дмитрий Новиков (MacPaw)

Дмитрий Новиков из MacPaw закончил митап профессиональной философией. В этом году ему запретили рассказывать про Скетч :) Получился идеальный рассказ для завершения конференции — жизненный, задорный, личный и мотивирующий.

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

  • Huawei, разыгравшей шесть умных часов среди слушателей и спикеров. Умные часы Huawei TalkBand B2 уже в продаже — это отличный подарок для дизайнера.
  • Wacom, проводившей конкурс на лучший логотип Dribbble Meetup 2016 с подарком лучшему в виде планшета.
  • Манн Иванов Фербер, предоставившим несколько десятков книг, а также электронное издание для всех участников.

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

Микро-конференция UX-Среда №25: Как работают дизайн-команды в крупных компаниях

$
0
0

15 июля в офисе Mail.Ru Group прошла двадцать пятая, юбилейная микро-конференция UX-Среда, посвященная работе дизайн-команд в крупных компаниях. Приглашенные гости, а также специалисты из разных подразделений компании выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Лола Кристаллинская (Яндекс), Иван Васильев (Альфа Банк), Леонид Ивахов (Билайн), Ярослав Перевалов (Мегафон) и я от Mail.Ru Group. Модерировала дискуссию Таня Смирнова (DepositPhotos).

UX-Среда №25

В этот раз мы не успели договориться с западным спикером, поэтому пропустили телемост и сразу приступили к панельной дискуссии. Мы заранее заготовили список толковых тем для обсуждения от экспертов и чередовали их с вопросами из зала. Пришло порядка 130 человек, многие из которых представляли ведущие отечественные продуктовые компании — Рамблер, Яндекс, amoCRM, Лаборатория Касперского, Net Cracker, TuTu.ru, Нетология, Bookmate, Иннова, Biletix, Qiwi, B2B Center, 2Gis, Acronis, Мегаплан, HeadHunter, Yota Devices и другие, поэтому общаться было интересно и в ходе панели, и в перерывах.

UX-Среда №25

Лола Кристаллинская (Яндекс)Леонид Ивахов (Билайн)Ярослав Перевалов (Мегафон)Иван Васильев (Альфа-Банк)Юрий Ветров (Mail.Ru Group)

Эксперты представляли два типа компаний — продуктовые компании (Mail.Ru Group и Яндекс) и сервисный бизнес (Альфа Банк, Билайн и Мегафон). Это позволило посмотреть на проблему со всех ракурсов. После краткого рассказали о себе и проектах, над которыми работали участники дискуссии, началось обсуждение особенностей и проблем крупных компаний в целом, а также нюансов внутренней организации и работы дизайнеров каждого из брендов. Вот некоторые из тем:

  • Внутреннее устройство у компаний, естественно, разное. У Яндекса многие дизайнеры находятся внутри продукта, у нас в Mail.Ru Group это чаще отдел. В случае Альфа-Банка и Билайна сочетание внутренней команды и работы с аутсорсерами. У Мегафона — практический полный аутсорс. По численности крупнее всего Яндекс — около 80 дизайнеров и еще пара десятков близких специальностей. В Mail.Ru Group около 40 человек занимаются веб- и мобильными продуктами, еще под 70 — в игровом подразделении.
  • Дизайнерских специализаций очень много и они зачастую пересекаются — исследования и аналитика, проектирование интерфейсов, визуальный дизайн и иллюстрации, верстка. Соответственно, и внутри компаний вчистую они не всегда встречаются — как правило, дизайнер совмещает несколько ролей.
  • В плане стандартизации интерфейсов используются самые разные подходы — гайдлайны, библиотеки паттернов, шаблоны и стенсилы в программах, дизайнерско-технологические фреймворки. Это, опять же, обусловлено структурой компании и тем, насколько давно она задумалась о системной работе над дизайном. Было интересно послушать предысторию появления БЭМ в Яндексе. Про наши инициативы по унификации я рассказывал в виде статей и презентаций (мобильный веб, контент-проекты, платформенное мышление). У Билайна и Альфа Банка также идет движение в сторону стандартизации.
  • Нет ли риска того, что при хорошо описанных и даже в чем-то жестких гайдлайнах дизайнеру станет скучно? Совсем нет — как только специалист начинает тратить меньше времени на рутину, у него появляется больше сил и внимания на сам продукт.
  • Интересным был вопрос о выкладывании гайдлайнов в публичный доступ. Особых страхов тут нет, но все сейчас активно внедряют и дорабатывают их, так что пока просто рано показывать.
  • На вопрос о процессе прохождения задачи было ответить достаточно сложно. В продуктовой компании он часто непредсказуемый — не всегда можно заранее сказать заранее, какой уровень проработки дизайна достаточен, когда функциональность или продукт готова к выходу на рынок. И хотя ориентир по рабочему процессу всегда есть, по факту многие задачи идут своим путем.
  • Много говорилось о том, как внедрять изменения в процессах большой компании, договариваться с людьми из других подразделений и специальностей. Особенно если прямо сейчас в них уйма, казалось бы, нерешаемых проблем — что особенно характерно в начале пути. У всех свои оказались рецепты. В этом контексте особенно интересен был вопрос о «серебряной пуле» — кто-то считает, что ее нет, у кого-то есть всегда срабатывающие методы.

Но лучше посмотреть видео-запись — вопросов и интересных обсуждений было намного больше:

Мы проводим UX-Среду уже четыре года — 13 июля 2011 года Алишер Якупов организовал первый обмен опытом в таком формате. Дальше мероприятием занимался уже я и все заладилось не сразу — следующие две среды были близки к провалу. Но когда мы получили добро от нашего HR-отдела на приглашение сторонних слушателей, открылось второе дыхание и все заиграло по-новому. У нас не было жестких рамок для докладчика — по ходу дела ему задавали вопросы, так что получался живой и бодрый диалог, а тема раскрывалась еще лучше.

В 2012 году мы попробовали себя в роли секции на конференции User Experience Russia, дальше эта традиция стала регулярной, в том числе на World Usability Day. А в конце прошлого года вместе с DepositPhotos перезапустили UX-Среду после некоторой паузы в формате сфокусированного дискуссионного клуба и это дало отличный эффект — посещаемость заметно выросла, так же, как и глубина раскрытия обозначенной темы.

За четыре года у нас побывало много сотен слушателей и 93 спикера:

Олег Андрианов (Одноклассники)
Олег Андрианов
(Mail.Ru Group)
Антон Артемов
Антон Артемов
(Wargaming, Mail.Ru Group)
Фил Ахназаров (Eviterra)
Фил Ахназаров
(Eviterra)
Тарас Бризицкий
Тарас Бризицкий
(DaisyDisk)
Алексей Быстров (Look at Media)
Алексей Быстров
(Look at Media)
Алекс Бурт
Александр Бурт
 
Иван Васильев (Альфа-Банк)
Иван Васильев
(Альфа-Банк)
Мария Васильева (UI Design)
Мария Васильева
(UIDG)
Юрий Ветров (Mail.Ru Group)
Юрий Ветров
(Mail.Ru Group)
Полина Выдрич (Mail.Ru Group)
Полина Выдрич
(Mail.Ru Group)
Максим Гапонов (Essential Commerce)
Максим Гапонов
(Essential Commerce)
Александр Гладких (Charmer)
Александр Гладких
(Charmer)
Артем Гладков (Mail.Ru Group)
Артем Гладков
(Mail.Ru Group)
Геворг Глечян (Mail.Ru Group)
Геворг Глечян
(Mail.Ru Group)
Ната Гредина (СКБ Контур)
Ната Гредина
(СКБ Контур)
Евгений Годов (Mail.Ru Group)
Евгений Годов
(Mail.Ru Group)
Влад Головач (Usethics)
Влад Головач
(Usethics)
Алексей Гореминский (ВТБ24)
Алексей Гореминский
(ВТБ24)
Константин Горский
Константин Горский
(Яндекс)
Антон Гугля (LinguaLeo)
Антон Гугля
(Lingua Leo)
Кирилл Данченко (Readymag)
Кирилл Данченко
(Readymag)
Макс Десятых (RedMadRobot)
Максим Десятых
(Red Mad Robot)
Платон Днепровский (UI Design Group)
Платон Днепровский
(UIDG)
Иво Димитров (InGenius Systems / UI Modeling Company)
Иво Димитров
(Ingenius Systems)
Ирина Ерохина (Localway)
Ирина Ерохина
(Localway)
Денис Ефремов (Тензор)
Денис Ефремов
(Тензор)
Евгения Жадяева (LinguaLeo)
Евгения Жадяева
(LinguaLeo)
Иван Замесин (Яндекс)
Иван Замесин
(Яндекс)
Николай Заярный (Eviterra)
Николай Заярный
(Eviterra)
Владимир Зимин (UI Design)
Владимир Зимин
(UIDG)
Дмитрий Зимин (Киноход, экс-Рамблер)
Дмитрий Зимин
(Киноход, Рамблер)
Леонид Ивахов (Билайн)
Леонид Ивахов
(Билайн)
Давид Исаханян (ТКС Банк)
Давид Исаханян
(Банк Тинькофф)
Дмитрий Кабанов
Дмитрий Кабанов
(Метрика)
Сергей Кадомский (Wargaming)
Сергей Кадомский
(Wargaming)
Катя Каминская (UI Design)
Екатерина Каминская
(UIDG)
Алексей Кандауров (Mail.Ru)
Алексей Кандауров
(Mail.Ru Group)
Дмитрий Киреев (Gentleman Interface)
Дмитрий Киреев
(Gentlemen Interface)
Александр Киров (Pebble)
Александр Киров
(Pebble, Mail.Ru Group)
Константин Кичинский
Константин Кичинский
(Microsoft)
Лола Кристаллинская (Яндекс)
Лола Кристаллинская
(Яндекс)
Светлана Круглова (EPAM Systems)
Светлана Круглова
(EPAM)
Александр Кудымов (Бухгалтерия Контур)
Александр Кудымов
(СКБ Контур)
Дмитрий Кулагин (Mail.Ru)
Дмитрий Кулагин
(Mail.Ru Group)
Алексей Кулаков (JetStyle)
Алексей Кулаков
(JetStyle)
Евгений Кулаков (Кулаков и Партнеры)
Евгений Кулаков
 
Алексей Копылов
Алексей Копылов
(Wargaming, UIDG)
Игорь Кочмала (КП)
Игорь Кочмала
(КП)
Дмитрий Лайер (ВТБ24)
Дмитрий Лайер
(ВТБ24)
Павел Либер (EPAM Systems)
Павел Либер
(EPAM)
Алексей Маркин (JetStyle)
Алексей Маркин
(JetStyle)
Юлия Мархадаева (Nimax)
Юлия Мархадаева
(Nimax)
Елена Махно (СКБ Контур)
Елена Махно
(СКБ Контур)
Татьяна Мисютина
Татьяна Мисютина
 
Иван Михайлов (Oktogo)
Иван Михайлов
(Oktogo)
Анна Михина (ТКС Банк)
Анна Михина
(Банк Тинькофф)
Семен Молотков
Семен Молотков
(СКБ Контур)
Игорь Мыслинский (UsabilityLab)
Игорь Мыслинский
(UsabilityLab)
Никита Обухов (Tilda)
Никита Обухов
(Tilda)
Максим Павлов (Notamedia)
Максим Павлов
(Notamedia)
Сергей Паранько (Mail.Ru Group)
Сергей Паранько
(Mail.Ru Group)
Павел Пашковский (Mail.Ru Group)
Павел Пашковский
(Mail.Ru Group)
Ярослав Перевалов (Мегафон)
Ярослав Перевалов
(Мегафон, RapidSoft)
Ирина Петрова (ICRE)
Ирина Петрова
(ICRE)
Юлия Петрунина (Бухгалтерия Контур)
Юлия Петрунина
(СКБ Контур)
Дмитрий Плотников (МегаПлан)
Дмитрий Плотников
(МегаПлан)
Дмитрий Подлужный (Spacebox)
Дмитрий Подлужный
(Spacebox)
Алексей Полехин (Нетология)
Алексей Полехин
(Нетология)
Антон Реппонен (Anton & Irene)
Антон Реппонен
(Anton & Irene)
Кирилл Романовский (Mail.Ru Group)
Кирилл Романовский
(Mail.Ru Group)
Всеволод Рымарь (Moyo.TV)
Всеволод Рымарь
(Moyo.TV)
Алексей Рытов (Digital Design)
Алексей Рытов
(Digital Design)
Илья Рудерман (Moscow Design Studio)
Илья Рудерман
(РИА Новости)
Алексей Сергеев (Mail.Ru)
Алексей Сергеев
(Mail.Ru Group)
Андрей Сикорский
Андрей Сикорский
(РИА Новости)
Павел Скрипкин (Mail.Ru Group)
Павел Скрипкин
(Mail.Ru Group)
Татьяна Смирнова (DepositPhotos)
Татьяна Смирнова
(DepositPhotos)
Алексей Соломатин (Digital October)
Алексей Соломатин
(Digital October)
Сергей Спивак
Сергей Спивак
(Одноклассники)
Наталья Спрогис (Mail.Ru Group)
Наталья Спрогис
(Mail.Ru Group)
Мария Сташенко (БВШД)
Мария Сташенко
(БВШД)
Ксения Стернина (Mail.Ru Group)
Ксения Стернина
(Mail.Ru Group)
Екатерина Умнова
Катерина Умнова
 
Степан Фролов (Pravoobladateli.ru)
Степан Фролов
(Pravoobladateli.ru)
Эдуард Цветцих (РБК)
Эдуард Цветцих
(РБК)
София Чебанова (Wargaming)
Софья Чебанова
(Wargaming)
Дмитрий Чута (Chapps)
Дмитрий Чута
(Chapps)
Денис Шепелев (Agima)
Денис Шепелёв
(Agima)
Денис Шершнев (Департамент Информационных Технологий Москвы)
Денис Шершнев
(Департамент Информационных Технологий г. Москвы)
Ярослав Шуваев (БВШД)
Ярослав Шуваев
(БВШД)
 
Дмитрий Щеглов (Сбербанк)
Дмитрий Щеглов
(Сбербанк)
Алишер Якупов (Одноклассники)
Алишер Якупов
(Одноклассники)
Антон Ярусов
Антон Ярусов
(Actis Wundermann)


В сентябре мы вернемся с новой серией :) Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с UX-Среды № 25, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

Микро-конференция UX-Среда №26: Дизайн-образование в России

$
0
0

30 сентября в офисе Mail.Ru Group прошла двадцать шестая микро-конференция UX-Среда, посвященная дизайн-образованию в России. Приглашенные гости, а также специалисты из разных подразделений компании выступили с серией презентаций о своем опыте работы и поучаствовали в его обсуждении. В этот раз у нас были Дмитрий Карпов (Британская Высшая Школа Дизайна), Лола Кристаллинская (Яндекс), Екатерина Ярмошевич и Алексей Полехин (Нетология), Jonathan Briggs (Hyper Island, в записи) и я от Mail.Ru Group. Модерировала дискуссию Таня Смирнова.

Микро-конференция UX-Среда №26: Дизайн-образование в России

Jonathan Briggs (Hyper Island)

В этот раз у нас сорвался телемост с западным спикером, поэтому Jonathan Briggs, со-основатель Hyper Island, записал специальное видео о школе вместе с Таней Смирновой, ее выпускницей.

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

Микро-конференция UX-Среда №26: Дизайн-образование в России

Дмитрий Карпов (Британская Высшая Школа Дизайна)Екатерина Ярмошевич (Нетология)Алексей Полехин (Нетология)Лола Кристаллинская (Яндекс)Юрий Ветров (Mail.Ru Group)

Эксперты представляли разные подходы компаний — более-менее привычный формат образования (Британка и Hyper Island), онлайн-курсы (Нетология), специализированные форматы внутри компаний (Яндекс и Mail.Ru Group). К сожалению, не доехал Денис Мосин из ИКРЫ. Это позволило посмотреть на проблему со всех ракурсов. После краткого рассказали о себе и задачах школы, началось обсуждение того, какие дизайнеры вообще востребованы сейчас и как научить их правильному видению профессии и необходимым навыкам, а также особенностей каждого из подходов. Вот некоторые из тем:

  • Британка предлагает четыре формата: интенсивы на неделю-полторы, которые дают возможность погрузиться в профессиональную тематику и решить, стоит ли идти на полноценный курс; британское высшее образование; российское дополнительное образование; декады, для того чтобы опытные специалисты могли попробовать новые для себя вещи. Недавно запустили курсы по дизайну для школьников и подростков. А в дополнение ко всему этому готовится формат корпоративного обучения под нужды конкретных компаний и дистанционные решения. Кроме того, есть дружественные школы по другим тематикам — Scream School, Московская Архитектурная Школа и Школа Кино.
  • Школу дизайна Яндекса закончили 30 человек (780 заявок, 70 собеседований, 32 поступивших). Из них компания наняла 12, включая одного из самых молодых отечественных дизайнеров — Гарри, ему 16 лет. Очень крутой пример для всех, кто только начинает в профессии. Хотя нанять 100% обучившихся задачи нет — это в любом случае прокачивает рынок, что помогает в долгосрочной перспективе. Подготовка материалов для школы и ее проведение потребовали огромного количества сил, в этом участвовало 45 человек. Но выхлоп сильный, в том числе по количеству нанятых специалистов. Компания опубликует учебные материалы в открытом доступе, причем уже сейчас они здорово помогают и для прокачки дизайнеров внутри.
  • У Нетологии два формата обучения — месячные вебинары по UX/UI и веб-дизайну в целом, а также библиотека отдельных курсов. В качестве эксперимента они также запустили воркшоп, где учащиеся под контролем экспертов делают какой-то проект.
  • Hyper Island иногда называют Гарвардом в мире digital. Это бизнес-школа, которая ориентирована на технологический подход, в том числе в дизайне, для того чтобы подготовить компании к disruption отраслей. Студенты работают над реальными проектами реальных компаний, что позволяет накопить неплохое портфолио. Кроме того, они делают упор на переносимые навыки, которые применимы в любой отрасли к любому проекту, т.е. пытаются сделать знания универсальными.
  • У Mail.Ru Group нет большого потока найма — дизайнеры нанимаются более точечно, поэтому своя школа пока не нужна. Но мы сильно вкладываемся в повышение кармы в проф.среде, поэтому делаем много конференций — это тоже хороший способ получения знаний. Еще один формат — совместные программы для айтишных ВУЗов (Бауманка, МГУ), которые учат разработчиков и менеджеров правильно работать с дизайнерами. И последнее — конкурсы (Russian Design Cup и отдельные), которые дают возможность специалистам прокачать свои навыки с помощью более-менее реальных задач и собрать базовое портфолио. Это большая проблема для начинающих дизайнеров, у которых мало практики — портфолио можно собрать либо стажировками, либо непрошенными редизайнами, либо реальными проектами (которые как раз дают неохотно). Одноклассники каждый год нанимают одного из призеров.

Но лучше посмотреть видео-запись — вопросов и интересных обсуждений было намного больше:

Микро-конференция UX-Среда №26: Дизайн-образование в России

В последние годы образовательных форматов все больше и больше. Жаль, что Денис Мосин из ИКРЫ не смог доехать до нас, а также не удалось пригласить никого из Школы Стажеров Горбунова — они среди самых интересных и полезных. Из долгосрочных программ можно отметить Институт Бизнеса и Дизайна, Школу Дизайна ВШЭ и Институт Стрелка. Востребованным оказался формат интенсивов и краткосрочных курсов — их делают, например, #tceh и Роман Черных. Отдельные темы предлагают те же Bang! Bang! Education, школа проектирования интерфейсов, не говоря уже о регулярных частных программах вроде Павла Колодяжного. Параллельно с этим развиваются онлайн-курсы для самостоятельной подготовки — почти одновременно их запустили Tilda и Readymag. И это не говоря об уйме конференций, многие из которых включают отдельный день мастер-классов. В общем, способов профессионально прокачаться уйма, на любой бюджет и объем свободного времени.

Мероприятие открытое — мы приглашаем не только докладчиков, но и слушателей из других компаний. Если вы хотите выступить у нас — пишите мне на y.vetrov@corp.mail.ru и мы выберем интересную тему рассказа и удобную дату для него. Узнать расписание и программу будущих мероприятий, а также записаться на них можно на странице микро-конференции в Фейсбуке.

Доступны фотографии с UX-Среды № 26, а также лента анонсов в Твиттере. Читайте также отчеты о предыдущих мероприятиях.

Интенсив по продуктовому дизайну от команды Mail.Ru Group в Британке

$
0
0

На прошлой неделе закончился интенсив по продуктовому дизайну в Британке, который курировали дизайнеры Mail.Ru Group. Мы уже несколько лет выступаем с лекциями и мастер-классами в БВШД, преподаём в образовательных программах в Бауманке и других университетах, а теперь упаковали всё это в целостный курс.

Интенсив Mail.Ru в Британке: Все сразу

Несколько лет назад Ярослав Шуваев запустил интенсив по UX&UI в Британской Высшей Школе Дизайна. Зимой и летом набирается группа из 30-40 студентов, которые в течение 8 дней плотной работы прокачивают свои навыки в продуктовом дизайне и делают учебный проект, показывающий полученные знания. Причём он оказался настолько популярным, что летний набор стали делить на несколько потоков, чтобы группам было работать комфортнее. В этом году один из этих потоков отдали курировать дизайнерам Mail.Ru Group (28 июня-6 июля)

Нам есть что рассказать о том, как современные подходы к дизайну интерфейсов позволили одной из крупнейших отечественных компаний совершить качественный скачок в своем развитии. Например, в течение нескольких последних лет был запущен международный бренд My.com, на собственную дизайн-систему переводятся целые линейки продуктов Mail.Ru Group, а мобильные приложения постоянно попадают в официальные подборки лучшего за год на Android и iOS. Конечно, есть ещё места, где компанию справедливо упрекают, но мы находимся в середине большого пути по масштабному обновлению. И многим компаниям, которые только начинают свой путь к систематизации дизайна, опыт лидера будет полезен.

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

День 0: Знакомство

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

Интенсив Mail.Ru в Британке: Вводная

Рассказ о курсе и Британке (Я.Шуваев и я, плюс представители Британки)

Ярослав Шуваев (БВШД)Юрий Ветров (Mail.Ru Group)

Презентация.

Основы психофизиологии (Я.Шуваев)

Ярослав Шуваев (БВШД)

Презентация.

Дизайн-процесс (Д.Осадчук)

Дмитрий Осадчук (Mail.Ru Group)

UX-стратегия (Ю.Ветров)

Юрий Ветров (Mail.Ru Group)

Роль продуктового дизайнера (Ю.Ветров)

Юрий Ветров (Mail.Ru Group)

Презентация учебных проектов и разделение на команды

Вторая задача дня знакомства — собрать команды учебных проектов. Сильная сторона интенсивов Британки в том, что приглашаются представители крупных отечественных компаний, за счёт чего задачи более реалистичны. У нас было 6 задач:

Интенсив Mail.Ru в Британке: Питчи: Фотки Mail.RuИнтенсив Mail.Ru в Британке: Питчи: ICQ
Интенсив Mail.Ru в Британке: Питчи: 2ГИСИнтенсив Mail.Ru в Британке: Питчи: Acronis
Интенсив Mail.Ru в Британке: Питчи: СбербанкИнтенсив Mail.Ru в Британке: Питчи: Moosic

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

День 1: Понимание проблемы

Второй день интенсива и первый день дизайн-спринта группа посвятила изучению пространства проблем. Если переложить расписание на модель двойного алмаза от British Design Council, то в этот день важно было продвинуться в понимании бизнеса, пользователей и их проблем, которые может решить потенциальный продукт. Иван Михайлов, который успел поработать проектировщиком интерфейсов и менеджером продукта, отлично провёл их по этому пути. В итоге группы получили ранжированный набор проблем, из которых выбрали наиболее ценные для бизнеса и пользователей. Их предстояло глубже проанализировать на следующий день.

Интенсив Mail.Ru в Британке: Понимание проблемы

Дизайн-мышление (Ю.Ветров)

Юрий Ветров (Mail.Ru Group)

Пользовательские исследования (К.Стернина)

Ксения Стернина (Mail.Ru Group)

Ожидания от продукта (И.Михайлов)

Иван Михайлов (Mail.Ru Group)

Сайд-проекты (И.Силкин)

Игорь Силкин (Mail.Ru Group)

День 2: Поиск гипотезы решения

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

Интенсив Mail.Ru в Британке: День 2
Интенсив Mail.Ru в Британке: День 2Интенсив Mail.Ru в Британке: День 2

Аналитика и исследования для дизайнеров (Ю.Ветров)

Юрий Ветров (Mail.Ru Group)

Креативные методики (Д.Осадчук)

Дмитрий Осадчук (Mail.Ru Group)

Быстрое прототипирование (Д.Осадчук и И.Силкин)

Дмитрий Осадчук (Mail.Ru Group)Игорь Силкин (Mail.Ru Group)

День 3: Концепция решения

Третий день дизайн-спринта — выбор решения, наиболее ценного для бизнеса и пользователей. Из пяти вариантов студенты определяют наиболее перспективный подход, а после этого более детально прорабатывают его. Появляется полный сценарий использования продукта, продумываются конкретные экраны, закладывается основа для финального решения. Практическую часть вели Артём Гладков, Андрей Сундиев и Слава Яшков.

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

Интенсив Mail.Ru в Британке: День 3
Интенсив Mail.Ru в Британке: День 3Интенсив Mail.Ru в Британке: День 3


Принципы работы команды (Ю.Ветров)

Юрий Ветров (Mail.Ru Group)

Гайдлайны и ограничения для веба и мобильных (В.Яшков, К.Зубанов и А.Гладков)

Слава Яшков (Mail.Ru Group)Костя Зубанов (Mail.Ru Group)

Версия с анимацией.

Артем Гладков (Mail.Ru Group)

Адаптивность (А.Гладков)

Артем Гладков (Mail.Ru Group)

День 4: Прототип решения

Четвёртый день дизайн-спринта — это создание детального прототипа решения, который будет проверяться вживую. Здесь наконец-то начинается работа с компьютерными дизайнерскими инструментами для создания макетов, прототипов и анимации. У продукта появляется визуальный стиль, характер, его можно пощупать вживую на устройстве. В плане знаний это один из самых нагруженных дней — очень много лекций. Практическую часть вели Костя Зубанов, Артур Касимов, Влад Поляков и Игорь Силкин.

Интенсив Mail.Ru в Британке: День 4
Интенсив Mail.Ru в Британке: День 4Интенсив Mail.Ru в Британке: День 4

Sketch (О.Андрианов)

Олег Андрианов (ВК)

Самоорганизация дизайнера и системный подход (А.Сундиев)

Андрей Сундиев (Mail.Ru Group)

Как справляться с хаосом (В.Поляков и А.Касимов)

Влад Поляков (Mail.Ru Group)Артур Касимов (Mail.Ru Group)

Анимация (И.Силкин и К.Зубанов)

Игорь Силкин (Mail.Ru Group)Костя Зубанов (Mail.Ru Group)

Версия с анимацией.

Прототипирование (К.Зубанов)

Костя Зубанов (Mail.Ru Group)

Версия с анимацией.

Каллиграфия, леттеринг, шрифт (М.Пономаренко)

Михаил Пономаренко (Mail.Ru Group)

День 5: Тестирование прототипа

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

Интенсив Mail.Ru в Британке: День 5
Интенсив Mail.Ru в Британке: День 5Интенсив Mail.Ru в Британке: День 5


Продуктовые метрики (И.Михайлов)

Иван Михайлов (Mail.Ru Group)

Юзабилити-тестирование (К.Стернина и А.Преображенская)

Ксения Стернина (Mail.Ru Group)Анна Преображенская (Mail.Ru Group)

Выходной

Программа курса очень плотная и помимо лекций и практической части, студентов приходится сидеть вечерами и ночами, для того чтобы хорошо продвинуться по задаче. Для этого в середине интенсива делается выходной, чтобы они смогли выходнуть и подготовиться к следующему рывку. Но мы не хотели разрывать дизайн-спринт, поэтому свободный день выдался ближе к концу. Как правило, студенты идут в гости в офис одной из компаний, представленных на интенсиве, и в этот раз они зашли в Mail.Ru Group.

Интенсив Mail.Ru в Британке: Экскурсия
Интенсив Mail.Ru в Британке: ЭкскурсияИнтенсив Mail.Ru в Британке: Экскурсия

День 6: Ретроспектива, улучшение продукта и подготовка презентации

После того как изучена продуктовая идея, сформулирована проблема и найдено решение, учебные группы готовятся к презентации и защите проекта. Им нужно уложить рассказ в 5-10 минут, предвосхитив многие из вопросов жюри. Сама подготовка презентации — ещё один повод улучшить прототип, ведь по ходу прогона рассказа регулярно всплывают нестыковки. Ну а поскольку этот день посвободнее остальных, команды имеют возможность сделать своё решение ещё лучше. Практическую часть вели Иван Михайлов и Костя Рубцов.

Интенсив Mail.Ru в Британке: Ретроспектива и улучшение

UI Kit и дизайн-системы для веба и мобильных (Ю.Ветров, А.Сундиев, В.Поляков, А.Касимов)

Юрий Ветров (Mail.Ru Group)

Андрей Сундиев (Mail.Ru Group)

Влад Поляков (Mail.Ru Group)Артур Касимов (Mail.Ru Group)

Дизайн-менеджмент (К.Рубцов)

Константин Рубцов (Mail.Ru Group)

Как презентовать проекты (И.Михайлов)

Иван Михайлов (Mail.Ru Group)

Финальный день: Презентация проектов

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

Интенсив Mail.Ru в Британке: Презентации
Интенсив Mail.Ru в Британке: ПрезентацииИнтенсив Mail.Ru в Британке: Презентации

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

Основы цифрового маркетинга (Я.Шуваев)

Ярослав Шуваев (БВШД)

Презентация.

Учебные проекты

Общая схема интенсива — лекции до обеда и практическая работа после. Для того, чтобы как-то снизить давление на студентов, мы старались вставлять во вторую половину дня перебивки — многочасовой мастер-класс лучше освежать. Набор разбивается на несколько групп, которые работают над учебными проектами. Результатом каждого дня должна стать подготовка к следующему — программа очень плотная и хвостов лучше не оставлять. Причём важно, чтобы они постоянно получали обратную связь от представителей проектов. Частая проблема студенческих работ в том, что они показывают промежуточный результат куратору ближе к концу, когда поздно что-то менять. Мы постоянно напоминали лидерам команд, чтобы они держали постоянную связь с продуктом — это ещё один важный аспект продуктовой работы, который нужно усвоить после интенсива.

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

2ГИС

У одного из ведущих отечественных картографических сервисов есть постоянная задача — актуализировать информацию о точках на карте. Сейчас компания платит агентам за обновление сведений, но ежегодные затраты приличные . Студенты должны были подумать над альтернативными решениями, которые позволят 2ГИС сэкономить.

https://readymag.com/565021

Сбербанк: Помощник

Банки активно думают в сторону персональных финансовых менеджеров, которые помогут клиенту эффективнее управлять расходами. Это повышает лояльность и лучше привязывает к компании. Команда должна была предложить своё видение такого продукта.

Интенсив Mail.Ru в Британке: Команда Сбербанка

Музыка Mail.Ru

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

Команда №1

Интенсив Mail.Ru в Британке: Команда Музыки №1

Команда №2

https://readymag.com/564688

Фотки Mail.Ru

Телефоны стали сумасшедшими генераторами фотографий и видео, так что их память моментально забивается (тем более, что наиболее популярны модели с минимальным объемом встроенного хранилища). Эту проблему решают как встроенные в платформу облачные сервисы, так и сторонние. Но в их работе есть много мелких проблем, которые портят впечатление. Студенты должны были предложить более аккуратное решение, где пользователь никогда не думает о свободном месте на устройстве.

Интенсив Mail.Ru в Британке: Команда Фоточки

ICQ

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

Интенсив Mail.Ru в Британке: Команда ICQ

Acronis: Memoir

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

Интенсив Mail.Ru в Британке: Команда Acronis

Итоги

Хотя для нас это не первый опыт создания и проведения целостной учебной программы, впервые мы сделали это большой группой дизайнеров. Среди преподавателей были дизайнеры разных подразделений Mail.Ru Group, которые редко взаимодействуют между собой по рабочим вопросам. Мы научились лучше координироваться друг с другом, что поможет и в основной работе — в каком-то смысле это получился небольшой тим-билдинг. А также прокачали навыки выступлений, ведь для многих это были первые презентации — они крепкие практики и им есть чем поделиться.

Получилась хорошая современная программа по продуктовому дизайну, которую мы хотим доработать и использовать для обучения внутри компании. Для того, чтобы качество продуктов становилось ещё выше, важно повышать общую культуру дизайна. Это значит, что базовые навыки хорошего дизайна должны быть у всех участников продуктовой команды — менеджеров, разработчиков, тестировщиков, маркетологов. Тогда экспертиза компании поднимется на новый уровень — я рассказывал об этом в серии презентаций о UX-стратегии.

Спасибо Ярославу Шуваеву, основателю интенсива, за возможность сделать этот курс. А также студентам, которые выкладывались по полной и горели глазами по ходу всех 8 дней. Ну и, конечно, всей нашей команде преподавателей: Ксения Стернина, Иван Михайлов, Олег Андрианов, Артур Касимов, Влад Поляков, Митя Осадчук, Артём Гладков, Андрей Сундиев, Слава Яшков, Костя Зубанов, Анна Преображенская, Игорь Силкин, Константин Рубцов и Михаил Пономаренко.

Dribbble Meetup 2016 в Москве

$
0
0

21 мая в Москве прошел Dribbble Meetup 2016. На этой неформальной конференции для дизайнеров выступили полтора десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Команда Framer, Денис Шумов (M18), Андрей Гаргуль (Shopify), Глеб Кузнецов (Fantasy Interactive), Александр Лагута (m—2—h), Николай Березовский (Альфа-Лаборатория), Рустем Мусабеков (Raindrop), Евгений Долгов (Mail.Ru Group), Миша Петрик и Женя Юдин, Сергей Андронов (Hungry Boys), Олег Андрианов (ВКонтакте), Михаил Пономаренко и Андрей Сундиев (Mail.Ru Group) и Олег Чулаков. Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.

Moscow Dribbble Meetup 2016

Вместе с Олегом Андриановым мы проводим митап уже в пятый раз при поддержке Mail.Ru Group и Dribbble, а в этом году подключился ещё и Андрей Сундиев. Московский митап — один из самых крупных в мире. За пять лет на сцене выступили 63 спикера, а гостей набралось несколько тысяч. В этот раз мы побили все рекорды — в зале побывало 900 гостей (до 600 одновременно), онлайн-трансляцию смотрело около 9000 человек, на афтепати было около 130. Неплохой рост: 70 в 2012 году, 400 в 2013, 550 в 2014 и 600 в 2015. Третий год мероприятие проходит в офисе Mail.Ru Group.

Денис Шумов (M18)

Программу открыл Денис Шумов из питерской студии M18, который победил в сразу в двух конкурсах для дизайнеров от Mail.Ru Group — Russian Design Cup 2015 и запущенном ICQ на Dribbble. Он рассказал о своих работах и том, чему его научило выполнение задач в сжатые сроки. Этот опыт очень полезен в основной работе, так что, помимо призов, конкурсы — хорошая возможность прокачать свои навыки. Денис чуть не выиграл ещё один приз, за лучшего рассказчика на митапе.

Андрей Гаргуль (Shopify)

Следующим был Андрей Гаргуль из канадской Shopify, который рассказал об опыте продуктовой работы в компании.

Глеб Кузнецов (Fantasy Interactive)

Глеб Кузнецов, который с недавних пор работает в калифорнийском офисе Fantasy Interactive, описал подход компании к работе над проектами.

Александр Лагута (m—2—h)

Александр Лагута из питерской студии m—2—h дал советы по работе с Dribbble как площадкой для продвижения компании. У компании очень характерный стиль и многим слушателям было просто приятно увидеть Сашу вживую.

Николай Березовский (Альфа Лаборатория)

Закрыл первую половину дня Николай Березовский небольшим мастер-классом по работе с Flinto. В прошлом году инструмент переродился и стал мощнее в плане средств анимации. Коля пошагово показал, как создать и оживить прототип.

Рустем Мусабеков (Raindrop)

После обеда Рустем Мусабеков рассказал о том, как он развивает собственный продукт Raindrop. Он занимается и дизайном, и разработкой, и маркетингом очень неплохого сервиса хранения закладок — это отличный пример для всех продуктовых дизайнеров.

Koen Bok (Framer)Jorn van Dijk (Framer)

Koen Bok, один из создателей Framer, приехал к нам вместе со-основателем Jorn van Dijk. Он рассказал об инструменте, своём видении современной роли дизайнера и новой версии Framer, которая значительно снизила порог входа. Куна засыпали вопросами в конце рассказа — продукт на слуху и многим интересен. Сами Koen и Jorn вкладывают в это немало сил, поощряя митапы и мастер-классы по всему миру.

Евгений Долгов (Mail.Ru Group)

После этого Евгений Долгов из Mail.Ru Group подробно описал поиски единого стиля иллюстраций, к которому мы пришли в прошлом году. Он должен быть характерным, при этом масштабируемым и без проблем воспроизводиться другими дизайнерами. Женя перебрал много подходов и идей прежде чем найти подходящий стиль.

Миша ПетрикЕвгений Юдин

Лучшим выступлением по мнению слушателей стало небольшое шоу Миши Петрика и Жени Юдина об их прошлогоднем проекте пиксельных иллюстраций к фильму Mad Max. Рассказ получился душевным и угарным — как раз таким мы видим идеальный формат для Dribbble Meetup.

Сергей Андронов (Hungry Boys)

Последнюю секцию начал Сергей Андронов из Hungry Boys. Недавно он стал членом жюри премии FWA, что здорово помогает насмотренности и взвешенному подходу к оценке дизайнерских работ. Сергей рассказал о том, как работает FWA, в чём её отличия от других популярных наград и как они помогают студиям и дизайнерам в продвижении.

Олег Андрианов (ВК)

Олег Андрианов из Вконтакте рассказал о своём рабочем процессе и инструментах. Он показал, как правильно настроить связку Sketch, Craft и инструментов прототипирования для работы команды над несколькими продуктами.

Андрей Сундиев (Mail.Ru Group)Михаил Пономаренко (Mail.Ru Group)

Михаил Пономаренко и Андрей Сундиев из Mail.Ru Group подключились в этом году к организации Dribbble Meetup и сделали шикарнейшую каллиграфическую айдентику. Они рассказали о том, как пришла идея использовать кириллическую вязь, как доводили её до ума и применили для большого количества промо-материалов и сувенирки — в этом году мы побили свой рекорд по свэгу.

Олег Чулаков

Закрыл программу Олег Чулаков подробным рассказом о работе с интерфейсной анимацией — у нас получилось пригласить его с третьей попытки. Студия Олега давно и активно занимается этой темой, что постоянно выливается в кучу наград и интересных проектов. Несмотря на то, что расписание сильно уехало и было достаточно поздно, значительная часть слушателей оставалась до конца.

В этот раз вообще попробовали много нового — более целостную айдентику, дизайнерское пиво, лучшее оформление сцены, фургон с едой, трансляция со сразу опубликованной записью, бот-помощник, официальная страница в VK, другой подход к подбору спикеров, больше электронного swag. Хотелось ещё больше — не успели с визуальной инсталляцией, не осилили мастер-классы по Framer и Sketch во второй день, зря не стали давать спикерам по 45 минут вместо получаса, фургон по факту оказался так себе. Но, видимо, не всё сразу 🙂

Moscow Dribbble Meetup 2016
Moscow Dribbble Meetup 2016Moscow Dribbble Meetup 2016

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

Moscow Dribbble Meetup 2016
Moscow Dribbble Meetup 2016Moscow Dribbble Meetup 2016

Именно подход «каждый раз чуть больше, чуть лучше» позволил нам вырасти из партизанского междусобойчика в одну из крупнейших дизайн-конференций в России. В следующем году мы, наверное, скорректируем формат чуть заметнее — уже есть идеи и желание исправить основные косяки. Но митап всё также пройдет в субботу в конце мая — например, 27 числа. Следите за анонсами в Фейсбуке, Твиттере, VK, Телеграме и на сайте мероприятия.

Moscow Dribbble Meetup 2016
Moscow Dribbble Meetup 2016Moscow Dribbble Meetup 2016

P.S. Спасибо всем, кто выступал и пришёл послушать — именно вы сделали этот митап. В плане организации в этом году к нам с Олег Андрианов подключился Андрей Сундиев — он вместе с Михаил Пономаренко сделал айдентику и привёл её в жизнь на всех направлениях. Ничего этого не было бы возможно без нашей безумно крутой команды внутренних мероприятий, и особенно Ася Лабунская — она всегда топит за нас и помогает реализовать новую идею в последнюю минуту, вместо того чтобы направить лесом 🙂 Команда администраторов с Сергеем Черепковым, административная служба с Анной Латкиной-Турковой — на них держится вся инфраструктура события.

P.P.S. Отдельное спасибо нашим спонсорам, предоставившим призы для участников:

  • Bohemian Coding за лицензии на Sketch.
  • Koncept за лицензии на инструмент прототипирования.
  • MacPaw за лицензии на Clean My Mac 3 и Gemini.
  • Uber за скидки для участников на поездку на афтепати.

Курс Future London Academy 2016 по UX и продуктовому дизайну

$
0
0

В марте прошлого года я попал на курс Future London Academy по Human-Centered Design и это стало одним из самых ярких впечатлений среди всех посещённых мероприятий по дизайну. В течение недели мы ходим в гости к дизайн-студиям и командам продуктовых компаний, которые в естественной среде рассказывают о своей работе — проектах и продуктах, процессах и управлении ими, культуре и вещах, которые её формируют. В августе 2016 курс вышел на новый уровень — в программе был супер-звёздный состав из ustwo, Unit9, Design Studio, Facebook, Fjord, Foolproof, CXPartners, AKQA, SkyScanner, Telegraph, Barclays и Badoo.

Future London Academy 2016

Future London Academy 2016Future London Academy 2016


Мне так запала в душу первая поездка, что я стал куратором программы по UX и продуктовому дизайну в этом году. Потом, правда, опомнился — подготовка началась в сентябре-октябре 2015 года и съела огромное количество времени и сил, потому что договориться о визите и лекции оказалось нереально сложно. Но возможность собрать программу мечты включила режим слабоумия и отваги, так что вместе с основательницей FLA Екатериной Соломеиной мы сумели достучаться до многих ведущих компаний.

Future London Academy 2016

Future London Academy 2016Future London Academy 2016


Курс охватывал темы, наиболее актуальные в последние годы: UX-стратегия, связка бренда с интерфейсом, автомобильные интерфейсы, виртуальная реальность, умные помощники и алгоритмы, дизайн-менеджмент и построение дизайн-культуры. Знания из разной среды — современные продуктовые компании, классические организации с толковыми дизайн-командами, маленькие дизайн-студии и большие сервисные агентства. Я сделал дикое количество заметок и фото:

Дизайн-процессы и культура

  • Чуть ли не все компании используют дизайн-спринты для работы над сложными новыми функциями и продуктами. Польза от них для быстрого продвижения вперёд более-менее очевидна, а вот эффект для дизайн-культуры осознают не все. В Facebook, например, это способ прокачки менеджеров — со временем каждый должен хотя бы раз побывать фасилитатором дизайн-спринта.
  • Вообще, эффект внутренней дизайн-культуры особенно хорошо заметен на крупных и успешных компаниях. Facebook, например, очень децентрализован и продуктовые процессы максимально гибкие. Казалось бы, такой сложный механизм должен управляться более чётко, но по факту единство достигается благодаря тому, что все разделяют общее мировоззрение «hack culture». Хочешь сделать продукт? Просто найди пару коллег и возьми на себя, дальше всё может получиться. Дальше работа небольших групп клеится в целостный продукт благодаря хорошей инфраструктуре и лидерству. Это же заметно и в ustwo — все три этажа лондонского офиса просто один большой манифест постоянным экспериментам и выбросам дизайнерской мысли, которая постепенно превращается в прорывные вещи. Кстати, на эту тему у меня через пару недель выйдет четвёртая статья из серии про UX-стратегию, там про дизайн-культуру огромный кусок.
  • Проектно-продуктовая работа строится по принципу кросс-функциональных команд. Это само по себе не новость, но всегда интересно смотреть, как именно устроено это взаимодействие. Например, в Facebook это XFN (crossfunctional network), Badoo использует подход, аналогичный Твиттеру (есть команды функций (платежи, сообщения и т.п.), а есть платформ (iOS, Android, WinPhone) и они должны синхронизироваться), SkyScanner и Telegraph — аналогичный Spotify. Noel Lyons из Barclays говорит, что UX — ответственность каждого, не только дизайнера. Не важно, что UX-дизайнер хорошо поработал, если дальше это плохо реализовали — итоговый UX продукта плохой. Noel не любит акронимы UX, UI и прочие — они менее понятны другим специалистам, лучше говорить просто о дизайне.
  • Ко-дизайн вместе с продуктовой командой, клиентом и пользователем — это вообще один из главных инструментов, позволяющих создавать сильные и яркие продукты, не теряя этого запала до реализации. Для того чтобы усилить погружение в продукт и наглядность процесса для всех его участников, некоторые компании воссоздают среду пользователя. Например, Design Studio соорудили у себя в офисе апартаменты Airbnb, а AKQA — тренировочный зал для работы над приложением Nike . Design Studio: По словам James Hurst, это поддерживает «очень атлетичную работу левого и правого полушарий».
  • У Foolproof мощный фреймворк по UX-стратегии, о котором Tim Loo уже пару лет рассказывает на конференциях. Было интересно послушать о нём вживую, хотя лучше всего, конечно, посидеть часок у презентации с карандашом — информационная плотность очень высокая.
  • Как выглядит типичный процесс работы над проектом? Celia Romaniuk из Fjord говорит, что не бывает типичных проектов.
  • При работе с внутренними дизайн-командами клиентов Fjord помогают построить свои внутренние мощности — понять ценность дизайна, научиться правильно структурировать эти работы. Работа, которую выпускает студия, имеет долгую жизнь после этого и важно научить этому клиента. Можно помочь создать дизайн-команду, но, если не научить организацию правильному отношению к дизайну, она быстро умрёт.
  • Noel Lyons из Barclays говорит, что худший случай обращения к сторонним дизайн-студиям — когда у команды нет свободных рук, потому что это просто затыкание дыр. Второй худший — это не ключевая компетенция компании. Лучший вариант — желание «расширить мозг», получить свежие мысли и новые ожидания. Этому помогает наивность людей со стороны, их жадность до новых проектов и голод рассказать о себе, страсть к работе (хотя и с поправкой на слабые знания предметной обасти). В процессе они стараются взаимодействовать с аутсорсерами максимально плотно. При этом опасаются сетевых агентств — часто они просто аутсорсят работу суб-подрядчикам, а это вообще не имеет смысла — проще самому постучаться к ним напрямую. Лучше искать маленькие, интересные банды.
  • В Британии клиенты тоже хотят, чтобы под рождество на странице сайта шёл снег.

Методы и практики

  • Многие компании креативны в решении проектных задач, но полезно иметь свежий взгляд и на методы. Например, Design Studio постоянно придумывает новые подходы к рабочим сессиям с клиентом. Они используют фокусы, чтобы показать непонятные на первый взгляд процессы, которые на самом деле имеют объяснение и задача проекта — найти их; или импровизированную демонстрацию, где на плакатах показаны мысли потенциальных пользователей и можно посмотреть, трогают ли они клиента. Таких методов много и их общая идея — привязка основного посыла к наглядному и запоминающемуся якорю, что поможет не забыть ключевые принципы проекта в дальнейшей работе.
  • В прошлом году я заметил активное использование стен и временных стендов, на которых размещаются макеты, мудборды, сценарии, промежуточные результаты брейнштормов и другие проектные артефакты. В этот раз их было ещё больше и форматы использования — ещё разнообразнее. Например, SkyScanner плотно работает над своей дизайн-системой и в дизайнерской части офиса висит её полная раскадровка. Foolproof выделил для проектов «командные пункты», в каждом из которых идёт активная работа с клиентом по превращению продуктовой идеи в понимание пользователей и подходящих для них решений. В AKQA количество занятого на стенах пространства было вообще максимальным — канбан-доски, мудборды, текущие макеты и т.п.

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

  • Для меня особенно интересной была тема связки бренда с интерфейсом и она раскрылась особенно хорошо с историями про Airbnb, Skype, SkyScanner, Nike и немного Barclays. У этих продуктов простой и сильный посыл (грубо говоря, миссия в одном слове или предложении), который хорошо передаёт основное предложение бренда и здорово провязывается во всём, что делает компания — айдентика, рекламные материалы, интерфейс. Причём у Design Studio это не отдельная команда стратегов, а обычные дизайнеры, которые работают над проектом. В чём душа продукта, его ментальная модель для пользователя? Это один из главных вопросов, которым должны задаваться все продуктовые дизайнеры и который поможет сделать Minimum Lovable Product. Для тех, кто занимается айдентикой, это давно известные истины, но грамотных примеров провязки бренда в интерфейсе крайне мало — Skype, Google Material Design и ещё парочка. Зная общий посыл, можно удачно отразить его в деталях веб- или мобильного продукта так, что они поддержат бренд. Для Skype таким посылом был «together», для Airbnb — «belong anywhere», у Barclays — «help people to achieve their ambitions in a right way», SkyScanner хочет превратиться из просто калькулятора в помощника для путешествий, а Nike тонко понимает атлетов.
  • В продолжение темы пример Skype. Лого и вся айдентика Скайпа строилась на округлых формах, ведь в человеческом теле нет ничего прямого, а основной посыл бренда («together») как раз опирается на человечность. Это значило, что все элементы дизайна должны быть округлыми. Продукт также имеет очень запоминающиеся звуки и, что забавно, в их основе лежал также человеческий голос. Ещё одна составляющая айдентики — мощная и запоминающаяся анимация. Причём они сделали её задолго до того, как это стало трендом и это было достаточно радикально для своего времени. Для быстрого прототипирования и тестирования им пришлось написать плагин для AfterEffects, который экспортировал свойства анимации в JSON, а дальше эти параметры можно было использовать в любой среде — веб, нативная разработка и т.п.
  • SkyScanner активно работает над своей дизайн-системой Backpack (изначально ODS (Organic Design System)). Она строится по канонической схеме atomic design, но её особенность — очень сильная часть, посвящённая общим принципам взаимодействия с интерфейсом и «signature experiences». Они провели мощнейшее исследование пользователей и построили «геном путешественника», лежащий в основе customer journey map (или, в их случае, скорее customer journey cycle). Это видение определяет все их решения по взаимодействию с интерфейсом. Внедрение дизайн-системы началось с B2B-версии, что позволяет обкатать основные моменты перед переносом на основной продукт. Для работы над ней сформировалась группа дизайнеров под названием GLUE (аналогично Spotify).

Тренды

  • ustwo сделали много разнообразных проектов для автомобильной индустрии — приборная панель Citroen C-Cactus, приложения для Ford, Jaguar и других автомобильных брендов. Всё началось с их исследования и концепта несколько лет назад, благодаря которому они громко заявили о себе и с тех пор получают всё больше реальных проектов. Один из главных трендов — переход к общему понятию мобильности, когда автопроизводители ищут новые способы продажи, лизинга и аренды машин. Они покупают и инвестируют в кар-шеринговые компании и службы заказа такси, работают над автономным парком и т.п. Индивидуальное автовладение растёт не так быстро и где-то даже падает, так что многие изменения отрасли будут происходит в альтернативных способах доступа к авто и передвижения в целом.
  • Unit9 — одна из самых сильных компаний в плане опыта и понимания UX виртуальной реальности. Их рассказ — настоящее золото в плане множества тонких аспектов и деталей пользовательского взаимодействия в этой новой среде. Yates Buckley должен опубликовать видео своего выступления, посвящённого трём аспектам — видео 360, игры и развлекательно-обучающим проектам. Последнее особенно интересно, поскольку человеческий мозг неплохо учится в виртуальной среде. Например, среди молодых хирургов процент ошибок у первых операций упал с 15-50% до 1% за счёт виртуальной практики. А AKQA сделали симуляцию с проекцией для сложного трюка с парашютистом, пролетающим мимо двух колонн. Оказалось, что эта штука обманула его мозг и подготовила к настоящему прыжку. В США многие спортивные команды используют тренинги с шлемами VR для того, чтобы дать спортсмену почувствовать игровые моменты. Дальше тело лучше подготовлено к этому. Виртуальные и реальные ощущения тела часто одни и те же.
  • Giles Colborne из CXPartners подготовил шикарную презентацию по современным умным системам, предполагающим понимание и обучение алгоритмов дизайнерами. Они не отберут работу у тех, кто хочет развиваться, а наоборот, станут ещё одним инструментом. Он должен был рассказать о четырёх сферах применения алгоритмов, но из-за накладки успел пройтись только по двум — упрощение пользовательского данных и поиск паттернов в данных. Его полная презентация.
  • Для Fjord покупка большой консалтинговой компанией Accenture в 2003 году стала возможностью выйти на новый уровень проектов. CEO Accenture был протагонистом студии и дизайна в целом, так что он дал место у стола принятия решений и всячески поддерживал, хотя и не понимал до конца самих дизайнеров («да вы там все траву курите!»). При этом руководитель Celia Romaniuk в Accenture сказала ей, что в компании полно хороших и плохих людей, так что надо держаться первых и не думать о вторых, тогда получится всё. В итоге Fjord стал катализатором изменений в компании, потому что наглядно показал, что можно делать, так что постепенно начали проникаться и другие подразделения. При этом они избирательно внедряют общие для Accenture вещи, чтобы сохранить исходную культуру Fjord — не используют систему грейдов, имеют отдельный маркетинг и другие активности, хотя и стараются интегрироваться по-максимуму. Важно уделять внимание менеджменту дизайна и ценности, которую он приносит. В результате люди становятся более образованными в дизайне и дизайн в целом сильно помогает в организационных изменениях.
  • У AQKA очень круто выстроена системная работа с новыми технологиями. Andy Hood, который отвечает за это, активно мониторит конференции вроде CES, Kickstarter, акселераторы стартапов. После этого они думают о том, как применить это к реальным проектам и стараются сразу же предлагать идеи клиентам. Для клиентов это возможность засветиться в теме раньше конкурентов, поэтому они охотно соглашаются на эксперименты. По его опыту, кривая Gartner Hype Cycle показывает скорее привычки и поведение людей, которые не сразу принимают новое, чем возможности и потенциал технологии.

В этом году собралась самая большая и интернациональная группа — 21 студент из Японии, Южной Кореи, Турции, Израиля, Индии, Британии, Финляндии, Голландии, Украины, Беларуси и России. Профессиональный срез — разброс от дизайн-менеджеров и просто цифровых дизайнеров до разработчиков и пром.дизайнеров, которые хотели расширить свои навыки. Общаться было здорово — незамыленные взгляды на рассказанное в основной программе помогали находить интересные грани, да и в целом проведённое вместе время было ещё бодрее. Ещё одна особенность курса — студенты живут в нескольких домах по соседству и постоянно собираются на завтраки вместе. Получается что-то вроде кампуса, где достаточно времени на неформальное общение, чтобы поделиться впечатлениями и просто лучше сдружиться, ведь в комфортной и дружелюбной среде лучше фокус на знания.

Future London Academy 2016

Future London Academy 2016Future London Academy 2016


Я уже несколько лет занимаюсь конференциями и митапами, но этот опыт кураторства оказался совсем новым. Одно дело работать на понятном местном рынке и совсем другая история — достучаться до компаний и спикеров издалека. Спасибо Кате Соломеиной и Moe Hussain, которые поверили в меня и помогли добить программу до итогового впечатляющего состояния. Помимо полезных инсайтов для улучшения работы моей команды и контактов для обмена опытом, мне теперь будет проще делать мероприятия по дизайну в Mail.Ru Group — планка внутреннего уровня качества поднялась ещё выше. Бесконечное количество потерянных вечеров были не напрасными.

Future London Academy 2016

Уже известны даты следующего года — 14-20 августа 2017. И хотя состав лекторов ещё не готов, в шорт-листе этого сезона осталось немало мощных имён, в которые обязательно хочется попасть — StinkDigital, BBC, GOV.uk, Google, Territory, frog, IBM, Marvel, The Guardian, Moving Brands, Native Design, UserZoom, Shazam, AOL, Microsoft, Clearleft, RealMac Software, ASOS, Lonely Planet, R/GA и многие другие. Следите за анонсами на сайте Future London Academy, в Фейсбуке или Твиттере. Это будет не менее впечатляюще.

UX-стратегия. Часть 6 — Внедрение

$
0
0

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

  1. Уровни зрелости дизайна в компании
  2. Роль продуктового дизайнера
  3. Дизайн-система как способ управления качеством интерфейса продукта и скоростью выхода на рынок
  4. Организация работы дизайнеров и построение дизайн-культуры
  5. Целеполагание через аналитику и исследования

Модель зрелости UX. Стратегический уровень

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

Статья написана для журнала UXmatters (часть 2 появится позже).

Редизайн организации

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

Задача дизайн-лидеров — найти этот путь к светлому будущему и провести компанию по нему. Как выглядит системный подход к решению проблем в общем виде:

  1. Описать текущий интерфейсный и организационный долг, которые мешают создавать качественные продукты.
  2. Показать видение будущего — каким вы видите идеальный дизайн продуктов компании и что должно заработать для этого.
  3. Отметить, чему в продукте мешают текущие проблемы и что именно улучшат изменения. Это покажет их ценность для компании и продуктов.
  4. Оценить сложность изменений — что нужно сделать внутри дизайн-команды и в организации в целом, чтобы светлое будущее наступило.
  5. Определить этапы внедрения изменений — первоочередные, средне- и долгосрочные.
  6. Начать включать изменения в общий план работ и отслеживать их свершение и широко рассказывать о позитивных изменениях.

По мере продвижения произойдут несколько приятных вещей. Работать станет легче — починятся процессные проблемы и повысится кредит доверия. Общий уровень дизайна в компании вырастет — и в плане базового качества, и в плане возможностей делать сильные вещи в будущем. Ну а поскольку аппетит приходит во время еды, то и горизонт планирования изменений в дизайне расширится и захочется продвинуться вперёд ещё дальше.

Сложно начать идеально

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

Когда я пришёл в Mail.Ru Group в середине 2011 года, мой коллега Алексей Сергеев уже успел доказать топ-менеджменту важность хорошего дизайна. Его усилиями за пару лет появилась первая в подразделении дизайн-команда, началось юзабилити-тестирование, обновились несколько ключевых продуктов. Моей задачей было масштабирование успеха с новой командой, а Алексей ушёл заниматься продуктовой стратегией.

Правда, на деле оказалось, что, хотя важность хорошего дизайна и доказана топ-менеджерам, далеко не все менеджеры продуктов прониклись ей. Да и в целом на среднем уровне управления и среди конечных исполнителей нужно сформировать доверие к дизайнерам. Я осознал это не сразу. Приходя, я бравировал тем, что мы настроим рабочий процесс за месяц и дальше всё пойдёт как по маслу. Но постоянно находились какие-то мелочи, которые рушили понятные рабочие процессы, затягивали задачи, ломали планы и т.п.

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

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

Сейчас в команде 14 человек, отвечающих за примерно 20 продуктов — productivity (Почта, Облако, Календарь, Mail.Ru для бизнеса), медиа-проекты (Авто, Гороскопы, Дети, Добро, Здоровье, Леди, Кино, Медиатор, Недвижимость, Новости, Ответы, Погода, Спорт, ТВ, Hi-Tech, SEOSan), мобильные продукты (Beepcar, Artisto), главная страница и общепортальные правила для Mail.Ru и My.com. По сравнению с тем, что было шесть лет назад это немало, но если посмотреть на количество задач — нагрузка огромная. Именно поэтому мы топим за любые способы автоматизации процесса — дизайн-системы, алгоритмы, убирание ненужных этапов работ и т.п. Ограничения двигают дизайнерскую мысль и мы отлично научились работать с ними.

Мобильные приложения

Мобильные приложения сейчас: Почта My.com и Mail.Ru, Новости, Облако, Гороскопы, Beepcar и другие. Лидеры по загрузкам и рейтингам. Сейчас: Почта My.com и Mail.Ru, Новости, Облако, Гороскопы, Beepcar и другие. Лидеры по загрузкам и рейтингам
Мобильные приложения раньше: Единое приложение Агента, Почты и Карт для Symbian. Раньше: единое приложение Агента, Почты и Карт для Symbian

Медиапроекты

Медиапроекты сейчас: Дизайн-система, объединяющая 12 продуктов (остальные на подходе). Единый подход к интерфейсу, новые сервисы. Сейчас: дизайн-система, объединяющая 12 продуктов (остальные на подходе). Единый подход к интерфейсу, новые сервисы
Медиапроекты раньше: Каждый сам по себе, в не самом современном виде. Раньше: каждый сам по себе, в не самом современном виде

Мобильный веб

Мобильный веб сейчас: Дизайн-система, объединяющая 14 продуктов. Единый подход к интерфейсу, гарантирующий качество и скорость. Сейчас: дизайн-система, объединяющая 14 продуктов. Единый подход к интерфейсу, гарантирующий качество и скорость
Мобильный веб раньше: Несколько сервисов в аскетичном виде. Раньше: несколько сервисов в аскетичном виде

My.com

Новый бренд — проще делать хорошо без наследия, когда не нужно учитывать старые наработки.
My.com

Конечно, ещё не во всех продуктах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб, частично productivity-сервисы (и постепенно подключаются другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты.

Дизайн-система. Начали в 2012 году, с тех пор экономим уйму времени на запуске новых продуктов и функций. Дизайн-система — начали в 2012 году, с тех пор экономим уйму времени на запуске новых продуктов и функций
Единые иллюстрации. Сочный и современный стиль под кодовым названием «emotional flat 3D» усиливает бренд. Единые иллюстрации — сочный и современный стиль под кодовым названием «emotional flat 3D» усиливает бренд
Единые пиктограммы. Несколько сотен векторных пиктограмм в едином стиле. Постепенно выкатывается на продукты. Единые пиктограммы — несколько сотен векторных пиктограмм в едином стиле (постепенно выкатывается на продукты)
Письма рассылки. Единый подход с разделением на три ветки – промо, дайджест и сервисные. Письма рассылки — единый подход с разделением на три ветки (промо, дайджест и сервисные)
Промо-сайты. Яркие и сочные, хотя очень хочется добавить в них динамики. Промо-сайты — яркие и сочные, хотя очень хочется добавить в них динамики

А как насчёт…

Злой твит

Да, есть много сервисов, до которых у моего подразделения и других команд не добрались руки. Но доберутся.

Хотя хочется расстаться с прошлым одним решительным перезапуском, по факту это не всегда возможно и крайне рисково — полно историй необдуманных резких рывков, когда редизайн губил продукт и отталкивал пользователей. Поэтому лучше сначала превратить ад в адекват; из адеквата — сделать что-то современное и трендовое; а после этого уже можно думать о том, как задавать тренды самому. Тем более, что помимо обновления продуктов требуется невидимая снаружи работа по обновлению орг.структуры и производственного процесса — важно просто научиться выдавать хороший результат регулярно, на потоке, а не раз в несколько лет при следующем редизайне. Да, для начала изменений в дизайне зачастую необходима революция, но после этого он развивается эволюционным путём. Этот опыт перестройки процессов и продуктов лёг в основу серии статей о UX-стратегии.

Паттерны дизайн-менеджмента

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

Я собрал чек-лист улучшений, который поможет начать или ускорить изменения в вашей компании. Он основан на нашем пути и наблюдениях за историями изменений в других компаниях. Улучшения будут спускаться от проблем бизнеса к конкретным рецептам для дизайн-менеджеров: ценность для бизнеса → способ решения → паттерн. Паттерны привязаны к уровням зрелости (О — оперативный, Т — тактический, С — стратегический).

0. Осознание ценности дизайна

Ценность для бизнеса: Нулевой этап изменений — как показать бизнесу, что дизайн приносит пользу.

Критерии оценки:

  • Доверяют менеджеры. Они приходят с проблемой, а не готовым решением.
  • Доверяют конечные специалисты. Напрямую обращаются за решением рабочих проблем, минуя менеджеров.
  • Задачи приходят заранее, есть время продумать интерфейс.
  • Уменьшается количество итераций по задачам.

Симптомы проблем

Продукт:

  • Слабые или даже вредные дизайн-решения.
  • Разные экраны одного продукта выглядят и работают по-разному.

Организация:

  • Дизайнеры не имеют влияния на продуктовые решения.
  • Дизайнеры привлекаются к задачам в последний момент, «навести марафет».
  • Менеджеры и разработчики сами принимают дизайн-решения.

Способ решения → паттерн

Донести основы хорошего дизайна:

  • О: Лидер дизайна (часть 4)
  • О: Навыки аргументации, презентации и фасилитации
  • Т: Кредит доверия (часть 1)
  • Т: Карта лиц, принимающих решения
  • С: Ко-дизайн (часть 4)
  • С: Общая дизайн-грамотность (часть 4)
  • С: Адвокат дизайна среди топ-менеджеров

Наглядно показать проблемы:

  • Т: Юзабилити-тестирование, на которое ходит вся продуктовая команда (часть 5)
  • Т: Аналитика и эксперименты (часть 5)

Показать пользу дизайна на практике:

  • О: Быстрые победы (часть 6)
  • Т: Внутренний маркетинг успехов дизайна
  • С: Метрики дизайна, завязанные на бизнес (часть 5)

1. Качество продукта

Ценность для бизнеса: Повысить качество выпускаемого продукта, чтобы увеличить его ценность для пользователей и снизить затраты на поддержку.

Критерии оценки:

  • Достойное качество продукта в реализации, не только макетах.
  • Лучше отношение пользователей к продукту, что выражается в росте ключевых метрик.
  • Меньше ресурсов на поддержание приемлемого уровня качества.

Симптомы проблем

Продукт:

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

Организация:

  • Разработчики невнимательно реализуют макеты.
  • Дизайн выпускается раньше времени, до проверки качества реализации.
  • Дизайнеры выдают не до конца продуманные или неполные макеты, так что разработчикам приходится самим додумывать (а они не специалисты).

Способ решения → паттерн

Контроль качества на уровне макетов:

  • О: Ответственность шире, чем просто создание макетов (часть 2)
  • О: T-образные специалисты (часть 2)
  • О: Карта навыков и их развития (часть 4)
  • О: Дизайн-ревью командой (часть 4)
  • О: Общий инструментарий (часть 4)
  • Т: Креативные методики решения проблем (часть 4, 5)

Контроль качества на уровне реализации:

  • Т: Дизайн-система (часть 3)
  • Т: Чек-листы
  • Т: Экспертная оценка с возможность задержать релиз
  • Т: Юзабилити-тестирование (часть 5)
  • Т: Уменьшение интерфейсного долга (часть 6)
  • С: Влияние на продуктовый план (часть 5)
  • С: Повышение общей дизайн-культуры и внимательности разработчиков (часть 4)

Контроль качества на уровне продукта и компании:

  • С: Долгосрочное планирование (часть 4, 6)
  • С: Клуб дизайн-лидеров (часть 4)
  • С: Метрики дизайна, завязанные на бизнес (часть 5)

2. Скорость выхода на рынок

Ценность для бизнеса: Ускорить вывод новых функций и продуктов на рынок при соблюдении приемлемого уровня качества.

Критерии оценки:

  • Работы по созданию проектных артефактов отнимают меньше времени как за счёт сокращения общего срока, так и за счёт лучшего попадания в задачу.
  • Качество дизайна не страдает от ускорения.

Симптомы проблем

Продукт:

  • Запуск новых функций и продуктов отнимает много времени и сил.
  • Обновления существующих функций происходят редко.
  • При запусках и обновлениях страдает качество продукта.

Организация:

  • Непредсказуемое количество итераций по каждой задаче, что затягивает сроки и снижает вовлечённость.
  • Перекладывание ответственности за проблемы на других участников продуктовой команды.
  • Не хватает дизайнеров или у них нет нужных для продукта навыков.

Способ решения → паттерн

Уменьшение количества итераций:

  • О: T-образные специалисты (часть 2)
  • О: Карта навыков и их развития (часть 4)
  • О: Доверенные аутсорсеры (часть 4)
  • Т: Кредит доверия (часть 1)

Предсказуемость сроков и качества:

  • О: Планирование (краткосрочное и среднесрочное) (часть 4)
  • О: Общий инструментарий (часть 4)
  • С: Дизайн-система (часть 3)
  • С: Планирование (долгосрочное) (часть 4, 6)

3. Снижение рисков при выходе на рынок

Ценность для бизнеса: Повысить шансы на успех при запуске новых продуктов или функций уже существующих.

Критерии оценки:

  • Пользователи видят ценность нового продукта или функции для себя.
  • Пользователи понимают и успешно используют продукт.

Симптомы проблем

Продукт:

  • Продукт плохо принимается пользователями, активность в его использовании меньше ожидаемой.

Организация:

  • Принятие решений о том, каким должен быть продукт, происходит несистемно (слепое копирование конкурентов, паническая реакция на отклонение от ожидаемых значений метрик).
  • Менеджер продукта и команда не знают, насколько хорошо сработали решения.
  • Дизайнеры не имеют влияния на продуктовые решения.

Способ решения → паттерн

Поиск продуктовых решений с учётом разносторонних требований:

  • Т: Поиск альтернативных решений проблемы (часть 5)
  • С: Ко-дизайн (часть 4)
  • С: Общая дизайн-грамотность (часть 4)

Возможность проверить продуктовую гипотезу на раннем этапе:

  • Т: Ранние прототипы и методы их проверки (часть 5)
  • С: Разведочные пользовательские исследования (часть 5)

Сделать продукт более ценным и понятным:

  • Т: Юзабилити-тестирование (часть 5)
  • Т: Аналитика и эксперименты (часть 5)
  • С: Карта взаимодействия (Customer Journey Map) и оптимизация всех каналов (часть 5)
  • С: Метрики дизайна, завязанные на бизнес (часть 5)

4. Увеличение аудитории и прибыли продукта

Ценность для бизнеса: Повысить ценность продукта для существующих пользователей и привлечь новых.

Критерии оценки:

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

Симптомы проблем

Продукт:

  • Продукт не приносит прибыли или другой пользы компании.
  • Аудитория продукта стагнирует или падает.
  • Использование «тёмных паттернов» для увеличения прибыли.
  • Неудачные интерфейсные решения снижают эффективность работы пользователей.

Организация:

  • Принятие решений о том, каким должен быть продукт, происходит несистемно (слепое копирование конкурентов, паническая реакция на отклонение от ожидаемых значений метрик).
  • Менеджер продукта и команда не знают, насколько хорошо сработали решения.
  • Дизайнеры не имеют влияния на продуктовые решения.

Способ решения → паттерн

Продуктовые инсайты, исходящие от дизайнеров:

  • Т: Креативные методики решения проблем (часть 4, 5)
  • С: Метрики дизайна, завязанные на бизнес (часть 5)
  • С: Разведочные пользовательские исследования для поиска проблем и «окон возможностей» (часть 5)
  • С: Сегментация и другие способы оценки важности проблем для пользователей (часть 5)
  • С: База знаний об интерфейсе и пользователях (часть 5)

Кросс-функциональное взаимодействие:

  • Т: Уменьшение интерфейсного долга (часть 6)
  • С: Ко-дизайн (часть 4)
  • С: Карта взаимодействия (Customer Journey Map) и оптимизация всех каналов (часть 5)

Предсказуемость:

  • С: Планирование (долгосрочное) (часть 4, 6)

5. Усиление бренда

Ценность для бизнеса: Повысить лояльность существующей аудитории и привлечь новую.

Критерии оценки:

  • Интерфейс продукта усиливает лояльность пользователей к бренду.
  • Стоимость компании и привлекательность продукта повышается за счёт качественного дизайна.

Симптомы проблем

Продукт:

  • Интерфейс продукта слабо связан с брендом.
  • Разные продукты или даже разные экраны одного продукта выглядят и работают по-разному.

Организация:

  • Нет ответственного за развитие бренда.
  • Разные подразделения и продукты компании не взаимодействуют друг с другом.

Способ решения → паттерн

Единство бренда:

  • Т: Дизайн-система (часть 3)
  • С: Принципы дизайна, идущие от бренда (часть 3)

Кросс-функциональные команды:

  • С: Клуб дизайн-лидеров (часть 4)
  • С: Общая дизайн-грамотность (часть 4)

6. Найм и развитие дизайнеров

Ценность для бизнеса: Привлечь и удержать достаточное количество специалистов по дизайну нужной квалификации.

Критерии оценки:

  • Нужный специалист по дизайну уже есть или может подключиться к команде в приемлемые сроки.
  • Навыки дизайнеров соответствуют задачам компании в текущей и среднесрочной перспективе.
  • Дизайн стоит для компании адекватных денег.

Симптомы проблем

Продукт:

  • Слабые или даже вредные дизайн-решения.
  • Проблемы в интерфейсе не исправляются.

Организация:

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

Способ решения → паттерн

Закрытие текущих и будущих потребностей компании:

  • О: Лидер дизайна (часть 4)
  • О: Карта навыков и их развития (часть 4)

Привлечение более сильных дизайнеров:

  • С: HR-бренд

Планирование и отслеживание изменений

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

0. Портрет компании

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

Ресурсы:

  • Деньги: Как устроено бюджетирование (сколько дизайнеров можно нанять, есть ли бюджет на пользовательские исследования, бюджет на аутсорс).
  • Люди: Соотношение дизайнеров и разработчиков (оптимальные цифры, к которым нужно стремиться).
  • Время: В какой момент процесса работы над продуктом привлекаются дизайнеры.
  • Кредит доверия: Кому уже продали идею хорошего дизайна (топ-менеджмент, менеджеры продуктов, конечные специалисты (разработчики/тестировщики/маркетологи)).

Процессы:

  • Инициация продуктов и их новых возможностей: Какие уровни руководства, на базе какой информации (аналитика/исследования), как требования попадают к дизайнерам, как определяется успешность.
  • Дизайн и разработка: Структура команд, процесс, менеджмент.
  • Обеспечение качества: Методы, каков приемлемый уровень.
  • Дистрибьюция продукта: Каналы, их эффективность и стоимость на пользователя.
  • Поддержка пользователей: Каналы, удовлетворённость и CES (Customer Effort Score).

Приоритеты:

  • Тип продукта: Рынок (B2B, B2C или другой), платформа (сайт, приложение или другая).
  • Бизнес-модель: Ключевые метрики и как их оптимизировать.
  • Стадия жизненного цикла компании и продукта:
    1. Поиск подходящего рынка, продуктового решения и бизнес-модели для его монетизации.
    2. Рост пользовательской базы и/или прибыли.
    3. Удержание пользователей.
    4. Эффективность ведения бизнеса.
    5. Вывод продукта из кризиса, когда падают пользовательская база, прибыль или рыночная доля — всё сразу или что-то из них.

1. Ценность дизайна для бизнеса

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

Например:

Ценность сейчас через год
Качество продукта терпимо критично
Скорость выхода на рынок критично терпимо
Снижение рисков при выходе на рынок терпимо терпимо
Увеличение аудитории и прибыли продукта критично терпимо
Усиление бренда не важно терпимо
Найм и развитие дизайнеров терпимо терпимо
Осознание ценности дизайна терпимо терпимо

2. Интерфейсный и организационный долг

Теперь нужно описать интерфейсный и организационный долг. Первый покажет проблемы в продукте, второй — в организации, которая создаёт этот продукт. Для этого хорошо работают чек-листы и эвристики. Для оценки интерфейсного долга подойдёт шикарный шаблон от Kimberly Dunwoody и Susan Teague Rector или готовые чек-листы вроде 10 эвристик Якоба Нильсена. Для оценки организационного — описанные выше паттерны дизайн-менеджмента. Кстати, в моей концепции интерфейсный долг — сам по себе организационный паттерн.

Организационный долг:
Например:

Проблема или идея
Общая дизайн-грамотность: Тренинг для менеджеров и разработчиков
Медиа-кит по рекламным форматам
Описать интерфейсный долг
База знаний по трендам
Участие дизайнеров в продуктовых планёрках
Формат хакатонов
Именование файлов
Генератор иконок в SVG
Бенчмарки: Наши продукты и конкуренты

Интерфейсный долг:

Проблема или идея
Переделать предупреждение про регион
Перенести шаринг из левой колонки
Заменить пояс новостей на более ёмкий и простой
Оптимизировать врез киноафиши на главной
Убрать новости из истории просмотра
Улучшение интерфейсных текстов
Обменный пояс не на своём месте
Тянуть блок фильма до конца
Убрать ALL CAPS

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

3. Видение будущего дизайна

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

  • Концепты будущего дизайна продуктов.
  • Обновлённый бренд и визуальный язык.
  • Принципы дизайна для продукта, компании или дизайн-команды.

Они помогут «продать» сложные внедрения топ-менеджменту и продуктовой команде. Кроме того, там наверняка будет чем дополнить интерфейсный и организационный долг.

4. План внедрения

Список улучшений в интерфейсе и организации наверняка получится внушительным, особенно на ранних уровнях зрелости. Здесь нужны приоритеты — чем заниматься в первую очередь, а что даст отдачу в средней и долгой перспективе. Когда-то компания ещё не готова к методу или формату работы, а когда-то перерастает его.

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

Организационный долг:

Проблема или идея Ценность Уровень Сложность
Общая дизайн-грамотность: Тренинг для менеджеров и разработчиков качество
риски
бренд
С квартал
Медиа-кит по рекламным форматам качество
скорость
рост
Т месяц
Описать интерфейсный долг качество
риски
рост
Т месяц
База знаний по трендам риски
рост
С месяц
Участие дизайнеров в продуктовых планёрках скорость
риски
рост
Т месяц
Формат хакатонов скорость
рост
бренд
Т неделя
Именование файлов качество
скорость
О неделя
Генератор иконок в SVG качество
скорость
О квартал
Бенчмарки: Наши продукты и конкуренты качество
рост
С квартал

Интерфейсный долг:

Проблема или идея Метрики Пользователей затронуто, тыс. % Сложность
Переделать предупреждение про регион отношение 4 000 20% неделя
Перенести шаринг из левой колонки качество 20 000 100% месяц
Заменить пояс новостей на более ёмкий и простой деньги
качество
4 000 20% неделя
Оптимизировать врез киноафиши на главной деньги
качество
2 000 10% неделя
Убрать новости из истории просмотра деньги
качество
1 000 5% неделя
Улучшение интерфейсных текстов качество 20 000 100% неделя
Обменный пояс не на своём месте деньги 4 000 20% день
Тянуть блок фильма до конца качество месяц
Убрать ALL CAPS качество день

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

5. Реализация плана

Реализация плана изменений не так однозначна, как кажется из получившегося roadmap. Зачастую это непродуктовая работа, которая отвлекает время дизайнеров от основных задач, а не все менеджеры продуктов готовы на это. Кроме того, многие организационные изменения имеют отложенный эффект, так что время вы потратили сегодня, а ваше руководство увидит выхлоп сильно позже. Помогут две техники:

  • Чередовать «низковисящие фрукты» с долгосрочными инициативами. Первые будут показывать мгновенный эффект и помогут выиграть время на более сложные изменения, повышая кредит доверия.
  • Привязка процессных задач к продуктовым. Изменение лучше упаковывать вместе с реальной задачей по продукту — и проблема выделения времени решится, и на практике проверится.

Многие организационные изменения многогранны и требуют решения сразу нескольких разнородных задач, чтобы дать нужный эффект. Чтобы декомпозировать их и получить целостный, а не половинчатый эффект, их нужно решать в связке. В этом может быть полезен метод планирования по OKR (Objective Key Results). Мы выбираем три крупные темы на квартал (читай — комплексные изменения), каждую из них описываем в виде цели, решающей проблему, и метрик, показывающих успешность внедрения. Дальше делаем план из конкретных действий и идём по нему в ходе квартала. Это хороший способ сфокусировать и мобилизовать команду, чтобы интерфейсные и организационные изменения дали заметный выхлоп, а не просто по мелочи улучшили самочувствие.

Пример OKR:
Предсказуемо высокое качество дизайна на живых продуктах.

Цель: Запустить механизмы обеспечения качества.

Метрики:

  • Все баги и идеи по дизайну зафиксированы в Jira
  • Исправлен как минимум 1 баг на каждом из продуктов

Ключевые результаты:

  • На уровне макетов:
    • Чек-листы для проверки дизайна
    • «Свежий взгляд»: Проверка макетов одного дизайнера другим
    • Design Review всей командой
  • Перед выкаткой:
    • Design Review в Jira: Мобильные приложения
    • Design Review в Jira: Маркетинг
  • После выкатки:
    • Дизайнеры включены в рассылки о всех выкатках
    • Перевести все баги в Jira
    • Повторный Design Review продуктов каждый квартал
    • Задачи из Design Review попадают в продуктовый план
    • Инструкция о том, как описывать проблемы в ходе Design Review
    • Design Review после выкаток

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

Среднесрочные и долгосрочные планы полезно делать публичными. Это поможет сделать понимание проблем общим, заранее посвятить в них команду и менеджмент, а в идеале — зарядить их энтузиазмом по поводу того, каким может быть дизайн в компании. Мы используем два инструмента:

  • Стена будущего. Она показывает беклог интерфейсного и организационного долга, а также OKR в виде канбана.
  • Письма команде. Рассказ о текущих проблемах и планах по их решению.
Стена будущего Стена будущего

У многих компаний на ранних стадиях зрелости явных проблем будет выше крыши, так что можно просто брать первые попавшиеся и разбираться с ними. Но более осмысленный подход, когда у вас есть полная картина, позволит вам двигаться быстрее и лучше понимать долгосрочную UX-стратегию. План — хорошее начало для системной работы. Пускай даже его объём фрустрирует на первый взгляд — по мере продвижения по нему скорость внедрения изменений будет увеличиваться и вы сами удивитесь, сколько сил и мотивации прибавляется команде по ходу.

Как меняется дизайн в известных компаниях

За последние годы на рынке цифровых продуктов произошёл огромный рывок в плане институционализации дизайна. Как говорит Thomas Lockwood, если раньше конкуренция шла между продуктами с хорошим дизайном и не очень, то сейчас мы всё ближе к тому, что базовый уровень дизайна станет хорошим у всех. И вперёд вырвутся те компании, которые встроили дизайн на уровне общей культуры компании.

Критерии современной компании, ценящей дизайн

За последние годы появилось несколько интересных исследований, анализирующих успешные в плане дизайна компании на рынке. Хотя зачастую они отражают рынок США, цифровые продукты отличаются от страны к стране меньше, чем другие отрасли.

Исследования Leah Buley

Leah Buley провела в 2015 году для Forrester Research очень интересное исследование рынка. Она опросила 23 компании, чтобы узнать, как устроены их дизайн-команды. В результате у неё получилось выделить набор характеристик внутренней организации и вовлечённости в продуктовую работу, которые присущи наиболее сильным с точки зрения дизайна компаниям. Она подробно рассказывала о выводах на Interaction15, а в 2016 году провела повторный опрос (уже после ухода из Forrester). Вот некоторые из характеристик зрелых компаний:

  • Единый подход к дизайну по всей карте взаимодействия, не только цифровой части продукта (поддержка пользователей, офлайновые магазины и мероприятия, упаковка, «железо»).
  • Корпоративная, бренд- и UX-стратегия связаны.
  • Участие в определении продуктового плана.
  • Влияние на широкий спектр метрик с чётким пониманием отдачи от добротных дизайн-решений в деньгах.
  • Среднесрочное (как выпустить текущую версию) и долгосрочное видение продукта (его идеальное состояние).
  • Соотношение дизайнеров и разработчиков. Само по себе количество голов ни о чем не говорит, но такие цифры могут быть ещё одним индикатором зрелости. У лучших компаний отмечается 1:4, а абсолютный минимум для гармоничного развития — 1:12.
  • «Часы налёта» наблюдения за пользователями для всех участников продуктовой команды.

Nielsen/Norman Group

Похожий опрос среди 360 компаний провели Nielsen/Norman Group. Его результаты показывают, с какими проблемами внедрения зрелых практик дизайна на уровне компании сталкиваются дизайн-команды. Здесь также много полезных инсайтов. Например, дизайнеры чувствуют отдачу от своей работы в компаниях малого размера и там, где они в том или ином виде входят в дизайн-команду.

John Maeda

В 2015 году, будучи в KPCB, John Maeda выпустил свой первый отчёт о состоянии дизайна на рынке цифровых продуктов. В 2016 он ушёл из консалтинговой компании и теперь публикует отчёты от своего имени. В них много интереснейших цифр и фактов о том, какие инвестиции в дизайн и зачем делает бизнес, постепенно меняя отрасль.

Другие модели изменений

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

«Адаптивный дизайн»

Дизайн-мышление считается хорошей методологией для того, чтобы придумать будущее, но дальше все зачастую печально — оно так и остается красивым визионерством. А вот в связке с адаптивным лидерством, современным подходом к менеджменту, можно реализовать задуманное. Maya Bernstein и Marty Linsky предлагают методологию «адаптивного дизайна» на стыке дизайн-мышления и адаптивного лидерства, которая позволяет внедрять смелые идеи и изменения. Название, правда, не очень удачное, потому что занято responsive и adaptive-техниками работы с вереницей устройств и экранов.

Модель адаптивного дизайна от Maya Bernstein и Marty Linsky Модель адаптивного дизайна от Maya Bernstein и Marty Linsky

DesignX

Donald Norman в последние годы активно продвигает методологию DesignX для решения сложных социальных, экономических и политических проблем. Эта теория помогает перестраивать социо-технические системы пошагово, серией небольших изменений вместо одного масштабного редизайна. Такие инициативы требуют вмешательства в культурные особенности, методы и практики, реорганизацию рабочих групп разных специальностей, так что ожидаемо вызывают конфликты, в которых всплывает внутренняя политика. В результате требуется такое количество компромиссов и непредвиденных изменений курса, что «с наскока» можно прийти только к провалу. Поэтому нужно «есть слона по частям» и постоянно корректировать видение будущего. Эта теория отлично описана в его совместной статье с Pieter Jan Stappers.

Intuit

Интересный подход связки бизнес- и UX-стратегии использует Intuit. Она работает на трёх уровнях — миссия (дизайн как агент социальных изменений), компания (дизайн как подразделение и профессиональный навык) и продукт (дизайн добротных experiences).

Связка бизнес- и UX-стратегии в Intuit Связка бизнес- и UX-стратегии в Intuit

Подход «миссий» позволяет достичь долгосрочных целей, каждая из которых описывается на нескольких уровнях (ценности, цели, стратегия, приоритеты, метрики) и в идеале должна определять каждое продуктовое решение.

Структура "миссии" в Intuit

Подход "миссий" для реализации долгосрочных целей в Intuit Подход «миссий» для реализации долгосрочных целей в Intuit

Jeffrey Onken

В своём выступлении на UX STRAT USA 2016 Jeffrey Onken предлагает рассматривать этапы модели зрелости UX как обычную customer journey map. В таком виде гораздо проще обнаруживать и исправлять проблемы, мешающие созданию хорошего дизайна.

Justinmind

В своей книге «How to Make an Enterprise UX Friendly: A Quick Guide» компания Justinmind предлагает шаблон для описания UX-стратегии:

Шаблон для описания корпоративной UX-стратегии © Justinmind Шаблон Justinmind для описания корпоративной UX-стратегии

Kotter International

Теорий и моделей процесса изменений в классической теории менеджмента предостаточно. Например, 8-шаговый подход John Kotter.

Модель изменений Kotter International Модель изменений Kotter International

Leah Buley

Leah Buley толково описывает разницу между бизнес-стратегией и UX-стратегией, указывая на слабые места последней. Она имеет две трактовки:

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

В мастер-классе для UX STRAT USA 2016 она описывает свой подход к изменению дизайна в компаниях.

Leah Buley: Разница между бизнес- и UX-стратегией Leah Buley: Разница между бизнес- и UX-стратегией

OPPOSITE

Brian Solis использует методологию OPPOSITE для пошаговой цифровой трансформации компании:

  • Ориентация (Orientation) — Определить видение будущего, несущего осмысленные изменения.
  • Люди (People) — Понимание ценности для пользователей, их ожиданий и поведения.
  • Процессы (Processes) — Оценить оперативную инфраструктуру и обновить технологии, процессы и внутренние правила для поддержки изменений.
  • Цели (Objectives) — Определить цели цифровой трансформации, объединив всех принимающих решения вокруг нового видения и его плана внедрения.
  • Структура (Structure) — Сформировать выделенную команду с ясно очерченными ролями, ответственностью, целями и способами оценки.
  • Инсайты и намерения (Insights & Intent) — Собрать данные и использовать инсайты для уточнения стратегии эволюции.
  • Технологии (Technology) — Перестроить фронт- и бек-энд для обеспечения единого интегрированного UX.
  • Внедрение (Execution) — Внедрять, получать обратную связь и корректировать направление трансформации.

Rosa Wu и Jess McMullin

В этой публикации интересно всё — и то, что она делает акцент на понимании бизнеса правильными словами, и то что она выпущена аж в 2006 году. Rosa Wu и Jess McMullin описывают свой подход к изменениям, состоящий из трёх этапов:

  1. Найти партнёров среди топ-менеджмента, а после этого показать им ценность дизайна. Они станут спонсорами и евангелистами дизайна в компании.
  2. Запустить пилотный проект, который даст быстрые победы и покажет ценность дизайна на практике с минимальными рисками.
  3. Широко рассказать об успехе, чтобы все продукты и подразделения компании также увидели ценность дизайна на практике.

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

Salesforce V2MOM

Руководитель Salesforce Marc Benioff создал в компании методологию V2MOM для определения планов на будущее. Их пишет каждое подразделение и сотрудник, так что в итоге получается целостная цепочка управления от основных целей бизнеса к конкретным действиям, связывая все части стратегии вместе:

  • Видение (Vision) — Чего хочется достичь?
  • Ценности (Values) — Что важного в этой цели?
  • Методы (Methods) — Как достичь её?
  • Препятствия (Obstacles) — Что может помешать?
  • Метрики (Measures) — Как определить, что цель достигнута?

Общая идея очень похожа на OKR в её цельном виде.

Toyota Kata и Kaizen

Японские управленческие практики широко востребованы в последние десятилетия благодаря смеси простоты и методичности. Toyota использует 4-этапный подход «Kata» для перехода от текущей ситуации к будущему:

  1. Понимая видение будущего или общее направление изменений…
  2. Оценить текущую ситуацию.
  3. Определить следующую целевую ситуацию.
  4. Итеративно двигаться в сторону нового состояния, что позволяет постепенно находить и решать заранее неизвестные препятствия.

Darren Hood из Bosch рассказал на UX Strategies Summit 2015 о том, как использовать «Kaizen» для изменений в дизайне компании. Это, опять же, множество непрерывных небольших улучшений, каждое из которых увеличивает ценность для пользователей или снижает затраты компании. Причём по всем фронтам, не только в рамках самого продукта — обучение и мотивация сотрудников, отношения с пользователями и т.п.

Кейсы

Хотя всё больше компаний набирают оборот в плане переосмысления и систематизации дизайна, ярких эталонных кейсов не так много. Приведу ряд характерных примеров.

Accenture и Fjord

В 2013 году крупная консалтинговая компания Accenture купила известное дизайн-агентство Fjord. Celia Romaniuk, глава лондонского офиса студии, рассказывает, что CEO Accenture был протагонистом студии и дизайна в целом, так что он дал место у стола принятия решений и всячески поддерживал, хотя и не понимал до конца самих дизайнеров. При этом руководитель Celia в Accenture сказала ей, что в компании полно хороших и плохих людей, так что надо держаться первых и не думать о вторых, тогда получится всё. В итоге Fjord стал катализатором изменений в компании, потому что наглядно показал, что можно делать, так что постепенно начали проникаться и другие подразделения. При этом они избирательно внедряют общие для Accenture вещи, чтобы сохранить исходную культуру Fjord — не используют систему грейдов, имеют отдельный маркетинг и другие активности, хотя и стараются интегрироваться по-максимуму. Важно уделять внимание менеджменту дизайна и ценности, которую он приносит. В результате люди становятся более образованными в дизайне и дизайн в целом сильно помогает в организационных изменениях.

Правило масштабирования дизайна Fjord Правило масштабирования дизайна Fjord

Этот опыт интеграции они теперь используют в клиентских проектах — например, для их заказчика Commerzbank похожим катализатором изменений стало купленное дизайн-агентство, меняя банк изнутри.

Citrix

Компания создала роль вице-президента по продуктовому дизайну и начала изменения с пилотных проектов. Вместо того, чтобы навязывать необходимость редизайна всем подразделениям сразу (не все понимали ценность дизайна), они работали поочерёдно со всеми, кто был готов сам. Результаты первого пилота были настолько успешными, что остальные продукты тоже захотели поработать с толковыми дизайнерами. Они получили кредит доверия с помощью этого примера и с тех пор плотно работают с кросс-функциональными командами, чтобы добиться критических бизнес-целей. Как говорит Julie Baher, ваша задача — изменить операционную систему компании.

Coca-Cola

David Butler из Coca-Cola изучал принципы других компаний, которые научились использовать дизайн для решения стратегических задач. Он начал работать в команде брендинга и коммуникаций, затем перешёл в упаковку и оборудование, после этого в розничные продажи, а в конце — бизнес-операции, включающие дистрибьюцию и поставки. Хотя он тратит много времени на профессиональное дизайнерское развитие, он не использует слова вроде «дизайн-мышление» при общении с бизнесом, а старается говорить на их языке — все инициативы должны повышать продажи.

Eventbrite

Brian Beaver из Eventbrite рассказывает, как дизайн-команда смогла убедить руководство выделить ресурсы на создание дизайн-системы. Вместе с маркетологами и финансистами они посчитали, сколько стоит для компании запуск функций с текущим набором технологий и насколько более выгодным и быстрым станет новый подход.

Ford

Толковый рассказ Parrish Hanna, руководителя эргономики и пользовательского взаимодействия Ford, о том, как компания меняет себя. Одним из ключевых моментов была привязка улучшения UX к миссии компании — «делать жизнь людей лучше».

Google

Первая попытка привести в порядок линейку продуктов в 2007 провалилась, но когда главой компании в 2011 году стал основатель Larry Page, он сделал качественный UX одной из ключевых задач. Лидером изменений со стороны самого дизайна стал Matias Duarte, глава дизайна Android. Он здраво посчитал, что централизация дизайна в компании с таким количеством продуктов невозможна и собрал небольшую рабочую группу UXA. После того как они нашли сильную визуально-интерфейсную концепцию, эта команда работала с дизайнерами из конкретных продуктов для ее внедрения. Сейчас связь между командой визуального языка и продуктами работает в обе стороны — дизайнеры на полях привносят в общий котёл свежие паттерны и решения. А Matias выступает как евангелист объединения усилий разных команд под единым видением дизайна — во многом этому помогло его тесное общение с Larry Page и способность донести идеи до топ-менеджмента.

IBM

Глава IBM Virginia Rometty видела, что рынок корпоративного ПО меняется — вместо сложных внедрений на всю компанию, где решение часто принимает отдел ИТ-закупок, всё чаще конкретные функциональные подразделения оплачивают подписку на подходящий сервис, а они более требовательны к качеству продукта (включающем юзабилити). Главе недавно купленного стартапа Phil Gilbert, который был евангелистом хорошего дизайна, предложили масштабировать его лучшие практики на всю компанию. Он объявил достаточно амбициозную цель — нанять и обучить 1000 дизайнеров — но не ожидал, что это реально. Но он получил не только добро, но и неожиданный вопрос: как быстро можно осуществить этот план?

Всего в компании 400 000 сотрудников и централизация экспертизы невозможна на практике. Была сделана ставка на лабораторию-инкубатор в Остине (Техас), которая занимается проработкой типовых процессов, визуальным языком, обучением. В итоге основная цель — повышение общей дизайн-культуры в компании, «продажа» ценности дизайна менеджменту разных уровней, проведение рабочих сессий и мастер-классов для передачи знаний и опыта. Один из инструментов для этого — менторство.

Intuit

Серьёзное внимание пользователям в компании начали уделять в 2004 году с внедрением NPS. Но к 2007 году рост показателя замедлился — количество критиков уменьшить удалось, а вот евангелисты не появлялись. Основатель Intuit Scott Cook устроил 5-часовую лекцию о пользе дизайна для менеджеров компании, но не особо тронул их. Зато выступавший следом за ним Alex Kazaks провёл небольшой мастер-класс по решению проблем с помощью дизайна, который «зацепил» почти всех. Это послужило толчком к назначению Kaaren Hanson ответственной за распространение лучших практик по всей компании и Intuit запустили программу «катализаторов инноваций», которые помогали продуктовым командам улучшать UX, а после — делать это самостоятельно. Количество «катализаторов» с тех пор выросло, во многом благодаря поставленной цели — стараться делать как минимум 3-4 проекта в год с явным выхлопом.

PepsiCo

Mauro Porcini из PepsiCo считает ключевыми составляющими успеха дизайна в компании сильного дизайн-лидера, который способен объединить в целостную картину разные составляющие (бренд, промышленный дизайн, интерьер, UX, инновации), а также поддержку топ-менеджмента и подтверждение успехов дизайн-команды изнутри и со стороны. Быстрые победы помогут начать путь по пяти этапам зрелости дизайна.

Глава компании Indra Nooyi хвалит его подход. Одним из первых шагов к изменениям стало задание для менеджмента компании: сфотографировать примеры дизайна, которые они считают хорошим. Альбомы принесли всего пара человек — остальные попросили жён или вовсе ничего не сделали. Это показало, что они вообще не понимают, что такое дизайн. С тех пор многое изменилось и компания, например, чётко видит связь между дизайном и инновациями — последние принесли компании 9% прибыли в 2014 году. Для того, чтобы системно заниматься инновациями, нужно было в том числе перестроить культуру и проще относиться к провалам и быстрым циклам создания продуктов. Indra уверена, что если раньше компаниям нужно было переизобретать себя каждые 10 лет, то теперь скорость выросла и это должно происходить каждые 2-3 года.

Samsung

Во второй половине 90х вице-президент Samsung по дизайн-стратегии An Yong-Il предложил компании отойти от практики создания дешёвых копий продуктов конкурентов с новой философией дизайна. Он не встретил широкой поддержки, а после азиатского финансового кризиса 1997 года компания и вовсе урезала вложения в дизайн. An хотел уйти, но его шеф предложил ему пройти серьёзное обучение менеджменту и организационному планированию. В 2000 году был создан Corporate Design Center, который отвечает за видение будущего и его внедрение в разных подразделениях. И хотя компанию всё ещё периодически критикуют за копирование, значительное количество её продуктов более чем достойны.

Как Samsung определяет будущее дизайна своих продуктов Как Samsung определяет будущее дизайна своих продуктов

SAP

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

Хронология инициатив по изменению дизайна SAP Хронология инициатив по изменению дизайна SAP

Итого

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

Для меня эта серия стала не только изложением и структурированием мыслей, но и возможностью подумать о будущем дизайна в портальной команде Mail.Ru Group. Каждая статья описывала примерно середину пути — где мы находимся сейчас и куда движемся. Своего рода публичное обязательство, которое дополнительно подстёгивает двигаться вперёд.

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

  • Рассматривайте улучшения в дизайне в разрезе ценности для бизнеса.
  • Опишите интерфейсный и организационный долг — это первый шаг к выздоровлению.
  • Изменения в процессе — это непродуктовые задачи. Их нужно уметь проталкивать в план.
  • Будьте дизайнерами не только продуктов, но и организации, а также роли дизайна в ней.

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

P.S. Спасибо Kristine Sonne Berg, Sam de Jongh Hepworth и Katrine Hansted из UX-команды Systematic, которые помогли превратить сырую идею чек-листа на базе моей идеи зрелости в более-менее целостный подход.

The post UX-стратегия. Часть 6 — Внедрение appeared first on Юрий Ветров об интерфейсах.


Дайджест продуктового дизайна, май 2017

$
0
0

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

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

Design Better Data Tables
Памятка Andrew Coyle по работе со сложными таблицами. Он наглядно перечисляет уйму полезных паттернов навигации, сортировки и фильтрации. Перевод.

Design Better Data Tables

Sliders, Knobs, and Matrices — Balancing Exploration and Precision
Page Laubheimer разбирает особенности использования ползунков, ручек переключения и двумерных матриц в интерфейсах. Для каких задач они уместны, как обеспечить комфортную работу с ними с разными устройствами ввода.

Sliders, Knobs, and Matrices — Balancing Exploration and Precision

Interactive Email Design Elements, Interactive Email Marketing
Отличный каталог паттернов современных интерактивных приёмов в почтовых рассылках. Правда, очень мало информации о том, насколько это поддержано почтовыми службами и клиентами, а это главная проблема во внедрении всех этих красивых идей. В продолжение темы:

Casey Winters Reveals How Pinterest Perfected User Onboarding
Бывший дизайнер Pinterest Casey Winters рассказывает о том, как устроен процесс встречи нового пользователя в продукте.

Casey Winters Reveals How Pinterest Perfected User Onboarding

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

Hollywood Goodbyes and Focused Content
Интересный подход к упрощению существующих экранов интерфейса от Dave Riensche. Он определяет ключевые задачи страницы, а затем выписывает её текущие элементы и вычёркивает те, что не относятся к задаче. После этого ранжирует их по ценности и пересобирает экран без лишнего и с нужными акцентами.

Hollywood Goodbyes and Focused Content

Jessica Enders — Designing UX: FormsJessica Enders — Designing UX: Forms
В прошлом году издательство SitePoint выпустило книгу Jessica Enders «Designing UX: Forms». UXmatters публикует выдержку из неё, посвящённую проектированию общего сценария заполнения формы.


Best Practices for Long Scrolling
Николай Бабич описывает принципы проектирования добротных интерфейсов страниц с длинной прокруткой.

Best Practices for Long Scrolling

Ещё пара свежих статей от него:

Big Pictures on Small Screens
Советы Amy Schade из Nielsen/Norman Group о том, что делать с большими картинками в мобильной версии.

Исследования Baymard Institute

A Year of Google Maps & Apple Maps
Justin O’Beirne продолжил своё сравнение карт Google и Apple. В течение года он собирал скриншоты обновлений нескольких кусков востребованной территории.

Design principle: IKEA effect
Антон Николов описывает интерфейсный принцип IKEA — как вовлечь пользователей через несложные действия по настройке или заполнению личных данных.

Design avatars that make sense — and be more inclusive in the process
Michelle Venetucci Harvey разбирает разные способы представления аватаров по-умолчанию, когда неизвестен пол пользователя.

Anchors OK? Re-Assessing In-Page Links
Памятка Amy Schade из Nielsen/Norman Group по использованию ссылок-якорей внутри страницы. У них есть много потенциальных проблем и статья рассказывает, как избежать их.

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

Microsoft Fluent Design System
На конференции Build Microsoft показали следующее поколение дизайна Windows. Они назвали его дизайн-системой Fluent — она развивает текущий визуальный язык для того, чтобы объединить не только экранные интерфейсы, но и дополненную/виртуальную реальность. Если Material Design показал в своё время способ унификации для всего что имеет дисплей, то это следующий шаг в развитии визуальных языков.

Пока это просто одностраничник с рассказом об идеологии, плюс несколько новых страниц в гайдлайнах UWP (Universal Windows Platform). Но это и будет развитие UWP (уже есть шаблоны и тулкиты для многих дизайнерских инструментов — Sketch, Photoshop, Illustrator, XD и Framer). Интересно, как это отразится на дизайн-системе Office Fabric.

В начале года утекли скриншоты её ранней версии под кодовым названием Project Neon. Они показывали возвращение эффекта полупрозрачности из Windows Vista и добавление типографических акцентов. Видео-демонстрация подтверждает это направление. Помимо этого и без того удачная работа с интерфейсной анимацией, которую Microsoft переосмыслил в 2010 году и здорово повлиял на рынок, стала ещё более бодрой. А также принцип масштаба, который важен для дополненной и виртуальной реальности.

В своё время metro-дизайн изменил интерфейсы более современным и органичным для цифровой среды подходом и определил несколько ключевых принципов, которые подхватили Google и Apple — фокус на контенте вместо декора, особая роль анимации. Правда, мобильная Windows не смогла тягаться с лидерами, а десктопная упростила интерфейсные подходы в Windows 10. В новом поколении Microsoft добавил к своим изначальным идеям удачные мысли Material Design, так что новое поколение визуального языка должно стать ещё интереснее. Тем более, что с новым циклом обновлений раз в полгода это не останется пустым прожекторством, как часто случалось раньше.

Официальная группа в LinkedIn.

Android O
На конференции Google I/O презентовали обновления Android. Дизайн-команда компании отметила наиболее интересные выступления.

Google I/O 2017

Основные изменения технические, интерфейса касается всё что уже анонсировано раньше (наконец-то появились индикаторы обновлений на иконках приложений, новые эмоджи (не лучше старых), контекстные подсказки по работе с буфером обмена, улучшения области уведомлений). Теперь в платформу встроена упрощённая версия Tensor Flow, решающая задачи машинного обучения, очередное ускорение работы и уменьшение нагрузки на батарейку, новый мощный движок для 3D-графики. Самое приятное — в стандартные библиотеки добавлены многие стандартные анимации. Можно поставить бета-версию Android O.

Появились библиотеки компонентов Material Design и онлайн-обучалки по их использованию: Android, iOS и веб. В офисе Google собрали большую рабочую сессию с толковыми местными дизайнерами, которые предложили много концептов приложений. Кстати, платформа используется уже на 2 миллиардах устройств.

Интересно, что Google в фоновом режиме экспериментирует над версией Android, сделанном не на базе Linux. Она называется Fuchsia и недавно утекли экраны её интерфейса. Никаких планов и сроков по её поводу нет, поэтому картинки скорее для того, чтобы быть в курсе.

Дизайн-система России
Инициативная группа «Дизайн государственных систем» показала первые части дизайн-системы, которая должна унифицировать сайты государственных организаций.

Illustrating a more human brand, part 2
Продолжение эпической статьи дизайн-команды Dropbox об эволюции их стиля иллюстраций. Вторая часть описывает рождение текущего подхода.

Illustrating a more human brand, part 2

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

Samsung Design
Сайт достаточно сильно обновился.

The Path to Design System Maturity
Christian Beck описывает своё видение уровней зрелости дизайн-системы: унификация на уровне макетов, унификация всей коммуникации продукта, унификация кода.

Style Guide Guide by Brad Frost
Brad Frost сделал шаблон-заглушку для описания несложной дизайн-системы. Она предлагает типовую структуру для описания переменных, элементов и компонентов.

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

The Illusion of Measuring What Customers Want
Шикарнейший разбор ограничений измерения UX от Alan Klement. Несмотря на то, что популярные измерения на базе шкалы Ликерта выражаются в цифрах, это качественные, а не количественные данные, и их нужно использовать для расчётов с осторожностью.

The Illusion of Measuring What Customers Want

Creating Personas — A guide, not a template
Интересный формат описания персонажей от Ben Ralph, учитывающий достаточно много деталей. Правда, мало кто из этих статей решает проблему использования персонажей после их создания.

Ben Ralph — Persona Notepad

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

Нир Эяль — На крючкеНир Эяль — На крючке
Издательство Манн, Иванов, Фербер выпускает русский перевод книги Nir Eyal «Hooked».


Contemporary morality — Moral judgments in digital contexts
Занятное пользовательско-психологическое исследование — около 1000 человек предложили решить морально-этические проблемы, пользуясь телефоном или компьютером. Пользователи телефонов делали лучший моральный выбор. Краткие выводы из исследования.

Design for Fingers, Touch, and People, part 2
Продолжение новой редакции статьи Steven Hoober о том, как пользователи работают с мобильными телефонами.

Jonathan Shariat & Cynthia Savard — The Tragic Design Book
Вышла книга Jonathan Shariat и Cynthia Savard, посвящённая трагическим ситуациям в жизни, где дизайнеры не подумали и сделали ситуацию только хуже.

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

The 5 Steps of Successful Customer Journey Mapping
Толковая пошаговая инструкция Kate Kaplan по составлению customer journey map. Это пять этапов по сбору инициативной группы, проведению исследований и созданию самой карты.

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

Framer Design
Framer переосмыслили инструмент и добавили туда свой Sketch. Теперь это полноценный продукт для дизайна и прототипирования с переключением между этими двумя режимами. Видео-демонстрация. Другие новости инструмента:

Sketch 44
В новой версии появилась возможность более точно задать поведение элементов при адаптивности — к каким краям он залипает, как тянется по вертикали и горизонтали. Это работает и для объектов, и для артбордов (у которых появилась возможность быстро переключить размер). Возможно, это сделает Auto Layout не нужным, ведь он часто сбивает размеры и отступы между элементами. Также появилась возможность заменить недостающие шрифты, комментировать макеты в Sketch Cloud, обновились шаблоны для iOS. Перевод.

Sketch 44

Свежие плагины и инструкции:

  • Michael Spiegel показывает, как с помощью переопределения параметров копии символа можно раскрашивать набор иконок.
  • Mirr — ещё один плагин, позволяющий собрать простой интерактивный прототип прямо в Sketch.

Ludus
Браузерный графический редактор. Интересная особенность — можно импортировать материалы из сторонних сервисов — например, прототипы Framer или скрипты на CodePen.

Storyframes before wireframes — Starting designs in the text editor
Fabricio Teixeira описывает метод проектирования страниц storyframing. Вместо создания привычных wireframes, промо-сайт или подобная страница описывается кратким повествовательным текстом, включающим основные посылы, которые компания хочет донести до пользователя.

C4Studio

InVision

Adobe XD

Figma

Flinto

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

Group Notetaking for User Research
Отличная методичка по групповому ведению заметок в ходе сессий юзабилити-тестирования, на которые ходит вся продуктовая команда — в таком формате эффективность полученных знаний для изменений в продукте гораздо больше. Описание процесса, шаблоны документов, подводные камни.

Group Notetaking for User Research

Как работать с аналитикой, если вы дизайнер
Наталья Бабаева из издательства МИФ показывает, как дизайнеру эффективно взаимодействовать с аналитиком для улучшения интерфейсов. Она показывает примерные шаги «взросления» диалога от получения бесполезных цифр до продуктивной работы через гипотезы.

5 Techniques to Identify Clusters In Your Data
Jeff Sauro разбирает пять основных техник кластеризации данных пользовательских исследований.

Ambient Research
Gregg Bernstein из Vox Media рассказывает о том, как они делают результаты пользовательских исследований постоянно доступными и наглядными всей продуктовой команде. Благодаря тому, что они всегда на виду, их инсайтами пользуются чаще.

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

A Better Way to Code
Сумасшедший пример визуального программирования от Mike Bostock, создателя популярнейшей библиотеки d3.js для визуализации данных. Он запустил d3.express, среду разработки и аналитики одновременно, которая позволяет пошагово перебирать и визуализировать данные — в таком формате работа по анализу радикально меняет свой формат.

A Better Way to Code

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

Flexbox и CSS Grid

Работа с SVG

Веб-типографика

Метрики и ROI

Business Software UX & NPS Benchmarks
Jeff Sauro провёл исследование показателей NPS и SUS для дюжины известных productivity-сервисов. Отчёт платный и достаточно дорогой, но в статье есть основные выводы.

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

UX-стратегия. Часть 6 — Внедрение
Шестая, финальная статья в серии про UX-стратегию на практике. Она посвящена осуществлению изменений в продуктах и компании. Это расширенная и доработанная версия презентации.

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

UX-стратегия. Часть 6 — Внедрение

После выхода английской версии займусь двумя вещами:
  • Книга по дизайн-менеджменту на основе серии. В ней будет переработана структура, добавлено много примеров и раскрыты чуть менее масштабные темы, которые не попали в основные 6 частей.
  • Инструмент для оценки зрелости вашей компании и рекомендации по дальнейшим шагам. В серии статей вырисовалось что-то вроде собственного метода, попробую формализовать его.

Product Design Exercises We Use At WeWork Interviews
Хорошие примеры тестовых заданий от дизайн-команды WeWork. В них удачно описана проблематика и поставлены ограничения.

A New UX Maturity Model
Natalie Hanson предлагает свою модель зрелости UX. В ней дизайн в компании развивается от не очень осмысленного к фокусу сначала на визуальной консистентности, потом на качестве пользовательского взаимодействия и в конце — целостной карте взаимодействия по всем каналам.

Natalie Hanson — UX Maturity Model

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

  • Jeff Sauro готовит свою модель зрелости UX. Для этого он проанализировал существующие модели, составил опросник на их основе и запустил на сотню компаний. Результаты будут опубликованы позже.

How to jump-start recruiting in hard-to-staff contexts
Советы по найму и развитию дизайнеров от главы продуктового дизайна Facebook Margaret Gould Stewart.

How IBM Trains Design Thinking Facilitators
Ann F. Novelli рассказывает, как IBM тренирует фасилитаторов для распространения практик дизайн-мышления по всей компании. Это стало одной из ключевых идей масштабирования дизайна.

How IBM Trains Design Thinking Facilitators

UX & Agile: Dream Team or Odd Couple?
Тема интеграции UX-практик в гибкий процесс разработки уже избита, но Paul McInerney из IBM неплохо структурировал опыт компании.

How Intercom brings play into their design process
Глава дизайна бренда Intercom Stewart Scott-Curran рассказывает, как работает его команда. В продолжение темы:

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

Translating UX Goals into Analytics Measurement Plans
Aurora Harley из Nielsen/Norman Group показывает, как перевести интерфейсные вопросы на язык аналитики и настроить отслеживание нужных метрик.

Product discovery: Making progress towards the innovation land — Interview with Nikkel Blaase
Интервью с Nikkel Blaase из XING о получении продуктовых инсайтов от пользователей, которые помогают нащупать инновационные решения.

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

Джейк Кнапп — Спринт: Как разработать и протестировать новый продукт всего за пять днейДжейк Кнапп — Спринт: Как разработать и протестировать новый продукт всего за пять дней
Издательство Альпина выпустило русский перевод книги про Design Sprints от Google Ventures.


Prototyping IBM Design Thinking Method Cards
Eric Morrow рассказывает, как IBM сделали игральные карты по дизайн-мышлению, которые помогают в проведении сессий ко-дизайна. Они планируют разложить их во всех переговорных, чтобы любые команды могли улучшить рабочие обсуждения. Правда, продолжение статьи водянистое.

Конструктор опыта
ИКРА и Одноклассники запустили методичку, которая собрала уйму методов решения проблем и затыков в работе над цифровыми продуктами. Это как полезные практики, так и просто упражнения для разминки.

Кейсы

Непрошенные редизайны

История

Reissue of the IBM Graphic Standards Manual by Paul Rand
Группа энтузиастов собирается перевыпустить классические гайдлайны IBM от Paul Rand. За €30 можно получить печатное издание одного из лучших визуальных языков.

Тренды

The 5 Principles of IoT UX Design
Принципы дизайна интерфейсов для интернета вещей от Jared Porcenaluk. Толково расставлены акценты — эти интерфейсы утилитарны и не должны требовать слишком много внимания.

Designing Voice Experiences
Обзор процесса проектирования голосовых интерфейсов от Lyndon Cerejo. Тональность и сценарии, обработка ошибок и отхождений от плана, лучшие практики.

Алгоритмический дизайн

Умные часы и браслеты

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

Ten Principles of Good Design (2017 Tech Industry Edition)
Tobias van Schneider обновил принципы дизайна Dieter Rams в соответствии с реалиями современного интернета.

Can Digital Products Be «Timeless?»
Adam Kopec из Hodinkee рассуждает на тему того, могут ли цифровые продукты иметь дизайн в духе нестареющей классики из мира физических предметов (например, Porsche 911). Изменения цифровых продуктов происходят так быстро и часто, что стили и модели работы с продуктами постоянно меняются. Парочка таких примеров есть — главная страница Google и новостная лента Facebook.

Re-finding Your Individual Contributor Self
Erin Malone размышляет на тему того, как дизайн-менеджеру не забыть работу руками и не отрываться от реальных продуктовых дел. Она пытается восстановить навыки и делится опытом.

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

AMA: 2ГИС
Интервью с дизайн-командой 2ГИС на основе AMA. Новосибирский картографический сервис успешен в продуктовом плане и много времени уделяет развитию дизайна основного продукта, а также делает множественные экспериментальные приложения. Несколько лет назад они показали пример того, как можно сравнительно простыми средствами получить собственный шрифт. Кроме того, они организуют конференцию CodeFest в Новосибирске и поддерживают Серебро Набора, посвящённую типографике.

AMA: 2ГИС

Women Who Design
Сайт-каталог женщин-дизайнеров в Twitter. Как и для чего он делался.

The Slash Workers
Опрос 300 фрилансеров на тему особенностей их работы и видения карьеры от компании And Co. Правда, как обычно не факт что релевантно для нашего рынка — 70% ответивших из США.

Freelance.tv
Dann Petty готовит фильм о дизайнерах-фрилансерах. Для этого он объездил Америку на микроавтобусе и записал кучу интервью с известными фрилансерами.

IA, Rosenfeld Media, and EUX — An Interview with Louis Rosenfeld
Интервью с Louis Rosenfeld, в котором он рассказывает о переходе от работы над проектами к развитию профессии в целом — они расширяют издательскую деятельность Rosenfeld Media и анонсируют новые конференции.

Interface Lovers
Сайт публикует интервью с продуктовыми дизайнерами.

Материалы конференций

Agile UX Virtual Summit
UXPin и Rosenfeld Media проводят бесплатную онлайн-конференцию 13-16 июня. Снова достаточно мощный состав выступающих: John Zeratsky, Indi Young, Peter Merholz, Carol Smith, Josh Seiden и другие.

Design Ops Summit
Конференция по дизайн-менеджменту и UX-стратегии от Rosenfeld Media, которая пройдёт в Нью-Йорке 6-8 ноября.

UXSTRAT USA 2016
Обзор трёх презентаций с американской части конференции UXSTRAT 2016 от Krispian Emert — она проходила 14-16 сентября в Providence, США.

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

Получать свежий дайджест по почте

The post Дайджест продуктового дизайна, май 2017 appeared first on Юрий Ветров об интерфейсах.

Дайджест продуктового дизайна, июнь 2017

$
0
0

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

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

All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design
Brad Ellis разбирает способы отказа от верхней панели навигации в мобильных — с современными размерами телефонов работать с ней непросто.

All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design

Dashboards — Making Charts and Graphs Easier to Understand
Отличный обзор сложности восприятия способов представления информации на дашбордах от Page Laubheimer из Nielsen/Norman Group.

Dashboards — Making Charts and Graphs Easier to Understand

Best Practices For Hero Images
Николай Бабич даёт советы по использованию крупных изображений в шапке сайта.

Исследования Baymard Institute

Wizards — Definition and Design Recommendations
Raluca Bidiu из Nielsen/Norman Group описывает лучшие практики использования пошаговых помощников.

Юзабилити-рейтинг iOS-приложений банков, 2017
Рейтинг мобильных приложений российских банков для iOS от USABILITYLAB. Пятёрка лидеров: Тинькофф Банк, Банк ВТБ 24, Сбербанк, Альфа-Банк, Промсвязьбанк.

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

iOS 11
Анонсирована iOS 11. На самой презентации WWDC деталей про обновление мобильной ОС было немного, зато в бета-версии видно, что стилистика приложения Apple Music становится основой визуального языка платформы:

  • Крупные заголовки экрана и в целом уход от тонких шрифтов.
  • Залитые иконки вместо контурных: наконец-то можно будет унифицировать Android- и iOS-приложения. Стали залитыми и круги вокруг цифр при наборе номера (а также скруглились в калькуляторе).
  • Оркестровка анимации в духе Material Design: например, крупный заголовок превращается в кнопку «назад» при уходе вглубь навигации, а переход в информацию о приложении в магазине совсем уж похоже на то, что делает Google.
  • Сочные изображения используются всё чаще: обновлённый AppStore теперь похож по компоновке экранов на Google Play (хотя экран приложения жутко перегружен).
  • Все всплывающие слои строятся по принципу уведомлений и меню: например, написание письма в стандартном почтовом клиенте.
  • Полноценная работа со скриншотами, включая их редактирование — здорово упростится жизнь тех, кто работает над продуктами.

iOS 11

Здорово, что после безликого iOS 7, которая скопировала проблемы Windows Phone и его тысяч однояйцевых приложений, у платформы появляется яркое лицо.

iPad продолжает пытаться развиваться в сторону замены компьютера (drag&drop между двумя открытыми рядом приложениями, панель задач а-ля doc в MacOS, файловая система, расширенная работа с пером (ещё), хотя постоянное падение продаж в последние годы говорит о том, что развивается он не совсем туда. Единственное, что показывает проблески светлого будущего — появление почти полноценного аналога Affinity Photo.

Из других интересных моментов: стандартная камера научилась читать QR-коды (что должно сделать их популярнее), развитие возможностей машинного обучения, запоздалое появление возможностей работы с дополненной реальностью, режим «не беспокоить» во время вождения, бесконечно уродливая панель быстрых настроек. Материалы для дизайнеров:

Apple Watch

  • Вышла watchOS 4. Из относительно явных интерфейсных изменений — список запущенных и недавних приложений превратился в вертикальную ленту.

In the future, design principles won’t be about design
Шикарный анализ принципов дизайна крупных компаний от Jerome de Lafargue. Он выделил наиболее популярные (они одинаковы у многих организаций) и отметил, что хорошие принципы должны быть не просто абстрактным манифестом ценностей дизайн-команды, а давать чёткие ценности, связанные с ценностями бизнеса и пользователей.

In the future, design principles won’t be about design

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

Microsoft Mixed Reality Design Guidelines
Microsoft опубликовали дизайн-гайдлайны по проектированию интерфейсов смешанной реальности. Анонс.

Alla Kholmatova — Design Systems
В сентябре Smashing Magazine выпускают книгу Аллы Холматовой «Design Systems». Её можно пред-заказать и прочитать первую половину уже сейчас, плюс бесплатно доступна глава 2.

Alla Kholmatova — Design Systems

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

Building great user experiences on Slack
Гайдлайны Slack по проектированию приложений и ботов для мессенджера.

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

Cognitive bias cheat sheet
Крутейшая модель классификации когнитивных искажений от Buster Benson. Он разложил их по 4 категориям — слишком много информации, недостаточно смысла, нужно быстро принять решение, избирательная память. Перевод.

Cognitive bias cheat sheet

Increase funnel conversion with Psych
Darius Contractor из Dropbox предложил необычный подход для оценки когнитивной нагрузки интерфейса — он оценивает все элементы интерфейса с помощью условной единицы «psych». Если цифра больше нуля — интерфейс хороший. Это чем-то похоже на модель «3 банок» от Google. Перевод.

Who plays mobile games?
Команда Google Play и SKIM Analytics провели исследование поведения людей, играющих на мобильных. Они выделили 5 сегментов в зависимости от вовлечённости и социальности.

Подход Jobs To Be Done
Отличная сводная памятка по методике определения потребностей пользователей Jobs to Be Done от Анны Булдаковой.

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

Blind Spot — Illuminating the Hidden Value of Business
В прошлом году Rosenfeld Media выпустили книгу Steve Diller, Nathan Shedroff и Sean Sauber «Blind Spot: Illuminating the Hidden Value of Business». UXmatters публикует отрывок из неё, посвящённый современному процессу дизайна продуктов.

UX Writing — How to do it like Google with this powerful checklist
Конспект сессий конференции Google I/O 2017, посвящённых написанию интерфейсных текстов. Во второй половине неплохой подход к формированию тональности бренда.

Provoking Difficult Design Conversations
Dan Brown делится опытом решения сложных проектных ситуаций, когда сложно трактовать правки заказчика однозначно. Он предлагает подход, в котором делается часть изменений с тем, чтобы начать более предметный разговор.

Using UX design to reduce the risk of innovation failure
Занятная модель «тройного алмаза» от Nomensa — они добавили ещё один этап в начале, отвечающий за поиск ценности для пользователей и бизнеса.

Design principle: Organizing information
Антон Николов перечисляет пять подходов к организации информации: по местоположению, алфавиту, времени, категориям и иерархии. Перевод.

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

Sound Kit for Prototypes
Библиотека интерфейсных звуков от дизайн-команды Facebook. Лицензия позволяет использовать их только в прототипах. Советы по работе со звуком в интерфейсе от Will Littlejohn.

Facebook Sound Kit for Prototypes

Adobe XD

  • В июньской бете наконец-то появились символы, включая переопределение состояния конкретной копии. Улучшена работа со слоями и градиентами.

Июньское обновление Adobe XD

InVision Craft

Sketch 45
Улучшена работа с плагинами (для автообновления не нужны сторонние утилиты) и много интерфейсного тюнинга (перевод).

Sketch 45

Плагины и полезные статьи:

Framer

Gravit

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

How to Turn UX Research Into Results
Памятка Cindy McCracken для пользовательских исследователей о том, как правильно донести результаты до продуктовой команды и участвовать в дизайн-процессе, который вносит исправления на базе найденных выводов. В продолжение темы:

Lab Testing Beyond Usability — Challenges and Recommendations for Assessing User Experiences
Много говорится о том, что лабораторное юзабилити-тестирование имеет свои ограничения и подходит не для всех ситуаций, но разборы конкретных проблем случаются реже. Carine Lallemand и Vincent Koenig провели серию тестов и достаточно подробно описали конкретные проблемы в интерпретации поведения пользователей.

7 Questions About User-Research Panels
Caroline Jarrett и Naintara Land описывают плюсы, минусы и подводные камни создания собственной панели респондентов. Хорошая памятка для тех, кто готов.

Why the SUPR-Q is better than the SUS for websites
Jeff Sauro считает, что комбинированная метрика SUPR-Q лучше подходит для оценки сайтов, чем SUS — она проще, даёт итоговую оценку нужных факторов, а результаты можно сравнивать с аналогичными продуктами.

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

Master React — Unleash Your Design Superpower
Онлайн-курс по React для дизайнеров.

Master React — Unleash Your Design Superpower

A day without Javascript
Sonnie Sledge проверил, что происходит с известными сайтами при выключенном JavaScript — многие становится сложновато использовать.

Handling Long and Unexpected Content in CSS
Ahman Shaheed показывает, как обрабатывать краевые ситуации в элементах интерфейса, когда реальный контент ломает их структуру.

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

Веб-типографика

Flexbox и CSS Grid

Метрики и ROI

UX & NPS Benchmarks for Consumer Software (2017)
Jeff Sauro опубликовал результаты исследования NPS для 17 популярных профессиональных программ и веб-сервисов. Исследование говорит, что показатель SUS отвечает примерно за треть оценки рекомендующих продукт пользователей.

UX & NPS Benchmarks for Consumer Software (2017)

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

Humanizing the Enterprise
Pabini Gabriel-Petit пишет о том, как повысить вовлечённость продуктовой команды с помощью матрицы социальных потребностей. Концепция базируется на книге Paul Herr «Primal Management».

Crafting an Effective Working Group
Jessica Harllee рассказывает о формате ситуативных рабочих групп для решения сложных дизайнерских задач в Etsy. Мы используем похожий подход и он здорово показал себя.

Crafting an Effective Working Group

Ещё о структуре дизайн-команд:

Wake

Kit Oliynyk — The Colors of Design Cultures
Выступление Кирилла Олейниказ Capital One на SXSW об их подходе к определению сильных и слабых сторон дизайнера.

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

The Potential of Agile
Scott Sehlhorst сделал отличный разбор целей работы по agile и выгод для продукта от этого. Как именно он помогает проверить продуктовые инсайты.

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

Game Thinking
Методология Game Thinking предполагает использование опыта работы над играми при создании более привычных цифровых продуктов. Обзор методологии от Amy Jo Kim.

Game Thinking

Дизайн-спринты

Кейсы

Designing Facebook Spaces
Christophe Tauziet подробно рассказывает о работе над Facebook Spaces, попытке создать социальную сеть в виртуальной реальности. Особенно интересна последняя часть, где показывают эксперименты с разными интерфейсными подходами.

Designing Facebook Spaces

Transforming Data to Insights
Anwesha Samanta из Salesforce рассказывает, как проектировали аналитический сервис и облегчили пользователям поиск инсайтов среди сырых данных.

Redesigning a Remote
Простой и симпатичный кейс работы над мобильным приложением от Eli Rousso.

Непрошенные редизайны

История

Web Design Museum
Коллекция старых сайтов с 1996 по 2005 год. Накоплено 800 примеров.

Web Design Museum

Across the Computer Divide, The Nerds Face the Dummies
Статья New York Times 1993 года, в которой поднимаются проблемы в использовании компьютеров, говорится о юзабилити и инициативах Microsoft и других компаний.

Тренды

KBCP Internet Trends 2017 Report от Mary Meeker
Ежегодный прогноз трендов развития интернета от Mary Meeker из KPCB (избранное). Слайд № 188 посвящён росту количества дизайнеров в крупных компаниях — хороший индикатор зрелости отрасли.

KBCP Internet Trends 2017 Report от Mary Meeker

The State Of Advanced Website Builders
Drew Thomas размышляет на тему того, заменят ли конструкторы сайтов дизайн-студии. Он смотрит на их сильные и слабые стороны и предлагает новые форматы работы для агентств, которые позволят остаться нужными.

How Logos Became the Most Important Quarter-Inch in Business
Интересный взгляд Fortune на историю брендинга — они пишут о том, как цифровой продукт и интерфейс со временем стали определяющими для него.

How Logos Became the Most Important Quarter-Inch in Business

What On Earth Is A Brutalist Website? 5 Things Today’s Designers Can Learn From Brutalism
Andrew Wilshere разбирает сайты в духе брутализма относительно принципов, заложенных в такой архитектуре. Под это понятие подмешивают просто нарочито грубый или гранжевый дизайн, хотя изначальная идея брутализма была в простоте и максимальной открытости структуры.

What On Earth Is A Brutalist Website? 5 Things Today’s Designers Can Learn From Brutalism

Algorithm designs seven million different jars of Nutella
Итальянское подразделение Ogilvy & Mather сделало алгоритмическую упаковку для Nutella. Они сгенерировали 7 миллионов паттернов для этикетки, тираж разлетелся за месяц.

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

Design in the Era of the Algorithm
Развитие статьи Josh Clark об этике современных продуктов, полагающихся на алгоритмы и машинное обучение.

Designing experiences for Virtual Reality — Lessons from the physical world
Принципы дизайна интерфейсов виртуальной реальности от Yisela Alvarez Trentini.

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

Как я прочитал все выпуски продуктового дайджеста
Кирилл Улитин сделал крутейший анализ дайджеста продуктового дизайна за 7 лет — основные темы, ключевые слова, упоминаемые люди и компании и т.п. Вместе с названием (изначально всё называлось «Обзор свежих материалов по проектированию интерфейсов», позже перешло в более широкое «Дайджест продуктового дизайна») менялись рубрики (стало обширнее), степень фильтрации (меньше публикаций на совсем базовые темы), подход к подготовке (сотрудничество с vc.ru мотивировало к регулярности, а она мотивировала к упрощению подготовки), добавилась рассылка. На сайте UX Buzzwords есть интерактивная версия. Всегда хотел проанализировать архив выпусков, но не хватало времени и навыков.

Как я прочитал все выпуски продуктового дайджеста

На прошлой неделе количество подписчиков пробило 15 000 — новая планка для отечественных групп по дизайну в Фейсбуке (за исключением поиска работы).

A Turn of Phrase — The Politics of UX Language
Carol J. Smith пишет о том, как UX-специалисту говорить на понятном клиенту языке. Она не считает зазорным не убиваться о том, что кто-то называет юзабилити-тестирование «фокус-группой» — зачастую лучше начать работу, а уже потом объяснить разницу.

Пользователи Reddit предложили самые нелепые варианты интерфейса регулировки звука
Флеш-моб на Reddit, в котором сообщество предложило самые ущербные подходы к интерфейсу регулировки громкости.

Book Review: Practical UX Design
Обзор книги Scott Faranello «Practical UX Design», которая вышла в прошлом году в издательстве Packt Publishing.

No No No
Julie Zhuo учит дизайнеров говорить «нет» в нужный момент и в нужном ключе.

20 лекций TED для дизайнеров
В блоге Tilda собрали добротные выступления на TED, относящиеся к дизайну.

20 лекций TED для дизайнеров

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

Google Design
Обновился сайт Google Design.

Материалы конференций

UXSTRAT 2017
В 2017 году пройдут две части конференции UXSTRAT 2017: 15-16 июня в Амстердаме и 18-20 сентября в Boulder, США. Она посвящена дизайн-стратегии и собирает мощный состав тематических спикеров. Презентации с европейской части конференции. Наиболее интересные презентации:

Enterprise UX 2017
Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Natalie Hanson сделала шикарный подробнейший конспект выступлений:

LX Conference 2017
Конференция LX Conference 2017 прошла 24-25 апреля в Сан-Франциско, США. Она посвящена дизайн-менеджменту и UX-стратегии (видео выступлений). Обзоры:

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

Получать свежий дайджест по почте

The post Дайджест продуктового дизайна, июнь 2017 appeared first on Юрий Ветров об интерфейсах.

Дайджест продуктового дизайна, июль 2017

$
0
0

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

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

The Most Hated Online Advertising Techniques
Интересное исследование Nielsen/Norman Group на тему навязчивости разных форматов рекламы в вебе и на мобильных. Правда, оно делалось на базе wireframes, а не реальных баннеров, но в любом случае смотрели на влияние разных отвлекающих факторов и в целом анти-рейтинг выглядит логично.

The Most Hated Online Advertising Techniques

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

Designing The Perfect Date And Time Picker
Виталий Фридман в деталях разбирает паттерны выбора даты и времени. Много интересных примеров и советов по выбору подходящего к конкретной задаче решения.

Designing The Perfect Date And Time Picker

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

Design for Fingers, Touch and People, part 3
Окончание новой редакции статьи Steven Hoober о том, как пользователи работают с мобильными телефонами.

Mobile Subnavigation
Raluca Budiu из Nielsen/Norman Group разбирает паттерны навигации второго уровня на мобильных.

Five Degrees of User Assistance
Jim Ross приводит пять стадий вовлечения проактивного интерфейса в работу с пользователем — от простого предоставления справочной информации до самостоятельного решения проблемных ситуаций.

Small Pictures on Big Screens — Scaling Up from Mobile to Desktop
Amy Schade из Nielsen/Norman Group напоминает про важность оптимизации мобильных изображений для большого веба — иначе они обрезаются или занимают слишком много места.

Product Design for Sustainability
Артём Дашинский показывает, как улучшение интерфейсных решений способно помочь окружающей среде — например, экономить бумагу для принтера или оптимизировать маршруты.

Исследования Baymard Institute

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

Paradigm — дизайн-система Mail.Ru Group, часть 1: визуальный язык
Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm (это внутренний инструмент, мобильной версии пока нет).

Paradigm — дизайн-система Mail.Ru Group, часть 1: визуальный язык

Что такое дизайн-система в нашем понимании?

  1. Визуальный язык — определяет то, как мы создаём интерфейсы продуктов. Как и в обычном языке, у нас есть алфавит (переменные), слова (элементы интерфейса), предложения (компоненты) и цельные тексты (экраны и продукты). Алфавит неизменен, словарный запас постепенно меняется со временем, а вот предложения и тексты из них создаются всегда разные. Он показан на design.mail.ru/paradigm/.
  2. Единые компоненты на технологическом уровне — единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория. Продукты под брендом Mail.Ru, которые используют их на практике: медиапроекты, мобильный веб, часть productivity-сервисов. Они пока доступны только внутри компании.
  3. Шаблоны для дизайнерских инструментов — способ быстро показать идею, просто высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов. Мы писали о них в начале года.

Начав внедрение дизайн-системы в 2012 году, в 2015 году мы сформировали её целостное видение. Впереди немало дел, но публикация текущих наработок — приятная веха в развитии платформы (забавно, что ровно три года назад масштабно обновилась портальная навигация). Мы подробно описали общие принципы и текущее состояние на Хабре. Будем рады обратной связи и советам.

P.S. Кстати, запустили два новостных канала для анонсов дизайн-команды в Фейсбуке и в Твиттере. Ну и на всякий пожарный Медиум.

Adopting Design Systems
Одна из немногих статей на тему менеджмента процесса унификации продуктов с помощью дизайн-системы. Nathan Curtis описывает поэтапный план внедрения платформы и даёт советы по работе с продуктовыми командами. В продолжение темы:

Empty States? More like You-Have-No-Idea-How-Much-Work-Goes-Into-Those States, amirite?
Meg Robichaud рассказывает о работе над серией иллюстраций для нулевых состояний интерфейса Shopify. Очень интересный подход, где иллюстрация передаёт нужное настроение в текущем сценарии — успех, неудача, нейтральное сообщение.

Empty States? More like You-Have-No-Idea-How-Much-Work-Goes-Into-Those States, amirite?

Handling spacing in a UI component library
Chris Pearce размышляет на тему того, как описывать отступы между компонентами в дизайн-системе. Он разбирает три подхода: делать отступ частью компонента, делать отдельные элементы для отступов, определять расстояния на уровне «родителя». Мы используем первый подход.

Fractures
CSS-фреймворк для модульного дизайна.

Android O

Designing Adaptive Icons

iOS 11

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

Updated Empathy Map Canvas
Dave Gray обновил свой популярный шаблон карты эмпатии. В него добавлены цели, порядок заполнения и подсказки.

Updated Empathy Map Canvas

Empathy Prompts
Коллекция мотивационных призывов для дизайнеров, направленных на внимание к пользователям с техническими и физическими ограничениями.

Media Use Habits — What, Why, When, and How People Read Online
Мои коллеги Олеся Куколева, Анна Преображенская и Ольга Сидорова опубликовали на UXmatters результаты недавнего качественного исследования того, как пользователи читают медиа. В ходе него респонденты вели дневники, собрав 83 часа видео реального чтения новостных сайтов.

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

Which Maps Do You Really Need?
James Kalbach разбирает типы карт взаимодействия. Он делит их на три группы — модели пользователей, контекста и целей, а также будущего. В продолжение темы:

Information Architecture Lenses
Dan Brown обновил свою классификацию принципов информационной архитектуры и составил список 43 «линз», через призму которых можно оценивать эффективность интерфейсных решений.

Information Architecture Lenses

Service Design at a speed and scale
Diego Dalia рассказывает о том, как формировался подход к работе с проектированием услуг в IBM на базе их версии дизайн-мышления.

Service Design at a speed and scale

The Name Game
Stacey King Gordon рассказывает о подходе Facebook к названию продуктов, функций и экранов. Они должны быть достаточно простыми и не создавать лишних смыслов.

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

Design Versioning — It’s true, it’s here, let’s talk and learn more about it
Caio Calderari сделал обзор инструментов контроля версий для дизайнеров. В основном они работают с макетами Sketch и основаны на Git.

Design Versioning — It’s true, it’s here, let’s talk and learn more about it

Kactus
Инструмент контроля версий для макетов в Sketch на базе Git. Базовая версия бесплатна.

Adobe XD

Sketch

Principle

  • Вышла версия 3.0. Тонна мелких и средних улучшений интерфейса.

Kite

  • Вышла версия 1.5. Из новинок — аналог драйверов из Principle, плюс новые события для создания интерактивных прототипов. Вообще, на стороне Kite немало преимуществ: куча событий для работы, большие возможности для работы с анимацией, включая path-анимацию. Плюс генерация кода, который худо-бедно (скорее худо) можно использовать в своём приложении. Из минусов — неполноценное мобильное приложение и упор на работу со свойствами и значениями в противоположность WYSIWYG Principle.

Figma

Framer

Omnigraffle

Vectr

Paper Sizes — The best resource for International Paper Sizes, Dimensions & Formats
Шикарная памятка по стандартным размерам бумажных форматов и документов.

Gifmock — Easily create high quality GIFs
Приложение помогает собрать анимацию интерфейса в оптимизированный по качеству и размеру GIF. Есть плагин для Sketch.

Ghost 1.0
Одна из самых перспективных блог-платформ Ghost вышла из многолетней беты.

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

Search-Log Analysis — The Most Overlooked Opportunity in Web UX Research
Хорошая методичка по анализу внутренних поисковых запросов на сайте от Susan Farrell из Nielsen/Norman Group. Где смотреть, что искать, какие выводы и улучшения делать.

Search-Log Analysis — The Most Overlooked Opportunity in Web UX Research

Tree Testing, part 2 — Interpreting the Results
Вторая часть обзора методик тестирования информационной архитектруры от Kathryn Whitenton из Nielsen/Norman Group. Она показывает, как собирать данные и сравнивать результаты тестов.

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

How We Conducted User Research in The Arab Market
Рассказ о пользовательском исследовании в Объединённых Арабских Эмиратах, в ходе которого UX Studio искали особенности местного рынка, чтобы вывести на него существующий продукт.

Another Lens
Набор структурированных советов по проведению пользовательских исследований в виде карточек от дизайн-команды Airbnb.

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

Ben Coleman и Dan Goodwin — Designing UX: Prototyping

Ben Coleman и Dan Goodwin — Designing UX: Prototyping
Издательство Sitepoint выпустило в марте 2017 книгу Ben Coleman и Dan Goodwin «Designing UX: Prototyping». UXmatters публикует главу 7 из неё, посвящённую HTML-прототипам.


Supernova Studio
Ещё один инструмент, который обещает превратить макеты в работающее приложение для мобильных платформ, хотя на них постоянно жалуются за неэффективный код. На этот раз — из макетов Sketch в React Native. Анонс.

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

CSS-анимация

Website Speed Test — Image Analysis Tool by Cloudinary
Сервис помогает оптимизировать графику на сайте. Он не только показывает проблемы, но и подсказывает, как решить их с приемлемым качеством, автоматически генерируя уменьшенные изображения. Как он работает и зачем создавался.

Tooltips & Toggletips
Heydon Pickering продолжает разбирать стандартные компоненты дизайн-системы на предмет учёта требований доступности. В этом выпуске — подсказки для элементов интерфейса.

Метрики и ROI

Monitoring User Experience Through Product Usage Metrics
Jerrod Larson приводит большую коллекцию метрик, которые полезно отслеживать продуктовому дизайнеру в своей работе. Для каждой из них он показывает, как именно и зачем их считать.

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

The Maturity of UX Organizations
Jeff Sauro запустил опросник на тему зрелости компаний в плане дизайна и приводит первые выдержки из опроса 150 дизайнеров. Получился интересный подход с распределением участников по уровню зрелости — такой же должен я планировал сделать на своём сайте о UX-стратегии. В другой выкладке говорится о соотношении дизайнеров и пользовательских исследователей к разработчикам.

Changing Company Culture Requires a Movement, Not a Mandate
Bryan Walker и Sarah A. Soule рассказывают, как IDEO помогли изменить корпоративную культуру фармацевтической компании Dr. Reddy.

Jennifer Mueller — Creative Change

Book Review: Creative Change
В начале года издательство Houghton Mifflin Harcourt выпустило книгу Jennifer Mueller «Creative Change» о том, как не просто предлагать креативные и прорывные идеи, а добиваться их внедрения. UXmatters сделали её обзор.


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

Making Good Decisions as a Product Manager
Продуктовый директор Shopify Brandon Chu рассказывает о своём подходе к принятию решений — как выделить быстрые, где не страшно ошибиться, и действительно важные, где нужно детально продумать последствия. Его шаблон для принятия решений учитывает UX.

Making Good Decisions as a Product Manager

Great PMs don’t spend their time on solutions
Paul Adams рассказывает, как строится процесс определения проблемы в Intercom. Они уделяют 40% времени понимают того, что и зачем нужно сделать, и только после этого переходят к проработке решения.

Great PMs don’t spend their time on solutions

Кейсы

Building for China
Vivian Wang рассказывает о запуске Airbnb в Китае и достаточно глубоком подходе к локализации продукта.

У нас новые онлайны!
Команда Медузы рассказывает о создании нового интерфейса текстовых трансляций. Другие кейсы:

История

How I Managed to Design the Most Successful Educational Computer Game of All Time
R. Philip Bouchard в деталях рассказывает о создании второй версии легендарной образовательной игры Oregon Trail, вышедшей в 1985 году.

How I Managed to Design the Most Successful Educational Computer Game of All Time

Тренды

Uncovering Voice UI Design Patterns
Joe Kappes и Jiwon Paik из Cooper разбирают паттерны взаимодействия с голосовыми интерфейсами. Это 5 приёмов, которые подходят для разных задач.

Uncovering Voice UI Design Patterns

Human-Centered Machine Learning
Josh Lovejoy и Jess Holbrook из Google здорово описали подход к работе с возможностями машинного обучения для дизайнера. Как общаться с разработчиками и аналитиками и прототипировать сервисы до того, как алгоритмы готовы.

Human-Centered Machine Learning

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

Алгоритмический дизайн: Рассылка
Обновил сайт про алгоритмический дизайн кучей новых сильных примеров и запустил рассылку (будет выходить раз в месяц-полтора на английском). Подписывайтесь 🙂

The Newest Email Design Trends of 2017
Обзор визуальных трендов 2017 года в письмах рассылки.

The Newest Email Design Trends of 2017

Виртуальная реальность

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

Умные часы и браслеты

What is Timeless Web Design?
Chris Coyier собрал мнения известных дизайнеров и разработчиков на тему того, можно ли создать сайт, который не устареет за 10 лет. Получилась занятная дискуссия.

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

Большой список Telegram-каналов для дизайнеров, менеджеров продуктов и аналитиков
Алексей Иванов составил список Telegram-каналов для дизайнеров.

Большой список Telegram-каналов для дизайнеров, менеджеров продуктов и аналитиков

A Rather Comprehensive Collection of Design Podcasts
Ste Grainer собрал приличную подборку подкастов по дизайну.

Desmentor — Find A Design Mentor
Проект помогает найти ментора начинающим дизайнерам.

Дэниэл Бурка, Google Ventures: «Дизайн сейчас создается не в фотошопе, скетче или коде»
Выдержки из интервью Daniel Burka из Google Ventures о его видении роли продуктового дизайнера.

What to Do When You’re the Only UX Designer on a Project?
Панельная дискуссия на тему того, что делать, если вы — единственный дизайнер в компании.

Enterprise UX Industry Report 2017-2018
UXPin провели опрос около 3000 дизайнеров в крупных и маленьких компаниях на тему внутренней организации. Вопросы местами странноваты (например, в одну кучу смешаны дизайн-системы и библиотеки паттернов), но есть интересные выводы.

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

IBM

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

Получать свежий дайджест по почте

The post Дайджест продуктового дизайна, июль 2017 appeared first on Юрий Ветров об интерфейсах.

Курс Future London Academy 2017 по UX и продуктовому дизайну

$
0
0

Уже третий год езжу на курс Future London Academy (и второй — курирую его часть по UX и продуктовому дизайну). За это время увидел, как работают несколько десятков интереснейших британских дизайн-студий и продуктовых компаний и здорово расширил свои профессиональные горизонты. В этот раз мы были в Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk и Firedrop, а также послушали Andrea Picchi.

Future London Academy 2017

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

Организация дизайн-команд и процесса

Territory Studio

Креативность можно поставить на поток, как показывает опыт Territory Studio. Они умудряются рождать много интереснейших идей про будущее, причём делать это в нечётких условиях (самого фильма ещё нет) и с впечатляющей скоростью (например, для Мстителей уходило по полдня на экран, для Ex Machina — день). Чтобы это было возможно, они тратят уйму сил на развитие команды и навыков каждого дизайнера, а также стараются представить конечный результат перед началом работы, чтобы не пришлось совсем уж блуждать в поисках (в этом помогают мудборды, скетчи, сторонние авторитеты). На старте они думают скорее об идеальном user journey, не о конкретных взаимодействиях, плюс стремятся быстро попробовать и выкинуть плохую идею. Хотя иногда наоборот, хочется показать нелепость технологий, чтобы добавить юмора.

Полезно думать об интерфейсе для фильма как об операционной системе и делать UI Kit для неё — это позволит видеть общую картину и делать меньше лишних движений. Команда работает совместно над документом с концептом — получается что-то вроде типичного процесса в Google Docs. Инструментарий для прототипирования: Illustrator, Photoshop, After Effects, Cinema 4D (выбирают то, что удобно прямо сейчас). Устраивают хакатоны — за 24 часа общения с клиентом собирают прототип, который улучшается постоянными итерациями. В принятии решений последнее слово часто за режиссёром.

В киношных проектах огромная интенсивность, но не хочется просесть в качестве — поэтому проводили много тренингов по развитию навыков. Правда, после этого обычные проекты казались слишком лёгкими. В том числе поэтому сейчас хотят чуть притормозить рост, чтобы сбалансировать знания по команде (они начинали в рецессию, поэтому привыкли действовать аккуратно как молодая студия). Роли в типичном проекте: дизайнер, аниматор, технолог, но хотят объединить их по тем же причинам, что в нашей среде появился «продуктовый дизайнер». Работают с фрилансерами и благодаря ярким проектам легко находить лучших, но с ними сложно взаимодействовать в такой интенсивной работе — легче подойти и рассказать за 5 минут, чем писать длинное письмо с описанием удалёнщику, так что периодически перевозят некоторых в офис.

У Territory хорошо не только с чётко налаженным производством. Они поработали над огромным количеством ярких фантастических фильмов последних лет (Мстители, Стражи галактики, Марсианин, Ex Machina, Призрак в доспехах, Jupiter Ascending, Трансценденция, Миссия невыполнима, Прометей) и всегда стараются думать о том, куда движется наша цивилизация — часто это становится основной для идей по интерфейсу. Мышь и клавиатура давно перестали быть впечатляющими на экране, поэтому всегда ищут другие пути. Горячая тема сейчас — Agentive UX, для этого изучают наработки в сфере искусственного интеллекта. Для супергеройских фильмов изучают реальных супергероев — пилоты, биологи и т.п. — тех, кто работает со сложными технологиями. Интересно, что профессиональные данные часто оформлены достаточно сухо и их очень много, но эксперт может заметить мельчайшее изменение одного из параметров.

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

Future London Academy 2017Future London Academy 2017

Тёрки в работе есть всегда. Но если люди это осознают — всё будет хорошо. Все понимают, что сделав не вовремя или некачественно — больше работу не получат. Интересно, что Territory сами отвечают за конечный продукт — тут особо нет разработки, поэтому могут дожать концепт до упора. Зато и радость от результата гораздо выше. Например, один из новых дизайнеров работал над «Стражами галактики». Его попросили сделать пару экранов, но не сказали, что это за фильм. Спустя какое-то время он увидел в кинотеатре трейлер со своими кадрами. Был приятно шокирован, стал работать в тысячу раз внимательнее. Созвон с режиссёром или презентация для актёров сильно мотивируют расти. Когда видишь того же Кристофера Нолана, который отвечает за сотню миллионов долларов бюджета, чувствуешь эмпатию к нему и стараешься гораздо сильнее.

Многие идеи из фильмов идут в реальные проекты. Есть совместный проект с Intel на базе Kinect и дополненной реальности, а одна космическая компания экстраполирует данные из видео-потока. Много работают с играми, Hololens, Sony PS VR, Oculus. Технологии так быстро развиваются, что даже концепты в фильмах не всегда успевают — на выход в прокат уходит много времени и реальный мир, бывает, догоняет.

Кстати, в это же время в лондонском центре Barbican шла выставка о фантастическом кино, часть из экспонатов которой делали Territory.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

Moo

Сервис Moo помогает компаниям и обычным людям с печатью открыток, визиток и другой полиграфии. Интересно, как дизайнеры из двух частей бизнеса — онлайн-сервиса для заказа и художников/иллюстраторов собственной мерчи — влияют друг на друга. Они регулярно общаются и просто видят рядом другую ветку дизайна, что здорово помогает развивать кругозор. Сама команда структурирована по модели Spotify: дизайнеры сидят в командах (процесс создания, шаблоны и т.п.) и делятся на два «клана» (процесс создания и контент), исследователи работают сразу с несколькими как внутренние консультанты, есть гильдия для дизайн-системы (с двумя заказчиками: от дизайна и разработки). Один из источников продуктовых идей и инсайтов — команда поддержки, с которой периодически проводят рабочие сессии.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

Интересно, что через пару часов после лекции в офисе Moo прошёл London Design Meetup, организованный Kevin Clark из нашей группы. В целом он мало отличался от отечественных — пицца, пиво и несколько небольших презентаций на общие темы.

Future London Academy 2017Future London Academy 2017

Deliveroo

Deliveroo очень быстро выросли с десяти до более тысячи сотрудников за 3 года, так что дизайнерам нужно было успевать за этой скоростью. Сейчас это около 30 человек, отвечающих за продуктовый дизайн, контент-стратегию и исследования, которые делятся на несколько подкоманд (consumer core по поиску и отслеживанию заказа (4 человека), consumer experience (6), рост (3), доставка (9), рестораны (5)). Как получилась такая структура команд? Как обычно, с малой команды, которая знает проблему полностью, может всё сделать сама. А дальше уже развивались вместе с продуктовыми командами. Тут всё похоже на взросление человека — взрослый и подросток ведут себя и ощущают по-разному; ниша требует разного опыта, разных подходов к работе, разного фокуса. Вызовы, которые есть сейчас, будут непохожи на те, что будут завтра.

Future London Academy 2017

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

  • Культура — ключевой фокус. Если в дизайн-команде хорошая культура, её можно распространить на всю компанию. Будучи открытыми в целом, могут пропагандировать достижения.
  • Ритуалы — как получать обратную связь, давать её. Глава дизайна Simon Rohrbach знает меньше всего текущего контекста, ему нужны ритуалы для того, чтобы оставаться в курсе происходящего.
  • Инструменты.
  • Окружение.
  • Системы — не хочется переизобретать колесо постоянно. Хочется решать проблемы, а не думать о тенюшках. Дизайн-система работает в коде и Sketch.

У Deliveroo глубокое понимание пользователя, ведь еда — универсальная и очень человечная вещь, очень эмоциональная штука, это усиливает эмпатию. Здорово, что каждый сотрудник — по сути, клиент, потому что все едят и заказывают еду. Например, каждую пятницу — доставка на весь офис (заказали и для нашей группы). Они описывают предметную область как беспорядочную, человечную, международную. Для клиента главная цель — найти еду как можно проще и получить как можно быстрее. Для водителя — вообще другая история, как найти точку доставки. Они описывают свою задачу как дизайн для людей по всему миру, у которых разный багаж опыта, которые говорят на разных языках, которые пытаются заработать деньги; они могут быть на велосипедах, скутерах, машинах, пешком, в ресторане, с лопнувшим колесом; им приходится одевать перчатки, прятаться под проливным дождём, быть в 40° жаре, при этом доставлять мороженое или пиццу, использовать приложение 8 чесов подряд. Возвращаемость очень завязана на experience, который получил человек. Причём решения проблем в духе возврата денег, если еда не приехала, не очень-то работает — клиент всё равно голодный.

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

Made by Many

Made by Many стремятся развивать сотрудников и клиентов, для чего подготовили три методички по развитию навыков дизайнеров, стратегии и технологиям — в них описано, как выглядит хороший результат. Перестраивают агентство, чтобы сфокусироваться на цифровой трансформации клиентов, ведь чтобы делать хорошие продукты, нужно делать инновации и о том, как вы работаете. Так что структура компании регулярно меняется и корректируется — это один из главных вызовов современных компаний. Мы решаем похожую задачу с гармоничным развитием команды и было интересно увидеть студийный подход.

Future London Academy 2017
Future London Academy 2017Future London Academy 2017

Сейчас они называют себя продуктовыми дизайнерами, хотя наблюдали, как термин менялся от проекта к проекту. Как правило, такой универсальный дизайнер работает в проекте со стратегом, разработчиком и менеджером. Пару лет назад кодифицировали эту должность в виде мощной матрицы навыков — она помогает оценивать текущих сотрудников и новых кандидатов. Сейчас уровень владения оценивается по шкале от 1 до 6 (уровень 6 получить невозможно). При этом важно регулярно демонстрировать навык. Основные:

  1. Ключевые дизайнерские навыки. От конкретных дизайн-решений до процесса и культуры в компании.
  2. Исследования и инсайты. Техники и инструменты, которые помогают использовать их в разных ситуациях.
  3. Креативное решение проблем. Как обходить ограничения и затыки. Как переносить опыт из одной отрасли в другую.
  4. Прототипирование и визуализация. Как транслировать идеи в артефакты и прототипы, которые можно проверить. Не убиваются вокруг определённого инструмента или техники — важно наименьшими затратами получить большее количество знаний.
  5. Производство и «отгрузка». Как сделать дизайн на практике.

Дополнительные навыки:

  1. Презентация и коммуникация
  2. Командная работа
  3. Менторство
  4. Нетворкинг и найм
  5. Компания и отрасль.

Future London Academy 2017

Для оценки используют приложение Coach Amp 360 Reviews. Это происходит в ходе регулярных мини-встреч с менеджерами (еженедельно или 6 месяцев для длинного ревью). Чтобы прокачивать определённые навыки, они назначают дизайнеров на проекты, в которых требуется проявить его. Изучают 20 факторов для того, чтобы дать проект дизайнеру: есть ли нужный опыт, есть ли нужная креативность и т.п. Главное балансировать — если дизайнер сделал уже много похожих проектов, ему, наоборот, может быть скучно.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

Связка бренда с интерфейсом

Analog Folk

Analog Folk пытаются выйти за рамки классического брендингового агентства — они расширяют понятие бренда с помощью алгоритмов. Их миссия — использовать цифровые инструменты, чтобы сделать аналоговый мир лучше. Долгое время в формуле «Brand = Promise + Experience» превалировала первая составляющая и только в последнее десятилетие начали уделять больше внимания второй. Современные бренды определяются тем, что они делают, а не только тем, что говорят; для этого нужно перестать просто реагировать на существующие сценарии взаимодействия и помогать формировать их. Так что новая модель — предвосхищать, она поддерживает и помогает экспертной помощью.

Future London Academy 2017

У пользователей есть невыраженные амбиции, в достижении которых бренд может помочь — тогда он станет цениться сильнее. Например, для Nike это стать сильнее. Для этого Analog Folk работают со стеком ИИ:

  • Human interface
  • Decision logic
  • AI services
  • Development platform
  • Data services

Moving Brands

Moving Brands активно вовлекают клиентов в работу над брендом. Они устраивают совместные рабочие сессии, на которых проверяют связку бренда с интерфейсом — насколько основные экраны и сценарии соответствуют ключевым принципам. Получается сильный инструмент для поиска нестыковок и их исправления. Причём вовлечение клиента помогает как лучше объяснить принятые решения, так и повысить шансы на то, что айдентика будет успешно развиваться и после сдачи проекта. Наша группа поучаствовала в таком воркшопе на условном примере.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

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

Future London Academy 2017

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

Monese

Мобильный банк Monese — редкий пример сделанного с любовью к деталям продукта, который существует в реальной жизни, а не просто концепт на Dribbble. У него современный визуальный дизайн, хорошо проработанный интерфейс с фокусом на упрощение операций и яркая эмоциональная составляющая. Кроме того, бренд хорошо провязан с интерфейсом, так что цифровой продукт и маркетинговая активность отлично интегрированы. Это получилось благодаря системному подходу:

  1. Brand storyboarding. Шаги взаимодействия с брендом
  2. Brand values. Сито для проверки дизайн-решений, прогоняются через него. Спросили сотрудников про 3 ценности, которую выражает компания. Много дизайн-спринтов, мудбордов.
  3. Interaction branding. Основой для бренда стали ключевые взаимодействия с продуктом (в первую очередь — платежи). В итоге получается и обратный эффект — брендинг сам начинает определять взаимодействие с продуктом.
  4. Brand system.

Future London Academy 2017

Ключевое взаимодействие в продукте — отправка денег, так что фокусировались на нём. Брендинг сам по себе отражает простоту отправки денег, их постоянное движение. Поэтому собирая мудборды искали интересные примеры того, как можно показать движение статической картинкой. Движущиеся линии отражают бесконечный поток идущих платежей. Итоговая идея — статический «снимок» движения. Для этого же, например, старались делать все изображения карты в перспективе — это дополнительно усиливает движение. Также для поддержки бренда важно было отразить мягкость линий в графиках, поэтому пришлось плотно поработать с разработкой. Чтобы убедиться, что нет пересечений с конкурентами, они сделали огромный артборд со скриншотами других продуктов. У них есть шикарный кейс процесса ребрендинга.

Future London Academy 2017

Бизнес-цели компании в целом строятся вокруг UX (простота и скорость отправки денег), поэтому легко было связать их с интерфейсом. Они стараются не думать, как типичный банк, и ищут вдохновение в потребительских продуктах типа Netflix и Spotify. Принципы интерфейса собрали скорее из лучших практик, не особо связывали с брендом. У каждого из них есть характеристики, которые ведут к конкретным действиям:

  • Accessible
  • Simple
  • Valuable

Future London Academy 2017

Активно тестировали прототипы в UX-лаборатории. Они не были ограничены существующим продуктом, поэтому бесстрашно пробовали разные подходы с взаимодействием жестами. Главный критерий — не как быстро пользователь ввёл логин и пароль, а как быстро удалось верифицировать его личные данные.

Абсолютно всё сделано внутри команды. Всё заняло 6 месяцев — сами считают, что это долго. В классической брендинговой компании это заняло бы месяц. Идеи могут идти ото всех участников команды — от поддержки и безопасников до дизайнеров. Если требуется что-то продать, зовут маркетологов и команду роста. Вся компания — это lean-команда, которая делает всё вместе. Пару раз попробовали дизайн-спринты и хотели бы больше. Разок сделали полностью по книжке, но в основное время команда находится в производственном режиме и на это просто нет времени и ресурсов. Забавно, что даже у компаний среднего размера методология не вписывается в рабочий режим в чистом виде.

Дизайн продуктов

Microsoft Lift Studios

Microsoft хотели сделать Windows снова креативным, где одно из горячих направлений — мир 3D. Выбрали за основу MS Paint, как достаточно подходящий под задумку (сделать сложную область доступной массовому пользователю) и уже знакомый куче людей, к тому же уже работающий на куче компьютеров. Принципы дизайна получились достаточно базовыми: простота, скорость, лёгкость использования. Видео с видением продукта показало, куда может двигаться продукт и здорово помогло продать идею менеджерам и пользователям (в лаборатории Microsoft Lift постоянно видят отдачу от таких видео).

Future London Academy 2017

Оригинальный продукт появился ещё в 1985 году. Дизайн-команда посмотрела все пять версий на компьютерах и версиях Windows того времени — это помогло лучше понять продукт и его идеологию. Они также исследовали, как люди заходят в Paint, куда уходят из него — как инструмент вписан в более широкие сценарии работы. Они смотрят, какие действия пользователи совершают в приложении и какие из них приводят к возвращению, а какие — нет. После этого находят и чинят проблемы и замедления. Интересно, что они научились A/B-тестировать десктопное приложение. Благодаря телеметрии могут видеть кликабельность элементов интерфейса — например, куда нажимают на стартовом экране.

Future London Academy 2017

Делают тонны интерактивных прототипов, ведь до них такую задачу никто не решал. Одним из первых вопросов было то, можно ли вообще смешать 2D и 3D и первым шагом было простое превращение двухмерных картинок в трёхмерные. Словили сильный вау-эффект и пошли дальше — может ли «казуальный» пользователь сразу рисовать в 3D? Для этого нужно было сильно упрощать интерфейс — например, отказались от свободной камеры, поскольку при тестировании непрофессионалы дизориентировались и предпочитали фронтальную. Чтобы развивать и улучшать интерфейс в таком ключе, они выдвигают и прототипируют гипотезы. Для прототипирования использовали PowerPoint и Unity, первую версию Paint 3D даже собирали в нём — это был самый быстрый способ. Чтобы такие прототипы были возможными, идёт плотное взаимодействие между дизайнерами, инженерами и 3D-моделлерами. А юзабилити-тестирование делается централизованной лабораторией в США.

Future London Academy 2017

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

Вообще, в инкубаторе Microsoft Lift Studios делают много интересных проектов: например, Hololens, Paint 3D, клавиатуру SwiftKey.

Future London Academy 2017

Firedrop

Конструктор сайтов Firedrop использует алгоритмический дизайн, чтобы упростить жизнь владельцам малого бизнеса. Чтобы не повторять ошибок The Grid, которые попытались решить слишком универсальную задачу, они выбрали более узкую и приземлённую задачу — убрать плохих дизайнеров. До этого у основателя Marc Crouch была своя веб-студия, но у многих клиентов не было денег на хороший дизайн, так что приходилось идти на какой-нибудь Fiverrr. Они стали целевой аудиторией продукта. У инструмента очень чёткий таргетинг на генерацию лидов, на первом этапе делают просто одностраничники — это облегчает понимание того, как работают сайты на платформе и почему там что-то могло сломаться.

Future London Academy 2017

Firedrop смотрели на Squarespace, Wix и другие конструкторы, изучали шаблоны и их популярность. Ограничивают функциональность, чтобы не перегружать инструмент — например, видео нельзя загружать, но можно импортировать с YouTube. Оптимизируют под SEO и чистый код. Бота в инструмент добавили не сразу, чтобы не казаться просто исполнителем заказов, а скорее опытным и полезным консультантом. Это помогает сформировать доверие, а не просто дань моде. Одно из исследований сравнило, кому в службе поддержки доверяют больше: людям или ботам. Ботам люди открывались лучше. С новыми инструментами вообще сначала нужно получить доверие — люди должны понять, что выходит привычный сайт.

Как автоматизировать дизайн? Лучше всего начать с конечного результата и потом идти от него к принципам. Могут ли компьютеры быть художниками? В известной цитате Пикассо хорошие художники копируют, лучшие — воруют. Компьютеры сейчас хорошо имитируют, генеративное искусство у них получается вообще отлично. Но креативность ли это? В дизайне меньше толерантность к нарушению правил, чем в искусстве. Одна из главных проблем инструментов алгоритмического дизайна — как ограничить пространство сгенерированных решений. Firedrop может выдавать миллионы комбинаций, но они сузили результат до ~800 вариаций. Сначала пытались делать это вручную, но потом начали применять правила: симметрия, контраст, пространство, ритм. Чтобы проверить работоспособность концепции, они меняют вид своего сайта каждую неделю.

NomNom

Инструмент для сбора и анализа продуктовых инсайтов NomNom решает задачу, до которой у большинства компаний никак не дойдут руки — объединить вместе обратную связь из многих источников (обращения в службу поддержки, пользовательские исследования, аналитика, отзывы в магазинах приложений и т.п.). Инсайт не происходит моментально. Скорее, постепенно копятся знания о пользователях и продуктах, которые потом дают прорыв понимания. Мало того, что потребность в таком источнике инсайтов ещё нужно осознать — нужно пройти длинный путь по изменению культуры перед тем, как компания может стать data-driven. На деле внедрение требует настолько больших изменений, что всё быстро обламывается. Мы движемся в эту сторону достаточно давно, но скорость недостаточна и проблем по ходу выше крыши. Но выхлоп есть и он увеличивается с решением каждой проблемы. В ходе общения с клиентами Sofia Quintero собрала проблемы внедрения:

  • Доступ к данным
  • Согласование юристов
  • Получение данных в правильном формате
  • Бюджет
  • Доступ к raw данным, не summaries
  • Получение доступа к клиентам

Future London Academy 2017

Она также ссылалась на шикарную памятку по методам пользовательских исследований и аналитики Unstuck Map от Nikkel Blaase.

Andrea Picchi (Sony Mobile)

Andrea Picchi из Sony Mobile говорил о важности построения отношений продукта с пользователем — это связь для обмена ценностью. Конкурент может скопировать функции, но сложно скопировать ценность. Она бывает неявной: например, для Старбакса один из главных KPI — количество времени, которое клиент провёл в кофейне, ведь это помогает строить взаимоотношения. Правда, дизайнеры не могут влиять на отношения непосредственно, так что приходится действовать опосредованно, через триггеры. Научиться работать в Скетче или Иллюстраторе — максимум, месяц. А вот научиться решать проблемы — гораздо сложнее. В Sony Mobile есть SWAT-команда — 5 сильных дизайнеров, которые понимают это и тратят 20% своего времени на решение проблем других команд.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

Общие впечатления

Если суммировать главные впечатления от этого года, то я бы выделил вот что:

  • Сделать сложное простым — непростая задача, но, можно выбрать понятный сегмент пользователей и их проблему, которая поможет запустить простую версию продукта. Об этом рассказывали создатели Microsoft Paint 3D (жёсткий фильтр функциональности, упрощение взаимодействия с интерфейсом) и Firedrop (фокус на одностраничных промо-сайтах).
  • «Гибридный» дизайнер, совмещающий несколько смежных навыков, важен не только в продуктовых компаниях: к этому пришли и UX-агентства (Made by Many), и менее привычные дизайн-студии (Territory), и экспериментальные продукты (Microsoft).
  • Интересные офисы: Microsoft Lift Studios (смесь привычного рабочего пространства и лофта), Made by Many (шикарный вид и необычное переоборудование промышленного объекта), Analog Folk (несколько интересных этажей), Moo (сумели огромный ангар неплохо зонировать и облагородить).
  • Дизайн-спринтами называют любую вариацию на тему этой методологии, не обязательно попадающую в пятидневный формат. Правда, в таком случае это просто современный дизайн-процесс работы над цифровым продуктом, который не нужно брендировать.
  • Успешная провязка бренда с интерфейсом зачастую предполагает тесный ко-дизайн с представителями бизнеса. Это видно и по шикарному результату Monese, и по подходу с рабочими сессиями Moving Brands.

Технически, я выступил в Лондоне — подменил утреннего спикера рассказом про алгоритмический дизайн. Спасибо Kevin Clark за шикарные sketchnotes для всех выступлений.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

В этом году у нас была ещё более разнообразная группа: дизайнеры из Бразилии, Австралии, Голландии, Бельгии, Австрии, Германии, Британии, США, Канады и России. Компании участников были представительны сами по себе: Facebook, Shopify, Yahoo! / Oath, Европейский Центробанк, ONY, Сбербанк. Это добавляет немало интереснейших разговоров на полях в дополнение к основной программе о том, как работают продуктовые дизайнеры в разных странах и компаниях. Например, Paul Aultran из Facebook до этого работал в Google и был фасилитатором дизайн-спринтов, Kevin Clark рассказывал о дизайн-системе Shopify Polaris, а Konrad Kaczmarczyk показал свой плагин Satchel для синхронизации символов в Sketch.

Future London Academy 2017

Future London Academy 2017Future London Academy 2017

Лондон интересен тем, что здесь одинаково хорошо развиты разные направления дизайна — как правило, страна фокусируется на каком-то одном-двух. Хотя после трёх лет поездок на курс и всех просмотренных компаний я понимаю, что в России чуть ли не самый сильный в Европе уровень дизайна цифровых продуктов — там, как правило, либо филиалы международных мастодонтов, либо компании меньшего масштаба. Дизайн-студии там сильнее (частично в силу того что появились раньше и успели сделать больше наработок, хотя и других причин хватает), классический бизнес вроде банков и телекомов на сопоставимом уровне (те же Альфа Банк, Тинькофф, МегаФон, новые инициативы Сбербанка делают мощнейшие вещи).

Как по мне, одинаково плохи как шапкозакидательство (да что они там знают), так и идолопоклонничество (мы серые и убогие). Эти поездки здорово помогают мне получить сбалансированное понимание профессии и эта внутренняя гармония позволяет не метаться из стороны в сторону, фокусируясь на долгосрочных планах. В общем, подключайтесь в следующем году (13-19 августа 2018) и расширьте свои профессиональные горизонты 🙂

P.S. Изменил мнение о местных бургерах в лучшую сторону и хорошенько пополнил список.

The post Курс Future London Academy 2017 по UX и продуктовому дизайну appeared first on Юрий Ветров об интерфейсах.

Дайджест продуктового дизайна, август 2017

$
0
0

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

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

Rethinking User Interface Design for the TV Platform
Pascal Potvin описывает основные технические и поведенческие особенности проектирования интерфейсов для телевизоров.

What we mean when we talk about «Product Feels»
Толковые мысли Mike Walker из Made by Many о том, как создать у продукта правильное ощущение на примере своих решений.

What we mean when we talk about ‘Product Feels’

Designing The Perfect Feature Comparison Table
Виталий Фридман в деталях разбирает лучшие практики создания таблицы сравнения товаров в интернет-магазинах.

Designing The Perfect Feature Comparison Table

What Would Augment Reality? (1-10)
Luke Wroblewski попробовал предложить потенциально полезные задачи для использования очков дополненной реальности. Правда, он добавляет, что они должны давать достаточно ценности, чтобы терпеть неудобство слишком частой подзарядки.

The Sad State of Payment Buttons
Толковый разбор многообразия кнопок платёжных систем от John Freeborn. Он также продаёт шаблон с ними.

The Sad State of Payment Buttons

UX for the Industrial Environment, Part 1
Толковые советы Jon Walter по проектированию промышленных интерфейсов.

7 Really Good Unsubscribe Pages + Preference Centers
Kait Creamer собрала примеры хороших страниц отписки от рассылки и изменения настроек частоты и формата таких писем.

«Get Started» Stops Users
Aurora Harley и Kim Flaherty из Nielsen/Norman Group пишут о новой навигационной проблеме — бесполезных кнопках «Get Started», которые ничего не говорят о конкретном действии и зачастую уводят пользователя с основного пути. Проблему усугубляет популярность бесполезных первых экранов с фоновой картинкой, логотипом и кнопкой — вместо того, чтобы крутить вниз, люди жмут на первую кнопку.

«Get Started» Stops Users

How to Present Scientific Findings Online
Kate Meyer из Nielsen/Norman Group продолжает тему грамотной подачи научной информации в вебе.

Back-to-Top Button Design Guidelines
Hoa Loranger из Nielsen/Norman Group даёт советы по грамотному использованию кнопок «наверх» в мобильных и десктопных интерфейсах.

Исследования Baymard Institute

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

Starting a Design System
Отличная памятка Nathan Curtis по ведению дизайн-системы как обычного проекта. Он неплохо расписывает ключевые фазы от стратегии и планирования до пилотного запуска и планомерного развития.

Starting a Design System

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

Carbon Themes
Конструктор тем оформления в дизайн-системе IBM Carbon. Он позволяет заменить базовые переменные и получить новый стиль для продукта. Как и зачем его делали.

Material Design

  • Mustafa Kurtuldu из Google рассказывает, как команды Inbox и Keep работали с гайдлайнами material design. Они не совсем подходили под задачи продукта, поэтому пришлось местами отойти от них. Занятно, как Google легко делает это сам, при этом зарубает подобные отхождения при допуске в Google Play.

How Google Designers Adapt Material

Android O
Вышла финальная версия Android O. Она постепенно приходит на Google Pixel и последние модели Nexus.

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

Bootstrap 4 Beta

Creating a Collaborative Style Guide for Designers and Engineers
Занятный подход к спецификации типографики от Ying Wang, Daniel Vancura и Phill Farrugia — таблица с возможными комбинациями параметров.

macOS Desktop Kit
Дизайн-команда Facebook выложила шаблоны дизайна для macOS для Sketch.

iOS 11

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

Designing Marketing Email and Newsletters — UX Research Findings
Интересные выводы из нового исследования Nielsen/Norman Group о том, как пользователи относятся к почтовым рассылкам. Например, понятие «спам» изменилось — сейчас им всё чаще называют письма от сервисов, на которые пользователь сам подписался.

Marketing Email and Newsletters: UX Findings Then and Now

The Other Side of Empathy
Holly May Mahoney из Stanford d.School о том, как пользовательским исследователям сохранять психологический комфорт и избегать выгорания, когда приходится так часто вникать в проблемы других людей.

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

Canvas collection — A list of visual templates by Andi Roberts
Andi Roberts собрал большую коллекцию шаблонов концептуальных карт и моделей для описания продуктов и пользователей.

Canvas collection — A list of visual templates by Andi Roberts

User journey mapping: The workshop
Толковое пошаговое руководство David Travis по составлению customer journey map. Он показывает несложный пример разбора деятельности, которую постепенно превращает в автоматизируемый сценарий. В продолжение темы:

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

Studio
Новый новый инструмент для прототипирования и дизайна интерфейсов. В отличие от большинства аналогов (читай, клонов Balsamiq) не полагается на древние паттерны, а предлагает собственные уникальные решения.

Sketch 46
Улучшена работа с текстом (вертикальное выравнивание, расчёты расстояния от базовой линии), развивается Sketch Cloud (проще делиться макетами), много мелких улучшений.

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

Adobe XD

PSD to Sketch Design Converter
Создатели Avocode запустили в экспериментальном режиме конвертер макетов для Photoshop в Sketch. Они также готовят конвертеры для Adobe XD. Анонс.

PSD to Sketch Design Converter

Sketch2AE — Plugin for Sketch and After Effects
Плагин для AfterEffects, позволяющий импортировать макеты из Sketch. Анонс от дизайн-команды Google. Они также запустили плагин Inspector Spacetime, который показывает спецификацию анимации.

Sketch2AE

Другие плагины для After Effects:

Smartmockups — The easiest way to create stunning product screenshots without using Photoshop
Приложение SmartMockups помогает быстро показать, как выглядит интерфейс на устройстве. Есть версии для Windows и Mac.

Gravit Designer

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

Cleaning Data From Surveys & Online Research
Jeff Sauro рассказывает о способах отбраковки результатов пользовательских исследований, если респондент был нечестен или результаты его опроса обрывочные. Он приводит несколько критериев, по комбинации которых можно отловить некачественные данные.

Does the Fidelity of a Prototype Affect Results?
Jeff Sauro собрал научные публикации за последние 20 лет на тему того, насколько проработка прототипа влияет на результаты его тестирования с пользователями.

Are app reviews worth reading?
John Saito из Dropbox провёл приличное количество времени за изучением отзывов в магазине приложений и даёт советы о том, как делать выводы об интерфейсных проблемах.

Are app reviews worth reading?

Who needs backup dancers when you can have confidence intervals?
Наглядная памятка Stefanie Owens из IBM для дизайнеров и пользовательских исследователях об основах статистики.

When to Provide Assistance in a Usability Test
Советы Jeff Sauro по тому, как максимально аккуратно давать подсказки респондентов во время пользовательских исследований.

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

Framer

  • Framer выпустили свой первый UI Kit Fiber. Пока только для iOS.

Bootstrap Studio

  • Bootstrap Studio, ещё один инструмент для дизайна сайтов на базе Bootstrap.

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

The Quick, New Way Designers Can Test User-Centric Metrics
James Y Rauhut из IBM показывает, как работает встроенный в Chrome аудит сайтов на производительность, доступность и другие характеристики.

Метрики и ROI

How do you set metrics?
Советы Julie Zhuo по выбору продуктовых метрик для дизайнеров. Интересный пример того, как Facebook cмог выразить свою текущую стратегию про более тесное связывание людей через сообщества, которое выразилось в функциональности групп, а после этого — уже начал думать о конкретных показателях успеха.

How do you set metrics?

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

To be a design-led company
Ashleigh Axios рассказывает о том, как Automattic, создатели WordPress, меняют дизайн в компании. Интересный взгляд на UX-стратегию, отличный от банальных «лестниц»: они разделяют её на тактический уровень, системные инновации и двигатель трансформаций.

Life inside the design asylum
Достаточно подробный рассказ Arin Bhowmick о том, как устроен процесс в одной из дизайн-команд IBM. Полезный график работ по типовому проекту.

Life inside the design asylum

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

UX Meets MBA — What Happens When A Designer Goes To Business School
McLean Donnelly рассказывает о том, как ему помогло в дизайнерской работе обучение на MBA. Интересные примеры расчёта ROI дизайн-решений.

The Pop-Up Employer — Build a Team, Do the Job, Say Goodbye
Noam Scheiber описывает набирающий популярность формат «временных команд», собирающихся под конкретный проект. Они решают задачу в течение нескольких недель или месяцев и дальше расходятся по своим делам. Так можно собрать супер-звёзд, которые иначе вряд ли задержались бы надолго.

Troubleshooting Group Ideation — 10 Fixes for More and Better UX Ideas
Kate Meyer из Nielsen/Norman Group даёт советы по улучшению групповой динамики для брейнштормов и сессий ко-дизайна.

Design Critiques, part I — A Culture of Effective Feedback
Gerren Lamson из Creative Market описывает стандартизированный процесс критики дизайна, который используется в компании. Достаточно дотошное описание, которое будет продолжено во второй части.

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

How I Stopped Worrying and Learned to Love Design Thinking
Как и многие опытные проектировщики интерфейсов, Christina Wodtke скептически относится к хайпу вокруг «дизайн-мышления» — во многом это просто добротный процесс проектирования, который существует давно. Но если смириться с тем, что люди из других профессий используют термин как попало, в нём есть несколько важных дополнений к стандартному процессу: ко-дизайн, «думание руками» и итеративное моделирование идеального результата. Влад Головач недавно писал на эту же тему.

How I Stopped Worrying and Learned to Love Design Thinking

Кейсы

Uber — Perfecting the Pickup
Шикарнейший подробный рассказ Simon Pan о редизайне процесса вызова такси в Uber. Много деталей о том, как и почему принимались решения, куча вводных о реальном использовании функциональности и поведении пассажиров, умных интерфейсных решений.

Uber — Perfecting the Pickup

(Re)writing our bot for advertisers
Emily Konouchi из Facebook рассказывает о создании бота для рекламных продуктов. Интересно, как правильная постановка фраз и корректировка сценария повысила вовлечённость и повысила прибыль.

(Re)writing our bot for advertisers

Designing Twist — The challenge of making teamwork less stressful
Ana Ferreira и Alex Muench рассказывают о работе над Twist, новым сервисом Todoist для совместной работы на стыке почты и мессенджеров.

How I do Developer UX at Google
Tao Dong из Google рассказывает о том, как компания улучшает интерфейсы инструментов для разработчиков.

How we designed Foursquare Swarm 5.0
Greg Dougherty рассказывает о редизайне приложения Swarm.

Тренды

Sayspring — Free Voice Design & Prototyping Software for Alexa and More
Сервис для прототипирования голосовых интерфейсов для Amazon Alexa и Google Home. Прототип запускается на устройстве и с ним можно взаимодействовать голосом. Очень интересное интервью с основателем продукта Mark Webster, в котором он рассказывает о своём видении дизайна для голосовых интерфейсов.

Sayspring

Usability Testing of Spoken Conversational Systems
Susan L. Hura рассказывает о нюансах и сложностях юзабилити-тестирования голосовых интерфейсов. Очень полезные мысли на тему — например, о том, что делать в ситуации, когда метод ввода и метод вывода совпадают, как в случае с речью.

Designing the User Experience of Machine Learning Systems
Весной 2017 года в Пало Альто (США) прошёл симпозиум Association for the Advancement of Artificial Intelligence. Одна из секций была посвящена использованию машинного обучения для дизайнеров. Среди её выступлений — рассказ Janin Koch о творческом партнёрстве с алгоритмами. В продолжение темы:

It’s Time to Design Emotionally Intelligent Machines
Sophie Kleber размышляет на тему того, как развить эмоциональный интеллект у компьютеров. Тема поднялась в 1995 году с термином «affective computing», а сейчас появилось много технологических возможностей для этого.

Веб-брутализм

Windows 10 will soon include built-in eye tracking
Windows 10 можно будет управлять взглядом при наличии отдельного eye tracker. Она нацелена на людей с ограниченными возможностями, но открывает интересные возможности и для экспериментов. В продолжение темы:

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

DesignBetter.Co — Discover the world’s best design practices
InVision запустили образовательный ресурс, который публикует онлайн-книжки. Сейчас есть три: продуктовый дизайн, дизайн-мышление и дизайн-менеджмент. Aarron Walter рассказывает о том, зачем запущен сайт. Миссия InVision — помогать дизайн-командам быть более продуктивными и образовательные материалы тоже работают на это. Они также планируют серию подкастов и, судя по всему, конференции.

Design Better

100 Questions Designers Always Ask
Отличный список-шпаргалка важных вещей о продукте и его дизайне от Jon Moore. Хорошо подойдёт как чек-лист для себя и своей команды.

100 Questions Designers Always Ask

Principles for Mobile Design
Steven Hoober описывает свои принципы работы над мобильными интерфейсами.

Cultivating a design career beyond job titles
Lehel Babos из IBM описывает своё видение продуктового дизайнера. Он включает конкретные навыки, знание предметной области, подход к решению проблем и эмпатию.

To those new to design
Серия житейских советов для дизайнеров от Dylan Wilbanks.

The State of Design
Пародия на типичную статью о дизайне интерфейсов от Pete Lacey.

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

A8C DESIGN ???????? — Stuff we design in the ???? for you …
Блог дизайн-команды Automattic, создателей WordPress.

Покупки дизайн-студий крупными компаниями

Специально для Хабра: интервью с Аланом Кеем
Пользователи Хабра задали вопросы Alan Kay, легенде лаборатории Xerox PARC. Многие вопросы касаются истории и будущего интерфейсов.

LinkedIn Design
Сайт дизайн-команды LinkedIn.

The Success and Failure of Design Inc.
Marc Hemeon рассказывает, как создавался и почему провалился стартап по поиску дизайнеров Design Inc.

Материалы конференций

Leading Design 2017
Конференция по дизайн-менеджменту цифровых продуктов Leading Design пройдёт 25-27 октября в Лондоне. Тема горяча как никогда — в этом году уже 5 конференций.

Курс Future London Academy 2017 по UX и продуктовому дизайну
Рассказ о курсе Future London Academy по UX и продуктовому дизайну 2017. В этот раз включил почти все конспекты, что обычно делают по ходу лекций — получился самый длинный из отчётов. Заметки из визитов в Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk, Firedrop, а также Andrea Picchi.

Курс Future London Academy 2017 по UX и продуктовому дизайну

Если суммировать главные впечатления от этого года, то я бы выделил вот что:

  • Сделать сложное простым — непростая задача, но, можно выбрать понятный сегмент пользователей и их проблему, которая поможет запустить простую версию продукта. Об этом рассказывали создатели Microsoft Paint 3D (жёсткий фильтр функциональности, упрощение взаимодействия с интерфейсом) и Firedrop (фокус на одностраничных промо-сайтах).
  • «Гибридный» дизайнер, совмещающий несколько смежных навыков, важен не только в продуктовых компаниях: к этому пришли и UX-агентства (Made by Many), и менее привычные дизайн-студии (Territory), и экспериментальные продукты (Microsoft).
  • Интересные офисы: Microsoft Lift Studios (смесь привычного рабочего пространства и лофта), Made by Many (шикарный вид и необычное переоборудование промышленного объекта), Analog Folk (несколько интересных этажей), Moo (сумели огромный ангар неплохо зонировать и облагородить).
  • Дизайн-спринтами называют любую вариацию на тему этой методологии, не обязательно попадающую в пятидневный формат. Правда, в таком случае это просто современный дизайн-процесс работы над цифровым продуктом, который не нужно брендировать.
  • Успешная провязка бренда с интерфейсом зачастую предполагает тесный ко-дизайн с представителями бизнеса. Это видно и по шикарному результату Monese, и по подходу с рабочими сессиями Moving Brands.

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

Получать свежий дайджест по почте

The post Дайджест продуктового дизайна, август 2017 appeared first on Юрий Ветров об интерфейсах.

Viewing all 36 articles
Browse latest View live




Latest Images

Pangarap Quotes

Pangarap Quotes

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC