Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.
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. Интересный интегрированный инструмент для поддержки дизайн-мышления. В нём богатый набор возможностей — карта путешествия клиента, персонажи, агрегация обратной связи из разных источников для поиска возможностей роста, привязка аналитики. И всё это на базе «двойного алмаза».
7 (в). Шаблоны
Шикарный рассказ Дианы Маунтер о появлении и развитии дизайн-системы GitHub. Поэтапное развитие, примеры внутренних документов и процессов. Читайте также рассказы о работе команд Atlassian, Oscar Health и SalesForce.
Nielsen Norman Group описывает особенности проектирования интерфейсов для детей. Автор сопоставляет развитие моторики с возрастом и даёт советы по элементам управления для каждого из них.
Мощнейший разбор причин, по которым разработчики активно используют командную строку и предпочитают её графическому интерфейсу. Автор хотел докопаться до реальных плюсов и минусов с точки зрения взаимодействия, а не просто типовых предубеждений.
Шикарный взгляд на правильное понимание и определение ролей в продуктовой команде от Питера Льюиса из Capital One. Они должны идти от конечного результата и цели, а не просто набора обязанностей, — это и результат обеспечивает, и гибкость в тактике даёт.
Сара Гиббонс из Nielsen Norman Group предлагает универсальный подход для проведения рабочих сессий. Три этапа — объяснить, провести, изучить результаты.
Толковый пример рассказа о том, что такое дизайн, для начинающих от Кой Винь.
Люк Вроблевски изучил приложения для проката велосипедов и сравнил шаги, которые нужно пройти до начала езды. Многие неоправданно усложняют процесс, спрашивая лишнее или злоупотребляя обучением использования.
Алёна Кирдина приводит примеры из игровых интерфейсов, которые полезны и для обычных веб- и мобильных приложений.
Рэйчел Краус из Nielsen Norman Group показывает, как создавать раскадровки сценариев использования. Они показывают кусок карты путешествия пользователя, причём эти два подхода можно совместить.
Microsoft записала серию коротких обучающих роликов о поддержке пользователей с ограниченными возможностями. Также появилась неплохая памятка от команды американских государственных сайтов.
Луиз Даун, глава дизайна Government Digital Services (делают Gov.uk) приводит свои принципы проектирования услуг.
Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну, дизайн-системам, инструментам дизайна, свежих скриптов и прочего. За свежими ссылками также можно следить в группе на Facebook, сообществе во «ВКонтакте» или канале Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.