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

Паттерны и Best Practices

Website Style Guide Resources ^[2]
Объемная коллекция материалов по живым гайдлайнам сайтов. Статьи, книги, руководства, подкасты, доклады с конференций, инструментарий и реальные примеры — все собрано вместе, удобно каталогизировано и регулярно обновляется. Вынесу оттуда мощнейшую сравнительную таблицу фреймворков и готовых решений ^[3].

Fluid-Touch Design ^[4]
Ralph Thomas разбирает интерфейсное решение плавающей кнопки быстрого добавления в почтовом клиенте Inbox от Google. Оно позволяет сократить количество нажатий за счет достаточно комфортных жестов. Их, правда, непросто обнаружить, но как шорткат решение отличное. Luke Wroblewski также разбирает его плюсы ^[5].

Crayon ^[6]
Поисковой движок поверх огромной коллекции реальных «маркетинговых» дизайнов. У вас есть возможность фильтровать результаты по типу страницы, индустрии, используемой CMS, уровню трафика. Так и искать прямыми запросами вида «landing pages» или «home pages on squarespace». Ресурс будет полезен дизайнерам, маркетологам, менеджерам продуктов для поиска вдохновений и решений.

High Performance Map Interactions Using HTML5 Canvas ^[7]
Ed Kelley рассказывает о решении достаточно нетривиальной задачи — представлении в мобильном вебе карты стадиона с широкими возможностями выбора мест.

Design Details: Inbox by Google ^[8]
Brian Lovin разбирает интерфейсные паттерны приложения Inbox для iOS.

Eye-tracking: кейсы и инсайты ^[9]
Юрий Грановский сделал обзор исследований золотого треугольника.

Form Usability: Getting 'Address Line 2' Right ^[10]
О проблемах поля «Address 2» при оформлении корзины. Это специфично для западных интернет-магазинов, но многие специалисты работают на иностранные рынки.

uiGIFs — Animated UI inspiration in your inbox every Monday ^[11]
Галерея uiGIFs с примерами анимации в приложениях.

Ocean ^[12]
Еще одно Dribbble-подобное сообществ.

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

The Rise of the Phablet: Designing for Larger Phones ^[13]
Steven Hoober о том, что большие экраны не являются большой проблемой, поскольку большинство пользователей не пользуется телефоном одной рукой.

60 ways to understand user needs that aren’t focus groups or surveys ^[14]
David Travis перечисляет 60 способов понять потребности пользователей.

Typography & Dyslexia ^[15]
Словолитня Bigelow & Holmes поставила под сомнение эффективность специальных шрифтов для дислектиков.

Take Note, Facebook: How Colleges Are Training Designers To Treat Users Like More Than Lab Rats ^[16]
Fast Co Design об этике скрытых пользовательских исследований и университетских программах, которые учат специалистов не переходить грань.

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

Алексей Копылов — Введение в Customer Journey Map ^[17]
Видеозапись вебинара и слайды презентации Алексея Копылова «Введение в Customer Journey Map» в рамках Школы проектирования интерфейсов.

CJM Online ^[18]
Онлайн-сервис для создания Customer Journey Map от минской компании UXPresso и разработчика ReactiveBit.

System Thinking and UX ^[19]
Статья Stew Dean на основе его выступления на конференции EuroIA 2014, посвященная системному мышлению ^[20] в дизайне. Он очень подробно разбирает его применение к интерфейсам и разбирает проблемы популярных подходов к решению дизайнерских задач. Первая часть ^[21].

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

Atomic — Design the Future ^[22]
Что за неделя без нового инструмента проектирования и дизайна интерфейсов? Atomic тоже обещает современный подход к прототипированию мобильных и командной работе над ним. Не зря на недавней гугловской дизайн-конференции Form была отдельная панель для создателей таких продуктов. Ребята уже успели запустить свой Designer News ^[23].

Новое о Material Design

• Иконочная сетка от Tobia Crivellari ^[24].
• Шаблон для After Effects с некоторыми типичными анимациями ^[25].
• Гайдлайны заметно дополнены ^[26].
• Google Calendar в новых гайдлайнах вот-вот будет в магазине приложений ^[27]. Много интересных решений в общей идеологии.
• Студия Manual делала шикарнейший буклет с описанием основных принципов material design ^[28].
• В статье Wired есть пара интересных картинок — бумажные иконки для проверки их материальности и внутренняя примерка гайдлайнов на крупнейшие сторонние приложения ^[29].
• UXFox перевели на русский кейс по проектированию приложения о матчах NBA ^[30].
• Еще одна тема для Bootstrap в духе Material Design вместе с шаблонами в PSD ^[31].
• Морфинг иконок а-ля material design на CSS+JS ^[32].
• Скрипт для свайпа карточек в духе гайдлайнов ^[33].
• Скрипт, показывающий изменение состояний адаптивности ^[34].
• Скрипт с эффектом расходящихся кругов в точке нажатия ^[35].
• Скрипт изменяющейся иконки троеточия ^[36].
• Скрипт изменяющейся иконки бургера ^[37].
• Скрипт для последовательно анимированной загрузки тайлов ^[38] и собранная стартовая Google Design на его основе ^[39].
• Скрипт индикатора загрузки ^[40].
• Тема для Angular.js ^[41].
• Пополняющаяся коллекция дизайнов в идеологии Material ^[42].
• Небольшая методичка от Max Weiner из Pocket о переходе на material design ^[43].

Новое для Sketch

• Новое в версии 3.2 ^[44].
• Решение проблем с работой горячих клавиш при включенной русской и других раскладках ^[45].
• Алишер Якупов подробно рассказывает об опыте перехода команды дизайнеров Одноклассников на Sketch ^[46].
• О комфортной настройке горячих клавиш ^[47].
• Дмитрий Новиков собирает коллекцию русскоязычных публикаций о Sketch в Medium ^[48].
• InVision теперь синхронизируется со Sketch ^[49].

Новое для Apple Watch

• Human Interface Guidelines ^[50].
• Полная документация для разработчиков и дизайнеров ^[51].
• Сравнение нового эппловского шрифта San Francisco и Roboto ^[52]. А вот тут его примерили к Yosemite ^[53].
• В гайдлайнах часов описан интересный паттерн — детальность уведомления зависит от того, как долго пользователь смотрит на него ^[54] (определяется акселерометром).
• Шаблон для Sketch ^[55].

Новое для Android Wear

• Шаблоны для прототипирования в Sketch ^[56].

Новое для iPhone 6

• PaintCode собрали удобную справочную табличку по разрешениям и плотностям экранов разных айфонов ^[57].
• Ole Begemann изучает под микроскопом, как экран iPhone 6+ отображает автоматические программное уменьшение @3x-ресурсов в разных ситуациях ^[58].
• 15 шаблонов iPhone 6 для Photoshop от Balraj Chana ^[59].

Новое для iOS7/iOS8

• Краткие гайдлайны от Ivo Mynttinen ^[60].
• Иконки приложений до и после редизайна под новые гайдлайны ^[61].

Proto.io Spaces ^[62]
Библиотека готовых решений для онлайн-инструмента проектирования мобильных и планшетных сайтов и приложений Proto.io.

Prott — Rapid Prototyping & Radical Collaboration ^[63]
Еще одно приложение для быстрого прототипирования на мобильных.

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

Navilytics — Powerfully simple tools at your disposal ^[64]
Интересный сервис веб-аналитики с расширенными возможностями. Позволяет записывать последовательность действий на странице, выдает тепловые карты, воронки прокрутки страницы, анализировать формы и разные области страницы, а также сегментировать все это.

Как Chartbeat улучшает медиасайты ^[65]
Как АиФ работает с сервисом Chartbeat для повышения продуктовых показателей. Он отслеживает вовлеченность пользователей как дополнение к традиционным метрикам вроде глубины просмотра.

Мнение Яны Москвиной: На всякий случай: на Chartbeat реально отдельного человека надо сажать — слишком много инфы он обновляет в реалтайме, и от ежесекундного мигания экрана голова болит. Если хочется бесплатный вариант попробовать, и без ряби в глазах, то можно использовать отчет Realtime в Google Analytics и Вебвизор Яндекс.Метрики.

Если говорить в целом, то вместо просвещения сайт СМИ может быстро скатиться в шоу для пользователей — показывать всем только самое кликабельное. Задача про «обвязку» страниц хорошая, трафигенерящая. Но реально с умом подходить надо.

An introduction to user research techniques ^[66]
Справочник по пользовательским исследованиям от GOV.UK. В продолжение темы:

• Серия статей по проведению классических пользовательских тестирований ^[67].

Recruiting User Research Participants by Email ^[68]
Jim Ross о том, как находить пользователей для исследований с помощью электронной почты. В статье описан сценарий и подводные камни.

A Guide To Conducting A Mobile UX Diagnostic ^[69]
Lyndon Cerejo о вариации метода экспертной оценки, более формализованной и заточенной на сценарии.

How To Run User Tests At A Conference ^[70]
Отличная методичка по проведению пользовательских исследований на конференциях от Daniel Suable. Вначале много воды, но вторая половина по делу. В продолжение темы:

• Grace Vorreuter о проведении исследований в кафе ^[71].

Refining Your Mobile Onboarding Experience Using Visual Analytics ^[72]
Alon Even из команды сервиса мобильной аналитики AppSee о том, как отслеживать эффективность onboarding на мобильных. В первой половине достаточно дефолтная категоризация подходов, по теме начинается позже.

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

Tumult Hype Pro 3 ^[73]
Еще один современный инструмент для дизайнеров, третья версия Hype Pro. Обещают интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.

The Art of UI Animations ^[74]
Воркшоп с Mark Geyer про анимации в интерфейсе. Довольно интерсный формат подачи, запускается в браузере. Сам воркшоп весьма познавателен. Mark Geyer работает в отделе исследований и разработки компании Salesforce.

Blocs ^[75]
Еще один инструмент для визуального создания сайтов. Это приложение для Mac от Norm Sheeran, являющееся по сути умной обвязкой над Bootstrap. Небольшой скринкаст ^[76] и видео работы ^[77].

Form is Joining Google ^[78]
Google купил Form, Origami-подобный инструмент для интерактивного прототипирования. Из очевидных преимуществ – возможность взаимодействовать с прототипом на устройстве на лету, так же, как при помощи Sketch Mirror.

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

• Еще одна библиотека для анимирования SVG ^[79].
• Демонстрационный скрипт Draggabilly ^[80]. Интересные идеи по реализации взаимодействия drag'n'drop.
• Скрипт, позволяющий показывать картинку в состоянии до и после ^[81].
• Скрипт, который позволяет делать зависимый от времени суток long shadow. ^[82]

Designers Code Differently ^[83]
Meng To о кодирующих дизайнерах и их отличиях от разработчиков.

Styling And Animating SVGs With CSS ^[84]
Развернутое руководство Sara Soueidan по стилизации и анимации SVG с помощью CSS. В продолжение темы:

• Книга Joni Trythall "Pocket Guide to Writing SVG ^[85]".

Метрики и ROI

5-Steps For Getting Started Measuring The Customer Experience ^[86]
Советы Jeff Sauro по обсчету CX с учетом важности функций продукта.

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

About Face 4: Chapter 6: Creative Teamwork ^[87]
UXMatters публикует шестую главу из четвертого издания книги About Face. В продолжение темы:

• Cooper выложили все диаграммы из About Face 4 в виде презентации на SlideShare ^[88].

Beyond the UX Tipping Point ^[89]
Jared Spool о переломном моменте принятия UX в организациях. Оно становится необратимым, когда компания больше не соглашается идти на компромиссы относительно пользовательских впечатлений. Теперь технологии начинают подстраиваться под требуемые впечатления, а не наоборот. Джаред перефразирует уровни UX зрелости компаний:

1. Тёмные века UX;
2. Случайные инвестиции и проекты;
3. UX начинает включаться в команды. После этого этапа может наступить тот самый переломный момент невозврата, когда компания переходит на следующий этап.
4. Интеграция UX и услуг.

Zeplin — Collaboration app for UI designers & frontend developers ^[90]
Десктопное приложение Zeplin для совместной работы дизайнеров и разработчиков. Подключается к Sketch и скоро сможет к Фотошопу, облегчает передачу спецификаций. Группа в Фейсбуке ^[91].

Gibbon — Peer-to-peer learning for your organization ^[92]
Интересный сервис для организации обмена знаниями внутри компании и команды, а также быстрого включения в рабочий процесс новичков.

Hanno Playbook ^[93]
Отличная подробная методичка по работе над дизайн-проектом от студии Hanno. Меньше про конкретные методики, больше про общий процесс и выстраивание отношений с клиентом. Анонс ее запуска ^[94].

Wake — Open Your Design Process ^[95]
Сервис Wake для командной работы над макетами и мудбордами. Позволяет загружать и обсуждать свой дизайн и собирать коллекцию примеров.

Where to find great UX candidates ^[96]
Irene Au о том, где найти кандидатов на UX-должности. Написано для США, но частично актуально и для нашего рынка.

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

5 Mistakes We All Make with Product Feedback ^[97]
Des Traynor пишет в блоге Intercom о 5 ошибках, которых следует избегать при работе с отзывами пользователей о вашем продукте. Его советы: разделять пользователей на группы; постоянно собирать отзывы; разделять платящих и бесплатных пользователей; не следовать мнению «громкого меньшинства»; перепроверять требования пользователей, стараясь определить их мотивы. В продолжение темы:

• Выступление Des Traynor о продуктовой стратегии ^[98]. Почему продукт должен напоминать скальпель, а не швейцарский армейский нож.

Data-Informed Design: Three Data Stories ^[99]
Pamela Pavliscak начинает серию публикаций о работе с данными аналитики при проектировании интерфейсов. Первая из них посвящена задачам, которые помогают решать такие данные — убедить кого-то, улучшить что-то, исследовать.

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

Ведомственный приказ «Об утверждении профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов»» ^[100]
Текст профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов» ушел на согласование министру.

Кейсы

Building SoundCloud ^[101]
Интереснейший рассказ Michael Nino Evensen о том, как было переделано iPhone-приложение SoundCloud, одно из самых интересных в этом году. Очень подробно и с кучей деталей.

Новые кейсы дизайна и редизайна

• О редизайне Spotify ^[102].
• О создании Product Hunt ^[103].

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

• Как Vox Media переводили новый проект на свою платформу ^[104].

4 Things HealthCare.Gov 2.0 Gets Right (And 5 Things It Still Gets Wrong) ^[105]
Дизайнеры обсуждают вторую версию портала HealthCare.gov, запуск которого в прошлом году сопровождался уймой юзабилити- и технических проблем.

История

The Evolution of the Title Bar Buttons ^[106]
Karla Urbina изучает эволюцию привычных теперь кнопок закрытия, минимизации и максимизации окна приложения в десктопных ОС. Интересно, что во многих случаях все начиналось с иконки бургера. В продолжение темы:

• Еще одна их публикация, про историю иконки бургера ^[107].

Краткая история контент-стратегии ^[108]
Перевод на русский язык истории дисциплины контент-стратегии, интерес к которой активно растет в последние годы. Впервые заговорили о ней в 1997-1998, а в 2009 году произошел взрыв интереса.

Тренды

IBM Design ^[109]
В ближайшие недели IBM представит свой язык дизайна, который обещает стать одним из самых масштабных среди крупных компаний на уровне BBC GEL и Material Design. Он появится на сайте IBM Design. Пока там общая информация об инициативах компании, но в недавнем выступлении Phil Gilbert (руководитель дизайна корпорации) достаточно подробно рассказал об этих гайдлайнах ^[110] (конкретика начинается во второй половине).

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

Компании уже больше ста лет и за это время она несколько раз смогла переизобрести себя и выходить из тяжелых кризисов. К дизайну они подошли также системно, как и ко всему остальному — стратегия его внедрения в жизнь компании впечатляет, как и масштабы (штат дизайнеров должен дойти до 1000 человек). За анонсами можно следить в Твиттере команды ^[111].

HP Sprout is a Bold Attempt to Reimagine the Desktop PC ^[112]
На прошлой неделе HP показала безбашенный концепт нового подхода к взаимодействию с десктопным компьютером для дизайнеров Sprout. Вместо клавиатуры у него проецируемая тач-поверхность, которая вместе с 3D-камерой меняет привычный формат работы. Причем это уже рабочий продукт, который можно будет купить за $1899. Авторы других известных концептов дают свою оценку ^[113].

Checkout/login designers, this is your new bar: ONE tap/NO forms ^[114]
Радикальное упрощение процесса оформления заказа на мобильных, возможное при широком распространении сканеров отпечатков пальцев.

The End of Apps as We Know Them ^[115]
Paul Adams предсказывает, что приложения будут использоваться всё меньше. Пользователи будут все больше взаимодействовать с потоками интерактивных карточек с контентом либо уведомлениями от приложений, чем с самими приложениями. Позже он дал пояснения к статье ^[116].

Designing to Co-Designing to Collective Dreaming — Three Slices in Time ^[117]
Liz Sanders и Pieter Stappers разбирают историю форматов совместной работы дизайнеров, исследователей, разработчиков и пользователей и пророчат активное развитие практик ко-дизайна сейчас и в будущем. Многие компании приходят к подобным мыслям.

Physical Web — Walk up and use anything ^[118]
Инициатива Google Physical Web, направленная на стандартизацию с тем, чтобы не пришлось иметь приложение для каждого бытового прибора.

Web Apps ^[119]
Lukas Mathis о гибридных приложениях и общих трендах мобильной разработки.

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

Фоновые исследования. Как много читать, знать и не офигевать ^[120] (презентация Юрия Ветрова)
Моя презентация о подходе фоновых исследований с конференции World Usability Day 2014. О том, как много читать, знать и не офигевать. Сложность современных продуктов все растет, а формат работы современных продуктовых команд становится более динамичным. От нас ждут достаточно высокого уровня профессиональной эрудиции, который набрать бывает непросто, а поддерживать — и того сложнее.

Я плотно работаю с информацией по профессии и структурирую понимание по ее областям, с которыми работаю или наверняка поработаю в будущем. Изначально тратил на это уйму времени, но постепенно научился справляться с этим адовым потоком, так что теперь уходит час-полтора в день. В презентации рассказал, почему считаю это важным, как устроены информационные потоки и как это выручает меня на практике. Там ОЧЕНЬ много ссылок на всевозможные подборки и списки. Какие-то уже полные, какие-то еще только собираются.

7 Rules for Creating Gorgeous UI ^[121]
7 правил создания красивых интерфейсов для не-дизайнеров от Erik D. Kennedy. Очень доступным языком и с хорошими примерами, хотя и местами несистемно. Вторая часть статьи ^[122].

Time with Users: Set Personal and Company Goals ^[123]
Jakob Nielsen описывает нормы ГТО по работе с пользователями для всех участников продуктовой команды. В статье занятная табличка важности регулярного участия в исследованиях для разных специалистов.

Онлайн-курс «Визуализация. Основы» ^[124]
Стали доступны первые лекции бесплатного онлайн-курса Тани Бибиковой (Мисютиной) по основам визуализации данных.

Книга Scott Jehl «Responsible Responsive Design» ^[125]
В продолжение «цветной серии» A Book Apart вышла книга Scott Jehl «Responsible Responsive Design». Рассмотрены многие аспекты проектирования и дизайна при поддержке адаптивности для мобильных и веб-версий продукта.

User Experience Salaries & Calculator (2014) ^[126]
Jeff Sauro обработал результаты опроса о зарплатах в UX, проведенного UXPA. Основными факторами являются занимаемая должность и географическое положение работы. Также можно поэкспериментировать с зарплатным калькулятром. В продолжение темы:

• Обзор отечественного рынка от Superjob ^[127].

9 basic principles of responsive web design ^[128]
Дизайнеры сервиса Froont подготовили наглядный обзор принципов адаптивного дизайна в виде 9 анимаций. Перевод на русский ^[129].

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

AMA: I'm Julie Zhuo, director of product design @ Facebook ^[130]
Сессия вопросов и ответов с главой продуктового дизайна Facebook Julie Zhuo на Designer News. Перевод отдельных вопросов на русский ^[131]. Другие сессии AMA:

• Mig Reyes из Basecamp ^[132].
• John Maeda ^[133].

Покупки дизайн-студий крупными компаниями

• EPAM Systems приобрела компанию Great Fridays ^[134]. Она как раз специализировалась на проектировании и стратегии создания продуктов для людей. Одна из немногих с хорошим портфолио в отрытом доступе ^[135].

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

Google FORM 2014 ^[136]
Видео выступлений с конференции Google Form 2014, которая проходила 4-5 ноября в Сан-Франциско, США. Она была посвящена связке дизайна и технологий и включала мощный состав спикеров из модных интернет-сервисов. Несколько интересных выступлений:

• Секция создателей всех современных инструментов прототипирования ^[137].
• Интервью с Матиасом Дуарте ^[138].
• Секция визуального сторителлинга ^[139].
• Дизайн-образование ^[140].
• Дизайн в стартапах ^[141].

Видео-отчет с семинара Виталия Фридмана в Mail.Ru Group ^[142]
14-15 ноября Vitaly Friedman делал расширенный мастер-класс в офисе Mail.Ru Group, в котором подробно рассказал о многих из техник оптимизации производительности адаптивного сайта. Наши коллеги опубликовали видео-запись лекции, предваряющей тренинг. Там не все 8 часов, но много интересного.

UX Immersion 2014 ^[143]
Видео выступлений с конференции UX Immersion 2014, которая проходила 7-9 апреля в Денвере, США. Несколько интересных выступлений:

• Jared Spool о том, как дизайнить дизайнеров ^[144].
• Nate Schutta о том, когда следует разрабатывать мобильное веб приложение, нативное приложение, либо гибридное ^[145].
• Cyd Harrell о «карманных исследованиях» ^[146].

Midwest UX 2014 ^[147]
Видео выступлений с конференции Midwest UX 2014, которая проходила 23-25 октября в Индианаполисе, США. Выступающие, на которых стоит обратить внимание: Stephen Andeson, Jared Spool, Peter Morville, Mark Rolston, Jon Kolko, Steven Hoober.

UX in Japan ^[148] (выступление Takumi Yoshida)
Доклад Takumi Yoshida с ORIENT Uxpress. Много и интересно про различие в проектировании продуктов для восточного и западного рынков, с реальными примерами на продуктах Sony / Nokia и пр. Рассмотрены культурные и кросс-национальные различия в построениях ментальных моделей взаимодействия, восприятии паттернов. В продолжение темы:

• Еще один доклад с ORIENT UXpress. Если Takumi Yoshida рассказывал об особенностях японского дизайна, то Seung Jun Jeong — о специфике дизайна в Южной Корее ^[149].
• 2 подкаста от Бегемот-Бегемот ^[150]. В частности, рассказывается про особенности азиатских интерфейсов мобильных приложений и различиях между Китаем, Японией и Кореей. А здесь текстовая выжимка из интересного в них ^[151].

ConveyUX 2014 ^[152]
Видео выступлений с конференции ConveyUX 2014, которая проходила 5-7 февраля в Сиэтле, США.

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

Автор: jvetrau

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