Дайджест продуктового дизайна, июнь 2017

    Уже семь лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2017.

    Дайджест продуктового дизайна, июнь 2017

    Паттерны и лучшие практики


    All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design
    Brad Ellis разбирает способы отказа от верхней панели навигации в мобильных — с современными размерами телефонов работать с ней непросто.

    All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design

    Dashboards — Making Charts and Graphs Easier to Understand
    Отличный обзор сложности восприятия способов представления информации на дашбордах от Page Laubheimer из Nielsen/Norman Group.

    Dashboards — Making Charts and Graphs Easier to Understand

    Best Practices For Hero Images
    Николай Бабич даёт советы по использованию крупных изображений в шапке сайта.

    Исследования Baymard Institute

    Wizards — Definition and Design Recommendations
    Raluca Bidiu из Nielsen/Norman Group описывает лучшие практики использования пошаговых помощников.

    Юзабилити-рейтинг iOS-приложений банков, 2017
    Рейтинг мобильных приложений российских банков для iOS от USABILITYLAB. Пятёрка лидеров: Тинькофф Банк, Банк ВТБ 24, Сбербанк, Альфа-Банк, Промсвязьбанк.



    Дизайн-системы и гайдлайны


    iOS 11
    Анонсирована iOS 11. На самой презентации WWDC деталей про обновление мобильной ОС было немного, зато в бета-версии видно, что стилистика приложения Apple Music становится основой визуального языка платформы:

    • Крупные заголовки экрана и в целом уход от тонких шрифтов.
    • Залитые иконки вместо контурных: наконец-то можно будет унифицировать Android- и iOS-приложения. Стали залитыми и круги вокруг цифр при наборе номера (а также скруглились в калькуляторе).
    • Оркестровка анимации в духе Material Design: например, крупный заголовок превращается в кнопку «назад» при уходе вглубь навигации, а переход в информацию о приложении в магазине совсем уж похоже на то, что делает Google.
    • Сочные изображения используются всё чаще: обновлённый AppStore теперь похож по компоновке экранов на Google Play (хотя экран приложения жутко перегружен).
    • Все всплывающие слои строятся по принципу уведомлений и меню: например, написание письма в стандартном почтовом клиенте.
    • Полноценная работа со скриншотами, включая их редактирование — здорово упростится жизнь тех, кто работает над продуктами.

    iOS 11

    Здорово, что после безликого iOS 7, которая скопировала проблемы Windows Phone и его тысяч однояйцевых приложений, у платформы появляется яркое лицо.

    iPad продолжает пытаться развиваться в сторону замены компьютера (drag&drop между двумя открытыми рядом приложениями, панель задач а-ля doc в MacOS, файловая система, расширенная работа с пером (ещё), хотя постоянное падение продаж в последние годы говорит о том, что развивается он не совсем туда. Единственное, что показывает проблески светлого будущего — появление почти полноценного аналога Affinity Photo.

    Из других интересных моментов: стандартная камера научилась читать QR-коды (что должно сделать их популярнее), развитие возможностей машинного обучения, запоздалое появление возможностей работы с дополненной реальностью, режим «не беспокоить» во время вождения, бесконечно уродливая панель быстрых настроек. Материалы для дизайнеров:


    Apple Watch
    • Вышла watchOS 4. Из относительно явных интерфейсных изменений — список запущенных и недавних приложений превратился в вертикальную ленту.

    In the future, design principles won’t be about design
    Шикарный анализ принципов дизайна крупных компаний от Jerome de Lafargue. Он выделил наиболее популярные (они одинаковы у многих организаций) и отметил, что хорошие принципы должны быть не просто абстрактным манифестом ценностей дизайн-команды, а давать чёткие ценности, связанные с ценностями бизнеса и пользователей.

    In the future, design principles won’t be about design

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


    Microsoft Mixed Reality Design Guidelines
    Microsoft опубликовали дизайн-гайдлайны по проектированию интерфейсов смешанной реальности. Анонс.

    Alla Kholmatova — Design Systems
    В сентябре Smashing Magazine выпускают книгу Аллы Холматовой «Design Systems». Её можно пред-заказать и прочитать первую половину уже сейчас, плюс бесплатно доступна глава 2.

    Alla Kholmatova — Design Systems

    Другие новости дизайн-систем:


    Building great user experiences on Slack
    Гайдлайны Slack по проектированию приложений и ботов для мессенджера.

    Понимание пользователя


    Cognitive bias cheat sheet
    Крутейшая модель классификации когнитивных искажений от Buster Benson. Он разложил их по 4 категориям — слишком много информации, недостаточно смысла, нужно быстро принять решение, избирательная память. Перевод.

    Cognitive bias cheat sheet

    Increase funnel conversion with Psych
    Darius Contractor из Dropbox предложил необычный подход для оценки когнитивной нагрузки интерфейса — он оценивает все элементы интерфейса с помощью условной единицы «psych». Если цифра больше нуля — интерфейс хороший. Это чем-то похоже на модель «3 банок» от Google. Перевод.

    Who plays mobile games?
    Команда Google Play и SKIM Analytics провели исследование поведения людей, играющих на мобильных. Они выделили 5 сегментов в зависимости от вовлечённости и социальности.

    Подход Jobs To Be Done
    Отличная сводная памятка по методике определения потребностей пользователей Jobs to Be Done от Анны Булдаковой.

    Информационная архитектура, концептуальное проектирование, контент-стратегия


    Blind Spot — Illuminating the Hidden Value of Business
    В прошлом году Rosenfeld Media выпустили книгу Steve Diller, Nathan Shedroff и Sean Sauber «Blind Spot: Illuminating the Hidden Value of Business». UXmatters публикует отрывок из неё, посвящённый современному процессу дизайна продуктов.

    UX Writing — How to do it like Google with this powerful checklist
    Конспект сессий конференции Google I/O 2017, посвящённых написанию интерфейсных текстов. Во второй половине неплохой подход к формированию тональности бренда.

    Provoking Difficult Design Conversations
    Dan Brown делится опытом решения сложных проектных ситуаций, когда сложно трактовать правки заказчика однозначно. Он предлагает подход, в котором делается часть изменений с тем, чтобы начать более предметный разговор.

    Using UX design to reduce the risk of innovation failure
    Занятная модель «тройного алмаза» от Nomensa — они добавили ещё один этап в начале, отвечающий за поиск ценности для пользователей и бизнеса.

    Design principle: Organizing information
    Антон Николов перечисляет пять подходов к организации информации: по местоположению, алфавиту, времени, категориям и иерархии. Перевод.

    Проектирование и дизайн экранов интерфейса


    Sound Kit for Prototypes
    Библиотека интерфейсных звуков от дизайн-команды Facebook. Лицензия позволяет использовать их только в прототипах. Советы по работе со звуком в интерфейсе от Will Littlejohn.

    Facebook Sound Kit for Prototypes

    Adobe XD
    • В июньской бете наконец-то появились символы, включая переопределение состояния конкретной копии. Улучшена работа со слоями и градиентами.

    Июньское обновление Adobe XD

    InVision Craft

    Sketch 45
    Улучшена работа с плагинами (для автообновления не нужны сторонние утилиты) и много интерфейсного тюнинга (перевод).

    Sketch 45

    Плагины и полезные статьи:


    Framer

    Gravit


    Пользовательские исследования и тестирование, аналитика


    How to Turn UX Research Into Results
    Памятка Cindy McCracken для пользовательских исследователей о том, как правильно донести результаты до продуктовой команды и участвовать в дизайн-процессе, который вносит исправления на базе найденных выводов. В продолжение темы:


    Lab Testing Beyond Usability — Challenges and Recommendations for Assessing User Experiences
    Много говорится о том, что лабораторное юзабилити-тестирование имеет свои ограничения и подходит не для всех ситуаций, но разборы конкретных проблем случаются реже. Carine Lallemand и Vincent Koenig провели серию тестов и достаточно подробно описали конкретные проблемы в интерпретации поведения пользователей.

    7 Questions About User-Research Panels
    Caroline Jarrett и Naintara Land описывают плюсы, минусы и подводные камни создания собственной панели респондентов. Хорошая памятка для тех, кто готов.

    Why the SUPR-Q is better than the SUS for websites
    Jeff Sauro считает, что комбинированная метрика SUPR-Q лучше подходит для оценки сайтов, чем SUS — она проще, даёт итоговую оценку нужных факторов, а результаты можно сравнивать с аналогичными продуктами.

    Визуальное программирование и дизайн в браузере


    Master React — Unleash Your Design Superpower
    Онлайн-курс по React для дизайнеров.

    Master React — Unleash Your Design Superpower

    A day without Javascript
    Sonnie Sledge проверил, что происходит с известными сайтами при выключенном JavaScript — многие становится сложновато использовать.

    Handling Long and Unexpected Content in CSS
    Ahman Shaheed показывает, как обрабатывать краевые ситуации в элементах интерфейса, когда реальный контент ломает их структуру.

    Новые скрипты

    Веб-типографика

    Flexbox и CSS Grid


    Метрики и ROI


    UX & NPS Benchmarks for Consumer Software (2017)
    Jeff Sauro опубликовал результаты исследования NPS для 17 популярных профессиональных программ и веб-сервисов. Исследование говорит, что показатель SUS отвечает примерно за треть оценки рекомендующих продукт пользователей.

    UX & NPS Benchmarks for Consumer Software (2017)

    UX-стратегия и менеджмент


    Humanizing the Enterprise
    Pabini Gabriel-Petit пишет о том, как повысить вовлечённость продуктовой команды с помощью матрицы социальных потребностей. Концепция базируется на книге Paul Herr «Primal Management».

    Crafting an Effective Working Group
    Jessica Harllee рассказывает о формате ситуативных рабочих групп для решения сложных дизайнерских задач в Etsy. Мы используем похожий подход и он здорово показал себя.

    Crafting an Effective Working Group

    Ещё о структуре дизайн-команд:


    Wake

    Kit Oliynyk — The Colors of Design Cultures
    Выступление Кирилла Олейниказ Capital One на SXSW об их подходе к определению сильных и слабых сторон дизайнера.



    Продуктовый менеджмент и аналитика


    The Potential of Agile
    Scott Sehlhorst сделал отличный разбор целей работы по agile и выгод для продукта от этого. Как именно он помогает проверить продуктовые инсайты.

    Методологии, процедуры, стандарты


    Game Thinking
    Методология Game Thinking предполагает использование опыта работы над играми при создании более привычных цифровых продуктов. Обзор методологии от Amy Jo Kim.

    Game Thinking

    Дизайн-спринты


    Кейсы


    Designing Facebook Spaces
    Christophe Tauziet подробно рассказывает о работе над Facebook Spaces, попытке создать социальную сеть в виртуальной реальности. Особенно интересна последняя часть, где показывают эксперименты с разными интерфейсными подходами.

    Designing Facebook Spaces

    Transforming Data to Insights
    Anwesha Samanta из Salesforce рассказывает, как проектировали аналитический сервис и облегчили пользователям поиск инсайтов среди сырых данных.

    Redesigning a Remote
    Простой и симпатичный кейс работы над мобильным приложением от Eli Rousso.

    Непрошенные редизайны


    История


    Web Design Museum
    Коллекция старых сайтов с 1996 по 2005 год. Накоплено 800 примеров.

    Web Design Museum

    Across the Computer Divide, The Nerds Face the Dummies
    Статья New York Times 1993 года, в которой поднимаются проблемы в использовании компьютеров, говорится о юзабилити и инициативах Microsoft и других компаний.

    Тренды


    KBCP Internet Trends 2017 Report от Mary Meeker
    Ежегодный прогноз трендов развития интернета от Mary Meeker из KPCB (избранное). Слайд № 188 посвящён росту количества дизайнеров в крупных компаниях — хороший индикатор зрелости отрасли.



    KBCP Internet Trends 2017 Report от Mary Meeker

    The State Of Advanced Website Builders
    Drew Thomas размышляет на тему того, заменят ли конструкторы сайтов дизайн-студии. Он смотрит на их сильные и слабые стороны и предлагает новые форматы работы для агентств, которые позволят остаться нужными.

    How Logos Became the Most Important Quarter-Inch in Business
    Интересный взгляд Fortune на историю брендинга — они пишут о том, как цифровой продукт и интерфейс со временем стали определяющими для него.

    How Logos Became the Most Important Quarter-Inch in Business

    What On Earth Is A Brutalist Website? 5 Things Today’s Designers Can Learn From Brutalism
    Andrew Wilshere разбирает сайты в духе брутализма относительно принципов, заложенных в такой архитектуре. Под это понятие подмешивают просто нарочито грубый или гранжевый дизайн, хотя изначальная идея брутализма была в простоте и максимальной открытости структуры.

    What On Earth Is A Brutalist Website? 5 Things Today’s Designers Can Learn From Brutalism

    Algorithm designs seven million different jars of Nutella
    Итальянское подразделение Ogilvy & Mather сделало алгоритмическую упаковку для Nutella. Они сгенерировали 7 миллионов паттернов для этикетки, тираж разлетелся за месяц.



    Другие материалы об алгоритмическом дизайне:





    Design in the Era of the Algorithm
    Развитие статьи Josh Clark об этике современных продуктов, полагающихся на алгоритмы и машинное обучение.

    Designing experiences for Virtual Reality — Lessons from the physical world
    Принципы дизайна интерфейсов виртуальной реальности от Yisela Alvarez Trentini.

    Для общего и профессионального развития


    Как я прочитал все выпуски продуктового дайджеста
    Кирилл Улитин сделал крутейший анализ дайджеста продуктового дизайна за 7 лет — основные темы, ключевые слова, упоминаемые люди и компании и т.п. Вместе с названием (изначально всё называлось «Обзор свежих материалов по проектированию интерфейсов», позже перешло в более широкое «Дайджест продуктового дизайна») менялись рубрики (стало обширнее), степень фильтрации (меньше публикаций на совсем базовые темы), подход к подготовке (сотрудничество с vc.ru мотивировало к регулярности, а она мотивировала к упрощению подготовки), добавилась рассылка. На сайте UX Buzzwords есть интерактивная версия. Всегда хотел проанализировать архив выпусков, но не хватало времени и навыков.

    Как я прочитал все выпуски продуктового дайджеста

    На прошлой неделе количество подписчиков пробило 15 000 — новая планка для отечественных групп по дизайну в Фейсбуке (за исключением поиска работы).

    A Turn of Phrase — The Politics of UX Language
    Carol J. Smith пишет о том, как UX-специалисту говорить на понятном клиенту языке. Она не считает зазорным не убиваться о том, что кто-то называет юзабилити-тестирование «фокус-группой» — зачастую лучше начать работу, а уже потом объяснить разницу.

    Пользователи Reddit предложили самые нелепые варианты интерфейса регулировки звука
    Флеш-моб на Reddit, в котором сообщество предложило самые ущербные подходы к интерфейсу регулировки громкости.

    Book Review: Practical UX Design
    Обзор книги Scott Faranello «Practical UX Design», которая вышла в прошлом году в издательстве Packt Publishing.

    No No No
    Julie Zhuo учит дизайнеров говорить «нет» в нужный момент и в нужном ключе.

    20 лекций TED для дизайнеров
    В блоге Tilda собрали добротные выступления на TED, относящиеся к дизайну.

    20 лекций TED для дизайнеров

    Люди и компании в отрасли


    Google Design
    Обновился сайт Google Design.

    Материалы конференций


    UXSTRAT 2017
    В 2017 году пройдут две части конференции UXSTRAT 2017: 15-16 июня в Амстердаме и 18-20 сентября в Boulder, США. Она посвящена дизайн-стратегии и собирает мощный состав тематических спикеров. Презентации с европейской части конференции. Наиболее интересные презентации:














    Enterprise UX 2017
    Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Natalie Hanson сделала шикарный подробнейший конспект выступлений:


    LX Conference 2017
    Конференция LX Conference 2017 прошла 24-25 апреля в Сан-Франциско, США. Она посвящена дизайн-менеджменту и UX-стратегии (видео выступлений). Обзоры:




    Подписывайтесь на рассылку! Письмо приходит один раз в месяц.
    Mail.ru Group
    Building the Internet

    Comments 3

      +1
      Спасибо большое за подборку! Практически единственный качественный материал в Дизайн разделе за последнее время…
        +2
        Юрий, здорово, что вы уже в курсе о нас!

        Экспериментальный инструмент uKit AI от создателей uCoz движется в сторону The Grid и Wix ADI.


        Единственное, хотел уточнить, что мы движемся немного в другом направлении. Поясню на слайде из презентации проекта:



        Т.е. мы фокусируемся на тех малых предприятиях, у которых уже есть сайты (по недавней оценке Google, это порядка 40% МСБ в мире) — грубо, берем что-то аля сайтов из Web Design Museum и стараемся переработать в плане визуального восприятия, структуры и адаптивности.

        p.s. Еще раз спасибо за виртуальное знакомство, и следите за нашими рассылками)
          +1
          Крупные заголовки экрана и в целом уход от тонких шрифтов.
          Залитые иконки вместо контурных
          Боже, наконец-то яблочники выбросят нынешний гламурный бред.
          стандартная камера научилась читать QR-коды
          Неужели свершилось чудо?

          Only users with full accounts can post comments. Log in, please.