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

Паттерны и Best Practices

Responsive Email Patterns ^[2]
Коллекция паттернов адаптивных писем рассылки.

Wear UI ^[3]
Коллекция интерфейсных паттернов носимых устройств.

Principles of Mobile Site Design — Delight Users and Drive Conversions ^[4]
Google и AnswerLab опубликовали совместные рекомендации по созданию мобильных сайтов. Это 25 хорошо иллюстрированных правил, охватывающие все аспекты их создания. Также появился учебник лучших веб-практик ^[5] от Google.

The Right Way To Ask Users For iOS Permissions ^[6]
Brenden Mulligan о том, как правильно запрашивать у пользователей разрешения в iOS. Перевод на русский ^[7].

Rethinking Mobile Tutorials — Which Patterns Really Work? ^[8]
Theresa Neil разбирает удачные и не очень паттерны обучающих экранов в мобильных приложениях. И дает рекомендации по созданию действительно востребованных и полезных для пользователя.

Side Drawer Navigation Could Cost Half Your User Engagement ^[9]
Интересный кейс Android-приложения zeebox от Anthony Rose, в котором он рассказывает о меньшей эффективности сайдбара в качестве основного принципа навигации. Они провели серию экспериментов и всегда видимые на экране вкладки показали намного большую вовлеченность пользователей. В продолжение темы:

• Другое исследование ^[10] с теми же выводами. Его вторая часть ^[11].

Telling stories about screens for screens ^[12]
Отличный обзор приемов показа продукта в рекламных или учебных видео-роликах от Matthew Latkiewicz из Zendesk. Он выделяет 6 основных подходов с разной степенью полезности и достоверности.

User Onboarding — A frequently-updated compendium of web app first-run experiences ^[13]
Сайт, посвященный разбору паттернов onboarding. В продолжение темы:

• Laura Klein критикует желание многих проектировщиков и менеджеров мотивировать пользователя изучать продукт ^[14]. Сначала нужно дать ему возможность решить свои основные задачи и уже после этого можно постепенно обучать дополнительным возможностям.

You are not Google. You are not Amazon ^[15]
Вы — не Google. Bы — не Amazon. Почему не всегда надо следовать за крупными компаниями? Paul Boag о ссылкax без подчеркивания в результатах поиска Google.

The Ideal Length for All Online Content ^[16]
Какова оптимальная длинна сообщения в Twitter или Facebook? Насколько длинным должен быть заголовок статьи и сама статья, параграф текста, строка? Результаты многих исследований собраны в статье Kevan Lee.

House of Buttons ^[17]
Галерея примеров кнопок. Статичные, анимированные, стандартные, кастомные и многие многие другие. В продолжение темы:

• Теория кнопок от Lars-Erik Janlert ^[18], начиная с физических до современных.

The “Psychological” Speed of Mobile Interfaces ^[19]
Oz Lubling о психологических «секретах», того как повысить воспринимаемую пользователями скорость мобильных интерфейсов. В продолжение темы:

• Rusty Mitchell о том, как переход Facebook на стандартный прелоадер ^[20] позволил перенести пользователям вину за медленную загрузку с приложения на саму iOS.

List Beats Grid — Linear Feeds Perform Two to Three Times Better Than Grids ^[21]
Для сервиса Prismatic размещение элементов ленты новостей в виде списка оказалось в 2-3 раза эффективнее, чем сетка из карточек. К такому выводу они пришли после экспериментов, проведенных совместно с Teehan+Lax. Студия о проекте ^[22].

Why users can't find answers in help material ^[23]
Презентация Tom Johnson о том, как сделать систему помощи эффективнее. Он описывает основные проблемы, с которыми сталкиваются пользователи в работе с ними, и приводит пошаговый процесс для их решения.

Mobile Usability ^[24]
Отчет по мобильному юзабилити от компании Practicology на основе анализа 15 ведущих британских сайтов электронной коммерции. Основные 5 выводов из отчета ^[25].

Single-Field Credit Card Input Pattern ^[26]
Brad Frost доработал скрипт, облегчающий ввод данных кредитной карты на мобильных, вдохновленный решением Square. Все поля вводятся в одной строке. В продолжение темы:

• Скрипт для формы ввода данных естественным языком ^[27].

Notification Design Strategies ^[28]
Стратегии дизайна уведомлений по электронной почте.

Four Things I Wish Every Chart Did ^[29]
Des Traynor предложил 4 идеи по улучшению интерактивности и информативности графиков и диаграмм.

Where are luxury brands going wrong online? ^[30]
Интернет-ошибки брендов, производящих предметы роскоши. Главная — то что сайты делают рекламщики, которые смотрят на впечатление от статических картинок и не задумываются о реальном опыте использования.

Keyboard-Only Navigation for Improved Accessibility ^[31]
Поддержка навигации по сайти при помощи только клавиатуры. Как её обеспечить? Советы Marieke McCloskey: 1) четкое отображение фокуса ввода клавиатуры; 2) все интерактивные элементы должны быть доступны; 3) предоставьте пользователям возмозность пропустить навигацию и перейти сразу к основному контенту.

The One Little Box That's Costing You Big Dollars ^[32]
Хитрости интерфейса для ввода бонусных кодов в интернет магазинах. На чем можно потерять, а на чем — заработать?

Design better faceted navigation for your websites ^[33]
Отличный разбор фасетной навигации от Jim Kalbach. Хорошо описаны плюсы, минусы, подводные камни.

Responsive Design: Why and how we ditched the good old select element ^[34]
Интересная версия замены выпадающих списков, которая работает как для веб, так и для мобильных, предложенная Mikkel Bo Schmidt.

Email Subject Lines: 5 Tips to Attract Readers ^[35]
Советы Jannele Estes о написании заголовков email-рассылок, которые привлекают читателей.

This is Responsive — Tips, Resources and Patterns for Responsive Web Design ^[36]
Коллекция паттернов, статей и других полезных материалов по адаптивному дизайну. Все примеры можно пощупать, это работающий код. В продолжение темы:

• Простая памятка по адаптивному дизайну ^[37].

Accordions for Complex Website Content on Desktops ^[38]
Hoa Loranger об использовании аккордионов для отображения контента.

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

The Illusion of Motion ^[39]
Подробная статья о восприятии движения человеческим глазом/мозгом, частоте кадров, частоте развертки, моушн блюре и телевизорах. Поможет раз и навсегда разобраться, что такое FPS.

Mobile And Accessibility — Why You Should Care And What You Can Do About It ^[40]
Основы мобильной доступности от TJ VanToll. Он упоминает интересный инструмент проверки цветового контраста ^[41].

Design with Temperament ^[42] (Презентация Hienadz Drahun)
Презентация Геннадия Драгуна с митапа «Design by Fire Cafe #34», прошедшего в понедельник 19 мая. Использование типов темперамента как основы для быстрого построения поведенческих моделей пользователей.

http://www.slideshare.net/Hienadz.Drahun/hienadz-drahun-design-with-temperament-design-by-fire-cafe
Task Analysis — The Key UX Design Step Everyone Skips ^[43]
Larry Marine об анализе задач — простом и эффективном методе, о котором все слышали, но которым мало пользуются.

Behavior Change Strategy Cards ^[44]
Компания Artefact Group опубликовала методичку о том, как влиять на поведение пользователей. Это набор базовых правил построения хороших интерфейсов. Прямая ссылка на PDF ^[45].

Barry the Blog Post… ^[46]
Chris Noessel из Cooper Consulting пишет о тонкостях выбора имен для персонажей.

Inside Goal-Directed Design — A Two-Part Conversation With Alan Cooper ^[47]
Разговор с Alan Cooper о Goal-Directed Design. Часть 2 ^[48] о настоящем.

Gaining UX Insight through Dyads and Triads ^[49]
James Breeze и Gowri Penkar о методе групповых пользовательских исследований с помощью «диад» и «триад». Это отличный вариант, если необходимо понять взаимодействие семьи с продуктом.

QuickPanel: Dyslexia ^[50]
10% людей страдают дислексией — врожденными физическими сложностями с чтением. 5-20% — дисграфией — сложностями с письмом. 11% детей и 4% взрослых имеют дефицит внимания, сложности с сосредоточением. Эксперты по доступности о том, как дизайн может помочь этим людям.

Personality And Play Styles — A Unified Model ^[51]
В поисках объединенной модели персонажей игроков — увлекательный микс из типов темперамента Кейрси, типологии игроков Бартла, демографического гейм-дизайна Криса Бейтмана, теории Калуа и Лаззаро и многого другого. После прочтения остается набрасывать player personas на дайсах, разве что. В продолжение темы:

• Другой подход, рассматривающий опыт пользователей через призму эмоциональной реакции на события в игре. Может служить основой для player experience journey map ^[52].

Designing with the Mind in Mind — Simple Guide to Understanding User Interface Design Guidelines ^[53]
Выдержка из недавно вышедшего второго издания книги Jeff Johnson «Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines». Очень хорошо описаны базовые принципы восприятия и то, как ими стоит пользоваться при проектировании интерфейса.

Resources: Mental Modeling For Content Work (Презентация Daniel Eizans с Confab Minneapolis) ^[54]
Презентация и полезные материалы с мастер-класса Daniel Eizans о создании ментальных моделей с конференции Confab Minneapolis. Очень хороший обзор процесса и методов.

Designing for Your Objectives ^[55]
Методика Rachel McCollin проектирования по задачам. Просто. Эффективно. Результативно. Ничего лишнего.

Defining Patient Experience ^[56]
Научная публикация, описывающая 14-летний опыт изучения и проектирования нюансов взаимодействия пациентов и мед.персонала от Jason A. Wolf, Victoria Niederhauser, Dianne Marshburn и Sherri L. LaVela. Полезный материал для тех, кто занимается проектированием услуг.

Mobile First? Not So Fast ^[57]
Laura Klein о более осмысленном подходе к мобильному дизайну. Решающими факторами должны быть задача, стоящая перед пользователем, и контекст использования, а не размер устройства.

Learner Centered Design (Book Review) ^[58]
Небольшая рецензия на книгу Dorian Peters «Learner Centered Design: Interface Design for Learning». Она описывает подходы к обучению пользователей в разных продуктах — от сайтов до игр.

Boardroom Comics — A Business-Scenario Visualization Tool For Executives ^[59]
Ajax Revels о методе понимания целевой аудитории и сценариев ее работы с помощью коллективного создания комиксов.

Playful or gameful? Creating delightful UX ^[60]
Andrés Lucero, Evangelos Karapanos, Juha Arrasvuori и Hannu Korhonen предлагаю концепцию PLEX (Playful Experience) для проектирования интерфейсов с игровыми элементами. Концепция неплохо описана, включая набор игральных карт и характеристик таких интерфейсов.

Data-Driven Design vs Design Intuition ^[61]
Дизайн, основанный на данных, и дизайн, основанный на интуиции. Тему обсуждают Bradford Cross (основатель и CEO Prismatic), Brynn Evans (ведущий UX-дизайнер Google) и David Gauquelin (глава дизайна Prezi) и Braden Kowitz (дизайн-партнер Google Ventures).

Why 55% of Potential B2B Buyers Might Not Trust Your Website Content ^[62]
Основные проблемы с доверием В2В-сайтов. Список возглавляют: 1) отсутствие доступной контaктной информации; 2) некачественный контент в разделе «О компании».

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

Creating a Concept Model ^[63] (Видео Dave Gray)
Видео-мастер-класс от Dave Gray и Christina Wodtke по созданию концептуальных моделей. Пошаговое 40-минутное видео. После этого вышла подробная статья ^[64].

Orchestrating Touchpoints ^[65]
Видео выступления Chris Risdon из Adaptive Path, в котором он разбирает такой элемент Customer Journey Maps, как «точки соприкосновения» (touchpoints). В продолжение темы:

• Jeff Sauro о процессе создания карты ^[66].
• Jamin Hegeman (дизайн-директор Adaptive Path) o Service Design Journey ^[67].

Brainsketching: Collaborative Interaction Design ^[68]
Jay Vidyarthi пишет о методике проведения рабочих встреч brainsketching. Участники зарисовывают свои идеи на бумаге вместо того чтобы обсуждать их, а затем несколько раз обмениваются заметками с тем чтобы развивать чужие идеи.

Service Blueprinting ^[69]
Презентация Izac Ross из Cooper Consulting о методике Service Blueprinting.

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

Rumor: Google's Plan To Bridge Chrome, Android, And Search To Do Everything On Your Device ^[70]
25-26 июня пройдет Google I/O и есть вероятность, что новая версия Android будет выглядеть примерно так. Также могут быть упрощены иконки приложений ^[71]. В продолжение темы:

• Fast CoDesign о том, что предстоящий Google I/O будет во многом посвящен дизайну ^[72].
• ArsTechnica приводит слухи о том, что Гугл планирует унифицировать стилистику всех продуктов ^[73] на мобильных, в вебе и носимых гаджетах. Возможно, это подтверждают утекшие скриншоты нового Gmail для веба ^[74].
• Недавнее интервью с Mathias Duarte ^[75], главой мобильного дизайна, вокруг этой темы.
• Новый Google+ отказался от сайдбара ^[76]. Его также нет в одной из экспериментальных сборок Gmail ^[77]. Хотя Roman Nurik говорит, что отказываться от него не собираются ^[78].
• Спецификации для первой версии Android ^[79], которая была отброшена в пользу тач-версии. Часть 2 ^[80].

https://vimeo.com/91688685

Плагины и шаблоны для Sketch

• Что нового в Sketch 3 ^[81].
• Шаблоны iOS7 от Teehan+Lax автоматически включены в установку Sketch 3 ^[82].
• Плагин Sketch Measure ^[83], облегчающий образмеривание макетов.
• Курс по iOS7 + Sketch + Xcode ^[84] от Meng To.
• Сравнение скорости создания макета в Sketch 3 и Photoshop CC ^[85].
• Плагин для нарезки iOS и Android ^[86].
• Шаблоны для создания иконочных шрифтов ^[87].
• Плагин вставляет шоты из любого Dribbble-аккаунта в макет ^[88]. Удобно для использовании в качестве контента при создании галерей.
• Векторные шаблоны iOS-устройств ^[89].
• Еще один скрипт для вставки картинок из популярных онлайн-галерей ^[90].
• Экспериментальный менеджер плагинов ^[91].
• Шаблон для проектирования iPhone и iPad ^[92].
• Хороший обзор инструмента с практической точки зрения использования в реальном дизайн-процессе ^[93].
• Плагин, который генерирует HTML из .sketch ^[94].
• Краткая история Fireworks, а также причины, по которым Sketch становится хорошей заменой ^[95] для него.

The Guide to Wireframing ^[96]
Chris Bank из UX Pin написал серию статей о wireframes, после чего объединил их в электронную книгу. Сами статьи:

• 4 способа создания эскизов, не включая компьютер ^[97].
• Практика использования wireframes ^[98].
• 50 оттенков wireframes ^[99]. Какими они могут быть.
• Плюсы и минусы различных разновидностей инструментов для создания wireframes ^[100]: офисные приложения, графические редакторы, средства для создания презентаций и программы для создания wireframes и прототипов.
• Коллекции wireframes и интерфейсных паттернов ^[101].
• Brad Frost о создании wireframes в HTML ^[102].

Project Parfait (Beta) — PSD CSS Extraction, Measurements and Image Optimization Service for the Web ^[103]
Adobe запустил онлайн-сервис Parfait для облегчения перевода PSD-макетов в верстку. Он позволяет образмеривать дизайн и получать CSS-код для выбранных объектов. В продолжение темы:

• Avocode ^[104], еще один безфотошопный инструмент для работы с PSD.

Speed Design with Illustrator — 14 tips to create interfaces in minutes ^[105]
Базовая памятка по созданию интерфейсов в Adobe Illustrator. 14 советов про основные особенности работы.

Creating Style Guides ^[106]
Susan Robertson о том, как создавать гайдлайны в HTML.

Website Deck ^[107]
Игральные карты с миниатюрами типовых экранов интерфейсов.

Demonstrate — Mobile Prototyping ^[108]
Приложение Demonstrate для быстрого прототипирования мобильных приложения для iOS.

UI Design Dos and Don'ts ^[109]
Подборка основных правил создания интерфейсов для iOS7 от Apple. Кстати, официальные гайдлайны вышли в виде книги в iBooks ^[110].

Mitya — Prototype your Interaction Animations ^[111]
Еще один инструмент для создания интерактивных прототипов из макетов. Синхронизируется с Дропбоксом и показывает прямо на устройствах. Официальная Фейсбук-группа инструмента ^[112].

MMLayershots ^[113]
MMLayerShots позволяет собрать все экраны iOS-приложения в единый структурированный PSD, что достаточно удобно для проверки на качество реализации. Предполагает некоторые навыки кодинга и Mac.

Density Converter by Jeff Broderick ^[114]
Калькулятор адаптации дизайна смартфонных и планшетных приложений к экранам разного разрешения и плотности от Jeff Broderick.

Collaborating With Adobe Fireworks On Large Design Teams ^[115]
Dan Nisbet подробно о том, как эффективно использовать Adobe Fireworks в командной работе. Хотя поддержка инструмента по сути прекращена, многие до сих пор эффективно используют его и пара лет у него еще есть.

Peek View ^[116]
Плагин для Photoshop, позволяющий быстро просматривать макеты на связке подключенных смартфонов и планшетов. Создатели говорят, что работает быстрее Skala. В продолжение темы:

• Pixl Preview ^[117] — Еще один инструмент для просмотра Android-макетов на устройстве.

iOS 7 UI Kit Photoshop Action Set ^[118]
Набор экшнов для Photoshop, упрощающих работу с iOS7-макетами.

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

Experiments at Airbnb ^[119]
Отличнейший материал команды AirBnB о их методах проведения А/B-тестирования, а также особенностях использования инструментов и методов. Перевод на русский ^[120]. В продолжение темы:

• Доклад компании Quitbit о том, что большинство результатов А/В-тестов иллюзорны ^[121].
• 5 частых ошибок ^[122] при проведении A/B тестирования.
• David Travis о том, как проводить эксперименты ^[123].
• Julie Zhou из Facebook о проблемах A/B-тестирования ^[124].
• Jennifer Cardello из NN/g описываeт 3 источника потенциальных проблем с А/В тестированием ^[125] и предлагаeт свой подход, основанный на исследовании пользователей.

Easy Color Contrast Testing ^[126]
Простой способ тестирования цветового контраста при помощи Chrome Accessibility Developer Tools.

The Moderator’s Survival Guide — Handling Common, Tricky, and Sticky Situations in User Research ^[127]
Выдержка из вышедшей в прошлом году книги Donna Tedesco и Fiona Tranquada «The Moderator’s Survival Guide: Handling Common, Tricky, and Sticky Situations in User Research».

Identifying the 3 Types of Missing Data ^[128]
Jeff Sauro рассказывает, как анализировать неполные данные пользовательских опросов. Возможны разные ситуации — конкретный вопрос был некомфортен для значительной части респондентов и ответов на него нет у большого процента или ответы пропущены в случайном порядке.

Usability Testing for Detailed Design Using Mechanical Turk ^[129]
Кейс того как команда Prismatic использовала сервис Amazon Mechanical Turk для того чтобы упростить выбор вариантов с помощью А/В-тестирования.

Readability.io — Проверка на читаемость текстов ^[130]
Онлайн-сервис Readability.io помогает улучшать информационные тексты в интерфейсах.

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

The «designers should code» bullshit and a not so new idea ^[131]
Интересные размышления Davide Casali на тему популярного в последние годы посыла о том, должен ли дизайнер уметь верстать.

Macaw — The Code-Savvy Web Design Tool ^[132]
Из беты вышел Macaw, новый современный инструмент для дизайнеров и проектировщиков на замену тяжеловесному Фотошопу. Как и Sketch, он облегчает рабочий процесс, но идет дальше и обещает визуальное программирование, о котором давно мечтают ведущие дизайнеры. На выходе — чистый и аккуратный HTML и CSS, поддерживающий адаптивность. В продолжение темы:

• Менее трендовый и идеологически правильный, но потенциально интересный Tumult Hype ^[133].

Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw ^[134]
Подробный обзор современных инструментов для визуальной «верстки» адаптивных сайтов. В продолжение темы:

• Sparkle ^[135], близкий по смыслу инструмент.
• Визуальный инструмент Brix ^[136] для создания адаптивных сайтов на основе Bootstrap.

Framer — Modern Prototyping ^[137]
Вышла третья версия Framer.js с кучей новых возможностей. В продолжение темы:

• Официальная группа в Фейсбуке ^[138].
• Реализация Swipe и Drag на Framer 3 ^[139].
• Со дня на день выйдет FramerView ^[140], довольно удобное средство просмотра ваших прототипов, сделанных с помощью Framer.js, на iPhone.

Avocado для Quartz Composer ^[141]
Фреймворк Avocado от IDEO, еще одна надстройка над Quartz Composer. Вышла ее версия 1.0 ^[142]. В продолжение темы:

• Блог Алексея Соломатина ^[143], посвященный Origami и Quartz Composer.
• Небольшое пошаговое руководство от Dan Counsell ^[144].
• Пополняемая коллекция прототипов ^[145] на Quartz со вкусом Origami.

Understanding CSS Timing Functions ^[146]
Подробнейший разбор того, как работает современная CSS-анимация от Stephen Greig. Учитывая то что делать такие вещи руками становится все проще, полезно понимать общие принципы и детали.

• В статье упоминается отличнейший онлайн-инструмент для построения кривых Безье для анимации ^[147].
• Хорошая обзорная статья о кривых Безье ^[148].

Famo.us ^[149]
Javascript-фреймворк для создания сложных пользовательских интерфейсов для любых экранов. Хорошая документация, полно демонстрационных материалов и обучающих статей, растущее сообщество. Встроен 3D-движок, работающий почти в любых браузерах — можно делать что угодно: от сложных анимаций до игр.

Facebook Pop ^[150]
Facebook открыл код своего фреймворка Pop для анимации в мобильных приложениях, который использовался при создании Paper. Подробнее о нем ^[151]. В продолжение темы:

• Программа Flux ^[152] для создания анимации в iOS-приложениях.

Parallax Done Right ^[153]
Dave Gamache из команды Medium описывает технические нюансы создания правильного параллакса в вебе. Демо в сопровождение статьи ^[154].

Refills ^[155]
Еще один конструктор Refills для быстрой сборки проектов. Сделан на базе CSS-фреймворка Bourbon и его надстроек Bitters и Neat.

Hello Processing ^[156]
В рамках Hour of Code™ был запущен подсайт с обучающими видео-материалами по языку программирования Processing, заточенному на визуализацию данных.

Flowhub — Peer-to-peer full-stack visual programming for your fingers ^[157]
Инструмент для визуального программирования Flowhub (ранее NoFlo ^[158]) в начале этого года собрал деньги на KickStarter ^[159] и теперь находится в бете. Он основан на JavaScript и позволяет работать с вебом и приложениями на Android и iOS. Обзорная статья ^[160].

Forms — The Complete Guide ^[161]
Руководство по прототипированию форм от Martin Polley, используя фреймворк Foundation от Zurb. Часть 2 ^[162].

Webflow — Website Interactions without Code ^[163]
Webflow добавляет возможности интерактивной анимации, так что теперь еще лучше подходит для одностраничных промо-сайтов.

Snap.svg ^[164]
JS-библиотека для создания графики и ее анимации в SVG. В продолжение темы:

• Заметки с выступления Chris Coyier «SVG is for Everybody» ^[165] на An Event Apart.

Cody ^[166]
Пополняемая коллекция строительных кирпичиков для вашего веб-проекта. Присутствуют как комплексные HTML/CSS/Javascript решения, так и отдельные небольшие компоненты.

iOS Hat ^[167]
iOS Hat помогает превратить слои из Photoshop в работающий код на Objective-C. Поддерживается экспорт цвета, векторных форм, стилей текста. Учитываются размеры и привязки.

PaintCode ^[168]
Еще один современный инструмент для дизайнеров, желающих сократить цепочку от макетов до реализации. Он позволяет экспортировать макеты для iOS в ресурсы и код на Objective-C и C#.

Visual Programming Languages Snapshots ^[169]
История инструментов визуального программирования от 60х до нашего времени от Eric Hosick из Interface Vision.

Get Shit Done ^[170]
Фреймворк на базе Bootstrap 3.

The Answer to PhoneGap UI Development ^[171]
HTML5-фреймворк Onsen UI для создания Android и iOS-приложений. Позиционируется как лучшая альтернатива PhoneGap.

Метрики и ROI

Why consumer product metrics are all terrible ^[172]
Andrew Chen пишет правду о пользовательских метриках применительно к социальным сервисам. В некоторый случаях только 1% из посетителей зарегистрируется; 95% процентов ваших пользователей будут неактивны в любой конкретный день; Более 50% процентов пользователей так и останутся одни, ни к кому не присоединятся.

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

PJ McCormick's Leading Your Design Through Danger ^[173]
PJ McCormic о построении процесса внутри его команды дизайнеров в Amazon.

Building a Solid Foundation for Efficient Design ^[174]
Angela Cravel из EffectiveUI о том, как анализировать ситуацию в компании.

A look Inside Design at HubSpot ^[175]
Joshua Porter, UX-директор HubSpot, рассказывает об организации дизайн-процесса в компании.

Fuck Innovation, Everything We Have Now is Shit ^[176]
Amy Hoy о продуктовом дизайне, том, что сначала нужно сделать простые вещи работающими, а уже потом гнаться за «инновациями». Продолжение ^[177]. В продолжение темы:

• James Clear о том, что не стоит растрачиваться на детали, пока не заложен прочный фундамент ^[178].

4 Myths About Apple Design, From An Ex-Apple Designer ^[179]
Mark Kawano, экс-евангелист UX в Apple, разоблачает 4 мифа о процессе дизайна в компании. Перевод на русский ^[180].

7 Reasons Usability Problems Don't Get Fixed ^[181]
Jeff Sauro описывает 7 основных причин, из-за которых обнаруженные юзабилити-проблемы остаются нерешенными: 1) Не ясно, как часто встречается проблема, как много пользователей она затрагивает; 2) Проблема затрагивает небольшое количество пользователей; 3) Нет согласия внутри команды, действительно ли проблема является проблемой; 4) Испpавление требует капитальных переделок продукта; 5) Влияние проблемы мало заметно сказывается на опыте пользователей; 6) Оценка затрат на исправление больше, чем потенциальный выигрыш; 7) Продукт и так работает, зарабатывает деньги. Хозяева знают о проблемах, но довольны и не хотят пока ничего менять.

Maximum Viable Product ^[182]
Joe Leech из CXPartners об обратной концепции для lean UX — Maximum Viable Product. Это тот набор функций, который является пределом, после которого начинается перегруз возможностями и ухудшение интерфейса.

Stop Dancing Around Criticism and Put It to Use with These Tips from Airbnb's Head of UX ^[183]
Советы Katie Hill из Airbnb о том, как правильно критиковать дизайн. Причем расписанные с обеих сторон — презентующего и критикующего. В продолжение темы:

• Как проходят регулярные сеансы критики в Иннове ^[184].

How to Spot Good UX Designers ^[185]
Новая колонка UXMatters на тему того, как заметить хорошего UX-дизайнера?

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

Designer Duds — Losing Our Seat at the Table ^[186]
Оправдывает ли себя дизайн ради дизайна, например — приложения Carousel от Dropbox, Paper от Facebook, Jelly? Ведь дизайн должен приносить результаты. «Великолепный» дизайн, который приносит малую отдачу на самом деле — провал. Tuhin Kumar из Facebook отвечает на статью ^[187]. Правда, немного с позиции «сначала добейся».

A Guide To Validating Product Ideas With Quick And Simple Experiments ^[188]
Grace Ng описывает метод проверки продуктовых гипотез и наглядную табличку для этого. Она приводит простой пример из своей практики, показывающий как работать с шаблоном.

Solving Strategic Problems — Going Beyond Being a Technology Order Taker ^[189]
Хорошие кейсы того, как можно убедить компанию поменять продуктовые планы. В продолжение темы:

• Как дизайнеры Behance совмещают еще и роль продукт-менеджера ^[190].

Rap Genius Explains Why Worse is Better ^[191]
Очень полезная программная статья о Tom Lehman, создателе сервиса Rap Genius, в которой он рассказывает об истории создании продукта и своем убеждении «чем хуже — тем лучше». Его цель — проверять продуктовые идеи вживую в как можно более простом виде, забивая болт на слабо работающие. Это идет вразрез с желанием многих дизайнеров вылизывать каждую мелочь, часто не обращая внимания на то, что она имеет низкую ценность для пользователя или вообще не нужна. Посыл Тома, конечно, совсем радикален, но позволяет найти правильный баланс между вниманием к деталям и выкатке работающих решений. Перевод на русский ^[192].

The Last Goodbye — How To Shut Down A Failing Product ^[193]
Хорошая памятка Kevin Stone о том, как происходит закрытие продукта. Пошаговая инструкция для менеджеров, дизайнеров и проектировщиков.

Методологии, процедуры, стандарты

Establish user experience transformation as a continuous evolution ^[194]
Richard Berkman и Marvin Klein из IBM описывают современный подход к созданию продуктов в банковской сфере. Их общий посыл — больше нет редизайнов и крупных версий, для которых интерфейс должен быть идеально вылизан. Скорее продукты перезапускаются в виде платформы, которая постоянно обновляется и улучшается, так что релиз — это только начало пути.

Accessibility in Practice — A process-driven approach to accessibility ^[195]
Проблемы практической поддержки доступности. То, на что предпочитают закрывать глаза. Очень часто, при неправильной реализации, приоритетом является формальное техническое соответствие стандартам, а не качество взаимодействия. Иногда даже выбираются неправильные стандарты, например, проверяется соответствие WCAG там, где нужно проверять на WAI-ARIA. Поддержка доступности не закладывается в систему с самого начала, а существующая система «подгоняется» под формальное соответствие стандартам. Также будет полезно:

• Набор гайдлайнов по доступности игр ^[196].

Будущее UX-методологии и ее проблемы ^[197]
Презентация Андрея Сикорского об эволюции UX с конференции РИФ+КИБ 2014.

Кейсы

Good design ain’t pretty ^[198]
Luke Jones критикует популярные на Dribbble и Behance непрошенные редизайны крупных сервисов на примере плоской Mac OS. Внизу статьи неплохая жаркая дискуссия на тему. Другие спорные или откровенно плохие попытки таких редизайнов:

• Обновляющаяся коллекция ^[199].
• Редизайн Google от The Letter Society ^[200].
• Редизайн Android-приложения Quora ^[201].
• Редизайн Windows 8 от Jay Machalani ^[202].
• Редизайн iTunes от Brye Kobayashi ^[203].
• Редизайн сайта Microsoft ^[204]. Сам концепт ^[205].
• Концептуальный редизайн IMDB ^[206].
• Интервью с авторами недавнего концепта редизайна Википедии ^[207]. Сам концепт ^[208].
• Редизайн iOS от Jay Machalani ^[209].

Lenta Inside — Мастер-класс Галины Тимченко в Школе новых медиа ^[210]
Мастер-класс Галины Тимченко, бывшего главного редактора Ленты.ру, о том, как делался недавний редизайн издания и с какими проблемами столкнулись в его ходе.

How Facebook Used UX Research To Personalize The Way We See Each Other ^[211]
Кейс улучшения пользовательского профиля в Facebook с помощью связки исследований. От ко-дизайна с пользователями до обкатки на проценте аудитории.

Hybrid sweet spot: Native navigation, web content ^[212]
David Heinemeier Hansson из 37 Signals об эволюции мобильного приложения Basecamp с использованием гибридного подхода.

История

The Woman Behind Apple's First Icons ^[213]
Про Susan Kare, одну из первых цифровых дизайнеров, автора иконок первого Mac и вообще одну из самых легендарных личностей в продуктовом дизайне пишут регулярно. Но эта статья, наверное, самая подробная и интересная из всех.

25 old school websites for 25 years of the web ^[214]
Microsoft, Google. Apple, BBC, CNN… Как 25 известных сайтов выглядели 15-20 лет назад.

The Secret History of Hypertext ^[215]
Еще одна статья о бельгийском библиотекаре и предпринимателе Paul Otlet и его вкладе в появление интернета. Оказывается, что помимо своего известного проекта Mundaneum он опередил и идеи Vannevar Bush, считающегося основоположником концепции гипертекста и компьютера как «расширителя способностей» человека.

The Videophone Turns 50 — The Historic Failure That Everybody Wanted ^[216]
Mashable о 50-летии первого видео-фона от AT&T и непростом пути прихода видео-звонков в повседневное использование.

Тренды

The leaked New York Times innovation report is one of the key documents of this media age ^[217]
В публичный доступ ушел внутренний отчет NY Times о трендах в контент-проектах и состоянии самого издания. Крайне интересно о том, куда развивается эта индустрия. Также будут интересны:

• Интересные факты о работе контент-проектов ^[218], развенчивающие некоторые мифы.
• Статья Behance Russia о современных трендах в дизайне контент-проектов ^[219] с комментариями от меня, Александра Гладких (Charmer) и Анатолия Громова (Fjord Stockholm).

Spike and Die — Why Products Created by Ad Agencies Fail ^[220]
Одна из тенденций момента — рекламные и креативные агентства начинают заниматься UX- и продуктовым дизайном. Получается на первый взгляд очень эффектно, но чревато для успеха самих продуктов.

From Paths to Sandboxes ^[221]
Презентация Stephen P. Anderson, посвященная альтернативному взгляду на проектирование сервисов. Он предлагает отказаться от работы по оптимизации конкретных сценариев и создавать площадку с простыми правилами работы, которую пользователи могли бы использовать так как им это больше подходит. Такие сервисы имеют значительно большую вовлеченность и гибкость — почти как игровые миры.

Why VC Firms Are Snapping Up Designers ^[222]
Дизайн-партнер в венчурной компании — новая возможность для дизайнеров? Например, John Maeda перешел в KPCB, а Irene Au начинает работать в Khosla Ventures.

KPCB Internet trends 2014 ^[223]
Интернет-тренды на 2014 год от KPCB.

Свежее об автомобильных интерфейсах

• Geoff Teehan подготовил обзор интерфейсов информационных систем автомобилей класса-люкс ^[224].
• Битва автомобильных интерфейсов: пока никто не выигрывает ^[225].
• Виртуальная приборная доска 2015 Audi TT ^[226].
• Концепция Windows in the Car ^[227].
• Штурвал управления Formula 1 ^[228].

Post Flat ^[229]
Wells Riley размышляет о том, каким может быть пост-флэт-дизайн. Небольшой концепт от Pietro Schirano ^[230] c более активным использованием градиентов.

Software is Eating Hardware — Lessons for Building Magical Devices ^[231]
Adam MacBeth, который работал над iPod, Jawbone, Fifty Three Pencil, пишет об особенностях создания новых устройств.

Predicting too early is as bad as not predicting at all ^[232]
Don Norman разбирает свои предсказания, сделанные 16 лет назад в книге «Invisible Computer». Что сбылось, что — нет, а что — ещё может случиться, а также дает новые предсказания на следующие 10 лет. В продолжение темы:

• Jacob Nielsen ^[233] рассказывает на Google о своем видении будущего юзабилити.

Samsung Design Platform ^[234]
Samsung запустил подсайт, посвященный принципам дизайна компании и вещам, которыми она гордится. Уже пошли волны сарказма (например, Fast CoDesign ^[235]), но это в любом случае интересно. В продолжение темы:

• Музей инноваций Самсунга ^[236].

Everyone Deserves Great Design ^[237]
Замечательный дизайн, доступный для всех — концепция, созданная Ehsan Noursalehi. Идея — разрабатывать простые, функциональные продукты, которые были бы одинаково доступны и в передовых, и в развивающихся странах. Такие, как классические часы Casio, которые выпускаются уже более 20 лет, ручки Bic, пластиковые стулья, дешевые портативные УЗИ-скaннеры GE… Доступность это не только ограниченные физические, но и ограниченные финансовые возможности, ограниченный доступ к ресурсам. 90% населения земли живут в условиях ограниченности.

One billion dollars later… ^[238]
Компании пережили волну восхищения большими данными и веб-аналитикой. Anil Dash об ожидаемом появлениии инструментов «личной/потребитальской аналитики», где будет критично качество UX.

What Comes Next Is the Future ^[239]
Документальный фильм с участием многих известных дизайнеров, запущенный на Kickstarter.

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

Культура дизайна ^[240]
Новая книга Влада Головача, посвященная истории дизайна и ее влиянию на культуру. Глубокая и ёмкая. Онлайн-версия ^[241].

Get Started in UX: The Complete Guide to Launching a Career in User Experience Design ^[242]
Выдержка из новой книги Matthew Magain и Luke Chambers «Get Started in UX: The Complete Guide to Launching a Career in User Experience Design» на тему начала карьеры в UX.

Designing in the Borderlands by Frank Chimero ^[243]
Мощный лонг-рид на тему специалистов и генералистов в дизайне от Frank Chimero. Он выделяет три роли дизайна — декорация, производство и донесение идей. Публикация скорее о графическом дизайне, но актуальна для любых направлений.

Подборки лучших книг

• 100 главных книг по UX ^[244] от Craig Tomlin.
• Подборка книг на грани беллетристики и дизайна ^[245].
• Подборка лучших книг по мнению Nick Finck ^[246], версия 2014.
• 24 бесплатных электронных книги от Craig Tomlin ^[247].

Better UX Internships ^[248]
Отличнейший материал Jim Ross о том, почему опыт стажерства в компаниях зачастую негативный как для нанимателя, так и для самого стажера. Он подробно разбирает причины провалов и дает рекомендации обеим сторонам. В продолжение темы:

• Бюро Артема Горбунова открывает школу стажеров ^[249] с гарантированным трудоустройством. Его интервью о школе ^[250].

Why Designers Leave ^[251]
Julie Zhuo из Facebook размышляет о том, почему дизайнеры уходят из компании. Она описывает типичный сценарий прихода, воодушевления, разочарования и ухода специалиста. Также будут интересны:

• Почему уходят дизайнеры ^[252]? Три основных причины: 1) отсутствие продвижения; 2) нерасполагающая корпоративная культура; 3) унылые сослуживцы.
• Пример onboarding для нового сотрудника в Trello ^[253] от его создателей, Fog Creek.

Как я сдавала CUA ^[254]
Анастасия Щеброва о своём опыте получения сертификата CUA (Certified Usability Analyst). Набор «шпаргалок» ^[255] для подготовки к нему. В продолжение темы:

• Cory Lebson рассуждает о том, нужна ли вообще сертификация UX-специалистов ^[256] и какой она должна быть.

The Hidden Value of UX Connectors and the Future of Our Community ^[257]
Cory Lebson размышляет о локальных UX-сообществах и их лидерах. Он вспоминает попытку Lou Rosenfeld и других мастодонтов создать в 2004 году UXnet, инициативу по поддержке таких сообществ. Тогда, наверное, было рановато, но теперь у такая организация была бы кстати.

Aquent Gymnasium ^[258]
Бесплатные видео-курсы от Aquent, в том числе по адаптивному дизайну и кодингу для дизайнеров.

UX Job Descriptions Made Easy(er) ^[259]
Компания Vitamin T составила примеры обсшего описания требований для разных уровней (младший, «специалист», старший) позиций: Проектировщик взаимодействия, Визуальный дизайнер, Исследователь пользователей.

Service Blueprinting — Transforming the Student Experience ^[260]
Переосмысление обучения с помощью методов проектирования услуг.

10 Surpisingly Common But Painful User Experiences ^[261]
Серия забавных постеров от Jeff Sauro, показывающих проблемы в интерфейсах.

6 Differences Between B2B and B2C Usability ^[262]
Jeff Sauro о разнице в работе юзабилити-специалиста над корпоративными и потребительскими приложениями.

Goodbye from Five Simple Steps ^[263]
Перестало существовать издательство Five Simple Steps, в котором вышли «Hardboiled Web Design», «Practical Guide to Designing for the Web», «Practical Guide to Designing with Data», «Practical Guide to Information Architecture». Это связано с покупкой родительской Mark Boulton Design шрифтовой компанией Monotype… Правда, через месяц издательство решило продолжить работу. В продолжение темы:

• Прощальное слово от Andrew Clarke ^[264], автора Hardboiled Web Design.
• Mark Boulton выложил в открытый доступ свою книгу Practical Guide to Designing for the Web ^[265], первую книгу издательства.

UX How-To with Luke Wroblewski ^[266]
Серия коротких обучающих видео от Luke Wroblewski, записанных для обучающего канала Intel.

https://www.youtube.com/playlist?list=PLg-UKERBljNy2Yem3RJkYL1V70dpzkysC

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

100 Most Creative People 2014 ^[267]
100 лучших креативных специалистов 2014 по версии Fast Co Design.

John Maeda Interview ^[268]
Интервью с John Maeda, одним из самых интересных современных дизайнеров. Достаточно интересно о том, как он консультирует компании и учит руководителей дизайну. В продолжение темы:

• John Maeda о 3 принципах успешного дизайна ^[269]: 1) Начинайте с дизайна, а не заканчивайте им; 2) Разрешайте дизайнерам кодировать, а разработчикам — рисовать дизайн; 3) Не противопоставляйте бизнес и дизайн, цели бизнеса и цели пользователей.

Designing Mobile Usability ^[270]
Интервью о мобильном юзабилити с Якобом Нильсeном для сайта Dorm Room Tycoon.

Meet the godfather of wearables ^[271]
Интервью с Alex Petland, одним из «дедушек» носимых устройств. Под его руководством в 90х в лабораториях MIT создавались первые прототипы: очки со встроенным дисплеем; часы с датчиками температуры, пульса и кровяного давления; ремень с беспроводным выходом в интернет; значек со встроенной камерой и микрофоном, клавиатура вшитая в жилетку и т.п.

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

Видео с MX2014 — Managing Experience ^[272]
Выступления с конференции MX2014 — Managing Experience, проходившей 16-17 марта в Сан-Франциско. Я давно хотел попасть на нее и в этом году получилось — это уникальное мероприятие по составу и темам. Презентации рассылали участникам, но пока почему-то еще не выложили в открытый доступ. Самые мощные выступления у Todd Wilkens из IBM, Bill Scott из Netflix и закрывающая от Brandon Schauer. Было много булшита, во многом от ребят из сервис-дизайна (сплошная вода про ценности без конкретики). Но в целом — было круто увидеть как устроен дизайн-процесс и ценности в крупнейших компаниях. Некоторые из презентаций:

• Brandon Schauer опубликовал крутую методичку для UX-менеджеров и стратегов ^[273], анонсировал ее в конце мероприятия.
• Статья об истории дизайна в IBM и текущем подходе ^[274], часть того о чем говорил Todd Wilkens.

Видео с From Business to Buttons 2014 ^[275]
Материалы конференции From Business to Buttons 2014, проходившей 3 апреля в Швеции. Некоторые выступления:

• Kim Goodwin ^[276] о 4х архетипах организационных культур, и что требуется от UX внутри каждой из них.
• Chris Ridson ^[65] — Service Design Touchpoints.
• Cennydd Bowles ^[277] о дизайнерской этике.

Видео с конференции Lean Day London 2014 ^[278]
Материалы конференции Lean Day London 2014, проходившей 25-26 марта в Лондоне.

Видео с The Service Experience Conference 2013 ^[279]
Материалы конференции Service Experience 2013, проходившей 3-4 октября в Сан-Франциско.

Видео с ProfsoUX 2014 ^[280]
Материалы конференции ProfsoUX, проходившей 26 апреля в Санкт-Петербурге.

Фестиваль цифровой медиа-культуры OFFF в Санкт-Петербурге ^[281]
Впервые за десятилетие своего существования Фестиваль цифровой медиа-культуры OFFF пройдет в России. 5 и 6 июля в креативном пространстве “ТКАЧИ” выступят Anton Repponen & Irene Pereyra (FI), Florian Schmitt (Hi-Res), Rama Allen (The Mill) и другие.

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

Автор: jvetrau

Источник ^[283]