Pull to refresh
VK
Building the Internet

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

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

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

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


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



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



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



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


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

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


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



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



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


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



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

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



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


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

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


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


Foundation 6 Building Blocks
Zurb добавили в Foundation огромную библиотеку компонентов — типичные формы, сложные меню, представления статьи и т.п. Анонс.
Managing Technology-Agnostic Design Systems
Brad Frost пишет о том, что современная дизайн-система не должна ограничиваться конкретной технологией реализации. В больших компаниях, как правило, своё историческое наследие и разные продукты созданы на разных языках программирования или фреймворках — эту суровую реальность не изменить, под неё можно только подстроиться.
8-Point Grid — Borders and Layouts
Elliot Dahl разбирает один из главных вопросов, возникающих при использовании шага для измерения размеров элементов и отступов между ними — как считать границы и разделители? Правда, он не касается самого сложного — сеток.

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

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


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


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

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


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



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




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



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

Figma

Adobe XD

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

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

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

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

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

Современные редакционные CMS

Principle


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


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



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



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

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

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


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


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

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

Flexbox и CSS Grid


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


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

UX-стратегия. Часть 5 — Дизайн с выхлопом

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

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

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

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

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



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


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



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



Построение дизайн-культуры


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

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


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



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



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


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


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



Кейсы


Процесс: Редизайн почты «Рамблера»
Дизайн-команда Rambler & Co рассказывает о недавнем редизайне почтового сервиса.

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

We’ve published the task list pattern
Толково описанный кейс работы над общим паттерном сложной формы подачи документов от команды GOV.uk.

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

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

История


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



What made Xerox PARC special? Who else today is like them?
Классик современных компьютеров и интерфейсов Alan Kay рассказывает о том, в чём был секрет успешности исследовательской лаборатории Xerox PARC.

From the Internet Archives — The ancient design of your favorite websites
Leszek Zawadzki собрал старые версии сайтов известных продуктов чтобы понять, как менялось их УТП.

Тренды


Your Traffic Went Mobile; Why Hasn’t Your Design Process?
Josh Clark поднимает вопрос о несоответствии доли мобильного трафика и той прибыли, что он даёт. Он размышляет о том, почему владельцы сайтов уделяют меньше времени оптимизации мобильного веба и теряют деньги. В продолжение темы:

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

Алгоритмический дизайн


Where will UX design be in 5 years? 5 Predictions
Толковые мысли Andrew Wilshere на тему ближайшего будущего профессии UX-дизайнера.

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

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



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


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

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



The FAQs that got me more UX interviews (and ultimately my dream job)
Allison Milchling составила сама для себя список часто задаваемых работодателями вопросов о своём опыте и принципах. Это помогло её в трудоустройстве.

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


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

Questions to ask as a new designer on the team
Jason Cashdollar даёт советы новому члену продуктовой команды о том, какие первые вопросы задавать, чтобы разобраться в продукте.

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


Покупки дизайн-студий крупными компаниями


Сериал «Abstract»

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


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

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

Видео с YouTube

Подписывайтесь на рассылку! Письмо приходит один раз в месяц.
Tags:
Hubs:
+25
Comments 2
Comments Comments 2

Articles

Information

Website
vk.com
Registered
Founded
Employees
5,001–10,000 employees
Location
Россия
Representative
Миша Берггрен