company_banner

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

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

    Дайджест продуктового дизайна, апрель-май 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-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину.
    Mail.ru Group
    Строим Интернет

    Комментарии 15

      –1
      Мне очень хочется найти нормальную подборку по продуктовому дизайну, но такие простыни доказывают мне, что выбирать нужное и главное у вас пока что не получается.
        +3
        Все люди разные, у всех разный, простите, бэкграунд, всем не угодишь. Если нужна нормальная подборка — всё самое нужное и ничего лишнего — нужно сесть и сделать самому.
        –1
        Пост «Дайджест … дизайна» с простынёй текста и без единого изображения (не считая шестиугольника с надписью в заголовке) — это шикарно!
          +2
          Пост для тех, кто не считает, что дизайн — это картинки.
            0
            Вы хотите сказать, что я как-то неправильно читал, и речь в посте не о графическом дизайне, а о дизайне, например, внутренней архитектуры?
              –3
              Насколько я могу видеть, пост именно о графическом дизайне и дизайне графических пользовательских интерфейсов, а не о дизайне внутренней архитектуры приложений и интерфейсах машино-машинного взаимодействия. Это примерно как книга о живописце без иллюстраций.
                0
                Нет, не о графическом. И не о дизайне интерфейсов. О дизайне продуктов. Который включает в себя предыдущие по необходимости. И интерфейс не обязан быть графическим, и продукт не обязан иметь интерфейс.
                  +1
                  Вы меня, конечно, извините, но это словоблудие. Давайте пройдёмся по ссылкам?
                  Первый раздел («Паттерны и Best Practices»)
                  Baymard: E-Commerce Search Usability — An Original Research Study
                  Дизайн сайтов, т.е., GUI.

                  Share: The Icon No One Agrees On
                  Иконка. Графический дизайн, GUI.

                  Radio Buttons: Always Select One?
                  Радио-кнопки. Дизайн GUI.

                  Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study
                  Дизайн иконок (контурные VS бесконтурные) — дизайн GUI.

                  Веб-анимация в действии
                  GUI.

                  Digital Design & User Experience — 7 Profitable Best Practices!
                  Вот эта статья — о более-менее обобщённых подходах, и то в самой статье куча иллюстраций.

                  Call to Idea — Get Inspired!
                  По ссылке кроме картинок-иллюстраций вообще ничего нет.

                  When Bars Point Down
                  Инфографика. Куча графических иллюстраций в самой статье.

                  5 Tips to Get Donations on Nonprofit and Charity Websites
                  А вот и первая статья без иллюстраций. Браво! Она же и последняя в разделе. И тем не менее, она конкретно о сайтах (→GUI) и их дизайне («Provide a Noticeable and Clear Link to Donate») в значительной мере.

                  Второй раздел («Понимание пользователя»)
                  What Is The Most Underrated Word In Web Design?
                  Статья о концепции «аффордансов» в GUI.

                  Persona Empathy Mapping
                  Построение описание персонажей при помощи специальной трёхсекционной схемы эмпатии.

                  Eliciting user goals
                  А вот и первая статья не о дизайне, не про дизайн и без иллюстраций.


                  Facebook Reveals Huge Psychology Experiment on Users
                  Запись в блоге на полстраницы текста. И то с двумя иллюстрациями.

                  “Do you trust me enough to answer this question?” Trust and Data Quality
                  Статья о том как вызывать доверие в веб-формах. Веб = GUI.

                  Третий раздел прямо так и называется — «Проектирование и дизайн экранов интерфейса».

                  Мне продолжать? Практически все статьи по ссылкам так или иначе посвящены графическому дизайну и GUI. Практически все имеют картинки-иллюстрации.
                    +1
                    Извините, конечно, но — «ну и че?»

                    1. Целые разделы (менеджмент, проф. развитие...) и половина контента — вообще не про интерфейс. Та же фейсбуковская история — про психологию восприятия.

                    2. Структурированная тонна ссылок без картинок, но с краткими текстовыми описаниями — как раз пример хорошего дизайна.
                      0
                      1. «Целые разделы», один из которых вообще состоит из одной единственной ссылки.
                      Собственно, разбиение вообще из пальца высосано — что, например, делает «What Is The Most Underrated Word In Web Design?» о подчёркивании активности контролов в разделе «Понимание пользователя»?

                      2. Все ссылки — про взаимодействие с пользователем. Про UX и специалистов этой сферы. Где здесь «дизайн продуктов» — непонятно. Ну, то есть, если продукты брать только из сферы ПО с GUI, а под дизайном понимать только организацию взаимодействия с пользователем, то да. Но это странное (однобокое и нестандартное) понимание и слова «дизайн», и слова «продукт». Потому как «дизайн» — это или оформление (узкий смысл), или проектирование вообще, включая конструкторскую разработку (широкий смысл). А «продукт» — это вообще любой конечный результат деятельности. Почему-то не вижу в этом «продуктовом дизайне» ничего ни по дизайну в широком смысле, ни по продуктам кроме таких узкоспециальных продуктов как ПО/вебсервисы.
                      Вообще, что за выражение такое — «продуктовый дизайн»? По-русски это будет значить оформоление еды или едой. Нет такого, есть «дизайн продукта». «Продуктовые» в русском магазины (они же продовольственные).
                      Если брать англоязычный product design, то он включает в себя и industrial design (промдизайн) и engineering design, и много чего ещё, не только проектирование UX. А тут весь пост — UX на UX и UXом погоняет.
                        +1
                        Ну так о том и речь, что UXом нашу деятельность уже не описать. С тем же успехом можно называться веб-дизайнерами.

                        Вот автор подборки сам рассуждает о термине: www.slideshare.net/jvetrau/design-weekend-2014
                          0
                          Дык я о чём и говорю — даже если брать английское выражение „product design“, то заголовок масштабнее содержимого, потому как в посте один UX. Это как назвать пост «дайджест современной науки», а забить его ссылками на электромобили и автопилоты.
                          P.S. Google Images: продуктовый дизайн, Google Images: продуктовый. Не слишком удачно вот так в лоб кальку с английского брать, там у обоих слов наборы значений очень уж отличаются от наших.
                          0
                          duplicate
              +2
              а мне нравится
                0
                Ещё хотелось бы, авторы, в конце каждого дайджеста выделять 2-3 ключевых материала ;)

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

                Самое читаемое