Pull to refresh
VK
Building the Internet

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

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


Паттерны и Best Practices


IBM Design Language
IBM выпустили свой визуальный язык, очень, очень и очень круто описанный, структурированный и поданный. Много интересных деталей, подходов к описанию гайдлайнов. Хотя это скорее принципы, ведь конкретных практических приложений почти нет. Никаких конкретных цифр в интерфейсной и типографической сетках, только принципы их построения. Для компании их масштаба — штат дизайнеров должен дойти до 1000 человек, а количество продуктов бесконечно — такой подход дает гибкость при соблюдении общего духа дизайна. Недавно вышли еще несколько гайдлайнов:


There is No Fold
Welch Canavan собрал вместе многие известные публикации, развенчивающие миф о том, что пользователи не прокручивают страницы. Недавно вышла резонансная статья в блоге компании Huge Inc о проведенном ими исследовании на тему. Хотя сам по себе миф о том, что пользователи боятся скроллинга, развенчивался много раз, то что сделали в Huge вызывает массу вопросов.

Моя коллега из юзабилити-лаборатории Ксения Стернина описывает проблемы: «Статья совершенно не научная, респонденты подобраны непонятно какие, тест проведен непонятно как, стимулы предъявлены респондентам непонятно какие. Результаты какие-то получились, может быть примерно так и есть в действительности, но тестирование проведено по-дилетантски. Ниже детали.

By testing with a broad cohort of users rather than specific segments, we can ground our findings in widely shared user needs and expectations
Здесь уже непонятно, все-таки эти юзеры, они кто? Может это младенцы или пенсионеры, или шахтеры, все-таки кто они? В научных исследованиях никогда не берут «какую-то широкую когорту». Берут совершенно конкретных людей, которых можно отнести к определённому сегменту, а потом смотрят на результат, если они все показывают одинаковый результат, то уже можно говорить, что вот в таких-то сегментах одинаковый результат. А чтобы протестировать «всех», надо тогда всех-всех и тестировать.

we can maximize the number of respondents in a short timeline — a perfect opportunity to try new and unconventional research methods and assess their pros and cons
Очень странный посыл. Они пытаются получить результаты или протестировать методы? Обычно, если тестируешь метод, то результаты не используешь особо, потому что в процессе экспериментируешь и результаты уже будут невалидные.

To find out, we conducted user testing with 48 participants over 3 days
Кто эти люди, возраст, пол, какими девайсами пользуются, какой опыт с различными сайтами?

We tested four design versions
А картинки на странице были одинаковыми? Если да, то человек уже догадается, в чем подвох, если нет, то сам контент может повлиять. Обычно тестируемые объекты подмешиваются среди других «контрольных» объектов.

Х% scrolled immediately
Это как? Через секунду, полсекунды? Сколько-то людей не скролило. Почему, интересно, может быть этих людей что-то объединяет?

Совершенно не описана методика проведения теста. Написано, что удаленные тесты, но как их проводили? Связывались с людьми и присылали ссылки? Или одну ссылку? Какие инструкции давали людям? Это очень важно, потому что всё это сильно влияет на поведение людей.»

Ранее в этом году вышла лучшая статья на тему псевдонаучности в дизайне от MJ Parnell. Крайне печально, что исследование Huge, Inc разошлось по всему интернету и опубликована всем кем только можно. Да, миф о том что люди не скроллят — ложный и много раз опровергался. Но конкретно эта статья делает выводы совершенно непрофессионально.

The right way to ask users to review your app
Matt Galligan из Circa рассказывает о ненавязчивом способе получить от пользователей оценку приложения. Вместо почти всегда неуместного попапа они выводят вежливый блок в интерфейсе с вопросом «понравилось ли вам приложение?». В продолжение темы:


Designing Great Organizational Services
Laura Keller описывает принципы создания хороших интерфейсов для внутрикорпоративных инструментов, которые, как правило, имеют очень бледный вид.

Design Explosions Issue #1: Mapping on iOS
Картографистам и проектировщикам гео-ориентированных сервисов на заметку. Серьезное погружение и детальный разбор нативных карт Google и Apple для iOS. Паттерны, области взаимодействия, механизмы установки меток, разметка областей приложения, маршруты и навигация… Очень зорко разобрано «на запчасти» и описано до последних мелочей.

E-Commerce Checkouts Need to Mark Both Required and Optional Fields Explicitly (Only 9% Do So)
По результатам своего свежего исследования Baymard рекомендуют явно отмечать и обязательные, и необязательные поля формы.

Empty States
Коллекция Empty States перешла на отдельный домен.

Stars and Stripes and ISO Codes
Antoine Lefeuvre о тонкостях дизайна при переключении язывов на многоязычных сайтах и приложениях. В продолжение темы:


Can designers steal the best pricing techniques from restaurants?
Интересное выкладки из пары исследований ценообразования в ресторанах и вебе. Если рядом с суммой не указана валюта, люди охотнее платят.

Android vs iOS Start Experience
Luke Wroblewski сравнивает процессы первоначальной настройки iPad и Android-планшетов. В продолжение темы:


The Highlight 2014 — UI Animations
Подборка лучших интерфейсных анимаций по версии Beautiful Pixels. Многие примеры весьма спорные, но сами паттерны интересные.

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


Особенности дизайна в Азии


Spark Innovation Through Empathic Design
Dorothy Leonard и Jeffrey F. Rayport рассказывают о полевых исследованиях. Процесс описан дежурно, но в статье огромнейшее количество крутых историй от крупных компаний, как они находили инсайты и меняли продукты.

The Uncanny Valley is Uncanny
Профессор Nicholas Bowman об эффекте «зловещей долины» в UX: в играх, для Siri, в NUI.

Facebook Science Has Another Problem — It’s Not Exactly Science
В продолжение истории с нашумевшим исследованием Facebook по управлению эмоциями. Говорят, такие исследования и вовсе ненаучны.

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


The Customer Journey to Online Purchase
Новый сервис в рамках Think with Google собрал анонимные (ага, конечно) данные веб-аналитики с 42 000 сайтов (тут сглотнули все, кому конфиденциальность не позволяет ставить Google Analytics) и сделал на их основе отличный инструмент для изучения пути пользователя к покупке в разных сегментах, рынках и странах. Краткое руководство в виде PDF.

How to Use Customer Experience Maps to Develop a Winning Content Marketing Strategy
Памятка от Demian Farnsworth по созданию experience maps.

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


Resonator
Новое расширение для Photoshop, которое помогает собирать, хранить и «нарезать» для разработчиков иконки и любую другую графику. Расширение поддерживает iOS, Android, Windows Phone и ретину. Сейчас оно распространяется по приглашениям, но, по личному опыту, приглашают довольно быстро. Будет полезно всем мобильным, некоторым веб- и вообще всем тем дизайнерам, которые устали от постоянной ручной нарезки графики для передачи разработчикам. Еще немного о передаче дизайна разработчикам:


PaperProto
Новый подход к шаблонам для бумажного проектирования. Помимо удобной разбивки стандартных листов по экранам, к нему прилагается модель телефона для 3D-принтера, в которую можно загнать нарисованные на бумаге скетчи.

Новое для Sketch


Новое о Material Design


Новое для Android Wear


Новое об Apple Watch


Новое о письмах рассылки


Tizen UX Guide
Серьезно обновлены гайдлайны мобильной ОС Tizen, которую развивают Самсунг и Интел на базе закрытой пару лет назад MeeGo. Самсунг постоянно грозится вкладывать в нее основные силы, но пока вышли всего несколько устройств.

7 tips for designing awesome animated GIFs
7 советов от InVision по созданию гифок с интерфейсной анимацией. И тут же — инструкция по созданию анимированной иллюстрации в связке Illustrator и Photoshop.

Новое для iPhone


Новое для iPad


Шаблоны для Android


Новое для Marvel App


Новое для Adobe Fireworks


Duet Display
Еще один вариант быстрого отображения экрана Мака на iPhone и iPad. Приложение будет полезно для быстрого просмотра макетов на устройстве через кабель.

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


UX Check
Дешевый и быстрый способ проведения экспертной оценки по ключевым эвристикам Нильсена. Это плагин для Chrome, который открывает панель со списком эвристик, позволяет делать пометки на странице и экспортировать это все в документ Word.

3 Ways to Select the Perfect Method for your Research Goal
Indi Young создала свою методику подбора методов исследований. Всё зависит в первую очередь от цели исследований: ищем ли мы новые идеи для нашего продукта либо проводим оценку уже существующей функциональности. Исследования также могут быть направлены либо на сам продукт, либо на пользователей, их поведение и ощущения.

Lean-исследования


How Speeders Affect Online Research
Jeff Sauro пытается понять, насколько эффективны способы отсечения недобросовестных респондентов опросов, в первую очередь проверка скорости заполнения. Все не так однозначно — за исключением совсем очевидно фейковых случаев, скорость влияет на качество не очень явно и просто отсекать таких респондентов нельзя.

Revisiting the Pile-Sort Method of User Research
Hang Guo, Khasfariyati Razikin и Muhammad Hatib о вариации метода карточной сортировки.

Why Do We Conduct Qualitative User Research?
Хорошая аналогия об отличиях качественных и количественных исследований в блоге Mozilla.

The 7 Deadly Sins of User Research
David Travis о 7 смертных грехах исследования пользователей.

Redesigning Your Website? Don’t Ditch Your Old Design So Soon
Hoa Loranger из NN/g о методике конкурентного юзабилити-тестирования, когда кроме вашего собственного продукта, тестируется и несколько продуктов ближайших конкурентов.

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


Fuse
Новый инструмент для создания интерактивных прототипов и трансляции их в код для Android и iOS. В отличии от большинства недавно появившихся инструментов, Fuse Tools изначально ориентирован на тесную связку дизайнер-программист. Интерактивный прототип, который вы делаете с помощью инструмента является, по сути, хорошо написанным приложением на нативном для платформы коде.

Plexi
Очередной новый инструмент для дизайнеров, на этот раз в браузере. Его делает Colm Tuite и он пока в альфа-состоянии, но его уже можно попробовать. Демо функции состояний объекта.

Prototyping with Form for the first time
Достаточно развернутая инструкция по работе с Form, Origami-подобным инструментом для интерактивного прототипирования, который недавно был куплен Google.

Новые визуальные редакторы контента


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


Работа с SVG


Typecast is Now Free
Относительно недавно обновился Typecast — инструмент для создания визуально привлекательного и семантически выстроенного дизайна, проверки на читабельность, правильность рендера в браузерах и общую гармоничность — он стал бесплатным для дизайнеров, работающих в одиночку. Этим анонсом открывается ветка про веб-типографику: техники, скрипты, инструменты, руководства и многое другое:


How to Implement Color Search
Elif Ceren Dik рассказывает об опыте создания хорошего подборщика цветовых решений для пользователей сервиса JotForm согласно теории цвета. Многие сталкиваются с похожими задачами, так что в этой ветке будут собираться материалы по алгоритмическим решениям подбора цветов. В продолжение темы:


Creating Animations and Interactions with Physical Models
Ralph Thomas подробно и с наглядными интерактивными примерами разбирает физическую модель анимации. Проект доступен на GitHub для собственных экспериментов. В продолжение темы:


Tumult Hype Pro 3 (Beta)
Появилась бета инструмента для дизайнеров Tumult Hype Pro 3. Обещают интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.

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

Some thoughts on «designing in the browser»
Stephen Hay о том, что обеим сторонам популярного в последние годы дискурса «должен ли дизайнер уметь верстать» нужно не бросаться в крайности.

Новое для Framer


Новое для Quartz Composer


Новое для Bootstrap и Foundation


Обзоры инструментов


JavaScript для дизайнеров
Обучающие статьи для дизайнеров по работе с JavaScript от Дмитрия Пояркова. Для дизайнеров, правда, условно — это просто простая методичка для начинающих. Другие руководства для начинающих не-разработчиков:


Touchstone.js
Фреймворк для сборки гибридных приложений для iPhone.

Управление интерфейсными проектами, процессами и командами


UX Leadership, Part 1: The Nature of Great Leaders
Jim Nieters и Pabini Gabriel-Petit открывают серию статей о UX-менеджерах и лидерстве. Очень толково, хотя предварительная статья была менее системной. В продолжение темы:


The 5 Most Common Design Mistakes
Julie Zhuo из Facebook о главных ошибках в дизайне продуктов. Слишком жесткие ограничения при изначальном исследовании пространства проблем и решений, слишком ранняя детализация одного из решений, принятие хорошего исполнения за хороший продукт, перекос в сторону стиля вместо смысла, фокусирование не на тех деталях.

How to collaborate with your product manager
Ondřej Válka описывает форматы взаимодействия продуктового дизайнера с продукт-менеджером. Это одна из самых плотных связок в команде.

Wonderful Client Feedback
Памятка для клиентов на тему критики дизайна.

Making User Experience Part of Business Strategy
Колонка UXMatters на тему интеграции UX с бизнес-стратегией.

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


Defining Data
Pamela Pavliscak продолжает серию публикаций о работе с данными аналитики при проектировании интерфейсов. Вторая часть посвящена определению терминологии.

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

Segment Analytics Data Using Personas
Aurora Bedford из Nielsen/Norman Group пишет об использовании персонажей для сегментирования данных аналитики.

Кейсы


Designing for Harmony
Один из самых крутых кейсов перестройки дизайна в больших компаниях. Как Intuit, ведущий производитель ПО для личного и корпоративного финансового учета, переосмыслил себя, выстроил дизайн-культуру и создал экосистему Harmony.

Data Driven Products Now!
Очень интересная презентация Dan McKinley из Etsy о том, как компания пришла к про-активному анализу данных при запуске новых функций и сервисов. Во второй части делаются подробные расчеты ROI для пары фич, которые они планировали запускать.

https://speakerdeck.com/mcfunley/data-driven-products-now">Data Driven Products Now!

93% пользователей, довольных редизайном: как мы разрабатывали Септиму
Мой коллега Андрей Сумин рассказывает о процессе запуска новой версии Почты Mail.Ru, которая стала доступна всем пользователям в этом году. Детально по всем шагам постепенной выкатки на все большее количество пользователей с кучей цифр и статистики. Полезно для всех, кто имеет дело с продуктами с большой устоявшейся аудиторией — как не растерять ее.

How to Design for Everybody
Еще один толковый кейс редизайна гос.сайтов. Rachel Haot рассказывает о новом NY.gov и особенностях работы над ним. В ее блоге на Medium есть и другие истории об этом запуске.

Our GDS user research lab is 6 months old
О первых 6 месяцах существования юзабилити-лаборатории GOV.uk. Много интересных выводов, рекомендаций и отзывов менеджеров.

The Numbers Game — Behind the Scenes at Microsoft’s Xbox Playtesting Labs
Как проводятся исследования игроков в юзабилити-лаборатории Microsoft Xbox.

Дизайнеры «Яндекс.Браузера» о том, как не мешать людям
Константин Горский и Геннадий Лахтин рассказывают о работе над экспериментальным интерфейсом Яндекс.Браузера, который был представлен в конце ноября. Еще немного их ответов на вопросы о продукте.

How Lumosity Spiked Active Users 10% with Complexity, Not Simplicity
Интересный кейс команды обучающего сервиса Luminosity, в котором они рассказывают об экспериментах с процессом первого захода пользователя. Они добавили несколько вопросов наподобии теста в onboarding и оказалось, что это не только не роняет конверсию, но увеличивает вовлеченность. Кажется, Евгения Жадяева рассказывала о похожем опыте LinguaLeo.ru на UX-Среде.

Как мы автоматизировали работу редакции и к чему это привело (выступление Алексея Аметова и Романа Худоногова)
Выступление Романа Худоногова и Алексея Аметова о внутренних редакционных процессах в LAM. Слайды. Они думают о том, чтобы сделать Arcticle публично доступным продуктом и если все срастется, то анонс будет весной.




Новые кейсы редизайна


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


Designing a mobile interface for older people
Tomáš Slavíček о принципах дизайна мобильных интерфейсов для пожилых людей на примере приложения KoalaPhone. Другие истории дизайна для людей с ограничениями:


История


UX Maturity: Intuition
Dirk Knemeyer пишет краткую историю становления UX в 6 частях. Часть первая: «80е: дизайн, основанный на интуиции». Продолжение:


Новое об истории веба


A brief history of web design for designers
Еще одна GIF-статья от Froont с наглядной историей подходов к дизайну в вебе.

Тренды


Fjord Trends 2015
Началась публикация прогнозов по трендам 2015 года. Fjord описывает свои девять, касающихся дизайна и инноваций. Другие предсказания:




Работа с фаблетами


Banks Are Vying To Out-Nerd Each Other For Your Attention
Об экспериментах крупных американских банков с новыми форматами взаимодействия. В продолжение темы:


Автомобильные интерфейсы


Инди-интерфейсы
Интересные интерфейсные концепты и инди-продукты на Kickstarter и Indiegogo теперь также собираются в группе. В отличие от того что делают внутренние исследовательские лаборатории Microsoft, Google, PARC, IBM, Disney, AT&T, MIT Media Lab и других компаний, эти штуки можно спонсировать и спустя полгода-год потрогать руками.


Enhancing User Experience With The Web Speech API
Обзор возможностей нового голосового API, который начинает появляться в браузерах. Он позволяет распознавать речь и озвучивать тексты на страницах и находится на ранней стадии проработки W3C.

Designing For the Slow Web
Ben Rowe о концепции Slow Web/Fast Web, аналогии понятий Fast Food/Slow Food. В Slow Web пользователь сам распоряжается своим временем и вниманием. Никуда не надо торопиться, никто не отвлекает без повода. Основные принципы Slow Web:
  1. Лучше иметь меньше функциональности, но с более качественным взаимодействием.
  2. Нет уведомлениям без необходимости.
  3. Нет чувству срочности без необходимости, дайте пользователям расслабиться.
  4. Не задерживайте пользователей в сети без необходимости. Отправляйте их в реальный мир.
  5. Уважение к пользователю, наконец.


Носимая электроника


Интерфейсы в кино


An End to User-Based Thinking — Biological Perspective
Алена Лугина предлагает считать устаревшим понятие «пользователь». Оно формирует процесс работы над дизайном таким образом, что это некий объект, для которого ученые в белых халатах создают решения в лаборатории. В то время как лучше создавать интерфейсы совместно с людьми в формате ко-дизайна.

DesignX — A Future Path for Design
Don Norman предлагает понятие DesignX, описывающие методы, подходы и специальности для решения сложных социальных проблем. Его ответы на вопросы.

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


Design’s (Dis)Orders & Transition Design
Cameron Tonkinwise о философии дизайна и его уровнях, а также Transition Design. Разбирается много моделей дизайна.

Discover Design — Study design trends on your phone
Интересная обучалка мобильному дизайну, которая работает только на телефоне. Основано на материалах известных специалистов отрасли вроде Luke Wroblewski, Khoi Vinh, Paul Adams и других.

Designers:Watch
Сайт-коллекция ключевых дизайнерских фильмов со ссылками на сервисы онлайн-просмотра. Люди, исторические процессы, направления. Русскоязычная версия.

UXMas 2014
Создатели ресурса UX Mastery в третий раз запустили накануне Рождества мини-сайт UXMas. В этом году будут опубликованы 24 статьи. В продолжение темы:


Great Digital Products Don’t Happen By Accident
Статья David Gillis из Teehan+Lax на основе его выступления о продуктовом дизайне.

32 myths to be dispelled
32 плаката о мифах UX.

What’s a Pixel?
В продолжение известной статьи Sebastien Gabriel, еще одна простая памятка по основным понятиям отображения на экранах.

The Urban Dictionary Of Design Slang
Fast CoDesign собрали дизайнерский словарь из серьезных и едких рабочих терминов, пообщавшись со специалистами из известных студий и продуктовых компаний. В продолжение темы:


Конспект «Умного дизайна» Джеффа Джонсона
Дмитрий Сафронов подготовил конспект книги Джеффа Джонсона «Умный дизайн» (бестселлер Амазона, в оригинале — «Designing with the mind in mind»). Сама книга в распродаже.

Screeny — Let’s find those space consuming screenshots
Приложение Screeny для iPhone позволяет вычленить из общего фотопотока коллекцию скриншотов, которая обычно растет достаточно хаотично, а разобрать ее не хватает времени. Правда, их можно только удалить, но даже в таком виде это полезный инструмент для тех, кто активно исследует существующие приложения.

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


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


The Utopian UI Architect
Спец.проект BMW на Medium выпустил статью о том, чем сейчас занимается Bret Victor.

AMA: I’m Nicholas Felton (aka Feltron), an information designer in NYC
Сессия вопросов и ответов с Nicholas Feltron на Designer News.

Design education is «tragic» says Jonathan Ive
Развернутый конспект выступления Jony Ive в лондонском Design Museum.

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


Upcoming Web Design Events (Dec. 2014 — June 2015)
Основные европейские и американские события UX и веб дизайна первого полугодия 2015 года.

Warm Gun 2014
Видео выступлений с конференции Warm Gun 2014, которая проходила 4 декабря в Сан-Франциско, США. Выступающие, на которых стоит обратить внимание: Kim Goodwin, Dey Traynor, Christina Wodtke, PJ McCormick, Leah Buley, Samuel Hilick.

Gain — AIGA Design and Business Conference 2014
В конце октября в Нью-Йорке прошла конференция Gain 2014 от ассоциации AIGA, посвященная теме редизайна бизнеса. Видео выступлений.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Tags:
Hubs:
+14
Comments2

Articles

Information

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