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

Дайджест продуктового дизайна, март 2015


Паттерны и Best Practices


Baymard E-Commerce Product List Usability: Report & Benchmark
Новый отчет Baymard Institute, посвященный страницам списка продуктов на сайтах электронной коммерции. Публично доступные выдержки из него:


Getting Users Back From Multitasking
Ben Watanabe разбирает режим многозадачности в iOS как еще один способ сделать работу с приложением полезнее. В нем показывается уменьшенная версия последнего открытого экрана, хотя было бы куда полезнее заменять ее на выжимку свежей информации из приложения.

Инфографика: Шпаргалка по размерам графических элементов в социальных сетях
Подробная шпаргалка по размерам графических элементов в социальных сетях. Facebook, Twitter, LinkedIn, Google+, Pinterest, Instagram, YouTube, Вконтакте, Мой Мир, Одноклассники.

The Low Hanging Fruit of User Onboarding
История способов обучения пользователей на старте работы с продуктом и взгляд на их будущее от Des Traynor.

Выдержки из свежей книги UXPin про дизайн взаимодействия


Continuous Input In Mobile Devices — Pain Or Gain?
Игорь Фастовский разбирает способ клавиатурного ввода на мобильных с помощью swype-подобных жестов. Он предлагает несколько улучшений для него, позволяющих решить две главные проблемы — часть символов не видна, да и пользователь не всегда помнит, где находится следующая нужная ему буква. Решение спорное, но интересное.

Accessibility APIs: A Key To Web Accessibility
Про технические аспекты создания доступной среды в веб-браузере и немного про историю вопроса. С одной стороны статья для технарей, но юзабилити должно быть междисциплинарной областью. Без понимания ограничений или возможностей, которые нам представляют технологии, невозможна эффективная работа. А в этой статье очень доходчиво объяснено, на что можно обращать внимание при работе над доступностью веб-среды.

Паттерны анимации в известных приложениях


Beyond Blue Links — Making Clickable Elements Recognizable
Hoa Loraner приводит список правил выделения интерактивных элементов в интерфейсе.

Niice — A search engine with taste
Вышло приложение Niice для iOS, инструмента для создания мудбордов.

Customers Who Bought This Item Also Bought… Affinity Analysis Explained
Jeff Sauro о том, как работает формула предложения похожих товаров в интернет-магазинах. В статье есть наглядные расчеты, показывающие, как проверяются взаимосвязи между ними.

Как длина посадочной страницы влияет на ее конверсию
Когда выбирать короткую, а когда длинную версию.

UX Archive Animated
Теперь UX Archive тоже собирает примеры анимации в мобильных приложениях.

Mystical guidelines for creating great user experiences
Забавная параллель дизайн-процесса с тем, как Тора описывает процесс сотворения мира. Скорее смешно, чем полезно, но с этой стороны еще никто не заходил.

The Curse of the Mobile Strategy
Jared Spool о «проклятии» мобильной стратегии. Концентрация только на одном канале значительно сокращает выбор возможных вариантов. Следует думать и действовать на уровне общепродуктовой стратегии, не ограничиваясь одним из них.

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


67 Ways to Increase Conversion with Cognitive Biases
Jeremy Smith собрал крутую коллекцию из 67 когнитивных искажений, которые используются для управления поведением пользователей. Коллекция достаточно серьезная и обширная. Цепляет, что статья начинается с противопоказаний к использованию и принципа «не навреди».

Winning Over Wary Participants
Люди ведут себя по-разному, в том числе и участники юзабилити-тестирования. Для некоторых участников тестирование — стресс, излишние переживания. Jim Ross дает несколько поведенческих приемов, которые позволят предотвратить либо уменьшить излишнее волнение пользователей во время тестирования.

People Don’t Read, They Scan
Подборка теорий и концепций на тему того, что пользователи скорее сканируют, а не читают тексты в вебе. Концовка и выводы смазаны, но в статье много полезных отсылок по этому вопросу.

Positive Design Reference Guide
Книга «Positive Design Reference Guide» от S.Jimenez, A.E.Pohlmeyer и P.M.A.Desmet, которая собрала 29 моделей, теорий и фреймворков, посвященных «well-being-driven»-дизайну, оставляющему у пользователя хорошие впечатления от использования.

Дизайн для стран Азии


Change Blindness — Why People Don’t See What Designers Expect
Kathryn Whitenton о «слепоте к изменениям» — почему пользователи не замечают некоторые небольшие изменения на сайте или в приложении, которые они, по идее создателей продукта, должны были заметить. Например, появление сообщений об ошибках или об успешном завершении, фильтрацию результатов.

Understanding Context: Environment, Language, and Information Architecture
Выдержка из книги Andrew Hinton «Understanding Context: Environment, Language, and Information Architecture». Книга посвящена пониманию текущего контекста пользователя, а в этой главе говорится о важности историй в описании опыта взаимодействия.

In Design, Empathy is Not Enough
Dan Saffer о том, что иногда эмпатии не достаточно для создания хорошего дизайна. Для оптимального результата нужно соблюдать баланс между сопереживанием пользователю и наблюдением за переживаниями пользователей с беспристрастной точки зрения. Обе крайности не приводят к лучшим результатам. В продолжение темы:


Дизайн для пожилых людей


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


Card Generator
Простой онлайн-сервис для подготовки карточной сортировки от Lukas Mathis. Нужно вписать термины в столбец и можно получить их печатную версию, размеченную по карточкам.

Service Design: An Introduction to a Holistic Assessment Methodology of Library Services
Памятка на тему основ проектирования услуг и кейс их применения в библиотеке Университета Мичигана. Новой информации мало, но достаточно хорошо и подробно разложено по полочкам.

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


Adobe Comp CC
Adobe выпустил приложение Comp CC для прототипирования на iPad. В основе мало чем отличается от других подобных инструментов, но на практике очень приятные решения в мелочах. И самое главное — наработки можно перекинуть в InDesign, Photoshop или Illustrator для последующей доработки. Ну и в целом оно построено на технологиях Adobe, а значит отлично завязано на остальные сервисы — в том числе Typekit. В его создании участвовал Khoi Vinh.

Bind — Building an experimental UI design tool
Alastair Monk делает свой инструмент для дизайнеров Bind. Попробовать его пока нельзя, но он рассказывает о его основных принципах — версионность с Git, адаптивность по умолчанию с использованием Grid Style Sheets.

Napkin — Design quick mocks, directly on your phone
Еще одно приложение для создания прототипов мобильных приложений прямо на телефоне. Пока только iOS.

Новое для Sketch


Balsamiq 3
Вышла третья версия Balsamiq.

Introducing Noun Project for Mac
The Noun Project выпустили приложение для Mac. Подписка стоит $9,99 в месяц, есть 14-дневный пробник.

Pixel Squid
Зарождается новый тренд — стоки изображений с возможностью детальной настройки перед скачиванием и легкого использования после него. Первый — выбираете из быстро пополняемой коллекции изображение, подбираете нужный ракурс (!) и получаете изображение в PSD; все по слоям, даже освещение; маски для быстрого выбора и быстрого изолирования. Второй — Illustrio — векторный сток, перед скачиванием вы можете изменить множество параметров (для каждой картинки свои), например, удлинить руки у робота или перекрасить цвет медальки. В продолжение темы:


ai2html
Плагин для Adobe Illustrator, позволяющий перегонять графику из макетов в HTML5.

Nietzsche Ipsum
Генератор текста в духе Ницше вместо lorem ipsum.

Работа с iOS8


Инструменты паблишинга


How To Create Effective App Screenshots for Your App Page
Толковая инструкция по подготовке скриншотов для магазинов приложений Android, iOS и Windows Phone. Melanie Haselmayr приводит чеклист необходимой информации и графики для различных платформ, а также разбирает несколько подходов к сборке самих иллюстраций. В продолжение темы:


From Page to Stage to Screen — Designing an Omni-Channel Experience
Traci Lepore пытается выделить особенности среды для типов платформ — настольные ПК, планшеты, телефоны, киоски, почтовые рассылки, социальные сети. У каждой свои возможности и ограничения, которые важно учитывать при кросс-канальном взаимодействии между ними.

Новое для Material Design


Новое для Pebble


Apple Watch


Новое для Android Wear


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


Evangelising user research
Время толстых отчетов, которые никто не читает, прошло. David Travis дает обзор простых и эффективных lean-методов анализа и представления результатов пользовательских исследований.

The User Is Drunk
Отличный новый подход к тестированию интерфейсов — Richard Littauer за $250 проверит ваш сайт в пьяном состоянии. На выходе отчет с найденными проблемами и скринкаст.

How Hard Are Your Surveys to Take?
Jeff Sauro предлагает методику проверки пользовательских опросов для того чтобы их результаты были более качественными. Он назвал его SRS (Survey Respondent Score) и это что-то вроде нильсеновских эвристик, по которым рекомендуется прогнать опрос перед его запуском.

A Beginner’s Guide to Web Site Optimization
Хорошая методичка по ходу A/B-тестирования от Charles Shimooka. Как координироваться с другими командами, выбирать инструментарий, анализировать результаты.

Does Response Timing Matter in Online Research?
Jeff Sauro пытается понять, насколько влияет скорость ответа респондентов в опросах на качество оценки. Это позволит использовать данные по ходу исследования, не дожидаясь его окончания. Проводившиеся ранее исследования либо не показывают влияния, либо говорят о том, что отвечающие быстрее более благосклонны. Выводы из его эксперимента показывают, что значимого влияния нет.

Should Your Entire Product Team Observe Usability Testing?
Дискуссия на UXMatters о том, почему важно приглашать всю команду на сессии пользовательских исследований.

Uxeria — Remote usability testing and marketing tool
Еще один инструмент для удаленного юзабилити-тестирования Uxeria. Все достаточно стандартно по набору возможностей.

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


Tumult Hype 3 Pro — The Next Revolution in HTML5 Animation
Вышел релиз третьей версии Hype Pro. Интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.

Новое для Quartz Composer


Компонентные системы и живые гайдлайны


Веб-типографика


CSS-анимация


Работа с SVG


Работа с цветом в вебе


Работа с Flexbox


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


Xcode для дизайнеров


Метрики и ROI


One Magic Formula to Calculate User Experience?
Wouter de Bres пытается вывести универсальную формулу UX. Он использует параметры времени загрузки (технологической и когнитивной), ценность и качество взаимодействия. Есть много спорных моментов и нестыковок, но сама по себе идея интересная.

Дизайн государственных сайтов


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


No Dickheads! A Guide To Building Happy, Healthy, And Creative Teams.
Преприятнейшая духоподъемная статья о командообразовании от Rhys Newman. Он достаточно подробно разбирает ценности, которые должны лежать в основе сильной и слаженной команды, способной создавать крутые продукты. Один из лучших материалов на тему.

Understanding and Influencing Business
Liam Friedland пытается переложить цепочку создания добавленной стоимости Майкла Портера на дизайн-проекты.

What does Pair Design look like?
Парное программирование — достаточно известный метод. Chris Noessel и Suzy Thompson из Cooper рассказывают о парном дизайне.

False Dichotomies
Lukas Mathis о том, как избегать ложной дихотомии при обсуждении дизайн-решений. Часто в процессе спора команда разделяется вокруг пары вариантов и накаляет обстановку спором, вместо того чтобы копнуть дальше и найти другие подходы.

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


Overthinking vs. Underthinking — Finding the Sweet Spot
Хорошая колонка Kingshuk Das о перекосах в чистом дизайн-мышлении и классическом стратегическом бизнес-планировании. Первый генерирует уйму мотивирующих, но не привязанных к жизни и бизнесу идей, второй — бесконечный набор аналитических материалов, в которых сложно сделать осознанный выбор. Он предлагает таблицу ситуаций, в которых применим первый и второй подходы.

Кейсы


Disney’s $1 Billion Bet on a Magical Wristband
Disney MagicBand, в дизайне которого участвовали frog — возможно, самый большой UX-проект десятилетия.

Все по графику: как мониторинг активности пользователей на главной Mail.Ru помогает жить и...
Моя коллега Ольга Курицына рассказывает об аналитике главной страницы Mail.Ru в связке с крупными событиями в стране. Интересно о том, как офлайновые события влияют на работу большой аудитории с веб-сервисами.

Considerations When Conducting User Research In Other Countries — A Brazilian Case Study
Claire Carlson делится опытом проведения пользовательского исследования в Бразилии. Что нужно учитывать на этом рынке в частности и в целом при проведении международных исследований с выездом в страну.

Кейсы редизайна


Тренды


Readable Wearables
Открывается новая эпоха для веба — адаптивность учитывает умные часы. Matt Griffin рассказывает о том, как они адаптировали сайт студии Bearded для совсем маленьких экранов.

Google HATES Your Non Mobile Site
Craig Tomlin о новых правилах поисковой выдачи Google, которая теперь учитывает не просто наличие мобильной версии сайта, но и ее качество. По словам коллег, компания обращает внимание даже на соответствие возможностей большой и мобильной версии. В статье простая методичка по поиску таких проблем. В продолжение темы:


Фаблеты


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


Design In Tech Report 2015
Доклад John Maeda о значительном увеличении роли дизайна в современных технологических компаниях за последние несколько лет. Дизайнеры основывают успешные компании, крупные компании покупают дизайн-студии, дизайнеры становятся партнерами в компаниях венчурного капитала.



Виртуальная и дополненная реальность




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


UX Reactions
Коллекция гифок на злободневные аспекты дизайнерской работы. Хороший способ разнообразить проектную переписку.

The Web’s Grain by Frank Chimero
Статья на основе презентации Frank Chimero о профессиональной философии, в которой он пытается пересобрать текущее понимание роли и задач дизайнера в современном вебе. Интересный подход к адаптивному дизайну и в целом среде, для которой создаются продукты.

Helvetica / Objectified / Urbanized: The Complete Interviews
Вышла книга «Helvetica/Objectified/Urbanized: The Complete Interviews», собравшая 100 интервью из трех известных фильмов по дизайну. Fast Co Design публикует часть беседы с Dieter Rams оттуда.

Анонсы тренингов и семинаров


Новые онлайн-курсы


Designing for Medical
Ted Goas пишет об особенностях работы дизайнера в компании, делающей медицинские сервисы. Из-за жестких законов по охране личных данных в отрасли повышенная секретность, а оборудование у пользователей зачастую доисторическое. Но сами задачи и возможность помочь реальным людям дико интересны.

Critical Sharks
Очень толковый дискурс на тему того, можно ли критиковать работы крупных компаний. Конечно, им приходится учитывать тысячи нюансов и действовать в жестких рамках ограничений времени и ресурсов, плюс все это в агрессивной конкурентной среде. Но без диалога в индустрии ей будет сложнее развиваться. Сам повод (выход iOS7) уже протух, но материал свежий и тема все равно актуальна. Третья часть по ссылке самая толковая. Часть 1 и 2.

Перевод книги MailChimp «The UX Reader» от ФРИИ


Web UI Design for the Human Eye — Colors, Space, Contrast
Еще одна книга от UXPin в этом году, на этот раз про цвета, отступы и необходимый уровень контраста в интерфейсах.

Выдержки из книги Golden Krishna «The Best Interface is No Interface»


Эргономист № 40
Вышел в свет очередной, 40-й выпуск бюллетеня «Эргономист». В нем вы найдете материалы, посвященные проблемам профессиональной оценки и отбора персонала, информацию о новых конференциях и публикациях, а также несколько забавных эргономических «диверсий»

The Value of Apprenticeships in Cooking and Product Design
Melissa Mandelbaum сравнивает опыт стажерства в дизайне с тем, как учатся начинающие повара и рассказывает о своем приходе в профессию.

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


The Demise of LayerVault and the Market for Creative Tools
Еще одна внезапная новость в этом году — версионная система для дизайнеров LayerVault закрывается. Последний год-полтора новые инструменты для дизайнеров появлялись почти каждую неделю, а тут вдруг уход с рынка одного из старейших и известнейших среди них. Khoi Vinh размышляет, почему и коснется ли это остальных. Возможно, это связано с покупкой в чем-то схожего сервиса Pixelapse Дропбоксом — появился монструозный конкурент, который сильно подрезал перспективы развития.

How they got there — A book by Khoi Vinh
Khoi Vinh выпустил книгу «How They Got There» четырнадцати подробных интервью с известными дизайнерами. Они рассказывают о своей карьере в деталях, со всеми ее странными поворотами. В качестве пробника опубликовано первое из них, с UX-исследователем Erika Hall. Оказалось, что она какое-то время жила в России и немного знает язык. В продолжение темы:


Новые сессии AMA


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


Conference Review: UX Strategies Summit 2014, part 1
Отчет Pabini Gabriel-Petit о конференции UX Strategies Summit 2014, проходившей 10-12 июня в Сан-Франциско, США. Достаточно подробный конспект нескольких ключевых выступлений, хотя Kelly Goto свою презентацию повторяет уже не первый год.

Видео с Interaction15
Видео с конференции Interaction15, прошедившей 9-11 февраля в Сан-Франциско, США.

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

Комментарии (5)


  1. kisel
    06.04.2015 13:38

    Антон Карташов начал серию статей для начинающих работать в Quartz Composer


    Поправьте пожалуйста ссылку, не находится ничего такого.


    1. kisel
      06.04.2015 13:45

      UPD Видимо правильная ссылка kartashov/базовые-концепции-quartz-composer-264b25f88cbb">вот. Нашел в фейсбуке.

      Хм. Тоже глючит. Парсер чудит?


      1. jvetrau Автор
        06.04.2015 13:55

        Да с ним вообще беда, не знаю как отключить :( Не первый раз проблема, если пользователь есть на Хабре и писал что-то на Медиум.


  1. damat
    06.04.2015 14:13
    +1

    Прочитал, что вышел Balsamiq 3.0. Обновился, лучше бы я этого не делал — они убили альтернативный скин, в котором были нормальные тонкие линии. Работать стало невозможно =(


    1. damat
      06.04.2015 16:13
      +1

      Отбой. Оказывается, настройки вида wireframe вынесли из общих в проектные. Идейно даже понятно, и реально нужно: если кто-то открывает твой проект с неправильными настройками, все выглядит не так, как у тебя.

      Краткая инструкция на всякий случай: bit.ly/1GYyHfu

      PS ссылка нормальная, но некликабельна из-за кармы