Хабрахабр

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

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-сентябрь 2018.

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

Everything you need to know about skeleton screens

Bill Chung провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не являются просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.

image

Individualized Recommendations — Users’ Expectations & Assumptions

Aurora Harley говорит о значительном улучшении рекомендательных систем за последние годы. Она даёт толковые советы по их реализации.

image

Adam Silver — Form Design Patterns

Smashing Magazine выпустили книгу Adam Silver «Form Design Patterns» о приёмах дизайна форм. Автор разбирает множество типовых примеров. Они публикуют отрывок из неё, посвящённый формам регистрации.

image

Lazy Loading Images

Памятка по реализации «ленивой» загрузки изображений в вебе от Rahul Nanwani. Многие сильно ухудшают работу с сайтами, реализуя только часть из этих практик. В итоге пользователи с хорошим интернетом дольше ждут, пока загрузится графика.

image

Micro nudge — A micro animation for behavioral change

Vivian Zhang описывает паттерн подталкивания пользователя к действию с помощью отложенной анимации элемента интерфейса. Это помогает обратить внимание на функциональность, не вываливая на человека все возможности сразу.

image

MODALZ MODALZ MODALZ

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

image

User flow is the new wireframe

Alexander Handley описывает уровни детализации wireframes и сценариев.

The next big jump in Basecamp accessibility!

Michael Berger из Basecamp рассказывает о быстрой навигации по продукту для пользователей с ограниченными возможностями (хотя пригодится и остальным). Оно похоже на spotlight в MacOS.

Designing Experiences To Improve Mental Health

Marli Mesibov из Mad*Pow даёт советы по дизайну интерфейсов, которые помогают в поддержании ментального здоровья пользователей.

Microinteractions in User Experience

Alita Joyce из Nielsen/Norman Group описывает принципы хороших микро-взаимодействий в интерфейсе.

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

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

Dealing with Dependencies Inside Design Systems

5 часть серии статей Nathan Curtis о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности.

image

Brad Frost & Dan Mall — Designer + Developer Workflow

Двухчасовой скринкаст демонстрации совместной работы дизайнера и разработчика от Brad Frost и Dan Mall. Сопроводительная статья.

Designing design systems

Толковая статья Jerlyn Jareunpoon-Phillips из Clearleft о внедрении дизайн-систем на практике. Полезные нюансы процесса общения с продуктовой командой или клиентом.

image

Rambler Ratio

Rambler обновили сайт своей дизайн-системы Ratio.

image

Only One Deliverable Matters

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

Systemizing color for change

Tyler Miller показывает, как можно сделать тёмную тему оформления интерфейса и описать её переменные.

Унифицированные иллюстрации в цифровых продуктах

Иллюстрации стали обязательной частью айдентики цифровых продуктов ― они есть в каждом первом сервисе. Ещё бы ― в хорошем интерфейсе всё занято полезными вещами и особо нет мест для выражения бренда, разве что лого, цветовая палитра, пиктограммы и характерные паттерны. Так что иллюстрации ― простой и экспрессивный способ сделать бодрее и более узнаваемо. Особо продвинутые проявляют единство коммуникации в текстах и анимации, но этого сложнее добиться. Так что неудивительно, что половина Дрибббла забита безинтерфейсными картинками. Собрал пачку историй известных компаний, которые нашли себя.

image

Your Face Here

Jennifer Hom рассказывает о работе над новым единым стилем иллюстраций Airbnb. Её интервью Wired на эту же тему.

image

Designing Adobe’s Brand Illustration Style

Emma Zhang рассказывает о работе над новым единым стилем иллюстраций Adobe.

image

Isometriclove — Cute Isometric Objects For Design

Галерея изометрических объектов для одного из самых модного сейчас стиля иллюстраций. С такими инструментами через полгода он будет вообще везде.

image

What it takes to win an Apple Design Award

Joseph Russell изучил неигровые приложения для iOS, которые получали награду Apple Design Awards с 2014 года. Он попытался выявить общее между ними. Местами натянуто, но полезно.

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

Four Jobs Teachers Are Trying to Get Done

Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя.

image

Technology Myths and Urban Legends

Kate Moran и Kim Flaherty из Nielsen/Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов.

image

The Vortex — Why Users Feel Trapped in Their Devices

Kate Moran и Kim Flaherty из Nielsen/Norman Group описывают ситуацию «водоворота», в который засасывают пользователя отвлекающие события вроде уведомлений.

Kat Holmes «Mismatch»

Издательство MIT Press выпустило книгу об инклюзивном дизайне от руководителя этой инициативой в Microsoft. Выдержка из неё.

image

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

Scott Kubie «Writing for Designers»

Издательство A Book Apart выпустило мини-книгу о текстах в интерфейсах. Они публикуют выдержку из неё.

image

The Riddle of UX Writing

Толковый подход Ben Hersh из Medium к хорошим текстам в интерфейсе. Он разделяет три составляющих ― понятность, дружелюбность и эмоциональность.

image

The 3 Elements of Great UX Writing

Dylan Ortega даёт советы по написанию хороших текстов в интерфейсе. Типичная, но хорошо структурированная памятка.

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

Adobe MAX 2018

Ежегодная монстрическая презентация новых продуктов и экспериментов Adobe MAX 2018 прошла с 15 по 17 октября в Лос Анджелесе. Как всегда, карьерный самосвал обновок.

image

Adobe XD

Октябрьское обновление вышло очень плотным, это крупнейший рывок инструмента. Самое крутое — можно прототипировать голосовые интерфейсы; прототип слушает команды и отвечает голосом (купили сервис Sayspring весной). Фигасе! Вдобавок — UI Kit для Amazon Alexa.

image

Помимо базовых типа Zeplin и дежурных вроде Slack и Jira есть трушные дизайнерские — Overflow, ProtoPie, UI Faces, Rename It. Появились первые плагины.

Ещё одна интересная штука — автоанимация, когда инструмент сам простраивает переход между двумя артбордами со сменой состояний элементов.

Также можно открывать файлы Adobe Illustrator и экспортировать в After Effects. Связанные символы могут обновляться в макетах, которые используют их, при изменении оригинала.

Photoshop

Обещанная полноценная версия для iPad подтвердилась. Можно работать с PSD-файлами в адаптированном интерфейсе. Доступна будет в следующем году.

image

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

Adobe Fonts

TypeKit наконец-то переименовали. И сняли много ограничений — можно синхронизировать на компьютер хоть все 14 000 шрифтов, нет разницы между использованием на компьютере и в вебе, убрали лимиты по просмотрам и доменам в вебе.

image

Другие продукты

  • After Effects с пачкой приятных возможностей.
  • Illustrator с кучей улучшений интерфейса и работы с объектами.
  • InDesign облегчает перекомпоновку при изменении размеров страницы и автоматом подбирает правильную обрезку изображений.
  • Project Aero для рисования в дополненной реальности.
  • Project Gemini, инструмент для рисования на iPad.
  • Character Animator CC прикрутил наработки из эффектных прошлогодних демок с быстрым наложением иллюстративных стилей на персонажей.
  • Dimension 2.0 для использования 3D-объектов в двухмерных изображениях.
  • Premiere CC сфокусировался на видеоблогерах.

Обновления уже прилетели через Creative Cloud. Все видео выступлений.

Грешновато профессионалу не интересоваться тем, что происходит с инструментами дизайна, ведь Adobe делает безумное количество прорывных штуковин. Хотя многие с удивлённым мизинчиком поправят монокль, глядя с высоты своих Фигм и Скетчей, Adobe — важная компания на рынке, так что какие-то из их продуктов вы наверняка используете.

Figma

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

Пошаговое подключение к макетам и их разбор. Читайте также инструкцию по работе с API для начинающих от Daniel Hollick из TIDAL.

FramerX

Lachezar Petkov разобрал нюансы работы с инструментом.

Interplay

Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.

image

Modulz

Colm Tuite начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте (сопроводительная статья). Денег дали.

Overframe

Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промо-сайта.

Ratio

Экспериментальный инструмент дизайна от Florian Schulz. В своей крутейшей сопроводительной статье он рассказывает о его принципах работы. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).

Principle 5

Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.

UXPin

В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя).

Famous

Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.

Webflow

Добавили инструмент работы с CSS Grid.

Sketch

Советы Дмитрия Бунина по использованию стилей текста в Sketch 52.

Design Tool Time Machine

Prototypr запустили хронологию обновлений инструментов дизайна — сейчас есть архив за последний год.

image

Tim Brown «Flexible Typesetting»

Издательство A Book Apart выпустило книгу от главного типографа Adobe.

image

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

3 Ways to Make Your Research Better Today

Kie Watanabe из HubSpot даёт советы по донесению результатов пользовательских исследований до продуктовой команды и принимающих решения. Толковый системный взгляд.

image

User Interviews — How, When, and Why to Conduct Them

Памятка по проведению интервью с пользователями от Kara Pernice из Nielsen/Norman Group. Достаточно подробно для обзора.

image

The Who and the How — Refining research needs

Selina Parmar из Deliveroo рассказывает о методах пользовательских исследований для разных задач в компании.

7 Tips for Building a UX Research Team

Meghan Wenzel делится опытом выстраивания процесса UX-исследований в компании с нуля.

UX Feedback

Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из 5), есть возможность задать дополнительные вопросы.

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

Rhythm in Web Typography

Выдержка из главы 6 книги Matej Latin «Rhythm in Web Typography», посвящённая ритму в веб-типографике.

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

Возможности CSS для дизайна

Метрики и ROI

Building a UX Metrics Scorecard

Jeff Sauro описывает подход сводных оценочных листов состояния UX в продукте. Это отличный наглядный инструмент для отслеживания «здоровья» дизайна и выбора точек приложения усилий дизайн-команды.

image

Measuring DesignOps

Dave Malouf размышляет на тему ROI DesignOps. Простых способов нет (и не факт что он вообще нужен), но можно оценивать зрелость через несколько простых показателей.

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

Improving Onboarding with Employee Experience Journey Mapping — A Fresh Take on a Traditional UX Technique

Hannah McKelvey и Jacqueline L. Frank рассказывают, как они использовали customer journey map для встречи новых сотрудников в библиотеке. Эта задача сама по себе интересная и важная, так что статья полезна вдвойне.

image

The fundamental job of design is not great design

Karl Fast пишет о трёх ролях дизайна в современных компаниях: интеграция, трансформация и эволюция. Толковый взгляд на задачи дизайн-менеджера.

How to give designers constructive feedback they can actually use

Памятка по формулированию обратной связи по дизайну от Jes Kirkwood.

Why we run content design days — And why you should too

Aimee Quantrill из Deliveroo рассказывает о регулярных днях совместной работы над контентом, в которых участвуют многие сотрудники компании.

GC Maturity Score

Модель зрелости дизайна в командах государственных сайтов от Margot Lagendijk и Charlotte van Lijnden. Построена по принципу радарной диаграммы.

The Role of Soft Skills in Conveying Strategy to Executives

Колонка UXmatters о том, как продать UX-стратегию топ-менеджерам. В статье хорошее разделение двух понятий этого термина — стратегия организационных изменений для выпуска хороших продуктов и план работы над конкретным продуктом.

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

WAYWO — Because work doesn’t have to be polished to be shared

Rob Hunt из Deliveroo описывает неформальный подход дизайн-команды, который призывает коллег поделиться текущим статусом работы, чтобы все были в курсе дел.

Sympli Versions

Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в прошлом году, теперь она доступна для всех.

Drafta

Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания. Делает отечественная компания Scada.

Sensitive

Ещё один сервис версионирования макетов.

Purple

Сервис помогает хранить проектную документацию по дизайну — от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.

image

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

Ideo breaks its silence on design thinking’s problems

Michael Hendrix из IDEO ответил на критику дизайн-мышления, которой было очень много в последние годы. Он справедливо замечает, что это одна из методологий, которые всегда можно использовать неправильно.

Кейсы

How to build a case for a product redesign

Рассказ Maple Kuo о редизайне части аналитического сервиса Firebase от Google.

How we’re designing complex systems

Дизайн-студия Heavyweight рассказывает о редизайне голландского сервиса для бухгалтеров KeesdeBoekhouder.

История

The earliest versions of Google’s top products

JR Raphael собрал скриншоты первых версий ключевых продуктов Google.

Тренды

Статистика рынка (III квартал 2018)

0,1%

рост продаж компьютеров в мире

1,6%

рост продаж смартфонов в России

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

Artificial Intelligence and the Future of Web Design

Fred O’Brien описывает текущее состояние конструкторов сайтов, использующих алгоритмический дизайн. Он пообщался с создателями многих из них или процитировал их мнения на тему.

image

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

What Could an Intelligent Assistant Do for You? A Diary Study of User Needs

Raluca Budiu и Kathryn Whitenton продолжают серию исследований голосовых интерфейсов от Nielsen/Norman Group. Они изучили ожидания пользователей от идеального умного помощника и сопоставили их с существующими продуктами по нескольким критериям. Крайне интересная пища для выбора направлений развития.

image

Новости

Навыки Alexa могут взаимодействовать друг с другом.

Blockchain UX — Challenges, Principles and Heuristics

Относительно толковый разбор особенностей дизайна интерфейсов в блокчейне. Большинство статей на тему страдают отсутствием конкретики, здесь хотя бы неплохой обзор ключевых нюансов.

Magic UX

Концепт навигации между мобильными приложениями за счёт их привязки к физическому пространству — это позволяет сделать переходы между ними ближе к объектам реального мира.

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

Техническая эстетика

В прошлом году состоялась премьера документального фильма об Уральской школе дизайна в СССР. Теперь он есть в онлайне. Сейчас в работе продолжение о Ленинградской школе.

Видео с курса «100 лет дизайна»

Авторы всю осень публикуют видео пятилеток. Для записавшихся на курс доступны почти все ролики.

Design Portfolio Bingo

Beccah Erickson сделала шаблон булшит-бинго для дизайнерских портфолио.

image

DNA of a Designer

Занятный способ описания навыков продуктового дизайнера от Anish Joshi.

image

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

Pocket Design

Блог дизайн-команды Pocket. В первой статье Tony Murphy рассказывает о целях редизайна продукта и принципах дизайна, которые закладывали в него.

image

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть