Дайджест продуктового дизайна, март 2015
Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-февраль 2015.
Паттерны и Best Practices
Baymard E-Commerce Product List Usability: Report & BenchmarkНовый отчет Baymard Institute, посвященный страницам списка продуктов на сайтах электронной коммерции. Публично доступные выдержки из него: Getting Users Back From MultitaskingBen Watanabe разбирает режим многозадачности в iOS как еще один способ сделать работу с приложением полезнее. В нем показывается уменьшенная версия последнего открытого экрана, хотя было бы куда полезнее заменять ее на выжимку свежей информации из приложения.
Инфографика: Шпаргалка по размерам графических элементов в социальных сетяхПодробная шпаргалка по размерам графических элементов в социальных сетях. Facebook, Twitter, LinkedIn, Google+, Pinterest, Instagram, YouTube, Вконтакте, Мой Мир, Одноклассники.
The Low Hanging Fruit of User OnboardingИстория способов обучения пользователей на старте работы с продуктом и взгляд на их будущее от Des Traynor.
Выдержки из свежей книги UXPin про дизайн взаимодействия
Continuous Input In Mobile Devices — Pain Or Gain? Игорь Фастовский разбирает способ клавиатурного ввода на мобильных с помощью swype-подобных жестов. Он предлагает несколько улучшений для него, позволяющих решить две главные проблемы — часть символов не видна, да и пользователь не всегда помнит, где находится следующая нужная ему буква. Решение спорное, но интересное.
Accessibility APIs: A Key To Web AccessibilityПро технические аспекты создания доступной среды в веб-браузере и немного про историю вопроса. С одной стороны статья для технарей, но юзабилити должно быть междисциплинарной областью. Без понимания ограничений или возможностей, которые нам представляют технологии, невозможна эффективная работа. А в этой статье очень доходчиво объяснено, на что можно обращать внимание при работе над доступностью веб-среды.
Паттерны анимации в известных приложениях
Beyond Blue Links — Making Clickable Elements RecognizableHoa Loraner приводит список правил выделения интерактивных элементов в интерфейсе.
Niice — A search engine with tasteВышло приложение Niice для iOS, инструмента для создания мудбордов.
Customers Who Bought This Item Also Bought… Affinity Analysis ExplainedJeff Sauro о том, как работает формула предложения похожих товаров в интернет-магазинах. В статье есть наглядные расчеты, показывающие, как проверяются взаимосвязи между ними.
Как длина посадочной страницы влияет на ее конверсиюКогда выбирать короткую, а когда длинную версию.
UX Archive AnimatedТеперь UX Archive тоже собирает примеры анимации в мобильных приложениях.
Mystical guidelines for creating great user experiencesЗабавная параллель дизайн-процесса с тем, как Тора описывает процесс сотворения мира. Скорее смешно, чем полезно, но с этой стороны еще никто не заходил.
The Curse of the Mobile StrategyJared Spool о «проклятии» мобильной стратегии. Концентрация только на одном канале значительно сокращает выбор возможных вариантов. Следует думать и действовать на уровне общепродуктовой стратегии, не ограничиваясь одним из них.
Понимание пользователя 67 Ways to Increase Conversion with Cognitive BiasesJeremy Smith собрал крутую коллекцию из 67 когнитивных искажений, которые используются для управления поведением пользователей. Коллекция достаточно серьезная и обширная. Цепляет, что статья начинается с противопоказаний к использованию и принципа «не навреди».Winning Over Wary ParticipantsЛюди ведут себя по-разному, в том числе и участники юзабилити-тестирования. Для некоторых участников тестирование — стресс, излишние переживания. Jim Ross дает несколько поведенческих приемов, которые позволят предотвратить либо уменьшить излишнее волнение пользователей во время тестирования.
People Don«t Read, They ScanПодборка теорий и концепций на тему того, что пользователи скорее сканируют, а не читают тексты в вебе. Концовка и выводы смазаны, но в статье много полезных отсылок по этому вопросу.
Positive Design Reference GuideКнига «Positive Design Reference Guide» от S.Jimenez, A.E. Pohlmeyer и P.M. A.Desmet, которая собрала 29 моделей, теорий и фреймворков, посвященных «well-being-driven»-дизайну, оставляющему у пользователя хорошие впечатления от использования.
Дизайн для стран Азии
Change Blindness — Why People Don«t See What Designers ExpectKathryn Whitenton о «слепоте к изменениям» — почему пользователи не замечают некоторые небольшие изменения на сайте или в приложении, которые они, по идее создателей продукта, должны были заметить. Например, появление сообщений об ошибках или об успешном завершении, фильтрацию результатов.
Understanding Context: Environment, Language, and Information ArchitectureВыдержка из книги Andrew Hinton «Understanding Context: Environment, Language, and Information Architecture». Книга посвящена пониманию текущего контекста пользователя, а в этой главе говорится о важности историй в описании опыта взаимодействия.
In Design, Empathy is Not EnoughDan Saffer о том, что иногда эмпатии не достаточно для создания хорошего дизайна. Для оптимального результата нужно соблюдать баланс между сопереживанием пользователю и наблюдением за переживаниями пользователей с беспристрастной точки зрения. Обе крайности не приводят к лучшим результатам. В продолжение темы:
Дизайн для пожилых людей
Информационная архитектура, концептуальное проектирование, контент-стратегия Card GeneratorПростой онлайн-сервис для подготовки карточной сортировки от Lukas Mathis. Нужно вписать термины в столбец и можно получить их печатную версию, размеченную по карточкам.Service Design: An Introduction to a Holistic Assessment Methodology of Library ServicesПамятка на тему основ проектирования услуг и кейс их применения в библиотеке Университета Мичигана. Новой информации мало, но достаточно хорошо и подробно разложено по полочкам.
Проектирование и дизайн экранов интерфейса Adobe Comp CCAdobe выпустил приложение Comp CC для прототипирования на iPad. В основе мало чем отличается от других подобных инструментов, но на практике очень приятные решения в мелочах. И самое главное — наработки можно перекинуть в InDesign, Photoshop или Illustrator для последующей доработки. Ну и в целом оно построено на технологиях Adobe, а значит отлично завязано на остальные сервисы — в том числе Typekit. В его создании участвовал Khoi Vinh.Bind — Building an experimental UI design toolAlastair Monk делает свой инструмент для дизайнеров Bind. Попробовать его пока нельзя, но он рассказывает о его основных принципах — версионность с Git, адаптивность по умолчанию с использованием Grid Style Sheets.
Napkin — Design quick mocks, directly on your phoneЕще одно приложение для создания прототипов мобильных приложений прямо на телефоне. Пока только iOS.
Новое для Sketch
Balsamiq 3Вышла третья версия Balsamiq.
Introducing Noun Project for MacThe Noun Project выпустили приложение для Mac. Подписка стоит $9,99 в месяц, есть 14-дневный пробник.
Pixel SquidЗарождается новый тренд — стоки изображений с возможностью детальной настройки перед скачиванием и легкого использования после него. Первый — выбираете из быстро пополняемой коллекции изображение, подбираете нужный ракурс (!) и получаете изображение в PSD; все по слоям, даже освещение; маски для быстрого выбора и быстрого изолирования. Второй — Illustrio — векторный сток, перед скачиванием вы можете изменить множество параметров (для каждой картинки свои), например, удлинить руки у робота или перекрасить цвет медальки. В продолжение темы:
ai2htmlПлагин для Adobe Illustrator, позволяющий перегонять графику из макетов в HTML5.
Nietzsche IpsumГенератор текста в духе Ницше вместо lorem ipsum.
Работа с iOS8
Инструменты паблишинга
How To Create Effective App Screenshots for Your App PageТолковая инструкция по подготовке скриншотов для магазинов приложений Android, iOS и Windows Phone. Melanie Haselmayr приводит чеклист необходимой информации и графики для различных платформ, а также разбирает несколько подходов к сборке самих иллюстраций. В продолжение темы:
From Page to Stage to Screen — Designing an Omni-Channel ExperienceTraci Lepore пытается выделить особенности среды для типов платформ — настольные ПК, планшеты, телефоны, киоски, почтовые рассылки, социальные сети. У каждой свои возможности и ограничения, которые важно учитывать при кросс-канальном взаимодействии между ними.
Новое для Material Design
Новое для Pebble
Apple Watch
Новое для Android Wear
Пользовательские исследования и тестирование, аналитика Evangelising user researchВремя толстых отчетов, которые никто не читает, прошло. David Travis дает обзор простых и эффективных lean-методов анализа и представления результатов пользовательских исследований.The User Is DrunkОтличный новый подход к тестированию интерфейсов — Richard Littauer за $250 проверит ваш сайт в пьяном состоянии. На выходе отчет с найденными проблемами и скринкаст.
How Hard Are Your Surveys to Take? Jeff Sauro предлагает методику проверки пользовательских опросов для того чтобы их результаты были более качественными. Он назвал его SRS (Survey Respondent Score) и это что-то вроде нильсеновских эвристик, по которым рекомендуется прогнать опрос перед его запуском.
A Beginner«s Guide to Web Site OptimizationХорошая методичка по ходу A/B-тестирования от Charles Shimooka. Как координироваться с другими командами, выбирать инструментарий, анализировать результаты.
Does Response Timing Matter in Online Research? Jeff Sauro пытается понять, насколько влияет скорость ответа респондентов в опросах на качество оценки. Это позволит использовать данные по ходу исследования, не дожидаясь его окончания. Проводившиеся ранее исследования либо не показывают влияния, либо говорят о том, что отвечающие быстрее более благосклонны. Выводы из его эксперимента показывают, что значимого влияния нет.
Should Your Entire Product Team Observe Usability Testing? Дискуссия на UXMatters о том, почему важно приглашать всю команду на сессии пользовательских исследований.
Uxeria — Remote usability testing and marketing toolЕще один инструмент для удаленного юзабилити-тестирования Uxeria. Все достаточно стандартно по набору возможностей.
Визуальное программирование и дизайн в браузере Tumult Hype 3 Pro — The Next Revolution in HTML5 AnimationВышел релиз третьей версии Hype Pro. Интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.Новое для Quartz Composer
Компонентные системы и живые гайдлайны
Веб-типографика
CSS-анимация
Работа с SVG
Работа с цветом в вебе
Работа с Flexbox
Новые скрипты
Xcode для дизайнеров
Метрики и ROI One Magic Formula to Calculate User Experience? Wouter de Bres пытается вывести универсальную формулу UX. Он использует параметры времени загрузки (технологической и когнитивной), ценность и качество взаимодействия. Есть много спорных моментов и нестыковок, но сама по себе идея интересная.Дизайн государственных сайтов
Управление интерфейсными проектами, процессами и командами No Dickheads! A Guide To Building Happy, Healthy, And Creative Teams.Преприятнейшая духоподъемная статья о командообразовании от Rhys Newman. Он достаточно подробно разбирает ценности, которые должны лежать в основе сильной и слаженной команды, способной создавать крутые продукты. Один из лучших материалов на тему.Understanding and Influencing BusinessLiam Friedland пытается переложить цепочку создания добавленной стоимости Майкла Портера на дизайн-проекты.
What does Pair Design look like? Парное программирование — достаточно известный метод. Chris Noessel и Suzy Thompson из Cooper рассказывают о парном дизайне.
False DichotomiesLukas Mathis о том, как избегать ложной дихотомии при обсуждении дизайн-решений. Часто в процессе спора команда разделяется вокруг пары вариантов и накаляет обстановку спором, вместо того чтобы копнуть дальше и найти другие подходы.
Продуктовый менеджмент и аналитика Overthinking vs. Underthinking — Finding the Sweet SpotХорошая колонка Kingshuk Das о перекосах в чистом дизайн-мышлении и классическом стратегическом бизнес-планировании. Первый генерирует уйму мотивирующих, но не привязанных к жизни и бизнесу идей, второй — бесконечный набор аналитических материалов, в которых сложно сделать осознанный выбор. Он предлагает таблицу ситуаций, в которых применим первый и второй подходы.Кейсы Disney«s $1 Billion Bet on a Magical WristbandDisney MagicBand, в дизайне которого участвовали frog — возможно, самый большой UX-проект десятилетия.Все по графику: как мониторинг активности пользователей на главной Mail.Ru помогает жить и…Моя коллега Olya Kuritsyna рассказывает об аналитике главной страницы Mail.Ru в связке с крупными событиями в стране. Интересно о том, как офлайновые события влияют на работу большой аудитории с веб-сервисами.
Considerations When Conducting User Research In Other Countries — A Brazilian Case StudyClaire Carlson делится опытом проведения пользовательского исследования в Бразилии. Что нужно учитывать на этом рынке в частности и в целом при проведении международных исследований с выездом в страну.
Кейсы редизайна
Тренды Readable WearablesОткрывается новая эпоха для веба — адаптивность учитывает умные часы. Matt Griffin рассказывает о том, как они адаптировали сайт студии Bearded для совсем маленьких экранов.Google HATES Your Non Mobile SiteCraig Tomlin о новых правилах поисковой выдачи Google, которая теперь учитывает не просто наличие мобильной версии сайта, но и ее качество. По словам коллег, компания обращает внимание даже на соответствие возможностей большой и мобильной версии. В статье простая методичка по поиску таких проблем. В продолжение темы:
Фаблеты
Автомобильные интерфейсы
Design In Tech Report 2015Доклад John Maeda о значительном увеличении роли дизайна в современных технологических компаниях за последние несколько лет. Дизайнеры основывают успешные компании, крупные компании покупают дизайн-студии, дизайнеры становятся партнерами в компаниях венчурного капитала.
Виртуальная и дополненная реальность
[embedded content]
Для общего и профессионального развития UX ReactionsКоллекция гифок на злободневные аспекты дизайнерской работы. Хороший способ разнообразить проектную переписку.The Web«s Grain by Frank ChimeroСтатья на основе презентации Frank Chimero о профессиональной философии, в которой он пытается пересобрать текущее понимание роли и задач дизайнера в современном вебе. Интересный подход к адаптивному дизайну и в целом среде, для которой создаются продукты.
Helvetica / Objectified / Urbanized: The Complete InterviewsВышла книга «Helvetica/Objectified/Urbanized: The Complete Interviews», собравшая 100 интервью из трех известных фильмов по дизайну. Fast Co Design публикует часть беседы с Dieter Rams оттуда.
Анонсы тренингов и семинаров
Новые онлайн-курсы
Designing for MedicalTed Goas пишет об особенностях работы дизайнера в компании, делающей медицинские сервисы. Из-за жестких законов по охране личных данных в отрасли повышенная секретность, а оборудование у пользователей зачастую доисторическое. Но сами задачи и возможность помочь реальным людям дико интересны.
Critical SharksОчень толковый дискурс на тему того, можно ли критиковать работы крупных компаний. Конечно, им приходится учитывать тысячи нюансов и действовать в жестких рамках ограничений времени и ресурсов, плюс все это в агрессивной конкурентной среде. Но без диалога в индустрии ей будет сложнее развиваться. Сам повод (выход iOS7) уже протух, но материал свежий и тема все равно актуальна. Третья часть по ссылке самая толковая. Часть 1 и 2.
Перевод книги MailChimp «The UX Reader» от ФРИИ
Web UI Design for the Human Eye — Colors, Space, ContrastЕще одна книга от UXPin в этом году, на этот раз про цвета, отступы и необходимый уровень контраста в интерфейсах.
Выдержки из книги Golden Krishna «The Best Interface is No Interface»
Эргономист № 40Вышел в свет очередной, 40-й выпуск бюллетеня «Эргономист». В нем вы найдете материалы, посвященные проблемам профессиональной оценки и отбора персонала, информацию о новых конференциях и публикациях, а также несколько забавных эргономических «диверсий»
The Value of Apprenticeships in Cooking and Product DesignMelissa Mandelbaum сравнивает опыт стажерства в дизайне с тем, как учатся начинающие повара и рассказывает о своем приходе в профессию.
Люди и компании в отрасли The Demise of LayerVault and the Market for Creative ToolsЕще одна внезапная новость в этом году — версионная система для дизайнеров LayerVault закрывается. Последний год-полтора новые инструменты для дизайнеров появлялись почти каждую неделю, а тут вдруг уход с рынка одного из старейших и известнейших среди них. Khoi Vinh размышляет, почему и коснется ли это остальных. Возможно, это связано с покупкой в чем-то схожего сервиса Pixelapse Дропбоксом — появился монструозный конкурент, который сильно подрезал перспективы развития.How they got there — A book by Khoi VinhKhoi Vinh выпустил книгу «How They Got There» четырнадцати подробных интервью с известными дизайнерами. Они рассказывают о своей карьере в деталях, со всеми ее странными поворотами. В качестве пробника опубликовано первое из них, с UX-исследователем Erika Hall. Оказалось, что она какое-то время жила в России и немного знает язык. В продолжение темы:
Новые сессии AMA
Материалы конференций Conference Review: UX Strategies Summit 2014, part 1Отчет Pabini Gabriel-Petit о конференции UX Strategies Summit 2014, проходившей 10–12 июня в Сан-Франциско, США. Достаточно подробный конспект нескольких ключевых выступлений, хотя Kelly Goto свою презентацию повторяет уже не первый год.Видео с Interaction15Видео с конференции Interaction15, прошедившей 9–11 февраля в Сан-Франциско, США.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
