Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июнь 2014.
Паттерны и Best Practices
Stacking the Card Deck — Reclaiming Our Mobile Future with HTML5-based Cards
Christopher Tse об использовании карточек в интерфейсе. Лучший материал на эту тему — затрагиваются как концептуальные основы, так и принципы дизайна и разработки «карточного» интерфейса. Перевод на русский. Продолжение:
- Часть 2: "Архитектура карточных интерфейсов".
- Часть 3: "Паттерны карточных интерфейсов".
- Видео.
Baymard: E-Commerce Search Usability — An Original Research Study
Свежие выдержки из отчета Baymard Institute об исследовании поисковых интерфейсов на сайтах e-commerce:
You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
Хороший материал Maximiliano Firtman, развернуто доносящий важный посыл — не важно, по какой технологии вы показываете пользователю свой продукт на мобильном. Главное, чтобы она подходила под ваши задачи. Он разбирает технологические проблемы чистого адаптивного дизайна и говорит о том, что отдельная версия не так плоха при соблюдении определенных условий. В продолжение темы:
Понимание пользователя
Gender-Oriented Design in Light of the Extreme Male Brain Model
Liraz Margalit исследует разницу в онлайн-поведении мужчин и женщин. Перевод на русский.
Memory Recognition and Recall in User Interfaces
Raluca Bidiu из Nielsen/Norman Group разбирает разницу между двумя важными понятиями в когнитивной психологии — «воспоминание» и «узнавание».
How to Use Persona Empathy Mapping
Еще раз об использовании карт эмпатии. В статье есть полезный пример схемы проведения встречи по составлению карт и еще раз приведены аргументы, почему имеет смысл их делать.
Debra Levin Gelman — Design for Kids
B Rosenfeld Media вышла «Design for Kids» Debra Levin Gelman. Выдержки из нескольких глав:
The Science of Happy Design
Pamela Pavliscak провела исследование более 250 сайтов с участием 6 600 пользователей и вывела 3 принципа дизайна, который делает пользователей счастливыми: 1) Максимизация автономности пользователей (их способности самостоятельно выполнять любые задачи на сайте); 2) Использование активных и разнообразных механизмов взаимодействия; 3) Отношение к пользователям, как к друзьям в реальном мире. Достижение базового уровня юзабилити является необходимым для того, чтобы пользователи были счастливы. Пользователи редко счастливы, если процент успешного выполнения основных задач ниже 90%.
Realizing Empathy, part 2 — Praxis
Seung Chan Lim разбирает значение понятия «эмпатия» вообще и применительно к интерфейсам в частности. И говорит о том, как её использовать дизайнерам.
50 Shades of Gaming — Playing with Colour Blindness
Игровая доступность. Дизайн для людей с цветовой слепотой. В продолжение темы:
- Букмарклеты и плагин для Chrome, позволяющие имитировать 3 вида дальтонизма и подсказывать изменения в цветах для достижения контраста: Daltonize (он же в Chrome Web Store).
Audio Accessibility with Svetlana Kouznetsova
Разговор со Светланой Кузнецовой, экспертом в проектировании для людей с ограниченным слухом.
Информационная архитектура и концептуальное проектирование
How Do You Design Interaction?
С чего начинается проектированиe интерфейсов? Многие начинают с набросков: на бумаге, на доске, в графическом редакторе. Luca Leone предлагает начинать проектирование не визуально, а в текстовом редакторе — сначала описывая и обсуждая сценарии, а уже потом их визуализуруя.
Проектирование и дизайн экранов интерфейса
Google Material Design
- Интервью с Mathias Duarte и Jon Wiley об идеологии Material Design.
- Векторные иконки для Photoshop.
- Шаблоны для Adobe Illustrator.
- Воспроизведение анимации в Keynote.
- Большая коллекция скриншотов планшетных и мобильных приложений в новой стилистике.
- Ранние экраны Chrome OS в новой стилистике.
- Утечка экранов Google Play, передизайненного по Material Design.
- В вебе доступен Google Docs в новой стилистике.
Android Wear
- Сверхподробный обзор ОС с кучей экранов интерфейса.
- Экспериментальная клавиатура.
- Шаблон для скетчей.
Шаблоны и плагины для Sketch
- UI Kit для iOS 8.
- Плагин, определяющий уровень контрастности одного элемента к другому по стандартам WCAG.
- Шаблон для смартфонов на Android L и планшетов.
- Видео-курс по Sketch 3.
- Менеджер плагинов.
Best templates and widget libraries for Axure RP
Еще одна коллекция шаблонов и стенсилов для Axure. В ней есть готовые наборы для типовых проектов — интернет-магазинов, социальных сервисов, landing pages.
Brandfolder — Simple, visual brand asset sharing
Сервис Brandfolder облегчает организацию и поддержку гайдлайнов бренда, а также работу с ними всех заинтересованных. Включая интерфейсную часть.
Pentotype — Wireframes for Great Apps
iPad-приложение Pentotype для проектирования мобильных, планшетных и веб-интерфейсов. Оно позволяет создавать интерактивные прототипы и облегчает процесс обсуждения и сбора фидбека.
Useful Adobe Fireworks Resources
Обзор расширений для Adobe Fireworks от Michel Bozgounov. Хотя поддержка инструмента по сути прекращена, многие до сих пор эффективно используют его и пара лет у него еще есть. Вторая часть.
Google Noto Fonts
Красивый современный бесплатный (Apache 2.0) шрифт для всех языков от Google.
Современные редакционные CMS
Пользовательские исследования и тестирование, аналитика
Observing Usability Studies — A Guide for Stakeholders
Проходит юзабилити-тестирование вашего продукта, а вас пригласили или вы сами хотите поучаствовать в качестве наблюдателя. Как себя вести и на что смотреть?
5 Variables to Manage in a Comparative Usability Study
Jeff Sauro перечисляет пять ключевых метрик, которые важны при проведении сравнительного юзабилити-тестирования.
Визуальное программирование
Новые скрипты
- Неплохая библиотека Chart.js для отрисовки диаграмм различной сложности.
- Giflinks, автоматический полнобраузерный просмотр гифок на вашем сайте.
- Анимирование SVG с помощью CSS.
- Пакет для Node.js, который помогает следить за вашими CSS и подскажет, когда использумые цвета почти одинаковые и контраст не достаточен. Используется не слишком простая вычислительная техника слабой контрастности / сильной похожести.
- Интересная SVG-анимация иконки навигации
- Решение проблемы не слишком корректного отображения шрифтов в Chrome для Windows.
- Эффект «бумажных» кнопок на CSS.
- Как просто сделать эффект самоотрисовывающегося SVG.
- Библиотека анимаций при скролле WOW.js. Никаких jquery = не тормозит, маленький размер, дружит с animate.css.
Новое для Origami for Quartz Composer
Новое для Bootstrap
Метрики и ROI
How to Choose the Right UX Metrics for Your Product
Одностраничник, описывающий выбор правильных интерфейсных метрик для продукта, созданный по мотивам статьи Kerry Rodden из Google Ventures. Он базируется на идеологии HEART (happiness, engagement, adoption, retention, task success).
Digital Dashboards — Strategic & Tactical: Best Practices, Tips, Examples
Концептуальный подход к проектированию информационных панелей (дашбордов) от Avinash Kaushik.
Управление интерфейсными проектами, процессами и командами
Keikendo Maturity Model: Self Test
Тест на зрелость UX от компании Keikendo.
Design Sprints for Developers
Серия видео от сотрудников Google об их фирменном пятидневном формате командной работы для концептуального проектирования продукта.
How to Work with Designers
Julie Zhuo из Facebook о том, как работать с дизайнерами и как выбрать подходящий проект для них.
Lean Startup Meets Design Thinking
Eric Ries, автор lean startup, и Tim Brown из IDEO разговаривают с Google Ventures.
Продуктовый менеджмент и аналитика
10 Things I’ve Learned About Customer Development (2014)
10 уроков от Cindy Alvarez, автора Lean Customer Development. 1) Любой ответ на вопрос: «Сколько бы вы заплатили за...» — неправильный. 2) Если кто-то говорит: «Я сам не буду этим пользоваться, но уререн, что другие — будут», то никто не будет пользоваться этим продуктом. 3) Если спрашивать пользователей: «А не хотелось бы вам...?», «А не беспокоит ли вас...?», то ответом всегда будет «Да». 4) Если кто-то говорит: "… возможно, это только я один такой, но...", то ответ — «Нет». Особенно, если кажется, что ваш продукт сложен в использовании, либо у вас не четкий маркетинг. 5) Если вы хотите брать деньги за свой продукт, не спрашивайте пользователей, которые привыкли пользоваться бесплатными продуктами. Они, возможно, и станут вашими клиентами, но не раньше, чем продукт статет массовым. 6) Интереснее не та функциональность, которую хотят пользователи, а почему они её хотят. 7) Почти каждый готов сделать на словах то, о чем вы его попросите: просьба маленькая, вы полны энергии, и им не надо принимать больших решений. 8) Невозможно создать хороший продукт, если вам не нравятся потенциальные пользователи. Вы должны быть к ним как минимум не безразличны. 9) Две дижущих силы в поведении пользователей: апатия и нежелание выглядеть/ чувствовать себя глупыми. 10) Если у вас появились мысли: «Всё гораздо сложнее, чем я думал», всё на самом деле — намного сложнее. Сама книга lean Customer Development — одна из лучших по исследованию пользователей. Кардинально меняет некоторые устоявшиеся в голове концепции и подходы.
The Importance of Understanding Your Best Users
Ben Yoskovitz, автор Lean Analytics, о важности сегментации пользователей. А также о том, почему необходимо рано определить «хороших» пользователей — подгруппы, для которой и следует развивать и оптимизировать продукт в первую очередь. В продолжение темы:
- Jeff Sauro предлагает использовать NPS (Net Promoters Score) для сегментации пользователей. Детракторы — «плохие» пользователи. Они приносят «плохую» выручку, выручку, полученную за счет ухудшения отношений с пользователями. Если более 10% выручки приходит от «детракторов», то это налагает повышенные риски на компанию — они легко могут перестать пользоваться продуктом или перейти к конкурентам.
- Cennydd Bowles собрал примеры значений NPS различных компаний. У компаний «мирового» уровня NPS 50+, у большинства же — в диапазоне 5-15.
- Jeff Sauro собрал современную критику метрики NPS. Он говорит, что после десятилетия ее активного использования многие компании начинают скептически относиться к ее статусу «главного инструмента».
Ideas and/or data
Cennydd Bowles о том, в каких случаях лучше применять дизайн, основанный на идеях, а в каких — основанный на данных.
The Customer Is Mostly Wrong
Gregory Ciotti о том, что клиент почти всегда не прав.
Методологии, процедуры, стандарты
Service Design 101
Основы проектирования услуг от Lauren Ruiz и Izac Ross из компании Cooper Consulting.
Кейсы
A Look Inside Design at LinkedIn
Moses Ting, глава UX-команды LinkedIn, рассказывает о своей работе в компании.
История
Where Online Services Go When They Die
Об истории сети Prodigy, аналоге интернета из 80х, а также попытках восстановить ее данные.
Тренды
The Near Future of In-Car HMI
Студия ustwo выпустила очень сильную серию статей, посвященных анализу и предсказанию тенденций автомобильных интерфейсов. Это самое интересное, подробное и обстоятельное исследование на тему из доступных в открытом виде. Все 5 частей в виде электронной книги (PDF). Отдельные части и другие материалы по теме:
- Часть 1: Ближайшее будущее автомобильных интерфейсов.
- Часть 2: Текущее положение и как мы здесь оказались.
- Часть 3: Анализ текущего состояния, смена шаблонов.
- Часть 4: Заглядываем вперед. Модели взаимодействия.
- Часть 5: Наш опыт и наш подход к проектированию.
- Jim Ross разбирает дизайн информационной панели Toyota Prius. Дизайн меняет стиль вождения и помогает экономить топливо.
- Volkswagen купил часть R&D-команды BlackBerry, занимающейся информационными системами для авто. Их платформа на базе QNX — одна из самых интересных.
Mobile UI Design Trends 2014 от UXPin
Очередная электронная книга от UXPin, посвященная мобильным трендам 2014 года. Chris Bank сделал выжимку о шаблонах мобильного ввода. В продолжение темы:
Provide meaning with motion
Paul Stamatiou анализирует недавно представленную идеологию Google Material Design и говорит о том, что наступает новая эпоха анимации в интерфейсах, когда требуется не просто набор разрозненных переходов, а их четко срежессированная оркестровка.
Stephen Anderson — Deciphering Data through Design
Интервью со Stephen Anderson в преддверии выхода его новой книги «Designing for Understanding». Он описывает семь проблем в передаче смысла сложных понятий и концепций в интерфейсах, а также говорит о способах их решения.
Why We Don't Talk About «Wearable Software»
В этом году носимые устройства подошли к важному этапу — от хаоса десятков производителей с собственными устройствами и операционками к более зрелому рынку с несколькими хитовыми платформами и подключением стороннего софта к уже существующим устройствам. Fast Company пишет о тех, кто смещает акцент на ПО.
Dropbox's Head of Design on the Dawn of Personalized Products
Soleio Cuervo, глава дизайна Dropbox, а также второй дизайнер, нанятый Facebook (ему приписывают первоначальный дизайн кнопки 'Like'), пишет о рассвете эры персонализированных продуктов.
15 Books on Health and Design
15 книг по дизайну для здоровья и здравоохранения.
Профессиональное развитие
UX Design Practice Verticals
Nathaniel Davis предлагает модель описания нюансов профессиональной квалификации UX-дизайнеров. В продолжение темы:
Мастерство
Максим Ильяхов написал серию статей о карьере дизайнера. «Никто не хочет, чтобы вы росли. Выгодно, чтобы вы навсегда остались 'крепким середнячком'. Для этого и создаются 'зоны комфорта' и ваш выбор: оставаться в них либо покидать ли их и переходить на следующий уровень, до следующей 'зоны комфорта.'» К вопросу о гадких утятах — почему не все вырастают в лебедей, если достатoчно стать уткой. Выдержки:
- Два способа вырастить молодые таланты: брать стажеров либо создавать собственный учебный центр.
- Ещё про «зоны комфорта» и «контрольные точки».
Crowdfunding Design Education
Jared Spool рассказывает о зарождении идеи Unicorn Institute (AKA Project:Insanity) и процессе его создания.
Steve Krug — Is Usability Taking a Nose Dive?
Steve Krug о современном состоянии юзабилити и спорных тенденциях дизайна интерфейсов.
UI, UX: Who Does What? A Designer's Guide To The Tech Industry
Примеры описания требований для различных дизайнерских позиций у ведущих компаний (Apple, Facebook, Google и другие).
Design Games: Scavenger Hunt
Дизайнерские игры от Donna Spencer. В них небольшая команда весело и играючи пытается найти решение конкретной дизайнерской задаче. «Охота за мусором» — разновидность юзабилити-тестирования, направленного на поиск информации на сайте. Другие игры:
- Спроектируй домашнюю страницу — совместное дизайн-упражнение.
- Сортировка карточек.
- Подели деньги — упражнение на приоритизацию функциональности.
- Меряемся списками — можно использовать при мозговом штурме.
Важные люди в отрасли
I’m Jon Wiley, Principal Designer for Google Search. Ask me anything!
Сессия вопросов и ответов с Jon Wiley, одним из ведущих дизайнеров Google и идеологом Material design на Reddit. Много интересного, в том числе о том почему большие компании закрывают продукты и убирают функции.
Goodbye Google. Hello Capital One!
Dan Makoski, ведущий дизайнер проекта модульного смартфона Project ARA в Google, а до этого принимавший участие в работе над первым поколением Microsoft Surface, переходит в банк CapitalOne. Fast Company о причинах перехода.
30 thought leaders in Data Visualization
30 ведущих современных идеологов в визуализации данных (они представлены в алфавитном порядке).
Материалы конференций
Видео с конференции UX Poland 2014
Материалы конференции UX Poland 2014, проходившей 9-11 апреля в Варшаве.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину.
Автор: jvetrau
