Уже четыре с половиной года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июль 2014.
Designing for Large Screen Smartphones
Сразу два осенних анонса (iPhone 6 Plus и Nexus 6) показали невеселое будущее управления смартфонами - запредельно большие экраны становятся основным стандартом. Luke Wroblewski делает беглый обзор того, как с этим жить. В этом посте будут собираться паттерны для решения этой проблемы.
What is a Card?
Khoi Vinh провел большое исследование карточного подхода по заказу компании Wildcard. В продолжение темы:
Mobile & Multi-Device Design: Lessons Learned
Новая бесплатная книга Luke Wroblewski “Мобильный дизайн и дизайн для нескольких устройств: уроки, выученные при создании приложения Polar”. Доступна в виде PDF и iBook. Кстати, сам сервис Polar недавно был куплен Google и Люк становится частью корпорации.
Опыт «Рокетбанка»: Как делать эффективные посадочные страницы для бизнеса
Алексей Колесников делится опытом Рокетбанка по созданию лендингов. Он подробно разбирает весь процесс и обращает особое внимание на важность основного посыла предлагаемого продукта или спец.предложения.
Petit Hacks
Библиотека паттернов, схожая с Little Big Details, но ориентированная на продуктовые решения, обеспечивающие рост метрик по одной из наиболее популярных моделей AARRR (Acquisition, Activation, Retention, Revenue, Referral).
Swipe Left, Swipe Right, But Why?
Steve Melendez пишет об интерфейсном паттерне быстрого принятия решений с помощью свайпа карточек влево/вправо, ставшем дико популярным благодаря сервису знакомств Tinder.
Falling in Love with Forms (Презентация Aaron Gustafson)
Материалы с воркшопа Aaron Gustafson по дизайну форм с конференции BlendConf 2014.
Reducing Abandoned Shopping Carts In E-Commerce
Keir Whitaker разбирает способ уменьшения количества брошенных корзин покупателями интернет магазинов с помощью писем-напоминаний. Письмо отправляется через несколько часов после того как пользователь оставил процесс и повышает продажи (в статье приводится статистика).
Простые догмы при работе с цветом в интерфейсах
Основы работы с цветом в интерфейсе.
Why Keyboard Usability Is More Important Than You Think
David Sloan и Sarah Horton о том, почему важна доступность функциональности при использовании только клавиатуры. В продолжение темы:
Would you like fries with that?
Booking.com провел А/Б-тестирование навигации на мобильных и использование иконки бургера в частности. Для них ни один из вариантов не показал существенного превосходства.
Think Breadcrumb Links Aren’t Good For User Experience? Yes, They Are!
Shari Thurow написала подробное руководство по использованию “хлебных крошек” в навигации.
Form Usability: Validations vs Warnings
Новая статья Baymard Institute про валидацию форм. В продолжение темы:
Mobile Design Pattern: Inventory-Based Discrete Slider
Руководство по использованию слайдеров в мобильных интерфейсах от Greg Nudelmann и Daria Kempka.
The Balance Between UX and Security
О балансе UX и безопасности от Hong Yi Dong — дизайнера в компании, которая занимается безопасностью. Он также пишет о роли дизайнера в такой организации.
Search Is Not Enough: Synergy Between Navigation and Search
Одна из тенденций момента — попытка заменить глобальную навигацию поиском. Raluca Budiu описывает 5 причин, по которым одного поиска недостаточно и необходимо его совместное использование с навигацией.
Animation for Attention and Comprehension
Aurora Bedford из NN/g пишет об использовании анимации в интерфейсах. Ее две основные цели: привлечь внимание пользователя к определенным элементам интерфейса, либо упростить понимание связи между элементами интерфейса. Переходы и анимации дложны быть достаточно быстрыми, чтобы не раздражать пользователей и не препятствовать их эффективной работе. В продолжение темы:
What Every App Developer Should Know About Android
Обширная статистика по текущим версиям, популярным устройствам и экранам, распространенности кастомных оболочек и т.п.
Size Matters: Balancing Line Length And Font Size In Responsive Web Design
Laura Franz описывает нюансы подбора длины строки и межстрочного расстояния при адаптировании дизайна.
Is There a Formula for Delight?
Ben Rowe о дизайне, вызывающем восхищение пользователя. Самое глубокое и разностороннее из того, что встречалось на эту тему. Остальные затрагивали скорее частные аспекты. В продолжение темы:
Презентация Ben Tollady и Ben Rowe на тему проектирования для восхищения.
Des Traynor: Не всё можно показать прототипами. Если вы хотите проектировать для восхищения, создавать эстетический эффект, вовлекать пользователей в игру, то вайрфреймов не достаточно для моделирования впечатлений. Нужны более детальные прототипы, не отличимые от реального продукта.
Dynamic user interfaces, Adapting to changing situations in games to increase player performance
Bjorn Buchner об идее динамических интерфейсов, которые адаптируются к текущей ситуации, например, в играх. В продолжение темы:
Icon Classification: Resemblance, Reference, and Arbitrary Icons
Разбор удобства использования различных категорий иконок от Jakob Nielsen.
The Danger of Dogfooding
“Проектирование для себя”, когда члены продуктовой команды сами ежедневно пользуются своим продуктом — простая и эффективная методика. Des Traynor пишет о том, что время от времени нужно забывать о себе самом, как профессиональном пользователе, и смотреть на взаимодействие с продуктом с точки зрения новичка.
Проектируем информационную архитектуру для e-commerce
Занимательное введение в Информационную Архитектуру от Олега Воронько. Часть 2.
Character separators in paper forms
Компания Formulate об эффективности явных разделителей символов в бумажных формах. К вебу слабо применимо, но познавательно.
When to Use Which User-Experience Research Methods
Christian Rohrer обновил свое руководство по использованию методов исследования пользователей. 20 наиболее распрострaненных методов исследования распределены по следующим характеристикам: исследование поведения пользователей либо отношения к продукту; качественные либо количественные исследования; контекст использования (естественное использование продукта; использование согласно заданному сценарию; исследование вне контекста продуктa; гибридные методы).
Insights on Switching, Centering, and Gestures for Touchscreens
Новое исследование Steven Hoober об эргономике использования смартфонов, посвященное распределению жестов по экрану.
Designing Features Using Job Stories
Alan Klement рассказывает почему Персоны и User Story это вчерашний день и почему стоит использовать Job Story. Еще один хороший прием, который может сделать работу команды продукта эффективной.
A Big Article About Wee Things
Замечательное наглядное исследовании Lena Groeger о восприятии мелких деталей и об их использовании в дизайне. В продолжение темы:
The Ethics of UX Research
Nicholas Bowman, профессор West Virginia University, пишет об этике проведения пользовательских исследований. Базовые правила ее оценки: 1) Можно ли обосновать необходимость манипуляции пользователей логически или теоретически? 2) Действительно ли необходима манипуляция пользователями? 3) Несёт ли манипуляция какой-либо потенциальный вред? 4) Что будут чувствовать пользователи о компании, когда они узнают об исследовании? В продолжение темы:
UX Tips for Surveys (Презентация Геннадия Драгуна)
Советы по составлению опросов пользователей.
Understanding Personas — An Interview with Alan Cooper
Alan Cooper о понимании персонажей.
Promise, Vision, Scenario, and User Stories
Jared Spool о нескольких уровнях описания возможностей и сценариев использования продукта. Он предлагает термин “обещания”, который в общих чертах характеризует желаемое интерфейсное решение.
Eye-Tracking Study: How Users View Google Search Result Pages
Новое eye-tracking-исследование страниц поисковых результатов Google. Что поменялось за 10 лет? Исчез “золотой треугольник”; пользователи почти в два раза быстрее стали сканировать страницы; почти в полтора раза чаще начали переходить по ссылкам, находящимся на 2-4 местах на странице результатов. Здесь можно скачать подробное исследование.
Руслан Крючков из UsabilityLab рассказывает об истории: Впервые золотой треугольник на SERP был открыт в 2005 при помощи eye-tracking (тогда эта компания называлась Enquiro). Через год было проведено сравнительное исследование на нескольких поисковиках (Google, Yahoo!, MSN). В России Дмитрий Сатин, Руслан Крючков, Евгений Кулаков, Татьяна Кравчук и Мария Рыбакова-Кузнецова подтвердили это явление на отечественных поисковых системах в 2009 году. Исследование было также проведено на 50 пользователях. Там много вопросов к дизайну исследования и выводам, но треугольник — результат, в котором мы уверены более других. Интересно теперь видеть, что золотой треугольник превратился в другой паттерн. Так понимаю, главные причины этого: 1) Меняется структура SERP (раньше был более-менее однородный набор ссылок, а сейчас появились разные вставки из колдунщиков); 2) Меняется характер восприятия пользователей страницы SERP.
An Alphabet of Accessibility Issues
Алфавит проблем со здоровьем, влияющих на работу с интерфейсом. Собран на основе знакомых, не является стандартным набором персонажей.
Researching User Needs
Новый курс Tomer Sharon из Google по исследованию пользователей на Treehouse.
Design Accessibly, See Differently — Color Contrast Tips And Tools
Шикарная статья Cathy O’ Connor, эксперта по доступности PayPal. Как компания тестирует мобильный дизайн на цветовой контраст и доступность для пользователей с дальтонизмом и слабым зрением.
Designing for Dyslexia
10-20% людей — дислектики. Andrew Zusman пишет о доступном для них дизайне.
UI Peeps
Генератор микро-профилей с именем, аватаром и кратким описанием.
Почему не работают приложения, направленные на изменение поведения
Иван Замесин перевел на русский язык статью «Почему не работают приложения, направленные на изменение поведения.»
The Games User Research Book
Команда специалистов в области Game User Research ищут соавторов для книги по данной тематике.
Conducting an effective stakeholder interview
Dr. Philip Hodgson о проведении интервью с ключевыми участниками проекта.
Responsive Content Modeling
Steve Fisher описывает процедуру сбора контента для проекта, а также построения интерфейса и контент-стратегии на его основе.
Introducing the Post-it® Plus App
Компания 3M выпустила приложение Post-It Plus, которое помогает структурировать результаты брейнштормов. Необходимо сфотографировать доску или стену со стикерами и сервис поможет оцифровать их и организовать дальнейшую совместную работу. Пока только для iPhone и iPad.
Resources for Mapping the Experience with Alignment Diagrams
Куча ссылок от James Kalbach об инструменте “alignment diagrams”, которые помогают описывать бизнес-процессы применительно к пользовательским продуктам.
Complexity
Anna Viggedal пишет о разнице между понятиями “сложный” (complex) и “запутанный” (complicated) применительно к интерфейсам и социо-техническим системам. Они определяются внутренней структурой и поведением и не всегда могут быть упрощены, так что имеют свои подходы к взаимодействию с ними.
The Digital Crown — Winning at Content on the Web
Вышла книга Ahava Leibtag “The Digital Crown” о контент-стратегии. UXMatters публикует выдержку из нее (глава 2). В ней неплохая памятка для тех кто занимается дизайн-стратегией — как анализировать компанию и ее текущее состояние. В продолжение темы:
Story Map
James Buckhouse о создании Story Map и работе с документом. Не путать с Customer Jouney Map и User Story Map
Card Sorting
Детальный кейс применения карточной сортировки от Lisa Sy. Показаны интересные техники и приёмы. В продолжение темы:
Более обзорная статья от Akendi. В том числе говорит о разнице между “закрытой” (как в примере Лизы) и “открытой” сортировкой, когда респондентам предлагается самим определить категории.
Краткое практическое руководство по проведению карточной сортировки от Pierre Croft.
Validating UX Strategy Concepts Through Service Design (Презентация Ashley Hemingway)
Ashley Hemingway рассказала о способе проверки UX-cтрaтегии с помощью методов проектирования услуг на конференции UX Strat 14. Ключевые концепты стратегии сопоставляются с тач-пойнтами customer journey map. В продолжение темы:
Apple Watch
9 сентября Apple представила свою версию умных часов Watch, спекуляции вокруг которых шли уже давно. Это новая платформа для приложений, с которой многим из нас предстоит поработать в ближайшие годы. В этой ветке будут собираться материалу по проектированию и дизайну интерфейсов для них.
В одном устройстве собрано значительное количество кейсов использования часов и браслетов по всем четырем ключевым направлениям — уведомления, медицина/спорт, авторизация (оплата, вход в отели), контроллер (пульт для управления ТВ). И все это с особо внимательным пониманием того, что часы — это важный аксессуар, завязанный на индустрию моды (интересный разбор от обозревателя классический часов). Правда, от анонса ожидали во многом переопределения категории, как это случилось ранее с плеером, телефоном и планшетом, но получилось просто наиболее системное из всех решений на рынке. Которое, к тому же, зафиксировало основное понимание роли таких устройств — более-или менее жесткий придаток к смартфону (причем пока еще и без кросс-платформенности).
Есть много интересных интерфейсных решений — зуммироемо-панорамируемый стартовый экран с необычным расположением иконок приложений; второе пришествие сlick wheel в виде привычной для часов головки заводного механизма для замены части тач-жестов (проще попадать на маленьком экране, интерфейс не перекрывается пальцем). Забавно, что скеоморфизм вернулся в виде трехмерных смайликов, ачивок и других мелочей. Плотность информации в интерфейсе зашкаливает, что достаточно сильно контрастирует с более легким подходом Android Wear (два сравнения от ArsTechnica и The Verge). Но и общий посыл отличается — если у Google это более доступный экран для просмотра уведомлений, то у Apple — мини-смартфон со всем богатством функций.
Официальных гайдлайнов пока нет, но шаблоны для дизайнеров уже вовсю появляются. Для часов был создан отдельный шрифт, чем-то напоминающий Din и Roboto (The Verge и Fast Co Design), но о нем конкретики тоже нет. Часы будут выпускаться в двух размерах, но про разрешение экрана ничего опять же не говорится (Josh Worth пытается вычислить его). Информация должна появиться ближе к выходу устройства в начале следующего года.
На официальном сайте уйма фото и видео. И еще пачка картинок из презентации.
Интересные размышления Josh Clark о носимых устройствах накануне анонса.
Прототипирование микровзаимодействия и анимаций Apple Watch при помощи Framer Studio.
Josh Worth пытается вычислить разрешение экрана, которое пока не названо официально.
И ответ, показывающий что интерфейс не рассчитан на круглые экраны.
Концепты приложений для Watch и самый полный PSD с элементами интерфейса.
iPhone 6 Screens Demystified
Вышел iPhone 6+, где разрешение экрана и разрешение ресурсов, которые ему должны отдавать дизайнеры, не совпадают. За несколько часов это породило массу слухов: «Айфон будет мылить с завода?», «Новая умная система масштабирования?», «Айв сошел с ума?». Ребята из Paintcode пытаются разобраться. Структурированная таблица. В продолжение темы:
Scott Hurff адаптирует классическую тепловую карту комфортности тач-областей iPhone для новых устройств. Картинка предсказуемо печальная.
Шаблоны iPhone 6 и iPhone 6 Plus для Photoshop от Wellgraphic.
Доступность экрана iPhone 6 для большого пальца в зависимости от роста человека (людям с маленькими руками недоступно около половины экрана).
Шаблоны iPhone 6 и iPhone 6 Plus для Sketch от Marcus Gellermark.
Affinity Designer
Быстрый векторно-растровый редактор для Mac. Небольшой обзор.
Небольшой разбор первых проблем внедрения идеологии в Google.
Подробный рассказ о создании простого спортивного приложения на гайдлайнах material design.
К готовящемуся в ноябре релизу Android 5.0 Lollipop команда разработки обновила дизайн-гайдлайны. Можно скачать шаблоны для Photoshop, Illustrator и Sketch, также доступен набор системных иконок в растре и SVG.
Roman Nurik говорит, что Lollipop поддерживает SVG-графику в ресурсах для разработчиков.
Google выложила в свободный доступ набор из 750 иконок Material Design.
Chris Banes и Nick Butcher о ключевых моментах перевода приложений на новые гайдлайны.
Директор продукта David Singleton рассказывает о двух противоположных сценариях использования умных часов, которые они выяснили при исследованиях. Во-первых, это хардкорные гики, которые хотят получать всю информацию моментально и часы позволяют делать это быстрее. Во-вторых, люди, которые хотят меньше взаимодействовать со смартфоном и уведомлениями - для них это упрощенная версия основных функций телефона.
Официальных гайдлайнов по виджетам в панели уведомлений пока нет, поэтому пока можно опираться только на здравый смысл, официальные решения и сторонние приложения. The Verge собрал коллекцию интересных решений из первой волны адаптированных для iOS8 приложений.
UI Kit для Photoshop.
Гайдлайн по адаптивности приложений под образовавшееся многообразие устройств и разрешений.
Необходимые размеры иконок приложения с учетом новых устройств.
Designer’s Guide to DPI
Шикарнейший разбор терминологии и принципов работы современных экранов от Sebastien Gabriel, включая особенности передачи дизайна разработчикам. Статья в виде электронной книги.
The Sticker UI Book by Killer inc.
Необычный формат альбома для скетчей интерфейса, куда более полезный чем обычные шаблоны экранов. Он включает шаблоны для разных устройств, удобные поля для комментирования и, самое, приятное - набор стикеров с типовыми элементами интерфейса и иконками. Немного о его создателях.
Pixate
Многообещающий инструмент для создания мобильных интерактивных прототипов вышел из беты. Возможность визуализации анимаций, как от времени, так и от взаимодействия. Мгновенный «нативный» запуск на устройстве. Симпатичный интерфейс.
Сравнение работы с ключевыми функциями в Photoshop и Sketch.
В офисе Mail.Ru Group 1 ноября пройдет Sketch Meetup. Его организовывают Oleg Andrianov, Дмитрий Новиков и Алишер Якупов. Группа в Фейсбуке с полезными материалами.
Еще один инструмент для просмотра макетов на устройстве от Roman Nurik.
Плагин для Photoshop от Nikolay Kuchkarov, облегчающий нарезку для всех разрешений.
Калькулятор DPI. Он же в виде расширения для Chrome.
Еще один сервис для быстрого и красивого паблишинга, Innnk.
В последнее время анимированные GIF-изображения все чаще используются в письмах рассылки. Cossa делает обзор успешных кейсов и дает рекомендации по их уместному использованию.
Статистика устройств и клиентов для чтения электронной почты, а также их возможности.
18-20 августа в Бостоне прошла первая конференция для дизайнеров почтовых рассылок.
Lee Munroe рассказывает о том, как он работает над дизайном почтовых рассылок. Интересно об инструментарии и тестировании.
BeeFree, конструктор верстки богатых оформлением электронных писем.
Prototyping Animation with Keynote
Использование Keynote для прототипирования анимаций в интерфейсе.
POP Gets $700K To Make Prototyping Apps Easy, Releases Second Version
Инструмент прототипирования мобильных приложений получил $700 тыс. инвестиций и выпустил вторую версию.
Designing for Yosemite
Apple HIG обновился, теперь он включает в себя информацию по Yosemite.
On Web Typography
В издательстве A Book Apart вышла 11-я книга — “On Web Typography” от Jason Santa Maria. A List Apart публикует небольшую выдержку из ее 1й части.
Правда, она оказалась крайне слабой — это просто обзор базовых понятий типографики, а таких книжек и без того хватает. И что самое разочаровывающее — с минимумом про, собственно, особенности типографики в вебе. Локализация, рендеринг, нюансы подключения сторонних шрифтов и т.п. — в лучшем случае парой абзацев. Лучше почитать Александру Королькову. В продолжение темы:
Map Glyphs
Еще одна библиотека векторных карт.
60 flat styled icon sets
Иконки в плоском стиле все еще очень популярны среди дизайнеров. Martin LeBlanc, основатель Icon Finder, собрал на одной странице сразу 60 наборов.
Writing Great Alt Text (Презентация Whitney Quesenbery)
Руководство по написанию альтернативных текстов к изображениям от Whitney Quesenbery.
Wireframe Kit
Шаблон для проектирования интерфейсов в Adobe Illustrator от Chris Rowe.
28 Resources For Getting Started In UX
Подборка ссылок по пользовательским исследованиям для начинающих от Jeff Sauro.
Digital Tools for Digital Research
Инструменты для проведения исследований, используемые IDEO.
What Is the Client’s Role in User Research?
Памятка для компаний, которые заказывают пользовательские исследования. Jim Ross описывает основные этапы процесса и участие, которое заказчик должен принимать в них. В продолжение темы:
Экспериментальные Lean UX-исследования в Яндексе
Иван Замесин рассказывает об опыте использования в Яндексе как традиционного, так и Lean UX-подхода и исследованиям.
Eye Tracking in User Experience Design
Статья об ай-трекинге опросников и форм от Caroline Jarrett и Jennifer Romano Bergstrom. Это глава из их книги “Eye Tracking in User Experience Design“. Она достаточно неплохая. В ней разбирается практическое применение результатов проведенных исследований в различных приложениях и выводы из них.
How Effective Are Heuristic Evaluations?
Jeff Sauro рассказывает об экспертной оценке сразу несколькими специалистами. Выводы не очень утешительные — даже группа экспертов может не заметить критичных проблем и уделять много незначительным.
Conducting Large-Scale User Research
Jim Ross рассказывает о своем опыте проведения масштабных (150 человек) пользовательских исследований. Он дает советы по организации процесса так, чтобы задача стала подъемной.
Collaborative User Testing — Less Bias, Better Research
Alla Kholmatova о том, как сделать юзабилити тестирования более объективными и повысить их качество. На каждом из этапов вовлечь несколько исследователей: небольшая группа составляет план тестирования, проводит наблюдения и вместе анализирует результаты.
Testing Mobile: Emulators, Simulators And Remote Debugging
Обзор способов тестирования мобильных сайтов и приложений от Jon Raasch. Эмуляторы, средства удаленного подключения и другие инструменты для Android и iOS.
Demonstrate Thinking Aloud by Showing Users a Video
Небольшой секрет по проведению тестирования юзабилити от Jacob Nielsen. До начала тестирования пользователям показывается 1-минутный ролик, с примером того, как правильно надо “думать вслух”.
Как правильно проводить Lean-исследования
Перевод на русский язык статьи “The Right Way to Do Lean Research”, который сделал Иван Замесин.
Essential Visual Feedback Tools For Web Designers
Хороший обзор инструментов рецензирования сайтов и макетов от Люси Галкиной. Она описывает пять инструментов - InVision LiveCapture, TrackDuck, BugMuncher, BugHerd и Notable.
The unexpected consequences of compiling user feedback at collection
Пример использования разнoцветных клейких листочков для эффективной визуализации результатов юзабилити тестирования.
Typeform — Create awesome forms & surveys that function seamlessly across devices
Сервис TypeForm позволяет создавать нестандартные формы, лучше вовлекающие пользователя в процесс заполнения. Полезный инструмент для проведения пользовательских исследований. В продолжение темы:
Usability Testing Is Undermining UX Design
Peter Hornsby о распространенном мифе, связанном с юзабилити-тестированием. Некоторые “специалисты” верят, что без его проведения невозможно ничего сказать о качастве дизайна. Однако, во многих ситуациях можно и нужно использовать знания и опыт, например, эргономики, накопленные дизайнерами за десятилетия. В продолжение темы:
Кейс: Как я потратил деньги на консультацию по юзабилити и не получил результата
Интересный кейс использования рекомендаций, данных в экспертной оценке интерфейса, со стороны клиента. Улучшения, предложенные по результатам такого отчета повысили конверсию на незначительную величину.
Ptengine — Leading Heatmap and Web Analytics Platform
Сервис веб-аналитики Ptengine, специализирующийся на составлении тепловых карт. Позволяет изучать разницу в поведении на разных устройствах.
Be a designer who knows Xcode
Еще одно руководство по Xcode для дизайнеров от Scott Hurff.
Хороший инструментарий для создания параллакс-эффекта. Один из классных примеров.
Три механизма отображения таблиц на мобильных в одном (преобразование в карточки, настраиваемые колонки, прокрутка по горизонтали).
Библиотека для визуализации тепловых карт. Хорошо документирована, со множеством примеров и далеко идущими планами.
Скрипт для интеллектуальной обрезки фотографии по точке фокуса. Отличное решение для тех, кто автоматически создает аватарки и всевозможные миниатюры на сайтах. Больше никаких обрезанных ног!
Библиотека для реализации анимаций на вебе похожих на реальное физическое взаимодействие.
Полезный инструмент для измерения любых размеров содержимого браузера.
Дизайн-паттерны — графики, табы, меню, кнопки, формы, крутилки и пр..
Julian Shapiro о преимуществах JS-анимации над сделанной в чистом CSS.
Простая удобная утилита для визуального создания круговых CSS-градиентов.
Grid Style Sheets, еще один CSS-фреймворк для адаптивного дизайна.
Конструктор Flexbox. Полезно для тех дизайнеров, которые работают в активной связке с технологами.
Интересный инструмент для создания типографической системы, с модулями и вертикальным ритмом.
Как создать легкий и простой скрипт для одностраничных промо-сайтов.
uilang — a minimal, ui-focused programming language for web designers
Скриптовый псевдо-язык для прототипирования интерфейсов в коде. Включает поведение типовых элементов и возможность легкого описания их стиля - по сути, чуть более простая упаковка HTML, CSS и JS.
Form by RelativeWave
Совершенно внезапно обнаружился свежий Origami-подобный инструмент для интерактивного прототипирования под названием Form. Из очевидных преимуществ – возможность взаимодействовать с прототипом на устройстве на лету, так же, как при помощи Sketch Mirror.
Noodl
Новый инструмент для всего цикла прототипирования: анимации, интерактивных взаимодействий и всего процесса работы с прототипом. Проект находится в стадии закрытой беты, попросить инвайт можно уже сейчас. Они постарались не просто повторить Apple Quartz Composer, как это сделал Form, переняв все родовые травмы и недостатки, а взяв концепцию нод, реализовать удобный инструмент, подходящий именно для дизайнеров.
Экономическая логика Customer Experience
Роман Черных опубликовал свою презентацию с User Experience Russia 2014 об экономике эргономики. Ей не помешало бы более удобочитаемого оформления, но представленные в ней модели и расчеты ROI дико крутые и интересные. У Романа долгий опыт работы в большой компании (Билайн), а также тесного общения с топ-менеджментом. В продолжение темы:
Software Usability & Net Promoter Benchmarks For 2014
Коллекция метрик от Jeff Sauro со свежими данными за 2014 год.
Как придти к успеху (эргономическому)
Влад Головач об успехе интерфейса, больших экранах и мобильном дизайне.
How To Compute A Confidence Interval In 5 Easy Steps
Методичка Jeff Sauro по расчету доверительных интервалов для дискретных и непрерывных данных.
CUBI UX Model
Очень подробная и сильная модель UX от Corey Stern. Она включает 4 составляющих - контент, бизнес-задачи, цели пользователя и взаимодействие. Статья на UXMag с ее описанием.
Шаблон для описания UX-стратегии от James Kalbach. Подкаст с его участием, в котором он объясняет нюансы своей модели.
Серия статей Jim Nieters и Pabini Gabriel-Petit о том, как менять подход к UX в больших компаниях. Некоторый максимализм в подходе, но дальше должно быть интересно.
Peter Jones о необходимости системного дизайна, так же как существуют системные инженеры.
UX Strategy: Defining strategy, current states, and future states
Серия статей Austin Govella о UX cтратегии. В первой части дается определение стратегии. Это способ перехода из текущего состояния в некое желаемое будущее путем последовательного достижения промежуточных целей. Часть 2 и 3.
The Designer’s Dilemma
Durward Sobek пишет о дилемме дизайнера. В начале проекта у нас относительно полная свобода выбора возможных решений задачи, но знаний о предметной области немного. Со временем это соотношение меняется - мы глубоко разобрались в проблеме и знаем что делать, но уже достаточно далеко продвинулись в реализации решения и менять его поздновато.
Avoiding the Unintended Consequences of Casual Feedback
Иногда, один быстрый комментарий от вышего руководства может вызвать недели дополнительной работы для дизайнеров и разработчиков. Jeff Weiner, CEO LinkedIn делится своими советами о том, как правильно воспринимать “комментарии сверху”.
Understanding UX Skills
Irene Au пишет серию стaтей о том, как правильно нанимать UX-специалистов. В первой части она разбирает UX-специализации. Во второй описаний позиций, а в третьей — где найти кандидатов на UX должности?
Good UX Manager/Bad UX Manager
Peter Cho о том, чем отличается хороший UX-менеджер от плохого.
Google Ventures’ Formula For Attracting Top Design Talent
Советы по найму дизайнеров и по составлению описаний дизайнерских вакансий от Daniel Burka из Google Ventures.
“Note And Vote”: How Google Ventures Avoids Groupthink In Meetings
Об эффективном методе управляемого брейншторма, который используют в Google Ventures.
You’re My Favorite Client
30 сентября в издательстве A Book Apart вышла новая книга Mike Monteiro “You’re My Favorite Client”. Выдержки из нее и материалы по теме:
Что нужно сделать до того, как нанимать дизайнера. Если нового дизайнера просто бросить в компанию без предварительной подготовки, без изменения культуры, без менеджерской поддержки, оставить его один на один сражаться со старыми процессами, то в результате вы получите в лучшем случае послушного исполнителя — вся сила дизайна будет вам недоступна.
13 советов дизайнерам, как не испортить презентацию своей работы заказчикам.
8 секретов по поиску и найму дизайнера, как долговременного партнера.
Mike Monteiro о своей новой книге. Если первая была для дизайнеров, то вторая — для заказчиков, как им более эффективно работать с дизайнерами.
Познавательное обсуждение на Designer News о критике клиентов. Для тех, кто думает, что странные заказчики есть только на отечественном рынке.
The Guide to Minimum Viable Products
Неплохая подборка материалов по MVP в новой книге UXPin.
Margaret Gould Stewart: How giant websites design for you (and a billion others, too)
Данные могут помочь вам сделать хороший дизайн отличным, но они не способны сделать из слабого дизайна хороший. Выступление Margaret Gould Stewart (директор по продуктовому дизайну в Facebook, экс-Google/YouTube) о дизайне для продуктов с многомиллионными аудиториями.
Death To Page Views! Long Live “Acts Of Engagement”
Сервис веб-аналитики Chartbeat продвигает отслеживание вовлеченности пользователей как дополнение к традиционным метрикам вроде глубины просмотра. Они каждые 5-10 секунд отслеживают поведение пользователя на странице и улучшают понимание того, что именно он делает на сайте.
What Does Statistically Significant Mean?
Jeff Sauro продолжает курсы основ статистики и на пальцах разбирает понятие “статистической значимости”.
Is Your Responsive Design Working? Google Analytics Will Tell You
Интересный способ обсчета типов устройств с помощью Google Analytics.
Phil Sharp из UserTesting о предварительном качественном тестировании идей для A/B-тестирования.
5 примеров A/B-тестов (с более чем 303% ростом показателей).
29 советов по улучшению навыков проведения A/B тестирования.
7 Techniques For Prioritizing Customer Requirements
Jeff Sauro перечисляет 7 методов приоритизации пользовательских требований.
Feature Grading: An Introduction to the Kano Model
Пошаговое руководство по использованию модели Kano от Ori Zmora. В продолжение темы:
Профессиональный стандарт «Специалист по дизайну графических и пользовательских интерфейсов»
Специалисты компании Юзетикс совместно с Академией Современных ИнфоКоммуникационных Технологий готовят профессиональный стандарт «Специалист по дизайну графических и пользовательских интерфейсов». Работа ведется по заказу Российского союза промышленников и предпринимателей.
Сейчас готова версия стандарта, которую можно и нужно обсудить. Авторам нужна обратная связь, чтобы улучшить стандарт, который всем нам очень нужен. По ссылке вы найдете черновик, который можно комментировать прямо по тексту.
Principles Over Standards
Peter Hornsby пишет о важности определения и описания принципов дизайна продукта в дополнение к гайдлайнам. Они описывают общие ценности и идеологию, так что помогают лучше понять, почему принимаются те или иные интерфейсные решения.
Burger-Driven Design. Фреймворк Mail.Ru для унификации контент-проектов (Презентация Юрия Ветрова)
Моя презентация с конференции User Experience Russia 2014, посвященная развитию фреймворка Mail.Ru Group для унификации дизайна. В прошлом году мы запускали на его базе мобильный веб, в этот раз пошли дальше и использовали для задачи посложнее - переводим на дизайнерско-техническую платформу большие контент-проекты. Такая платформа решает сразу несколько задач:
Гарантированная унификация дизайна. Метод разработки и обновления продуктов использует единую базу кода, в которой хранятся один раз созданные и проверенные интерфейсные паттерны.
Масштабирование улучшений. Доработав паттерн в одном из проектов (например, повысив глубину просмотра в блоке новостей по теме), можно быстро раздать его остальным и поднять продуктовую эффективность всей линейки сервисов.
Постоянная актуальность дизайна. Уход от героических редизайнов раз в несколько лет к регулярной гигиене. Перезапуски отнимают много сил и теряют тысячи мелких наработок, прикрученных к продукту за долгое время его развития.
Меньше рутины для дизайнера, больше фокуса на продуктовые задачи. Наконец-то появляется время подумать о чем-то помимо бесконечной поддержки достаточного состояния дизайна.
Платформа запущена совсем недавно и там еще длиннющий список доработок и багов. Но самое сложное уже позади и результаты впечатляющие - за этот год мы сделали для обновления контент-проектов больше, чем за два предыдущих. В презентации детально описано, какой путь мы прошли и что узнали по его ходу.
Обзор митапа представителей современных СМИ, в котором они обсуждают проблемы и лучшие практики по созданию лонг-ридов. Много внимания уделено построению платформ.
W-O-S сделает свою CMS продуктом, скоро будут известны детали. Сегодня запущена новая версия сайта с кучей интересных решений и, самое главное — широчайшими возможностями по подаче статей с кучей интерактива.
PageKit — очередная “простая и удобная” CMS для создания сайтов. Отличные возможности для разработчиков, можно менять почти все.
Anand Sharma о проектировании сайта Aplizero. Крутейший пример того как в современном мире дизайнер может сделать весь продукт сам.
Немного о создании Mailbox для Mac. В статье есть куски итераций, в которых команда искала способ перенести фирменные жесты на десктоп. И интереснейший внутренний инструмент для тонкой настройки анимаций.
Очередной пересмотр дизайна Википедии. Хорош тем, что его можно пощупать вживую — авторы сделали браузерный скрипт, который перекраивает существующий сайт.
Facebook в виде карточек. Его авторы также сделали браузерный скрипт — на реальных данных даже непрошенные редизайны смотрятся интересно.
Концепт Google News от George Kvasnikov, автора одного из самых интересных редизайнов Википедии.
The Next UX Revolution — Transforming Stodgy Enterprise Applications Into Engaging Experiences
Marc Scibelli о подходе компании Infor (третий после SAP и Oracle поставщик ERP-систем) к улучшению UX корпоративных систем.
How Bad UX Killed Jenny
Интерфейсы, которые убивают. Jonathan Shariat рассказывают печальную историю об устаревших медицинских системах, до которых ни у кого не доходят руки. В результате ошибки персонала погибла девочка Дженни.
About.com’s Redesign Aims to Revive an Internet Giant
История редизайна About.com и прекрасный пример выбора стратегии (стратегии в дизайне, в отношении с пользователями) для компании.
Improving Smashing Magazine’s Performance: A Case Study
8 сентября исполнилось 8 лет Smashing Magazine. По этому поводу Виталий Фридман написал детальную статью о том, чем он занимался и о чем рассказывает последние два года — практическая оптимизация производительности адаптивного сайта.
Через трудности и ошибки к безупречному интерфейсу кассы самообслуживания
Кейс дизайна интерфейса кассы самообслуживания.
Sci-Fi, Frustrations, Flash And Forms: The Typeform Story
История создания Typeform - сервиса, предлагающего необычный подход к построению форм, когда пользователь отвечает на вопросы по одному.
X to Close — The origins of the use of [x] in UI design
История появления иконки-крестика, закрывающего окно программы. Lauren Archer копает достаточно глубоко в историю операционных систем и приложений, в итоге докапываясь до Windows 95. Daniel Oran, один из менеджеров Windows того времени, рассказывает детали ее включения в продукт. Частичный перевод на русский без выводов и конкретики.
The Internet’s Original Sin
Ethan Zuckerman еще до эпохи доткомов был вынужден окупать свой прообраз соц.сети Tripod и во многом предугадал многие из текущих рекламных моделей в интернете. В том числе придумал попап-баннеры, об изначальной задумке которых также рассказывается в статье. Материал немного вбок от тематики группы, но хорошо показывает то, как доминирующие сейчас модели монетизации формируют привычки и ожидания пользователей, в том числе по отношению к персональным данным и приватности, а это уже важно.
Allen Murray, автор дашборда Xbox, о том как его идею с промоушеном игр довели до маразма.
История создания первых баннеров в 1994. Авторы хотели избежать многих проблем старых форматов рекламы, но получилось то что получилось.
Apple’s Inspiration For The iPod? Bang & Olufsen, Not Braun
Небольшой разбор первоисточника вдохновения для click wheel, использовавшегося в первом iPod. С большой вероятностью им стал телефон Bang & Olufsen, а не радио-приемник Braun.
10th Annual Euro IA Summit Closing Plenary
Шикарнейшая статья Abby Covert об исторической проблематике информационной архитектуры и ее текущем статусе. Основана на его закрывающем выступлении десятой конференции EuroIA, прошедшем 27 сентября 2014 в Брюсселе.
Smart Watches & Wrist Bands (Pinterest)
Собираю коллекцию интерфейсов приложений для умных часов и браслетов в Pinterest. Пока там в основном Android Wear и Apple Watch, но на очереди большая пачка всего остального.
Follow Yury’s board Smart Watches & Wrist Bands on Pinterest.
Adaptive Path: Where We’re Going Next
Финансовая корпорация Capital One покупает студию Adaptive Path. Теперь она будет их внутренней студией. Обещают, что для внешнего мира в плане мероприятий ничего не изменится.
Одна из тенденций — корпорации с целью сэкономить годы, поднимаясь по лестнице зрелости UX, покупают уже зрелые агентства, превращая их в внутренние студии. Тем самым перепрыгивая ближе к верхним ступенькам зрелости. Купить уже готовое — выгоднее, чем вырастить самим, как минимум в кратко-среднесрочной перспективе. В продолжение темы:
Интересно, что в июле Capital One нанял на должность VP of Design Dan Makoski, который до этого руководил в Google дизайном проекта модульного смартфона Project Ara и работал в Microsoft над Surface 1.0.
Взгляд на сделку со стороны банковской отрасли. Интересно сравнить.
The Rise and Fall and Rise of Virtual Reality
Мощнейший спец.материал The Verge об истории и перспективах виртуальной реальности. Много отсылок к реальным продуктам и экспериментам.
Designing the Smart Bank
Интересный кейс исследования современного подхода к банкам с предложением концепции продукта для молодой аудитории. Также интересен как презентация концепции с отсылкой на исследования.
Совместное исследование Monotype и MIT AgeLab на тему комфортных для водителя шрифтов в бортовых компьютерах. Видео в дополнение.
Выступление Javier Verdura, директора продуктового дизайна Tesla Motors. Помимо прочего он упоминает и об интерфейсной комманде. Их 5 человек, большинство раньше работало на Apple.
Павел Коноплицкий собрал коллекцию автомобильных промо-сайтов в Pinterest.
The Problem With Wearable Technology, According To “Blade Runner” Designer Syd Mead
Легендарный Syd Mead, создавший концептуальные дизайны для фильмов Blade Runner, Tron и Alien, рассуждает о носимых устройствах, взаимопроникновении моды и технологии, а также о Daft Punk.
San Francisco Design Agencies Feeling the Squeeze
Peter Merholz об одной из тенденций рынка в Сан-Франциско (пока только там). Дизайн-агентствам очень сложно конкурировать с внутренними продуктовыми командами. Причины: 1) Продуктовики платят в 1,5-2 раза больше; 2) Компании сейчас более направлены на рост внутренней дизайн-компетенции, чем на найм консультантов. В этой тенденции Питер видит одну из причин недавней продажи Adaptive Path. В продолжение темы:
Gridset Responsive Report 2013
Gridsetapp публикуют результаты исследования современного дизайна 2012-2013 годов. В частности, как адаптивный дизайн повлиял на умы и настроения дизайнеров и компаний. Чувство разочарования присутствует в оценке технологии как в 2012, так и в 2013.
The End of Apps as We Know Them
Paul Adams предсказывает, что приложения будут использоваться всё меньше. Пользователи будут все больше взаимодействовать с потоками интерактивных карточек с контентом либо уведомлениями от приложений, чем с самими приложениями.
App unbundling, search and discovery
Интересный разбор двух противоположных трендов в мобильных приложениях — отпочковыванию из одного в большого в мини-приложения (Facebook, Foursquare) и наоборот, созданию порталов (популярны в Азии).
A Brief Rant on the Future of Interaction Design
Перевод на русский язык известной статьи Bret Victor от Антона Карташова.
Why a Better OpenType User Interface Matters
Использовать все возможности современных шрифтов не так-то просто. В значительной степени из-за интерфейсов существующего софта.
Some Dark Patterns now illegal in UK — interview with Heather Burns
Темная практика незаметного для пользователя подкладывания в корзину небольшого, но платного товара или услуги объявлена в ЕС незаконной и будет жестко пресекаться. С темными паттернами начинают бороться на уровне законодательства.
Software is Eating Hardware — Lessons for Building Magical Devices
Adam MacBeth, который работал над iPod, Jawbone и Pencil, пишет об особенностях создания новых устройств. В продолжение темы:
On Design Education
Dan Saffer об одной из тенденций американского дизайн образования: “22-летние дизайн-стратеги, которые сами не умеют сами дизайнить, никому не нужны”. Многие дизайн-школы переносят основное внимание на более “модные” веяния: дизайн-стратегию, проектирование систем и услуг, социальный дизайн… Эти дисциплины интересно и преподавать, и изучать, но это происходит в ущерб обучению классическому продуктовому дизайну: промышленному, печатному, интерфейсов… В продолжение темы:
5 Things Hip-Hop Teaches Us About UX Design
Хип-хап-музыканты учат принципам хорошего дизайна. В продолжение темы:
Cooper Interaction Designer
Подход к проектированию взаимодействия в Cooper и образцы их тестовых заданий.
User Experience Certification Program
Nielsen/Norman Group запустила свою программу UX сертификации, так что у CUA от HFI наконец-то появилась альтернатива. Предлагается два уровня сертификации:
Сертификат UX Master получается получается достаточно дорогим. Стоит сравнимо с годовой магистерской программой. Если вы и так собираетесь прослушать или уже прослушали 5 или более курсов на NN/g Usability Week, то почему бы не получить заодно и сертификат? Но стоит ли получать сертификат ради сертификата? Первый, кстати, уже выдали.
Professional UX Credentials — Are They Worth the Paper They’re Printed On
Anna Wichansky о существующих программах UX-сертификации.
Great digital products don’t happen by accident
David Gillis из Teehan+Lax о продуктовом дизайне.
Confessium
Признания нерадивых дизайнеров и разработчиков.
About Face: The Essentials of Interaction Design (4th Edition)
Вышло четвертое издание классики “About Face” Алана Купера. 4 уже можно купить в Kindle Store, а на O’Reiily — в виде PDF. Она же в американском iTunes.
Школа проектирования интерфейсов
Денис Бесков запустил Школу проектирования интерфейсов. В наборе программ уже есть два тренинга от Фила Смирнова и Алины Зотовой. Группа в Фейсбуке.
Intertwingled: Information Changes Everything
Отрывок из новой книги Peter Morville “Intertwingled: Information Changes Everything”. Она где-то на стыке профессиональной и культурологической. В продолжение темы:
Книга Кристофера Александера «Язык шаблонов. Города. Здания. Строительство»
На русский перевели легендарную “Pattern Language” Christopher Alexander. Книга не прикладная, а скорее концептуальная. Автор первым ввел понятие шаблонов (паттернов). После эта книга вдохновила людей начать собирать интерфейсные шаблоны, повлияла на зарождение информационной архитектуры. Возможно, именно из-за этой книги она так и называется.
Career Advice for User Experience Talent
Участники Adaptive Path UX Week 2014 в Сан Франциско делятся советами по развитию карьеры в UX.
Junior Designers vs. Senior Designers
Julie Zhuo наглядно показывает разницу между младшими и старшими дизайнерами в 6 картинках.
Subjective And Objective Design Choices
Steven Bradley о зачастую невозможных и ненужных попытках добиться полной объективности в дизайн-решениях.
Design Kit: The Course for Human-Centered Design
Бесплатный онлайн курс по Human-Centered Design. Проходит с 14 октября по 3 декабря.
Многие из них еще в проработке, однако, уже можно заказать и скачать. С кодом WCYAZ будет скидка 50% на электронные версии:
Переводы UX Crash Course от The Hipper Element
Переведены и выложены в удобном виде два курса по UX: Fundamentals и User Psychology. За это огромное спасибо девушке под псевдонимом(?) Nancy Pong.
What I Learned In My First Year as a Product Designer
Отличнейшая статья Alvin Hsia о своем первом опыте в роли продуктового дизайнера и ее особенностях.
The Boring Designer
Cap Watkins о скучном дизайнере, который предпочитает провереренные работающие решения тем, которые создают вау-эффект. Keenan Cummings отвечает ему одой о храбром дизайнере.
Alan Cooper: Talking Business and Design
Alan Cooper размышляет о бизнесе и дизайне.
The Man Who Envisioned the Internet Before Computers, Without Computers
Еще одна статья о Paul Otlet и о том, что в тот период идея интернета возникала у разных людей.
Google Form 2014
4-5 ноября 2014 года Google проводил конференцию Form в Сан-Франциско. Она посвящена связке дизайна и технологий и включает мощный состав спикеров из модных интернет-сервисов. Участие только по приглашению, но материалы должны быть крайне интересными.
UX Thursday, Detroit 2014
Аудио-записи выступлений на конференции UX Thursday, проходившей 26 июня 2014 в Детройте, США.
UI18
Видео-материалы конференции UI18, проходившей 21-23 октября 2013 года в Бостоне, США.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину. Все больше материалов в обзорах появляется благодаря им.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.