Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-октябрь 2014.
Паттерны и Best Practices
Website Style Guide Resources
Объемная коллекция материалов по живым гайдлайнам сайтов. Статьи, книги, руководства, подкасты, доклады с конференций, инструментарий и реальные примеры — все собрано вместе, удобно каталогизировано и регулярно обновляется. Вынесу оттуда мощнейшую сравнительную таблицу фреймворков и готовых решений.
Fluid-Touch Design
Ralph Thomas разбирает интерфейсное решение плавающей кнопки быстрого добавления в почтовом клиенте Inbox от Google. Оно позволяет сократить количество нажатий за счет достаточно комфортных жестов. Их, правда, непросто обнаружить, но как шорткат решение отличное. Luke Wroblewski также разбирает его плюсы.
Crayon
Поисковой движок поверх огромной коллекции реальных «маркетинговых» дизайнов. У вас есть возможность фильтровать результаты по типу страницы, индустрии, используемой CMS, уровню трафика. Так и искать прямыми запросами вида «landing pages» или «home pages on squarespace». Ресурс будет полезен дизайнерам, маркетологам, менеджерам продуктов для поиска вдохновений и решений.
High Performance Map Interactions Using HTML5 Canvas
Ed Kelley рассказывает о решении достаточно нетривиальной задачи — представлении в мобильном вебе карты стадиона с широкими возможностями выбора мест.
Design Details: Inbox by Google
Brian Lovin разбирает интерфейсные паттерны приложения Inbox для iOS.
Eye-tracking: кейсы и инсайты
Юрий Грановский сделал обзор исследований золотого треугольника.
Form Usability: Getting 'Address Line 2' Right
О проблемах поля «Address 2» при оформлении корзины. Это специфично для западных интернет-магазинов, но многие специалисты работают на иностранные рынки.
uiGIFs — Animated UI inspiration in your inbox every Monday
Галерея uiGIFs с примерами анимации в приложениях.
Ocean
Еще одно Dribbble-подобное сообществ.
Понимание пользователя
The Rise of the Phablet: Designing for Larger Phones
Steven Hoober о том, что большие экраны не являются большой проблемой, поскольку большинство пользователей не пользуется телефоном одной рукой.
60 ways to understand user needs that aren’t focus groups or surveys
David Travis перечисляет 60 способов понять потребности пользователей.
Typography & Dyslexia
Словолитня Bigelow & Holmes поставила под сомнение эффективность специальных шрифтов для дислектиков.
Take Note, Facebook: How Colleges Are Training Designers To Treat Users Like More Than Lab Rats
Fast Co Design об этике скрытых пользовательских исследований и университетских программах, которые учат специалистов не переходить грань.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Алексей Копылов — Введение в Customer Journey Map
Видеозапись вебинара и слайды презентации Алексея Копылова «Введение в Customer Journey Map» в рамках Школы проектирования интерфейсов.
CJM Online
Онлайн-сервис для создания Customer Journey Map от минской компании UXPresso и разработчика ReactiveBit.
System Thinking and UX
Статья Stew Dean на основе его выступления на конференции EuroIA 2014, посвященная системному в дизайне. Он очень подробно разбирает его применение к интерфейсам и разбирает проблемы популярных подходов к решению дизайнерских задач. Первая часть.
Проектирование и дизайн экранов интерфейса
Atomic — Design the Future
Что за неделя без нового инструмента проектирования и дизайна интерфейсов? Atomic тоже обещает современный подход к прототипированию мобильных и командной работе над ним. Не зря на недавней гугловской дизайн-конференции Form была отдельная панель для создателей таких продуктов. Ребята уже успели запустить свой Designer News.
Новое о Material Design
- Иконочная сетка от Tobia Crivellari.
- Шаблон для After Effects с некоторыми типичными анимациями.
- Гайдлайны заметно дополнены.
- Google Calendar в новых гайдлайнах вот-вот будет в магазине приложений. Много интересных решений в общей идеологии.
- Студия Manual делала шикарнейший буклет с описанием основных принципов material design.
- В статье Wired есть пара интересных картинок — бумажные иконки для проверки их материальности и внутренняя примерка гайдлайнов на крупнейшие сторонние приложения.
- UXFox перевели на русский кейс по проектированию приложения о матчах NBA.
- Еще одна тема для Bootstrap в духе Material Design вместе с шаблонами в PSD.
- Морфинг иконок а-ля material design на CSS+JS.
- Скрипт для свайпа карточек в духе гайдлайнов.
- Скрипт, показывающий изменение состояний адаптивности.
- Скрипт с эффектом расходящихся кругов в точке нажатия.
- Скрипт изменяющейся иконки троеточия.
- Скрипт изменяющейся иконки бургера.
- Скрипт для последовательно анимированной загрузки тайлов и собранная стартовая Google Design на его основе.
- Скрипт индикатора загрузки.
- Тема для Angular.js.
- Пополняющаяся коллекция дизайнов в идеологии Material.
- Небольшая методичка от Max Weiner из Pocket о переходе на material design.
Новое для Sketch
- Новое в версии 3.2.
- Решение проблем с работой горячих клавиш при включенной русской и других раскладках.
- Алишер Якупов подробно рассказывает об опыте перехода команды дизайнеров Одноклассников на Sketch.
- О комфортной настройке горячих клавиш.
- Дмитрий Новиков собирает коллекцию русскоязычных публикаций о Sketch в Medium.
- InVision теперь синхронизируется со Sketch.
Новое для Apple Watch
- Human Interface Guidelines.
- Полная документация для разработчиков и дизайнеров.
- Сравнение нового эппловского шрифта San Francisco и Roboto. А вот тут его примерили к Yosemite.
- В гайдлайнах часов описан интересный паттерн — детальность уведомления зависит от того, как долго пользователь смотрит на него (определяется акселерометром).
- Шаблон для Sketch.
Новое для Android Wear
Новое для iPhone 6
- PaintCode собрали удобную справочную табличку по разрешениям и плотностям экранов разных айфонов.
- Ole Begemann изучает под микроскопом, как экран iPhone 6+ отображает автоматические программное уменьшение @3x-ресурсов в разных ситуациях.
- 15 шаблонов iPhone 6 для Photoshop от Balraj Chana.
Новое для iOS7/iOS8
Proto.io Spaces
Библиотека готовых решений для онлайн-инструмента проектирования мобильных и планшетных сайтов и приложений Proto.io.
Prott — Rapid Prototyping & Radical Collaboration
Еще одно приложение для быстрого прототипирования на мобильных.
Пользовательские исследования и тестирование, аналитика
Navilytics — Powerfully simple tools at your disposal
Интересный сервис веб-аналитики с расширенными возможностями. Позволяет записывать последовательность действий на странице, выдает тепловые карты, воронки прокрутки страницы, анализировать формы и разные области страницы, а также сегментировать все это.
Как Chartbeat улучшает медиасайты
Как АиФ работает с сервисом Chartbeat для повышения продуктовых показателей. Он отслеживает вовлеченность пользователей как дополнение к традиционным метрикам вроде глубины просмотра.
Мнение Яны Москвиной: На всякий случай: на Chartbeat реально отдельного человека надо сажать — слишком много инфы он обновляет в реалтайме, и от ежесекундного мигания экрана голова болит. Если хочется бесплатный вариант попробовать, и без ряби в глазах, то можно использовать отчет Realtime в Google Analytics и Вебвизор Яндекс.Метрики.
Если говорить в целом, то вместо просвещения сайт СМИ может быстро скатиться в шоу для пользователей — показывать всем только самое кликабельное. Задача про «обвязку» страниц хорошая, трафигенерящая. Но реально с умом подходить надо.
An introduction to user research techniques
Справочник по пользовательским исследованиям от GOV.UK. В продолжение темы:
Recruiting User Research Participants by Email
Jim Ross о том, как находить пользователей для исследований с помощью электронной почты. В статье описан сценарий и подводные камни.
A Guide To Conducting A Mobile UX Diagnostic
Lyndon Cerejo о вариации метода экспертной оценки, более формализованной и заточенной на сценарии.
How To Run User Tests At A Conference
Отличная методичка по проведению пользовательских исследований на конференциях от Daniel Suable. Вначале много воды, но вторая половина по делу. В продолжение темы:
Refining Your Mobile Onboarding Experience Using Visual Analytics
Alon Even из команды сервиса мобильной аналитики AppSee о том, как отслеживать эффективность onboarding на мобильных. В первой половине достаточно дефолтная категоризация подходов, по теме начинается позже.
Визуальное программирование
Tumult Hype Pro 3
Еще один современный инструмент для дизайнеров, третья версия Hype Pro. Обещают интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.
The Art of UI Animations
Воркшоп с Mark Geyer про анимации в интерфейсе. Довольно интерсный формат подачи, запускается в браузере. Сам воркшоп весьма познавателен. Mark Geyer работает в отделе исследований и разработки компании Salesforce.
Blocs
Еще один инструмент для визуального создания сайтов. Это приложение для Mac от Norm Sheeran, являющееся по сути умной обвязкой над Bootstrap. Небольшой скринкаст и видео работы.
Form is Joining Google
Google купил Form, Origami-подобный инструмент для интерактивного прототипирования. Из очевидных преимуществ – возможность взаимодействовать с прототипом на устройстве на лету, так же, как при помощи Sketch Mirror.
Новые скрипты
- Еще одна библиотека для анимирования SVG.
- Демонстрационный скрипт Draggabilly. Интересные идеи по реализации взаимодействия drag'n'drop.
- Скрипт, позволяющий показывать картинку в состоянии до и после.
- Скрипт, который позволяет делать зависимый от времени суток long shadow.
Designers Code Differently
Meng To о кодирующих дизайнерах и их отличиях от разработчиков.
Styling And Animating SVGs With CSS
Развернутое руководство Sara Soueidan по стилизации и анимации SVG с помощью CSS. В продолжение темы:
- Книга Joni Trythall "Pocket Guide to Writing SVG".
Метрики и ROI
5-Steps For Getting Started Measuring The Customer Experience
Советы Jeff Sauro по обсчету CX с учетом важности функций продукта.
Управление интерфейсными проектами, процессами и командами
About Face 4: Chapter 6: Creative Teamwork
UXMatters публикует шестую главу из четвертого издания книги About Face. В продолжение темы:
Beyond the UX Tipping Point
Jared Spool о переломном моменте принятия UX в организациях. Оно становится необратимым, когда компания больше не соглашается идти на компромиссы относительно пользовательских впечатлений. Теперь технологии начинают подстраиваться под требуемые впечатления, а не наоборот. Джаред перефразирует уровни UX зрелости компаний:
- Тёмные века UX;
- Случайные инвестиции и проекты;
- UX начинает включаться в команды. После этого этапа может наступить тот самый переломный момент невозврата, когда компания переходит на следующий этап.
- Интеграция UX и услуг.
Zeplin — Collaboration app for UI designers & frontend developers
Десктопное приложение Zeplin для совместной работы дизайнеров и разработчиков. Подключается к Sketch и скоро сможет к Фотошопу, облегчает передачу спецификаций. Группа в Фейсбуке.
Gibbon — Peer-to-peer learning for your organization
Интересный сервис для организации обмена знаниями внутри компании и команды, а также быстрого включения в рабочий процесс новичков.
Hanno Playbook
Отличная подробная методичка по работе над дизайн-проектом от студии Hanno. Меньше про конкретные методики, больше про общий процесс и выстраивание отношений с клиентом. Анонс ее запуска.
Wake — Open Your Design Process
Сервис Wake для командной работы над макетами и мудбордами. Позволяет загружать и обсуждать свой дизайн и собирать коллекцию примеров.
Where to find great UX candidates
Irene Au о том, где найти кандидатов на UX-должности. Написано для США, но частично актуально и для нашего рынка.
Продуктовый менеджмент и аналитика
5 Mistakes We All Make with Product Feedback
Des Traynor пишет в блоге Intercom о 5 ошибках, которых следует избегать при работе с отзывами пользователей о вашем продукте. Его советы: разделять пользователей на группы; постоянно собирать отзывы; разделять платящих и бесплатных пользователей; не следовать мнению «громкого меньшинства»; перепроверять требования пользователей, стараясь определить их мотивы. В продолжение темы:
- Выступление Des Traynor о продуктовой стратегии. Почему продукт должен напоминать скальпель, а не швейцарский армейский нож.
Data-Informed Design: Three Data Stories
Pamela Pavliscak начинает серию публикаций о работе с данными аналитики при проектировании интерфейсов. Первая из них посвящена задачам, которые помогают решать такие данные — убедить кого-то, улучшить что-то, исследовать.
Методологии, процедуры, стандарты
Ведомственный приказ «Об утверждении профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов»»
Текст профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов» ушел на согласование министру.
Кейсы
Building SoundCloud
Интереснейший рассказ Michael Nino Evensen о том, как было переделано iPhone-приложение SoundCloud, одно из самых интересных в этом году. Очень подробно и с кучей деталей.
Новые кейсы дизайна и редизайна
Современные редакционные CMS
4 Things HealthCare.Gov 2.0 Gets Right (And 5 Things It Still Gets Wrong)
Дизайнеры обсуждают вторую версию портала HealthCare.gov, запуск которого в прошлом году сопровождался уймой юзабилити- и технических проблем.
История
The Evolution of the Title Bar Buttons
Karla Urbina изучает эволюцию привычных теперь кнопок закрытия, минимизации и максимизации окна приложения в десктопных ОС. Интересно, что во многих случаях все начиналось с иконки бургера. В продолжение темы:
Краткая история контент-стратегии
Перевод на русский язык истории дисциплины контент-стратегии, интерес к которой активно растет в последние годы. Впервые заговорили о ней в 1997-1998, а в 2009 году произошел взрыв интереса.
Тренды
IBM Design
В ближайшие недели IBM представит свой язык дизайна, который обещает стать одним из самых масштабных среди крупных компаний на уровне BBC GEL и Material Design. Он появится на сайте IBM Design. Пока там общая информация об инициативах компании, но в недавнем выступлении Phil Gilbert (руководитель дизайна корпорации) достаточно подробно рассказал об этих гайдлайнах (конкретика начинается во второй половине).
Язык дизайна IBM будет описывать общие принципы, визуальные и интерфейсные гайдлайны, методики и инструменты работы. В частности, они предложили свою вариацию дизайн-мышления, более прагматичную и применимую в реальной жизни. Судя по показанным наброскам реальных продуктов, на жизнь корпорации это ложится очень здорово.
Компании уже больше ста лет и за это время она несколько раз смогла переизобрести себя и выходить из тяжелых кризисов. К дизайну они подошли также системно, как и ко всему остальному — стратегия его внедрения в жизнь компании впечатляет, как и масштабы (штат дизайнеров должен дойти до 1000 человек). За анонсами можно следить в Твиттере команды.
HP Sprout is a Bold Attempt to Reimagine the Desktop PC
На прошлой неделе HP показала безбашенный концепт нового подхода к взаимодействию с десктопным компьютером для дизайнеров Sprout. Вместо клавиатуры у него проецируемая тач-поверхность, которая вместе с 3D-камерой меняет привычный формат работы. Причем это уже рабочий продукт, который можно будет купить за $1899. Авторы других известных концептов дают свою оценку.
Checkout/login designers, this is your new bar: ONE tap/NO forms
Радикальное упрощение процесса оформления заказа на мобильных, возможное при широком распространении сканеров отпечатков пальцев.
The End of Apps as We Know Them
Paul Adams предсказывает, что приложения будут использоваться всё меньше. Пользователи будут все больше взаимодействовать с потоками интерактивных карточек с контентом либо уведомлениями от приложений, чем с самими приложениями. Позже он дал пояснения к статье.
Designing to Co-Designing to Collective Dreaming — Three Slices in Time
Liz Sanders и Pieter Stappers разбирают историю форматов совместной работы дизайнеров, исследователей, разработчиков и пользователей и пророчат активное развитие практик ко-дизайна сейчас и в будущем. Многие компании приходят к подобным мыслям.
Physical Web — Walk up and use anything
Инициатива Google Physical Web, направленная на стандартизацию с тем, чтобы не пришлось иметь приложение для каждого бытового прибора.
Web Apps
Lukas Mathis о гибридных приложениях и общих трендах мобильной разработки.
Профессиональное развитие
Фоновые исследования. Как много читать, знать и не офигевать (презентация Юрия Ветрова)
Моя презентация о подходе фоновых исследований с конференции World Usability Day 2014. О том, как много читать, знать и не офигевать. Сложность современных продуктов все растет, а формат работы современных продуктовых команд становится более динамичным. От нас ждут достаточно высокого уровня профессиональной эрудиции, который набрать бывает непросто, а поддерживать — и того сложнее.
Я плотно работаю с информацией по профессии и структурирую понимание по ее областям, с которыми работаю или наверняка поработаю в будущем. Изначально тратил на это уйму времени, но постепенно научился справляться с этим адовым потоком, так что теперь уходит час-полтора в день. В презентации рассказал, почему считаю это важным, как устроены информационные потоки и как это выручает меня на практике. Там ОЧЕНЬ много ссылок на всевозможные подборки и списки. Какие-то уже полные, какие-то еще только собираются.
7 Rules for Creating Gorgeous UI
7 правил создания красивых интерфейсов для не-дизайнеров от Erik D. Kennedy. Очень доступным языком и с хорошими примерами, хотя и местами несистемно. Вторая часть статьи.
Time with Users: Set Personal and Company Goals
Jakob Nielsen описывает нормы ГТО по работе с пользователями для всех участников продуктовой команды. В статье занятная табличка важности регулярного участия в исследованиях для разных специалистов.
Онлайн-курс «Визуализация. Основы»
Стали доступны первые лекции бесплатного онлайн-курса Тани Бибиковой (Мисютиной) по основам визуализации данных.
Книга Scott Jehl «Responsible Responsive Design»
В продолжение «цветной серии» A Book Apart вышла книга Scott Jehl «Responsible Responsive Design». Рассмотрены многие аспекты проектирования и дизайна при поддержке адаптивности для мобильных и веб-версий продукта.
User Experience Salaries & Calculator (2014)
Jeff Sauro обработал результаты опроса о зарплатах в UX, проведенного UXPA. Основными факторами являются занимаемая должность и географическое положение работы. Также можно поэкспериментировать с зарплатным калькулятром. В продолжение темы:
9 basic principles of responsive web design
Дизайнеры сервиса Froont подготовили наглядный обзор принципов адаптивного дизайна в виде 9 анимаций. Перевод на русский.
Люди и компании в отрасли
AMA: I'm Julie Zhuo, director of product design @ Facebook
Сессия вопросов и ответов с главой продуктового дизайна Facebook Julie Zhuo на Designer News. Перевод отдельных вопросов на русский. Другие сессии AMA:
Покупки дизайн-студий крупными компаниями
- EPAM Systems приобрела компанию Great Fridays. Она как раз специализировалась на проектировании и стратегии создания продуктов для людей. Одна из немногих с хорошим портфолио в отрытом доступе.
Материалы конференций
Google FORM 2014
Видео выступлений с конференции Google Form 2014, которая проходила 4-5 ноября в Сан-Франциско, США. Она была посвящена связке дизайна и технологий и включала мощный состав спикеров из модных интернет-сервисов. Несколько интересных выступлений:
- Секция создателей всех современных инструментов прототипирования.
- Интервью с Матиасом Дуарте.
- Секция визуального сторителлинга.
- Дизайн-образование.
- Дизайн в стартапах.
Видео-отчет с семинара Виталия Фридмана в Mail.Ru Group
14-15 ноября Vitaly Friedman делал расширенный мастер-класс в офисе Mail.Ru Group, в котором подробно рассказал о многих из техник оптимизации производительности адаптивного сайта. Наши коллеги опубликовали видео-запись лекции, предваряющей тренинг. Там не все 8 часов, но много интересного.
UX Immersion 2014
Видео выступлений с конференции UX Immersion 2014, которая проходила 7-9 апреля в Денвере, США. Несколько интересных выступлений:
- Jared Spool о том, как дизайнить дизайнеров.
- Nate Schutta о том, когда следует разрабатывать мобильное веб приложение, нативное приложение, либо гибридное.
- Cyd Harrell о «карманных исследованиях».
Midwest UX 2014
Видео выступлений с конференции Midwest UX 2014, которая проходила 23-25 октября в Индианаполисе, США. Выступающие, на которых стоит обратить внимание: Stephen Andeson, Jared Spool, Peter Morville, Mark Rolston, Jon Kolko, Steven Hoober.
UX in Japan (выступление Takumi Yoshida)
Доклад Takumi Yoshida с ORIENT Uxpress. Много и интересно про различие в проектировании продуктов для восточного и западного рынков, с реальными примерами на продуктах Sony / Nokia и пр. Рассмотрены культурные и кросс-национальные различия в построениях ментальных моделей взаимодействия, восприятии паттернов. В продолжение темы:
- Еще один доклад с ORIENT UXpress. Если Takumi Yoshida рассказывал об особенностях японского дизайна, то Seung Jun Jeong — о специфике дизайна в Южной Корее.
- 2 подкаста от Бегемот-Бегемот. В частности, рассказывается про особенности азиатских интерфейсов мобильных приложений и различиях между Китаем, Японией и Кореей. А здесь текстовая выжимка из интересного в них.
ConveyUX 2014
Видео выступлений с конференции ConveyUX 2014, которая проходила 5-7 февраля в Сиэтле, США.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному и Антону Артемову. Все больше материалов в обзорах появляется благодаря им.
Автор: jvetrau
