Апрель '17

Запись 3-часового выступления Luke Wroblewski на тему современного дизайна мобильных интерфейсов.

Конференция O’Reilly Design прошла 21-22 марта в Сан-Франциско, США. Uday Gajendar написал отчёт о ней. Из интересных:

• Презентация Aarron Walter о его опыте дизайн-менеджмента.

• Агентство Atvinta перевело вторую серию.

• Zensar Technologies купили Foolproof в декабре прошлого года.
• Dribbble покупает Crew для поиска фрилансеров. Больше деталей.

Jason Cashdollar даёт советы новому члену продуктовой команды о том, какие первые вопросы задавать, чтобы разобраться в продукте.

Новая награда для лучших мобильных приложений, запущенная Cuberto.

Первоапрельская статья Aurora Harley из Nielsen/Norman Group о том, что выкинув этап концептуального проектирования можно сэкономить кучу времени. Другие шутки про дизайнеров:

• Пачка вредных советов о том, как выглядеть умнее от Guy Ligertwood.

Allison Milchling составила сама для себя список часто задаваемых работодателями вопросов о своём опыте и принципах. Это помогло её в трудоустройстве.

Сайт, посвящённый вопросам этики для дизайнеров. Он собирает инструменты и статьи, а также описывает важные навыки.

Очень интересная дискуссия Todd Zazelenchuk, David Travis и Philip Hodgson из Userfocus о том, является ли юзабилити наукой. И да, и нет — с одной стороны, UX-исследования следуют принципам научных методов; с другой — редко выражаются в виде теорий или вносят вклад в общепрофессиональную базу знаний.

Kathy Baxter из Salesforce собрала вместе с коллегами принципы дружелюбных интерфейсов, использующих технологии искусственного интеллекта. Это набор рекомендаций на базе классической литературы по теме. В продолжение темы:

• Leigh Alexander размышляет об эмоциональной составляющей виртуальных помощников и ботов.

Justin Barber из Google размышляет об интерфейсах для поколения людей, выросших с современными технологиями. Они зачастую нарушают каноны хорошего и понятного интерфейса, но абсолютно понятны для «digital natives».

Толковые мысли Andrew Wilshere на тему ближайшего будущего профессии UX-дизайнера.

• Отличная структурированная коллекция экспериментальных инструментов с использованием технологий машинного обучения и искусственного интеллекта от Luba Elliott.
• Экспериментальный сервис Google AutoDraw, который делает из быстрого скетча аккуратную пиктограмму. Около полугода назад они запустили экспериментальный проект на эту тему, с помощью которого машинным обучением прокачали алгоритм. Команда Sympli быстро сделала плагин для Sketch на его основе.
• Экспериментальный плагин Evolving Layout к Adobe Illustrator, который позволяет разбавить графику генеративным дизайном.
• Генератор правдоподобных слоганов брендов от Russell Davies. Вместе с Nick Asbury они рассуждают на тему того, как алгоритмы могут заменить человека при написании текстов. Учитывая, что у многих людей мышление достаточно шаблонно, они не всегда способны предложить варианты лучше, чем у робота. Кстати, апрельский номер Creative Review посвящён искусственному интеллекту.
• Kevin Ho из IDEO запустил карту шрифтов, в которых они выстроены по схожести визуальных характеристик. Это поможет подбирать шрифтовые пары. Рассказ о том, как он использовал машинное обучение для создания карты.
• Lassi Liikkanen описывает сферу применения машинного обучения для интерфейсов по трём категориям — обнаружение, предсказание и генерация.
• Экспериментальная функция конструктора сайтов Huula, которая автоматически подбирает цвета.

Josh Clark поднимает вопрос о несоответствии доли мобильного трафика и той прибыли, что он даёт. Он размышляет о том, почему владельцы сайтов уделяют меньше времени оптимизации мобильного веба и теряют деньги. В продолжение темы:

• Josh Clark делает разбор истории технологий мобильного веба, которые прошли от отдельных версий до единого адаптивного сайта, но сейчас снова разделяются из-за технологий вроде AMP. Он размышляет о том, насколько это плохо для UX.

Leszek Zawadzki собрал старые версии сайтов известных продуктов чтобы понять, как менялось их УТП.

Классик современных компьютеров и интерфейсов Alan Kay рассказывает о том, в чём был секрет успешности исследовательской лаборатории Xerox PARC.

Juliette Weiss раскопала историю ключевых вех в истории дизайна Microsoft. В статье имена важных людей, благодаря которым менялся дизайн продуктов и которые повлияли на отрасль в целом.

Толково описанные цели редизайна сервиса Sing! Karaoke от Jingxi Li.

Рассказ дизайн-команды Vox.com о том, как они переводили главную страницу на единый стиль и компоновку.

Толково описанный кейс работы над общим паттерном сложной формы подачи документов от команды GOV.uk.

Ed Chao из Dropbox рассказывает о том, как команда убедила руководство провести редизайн продукта.

Дизайн-команда Rambler & Co рассказывает о недавнем редизайне почтового сервиса.

Google запустили отдельный сайт для методологии Design Sprints. Он детально описывает процесс, публикует шаблоны и истории успешного применения. Анонс.

Cary-Anne Olsen-Landis из IBM рассказывает, как одна из продуктовых команд использует модель Kano для выбора наиболее ценных для пользователя улучшений продукта. В продолжение темы:

• В отличие от многих других статей по методу Kano от дизайнеров, Brian O’Neill показывает как получить ожидания пользователей и получить оценку желанности конкретных нововведений.

Rik Higham из SkyScanner поднимает вопрос о том, что концепция MVP потеряла изначальный смысл — вместо быстрой проверки продуктовой гипотезы команды всё чаще пытаются причёсывать раннюю версию. Он предлагает использовать подход и термин RAT (Riskiest Assumption Tests), который возвращает изначальный смысл.

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

Студия Mule Design толково описывает свои ценности при работе с клиентами. Почему нужно фокусироваться не на дружеских взаимоотношениях, а критически настроенных.

• Интервью с Brent Palmer, главой продуктового дизайна в Zendesk, о том как устроена дизайн-команда в компании.
• Очень толковое интервью главы дизайна Atlassian Jurgen Spangl и его коллеги James Bryant о том, как устроен дизайн в компании. В последние годы заметно, что продукты меняются в лучшую сторону и в статье описана отличная культура, которая способствует этому.
• Virginia Start из Shopify рассказывает о «контент-клинике» — серии быстрых мастер-классов для всех сотрудников компании, которые хотят решить конкретную проблему с текстами в своей задаче и подтянуть эти навыки.

Руководитель дизайн-команды Creative Market Gerren Lamson описывает принципы дизайна, которые они создали для продуктов и самой команды. Есть детали и самого процесса создания. Продолжение.

Шикарнейший системный взгляд Adam Saint из Shopify на построение любых дизайн-процессов через построение многослойных систем, где каждый следующий уровень базируется на предыдущем. Нирвана для тех, кто любит более комплексные модели описания процессов, чем просто последовательность шагов.

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

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

• Советы Julie Zhuo на тему того, как доказать важность дизайна в компании на раннем этапе зрелости UX.
• Traci Lepore описывает пользу дизайна для бизнеса на разных этапах продуктовой работы. Проектные артефакты, процессы и методы работы — толковая памятка.

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

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

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

• Обучалка CSS Grid в виде браузерной игры.
• Robin Rendle сравнивает возможности Flexbox и CSS Grid.

• Сайт описывает возможности разноцветных шрифтов и их поддержку в разных браузерах и дизайнерских инструментах.

• Коллекция скриптов интересной анимации формы авторизации.
• Коллекция скриптов для анимированной загрузки ленты фотографий.

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

Советы Amy Schade из Nielsen/Norman Group по написанию заданий для юзабилити-тестирования, которые не исказят результаты исследования.

Компания «Собака Павлова» изучила 26 кейсов использования качественных исследований при запуске продуктов. Они сгруппированы по 6 задачам: незнакомая аудитория или рынок, учёт разных сегментов аудитории, внутренние сервисы и другие.

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

Jeff Sauro и Christian Rohrer создали интегральный метод экспертной оценки юзабилити PURE. Он хорошо работает для поиска и ранжирования наиболее явных проблем в тех продуктах, где проведение юзабилити-тестирования сложно. Очень здорово, что он привязан к конкретным сценариям, что помогает лучше оценить их критичность. Статья Jeff Sauro.

• Пошаговое руководство по анимации интерфейса на простом примере от Tidjane Tall (перевод).
• Ещё одно пошаговое руководство от Tidjane Tall — как сделать загрузчик на базе логотипа (перевод).

• «Setka» от Look at Media доступна в виде плагина для WordPress.

Сервис позволяет проверить состояния адаптивности сайта на разных популярных размерах экрана.

Плагин для Slack от FiftyThree, который помогает обсуждать макеты.

Вышла третья версия Gravit. В статье раскрываются планы на будущее, включая символы, анимацию и т.п.

Great Simple Studio продвигают свои шаблоны на новый уровень и запустили конструктор сайтов на его базе.

Tim Davey рассказывает о том, как дизайн-команда Deliveroo автоматизировала свою работу с помощью скриптов, облегчающих создание нового проекта (структура папок и шаблоны).

• Вышло мартовское обновление бета-версии. Упростилось копирование элементов из Photoshop и Illustrator, улучшилась работа с комментариями как с todo, много мелких интерфейсных улучшений.
• Вышло апрельское обновление бета-версии. Добавлены базовые функции работы с объектами и продолжается синхронизация версий для Windows и Mac.

• Анонсирована платная подписка. Над небольшими проектами можно работать бесплатно.
• Владислав Пономаренко рассказывает о своём опыте работы с инструментом.

Инструмент для выбора цветовой палитры в Android-приложениях от команды material design. Можно посмотреть, как оно выглядит на условном экране и проверить цвета на доступность.

Типовой контент для дизайн-макетов и прототипов: имена, фильмы, адреса и уйма всего остального.

Одна из лучших статей на тему интерфейсной анимации от Issara Willenskomer. Он говорит о том, что пора забыть принципы Диснея и предлагает свою классификацию из 12 принципов. Интересно, что они также классифицируются по дополнительным характеристикам (состояние и процесс, в реальном времени и нет, 4 характеристики юзабилити). Перевод на русский. Issara также учит анализировать интерфейсную анимацию на примере достаточно сложного мобильного приложения. Он показывает, как выделить использованные приёмы.

Sketch 43 Одна из самых обсуждаемых версий Sketch вышла. Обновлённый формат файла потребовал отказаться от поддержки старых плагинов. Peter Nowell разбирает новые возможности по экспорту границ SVG-объектов.

• Плагин Batch Create Symbols помогает создать сразу несколько символов из выделенных объектов. Хороший вариант, если нужно перенести в символы библиотеку пиктограмм.
• Плагин Zeroheight помогает организовать совместную работу с общими символами. Можно также собрать псевдо-живой гайдлайн.
• Плагин позволяет задать Bootstrap-подобную сетку внутри любого блока — это облегчает выстраивание колонок внутри областей интерфейса.
• Плагин позволяет автоматически разложить оригиналы символов на странице по алфавиту.
• Памятка по использованию символов в Sketch от Javier Cuello.
• Плагин помогает переименовать копии символа в макете, которые стали называться не так как оригинал.
• Плагин, позволяющий экспортировать макеты почтовых рассылок в HTML.
• Плагин, позволяющий создавать графики «sparkline».
• Плагин разбирает структуру папок и слоёв, убирая ненужную вложенность.
• Плагин собирает несколько слоёв вместе, чтобы они шли друг за другом.
• Плагин заменяет один цвет на другой в макетах.
• Обсуждение на Designer News, где приведено огромное количество полезных плагинов.
• Плагин-эмулятор нарушений цветового восприятия.
• Плагин, генерирующий популярные сейчас паттерны на фоне.

В марте Morgan Kaufmann выпустили книгу Jeff Johnson и Kate Finn «Designing User Interfaces for an Aging Population». UXmatters публикует главу 1 из неё.

• Niels Boey разбирает нововведения в iOS 10.3. Возможность рейтингования прямо из приложения, замена основной иконки на лету.

Bjango выложили шаблоны иконок приложений для Android O. Есть файлы для Photoshop, Sketch, Illustrator и Affinity Designer.

Золотая статья Michael Jeter, в которой он во всех подробностях расписывает историю развития стиля иллюстраций в Dropbox. Он рассказывает, как и какие задачи решал каждый из подходов на конкретных этапах жизненного цикла компании. В продолжение темы:

• Ryan Weaver из Creative Market рассказывает о том, как команда нашла и создала новый единый стиль для интерфейсных иллюстраций.

Foundation 6 Building Blocks Zurb добавили в Foundation огромную библиотеку компонентов — типичные формы, сложные меню, представления статьи и т.п. Анонс.

8-Point Grid — Borders and Layouts Elliot Dahl разбирает один из главных вопросов, возникающих при использовании шага для измерения размеров элементов и отступов между ними — как считать границы и разделители? Правда, он не касается самого сложного — сеток.

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

• Emmet Connolly из Intercom пишет о своём видении дизайн-систем, которые охватывают все аспекты работы продукта, не только набор конструктивных элементов интерфейса. Josh Clark полемизирует с ним — он говорит, что atomic design не противоречит этому подходу.

При начале работ над дизайн-системой всегда стоит вопрос «с чего начать» — абстрактных гайдлайнов или реального продукта. Dan Mall описывает свой подход к выбору пилотного проекта для внедрения дизайн-системы — это матрица, в которой потенциальные кандидаты ранжируются по нескольким параметрам.

Nathan Curtis описывает организационные модели команд, работающих над дизайн-системой. Он показывает идеальный вариант и показывает примеры из своего опыта (с упоминанием проблем каждого).

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

• Brad Frost пишет о том, как правильно выбрать целевую аудиторию дизайн-системы и ориентироваться на тех, кому она принесёт наибольшую пользу.

Airbnb довели до ума и опубликовали своё экспериментальное решение по экспорту компонентов из дизайн-системы на React в Sketch. Рассказ команды о том, как и зачем сделали эту библиотеку.

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

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

Другие примеры:

• Audi делают ребрендинг и к этому запустили несложную дизайн-систему.
• Atlassian обновили свои гайдлайны. К сожалению, там скриншоты элементов и компонентов интерфейса, а не живой гайдлайн, но есть интересные разделы про маркетинг.
• Josh Clark рассказывает о работе над дизайн-системой ExxonMobil.

Шикарнейшая хронология книг, публикаций и библиотек, посвящённых паттернам от Erin Malone, приложившей руку к легендарной Yahoo! UI Patterns. Кстати, с начала года я прочитал большинство из них и составил список рекомендаций.

Hoa Loranger и Kate Meyer дают советы по написанию текстов для экспертов в предметной области. Они также сканируют информацию, как и обычные пользователи, но ожидают увидеть в публикациях определённые вещи.

Хороший набор конкретных интерфейсных приёмов по обеспечению доступности интерфейсов при работе с клавиатуры от Adhithya Kumar. В начале достаточно стандартный обзор, со второй половины идут паттерны.

On-boarding for Any Situation Конспект сильного выступления Krystal Higgins на тему встречи нового пользователя. Как и Samuel Hiluck, она рассматривает этот процесс шире обучающих экранов при первом запуске — он важен и для новых, и для старых пользователей и заканчивается только тогда, когда пользователь начал активно работать с продуктом. В продолжение темы:

• После скандала с авиакомпанией United Airlines, сайт User Onboarding разобрал интерфейс её мобильного приложения. Оно не менее ужасно, чем сама история.

Дизайнер Quora Henry Modisett приводит дельные мысли о том, как должна работать система уведомлений в продукте. Он разбирает разные категории пользователей и ситуации, в которых они работают, плюс даёт советы по метрикам оценки эффективности уведомлений.

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