Дайджест продуктового дизайна, май 2015
Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-апрель 2015.
Паттерны и Best Practices
Почтовые рассылкиAbsolute vs. Relative Timestamps: When to Use WhichШеф-редактор UX Movement разбирает относительное и абсолютное значение времени и даты в интерфейсах, пытаясь разобраться, когда какой из форматов лучше использовать.
Встреча нового пользователя
Выдержки из отчета Baymard
Бургерная навигация
Free E-book of Web UI Design Techniques: Cards & MinimalismКоллекция паттернов карточного представления в новой книге UXPin.
3 ways friction can improve your UXDina Chaifez о том, что не всегда имеет смысл делать процесс взаимодействия с продуктом идеально гладким и вылизанным. Иногда специально оставленные или спроектированные небольшие «шероховатости» могут повысить вовлеченность пользователей и создать более богатые впечатления.
Разбор анимации в мобильных приложениях
Гайдлайны платформ и шаблоны дизайна для них Обновление Google DesignНа конференции Google I/O 2015 был показан Android M, а также серьезно обновлены гайдлайны по всем платформам. На сайте Google Design вместо карточек тайлы, активно продвигается шрифт Roboto Mono — возможно, в этом году нас ждет бум интереса к моноширинным.FirefoxOS: TVs and connected devicesMozilla опубликовала гайдлайны FirefoxOS для ТВ. Подход к анимации очень интересный, небольшой рассказ о ее основных принципах.
Дизайн для Windows 10
Новое для Apple Watch
[embedded content]50 Meticulous Style Guides Every Startup Should See Before LaunchingЕще одна коллекция гайдлайнов и брендбуков.
Принципы дизайна
Понимание пользователя The Psychology of Pricing — A Gigantic List of StrategiesРабота с ценами, их отображением является важной частью дизайна для конверсии. Nick Kolenda подготовил очень и очень крутой обзор психологических стратегий и дизайнерских методов методов представления цен продуктов. В закладки и регулярно перечитывать. Такие мощные вещи попадаются раз в несколько месяцев.Работа с контекстом пользователя
Secrets, Lies, and Account Recovery — Lessons from the Use of Personal Knowledge Questions at GoogleИсследование Google о проблемах в использовании секретных вопросах при регистрации и восстановлении пароля. Помимо того что они плохо запоминаются и их легко подобрать, есть и другие проблемы, ведущие к снижению уровня защищенности пользовательских данных.
Fingers, Thumbs, and PeopleSteven Hoober собрал основные тезисы из своих исследований за последние пару лет.
Google Ventures On How To Design A Killer WebsiteMichael Margolis из Google Ventures рассказывает об опыте работы фонда с сервисами электронной коммерции. Они вывели общие принципы воронки покупок, которые работают в самых разных ситуациях, когда покупатель подбирает продукт или услугу. Интересно, что они достаточно широко смотрят на задачу.
Информационная архитектура, концептуальное проектирование, контент-стратегия Think with Paper by FiftyThreeПриложение Paper для рисования на iPad теперь заточено и под скетчи интерфейсов и диаграмм. Оно автоматически преобразует наброски в четкие фигуры и позволяет представлять итоговые работы в приятном виде. Правда, тут же появилась пародия на него.[embedded content]
Проектирование услуг
Employee Experience Journey Mapping workshop slidesПодробный разбор подхода к проектированию процесса найма и работы с сотрудниками от команды Designing CX. В дополнение к презентации выложены все использующиеся шаблоны.
Content-First DesignSteph Hay пишет о контент-прототипах, которые собирают весь контент, использующийся в продукте. Они облегчают в том числе проведение пользовательских исследований.
Проектирование и дизайн экранов интерфейса On the Wrist: Android Wear vs. Apple WatchLuke Wroblewski сравнивает принципы работы и особенности использования Android Wear и Apple Watch. Он делает вывод о том, что на текущий момент на умных часах нужны в первую очередь действия, а не приложения — они слишком тяжеловесны.В появившейся чуть раньше статье Люк говорит о том, что убирание видимой части интерфейса зачастую просто переносит его в память пользователя — ему нужно знать все жесты, горячие клавиши и другие действия, которые явно не показаны в интерфейсе. Он приводит в пример Android Wear и Apple Watch, где надо помнить очень много для работы с интерфейсом.
Why the Best Wireframe Style Is No StyleAnthony T напоминает, что wireframes должны быть черно-белыми, без применения эффектной для подачи стилистики, как все чаще можно видеть на том же Dribbble. Их задача — передать структуру и логику работы экранов, для того чтобы как можно скорее перейти к дизайну, а не быть отдельным инструментом продажи.
Getting fluent at the language of iconographyWenting Zhang пишет о том, что некоторые иконки обозначают существительные, а некоторые — глаголы, и важно не совмещать их. Он также развивает тему единого языка иконок, ведь они не случайно используют шрифты, а первые системы письменности использовали иероглифы, т.е. тоже иконки.
Designmodo Market — Digital Goods Marketplace for Web CreativesDesignModo запустили магазин шаблонов для дизайнеров.
Новое для Sketch
Новое для Marvel
Пользовательские исследования и тестирование, аналитика Qualitative Research SoftwareВ прошлую среду OptimalWorkshop выпустили очень полезный инструмент для хранения результатов ваших пользовательских исследований и поиска по ним. Они пытаются решить реальную проблему — часто результаты тестирований хранятся в разрозненных документах, в разных местах, и информация внутри них никак семантически не связана. Здесь же, все в одном месте, помечено тегами и связано. Сейчас инструмент довольно простой, но думаю, через год-другой ребята сделают нормальный трекер юзабилити-проблем и решений.How to Find the Sample Size for 8 Common Research DesignsJeff Sauro приводит размеры выборки респондентов для разных типов исследований. Очень полезный справочник.
Инструменты для пользовательских исследований
3 Ways to Combine Quantitative and Qualitative ResearchJeff Sauro описывает три наиболее востребованных способа комбинирования методов качественных и количественных исследований.
A/B-тестирование
The User is My MomОбратка недавней услуге по тестированию интерфейса пьяным: сервис, где пожилая мама его владельца тестирует ваш дизайн. Немного о нем.
Экспертная оценка
Asking Probing Questions During a Usability StudyКолонка UXMatters, в которой группа экспертов отвечает на вопрос «Что делать, если в ходе исследования пользователь не заметил важный элемент интерфейса».
Визуальное программирование и дизайн в браузере Живые гайдлайны и компонентные системыРабота с Bootstrap и Foundation
Веб-типографика
Эффекты наложения слоев в браузерах
CSS Shapes
CSS-анимация
Новые скрипты
Работа с Flexbox
Работа с SVG
Работа с Pixate
Revisiting: VisitedJoel Califa о том, что пора наконец-то вспомнить про один из ключевых CSS-атрибутов : visited для ссылок и снова отмечать уже посещенные. Он предлагает несколько решений для дешевого внедрения в условиях того, что многие разработчики обнуляют стандартный CSS в своем коде.
Input Type SandboxAaron Ladage запустил небольшую тестовую утилиту для проверки всех разных типов полей ввода в разных браузерах в большом и мобильном вебе. На Smashing Magazine вышла статья с разбором основных находок. В этой ветке будут собираться особенности работы веб-форм в разных браузерах.
StatusPage.io — Hosted Status Pages for Your CompanyСервис Better Error Pages для быстрого создания страниц ошибок. После этого их нужно будет загрузить к себе на сервер.
Управление интерфейсными проектами, процессами и командами Дизайн-культураUnderstanding Stakeholders Through ResearchJim Ross описывает процесс сбора информации у клиента и заинтересованных лиц. Зачем нужно такое исследование, как строятся его этапы, как лучше провести рабочие сессии и что должно стать результатом всего этого.
Flawless app — Collaboration tool for developers & designersТехнологическое решение, которое улучшает коллаборацию UI-дизайнеров и front-end-разработчиков в удаленных проектах. Сервис позволяет автоматически создавать гайдлайны и сравнивать начальный дизайн с имплементацией разработчика. В конце июля выходит beta-версия. Авторы открыты для общения с теми, кому знакомы проблемы траты времени на ручное создание гайдлайнов и мутную проверку имплементации «на глаз».
UX Management Roundtable: Challenges 2015Компания Informaat описывает основные проблемы, стоящие перед современными дизайн-менеджерами. Постоянное развитие дизайн-команд, их интеграция в гибкий процесс разработки, способы делиться находками из исследований со всей компаний и подрядчиками, усиление влияния в компании, использование больших данных. К статье прилагается достаточно подробный PDF с ответами на эти вопросы.
Managing Chaos — Digital Governance by DesignОтрывок из новой книги Lisa Welchman «Managing Chaos», которая вышла в этом году в Rosenfeld Media. Это глава 7, посвященная выстраиванию процессного дизайн-фреймворка.
User Experience for Product DesignersPaul Hershey хорошо описал стандартный процесс проектирования и дизайна интерфейсов в современных реалиях переноса все большей части работ в браузер. Описание некоторых этапов, конечно, можно расширить, но общий обзор хороший.
Критика дизайна
Продуктовый менеджмент и аналитика You Won«t Believe What These Five Lenses Can Show You About Your ProductСтатья Scott Sehlhorst о пяти линзах продуктовой стратегии, которые помогают формировать конкретные планы. Потребительские и отраслевые тренды, конкурентная среда, финансовое здоровье продукта, технологическая среда, операционная эффективность.Sweating the UX DetailsСвежая презентация Stephen P. Anderson о разнице между требованиями к продукту и experience, а также ключевых составляющих достижения второго компонента — культура, процессы и ценности.
Кейсы Редизайн The GuardianИнтерфейсы в играх
Кейсы редизайнаКейс редизайна интерфейса инструмента HubSpot для публикации в социальных медиа. Интересно, как за несколько итераций им удалось создать намного более простой интерфейс, сохранив при этом функциональность.
Непрошенные редизайны
Тренды 2014 Design Value Index Results and CommentaryJeneanne Rae из Design Management Institute рассказывает об индексе рыночной стоимости Design Value Index (DVI) для компаний, которые активно вкладываются в дизайн. Он, правда, работает только для крупных и давно существующих компаний и имеет массу оговорок, но в любом случае интересен.15 Mobile UX Facts and Insights 2015Jeff Sauro приводит подборку фактов о пользователях мобильных и планшетов. Это цифры статистических и пользовательских исследований, касающихся общих моментов использования и работы с конкретными сервисами.
Тренды 2015
Виртуальная реальность
Умные часы
Носимая электроника
Лаборатория Google ATAP представила на Google I/O 2015 инициативу Project Jacquard по работе с носимой электроникой — он назван в честь легендарного промышленного ткацкого станка, одного из символов технологической революции. Его также курирует Иван Пупырев. Интернет вещей
Интерфейсы в кино
Why «mobile first» may already be outdatedPaul Adams из Intercom предсказывает закат подхода Mobile First. Проектировать нужно для системы экранов и исходить от задачи пользователя, некоторые задачи более естественно решать на мобильном устройстве, а другие — на большом экране. Нет общего подхода, который работает для всех.
We Tested How Googlebot Crawls Javascript And Here«s What We LearnedAdam Audette рассказывает об эксперименте с поисковым роботом Google. SEO-специалисты говорят, что нельзя использовать на странице скрытый контент, который активируется с помощью JavaScript — поисковики не индексируют его. Но по факту оказалось, что многие востребованные ситуации вполне себе отрабатывают. SEO часто ограничивает дизайнеров в этом плане, но, возможно, что скоро это закончится.
Для общего и профессионального развития Продуктовые дизайнерыSketchnotes SF Meetup, Round 17 — People & FacesKate Rutter проводит в Сан-Франциско ежемесячные митапы по Sketchnotes. Это презентация с одного из недавних.
Перевод книги Mailchimp «The UX Reader»
The Future of Web Design is Hidden in the History of ArchitectureЗабавный взгляд на историю веб-дизайна, где Mike Sall пытается сравнить ее вехи с общей историей искусства. Спорно местами, но точка зрения интересная.
wwwhereЕще коллекция ресурсов и материалов для тех, кто делает сайты и сервисы
Free e-book: White Space in Web UI Design (The Power of Nothing)Еще одна книга UXPin, об использовании свободного пространства в дизайне.
Consistency in UI Design: Creativity Without ConfusionОбщая согласованность интерфейса, «основы имба-дизайна» и свежие кейсы про все это от Amazon, Adobe, Reddit и Jawbone.
Люди и компании в отрасли Jony Ive Is Apple«s First Chief Design OfficerНа прошлой неделе произошло важное для всей профессии событие — Jony Ive получил позицию Chief Design Officer в Apple. На C-уровне дизайнеры оказываются нечасто, да еще и в такой знаковой компании. Robert Brunner, который в свое время нанял Айва, дает комментарий о том, почему это важно для всей отрасли. Для справки можно посмотреть полную иерархию корпоративных должностей, условно принятых в тех же Штатах.Покупки дизайн-студий крупными компаниями
Закрытие LayerVault
Материалы конференций UX STRAT 2014Отчет о втором дне конференции UXSTRAT 2014, которая прошла 7–9 сентября в Boulder, Colorado (США).MX 2015Видео с конференции MX 2015, прошедшей 20–21 апреля в Сан-Франциско (США).
Service Experience 2014Видео с конференции Service Experience 2015, прошедшей 13–14 ноября в Сан-Франциско (США).
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
