Уже почти пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-январь 2015.
Паттерны и Best Practices
Interaction Design Best Practices — Mastering the Tangibles
UXPin бодро начали год выпуском целой серии электронных книг. Свежая — про дизайн взаимодействия.
Non-blocking UI’s with interface previews
Callum Hart об использовании индикатора загрузки страниц, который Фейсбук предложил несколько лет назад — вместо унылой крутилки показывается структура экрана.
Коллекции примеров интерфейсной анимации
I’m the Fold
Интересный эксперимент, показывающий где заканчивается экран на разных устройствах. Хорошо видно кучкование вокруг определенных цифр. В продолжение темы:
Visual Design for White Labelled Products
Cale LeRoy из Cooper об особенностях дизайна продуктов без заданного берндирования, так называемых White Labelled Products. Брендинг настраивается под каждого конкретного клиента. Есть три подхода: 1) меняется только логотип клиента (ко-брендирование); 2) доступна полная кастомизация; 3) доступна настройка только нескольких предопределенных параметров. Автор рекомендует последний из них.
Carousel Usage Exploration On Mobile E-Commerce Websites
Kyle Peatt из Mobify провел детальное исследование по использованию «каруселей» на мобильных веб сайтах.
Design Details: Instagram для iOS
Brian Lovin продолжает разбирать интерфейсные паттерны различных мобильных приложений.
Improve Validation Errors with Adaptive Messages
Baymard Institute об адаптивных ошибках в формах.
Links are broken. These three alternatives have improved our readers’ reading experience
Sebastian Kersten о проблемах классического формата расстановки ссылок в тексте (они уводят читателя посередине материала) и нескольких способах их решения.
Testing Accordion Menu Designs & Iconography
Небольшой тест расположения и различных видов иконки сворачивания/разворачивания аккордеона от Viget.
Понимание пользователя
Little Data, Big Data and Design at LinkedIn
Интересный кейс о подходе исследовательской команды LinkedIn к анализу входящей информации о пользователях. Они комбинируют данные из множества источников для понимания особенностей поведения. Статья доступна только по регистрации, зато бесплатной.
Measuring Attitude Lift
Выдержки из 9 главы новой книги Jeff Sauro «Customer Analytics for Dummies». Он рассказывает о методике Attitude Lift (изменение отношения пользователей). Их просят оценить отношение к продукту до и после использования и сравнивают эти показатели. Если происходит снижение уровня отношения после использования, то дело в проблемах с взаимодействием, либо у пользователей были нераельно завышенные ожидания от бренда или продукта.
Considering the Consideration Funnel
Chris Risdon пишет о сложных процессах покупки товаров и услуг в интернете, когда пользователь может бросать процесс оформления заказа для более детального изучения информации, а не потому что в интерфейсе что-то не так.
Natasha Dow Schull — Addiction By Design
Дизайн для зависимости. Как дизайн для достижения потока, новейшие достижения эргономики и методы управления поведением могут эффективно использоваться для темных практик UX. Natasha Dow Schull замечательно рассказывает о принципах дизайна игровых автоматов в казино.
The Paradox of Empathy
Scott Jenson о четырех типах эмпатии в дизайне. В продолжение темы:
- Глава «Как правильно слушать» из новой книги Indy Young «Practical Empathy».
- Еще один отрывок из книги Indy Young о том, как применять эмпатию для изменений внутри компании.
Designing For The Elderly: Ways Older People Use Digital Technology Differently
Очень хороший обзор нюансов работы с пожилыми людьми от Ollie Campbell.
Особенности дизайна в Азии
- Kendra Schaefer об особенностях дизайна для китайского рынка.
- Разбор интерфейса японского приложения для заказа суши.
- Особенности японского веб-дизайна.
Информационная архитектура, концептуальное проектирование, контент-стратегия
The Ultimate Guide to Information Architecture
Толковая обзорная статья об информационной архитектуре от Cameron Chapman.
Проектирование и дизайн экранов интерфейса
Resonator
Вышел релиз Resonator — нового расширения для Photoshop, которое помогает собирать, хранить и «нарезать» для разработчиков иконки и любую другую графику. Оно поддерживает iOS, Android, Windows Phone и ретину. Будет полезно всем мобильным, некоторым веб- и вообще всем тем дизайнерам, которые устали от постоянной ручной нарезки графики для передачи разработчикам.
Designing For Wearables To Enhance Real-Life Experience
Крутой материал Jonathan Kohl о проектировании и дизайне приложений для умных часов и браслетов. Много нюансов работы с физическим устройством, контекстами его использования, историй из практики. Вторая часть статьи (там не очевидная навигация между частями).
Новое для Sketch
- Обзорная статья с шаблоном для проектирования мобильных интерфейсов.
- Переводы самых популярных статей и туториалов для Sketch на русском.
- Коллекция курсоров мыши.
- 6 советов по ускорению работы.
Новое для Quartz Composer
- Вышла вторая версия Origami. Можно просматривать прототипы на устройствах, экспортировать код, подключаться к макетам в Sketch и Photoshop и много чего еще.
Designer’s Toolkit: Prototyping Tools
Emily Schwartzman сделала интерактивную версию своей сравненительной таблицы инструментов прототипирования.
Новое для Apple Watch
- Рассказ украинской компании ELEKS Software о создании приложения-концепта для Теслы.
- Бесплатные шаблоны от UI8 для Photoshop.
- Интересный способ предпросмотра приложений, когда нет устройства.
Новое о Material Design
Things I’ve Learned About Sending Email, For Web Designers And Developers
Отличная методичка Lee Munroe для дизайнеров почтовых рассылок.
Новое для Pixate
- Появилась Pixate Studio, отдельное приложение для Mac. Стоит $149 в год.
- Теперь можно писать actions.
Инструменты паблишинга
- Генератор одностраничников Купаж.
- Создатели плагина Aesop для WordPress запускают отдельный сервис для лонг-ридов Story.AM.
- Инструкция Всеволода Пули по созданию лонг-ридов.
Mobile Prototyping With Proto.io
Обзорная инструкция по работе с Proto.io на Smashing Magazine.
Новое для Adobe Illustrator
Core Animator
Новый инструмент для превращения анимаций в нативный для iOS код. Анимации персонажей, инструкций, элементов пользовательского интерфейса и даже полных сцен. Подходит для дизайнеров, желающих создавать привлекательные анимации и разработчиков, замучившихся переносить эти анимации из какого-то визуализатора или инструмента прототипирования в код. Поддерживает Objective C и Swift.
Precursor — Fast prototyping web app, makes collaboration easy
В новом году новые инструменты прототипирования еще не сильно раскачались, но вот свеженький. Ничего особенного в описании нет, просто до кучи.
Пользовательские исследования и тестирование, аналитика
How to weight data to make more balanced decisions
Jeff Sauro о методах развесовки данных пользовательских исследований.
Getting to Know Your Data Types
Памятка Jeff Sauro по категоризации данных пользовательских исследований.
Don’t use one way mirrors for UX research
Lisa Duddington делится своим опытом работы в юзабилити-лабораториях. Она пишет о недостатках традиционной планировки лабораторий, когда используются односторонние зеркала. Такой поход устарел, вместо зеркал удобнее использовать экраны в комнате наблюдателей.
Field visits and user interviews: 7 frequently asked questions
David Travis о том, когда использовать полевые исследования и лабораторные тесты.
6 Voice of the Customer Tools That Can Save Your Business
Инструменты для сбора обратной связи от пользователей.
Новое о карточной сортировке
- Кейс тестирования деревьев (tree trsting).
- Продолжение предыдущей статьи. Применение открытой карточной сортировки после тестирования деревьев.
- Разбор проведения масштабной удаленной карточной сортировки с большим количеством участников (97 тегов, 37 категорий, 172 участника) и последующий анализ данных.
UserBrain
Тестирование вашего сайта живыми людьми. Вы вводите ссылку на ваш сайт, пишите задание, живые и настоящие пользователи тестируют ваш сайт, вы получаете на почту видео с тестирований-выполнений заданий, ..., профит!
OneTwoSplit
Сервис OneTwoSplit для A/B-тестирования описания приложения в AppStore и Google Play.
How We Do It: Wargaming and the User Experience
Об исследованиях в Wargaming.
Визуальное программирование и дизайн в браузере
Why you should be excited about CSS shapes
Отличная обзорная статья о возможностях CSS shapes, позволяющих делать эффектную журнальную верстку с обтеканием изображений по сложной маске. Правда, пока поддержка в браузерах слабая.
Frontend.md
Фреймворк Frontend.md для создания живых гайдлайнов.
Веб-типографика
- Скрипт для установки всех шрифтов из Google Web Fonts на Мак.
- Nick Sherman разбирает текущее состояние адаптивных шрифтов. Общие принципы были описаны в ранних спецификациях CSS, но в жизнь почти не попали. При этом активно развиваются инструменты, позволяющие смоделировать различные начертания на лету. Это даст дизайнерам большую гибкость, плюс позволит сэкономить на весе загружаемых файлов.
Работа с цветом
- Генератор градиентов в CSS.
- Простой онлайн-инструмент для проверки цветового контраста, критичного при обеспечении доступности.
CSS Devices
Пачка шаблонов смартфонов и планшетов, сделанных на чистом CSS. Они доступны в разных цветах и ориентациях.
Как работает CSS-анимация
Новое для Framer
A Deep Dive Into Adobe Edge Reflow
Небольшая обучалка по работе с Reflow.
Designers: Start Coding With uilang
Руководство для начинающих по работе с uilang.
Работа с SVG
Новые скрипты
- Библиотека для легкой подстановки контента во время скрола «за границу» в iOS/OS X.
- Красиво оформленное руководство по CSS. Читать совсем не так скучно, как W3C. Полезно будет дизайнерам, которые хотят учиться прототипировать
- Сравнение скриптов ленивой подгрузки и более оптимальный вариант.
- Эффект сияния на кнопке.
- Конструктор анимированных иконок.
- Пример эффектов для визуализации обратной связи после клика.
- Скрипт для выпрыгивающей навигации.
- Анимация добавления элементов в список.
- Отличные шутки на основе CSS-синтаксиса.
- Скрипт боковой навигации.
- Странный и не факт что практичный, но забавный контрол выбора даты.
- Крутой эксперимент по созданию 3D-окружения средствами HTML.
- Скрипт для автозаполнения полей ввода.
- Анимированный текст через SVG.
- Текстурированный текст на CSS.
- Крутой наглядный справочник-калькулятор по различным единицам измерения в CSS.
- Трансформация иконки поиска на SVG и JavaScript.
- Анимация отрисовки полигональных иллюстраций на SVG и JavaScript.
- Бессмысленно, но забавно — анимация адресной строки в браузере.
- Использование библиотеки для инфографики D3 вместе с flexbox.
- Очередная пачка анимаций кнопок.
- Несколько скриптов для аккуратной работы выпадающих меню, не убегающих от курсора мыши.
Работа дизайнера в Swift
Designing For Print With CSS
Отличная методичка Rachel Andrew о том, как с помощью CSS готовить печатные версии страниц. Причем возможности настолько обширные, что можно получить на выходе хорошую книжную верстку со всеми особенностями от обложки и содержания до колонтитулов и сносок. Также предлагается скрипт-генератор PDF. В продолжение темы:
Build Your Own Product Hunt With Telescope And Meteor
Как создать свой Product Hunt на платформе Telescope.
Управление интерфейсными проектами, процессами и командами
Design and the Corporation — A Reply from Darrel Rhea
Darrel Rhea очень толково описывает эволюцию дизайн-отделов в крупных компаниях. Как и для чего они были нужны в разные периоды развития профессии и рынка.
UX Debt in the Enterprise: A Practical Approach
Очень толковый кейс использования понятия интерфейсного долга для переработки крупной линейки продуктов. К статье прилагается калькулятор в Excel.
Design is Valued. Now What?
Luke Wroblewski, о том, что недостаточно просто нанять много хороших дизайнеров для создания отлично работающего дизайна. Нужны изменения. Чтобы компания стала действительно ориентирована на дизайн, должна меняться сама компания, должны меняться и дизайнеры.
Routines on Projects — Why They Deserve More Attention
О полезных практиках, которые развивают дизайн-команду.
Radical Redesign or Incremental Change?
Hoa Loranger из NN/g о «большом» редизайне: «В большинстве случаев предпочтительнее эволюционно улучшать продукт. Радикальный редизайн показан только в том случае, когда продукт настолько плох и запущен, что его невозможно заметно улучшить без полной переделки.»
PJ McCormick — Leading Projects Through Danger
PJ McCormick о том, как работает UX команда Amazon.
The Road Less Travelled
Выступление Mike Atherton на UX Cambridge 2014. Он рассказывал о совмещении стратегии бренда с UX- и продуктовой стратегией.
Defining User Experience Strategy
Продолжение серии статей Austin Govella о UX cтратегии. Часть 5: выбор правильных целей и Часть 6: нацеливание команды.
UX Recipe
Калькулятор стоимости дизайн-процесса в целом.
UX Hiring Handbook (PDF)
Короткая брошюра Craig Morrison том, как нанимать UX дизайнеров.
Продуктовый менеджмент и аналитика
Руководитель аналитики Lamoda: «Увеличение конверсии даже на процент для нас — большие деньги»
Крутое интервью с Игорем Селицким, руководителем аналитики Lamoda. Много интересного об отслеживании поведения пользователей в e-commerce.
Data-Informed Design: Three Data Stories
Третья часть из серии публикаций Pamela Pavliscak о работе с данными аналитики при проектировании интерфейсов.
It’s Kind of Cheesy Being Green
Интересно о сложных маркетинговых решениях, стоящих за зеленым цветом СМС-сообщений в iOS.
The Guide to Minimum Viable Products
Перевод на русский книги UXPin про MVP. В продолжение темы:
Методологии, процедуры, стандарты
Learn Design Principles
Сайт-памятка по ключевым дизайн-принципам. Другие принципы:
Кейсы
Product Design Unification Case Study: Mobile Web Framework
Опубликовал рассказ в виде статьи на Smashing Magazine. Редакционный процесс в издании, конечно, хардкорный — все итерации правок и доработок заняли примерно полгода. Но получилось круто — теперь я знаю, каким потом и кровью достигается их уровень качества материалов. Со временем появится продолжение про контент-проекты и техническую сторону. Русскоязычная версия и републикация для сайта БЭМ.
<a rel="nofollow" href="https://medium.com/yakostro/ux-ae8a3b12a3b7">Особенности работы UX-дизайнера в «железном» проекте
Особенности работы над интерфейсом в «железном» проекте на примере «Симкомата». Илья Александров поделил статью на две части: об особенностях «железа» и <a rel="nofollow" href="https://medium.com/yakostro/ux-2-b39e19def99a">конкретные решения и кейсы. Будет интереснее для практикующих проектировщиков.
Designing Twitter Video
Paul Stamatiou о дизайне приложения Twitter Video для iPhone.
Редакционные CMS
Emotional Design Fail: Divorcing My Nest Thermostat
Kara Pernice из NN/g несколько лет пользовалась термостатом Nest, но недавно заменила его более простой моделью. В статье она разбирает свой опыт пользования термостатом от первоначального восхищения до конечного разочарования, указывая нарушения при проектировании как эвристик Нильсена, так и принципов эмоционального дизайна Дональда Нормана.
Accessibility Originates With UX — A BBC iPlayer Case Study
Кейс работы над BBC iPlayer с точки зрения доступности. Он хорошо показывает, что соблюдения базовых гайдлайнов недостаточно и нужно проверять дизайн на живых людях.
Bloomberg Business’ new look has made a splash — But don’t just call it a redesign
Беглый рассказ о том, как перезапускался новостной сайт Bloomberg, один из самых сильных редизайнов СМИ последнего времени. Joshua Topolsky, который приложил руку к Engadget и The Verge, летом 2014 года попал в издание и повлиял на то, каким будет итоговый результат. Обновленный раздел политики они, кажется, запустили еще до него. Не менее смелый дизайн их достаточно сильной дизайн-конференции Bloomberg Business Week Design.
Непрошенные редизайны
История
The Future of the Web Is 100 Years Old
В статье Nautilus перечислены все концепции интернета за последние 100 лет, с большим фокусом на идею Paul Otlet. Интересно, что проблему информационной перегрузки, которую во многом породило промышленное книгопечатание в 19 веке, пытались решать уже тогда.
Of Mice And Men
Еще один материал о keyset, экспериментальной клавиатуре Douglas Engelbart.
Time Travel by Book
Christina Wodtke выложила свою подборку книг по инфоархитектуре, которую она составляла 10 лет назад.
Тренды
The Wolff Olins Report 2015
Толковый отчет Wolff Olins о современной роли и смысле лидеров в компаниях, а также важности дизайн-мышления для них.
Прогнозы на 2015
Автомобильные интерфейсы
- <a rel="nofollow" href="https://medium.com/yakostro/-7e4180b6ef8d">Илья Александров написал обзор перспектинвых интерфейсных решений в автомобильной индустрии.
- Обзор приборных панелей современных авто.
- Студия Raureif о том, смогут ли Android Auto и Apple CarPlay поменять не самый современный UX автомобилей.
- Инструмент для создания интерфейсов под новую платформу Nvidia Drive.
On Meta-Design and Algorithmic Design Systems
Rune Madsen на тему алгоритмов, генерирующих дизайн и новой роли дизайнера в таком мире.
Sorry, But Google Glass isn’t Anywhere Close to Dead
Для корпоративных клиентов очки Google Glass активно поддерживаются и в этой узкой нише у них хорошие перспективы.
Skip a Beat Heart Rate Game Launch Trailer
Сердечный ритм как часть инпут метода теперь и на потребительском рынке. Ожидаем роста использования алгоритма, в том числе, для лечения функциональных расстройств на основе БОС в домашних условиях в игровой форме.
Pebble Time — Awesome Smartwatch, No Compromises
Pebble анонсировал Time, новое поколение своих умных часов. Про характеристики и сценарии использования говорить не так интересно, все платформы делают плюс-минус одно и то же.
Вот что действительно интересно — так это безумно крутая оркестровка анимации, сделанная на цветном e-ink. Во-первых, сам подход с плавной трансформацией элементов, когда все действия в интерфейсе выглядят одной большой и связной анимацией. По схожей модели работает material design и это новый уровень сложности для дизайнеров. Загрузчик Android, то что делает John Schlemmer — вот это ориентир на ближайшее время. Это вам не дешевый чит с пружинками, которые делают из интерфейса фильм Майкла Бея — половина Дрибббла сейчас уделана этими поделками.
Во-вторых, то что это возможно на электронной бумаге, которую не очень-то жалуют топовые производители. Первые Pebble имели смехотворные задержки, но новая модель выдает 30 FPS — все выглядит очень и очень плавно и эффектно. И при этом держит батарейку неделю, а не умирает к началу следующего дня. Говорят, третий YotaPhone также будет использовать цветной e-ink. Если у них получится что-то похожее — нас ждет эпоха расцвета этой внезапно оказавшейся крутой для дизайна технологии.
Fashion ecommerce — Are virtual fitting rooms the silver bullet?
Статья об использовании виртуальных примерочных при онлайн продаже одежды. Есть аргументы за, есть моменты ставящее под сомнение эффективность этих решений. В общем, есть куда двигаться. А статью можно почитать для общего развития и чтобы посмотреть примеры примерочных сервисов.
Новое о виртуальной реальности
- История одного из первых массовых коммерческих продуктов 90х, Virtuality.
- Толковая памятка от Fast Co Design по современному состоянию виртуальной и дополненной реальности.
Носимая электроника
- Хорошая коллекция примеров действительно полезных носимых устройств в медицине.
- Носимая социальная сеть.
Для общего и профессионального развития
Applied UX Strategy, part 2: The Product Designer
На UXMatters вышла моя вторая статья в рамках серии о UX-стратегии, посвященная продуктовому дизайнеру. Это значительно дополненная и переструктурированная версия недавней презентации на тему. Русскоязычная версия. В продолжение темы:
- Cemre Güngör о разнице работы продуктового дизайнера в стартапе и большой продуктовой компании. Он был частью Branch, купленного Facebook.
- <a rel="nofollow" href="https://medium.com/exevil/-4298e9dd0331">Весьма правильный рассказ про переформирование процессинга при повышении навыков дизайнеров в команде.
Review: Online UX Courses
Arun Joseph Martin проводит сравнительный обзор дизайна четырех сайтов с онлайн курсами по UX: All You Can Learn от UIE, Udemy, Lynda.com и SkillShare. Другие обучающие программы:
Everyday IA
21 февраля — международный день Информационного Архитектора. В статье поздравления от Louis Rosenfeld. Тема 2015 года — «Архитектура счастья».
Back Pocket Apps: Let’s Reconsider the Wireframe
Дизайнер Golden Krishna пишет книгу «The Best Interface is No Interface» о проектировании приложений без пользовательского интерфейса. UXBooth опубликовал главу из нее. Сайт книги.
Designing Case Studies — Showcasing A Human-Centered Design Process
Senongo Akpem рассказывает на Smashing Magazine о создании хороших кейсов в портфолио. Как сфокусироваться на задаче и результате, а не проектных артефактах. В продолжение темы:
The UX Reader: Книга о работе UX-команды MailChimp
Перевод книги UX Reader от команды MailChimp — это сборник статей из их рассылки. Часть 2.
Quickpanel: UX Certifications
Мнения известных специалистов о UX-сертификации.
Эргономист № 39, февраль 2015 (PDF)
Свежий номер Бюллетеня «Эргономист» посвящен пользовательским интерфейсам.
Khan Academy Internships
Elizabeth Lin о своем стажерстве в Khan Academy.
Jonathan Shariat — Tragic Design
Jonathan Shariat пишет книгу «Tragic Design» об интерфейсах, которые убивают.
Люди и компании в отрасли
Покупки дизайн-студий
- Eric Portelance о главных уроках работы в Teehan+Lax.
- Еще одна статья о развитии дизайн команд в корпорациях.
- Tobias van Schneider о ментальной стагнации традиционной модели дизайн-агентств.
How Paul Rand Pioneered The Era Of Design-Led Business
О том, как Paul Rand добивался изменений в отношении к дизайну в крупных компаниях.
Why Design Needs Entrepreneurship (and Entrepreneurship Needs Design)
Christina Wodtke о своей карьере, когда она из дизайнеров перешла в бизнес и вернулась обратно уже более опытной.
Jeffrey Veen: Next
Jeffrey Veen уходит из Adobe в True Ventures в качестве дизайн-партнера. В продолжение темы:
How Startups Valued At $1 Billion Or More Put Design First
Выдержка из исследования WSJ о крупнейших бывших стартапах, которая приводит компании, делающие особый фокус на дизайне. Полная версия списка.
Новые сессии AMA
Why Samsung Design Stinks
Kevin Lee, бывший глава по продуктовой стратегии и UX в Samsung Design America, о разнице между дизайн подходами Samsung и Apple.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Автор: jvetrau
