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

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

Паттерны и Best Practices

Baymard: E-Commerce Search Usability — An Original Research Study
Новый отчет от Baymard Institute об исследовании поисковых интерфейсов на сайтах e-commerce. В ближайшее время они начнут публикацию выдержек из отчета. Анонс.

Share: The Icon No One Agrees On
“Поделиться/Share” — иконка, о которой никак не могут договориться, Min Ming Lo разбирает наиболее распространенные варианты. В продолжение темы:

Radio Buttons: Always Select One?
Kara Pernice из Nielsen/Norman Group глубоко и методично разбирается с радио-кнопками.

Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study
Curt Arlege, задаваясь вопросом: действительно ли так тяжело считываются контурные иконки, провел свое исследование. Результат не совсем однозначный.

Веб-анимация в действии
Перевод статьи Rachel Nabors об анимации в вебе.

Digital Design & User Experience — 7 Profitable Best Practices!
Avinash Kaushik, эксперт веб-аналитики, о UX, мобильной стратегии, электронной коммерции. Много интересного, точные наблюдения, мелкие детали. Например, вместо стратегии “сначала мобильные” он предлагает подход “только мобильные”, раздeляет пользователей на две основные поведенческие группы — “направленные на деятельность” и “направленные на размышление”.

Call to Idea — Get Inspired!
Хорошо оформленная пополняемая коллекция паттернов проектирования для веба. Логины, регистрации, пустые состояния, формы, списки и многое другое.

When Bars Point Down
Новая тенденция в инфографике — использование столбцовых диаграмм, направленных вниз, вместо традиционного вправо или вверх. Хорошо подходит для иллюстрации негативных либо отрицательных явлений: безработица, смертность и т.п.

5 Tips to Get Donations on Nonprofit and Charity Websites
Janelle Estes из Nielsen/Norman Group о том, как с помощью дизайна повысить сбор пожертвований на благотворительных сайтах.

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

What Is The Most Underrated Word In Web Design?
Хороший детальный разбор нюансов концепции “аффордансов” от Натальи Постоловской. Она выделяет несколько типов аффордансов и разбирает их на примере мобильного приложения.

Persona Empathy Mapping
Nikki Knox из Cooper Consulting дает инструкцию по использованию методики persona empathy mapping. Она позволяет детальнее описывать персонажей, учитывая нюансы их ожиданий и ощущений.

Eliciting user goals
David Travis о том, как исследовать и описывать цели пользователей. В первой части он разбирает два подхода — интервью и фреймворк “Jobs to be done” Clayton Christiansen.

Facebook Reveals Huge Psychology Experiment on Users
Спорное исследование Facebook по управлению эмоциями, в котором, того не ведая в прошлом году приняло участие почти 700 000 англоязычных пользователей. Изучалось настроение постов пользователей при изменении количества позитивных либо негативных постов в ленте новостей. Само исследование и в целом про манипулирование эмоциями.

“Do you trust me enough to answer this question?” Trust and Data Quality
Caroline Jarrett о том, как создать у пользователей чувство доверия при вводе запрашиваемой информации.

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

Google Design
Google представил на конференции I/O свою единую дизайн-идеологию Material Design и единый подсайт на основном домене. Это унифицированный адаптивный подход к интерфейсам на всей линейке устройств и устройств — веб, мобильные, планшеты, носимые девайсы, ТВ, авто. Под “материальным” дизайном они понимают отчасти отсылку к скеоморфизму — не боятся использовать тени, подчеркивать материальность объектов, усиливают роль анимации. Его суть хорошо раскрывает Mathias Duarte, теперь уже вице-президент компании по дизайну, до этого сделавший прорывную WebOS.

Можно сказать, что визуально это развитие текущего стиля Android с акцентом на цветную шапку (вместе с подкраской статус-бара) и круглую дефолтную иконку основного действия. Последняя очень здорово обыграна на разных экранах, например, находясь на стыке шапки и контента по горизонтали и продолжая линию пиктограмм по вертикали. Продолжается активное использование карточек как основы идеологии, становится больше тайлов а-ля metro. Сайдбар остался на месте, несмотря на то что недавнее обновление Google+ многозначительно отказалось от него. Ну и обновился фирменный шрифт Roboto, который судя по всему должен стать основой и для веб-сервисов (концепт Quiz App показывает, как это может быть).

Есть много параллелей с показанным в iOS8: механизм уведомлений с быстрыми действиями, которые сразу видны на экране при появлении; связка смартфона и Chromebook; хаб для сбора данных носимых устройств Google Fit. Стеки окошек используются активнее, диалоги меняются в духе карточек Google Now, наконец-то понятным стал режим выделения/copy/paste. Забавно, что общие для всего интерфейса навигационные иконки назад/на главную/запущенные становятся похожими на фирменные четыре символа PlayStation. Большая коллекция экранов.

Обновленный Android TV также использует унифицированный дизайн. Он же виден в автомобильной платформе, четко прослеживается в часах (кстати, круглая кнопка основного действия как один из главных элементов визуальной идентификации, кажется, пришла именно оттуда). На базе идеологии Material Design выйдет новая версия ключевой ОС — Android L. Причем благодаря инициативе Android One с референсным устройством, количество телефонов с дефолтным интерфейсом увеличится. А дизайн ТВ, авто и часов сторонние производители и вовсе не смогут поменять. Так что после захвата рынка Google плотно занялся решением дизайнерских проблем. И показал одну из сильнейших концепций, работающую на таком огромном масштабе. В продолжение темы:


Apple iOS 8
2 июня была представлена iOS8, серьезно расширившая возможности платформы. С интерфейсной точки зрения это эволюция прошлогоднего радикального редизайна с добавлением некоторых новых паттернов — круговые меню а-ля Path, работа с виджетами в нотификационном центре, открытые попапов с оставлением предыдущего окна на заднем плане, расширенные возможности взаимодействия приложений через меню шаринга, пиктограммы в диалоговом меню, ограниченное использование карточек (Health), развитие стиля иконок, двухсторонний свайп по строке а-ля Mailbox и другие небольшие детали. Также интересно, как эта стилистика легла на новую MacOS — отличный пример единого визуального языка по всей экосистеме (с нормальными иконками настроек и Сафари! И пока, Lucida Grande).

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

Но самое крутое — это новый язык программирования Swift, очередной шаг к визуальному программированию. Гайдлайны iOS настолько минималистичны, что разработчику не нужен дизайнер. А среда разработки достаточно проста, чтобы дизайнер сам мог создавать конечные решения. Руководство по нему. Как оказалось, к нему приложил руку Bret Victor, один из главных евангелистов визуального программирования (UPD: как оказалось позже, не факт или все-таки факт). Советую всем перечитать или открыть для себя его программную статью Magic Ink. В продолжение темы:

Android Wear

Axure Flat UI Kit — The most comprehensive UI library for Axure
Большая библиотека элементов для Axure в плоском стиле. Для мобильных, планшетов и веба.

Pixate
Многообещающий инструмент для создания мобильных интерактивных прототипов. Возможность визуализации анимаций, как от времени, так и от взаимодействия. Мгновенный «нативный» запуск на устройстве. Симпатичный интерфейс.

InVision

Adobe Fireworks

Framer.js
Инструмент для прототипирования мобильных приложений Framer, который позволяет “пощупать” сложные взаимодействия и анимации в браузере. Правда, он требует базовых знаний в верстке и скриптах.

Sketch

Design Principles for Wireframing
Chris Bank продолжает серию статей о принципах протипирования.

Bootsketch
Тема для Bootstrap 3 для создания интерактивных wireframes.

Гайдлайны для веб-проектов
Юлия Мархадаева из питерской студии Nimax пишет о подходе компании к созданию дизайн-гайдлайнов. Статья краткая, но в ней отличный пример такого документа (PDF).

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

What If There Was A Bot That Could Detect Ugly Websites?
Компания EyeQuant, предоставляющая одноименный сервис eye tracking-исследований, работает над экспериментальным продуктом, который позволит автоматически определять привлекательность интерфейса и дизайна для пользователей.

Нюансы A/B-тестирования

Empirical Development of Heuristics for Touch Interfaces
Rebecca Baker и Xiaoning Sun пробуют адаптировать классические эвристики Jakob Nielsen и Rolph Molich для тач-интерфейсов. Они проводят серию экспериментов на устройстве и эмуляторе, делая вывод о том, что в целом классический подход работает с оговорками. В продолжение темы:

Perfectly executing the wrong plan (выступление Tomer Sharon)
Замечательное выступление Tomer Sharon на Google I/O 2014 o типичных ошибках стартапов и o Lean User Research.

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

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

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

Метрики и ROI

Choosing the Right Metrics for User Experience
Pamela Pavliscak разбирает комплексный подход к метрикам, которые будут полезны и бизнесу, и продуктовым дизайнерам. Она приводит различные наборы показателей, отслеживаемые в компаниях, и предлагает единый набор, полезный всем участникам продуктовой команды.

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

Building a Design Culture in an ‘End-Up’ Technology World
John Maeda и Becky Bermont о важности формирования дизайн-культуры в компании на примере eBay. Она позволяет формировать правильное отношение к дизайну и развивать всю команду в нужном направлении.

Crossing the Great UX–Agile Divide
Тему agile и UX уже давно обсосали со всех сторон, но Mike Bulajewski заходит по-новому, с точки зрения философии организации труда. Он описывает позицию разработчиков, настаивающих на чистом варианте методологии, хотя она и не совсем годится в таком виде для дизайна.

Everyone is doing strategy right now
Leisa Reichelt из команды GOV.uk когда-то начала писать книгу о UX-стратегии. После завершения большей части она осознала, что изначально ошибалась во многих вещах. И выпустила серию статей как памятник недописанной книге. Продолжение:

10 Tips for Acing your Interview at the Whiteboard
Josh Seiden о проведении собеседования дизайнеров с созданием скетчей на маркерной доске.

The Practitioners of Web Information Architecture in Small and Medium Enterprises
Исследование австралийского малого и среднего бизнеса на предмет того, как они справляются с задачами дизайна.

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

Principles of Product Design
Joshua Porter описывает свои 19 принципов продуктового дизайна.

Кейсы

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

The container model and blended content
В преддверии запуска нового дизайна The Guardian Nick Haley рассказывает о заложенных в него принципах. Они активно используют идеологию “контейнеров”, хорошо описанную Konstantin Weiss из Information Architects. Я был на его презентации в рамках UX Poland на эту тему и он очень подробно описал ее (жаль, все еще нет слайдов). По сути речь идет о наработках одностраничных сайтов, примененных для крупных продуктов. Мы, кстати, с конца прошлого года развиваем свой фреймворк для контент-проектов, основанный на похожей модели — готовлю презентацию о нем к осени. В продолжение темы:

История

The history of Android
Сверхподробная статья с анализом каждой из крупных и минорных версий платформы. Кажется, все экраны всех интерфейсов — просто золото!

Тренды

Эстетика футуристических интерфейсов
Глубокое и детальное исследование визуального и интерфейсного языка киношных, игровых и в целом футуристических интерфейсов. Очень и очень круто.

Software is Eating Hardware — Lessons for Building Magical Devices
Adam MacBeth, который работал над iPod, Jawbone, Pencil, пишет об особенностях создания новых устройств. В продолжение темы:

Virgin America website says bye-bye to booking wizard, hello to avatars
Virgin America представили бета-версию своего нового сайта, основанную на подходе mobile first. Его запуск получил достаточное обсуждение в среде проектировщиков, так как предлагаются интересные идеи к процессу бронирования авиабилетов. В продолжение темы:

Flat vs Realism
Эффектный промо-сайт про отличия плоского и реалистичного дизайна в виде истории.

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

Why We Need to Tame Our Algorithms Like Dogs
Dan Saffer об опыте взаимодействия и взаимной эволюции людей и алгоритмов: “Люди должны приручить алгоритмы, подобно тому, как наши предки приручили собаку.”

Salesforce Wear Developer Pack — Open-Source Starter Apps, Toolkits and More
SalesForce запускает собственную достаточно обширную инициативу по созданию приложений для носимых устройств. Они верят в то, что часы, браслеты и очки могут быть полезны для бизнес-приложений. На специальном сайте собраны примеры кода и дизайна для шести устройств.

Профессиональное развитие

A UX Career Framework — Driving Conversations Between Managers and Employees
Ian Swinson, UX-директор Salesforce, рассказывает о своем подходе к управлению каръерой дизайнеров.

Hunting Unicorns — What makes an effective UX Professional
Презентация Patrick Neeman о скиллах продуктового дизайнера.

Beyond User Experience — Onward and Upward
Luke Chambers описывает шесть наиболее популярных и понятных путей для профессионального развития специалиста по интерфейсу. Это продукт- проект-менеджмент, фасилитация, обучение, стратегический консалтинг и создание своего собственного бизнеса.

Why Developers Need to Learn Design
В последние годы много пишут о том, должен ли дизайнер уметь верстать. Stephen Caver выдает обратную мысль о том, что разработчики должны понимать дизайн.

Everything You Need to Know About Design on the Web
Еще одна коллекция статей, инструментов и других ресурсов, в целом по дизайну.

Enabling a Career Shift from User Experience to Service Design
Laura Keller пишет об опыте перехода специалиста от проектирования продуктов к проектированию услуг.

Важные люди в отрасли

Most Creative People 2014: A Q&A With The Designers Of Dropbox
Интервью с командой дизайнеров Dropbox, одной из самых сильных и динамично развивающихся. О процессе, инструментах, общих принципах.

Shum guides Microsoft’s design renaissance
Оказывается, полгода назад Albert Shum стал директором по пользовательскому взаимодействию Microsoft. Помимо всего прочего он главный идеолог metro-дизайна, пришедший в компанию из Nike в 2007 году.

UX Design Interviews (Medium)
Еще одна курированная лента на Medium — серия дизайнерских интервью.

Susan Kare
Susan Kare, одна из первых цифровых дизайнеров, автор иконок первого Mac и вообще одна из самых легендарных личностей в продуктовом дизайне, рассказывает о том, как она работала в Apple.

Spotify’s Design Lead on Why Side Projects Should Be Stupid
Жизнь, как проект — интервью с Tobias van Schneider, главой дизайна Spotify.

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

Conferences Roundup — Upcoming Web Design Events (Jun. – Dec. 2014)
Основные международные UX-конференции второй половины 2014 года.

Conference Review: UX STRAT 2013, part 3: Day 2
Продолжение обзора выступлений конференции UX Strat 2013, проходившей 9-11 сентября в Georgia, Atlanta.

ServDes. Conference 2014 Lancaster
Материалы конференции ServDes 2014, проходившей 9-11 апреля в Lancaster, UK. Она посвящена проектированию услуг и customer experience.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>