Дайджест продуктового дизайна, февраль 2015
Уже почти пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-январь 2015.
Паттерны и Best Practices
Interaction Design Best Practices — Mastering the TangiblesUXPin бодро начали год выпуском целой серии электронных книг. Свежая — про дизайн взаимодействия.Non-blocking UI«s with interface previewsCallum Hart об использовании индикатора загрузки страниц, который Фейсбук предложил несколько лет назад — вместо унылой крутилки показывается структура экрана.
Коллекции примеров интерфейсной анимации
I«m the FoldИнтересный эксперимент, показывающий где заканчивается экран на разных устройствах. Хорошо видно кучкование вокруг определенных цифр. В продолжение темы:
Visual Design for White Labelled ProductsCale LeRoy из Cooper об особенностях дизайна продуктов без заданного берндирования, так называемых White Labelled Products. Брендинг настраивается под каждого конкретного клиента. Есть три подхода: 1) меняется только логотип клиента (ко-брендирование); 2) доступна полная кастомизация; 3) доступна настройка только нескольких предопределенных параметров. Автор рекомендует последний из них.
Carousel Usage Exploration On Mobile E-Commerce WebsitesKyle Peatt из Mobify провел детальное исследование по использованию «каруселей» на мобильных веб сайтах.
Design Details: Instagram для iOSBrian Lovin продолжает разбирать интерфейсные паттерны различных мобильных приложений.
Improve Validation Errors with Adaptive MessagesBaymard Institute об адаптивных ошибках в формах.
Links are broken. These three alternatives have improved our readers» reading experienceSebastian 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 FunnelChris Risdon пишет о сложных процессах покупки товаров и услуг в интернете, когда пользователь может бросать процесс оформления заказа для более детального изучения информации, а не потому что в интерфейсе что-то не так.
Natasha Dow Schull — Addiction By DesignДизайн для зависимости. Как дизайн для достижения потока, новейшие достижения эргономики и методы управления поведением могут эффективно использоваться для темных практик UX. Natasha Dow Schull замечательно рассказывает о принципах дизайна игровых автоматов в казино.
[embedded content]
The Paradox of EmpathyScott Jenson о четырех типах эмпатии в дизайне. В продолжение темы:
Designing For The Elderly: Ways Older People Use Digital Technology DifferentlyОчень хороший обзор нюансов работы с пожилыми людьми от Ollie Campbell.
Особенности дизайна в Азии
Информационная архитектура, концептуальное проектирование, контент-стратегия 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
Новое для Quartz Composer
Вышла вторая версия Origami. Можно просматривать прототипы на устройствах, экспортировать код, подключаться к макетам в Sketch и Photoshop и много чего еще. Designer«s Toolkit: Prototyping ToolsEmily Schwartzman сделала интерактивную версию своей сравненительной таблицы инструментов прототипирования.
Новое для Apple Watch
Новое о Material Design
Things I«ve Learned About Sending Email, For Web Designers And DevelopersОтличная методичка Lee Munroe для дизайнеров почтовых рассылок.
Новое для Pixate
Инструменты паблишинга
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 decisionsJeff Sauro о методах развесовки данных пользовательских исследований.Getting to Know Your Data TypesПамятка Jeff Sauro по категоризации данных пользовательских исследований.
Don«t use one way mirrors for UX researchLisa Duddington делится своим опытом работы в юзабилити-лабораториях. Она пишет о недостатках традиционной планировки лабораторий, когда используются односторонние зеркала. Такой поход устарел, вместо зеркал удобнее использовать экраны в комнате наблюдателей.
Field visits and user interviews: 7 frequently asked questionsDavid Travis о том, когда использовать полевые исследования и лабораторные тесты.
6 Voice of the Customer Tools That Can Save Your BusinessИнструменты для сбора обратной связи от пользователей.
Новое о карточной сортировке
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 для создания живых гайдлайнов.
Веб-типографика
Работа с цветом
CSS DevicesПачка шаблонов смартфонов и планшетов, сделанных на чистом CSS. Они доступны в разных цветах и ориентациях.
Как работает CSS-анимация
Новое для Framer
A Deep Dive Into Adobe Edge ReflowНебольшая обучалка по работе с Reflow.
Designers: Start Coding With uilangРуководство для начинающих по работе с uilang.
Работа с SVG
Новые скрипты
Работа дизайнера в 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 RheaDarrel 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 DangerPJ McCormick о том, как работает UX команда Amazon.
[embedded content]
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. Редакционный процесс в издании, конечно, хардкорный — все итерации правок и доработок заняли примерно полгода. Но получилось круто — теперь я знаю, каким потом и кровью достигается их уровень качества материалов. Со временем появится продолжение про контент-проекты и техническую сторону. Русскоязычная версия и републикация для сайта БЭМ.yakostro/ux-ae8a3b12a3b7»>Особенности работы UX-дизайнера в «железном» проектеОсобенности работы над интерфейсом в «железном» проекте на примере «Симкомата». Илья Александров поделил статью на две части: об особенностях «железа» и yakostro/ux-2-b39e19def99a»>конкретные решения и кейсы. Будет интереснее для практикующих проектировщиков.
Designing Twitter VideoPaul Stamatiou о дизайне приложения Twitter Video для iPhone.
Редакционные CMS
Emotional Design Fail: Divorcing My Nest ThermostatKara 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 BookChristina Wodtke выложила свою подборку книг по инфоархитектуре, которую она составляла 10 лет назад.
Тренды The Wolff Olins Report 2015Толковый отчет Wolff Olins о современной роли и смысле лидеров в компаниях, а также важности дизайн-мышления для них.Прогнозы на 2015
Автомобильные интерфейсы
On Meta-Design and Algorithmic Design SystemsRune Madsen на тему алгоритмов, генерирующих дизайн и новой роли дизайнера в таком мире.
Sorry, But Google Glass isn«t Anywhere Close to DeadДля корпоративных клиентов очки Google Glass активно поддерживаются и в этой узкой нише у них хорошие перспективы.
Skip a Beat Heart Rate Game Launch TrailerСердечный ритм как часть инпут метода теперь и на потребительском рынке. Ожидаем роста использования алгоритма, в том числе, для лечения функциональных расстройств на основе БОС в домашних условиях в игровой форме.
[embedded content]
Pebble Time — Awesome Smartwatch, No CompromisesPebble анонсировал Time, новое поколение своих умных часов. Про характеристики и сценарии использования говорить не так интересно, все платформы делают плюс-минус одно и то же.
Вот что действительно интересно — так это безумно крутая оркестровка анимации, сделанная на цветном e-ink. Во-первых, сам подход с плавной трансформацией элементов, когда все действия в интерфейсе выглядят одной большой и связной анимацией. По схожей модели работает material design и это новый уровень сложности для дизайнеров. Загрузчик Android, то что делает John Schlemmer — вот это ориентир на ближайшее время. Это вам не дешевый чит с пружинками, которые делают из интерфейса фильм Майкла Бея — половина Дрибббла сейчас уделана этими поделками.
Во-вторых, то что это возможно на электронной бумаге, которую не очень-то жалуют топовые производители. Первые Pebble имели смехотворные задержки, но новая модель выдает 30 FPS — все выглядит очень и очень плавно и эффектно. И при этом держит батарейку неделю, а не умирает к началу следующего дня. Говорят, третий YotaPhone также будет использовать цветной e-ink. Если у них получится что-то похожее — нас ждет эпоха расцвета этой внезапно оказавшейся крутой для дизайна технологии.
Fashion ecommerce — Are virtual fitting rooms the silver bullet? Статья об использовании виртуальных примерочных при онлайн продаже одежды. Есть аргументы за, есть моменты ставящее под сомнение эффективность этих решений. В общем, есть куда двигаться. А статью можно почитать для общего развития и чтобы посмотреть примеры примерочных сервисов.
Новое о виртуальной реальности
Носимая электроника
Для общего и профессионального развития Applied UX Strategy, part 2: The Product DesignerНа UXMatters вышла моя вторая статья в рамках серии о UX-стратегии, посвященная продуктовому дизайнеру. Это значительно дополненная и переструктурированная версия недавней презентации на тему. Русскоязычная версия. В продолжение темы: Review: Online UX CoursesArun Joseph Martin проводит сравнительный обзор дизайна четырех сайтов с онлайн курсами по UX: All You Can Learn от UIE, Udemy, Lynda.com и SkillShare. Другие обучающие программы:
Everyday IA21 февраля — международный день Информационного Архитектора. В статье поздравления от Louis Rosenfeld. Тема 2015 года — «Архитектура счастья».
[embedded content]
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 ProcessSenongo Akpem рассказывает на Smashing Magazine о создании хороших кейсов в портфолио. Как сфокусироваться на задаче и результате, а не проектных артефактах. В продолжение темы:
The UX Reader: Книга о работе UX-команды MailChimpПеревод книги UX Reader от команды MailChimp — это сборник статей из их рассылки. Часть 2.
Quickpanel: UX CertificationsМнения известных специалистов о UX-сертификации.
Эргономист № 39, февраль 2015 (PDF)Свежий номер Бюллетеня «Эргономист» посвящен пользовательским интерфейсам.
Khan Academy InternshipsElizabeth Lin о своем стажерстве в Khan Academy.
Jonathan Shariat — Tragic DesignJonathan Shariat пишет книгу «Tragic Design» об интерфейсах, которые убивают.
Люди и компании в отрасли Покупки дизайн-студийHow Paul Rand Pioneered The Era Of Design-Led BusinessО том, как Paul Rand добивался изменений в отношении к дизайну в крупных компаниях.
Why Design Needs Entrepreneurship (and Entrepreneurship Needs Design)Christina Wodtke о своей карьере, когда она из дизайнеров перешла в бизнес и вернулась обратно уже более опытной.
Jeffrey Veen: NextJeffrey Veen уходит из Adobe в True Ventures в качестве дизайн-партнера. В продолжение темы:
How Startups Valued At $1 Billion Or More Put Design FirstВыдержка из исследования WSJ о крупнейших бывших стартапах, которая приводит компании, делающие особый фокус на дизайне. Полная версия списка.
Новые сессии AMA
Why Samsung Design StinksKevin Lee, бывший глава по продуктовой стратегии и UX в Samsung Design America, о разнице между дизайн подходами Samsung и Apple.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
