Продуктовый дизайн: 20 самых важных материалов за октябрь
Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.
Руководитель технологий проектирования Airbnb Бенджамин Уилкинс рассказывает о новом экспериментальном решении компании — с помощью алгоритмического дизайна они научились сканировать бумажные скетчи интерфейсов и превращать их в готовый макет на базе типовых компонентов. Это похоже на подход инструментов проектирования вроде Adobe Comp, которые превращают набросанные от руки фигуры в аккуратные.
Microsoft прекратила выпуск Kinect, игрового контроллера для Xbox. С 2010 года компания продала 35 миллионов устройств, и оно даже попало в книгу рекордов Гиннеса в 2011 году как самое быстропродаваемое дополнительное устройство для игр, но смена стратегии Xbox на развлекательное устройство широкого профиля не удалась, а ценовая война с Sony заставила убрать Kinect из стандартного комплекта.
При этом технологии, впервые появившиеся в устройстве, сейчас активно используются в других продуктах Microsoft — шлеме смешанной реальности HoloLens, голосовом помощнике Cortana, авторизации по лицу Windows Hello.
Программист Алекс Кипман, который был одним из главных евангелистов Kinect, теперь плотно занят HoloLens. Он рассказывает интересную концепцию сложности управления смешанной реальностью — Kinect был важным первым шагом, но нужно идти дальше.
Четыре года писал статьи о UX-стратегии — получилась толковая методичка по дизайн-менеджменту, которой мне самому не хватало на старте изменений в Mail.Ru Group. Я смог здорово разложить по полочкам идеи по развитию дизайна в нашем подразделении и прочитать адову кипу статей и книг на близкие темы, так что знания стали намного более сбалансированными.
Теперь настала пора собрать всё в книгу. Сейчас на мини-сайте хранятся все ссылки на статьи о UX-стратегии. Он будет обрастать полезными инструментами в дополнение к тексту.
Сейчас ключевая идея — набор паттернов дизайн-менеджмента, вокруг которых всё и будет играть. Надеюсь, в следующем году получится издать книгу. А пока можно подписаться на рассылку новостей о ней.
Две контрастные статьи журналиста Джошуа Топольски о том, как Google заметно улучшила дизайн цифровых и физических продуктов, а Apple, напротив, делает всё больше спорных и костыльных решений. Перевод статьи про Apple.
Консалтинговый гигант Wipro Digital покупает Cooper — они объединятся с другой дизайн-студией внутри холдинга Designit. Покупки идут уже много лет, и к ним уже успели привыкнуть. Но Cooper — системообразующая компания, её покупка означает окончательный конец эпохи, крах устоев и ещё один гвоздь в UX-агентства. Я бы не сказал, что это грустно, но сложно не рефлексировать на этот водораздел.
С 1990-х годов в голове сложилась такая модель — UX-агентства приводят в отрасль новые методы и подходы благодаря широте клиентуры и проектов. А продуктовые команды эти методы успешно применяют.
Понятно, что в последние годы продуктовые команды выдают не меньше интересных новых подходов на благо профессии, чему свидетельствует огромное количество блогов и сайтов дизайн-команд. Но всё равно было ощущение, что продуктовые команды занимаются больше хорошим дизайном и меньше серьезными методами исследований.
С другой стороны, то, как непросто продуктовые команды меняли эти идеально описанные методы в реальной жизни, сигнализирует, что нужно начинать с другой стороны, с естественных ограничений продуктовой работы. Но ментальную модель просто так не поменяешь. Для меня этот момент окончательно настал с новостью про Cooper.
Забавно, что новость не особо зацепила отечественное сообщество — видимо, для нового поколения Cooper уже мало значит. Тоже интересный сигнал.
Другие покупки дизайн-студий крупными компаниями:
Подробнейший рассказ о работе студии Territory над интерфейсами Blade Runner 2049. Много о том, как сложно работать в полной секретности, когда на первых этапах дизайнеры работают вслепую.
Дизайнер Джеймс Калбах в деталях разбирает проблемы с генерацией идей в компаниях, стремящихся к инновациям. Многие стремятся увеличить количество сильных идей, но главная проблема не в их количестве, а в реализации. Он предлагает реалистичный подход.
Сервис InVision запускает Studio, полноценный редактор интерфейсов в вебе. Получился конкурент сервиса Figma, который будет доступен в январе. Также анонсирован вспомогательный сервис Design System Manager, построенный на базе купленного недавно Brand.ai. Он облегчает работу с UI Kit в Sketch и помогает собрать простой гайдлайн на его основе. Обещана некая интеграция с кодом, но деталей пока нет.
Другие новости инструментов дизайна:
- Программа Adobe XD 1.0 вышла из бета-тестирования. Релиз не особо изменился относительно беты, но в ноябре обещают много нового — больше возможностей анимации, интеграция с графическим приложением Zeplin и плагином Sympli, а также поддержку плагинов. Остальные новости конференции Adobe MAX 2017 не касались дизайна интерфейсов: Photoshop больше не пытаются сделать комбайном, все его обновления касаются обработки изображений; первые возможности работы с виртуальной реальностью в After Effects и Premiere.
- Sketch 47 с собственным облачным хранилищем символов. Интересные плагины: FontBuddy от Anima позволяет установить недостающие шрифты не уходя из Sketch; Reduce от Flawless помогает оптимизировать макеты Sketch для уменьшения размера. Статьи: Дмитрий Бунин показывает, как комфортно работать с инфографикой в Sketch; памятка по началу работы в Sketch от дизайнера Менг То.
- Конструктор сайтов Webflow: Interactions 2.0 вышел из беты. Как он работает.
- Визуальный редактор Tumult Hype: бета-версия четвертой версии. Из наиболее интересных изменений — анимация векторных фигур.
- Balsamiq Cloud: инструмент стал работать в браузере и оброс вспомогательными возможностями, например, обсуждением экранов.
- Flow: инструмент анимации C4 Studio переименовали. Бета-версия доступна бесплатно.
- Платформа Marvel: появилась возможность прототипировать интерфейсы виртуальной реальности.
- Программа для создания прототипов Framer: выпустила бесплатный UI Kit Voyage.
- Figma: появилась возможность вставлять макеты в Trello.
- Sympli: появилась достаточно мощная интеграция с ПО Jira. Можно привязать макет к задаче, при обновлении макета в ней также будет меняться статус.
- Zeplin: интегрировалось с Figma и планирует работать с Adobe XD.
- Инструмент для прототипирования Flinto: перешёл на годовую подписку, переделал импорт из Sketch и обновил логотип.
- Abstract: дизайнер Кьель Вергуэ из студии November Five подробно и откровенно описывает о нюансах использования инструмента на практике. В отличие от восторженных статей, написанных на основе чужого пресс-релиза, он показывает реальные плюсы и сложности ежедневной работы в таком формате и текущие ограничения инструмента.
- Chrome User Experience Report: помогает оптимизировать качество работы сайта для пользователя — в первую очередь скорость во всех проявлениях.
- Dropbox Showcase: новый тариф между личным и корпоративным, который позволяет, например, собрать простое портфолио или подачу проекта.
Психолог Филипп Ходжсон из ИТ-консалтинговой компании Userfocus категоризует методы пользовательских исследований по доказательной силе.
Дизайнер Чарли Дитс перешёл из Facebook в команду Whatsapp и рассказывает о разнице подходов к дизайну и продуктовой работе в целом.
Дизайнер продуктов Шекман Тан из коммуникационной платформы Intercom рассказывает об экспериментах по заполнению форм в новом продукте компании Operator, основанном на мессенджере. Шекман показывает, что нашумевшие в прошлом году боты неэффективны для такой задачи, поэтому он нашёл гибридный подход на стыке классических форм и ботов.
Команда студии Viget провела эксперимент по восприятию схематичных экранов загрузки интерфейса, которые в своё время предложила Facebook. В их эксперименте они воспринимались пользователями как более медленные, чем классический круговой индикатор загрузки.
13. iOS 11
- Шаблоны iPhone X для Photoshop от Вирджил Пана (ещё один), UI8 (ещё один), Pixeden и Дрю Эндли.
- Шаблоны iPhone 8 для Photoshop от UI8 и Ramotion.
- Дизайнер Макс Рудберг описывает нюансы оптимизации верхней и статусной панели iOS-приложений для iPhone X. Перевод.
- Менг То собрал основные гайдлайны дизайна интерфейсов для iOS 11 и iPhone X в наглядном виде. Одна из лучших памяток. Перевод.
Дизайн-команда Rambler & Co рассказывает о работе над своей дизайн-системой. Они также обновили свои гайдлайны по бренду.
Другие новости дизайн-систем:
- Новая версия дизайн-системы «Альфа-Банка» на библиотеке для разработки интерфейсов React.
- Дизайнер Джордан Станича рассказывает о проблемах и ошибках при создании дизайн-системы Instacart Beetstrap.
- Дизайнер Никита Прилепский рассказывает о том, как устроен UI Kit в дизайн-команде «Тинькофф банка». Компоненты на технологическом уровне будут описаны позже, хотя пара слов о них в статье есть.
- Дизайнер и разработчик Майа Бенари рассказывает о работе над дизайн-системой для американских государственных сайтов. Правда, больше про визуальный язык и совсем мало про технологии.
- Photon Design System — интерфейсные гайдлайны Firefox, сделаные на базе скриншотов.
- Чек-лист платформы UXPin по созданию дизайн-системы в виде их фирменной мини-книги.
- Дизайнер Натан Кертис пытается вывести своё определение для дизайн-системы. Он предлагает несколько точек зрения и достаточно комплексный взгляд, охватывающий платформу и процессы её поддержки и развития. Он также предложил ещё один чек-лист по внедрению дизайн-системы. В продолжении статьи он показывает, как планировать работу по кварталам с его помощью.
Отличнейший рассказ дизайнера Ани Чен о переделке иконок файлов для всей линейки продуктов Adobe: как искали новый стиль, сокращали количество дублирующих смыслов, учились быстро и удобно экспортировать их для разработчиков. Перевод.
Вице-президент компании Nielsen/Norman Group Кара Пернис пишет о проблеме поиска информации на странице. Есть три причины того, что пользователь слишком долго изучает её: не может найти нужное, изучает подробную информацию (например, характеристики товара) и вдумчиво читает.
Фронтенд-инженер Келли Черчилль из IBM рассказывает, как фронтенд-специалисты использовали дизайн-мышление для развития своих основных профессиональных компетенций внутри компании.
Директор по исследованиям Ралука Будиу из Nielsen/Norman Group описывает разницу между качественным и количественным юзабилити-тестированием, а также подход по их совместному использованию.
Дизайнер Моян Бхуян рассказывает, как без особого опыта работы в UX он смог построить дизайн-команду из пяти человек и приводит свою UX-стратегию.
Специалист по работе с персоналом Тереза Фессенден собрала данные многих eye-tracking-исследований Nielsen/Norman Group и делает вывод о том, как распределяется внимание пользователей по странице от левого к правому краю.
Читайте полную версию дайджеста в моем блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и ещё тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.
"с помощью алгоритмического дизайна они научились сканировать бумажные скетчи " - ммм... расскажете поподробнее как с помощью "алгоритмического дизайна" читаются скетчи? в исходнике "We built an initial prototype using about a dozen hand-drawn components as training data, open source machine learning algorithms, and a small amount of intermediary code to render components from our design system into the browser."
Алгоритмический дизайн ― один из терминов, обозначающих использование методов и технологий искусственного интеллекта для упрощения работы дизайнера. Преобразование бумажных скетчей в готовый макет с использованием машинного обучения ― как раз яркий пример. Ну и тема связки дизайна и ИИ стала особенно активно развиваться в последние два года, термины будут ещё долго устаканиваться. Мне пока ближе "алгоритмический дизайн".
"Продуктовый дизайн"....
Так мы узнали, как построить дизайн-команду, если тебя зовут Моян Бхуян.
такое многообещающее название и такой гиковский контент... впрочем, гики тоже люди )