НОВОСТИ Дайджест продуктового дизайна, июнь 2020

NewsBot
Оффлайн

NewsBot

.
.
Регистрация
21.07.20
Сообщения
40.408
Реакции
1
Репутация
0
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: .

d2ddd56c6e0eefc0a5572168084ce915.jpg


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




Анализ структуры push-уведомлений от разных платформ, браузеров и программ от Lee Munroe. Бонусом идёт .





Kim Flaherty из Nielsen/Norman Group сделала обзор приёмов информирования в интернет-магазинах по поводу ситуации с коронавирусом. Предупреждения об увеличенном сроке доставки и других ограничениях.





Подробный разбор состояний элементов форм для выбора (чекбоксы, радиокноки, тумблеры, чипы) от Тараса Бакушевича.





Alita Joyce из Nielsen/Norman Group описывает паттерны для встречи нового пользователя в мобильных приложениях. При этом она советует по возможности избегать их.




Rebecca Hugo из Baymard описывает проблемы со всплывающим слоем быстрого просмотра карточки товара, который призван избавить пользователя от перехода на полноценную страницу. Но с возникает ним уйма проблем.



Jakob Nielsen и Anna Kaley из Nielsen/Norman Group дают советы по представлению PDF на сайтах. Они советуют избегать чтения информации на сайте из таких документов, оставлять их только на случай печати или пересылки.



Вышло второе издание книги. Добавлены главы о приватности, инклюзивности и безопасности.


Kim Flaherty из Nielsen/Norman Group рассказывает о UX-исследовании того, насколько эмоджи в названии писем рассылки привлекают пользователей. Такие вещи лучше проверять A/B-тестированием, но заметки полезные.



Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В десятом выпуске разбирает работы Giovanni Pintori.



Мария Симонова рассказывает о поддержке accessibility в мобильном приложении Альфа-Банка для iOS.



Rebecca Hugo из Baymard Institute разбирает хорошие и плохие примеры формы оплаты пластиковой картой в интернет-магазинах.

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




Наикрутейшая статья Christos Kastritis про запуск дизайн-системы Deliveroo. Стратсессия для старта работ, набор индикаторов здоровья, расчёт ROI по разным срезам ( ).








Инструкция по внедрению тёмной темы оформления на личном сайте от Jecelyn Yeen.



Телеканал Пятница сделал тёмную тему для ночного эфира. После 23:00 яркие и громкие проморолики заменит тихая, спокойная айдентика со сказками и стихотворениями.



Дизайнеры Redmadrobot рассказывают о создании тёмной темы оформления для приложения Ростелеком Ключ. Правда, только дизайнерская часть, без дизайн-системы в коде.



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

_mx6fq75k4q5wez_z6qhqlglzk4.jpeg





yqxwbyvnqcefeyijjlh86munbni.jpeg


. Теперь, как и на Android, его легко замусорить. Давний закон гласит: 95% пользователей не настраивают интерфейс (и редко меняют предустановленные производителями устройств настройки). и ( ).

-hzayzmlsulb9nvp-tqob3zzqki.jpeg



dc1y24lcdpjgejhhnzixwv2laum.gif
а показывает фирменный абстрактный знак внизу и плашку с результатом вверху.
qcrcx4ul3kxgezqkoiz01vvskw0.jpeg
Звонки также не перекрывают экран, а показываются в виде плашки вверху.
по QR-коду или NFC. Предполагает помощь в простых действиях вроде зачисления баллов в программе лояльности кофейни, где лень ставить приложение. Правда, это работает только со своим форматом QR-кодов, а значит вряд ли получит нормальный охват. .

2m7ics_jk6ozoxvjjlbysm5fhgu.png


-fa1xlvcwte2x76pkiicfbfb4c4.jpeg

(примерно как пищевая ценность продукта).
oj-a5sksviqgwlzojj_tvscyrma.jpeg
, которое постепенно поддержат крупные автопроизводители.
57ekxwcmj5ohqpogztwu2cvsfam.jpeg
Режим «картинка в картинке», позволяющий свернуть любое видео до маленького размера и перемещаться между приложениями.
, что немного повысит охват сторонних клиентов.

hy59mgrhdiqqayl7hvaxo6g9rq8.jpeg
Экран умного дома лучше показывает текущий статус устройств.
по версии Apple.

Видео презентаций о дизайне:







ducjqtiqz_kcc_x1hstc270c1zg.jpeg


Постоянная боковая панель навигации, что ещё ближе к десктопным приложениям.

zrnhlvlxijle45hnj6dtbhoccti.jpeg


Универсальный поиск в духе spotlight.

gl_8iq-bdwlbobhp7fk1cv6_bzm.jpeg


iq43t6ey8nst89rvy_pt2ffahtm.gif
.


Позволяет комбинировать информацию из нескольких приложений на экране. Развитие возможностей отслеживания здоровья и помощи в занятиях спортом. Из актуальной повестки: смотрит, насколько эффективно моете руки.

0af2oantqo1ju1vr9-e97sqwb7c.jpeg





hffkoenmu1q135joozzo4eccq9a.png


Обновление интерфейса, делающее его ещё немного визуально ближе к iOS.

ngxkeykefp_ne8lpjzquz3llbus.jpeg


И ещё на шаг назад к скеоморфизму — иконки приложений теперь с мусорными тенями и детализацией.

-tv6tafobn_mbtvdzzsd4pzjwjq.jpeg
И ещё на шаг назад к скеоморфизму — иконки приложений теперь с мусорными тенями и детализацией.
Ой, не тот скриншот:

ulghw7ieaxezbgboaev1gyl2-no.jpeg


Первые макеты иконки сообщений в и уже появились. Как и другие «прорывные» элементы дизайна (например, моднейшая для 2001 года иконка уведомлений):

xruhkoqjr-dvkartffmuh9dac98.jpeg


Или эта восхитительная батарейка из Windows XP:

xomecrkm2t9xzwjsuoyjkmrtjpo.jpeg


c7fsjaimx1ny5o7bx0zcbk1aqgu.jpeg
А ползунки получили объём.
Маятник дизайнерских трендов неумолим, даже если с ним выплёскиватеся самоуважение к принципам, о которых ты рассказывал с пеной у рта ещё позавчера. Тот неловкий момент, когда даже неоморфизм не так плох.

, а финальные выйдут, как обычно, в сентябре. Это чутка поинтереснее и полезнее Android 11, который запинали под ковёр.



В этом году традиционная Google I/O сначала перешла в онлайн-формат, а потом и вовсе отложилась из-за протестов. Поэтому бета-версия Android 11 появилась относительно тихо.



Больших прорывов нет, но много разной оптимизации:

fhvzm6xxt7sdboatxr32so0rrtm.gif
В списке уведомлений разделили разговоры с людьми и всё остальное от приложений. Плюс есть история уведомлений за сутки.
В этой же панели , так что она занимает на строчку больше. Ещё больше настроек появится при долгом нажатии на кнопку выключения телефона.

xdtjy08sfeiaavfwbid1uvst0pa.jpeg


Новая позволяет видеть всё на одном экране.

suqr1xkzic5ay_iftdtla61smxm.gif


Доработали и упростили доступ к скриншотам — как и многое другое, оно теперь как в iOS.

56kb-nyuk3vhzr4w8agwnbbsgfo.jpeg


В режиме многозадачности теперь тоже можно сделать скриншот.

xey1u30khoubau9cs750xn5h1ae.jpeg


Управление голосом через Voice Access творит настоящие чудеса — .


One thing I left out of my Android 11 beta hands on was the improved Voice Access, which now understand screen context and content. That was a mistake - it's actually incredible.

You don't have to use a grid or button numbers, you can just say what's on the screen. Watch:

— Dieter Bohn (@backlon)

Сторонним приложениям ещё сильнее ограничили доступ к телефону — многие вещи можно разрешить только при его использовании.

и .

Google к этому тихушному запуску:

  • e



Финальная версия появится осенью. .



Sarah Higley подсказывает, как работать с высококонтрастным режимом Windows, который сильно упрощает дизайн сайтов.



Команда дизайн-системы Salesforce Lightning выпустила плагин для Sketch со всеми компонентами.



Storybook 6.0 позволяет собрать несколько веток в единый живой гайдлайн. Для ситуаций, когда разные команды внутри компании делают разные фреймворки.

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




Page Laubheimer из Nielsen/Norman Group описывает особенности создания трёх типов персонажей: экспертный путь, качественные исследования, количественный опрос. Плюсы, минусы и подводные камни каждого.



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




Kate Kaplan из Nielsen/Norman Group описывает два пути создания CJM: экспертная версия и основанная на исследованиях, текущее и будущее состояние. Самый разумный путь — сначала сделать экспертную версию текущего состояния, потом валидировать её с пользователями и создать видение будущего.





Станислав Хрусталёв из Hard Client собрал CJM для каршеринга Делимобиль.



Новые инструменты дизайна интерфейсов


Figma: Статьи


  • Anne-Sophie Delafosse из Deliveroo рассказывает о . Он позволяет проверить, не развалится ли интерфейс.
  • на примере генератора конфетти.

Шаблоны


  • .

Adobe XD

. Токены для цветов и шрифтов, стеки элементов с поведением как у flexbox, прокрутка внутри блоков прототипа, поддержка русского языка.

UXPin

Некий . Они скупают разные облачные сервисы.



Ускорение работы и оптимизация интерфейса.





Сервис позволяет определить цвет через камеру телефона и вставить его в Figma или Sketch.



Генератор повторяющейся текстуры на фоне из пиктограмм.



Таймлайны для событий, рецепты анимаций, библиотеки (включая iOS и Material Design).





Генератор фигурных разделителей между блоками на промо-сайтах.



Сервис помогает быстро сгенерировать абстрактную округлую форму для промо-сайтов.



Новый инструмент для анимации и motion-дизайна с фокусом на видео-ролики. Много шаблонов и готовых ресурсов.





Экспериментальный инструмент анимирует иллюстрацию на основе захвата ваших движений с веб-камеры.



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

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




Анна Кон из Joom описывает три проблемных способа интеграции пользовательских исследователей в продуктовых компаниях: они проводятся только силами дизайнеров и менеджеров либо только внутри UX-лаборатории, а где-то и вовсе не существуют.





Rachel Miles рассказывает, как использует Airtable для хранения находок из пользовательских исследований. Она базируется на .





Каталог инструментов для удалённых пользовательских исследований от сервиса Ethnio.



Maria Rosala из Nielsen/Norman Group описывает разницу между шкалой Лайкерта и семантическим дифференциалом. Это два популярных вида вопросов с градацией ответов в пользовательских исследованиях.



Jeff Sauro и Jim Lewis показывают, как конвертировать значения шкалы опросов в разных измерениях: 5 и 7 вариантов ответа.



Беглый обзор методов тестирования дизайн-концептов от Paul Boag.



Советы Славы Шестопалова из ELEKS по грамотным вопросам на интервью с пользователями в ходе исследований.



Структурированная памятка по вопросам при проведении интервью с пользователями от Stéphanie Walter.





Агентство UXSSR провело UX-исследование для магазинов Вкусвилл. Они изучили изменение поведения покупателей в период карантина.





Jeff Sauro и Jim Lewis рассчитали размеры выборки респондентов для проведения сравнительных UX-исследований.

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




Кинетическая типографика в браузере на JavaScript.



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


  • .
  • .
  • .


Метрики и ROI




Jeff Sauro и Jim Lewis описывают взаимосвязь опережающих и запаздывающих метрик. Как предсказать результат работы продукта и его интерфейса на ранней стадии.




Дизайн-менеджмент и DesignOps




Kate Kaplan из Nielsen/Norman Group провела опрос 557 специалистов по интерфейсам и разложила их по своей модели зрелости DesignOps. Какие методы и практики они используют по трём срезам: взаимодействие людей, результат работы и её влияние на бизнес.





Kara Pernice из Nielsen/Norman Group описывает стратегию редизайна интранета. Как собрать команду, определить цели, спроектировать и планомерно запустить новую версию.






Открыт предзаказ на книгу. Она посвящена базовым практикам дизайн-менеджмента по управлению командой и выйдет 20 июля.


Дизайн-команда Spotify рассказывает о переработанных принципах дизайна. Есть немного деталей их создания.



IBM провели опрос дизайн-менеджеров в компании на тему зон ответственности, на которые они тратят больше всего времени.



Командное взаимодействие




José Torre из Shopify даёт советы по демонстрации дизайна коллегам для сбора обратной связи.

Управление продуктами и аналитика




Annina Koskinen из Spotify рассказывает о дереве принятия решений при развитии продукта. Этот подход идёт от общей цели бизнеса к возможностям для роста и конкретным гипотезам. Это позволяет последовательно перебрать пространство проблем и решений. .



Кейсы




Дизайн-команда Redmadrobot рассказывает о работе над мобильным приложением для предпринимателей банка Открытие.

Брендинг цифровых продуктов




Nick Levesque из Zendesk рассказывает о создании системы иконок, которые поддерживают бренд. Получился хороший конструктор из базовых форм, которые повторяются в логотипе и других элементах оформления.



Тренды




Обзор трендов в логотипах от Logo Lounge.





Тренды от Adobe Stock. Какие восходящие графические приёмы видны в их коллекции.

jpda670qhhwhelu2frmwzanemto.png
lzkvodo_vi3dwfivws1swpp78uk.png
апрель
июнь





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





Sönke Rohde из Salesforce рассказывает об алгоритмическом дизайне с помощью их движка Einstein Designer. Он персонализирует блоки интерфейса на базе истории пользователя и его предпочтений — например, карточка товара в интернет-магазине может делать акцент на разной информации. .





Экспериментальный алгоритм пошагово воссоздаёт процесс рисования картин известных художников. Интересно, что его тренировали на скринкастах настоящих художников.



Голосовые интерфейсы




Jesús Martín предлагает свой подход к паттернам голосовых интерфейсов: повествовательные, лингвистические и звуковые.



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




Британский консалтинг PA Consulting купил известное агентство по пром.дизайну Astro Studios.



Блог дизайн-команды Societe Generale.

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




Онлайн-конференция по дизайну, которая шла 24 часа — всё это время выступал спикер из определённого часового пояса. Материалов нет, но формат крайне интересный.

Подпишитесь на дайджест в , , , на или ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде за редактор и за визуальный стиль.​
 
Сверху Снизу