Дайджест продуктового дизайна, июнь 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 StudyCurt 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 WebsitesJanelle Estes из Nielsen/Norman Group о том, как с помощью дизайна повысить сбор пожертвований на благотворительных сайтах.
Понимание пользователя What Is The Most Underrated Word In Web Design? Хороший детальный разбор нюансов концепции «аффордансов» от Натальи Постоловской. Она выделяет несколько типов аффордансов и разбирает их на примере мобильного приложения.Persona Empathy MappingNikki Knox из Cooper Consulting дает инструкцию по использованию методики persona empathy mapping. Она позволяет детальнее описывать персонажей, учитывая нюансы их ожиданий и ощущений.
Eliciting user goalsDavid 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 QualityCaroline Jarrett о том, как создать у пользователей чувство доверия при вводе запрашиваемой информации.
Проектирование и дизайн экранов интерфейса Google DesignGoogle представил на конференции 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 плотно занялся решением дизайнерских проблем. И показал одну из сильнейших концепций, работающую на таком огромном масштабе. В продолжение темы:
[embedded content][embedded content]Apple iOS 82 июня была представлена iOS8, серьезно расширившая возможности платформы. С интерфейсной точки зрения это эволюция прошлогоднего радикального редизайна с добавлением некоторых новых паттернов — круговые меню а-ля Path, работа с виджетами в нотификационном центре, открытые попапов с оставлением предыдущего окна на заднем плане, расширенные возможности взаимодействия приложений через меню шаринга, пиктограммы в диалоговом меню, ограниченное использование карточек (Health), развитие стиля иконок, двухсторонний свайп по строке а-ля Mailbox и другие небольшие детали. Также интересно, как эта стилистика легла на новую MacOS — отличный пример единого визуального языка по всей экосистеме (с нормальными иконками настроек и Сафари! И пока, Lucida Grande).
Одно из самых эффектных — возможности кросс-канального взаимодействия между устройствами, зашитое на уровне ОС. Сценарии перехода между девайсами станут еще более гладкими (если, конечно, все это будет работать как в демонстрации). Ну и теперь iOS является хабом для взаимодействия с авто, умным домом, носимыми устройствами (если все это, конечно, будет поддержано производителями). Список всего анонсированного.
Но самое крутое — это новый язык программирования Swift, очередной шаг к визуальному программированию. Гайдлайны iOS настолько минималистичны, что разработчику не нужен дизайнер. А среда разработки достаточно проста, чтобы дизайнер сам мог создавать конечные решения. Руководство по нему. Как оказалось, к нему приложил руку Bret Victor, один из главных евангелистов визуального программирования (UPD: как оказалось позже, не факт или все-таки факт). Советую всем перечитать или открыть для себя его программную статью Magic Ink. В продолжение темы:
Android Wear[embedded content]Axure Flat UI Kit — The most comprehensive UI library for AxureБольшая библиотека элементов для Axure в плоском стиле. Для мобильных, планшетов и веба.
PixateМногообещающий инструмент для создания мобильных интерактивных прототипов. Возможность визуализации анимаций, как от времени, так и от взаимодействия. Мгновенный «нативный» запуск на устройстве. Симпатичный интерфейс.
InVision
Adobe FireworksFramer.jsИнструмент для прототипирования мобильных приложений Framer, который позволяет «пощупать» сложные взаимодействия и анимации в браузере. Правда, он требует базовых знаний в верстке и скриптах.SketchDesign Principles for WireframingChris 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 InterfacesRebecca 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.[embedded content]Визуальное программирование Новые скриптыOdysseyИнтересный инструмент для журналистов, дизайнеров, путешественников всех мастей и вообще любых творцов. Можно комбинировать карты, изображения, видео и другие медиа- в красивую историю. Библиотека находится в стадии активной разработки и многое еще не реализовано. Исходный код открыт, а разработчики активно ищут помощь для реализации новых фишек.Метрики и ROI Choosing the Right Metrics for User ExperiencePamela Pavliscak разбирает комплексный подход к метрикам, которые будут полезны и бизнесу, и продуктовым дизайнерам. Она приводит различные наборы показателей, отслеживаемые в компаниях, и предлагает единый набор, полезный всем участникам продуктовой команды.Управление интерфейсными проектами, процессами и командами Building a Design Culture in an «End-Up» Technology WorldJohn Maeda и Becky Bermont о важности формирования дизайн-культуры в компании на примере eBay. Она позволяет формировать правильное отношение к дизайну и развивать всю команду в нужном направлении.Crossing the Great UX–Agile DivideТему agile и UX уже давно обсосали со всех сторон, но Mike Bulajewski заходит по-новому, с точки зрения философии организации труда. Он описывает позицию разработчиков, настаивающих на чистом варианте методологии, хотя она и не совсем годится в таком виде для дизайна.
Everyone is doing strategy right nowLeisa Reichelt из команды GOV.uk когда-то начала писать книгу о UX-стратегии. После завершения большей части она осознала, что изначально ошибалась во многих вещах. И выпустила серию статей как памятник недописанной книге. Продолжение:
10 Tips for Acing your Interview at the WhiteboardJosh Seiden о проведении собеседования дизайнеров с созданием скетчей на маркерной доске.The Practitioners of Web Information Architecture in Small and Medium EnterprisesИсследование австралийского малого и среднего бизнеса на предмет того, как они справляются с задачами дизайна.
Продуктовый менеджмент и аналитика Principles of Product DesignJoshua Porter описывает свои 19 принципов продуктового дизайна.Кейсы Современные редакционные CMSThe 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 DevicesAdam MacBeth, который работал над iPod, Jawbone, Pencil, пишет об особенностях создания новых устройств. В продолжение темы:
Virgin America website says bye-bye to booking wizard, hello to avatarsVirgin America представили бета-версию своего нового сайта, основанную на подходе mobile first. Его запуск получил достаточное обсуждение в среде проектировщиков, так как предлагаются интересные идеи к процессу бронирования авиабилетов. В продолжение темы:[embedded content]Flat vs RealismЭффектный промо-сайт про отличия плоского и реалистичного дизайна в виде истории.
Автомобильные интерфейсы
Why We Need to Tame Our Algorithms Like DogsDan Saffer об опыте взаимодействия и взаимной эволюции людей и алгоритмов: «Люди должны приручить алгоритмы, подобно тому, как наши предки приручили собаку.«Salesforce Wear Developer Pack — Open-Source Starter Apps, Toolkits and MoreSalesForce запускает собственную достаточно обширную инициативу по созданию приложений для носимых устройств. Они верят в то, что часы, браслеты и очки могут быть полезны для бизнес-приложений. На специальном сайте собраны примеры кода и дизайна для шести устройств.
Профессиональное развитие A UX Career Framework — Driving Conversations Between Managers and EmployeesIan Swinson, UX-директор Salesforce, рассказывает о своем подходе к управлению каръерой дизайнеров.Hunting Unicorns — What makes an effective UX ProfessionalПрезентация Patrick Neeman о скиллах продуктового дизайнера.
Beyond User Experience — Onward and UpwardLuke 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 DesignLaura 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 KareSusan 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-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину.
