Продуктовый дизайн: 18 самых важных материалов за июнь
К десятилетию магазина Майкл Стибер собрал историю изменения дизайна десяти приложений, которые появились в тот день и живут до сих пор. 17 октября 2008 года открылся AppStore для iPhone, который здорово изменил модель продаж и распространения цифровых продуктов.
2. Голосовые интерфейсы
Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. В двух обзорах уйма полезной информации по проектированию для них.
Они делят их на несколько категорий и выбирают тональность. Рианнон Джонс из Deliveroo описывает подход компании к написанию сообщений об ошибках.
Компания стремится стать более зрелой в плане дизайна и выбрала очень системный подход. Алексей Шайхелисламов описал UX-стратегию S7 Airlines на основе выступления на московском Dribbble Meetup. Читайте также рассказы о работе дизайн-команд Rambler Group и Priceline.
Джим Росс показывает, как правильно давать рекомендации по улучшению интерфейса после экспертной оценки или пользовательского исследования, чтобы продуктовая команда поняла их и согласилась с ними.
Синий свет выделяет наибольшую энергию, поэтому в другой статье она и учёные рекомендуют оранжево-красные цвета, которые используют военные и та же BMW. Амбер Кейс говорит о проблемах современных экранов, которые излучают синей свет — это садит глаза и мешает сну.
7 (а). Новости инструментов дизайна
- Framer X. Показали видео работы и основные возможности. Получился цельный инструмент дизайна и прототипирования в духе InVision Studio.
- Sketch 51. Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу.
- Плагины Sketch. Timeline 2.0: надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML, CSS, JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).
- persP. Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременной работе нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы или компоненты). Из новых идей ― поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей ― по ссылке.
- Relate. Позиционируется как визуальная работа на базе кода — причём якобы можно сразу работать с компонентами на React. Интригующе, но пока из деталей есть только статья от авторов.
- Affinity Designer для iPad. Вышла планшетная версия приложения. Первое время можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом.
- Adobe Photoshop для iPad. На Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов (сейчас есть простецкий Photoshop Express).
- Flow. Инструмент для работы с анимацией вышел из беты (изначально назывался C4 Studio).
- Flowmapp. Добавили инструмент для описания пользовательских сценариев. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.
- Modulz. Колм Тьют сравнивает два популярных подхода к дизайну интерфейсов: работу в инструментах-наследниках печатного дизайна, результаты которых потом передаются в разработку, и визуальное программирование, где этого перехода нет. Он с прошлого года работает над инструментом Modulz, который движется во вторую сторону и позволяет в наглядном виде работать с компонентами на React.
- Marvel. Надстройка Userflows позволяет автоматически сгенерировать карту переходов на основе прототипа.
- Visual Sitemaps. Инструмент обещает создавать визуальную карту сайта на основе URL. Пока можно записаться на бета-версию.
- Gradient Hunt. Ещё одна коллекция градиентов с быстрой возможностью забрать их CSS.
- InVision. Вышла вторая версия мобильного приложения. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.
- Figma. Райан Корделл из Deliveroo рассказывает, как интерфейсные писатели работают совместно с дизайнерами.
- SVGator. Пошаговое руководство по работе с инструментом для анимации SVG.
- История создания Screely.
- Polypane. Ещё один инструмент для тестирования адаптивных сайтов в браузере. Стивен Хей, один из ключевых авторов на тему, считает его одним из лучших.
- Carbon. Онлайн-сервис помогает сделать эффектную подачу куска кода.
- Shotsnapp. Ещё один инструмент для эффектного оформления экранов интерфейса.
- Overflow. Мощный пример того, что можно делать в инструменте.
- Firefox. Появился инструмент для анализа accessibility сайта.
7 (б). Новые инструменты поиска инсайтов
- UXPressia 4.0. Вышла версия 4.0. Появилась совместная работа, и расширился инструментарий по всем аспектам — сами карты взаимодействия, персонажи, карта эмоций.
- Pyoneer. Интересный интегрированный инструмент для поддержки дизайн-мышления. В нём богатый набор возможностей — карта путешествия клиента, персонажи, агрегация обратной связи из разных источников для поиска возможностей роста, привязка аналитики. И всё это на базе «двойного алмаза».
- Dovetail и Aurelius. Сервисы для работы с базой инсайтов. Они помогают агрегировать данные пользовательских исследований, обратную связь и другие каналы, чтобы находить среди них полезные идеи для развития продукта.
7 (в). Шаблоны
- MacOS. Apple добавила в интерфейсные гайдлайны MacOS, официальные шаблоны для Sketch и Photoshop. Скачать — по ссылке.
Поэтапное развитие, примеры внутренних документов и процессов. Шикарный рассказ Дианы Маунтер о появлении и развитии дизайн-системы GitHub. Читайте также рассказы о работе команд Atlassian, Oscar Health и SalesForce.
Автор сопоставляет развитие моторики с возрастом и даёт советы по элементам управления для каждого из них. Nielsen Norman Group описывает особенности проектирования интерфейсов для детей.
Автор хотел докопаться до реальных плюсов и минусов с точки зрения взаимодействия, а не просто типовых предубеждений. Мощнейший разбор причин, по которым разработчики активно используют командную строку и предпочитают её графическому интерфейсу.
Они должны идти от конечного результата и цели, а не просто набора обязанностей, — это и результат обеспечивает, и гибкость в тактике даёт. Шикарный взгляд на правильное понимание и определение ролей в продуктовой команде от Питера Льюиса из Capital One.
Три этапа — объяснить, провести, изучить результаты. Сара Гиббонс из Nielsen Norman Group предлагает универсальный подход для проведения рабочих сессий.
Толковый пример рассказа о том, что такое дизайн, для начинающих от Кой Винь.
Многие неоправданно усложняют процесс, спрашивая лишнее или злоупотребляя обучением использования. Люк Вроблевски изучил приложения для проката велосипедов и сравнил шаги, которые нужно пройти до начала езды.
Алёна Кирдина приводит примеры из игровых интерфейсов, которые полезны и для обычных веб- и мобильных приложений.
Они показывают кусок карты путешествия пользователя, причём эти два подхода можно совместить. Рэйчел Краус из Nielsen Norman Group показывает, как создавать раскадровки сценариев использования.
Также появилась неплохая памятка от команды американских государственных сайтов. Microsoft записала серию коротких обучающих роликов о поддержке пользователей с ограниченными возможностями.
Луиз Даун, глава дизайна Government Digital Services (делают Gov.ukUK) приводит свои принципы проектирования услуг.
В нём, как обычно, много новых материалов по дизайну, дизайн-системам, инструментам дизайна, свежих скриптов и прочего. Читайте полную версию дайджеста в моём блоге. Вы также можете получать свежие обзоры по почте. За свежими ссылками также можно следить в группе на Facebook, сообществе во «ВКонтакте» или канале Telegram — спасибо всем, кто помогает наполнять её.
#дизайн
