Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-ноябрь 2015.
![Дайджест продуктового дизайна, декабрь 2015](https://habrastorage.org/getpro/habr/post_images/d79/93d/8af/d7993d8af48ce5ca1557942963060d7a.png)
I Analyzed 250 SaaS Pricing Pages — Here’s What I Found
Benjamin Brandall прошелся по страницам тарифов 250 облачных сервисов и выписал основные подходы к их созданию. Особенность продаж крупному бизнесу — это личные переговоры по условиям, поэтому многие вообще не указывают цену на сайте.
![I Analyzed 250 SaaS Pricing Pages — Here’s What I Found](https://habrastorage.org/getpro/habr/post_images/022/a85/9dd/022a859dd3c20d97e6b3d6e6427c9209.png)
GoodUI Evidence
Авторы проекта GoodUI добавили отличный дашборд с примерами от читателей, показывающий насколько помогли конкретные техники повышения конверсии. Это простые примеры и описания, работающие еще и как набор эвристик, а теперь еще и с подтверждением эффективности.
![Good UI Evidence](https://habrastorage.org/getpro/habr/post_images/e1d/7fd/038/e1d7fd038663590f5d67ee78cdfa71e4.png)
«Touch Keyboard» Implementations Have Improved Just 9% Since 2013 (60% Still Get it Wrong)
Baymard Institute актуализировали своё большое исследования мобильных интернет-магазинов, посвященное методам ввода. Она описывает идеальное поведение клавиатуры телефона в зависимости от вводимых данных. Прогресс за два года крайне незначительный — суммарное улучшение юзабилити на 9%.
![«Touch Keyboard» Implementations Have Improved Just 9% Since 2013 (60% Still Get it Wrong)](https://habrastorage.org/getpro/habr/post_images/8e5/fd9/fe6/8e5fd9fe65612dacc8fbd938d566035f.png)
Еще немного свежего от Baymard:
Письма рассылки
![Zurb Foundation for Emails](https://habrastorage.org/getpro/habr/post_images/f83/320/7ec/f833207eccbe246845e36faed8efb698.jpg)
Оформление ссылок
![Learn More Links](https://habrastorage.org/getpro/habr/post_images/b27/407/b0c/b27407b0cd7be4f0671eecd942520628.png)
Иконка бургера
![Beer Menu](https://habrastorage.org/getpro/habr/post_images/bd1/4f9/949/bd14f99492b8377ce91ccb3237e16e68.gif)
BBC GEL
![BBC GEL 2.0](https://habrastorage.org/getpro/habr/post_images/18f/e9a/bab/18fe9abab4dd00135a42c9d0a00f630f.png)
Apple iOS 9
![Regular and Compact iOS display size breakdown for designers](https://habrastorage.org/getpro/habr/post_images/f60/60e/c85/f6060ec85c152bd8a9a9c580cc721a4c.png)
Material Design
Шаблоны Android-телефонов
![Huawei P8](https://habrastorage.org/getpro/habr/post_images/e9d/ccb/3b1/e9dccb3b1eb9c0e2d68aa566f18232dc.png)
Apple Watch
Принципы дизайна
Единый язык анимации
![Animating Your Brand](https://habrastorage.org/getpro/habr/post_images/0fa/71a/6e0/0fa71a6e077cd7d72c37cc597bf642ae.png)
Дизайн государственных систем
AIC, Лаборатория Артема Геллера и SmartTeleMax положили начало открытой и планомерной работе над радикальным улучшением представления государства и государственных сервисов в сети. В блоге уже несколько публикаций с полезными шаблонами.
![Дизайн государственных систем](https://habrastorage.org/getpro/habr/post_images/433/390/e61/433390e610cdc23bed0ff8880eef3a65.png)
Large-Scale Image Memorability
Интересное исследование MIT о том, что значит хорошая, запоминающаяся иллюстрация. Они дают инструмент и API для проверки картинок на запоминаемость. Небольшой обзор.
![Large-scale Image Memorability](https://habrastorage.org/getpro/habr/post_images/491/6e5/337/4916e533741248e982310aec80e0101d.gif)
U mad bro? Researchers measure emotion with your mouse clicks
Интересное исследование — Brigham Young University изучили перемещение курсора мыши и клики, для того чтобы определять эмоции пользователя. Выяснили, что люди в разозленном состоянии делают все менее точно.
![U mad bro? Researchers measure emotion with your mouse clicks](https://habrastorage.org/getpro/habr/post_images/3f6/b4d/ab9/3f6b4dab9d4e997cb0ea26a19793fbc6.jpg)
Скорость работы интерфейсов
![Why Performance Matters, Part 3 — Tolerance Management](https://habrastorage.org/getpro/habr/post_images/cc9/dce/bb3/cc9dcebb330525b1bd38c1350c1ab3ee.png)
Micro-moments — Are you designing for them?
Muriel Garreta Domingo о том, как использовать идею микро-моментов от Google на практике. В статье есть интереснейшая отсылка на исследование одного из ресторанов, который сравнил записи камер наблюдения 2004 и 2014 года — телефоны затягивают процесс в два раза.
![Micro-moments — Are you designing for them?](https://habrastorage.org/getpro/habr/post_images/9cc/ecb/14f/9ccecb14f0972a6db6624b3379dced68.jpg)
How to Train Your Human — Designing for Healthier Habits
Еще один толковый материал на тему модели вовлеченности пользователя Nir Eyal.
![How to Train Your Human — Designing for Healthier Habits](https://habrastorage.org/getpro/habr/post_images/c1d/ca9/fb6/c1dca9fb61b3f1ab0da2865624453283.png)
Jobs-to-be-Done
Дизайн для детей
Avi Parush — Conceptual Design for Interactive Systems, 1st Edition
Вышла книга Avi Parush «Conceptual Design for Interactive Systems», посвященная концептуальным моделям в проектировании интерфейсов и вообще высокоуровневому проектированию. UXMatters публикует главу № 9 из нее.
Adobe CC 2015
![Adobe CC 2015.2](https://habrastorage.org/getpro/habr/post_images/32a/2b3/ef4/32a2b3ef4bebdb7cb2c69f1aa55e1dc5.png)
Figma — The collaborative interface design tool
Один из самых интересных инструментов прототипирования, появившихся за последнее время. Это Google Docs для дизайнеров — несколько человек могут работать над интерфейсом одновременно. Небольшой анонс от авторов. Еще немного о нем:
Adobe Comet
![Adobe Comet Beta](https://habrastorage.org/getpro/habr/post_images/d42/852/d78/d42852d783d03b3c761d95ace74ea659.jpg)
Koncept — Usability testing on real users & High-fidelity application prototypes
Новый инструмент Koncept пробует совместить возможности прототипирования и юзабилити-тестирования из коробки. Про то, что происходит с прототипом после создания, много говорилось на панельной дискуссии конференции Google SPAN — это одно из главных направлений развития.
![Koncept — Usability testing on real users & High-fidelity application prototypes](https://habrastorage.org/getpro/habr/post_images/b97/ff6/e26/b97ff6e266853544e9e178485a5d5ce7.png)
Tumult Hype Pro
Pixate
![Pixate Studio 2.0](https://habrastorage.org/getpro/habr/post_images/431/8ea/307/4318ea307e1671dc786a649dad525262.png)
Marvel
![Introducing Canvas – Design, Wireframe and Animate directly in Marvel!](https://habrastorage.org/getpro/habr/post_images/2d6/03a/a4c/2d603aa4c10c04fa1dceca6960b52b06.png)
Sketch
UXPin
![UX Pin Update](https://habrastorage.org/getpro/habr/post_images/51e/930/644/51e930644ae1928715edbc84605e13cc.png)
Генераторы аватаров и имен
Обзоры и сравнения инструментов прототипирования
![Selecting the optimal prototyping tool](https://habrastorage.org/getpro/habr/post_images/d02/40e/1a0/d0240e1a0f90b0b8a019402edfa54247.png)
Atomic
Holding Off on High Fidelity
Памятка команды Salesforce по постепенному повышению степени проработки дизайна от скетчей к интерактивным прототипам.
![Holding Off on High Fidelity](https://habrastorage.org/getpro/habr/post_images/7b5/52f/905/7b552f905d252c6756885afeabb6ece8.jpg)
Инструменты паблишинга
![Формы приема данных](https://habrastorage.org/getpro/habr/post_images/082/d15/b56/082d15b569338b81503a40941b901a86.jpg)
Flawless App
Uncovering user goals with the Episodic Interview
Памятка David Travis из UserFocus по проведению пользовательских интервью вне реального контекста респондентов.
Экспертная оценка
Apps Force
Еще один сервис удаленного юзабилити-тестирования. Веб, мобильный веб, приложения.
![Apps Force](https://habrastorage.org/getpro/habr/post_images/055/519/a17/055519a170769e3a9c2d3d1722f42ab9.png)
A Guide To Simple And Painless Mobile User Testing
Небольшая инструкция от Colman Walsh по мобильному тестированию при помощи Reflector.
Can You Code This UI Concept?
В последнее время все чаще концепты с Dribbble и Behance превращаются в реальные скрипты на CodePen и других ресурсах с примерами кода. Блог MaterialUp собрал пять таких штук. Аналогичные примеры:
See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.
Animation in Responsive Design
Val Head поднимает еще один важный вопрос про анимацию в вебе — ее работу в адаптивном дизайне. Она описывает два основных подхода — пересмотр логики работы анимации для разных контекстов и перестановка блоков с новыми триггерами.
![Animation in Responsive Design](https://habrastorage.org/getpro/habr/post_images/205/6d9/894/2056d989416b94c31d067c16e3ed0afb.png)
Живые гайдлайны и компонентные системы
Новые скрипты
Form
![Form 1.4](https://habrastorage.org/getpro/habr/post_images/06e/081/12c/06e08112c887bf04f48fbcade70fcc9f.png)
Framer
Webflow
![Webflow 3D Transforms](https://habrastorage.org/getpro/habr/post_images/5fa/019/afa/5fa019afa3f8f9f91909e9717429b479.png)
Веб-типографика
Работа с цветом
Работа с SVG
Сетки
Flexbox
The Unluckiest Paragraphs
Nick Santos из команды Medium о том, как блокировщики рекламы могут по ошибке вырезать куски интерфейса. Он делится опытом по поводу того, как избегать проблем.
Иконочные шрифты
An Introduction To PostCSS
Рассказ Drew Minns о PostCSS, альтернативе пре-процессорам для расширения возможностей базового CSS с помощью JavaScript.
Jamie Levy — UX Strategy
O’Reilly выпустили книгу Jamie Levy «UX Strategy — How to Devise Innovative Digital Products that People Want». UXMatters публикует кусок второй главы. В декабре также вышла «Design Leadership» от Richard Banfield.
How mature is your omni-channel content strategy?
Peter Bogaards предлагает модель зрелости для контент-стратегии. Отличный системный подход, позволяющий оценить текущую ситуацию и спланировать развитие.
![How mature is your omni-channel content strategy?](https://habrastorage.org/getpro/habr/post_images/305/ad4/3e1/305ad43e11583f6f69554dc8b2958f83.png)
Построение дизайн-культуры
Getting Back Into The (Right) Deliverables Business
Rian van der Merwe пишет о том, что маятник всеобщего отказа от документации и проектных артефактов должен качнуться в обратную сторону — вместо сокращения действительно избыточных спецификаций многие и вовсе прекратили предпроектную работу. Он предлагает два документа, которые позволяют соблюдать баланс — расширенные customer journey maps и структура контента.
![Getting Back Into The (Right) Deliverables Business](https://habrastorage.org/getpro/habr/post_images/039/ab6/9ab/039ab69aba599c1ad25068478a80418d.jpg)
The Next Feature Fallacy (or, the case for simple, working systems)
Joshua Porter рассказывает о проблеме ложного ожидания новой «функции, которая спасет продукт». Вместо того чтобы обратить внимание на проблемы в ключевых механиках работы сервиса, менеджеры продукта и дизайнеры верят в спасительную силу «вот этой вот недостающей возможности». Он советует концентрироваться на простых работающих системах (чуть подробнее о том, что он под этим понимает).
![The Next Feature Fallacy (or, the case for simple, working systems)](https://habrastorage.org/getpro/habr/post_images/5b7/f95/a9c/5b7f95a9c8e3373cee96cea3e4b4f468.jpg)
Дорожные карты
Intercom on Customer Support book
Третья книга команды Intercom, посвященная поддержке пользователей.
![Intercom on Customer Support book](https://habrastorage.org/getpro/habr/post_images/fd0/877/5d0/fd08775d0488d969bb50c8eed0f9cff9.png)
Специалист по дизайну графических и пользовательских интерфейсов
Утвержден профессиональный стандарт «Специалист по дизайну графических и пользовательских интерфейсов». Наша профессия стала намного взрослее.
![Специалист по дизайну графических и пользовательских интерфейсов](https://habrastorage.org/getpro/habr/post_images/367/e60/ada/367e60ada3e13e7bbd1c1ba0404b424b.png)
Анонс говорит:
Кейсы редизайна
![How Microsoft Created A New Xbox Experience](https://habrastorage.org/getpro/habr/post_images/c05/6c0/44f/c056c044fc7662123987fb27461c4856.gif)
Prototyping Secret Hitler
Рассказ Max Temkin о работе над карточной игрой Secret Hitler. Она не совсем по теме блога, но в ней собрана интереснейшая подборка прототипов многих известных карточных игр — очень полезно.
![Prototyping Secret Hitler](https://habrastorage.org/getpro/habr/post_images/523/d5f/79f/523d5f79f280fb049bc1f0820ac5c304.jpg)
oldweb.today
Эмулятор винтажного интернета, позволяющий увидеть архивные сайты в ретро-браузерах. Правда, серверные мощности у них слабые, работает с задержками.
![oldweb.today](https://habrastorage.org/getpro/habr/post_images/9ce/439/564/9ce43956437fec2c65eaf143093e5bfd.png)
Рассказы о старых сайтах:
Proceed to Checkout: The Unexpected Story of How Ecommerce Started
Shopify сняли видео, рассказывающее об истории появления электронной коммерции. Основных варианта два и оба из 1994 года — Pizza Hut и сайт NetMarket, продавший компакт-диск Стинга. Статья Fast Company с материалом в текстовом виде.
История Ralph Baer
Тренды 2016 года
Кураторы сайта uxdesign.cc проанализировали все ссылки, опубликованные за год, и составили прогноз на 2016. Очень грамотный и взвешенный материал, и что самое приятное — от людей, которые действительно разбираются в интерфейсах, а не только визуале. Другие прогнозы:
Why The Great App Unbundling Trend Is Already In Trouble
Fast Company пишет о том, что тренд отпочковывания не особо взлетел. Недавно закрылись Carousel и Mailbox от Dropbox, а также экспериментальные приложения Фейсбука. При этом дико популярным оказался новый мобильный Outlook, представляющий из себя тот самый классический лютый универсальный комбайн. Хотя речь идет скорее о бездумном клепании сателлитов — тому же Foursquare это пошло на пользу, хорошо идет и Facebook Messenger.
![Why The Great App Unbundling Trend Is Already In Trouble](https://habrastorage.org/getpro/habr/post_images/e32/850/2c3/e328502c3f16bd2e109b2762561e315e.jpg)
Вдогонку — толковые мысли Sebastien Gabriel о закрытии Mailbox, Carousel, Rooms и других приложений, которые считались хорошим примером качественного дизайна. Это отрезвляет тех, кто считает, что качественного UX достаточно для успеха продукта (та же история была с Path) — это важная, но не ключевая часть.
Microsoft Future Visions
Microsoft запустил мини-сайт Future Visions, посвященный видению будущего. Это серия рассказов от фантастов, размышляющих о будущем технологий. Они взяли за основу наработки исследовательской лаборатории Microsoft и пофантазировали на их тему. При этом забавно, что многие из этих технологий сами вдохновлялись научной фантастикой. Обзор основных тем.
![Microsoft Future Visions](https://habrastorage.org/getpro/habr/post_images/b0c/972/64c/b0c97264c74493cd2c435f4dabf2d4f5.jpg)
The New Story Of Computing: Invisible And Smarter Than You
Еще один термин в дополнение к «NoUI», «anticipatory computing» и «Zero UI» — Cognitive Computing. Суть примерно похожая — меньше ручного управления, больше перекладывания всего на плечи компьютеров.
![The New Story Of Computing: Invisible And Smarter Than You](https://habrastorage.org/getpro/habr/post_images/68d/be7/cb4/68dbe7cb4e9e0416b4dee449959ba5d5.jpg)
Тренды в СМИ
![Traditional Homepages Are Obsolete, Says Quartz. Here's What They Built Instead](https://habrastorage.org/getpro/habr/post_images/232/993/ecd/232993ecd280bad943e41c3fd223529a.jpg)
Автомобильные интерфейсы
![Why Detroit Needs User-Centered Design](https://habrastorage.org/getpro/habr/post_images/707/073/b62/707073b6279dae5222eaeb0907b5dbf7.jpg)
Умные часы и браслеты
![Smartwatch Design](https://habrastorage.org/getpro/habr/post_images/f32/5fb/af1/f325fbaf167b19117cbac7d3f43f4fb3.png)
Виртуальная реальность
![A-Frame](https://habrastorage.org/getpro/habr/post_images/fc3/b04/eb1/fc3b04eb13a66db84ff77980f9753a2c.png)
Интерфейсы в кино
Microsoft HoloLens
Бюллетень «Эргономист» № 43 (декабрь 2015)
В номере: статьи о доступности метро для маломобильных пассажиров, об эргономических мероприятиях 2015 года, о Владимире Михайловиче Мунипове и его вкладе в эргономику, новости, аннотации публикаций на эргономическую тематику, удачный опыт и эргономические диверсии и многое другое.
Tilda Education
![Психофизиология пользовательских интерфейсов](https://habrastorage.org/getpro/habr/post_images/d83/623/d02/d83623d022f31f1adab28d53f059b134.png)
Продуктовые дизайнеры
Designing Women
Серия интервью Fast Co Design с женщинами в дизайне. Вышло уже 4 материала про дизайн-лидеров.
![Designing Women](https://habrastorage.org/getpro/habr/post_images/130/80c/6be/13080c6be2bfd1102183494c2b17fa35.png)
Дизайнеры в венчурных фондах
Иван Пупырев
![«Это технологический вызов»: Как русский дизайнер придумывает умную ткань Googlе](https://habrastorage.org/getpro/habr/post_images/c7c/03d/287/c7c03d287982713b9066f03d04950c64.jpg)
Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Подписывайтесь на рассылку! Письмо приходит один раз в месяц.
![Дайджест продуктового дизайна, декабрь 2015](https://habrastorage.org/getpro/habr/post_images/d79/93d/8af/d7993d8af48ce5ca1557942963060d7a.png)
Паттерны и Best Practices
I Analyzed 250 SaaS Pricing Pages — Here’s What I Found
Benjamin Brandall прошелся по страницам тарифов 250 облачных сервисов и выписал основные подходы к их созданию. Особенность продаж крупному бизнесу — это личные переговоры по условиям, поэтому многие вообще не указывают цену на сайте.
![I Analyzed 250 SaaS Pricing Pages — Here’s What I Found](https://habrastorage.org/getpro/habr/post_images/022/a85/9dd/022a859dd3c20d97e6b3d6e6427c9209.png)
GoodUI Evidence
Авторы проекта GoodUI добавили отличный дашборд с примерами от читателей, показывающий насколько помогли конкретные техники повышения конверсии. Это простые примеры и описания, работающие еще и как набор эвристик, а теперь еще и с подтверждением эффективности.
![Good UI Evidence](https://habrastorage.org/getpro/habr/post_images/e1d/7fd/038/e1d7fd038663590f5d67ee78cdfa71e4.png)
«Touch Keyboard» Implementations Have Improved Just 9% Since 2013 (60% Still Get it Wrong)
Baymard Institute актуализировали своё большое исследования мобильных интернет-магазинов, посвященное методам ввода. Она описывает идеальное поведение клавиатуры телефона в зависимости от вводимых данных. Прогресс за два года крайне незначительный — суммарное улучшение юзабилити на 9%.
![«Touch Keyboard» Implementations Have Improved Just 9% Since 2013 (60% Still Get it Wrong)](https://habrastorage.org/getpro/habr/post_images/8e5/fd9/fe6/8e5fd9fe65612dacc8fbd938d566035f.png)
Еще немного свежего от Baymard:
- В дополнение к этому они запустили шпаргалку по полям ввода на мобильных, включающую примеры кода.
- Исследование интерфейсов оформления заказа на мобильных.
Письма рассылки
- Zurb скоро запустит вторую версию своего фреймворка Foundation for Email. Ранее он назывался Ink.
- Lauren Smith разбирает десять важных изменений на рынке почтовых клиентов и их влияние на дизайнеров почтовых рассылок.
![Zurb Foundation for Emails](https://habrastorage.org/getpro/habr/post_images/f83/320/7ec/f833207eccbe246845e36faed8efb698.jpg)
Оформление ссылок
![Learn More Links](https://habrastorage.org/getpro/habr/post_images/b27/407/b0c/b27407b0cd7be4f0671eecd942520628.png)
Иконка бургера
![Beer Menu](https://habrastorage.org/getpro/habr/post_images/bd1/4f9/949/bd14f99492b8377ce91ccb3237e16e68.gif)
Гайдлайны платформ и компаний
BBC GEL
![BBC GEL 2.0](https://habrastorage.org/getpro/habr/post_images/18f/e9a/bab/18fe9abab4dd00135a42c9d0a00f630f.png)
Apple iOS 9
- Luke Wroblewski наглядно показал, насколько сложнее стал процесс первоначальной настройки iPhone.
- Tyler Howarth из команды Medium собрал шпаргалку по размерам областей для отображения интерфейсов на iPhone и iPad — полноэкранные и в рамках панелей многозадачности.
- Шаблоны iPhone 6 для Photoshop.
![Regular and Compact iOS display size breakdown for designers](https://habrastorage.org/getpro/habr/post_images/f60/60e/c85/f6060ec85c152bd8a9a9c580cc721a4c.png)
Material Design
Шаблоны Android-телефонов
![Huawei P8](https://habrastorage.org/getpro/habr/post_images/e9d/ccb/3b1/e9dccb3b1eb9c0e2d68aa566f18232dc.png)
Apple Watch
Принципы дизайна
Единый язык анимации
- Статья Donovan Hutchinson на тему описания языка анимации и гайдлайнов для нее. Объясняет необходимость и предлагает свою категоризацию.
![Animating Your Brand](https://habrastorage.org/getpro/habr/post_images/0fa/71a/6e0/0fa71a6e077cd7d72c37cc597bf642ae.png)
Дизайн государственных систем
AIC, Лаборатория Артема Геллера и SmartTeleMax положили начало открытой и планомерной работе над радикальным улучшением представления государства и государственных сервисов в сети. В блоге уже несколько публикаций с полезными шаблонами.
![Дизайн государственных систем](https://habrastorage.org/getpro/habr/post_images/433/390/e61/433390e610cdc23bed0ff8880eef3a65.png)
Понимание пользователя
Large-Scale Image Memorability
Интересное исследование MIT о том, что значит хорошая, запоминающаяся иллюстрация. Они дают инструмент и API для проверки картинок на запоминаемость. Небольшой обзор.
![Large-scale Image Memorability](https://habrastorage.org/getpro/habr/post_images/491/6e5/337/4916e533741248e982310aec80e0101d.gif)
U mad bro? Researchers measure emotion with your mouse clicks
Интересное исследование — Brigham Young University изучили перемещение курсора мыши и клики, для того чтобы определять эмоции пользователя. Выяснили, что люди в разозленном состоянии делают все менее точно.
![U mad bro? Researchers measure emotion with your mouse clicks](https://habrastorage.org/getpro/habr/post_images/3f6/b4d/ab9/3f6b4dab9d4e997cb0ea26a19793fbc6.jpg)
Скорость работы интерфейсов
- Третья часть статьи Дениса Мишунова о скорости работы интерфейсов. Он приводит 10 принципов из психологии, влияющих на восприятие времени, и дает советы по обработке каждого из них в интерфейсе.
![Why Performance Matters, Part 3 — Tolerance Management](https://habrastorage.org/getpro/habr/post_images/cc9/dce/bb3/cc9dcebb330525b1bd38c1350c1ab3ee.png)
Micro-moments — Are you designing for them?
Muriel Garreta Domingo о том, как использовать идею микро-моментов от Google на практике. В статье есть интереснейшая отсылка на исследование одного из ресторанов, который сравнил записи камер наблюдения 2004 и 2014 года — телефоны затягивают процесс в два раза.
![Micro-moments — Are you designing for them?](https://habrastorage.org/getpro/habr/post_images/9cc/ecb/14f/9ccecb14f0972a6db6624b3379dced68.jpg)
How to Train Your Human — Designing for Healthier Habits
Еще один толковый материал на тему модели вовлеченности пользователя Nir Eyal.
![How to Train Your Human — Designing for Healthier Habits](https://habrastorage.org/getpro/habr/post_images/c1d/ca9/fb6/c1dca9fb61b3f1ab0da2865624453283.png)
Jobs-to-be-Done
- Luke Wroblewski был на выступление Bob Moesta, автора концепции jobs to be done. Он законспектировал основные тезисы рассказа.
Дизайн для детей
- Американская академия педиатрии провела серию исследований и говорит о том, что планшеты младенцам использовать можно, хотя и с осторожностью. Это просто часть современного окружения дома, продолжение аналогового мира.
Информационная архитектура, концептуальное проектирование, контент-стратегия
![Avi Parush — Conceptual Design for Interactive Systems, 1st Edition](https://habrastorage.org/getpro/habr/post_images/3c7/626/b54/3c7626b540c40485583ad3c6d58a6827.jpg)
Вышла книга Avi Parush «Conceptual Design for Interactive Systems», посвященная концептуальным моделям в проектировании интерфейсов и вообще высокоуровневому проектированию. UXMatters публикует главу № 9 из нее.
Проектирование и дизайн экранов интерфейса
Adobe CC 2015
- Ноябрьское обновление Photoshop CC 2015. Улучшенные артборды, экспорт в SVG, развитие тач-интерфейса и библиотек Creative Cloud.
![Adobe CC 2015.2](https://habrastorage.org/getpro/habr/post_images/32a/2b3/ef4/32a2b3ef4bebdb7cb2c69f1aa55e1dc5.png)
Figma — The collaborative interface design tool
Один из самых интересных инструментов прототипирования, появившихся за последнее время. Это Google Docs для дизайнеров — несколько человек могут работать над интерфейсом одновременно. Небольшой анонс от авторов. Еще немного о нем:
- Fast Co Design поговорил с Dylan Field и Evan Wallace, создателями инструмента.
- О подходе инструмента к работе с сетками.
Adobe Comet
- Свежие новости про инструмент. Открылась запись на бета-версию — нужно пройти небольшой опрос. Правда, изначально будет доступно только для Мака.
- Что войдет в бета-версию и первые обновления после нее.
![Adobe Comet Beta](https://habrastorage.org/getpro/habr/post_images/d42/852/d78/d42852d783d03b3c761d95ace74ea659.jpg)
Koncept — Usability testing on real users & High-fidelity application prototypes
Новый инструмент Koncept пробует совместить возможности прототипирования и юзабилити-тестирования из коробки. Про то, что происходит с прототипом после создания, много говорилось на панельной дискуссии конференции Google SPAN — это одно из главных направлений развития.
![Koncept — Usability testing on real users & High-fidelity application prototypes](https://habrastorage.org/getpro/habr/post_images/b97/ff6/e26/b97ff6e266853544e9e178485a5d5ce7.png)
Tumult Hype Pro
- Вышла версия Hype 3.5. И тут же вышла обучающая книга.
Pixate
- Вышла Pixate Studio 2.0. Ускорение работы, возможность использования видео и аудио, много доработок по интерфейсу. А ведь еще на днях ходил слух, что инструмент свернули, но в итоге вышло гораздо лучше чем с Form, который не обновляли год.
![Pixate Studio 2.0](https://habrastorage.org/getpro/habr/post_images/431/8ea/307/4318ea307e1671dc786a649dad525262.png)
Marvel
- Авторы анонсировали Canvas, новое поколение инструмента с возможностью дизайна и анимации прямо внутри сервиса.
- Подробнейшее пошаговое руководство по созданию прототипа в Marvel от Marc Andrew (перевод). В первой части статьи такой же разбор создания исходных макетов в Sketch.
![Introducing Canvas – Design, Wireframe and Animate directly in Marvel!](https://habrastorage.org/getpro/habr/post_images/2d6/03a/a4c/2d603aa4c10c04fa1dceca6960b52b06.png)
Sketch
- Sketch уходит из AppStore и будет распространяться и обновляться с сайта Bohemian Coding.
- Плагин для синхронизации стилей между несколькими дизайнерами.
- Плагин быстро вставляет в макет фото из стока Unsplash.
- Перевод полного руководства по дизайну iOS 9 в Sketch от Meng To.
UXPin
![UX Pin Update](https://habrastorage.org/getpro/habr/post_images/51e/930/644/51e930644ae1928715edbc84605e13cc.png)
Генераторы аватаров и имен
Обзоры и сравнения инструментов прототипирования
- Carol Liao сделала очень грамотное сравнение семи популярных инструментов прототипирования и анимации по разным типам задач. InVision, Pixate, Principle, Form, Origami, Framer, Xcode.
![Selecting the optimal prototyping tool](https://habrastorage.org/getpro/habr/post_images/d02/40e/1a0/d0240e1a0f90b0b8a019402edfa54247.png)
Atomic
Holding Off on High Fidelity
Памятка команды Salesforce по постепенному повышению степени проработки дизайна от скетчей к интерактивным прототипам.
![Holding Off on High Fidelity](https://habrastorage.org/getpro/habr/post_images/7b5/52f/905/7b552f905d252c6756885afeabb6ece8.jpg)
Инструменты паблишинга
![Формы приема данных](https://habrastorage.org/getpro/habr/post_images/082/d15/b56/082d15b569338b81503a40941b901a86.jpg)
Flawless App
Пользовательские исследования и тестирование, аналитика
Uncovering user goals with the Episodic Interview
Памятка David Travis из UserFocus по проведению пользовательских интервью вне реального контекста респондентов.
Экспертная оценка
Apps Force
Еще один сервис удаленного юзабилити-тестирования. Веб, мобильный веб, приложения.
![Apps Force](https://habrastorage.org/getpro/habr/post_images/055/519/a17/055519a170769e3a9c2d3d1722f42ab9.png)
A Guide To Simple And Painless Mobile User Testing
Небольшая инструкция от Colman Walsh по мобильному тестированию при помощи Reflector.
Визуальное программирование и дизайн в браузере
Can You Code This UI Concept?
В последнее время все чаще концепты с Dribbble и Behance превращаются в реальные скрипты на CodePen и других ресурсах с примерами кода. Блог MaterialUp собрал пять таких штук. Аналогичные примеры:
- Участник Russian Design Cup 2015 Павел Лаптев собрал анимацию своего решения. И еще одна анимация от него — появление меню с помощью СSS3 и библиотеки GSAP.
See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.
Animation in Responsive Design
Val Head поднимает еще один важный вопрос про анимацию в вебе — ее работу в адаптивном дизайне. Она описывает два основных подхода — пересмотр логики работы анимации для разных контекстов и перестановка блоков с новыми триггерами.
![Animation in Responsive Design](https://habrastorage.org/getpro/habr/post_images/205/6d9/894/2056d989416b94c31d067c16e3ed0afb.png)
Живые гайдлайны и компонентные системы
Новые скрипты
- Библиотека Jump.js для мягкой прокрутки.
- Отличный сайт, показывающий возможности современных браузеров и доступность конкретных в текущем.
- Как CSS-функция calc() может заменять часть работы препроцессоров.
- Способы стилизации слайдеров в формах.
- Анимированная навигация по карте для лонг-ридов.
- Обновился JSFiddle.
- Как сделать правильные вкладки в интерфейсе и не облажаться.
Form
![Form 1.4](https://habrastorage.org/getpro/habr/post_images/06e/081/12c/06e08112c887bf04f48fbcade70fcc9f.png)
Framer
Webflow
![Webflow 3D Transforms](https://habrastorage.org/getpro/habr/post_images/5fa/019/afa/5fa019afa3f8f9f91909e9717429b479.png)
Веб-типографика
Работа с цветом
- Библиотека Colorify позволяет извлекать основной цвет изображения для создания заглушек при загрузке.
Работа с SVG
- История развития формата SVG и интереса отрасли к нему.
- Анимация с использованием масок.
- Альтернативы спецификации SMIL для анимации SVG, которая уходит в небытие.
- Карты России и мира в SVG от команды Дизайна государственных систем.
Сетки
- Супер-компактная по размеру система сеток Gridly.
- Rachel Andrew сравнивает CSS Grid и Flexbox.
- Сравнение Flexbox и Susy от Zell Liew.
Flexbox
- Онлайн-игра Flexbox Froggy для обучения работе с flexbox.
- Heydon Pickering о том, как избавиться от одного элемента в последней строке.
The Unluckiest Paragraphs
Nick Santos из команды Medium о том, как блокировщики рекламы могут по ошибке вырезать куски интерфейса. Он делится опытом по поводу того, как избегать проблем.
Иконочные шрифты
An Introduction To PostCSS
Рассказ Drew Minns о PostCSS, альтернативе пре-процессорам для расширения возможностей базового CSS с помощью JavaScript.
UX-стратегия и менеджмент
![Jamie Levy — UX Strategy](https://habrastorage.org/getpro/habr/post_images/b92/0dc/47c/b920dc47cb91886c41271ed53e650098.jpg)
O’Reilly выпустили книгу Jamie Levy «UX Strategy — How to Devise Innovative Digital Products that People Want». UXMatters публикует кусок второй главы. В декабре также вышла «Design Leadership» от Richard Banfield.
How mature is your omni-channel content strategy?
Peter Bogaards предлагает модель зрелости для контент-стратегии. Отличный системный подход, позволяющий оценить текущую ситуацию и спланировать развитие.
![How mature is your omni-channel content strategy?](https://habrastorage.org/getpro/habr/post_images/305/ad4/3e1/305ad43e11583f6f69554dc8b2958f83.png)
Построение дизайн-культуры
Getting Back Into The (Right) Deliverables Business
Rian van der Merwe пишет о том, что маятник всеобщего отказа от документации и проектных артефактов должен качнуться в обратную сторону — вместо сокращения действительно избыточных спецификаций многие и вовсе прекратили предпроектную работу. Он предлагает два документа, которые позволяют соблюдать баланс — расширенные customer journey maps и структура контента.
![Getting Back Into The (Right) Deliverables Business](https://habrastorage.org/getpro/habr/post_images/039/ab6/9ab/039ab69aba599c1ad25068478a80418d.jpg)
Продуктовый менеджмент и аналитика
The Next Feature Fallacy (or, the case for simple, working systems)
Joshua Porter рассказывает о проблеме ложного ожидания новой «функции, которая спасет продукт». Вместо того чтобы обратить внимание на проблемы в ключевых механиках работы сервиса, менеджеры продукта и дизайнеры верят в спасительную силу «вот этой вот недостающей возможности». Он советует концентрироваться на простых работающих системах (чуть подробнее о том, что он под этим понимает).
![The Next Feature Fallacy (or, the case for simple, working systems)](https://habrastorage.org/getpro/habr/post_images/5b7/f95/a9c/5b7f95a9c8e3373cee96cea3e4b4f468.jpg)
Дорожные карты
- Jared Spool предлагает понятие «тем» для дорожных карт. Они фокусируют команду не на функциональности, а на проблемах пользователей, которые можно решить.
Intercom on Customer Support book
Третья книга команды Intercom, посвященная поддержке пользователей.
![Intercom on Customer Support book](https://habrastorage.org/getpro/habr/post_images/fd0/877/5d0/fd08775d0488d969bb50c8eed0f9cff9.png)
Методологии, процедуры, стандарты
Специалист по дизайну графических и пользовательских интерфейсов
Утвержден профессиональный стандарт «Специалист по дизайну графических и пользовательских интерфейсов». Наша профессия стала намного взрослее.
![Специалист по дизайну графических и пользовательских интерфейсов](https://habrastorage.org/getpro/habr/post_images/367/e60/ada/367e60ada3e13e7bbd1c1ba0404b424b.png)
Анонс говорит:
В функции данных специалистов входит проектирование, графический дизайн и юзабилити-исследование интерактивных пользовательских интерфейсов, обеспечивающих высокие эксплуатационные (эргономические) характеристики программных продуктов и систем.
Требования к образованию по данной профессии: среднее профессиональное образование — программы подготовки квалифицированных рабочих (служащих), либо высшее образование — бакалавриат, специалитет, магистратура. Дополнительное профессиональное образование — программы повышения квалификации, программы профессиональной переподготовки, программы повышения квалификации.
Предъявляются также требования к опыту практической работы в соответствующей сфере деятельности.
Кейсы
Кейсы редизайна
- Рассказ о том, как делался редизайн дашборда Xbox One.
- О работе над интерфейсом приложения Uber для водителей.
![How Microsoft Created A New Xbox Experience](https://habrastorage.org/getpro/habr/post_images/c05/6c0/44f/c056c044fc7662123987fb27461c4856.gif)
Prototyping Secret Hitler
Рассказ Max Temkin о работе над карточной игрой Secret Hitler. Она не совсем по теме блога, но в ней собрана интереснейшая подборка прототипов многих известных карточных игр — очень полезно.
![Prototyping Secret Hitler](https://habrastorage.org/getpro/habr/post_images/523/d5f/79f/523d5f79f280fb049bc1f0820ac5c304.jpg)
История
oldweb.today
Эмулятор винтажного интернета, позволяющий увидеть архивные сайты в ретро-браузерах. Правда, серверные мощности у них слабые, работает с задержками.
![oldweb.today](https://habrastorage.org/getpro/habr/post_images/9ce/439/564/9ce43956437fec2c65eaf143093e5bfd.png)
Рассказы о старых сайтах:
- 20 декабря исполнилось 25 лет первому сайту от Тима-Бернеса Ли.
- Новогодние сайты, приложения и иллюстрации 80х и 90х.
- Подборка старых сайтов от The Telegraph.
Proceed to Checkout: The Unexpected Story of How Ecommerce Started
Shopify сняли видео, рассказывающее об истории появления электронной коммерции. Основных варианта два и оба из 1994 года — Pizza Hut и сайт NetMarket, продавший компакт-диск Стинга. Статья Fast Company с материалом в текстовом виде.
- И еще одна интересная статья Fast Company об истоках интернета. В ’80х-’90х годах в США были дичайше популярны телефонные услуги на базе номеров 1-900, позволявшие получать короткие новости от звезд (пре-Твиттер), слушать свежую музыку (пре-Spotify) и иметь легкий доступ к куче другой полезной информации, труднодоступной в доинтернетовские времена. Погубило все, как обычно, порно.
История Ralph Baer
Тренды
Тренды 2016 года
Кураторы сайта uxdesign.cc проанализировали все ссылки, опубликованные за год, и составили прогноз на 2016. Очень грамотный и взвешенный материал, и что самое приятное — от людей, которые действительно разбираются в интерфейсах, а не только визуале. Другие прогнозы:
- Прогноз на 2016 год от J. Walter Thompson Intelligence.
- Итоги года от создателей инструмента Atomic, которые пытаются угнаться за контент-маркетингом InVision.
- Прогнозы специалистов отрасли, собранные Econsultancy.
- 10 прогнозов от Fjord. Они же в виде презентации и статьи.
- Прогноз от frog design.
Why The Great App Unbundling Trend Is Already In Trouble
Fast Company пишет о том, что тренд отпочковывания не особо взлетел. Недавно закрылись Carousel и Mailbox от Dropbox, а также экспериментальные приложения Фейсбука. При этом дико популярным оказался новый мобильный Outlook, представляющий из себя тот самый классический лютый универсальный комбайн. Хотя речь идет скорее о бездумном клепании сателлитов — тому же Foursquare это пошло на пользу, хорошо идет и Facebook Messenger.
![Why The Great App Unbundling Trend Is Already In Trouble](https://habrastorage.org/getpro/habr/post_images/e32/850/2c3/e328502c3f16bd2e109b2762561e315e.jpg)
Вдогонку — толковые мысли Sebastien Gabriel о закрытии Mailbox, Carousel, Rooms и других приложений, которые считались хорошим примером качественного дизайна. Это отрезвляет тех, кто считает, что качественного UX достаточно для успеха продукта (та же история была с Path) — это важная, но не ключевая часть.
Microsoft Future Visions
Microsoft запустил мини-сайт Future Visions, посвященный видению будущего. Это серия рассказов от фантастов, размышляющих о будущем технологий. Они взяли за основу наработки исследовательской лаборатории Microsoft и пофантазировали на их тему. При этом забавно, что многие из этих технологий сами вдохновлялись научной фантастикой. Обзор основных тем.
![Microsoft Future Visions](https://habrastorage.org/getpro/habr/post_images/b0c/972/64c/b0c97264c74493cd2c435f4dabf2d4f5.jpg)
The New Story Of Computing: Invisible And Smarter Than You
Еще один термин в дополнение к «NoUI», «anticipatory computing» и «Zero UI» — Cognitive Computing. Суть примерно похожая — меньше ручного управления, больше перекладывания всего на плечи компьютеров.
![The New Story Of Computing: Invisible And Smarter Than You](https://habrastorage.org/getpro/habr/post_images/68d/be7/cb4/68dbe7cb4e9e0416b4dee449959ba5d5.jpg)
Тренды в СМИ
- Рассказ о редизайне Quartz, который подтверждает постепенное умирание главных страниц СМИ.
- Google News Lab теперь занимается ежегодным отчетом компании о поисковых трендах. Они описали ключевые выводы для СМИ из особенностей поведения пользователей и потреблениями ими контента.
![Traditional Homepages Are Obsolete, Says Quartz. Here's What They Built Instead](https://habrastorage.org/getpro/habr/post_images/232/993/ecd/232993ecd280bad943e41c3fd223529a.jpg)
Автомобильные интерфейсы
- Небольшой обзор конференции Connected Car Expo, проходившей недавно в Лос-Анджелесе с точки зрения внимания к интерфейсам.
- Концепт от Volvo, который представляет совсем далекое будущее автономных машин, где они потеряли свое статусное значение. Просто зеркальный куб.
![Why Detroit Needs User-Centered Design](https://habrastorage.org/getpro/habr/post_images/707/073/b62/707073b6279dae5222eaeb0907b5dbf7.jpg)
Умные часы и браслеты
- Luke Wroblewski собрал в Google+ свои мысли и твиты на тему умных часов. Там есть и другие его подборки.
- Очень интересное исследование группы шведских ученых на тему использования умных часов в реальной жизни. Они выбрали 12 респондентов, которые долгое время ходили с Apple Watch и камерой, которая записывала все взаимодействия с часами. Насчет репрезентативности сказать сложно, но есть много интересных фактов.
![Smartwatch Design](https://habrastorage.org/getpro/habr/post_images/f32/5fb/af1/f325fbaf167b19117cbac7d3f43f4fb3.png)
Виртуальная реальность
- Коллекция экспериментов с анимацией в виртуальной реальности для Google Cardboard.
- Фреймворк A-Frame для создания простых интерфейсов виртуальной реальности в вебе. Поддержан инициативой MozVR от Mozilla, анонсированной недавно.
- Laura Keller о UX журналистики в виртуальной реальности на примере материала NY Times о беженцах.
![A-Frame](https://habrastorage.org/getpro/habr/post_images/fc3/b04/eb1/fc3b04eb13a66db84ff77980f9753a2c.png)
Интерфейсы в кино
- Все 169 гаджетов из фильмов о Джеймсе Бонде.
- Рассказ о компании Perception, которая делала интерфейсы к Iron Man 2, Avengers 2 и другим фильмам, а после этого подключилась к работе над концептами для Microsoft, Samsung и Ford.
Microsoft HoloLens
- Autodesk и Microsoft работают над инструментами для связки инженеров и пром.дизайнеров на базе Hololens.
- Volvo рассказывает о том как использует HoloLens в работе.
Для общего и профессионального развития
Бюллетень «Эргономист» № 43 (декабрь 2015)
В номере: статьи о доступности метро для маломобильных пассажиров, об эргономических мероприятиях 2015 года, о Владимире Михайловиче Мунипове и его вкладе в эргономику, новости, аннотации публикаций на эргономическую тематику, удачный опыт и эргономические диверсии и многое другое.
Tilda Education
![Психофизиология пользовательских интерфейсов](https://habrastorage.org/getpro/habr/post_images/d83/623/d02/d83623d022f31f1adab28d53f059b134.png)
Продуктовые дизайнеры
Люди и компании в отрасли
Designing Women
Серия интервью Fast Co Design с женщинами в дизайне. Вышло уже 4 материала про дизайн-лидеров.
![Designing Women](https://habrastorage.org/getpro/habr/post_images/130/80c/6be/13080c6be2bfd1102183494c2b17fa35.png)
Дизайнеры в венчурных фондах
- Accel Partners наняли Jason Mayden из Nike. Он рассказывает о том, что будет искать молодых специалистов в нетипичных местах.
Иван Пупырев
![«Это технологический вызов»: Как русский дизайнер придумывает умную ткань Googlе](https://habrastorage.org/getpro/habr/post_images/c7c/03d/287/c7c03d287982713b9066f03d04950c64.jpg)
Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Подписывайтесь на рассылку! Письмо приходит один раз в месяц.