Уже почти пять лет руководитель портальной дизайн-команды Mail.Ru Group Юрий Ветров публикует в своем блоге регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов.
Из ленты нескольких сотен тематических подписок он отбирает примерно 5% стоящих публикаций, которыми интересно поделиться среди экспертов. Специально для AD Юрий Ветров собрал выжимку из 20 самых интересных ссылок мая.
Adobe CC 2015
Вышел Adobe CC 2015. Это одно из крупнейших обновлений Adobe за все время. Оно коснулось всех продуктов компании. Добавлено несколько мобильных приложений и два новых сервиса: Adobe CreativeSync и Adobe Stock.
Для продуктового дизайнера прежде всего интересен новый Photoshop. Ребята из Сан-Хоcе наконец выяснили, что уже много лет создают не инструмент для редактирования фотографий, а, скорее, помощника дизайнера. Плюс «внезапно»
поглотивший многих дизайнеров Sketch. В результате, продукт получил массу новых возможностей и изменил странное поведение старых:
- Artboards: монтажные области, позволяющие создавать несколько экранов разного размера в одном документе, сильно облегчающие работу, экспорт и просмотр макетов.
- Множественные стили слоев: теперь можно создавать несколько слоёв одинаковых стилей, накладывающихся друг на друга.
- Новый диалог экспорта, заменивший Save For Web.
- Библиотеки: создаете один раз, например, тулбар. Используете в других местах, затем меняете исходник — меняется везде. Развитие Smart Object.
- Приложение-компаньон для просмотра дизайна на устройствах (iOS уже, Android на подходе).
- Photoshop Design Space: совершенно новый интерфейс для Photoshop специально для дизайнеров.
- Множество мелких твиков как с точки зрения производительности, так и взаимодействия: одна возможность накладывать внутренние полупрозрачные Stroke чего стоит.
- Adobe Stock — это фотовекторный сток, встроенный во всех продукты компании.
- Adobe CreativeSync — новый подход к обмену всеми дизайн-ресурсами. Он автоматически синхронизирует файлы, шрифты, фотографии, ресурсы, параметры, метаданные, элементы из Adobe Stock для всех ваших устройств и программ.
В нагрузку — пошаговое
руководство по анимации в Photoshop от Стивена Петрани. Это ограниченный в возможностях, зато почти всегда доступный инструмент.
Остальные изменения и новые фишки других продуктов на
официальной странице.
UX-события
Основные европейские и американские события UX и веб-дизайна второго полугодия 2015 года.
Как встретить нового пользователя
Одна из лучших и самых полезных
статей на тему встречи нового пользователя от дизайнера Дена Мартелла. Он пишет о том, что экраны приветствия нужно рассматривать в привязке к тому, как сервис активирует пользователя — только так он принесет пользу продукту, а не будет надоедливым обзором ненужных сейчас функций.
Дег приводит примеры таких сценариев от известных компаний вроде Facebook, которые обнаружили, что если пользователь добавил 7 друзей в течение 10 дней после регистрации, то он наверняка не забросит сайт.
Apple iOS 9
Интерфейсно в самой
платформе мало что изменилось. Судя по всему, наконец-то будет повышена стабильность работы — с этим становилось все хуже, начиная с революции в iOS 7.
Один из самых интересных моментов — появление
режима многозадачности на iPad, аналогичного Windows 8, а также реализованного в оболочке TouchWiz от Samsung, но с добавлением режима «картинка в картинке» для просмотра видео.
Правда, большие планшеты последнее время падают в продажах за счет 7″-версий и фаблетов, а iPad, как ни старался, не особо далеко ушел за рамки устройства потребления. Однако многооконность сделает его чуть полезнее. Также поменялся режим переключения приложений, а при подключении сторонней клавиатуры показывается привычный по десктопным ОС подход. Windows 10 показал универсальное решение для всей линейки устройств — интересно, как к этому придет Apple.
Среди других интерфейсных паттернов — попытка решить многие проблемы больших экранов в новом плеере: перенос значительного количества элементов управления вниз, использование свайпа для переключения между основными разделами — как в Windows Phone. Активное использование круглых цветных иконок категорий. В поиске снова появилось скругленное поле ввода из старой эпохи.
Учитывается больше нюансов текущего контекста.
Режим выделения стал вменяемее, появилась нормальная панель инструментов вместо путаного контекстного меню, с помощью двух пальцев клавиатуру можно
превратить в тачпад. И началась замена Helvetica на собственный шрифт San Francisco, представленный ранее в часах. Прощай, эпоха повсеместной любви к Helvetica?
Вообще, обновления в основном коснулись приложений — все интересное нужно ловить там. Особенно здорово вышло с
новостями (замена «Киоска»).
Язык программирования Swift, который дружелюбен к изучающим код дизайнерам,
получил вторую версию и открытый код. В продолжение темы:
- Вставил пять копеек для AD.
- Шаблон для нового Photoshop с поддержкой артбордов.
- Победители Apple Design Awards 2015 года.
- Новый CarPlay пытается пролезть дальше, чем просто развлекательная система — предлагает автопроизводителям интегрировать базовые функции управления машиной вроде климат-контроля. Но Ford явно сказал недавно, что не хотят повторить судьбу производителей компьютеров и телефонов, где доминирует сторонний производитель ОС.
«Платформенное мышление»
Моя
презентация о платформенном мышлении с конференции UX People 2015. Как перестать плодить документацию и начать жить. Все это сжигает уйму времени на бумагомарательство — силы уходят на полировку побочных документов, а не продукта. Нужно воспринимать работу над продуктом как создание и развитие платформы, а не конкретный релиз.
Я
рассказывал немного об этом в конце 2013 года и 2014 года. Но там был упор на конкретные кейсы, а в этой презентации — пошаговая инструкция по созданию такой платформы. По количеству слайдов это уровень «nightmare», но задача действительно сложная.
В конце презентации длинный список всех тех, благодаря кому эта картина выстроилась в единое целое и начала внедряться на практике. Изначальная идея была простой, первый прототип платформы появился в середине 2012 года. Но по мере перевода все большего количества сервисов на нее видение корректировалось и расширялось. У нас огромное количество продуктов и вопросов по каждому из них, так что мы еще в пути. Поэтому серия будет продолжаться.
Дизайн Google
Еще один мощный
рассказ о том, как радикально поменялся дизайн Google.
Хотя инициативы по приведению продуктов в порядок начались еще давно, революция случилась во многом благодаря Мэтьюсу Дуарту, который выстроил новое видение дизайна и процессов, а благодаря тесному общению с Ларри Пейджем провел все это в жизнь.
Перевод на русский.
Деньги за буквы
Влад Головач
объявил о важной инициативе:
К сожалению, на русском языке выходит слишком мало оригинальных материалов про пользовательские интерфейсы и связанные темы (хотя и сравнительно много переводов и компиляций, а уж презентаций и выступлений вообще как грязи). Нам с Сашей Белышкиным это кажется неправильным и даже немного постыдным, поэтому мы придумали фонд (и выделили бюджет), который без условий платит деньги за оригинальные публикации. Соответственно, если у кого-то у вас в списке задач на будущее есть пункт «Собраться и написать уже наконец-то статью о [интерфейсная тема]», знайте, что у вас есть шансы не просто написать статью (и стать грамотнее, умнее, научиться лучше писать), а ещё и получить 3 тысячи рублей в качестве бонуса. Откладывать только не надо, потому что бюджет не вечен.
P.S. Особенно роскошно это предложение для тех, кто по какой-то причине нас, Usethics, не любит. Лишить нас с Сашей личных сбережений должно быть не просто полезно, а неизъяснимо приятно!
Комикс UX Hero
Комикс UX Hero от Тал Флорентин, посвященный жизни мифического продуктового дизайнера Джонатана Скетча. Первая книга уже готова и доступна бесплатно, за $39 можно получить первые шесть выпусков. Формат помасштабнее давно известного открывателя жанра OK/Cancel.
Protein
Protein синхронизирует компоненты интерфейса, их представления в векторе и обратно в код. Команда анонсировала проект на FrontendConf в Москве и Web Standards Days в Петербурге.
Protein может конвертировать любые компоненты интерфейса в вектор для использования в Sketch или Adobe Illustrator и обратно. То есть изменения из Sketch будут попадать обратно в библиотеку в виде кода — как Dropbox для компонентов интерфейса.
Авторы говорят, что это принципиально другой подход, который, как обещается, решит проблемы взаимодействия дизайнеров и разработчиков. Дизайнеры теперь смогут использовать живые компоненты для создания макетов и синхронизировать их кодовое представление в фоне. Просто работайте над дизайном. Теперь у вас будет одна библиотека компонентов, над которой будут работать дизайнеры и разработчики. Одновременно.
Protein переворачивает разработку с ног на голову, пропагандируя, в первую очередь, создание компонентов разработчиком, а затем их использование дизайнером в макетах интерфейса.
Страница проекта в Facebook и презентация:
Восприятие цвета
Интересное
исследовование Джонатана Фломбаума из университета Джона Хопкинса о восприятии цвета. Он показал, что люди не помнят точный или даже более-менее правильный цвет, а скорее наиболее близкий к нему основной. В продолжение темы:
- Еще одно исследование восприятия, на этот раз произведений искусства. Почему массовая аудитория любит синий и более классические примеры — абстрактное искусство требует большей когнитивной нагрузки на восприятие.
Macaw
Новое
поколение продукта Macaw, с гораздо более широкими возможностями. Те, кто купил первую версию, получат скидку.
AxShare
Axure
выпустили приложения AxShare для просмотра прототипов на Android и iPhone. Они будут доступны и в офлайне.
Выдержки из отчета Baymard
- Кристиан Холст о том, почему нужно дублировать выбранные параметры фильтрации в основной форме и отдельном блоке. Большинство интернет-магазинов делают что-то одно.
- Еще один материал Хоста о правильной сортировке по рейтингу. Многие интернет-магазины формально ставят наверх товары с лучшим рейтингом, не учитывая количество оценивших его пользователей.
Книга UXPin
Новая
книга UXPin о дизайне взаимодействия, интерактивных историях и анимациях.
Кнопка в форме регистрации
Энтони Ти
советует ставить кнопку отправки формы на мобильных, прилипающей к низу экрана. Гайдлайны мобильных говорят о другом, но следование им нарушает поток работы с формой, да и обнаружить их бывает не так просто. Правда, с прилипанием к низу экрана есть проблемы в старых браузерах на Android, да и кнопку отмены можно было бы оставить на привычном месте.
Проблемы современных инструментов дизайна
Джон Пукет из команды Dropbox
говорит о проблемах современных инструментов дизайна. Немногие из них заточены под адаптивность на уровне рабочей области и он предлагает свое видение правильного решения. Похоже, скоро нас ждет анонс свежего инструмента. Перевод на русский и продолжение — об использовании в прототипах реальных данных.
Примерно в то же время Паскаль Де Сильва
сделал очень толковый и глубокий разбор состояния современных дизайнерских инструментов. В первой части он говорит о прототипировании сложного взаимодействия и анимации, предлагая интересную категоризацию. Во второй — смотрит в сторону инструментов игровых дизайнеров. Кажется, и тут нас ждет анонс нового продукта.
Возвращаемость пользователей Android-приложений
Эндрю Чен
приводит средние цифры по возвращаемости пользователей Android-приложений. Дневная аудитория падает на 77% в течение первых трех дней, 90% в течение месяца и 95% в течение трех месяцев. При этом долгосрочно удерживать пользователей удается тем, кто смог зацепить их на более-менее регулярные запуски в течение первых 3-7 дней. Для этого нужно не спамить раздражающими уведомлениями, а пытаться активировать новичков.
Блог о метриках в журналистике
Мои коллеги из команды контент-проектов
запустили блог, в котором рассказывается об их опыте учета редакционных метрик, форматах подачи, инструментах редакции и журналиста. У них также есть группа в Facebook, в которой публикуются исследования, разбор практических примеров, дискуссии и обсуждения. Несколько самых интересных публикаций:
- Объемы трафика на ресурс или страницу материала ничего не говорят об эффективности работы редакции. Если читатели не увлечены содержанием, то трафик бесполезен. Хорошую журналистику невозможно измерить количеством трафика и CTR заголовка. Но кое-чем другим можно.
- Главные вызовы онлайн-журналистики: дефицит «времени на вас»; сократившееся «время концентрации внимания».
Relay
Сервис
Relay позволяет обсуждать дизайн в Slack. Это плагин, который позволяет легко экспортировать макеты из Photoshop, Sketch или браузера для совместного обсуждения. В обсуждении на ProductHunt привели пару аналогов.
Как повторить атмосферу лаборатории Xerox PARC
Оказывается, SAP
запустил исследовательскую лабораторию Communications Design Group под руководством легендарного Алана Кая. Мало того, в команду наняли Брета Виктора. Алан размышляет о том, как повторить атмосферу знаковой лаборатории , давшей основы современных компьютеров. Крайне интересно, что это даст SAP, долгое время славившейся одними из худших интерфейсов в мире.
Читайте
полную версию дайджеста в моем блоге. В нем, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и еще тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять ее.