Дайджест продуктового дизайна, сентябрь 2015

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-август 2015.

Рубрика «Интерфейсы» на vc.ru

vc.ru: Объявляем охоту на интерфейсные кейсы из России
В начале сентября перезапустился «Цукерберг Позвонит», который теперь называется vc.ru. Я стал одним из кураторов рубрики «Интерфейсы» — на пару с Филиппом Концаренко и Антоном Фроловым. С прошлого года на сайте выходит мой дайджест, а еще раньше я давал комментарии к каким-то из переводов. Теперь сотрудничество станет системнее.

Рубрика «Интерфейсы» на vc.ru

Мы составили интересный план по контенту, который поможет сделать и без того востребованный источник русскоязычного контента по интерфейсам одним из лучших. В течение полугода он должен материализоваться. Среди задач:

  1. Публиковать интересные отечественные кейсы. Мы составили шаблон для них, позволяющий сделать толковый рассказ. Просто студийные пошаговые описания макетов не годятся, нужно описание бизнес-проблем и того, как редизайн решил их.
  2. Писать обзоры отечественных и западных инструментов для дизайнеров (структура). Вышел первый материал на ее основе про украинский сервис Mockup.io. На подходе еще пачка.
  3. Наладить перевод всех 20 статей, попадающих в выжимку из дайджеста для vc.ru. Конечно, нужно знать английский язык, чтобы иметь доступ ко всей современной публицистике. Но переводы облегчат жизнь многим.
  4. Сессии вопросов и ответов (AMA) с отечественными дизайнерами. Первый опыт с командой компании Ценципер, делавшей редизайн Почты России, недавно завершился (статья-интервью на его основе). Будем продолжать.

Недавно Владислав Головач выдвинул крутую инициативу по мотивации русскоязычных авторов статей по дизайну. Тема действительно больная — у нас на рынке происходит уйма интересных вещей, но пишут об этом мало. Так что профессия выглядит исключительно бедно в этом плане, если сравнивать с англоязычными публикациями. Как так?!

В общем, если у вас есть хорошие кейсы, желание написать памятку по работе с одним из новых инструментов для дизайнеров, ну или добротную колонку с собственными мыслями по неизбитой теме — пишите нам. Шаблон для кейсов и обзоров инструментов.

Паттерны и Best Practices

Motion and interface design — Continuity and expectation
Хороший посыл Issara Willenskomer о том, что анимация в продукте должна быть консистентной, к которому он подводит теоретическую основу под свои тезисы.

How to fix a bad user interface
Одна из лучших статей на тему пустого состояния интерфейса от Scott Hurff. Он разделяет их на пять стадий — нет данных, загрузка, мало информации, ошибка, идеальное состояние.

The UI Stack

Type Sizes for Every Device
Steven Hoober описывает оптимальные размеры шрифта для разных устройств в зависимости от размера экрана и положения пользователя. В конце статьи идет полезная сводная таблица.

Type Sizes for Every Device

How to display threaded discussions on the web
В блоге Rian van der Merwe сравниваются разные подходы к отображению комментариев в ветвистых обсуждениях. Плюсы, минусы, подводные камни.

How to display threaded discussions on the web

Product List Usability — Avoid ’Quick View’ Overlays
Новое исследование Baymard Institute о промежуточных попапах с информацией о продукте в интернет-магазинах. Это плохая практика, поскольку пользователи воспринимают их как основную карточку товара, хотя информации там совсем мало.

Product List Usability — Avoid ’Quick View’ Overlays

Form Usability — 5 Requirements for Slider Interfaces
Christian Holst из Baymard Institute описывает проблемные места слайдеров. Они имеют уйму проблем и полезны далеко не всегда. Статья дает рекомендации по грамотной реализации этого элемента управления. В продолжение темы:

Представление контента в виде карточек

Работа с уведомлениями

Spatial Interfaces
Перевод на русский очень интересных размышлений Pasquale D’Silva на тему того, как представить карту взаимодействия с продуктом в виде многомерного пространства. Это пространство может быть как простым, двухмерным, так и более сложным. Если четкая модель есть, то пользователю будет гораздо проще работать с приложением. Он приводит удачные примеры и полную кашу, которой почему-то славятся музыкальные сервисы.

The Visual Storyteller’s Guide to Web UI Design
Новая книга от UXPin о том, как донести визуальный посыл при помощи картинок, видео, взаимодействия, стилей, на примерах от Tesla, FitBit, Microsoft и Squarespace.

Smart TV

Гайдлайны платформ и компаний

Apple iOS 9
9 сентября показана финальная версия iOS 9. Начиная с iOS 7, я хожу с бета-версиями операционки на телефоне. В этот раз изменения оказались мелкими и во многом странными — два поиска (вытягивание вниз и слева от первого экрана), режим многозадачности с худшей комфортностью для тача, топорное решение с возвратом к предыдущему приложению в статусной панели. Разве что стабильность работы, вроде как, начала улучшаться.

iOS 9

Оказалось, самое интересное ждало анонса force touch и taptic engine — все главные изменения интерфейса касаются их. В ОС добавлен целый пакет решений, сильно сокращающий и упрощающий сценарии работы с приложениями: быстрые действия с домашнего экрана и попапы для показа ключевой информации без перехода в приложение. Это очень и очень круто, делает телефон еще более мощным инструментом и дает кучу возможностей дизайнерам. Завтра с утра будем обсуждать, как это использовать в наших приложениях.

Другое дело, что большинство из показанного долгие годы называлось «long tap» и не требует дополнительных технологий. Разве что контекстное меню в иконке на главном экране (сейчас лонг-тап вызывает режим настроек) и вызов многозадачности свайпом с усилием из-за левого края экрана — но аффорданс этого жеста не лучше классического решения с двойным нажатием на кнопку «Домой». Да и сам лонг-тап (aka 3D touch — без маркетологов Самсунга не обошлось) страдает от отсутствия аффордансов (на это пеняли апологеты iOS, видя решение в Android и WinPhone). Ну а показанный быстрый просмотр фото в Instagram и вовсе бессмысленный — это дополнительный путь в интерфейсе, не дающий никакой ценности относительно перехода в отдельный экран. Кроме того, все эти операции с 3D touch чаще требуют использовать обе руки. Хотя в любом случае жест пока еще непривычный и надо смотреть его вживую. Наверняка он даст кучу интересных возможностей играм.

Отдельно посмеялись про режим работы почты а-ля Tinder — тема постоянно всплывала в рабочих обсуждениях, но только в формате стеба (правда, у них в тот же день был анонсирован супер-лайк, так что есть куда стремиться). По факту, теперь любое приложение может внедрить это интерфейсное решение к себе. Уже пошли концепты на Dribbble.

Полезные материалы:

Apple TV Human Interface Guidelines
Показана новая версия Apple TV, операционная система которой получила название tvOS. Уже доступны гайдлайны для нее. Интерфейс стал современным, в духе iOS и MacOS, к возможностям управления добавился пульт с жестами в духе Nintendo Wii и тач-поверхностью. Он работает без курсора, в месте наведения происходит увеличение элемента на экране с интересным эффектом параллакса.

Apple TV

Еще из интересного описывается два действия у пульта — «тач» и «клик». Также дается рекомендация пропускать вступления к играм и видео по действию пользователя. Другие материалы:

Apple Watch

The U.S. Digital Services Playbook
Скоро весь американский государственный интернет приобретет единое лицо, так как правительство официально опубликовало альфа-версию дизайн-стандартов. Анонс гайдлайнов с подводкой о проблематике.

The U.S. Digital Services Playbook

Material Design

Android Wear

iPad

Понимание пользователя

Designing Safer Web Animation For Motion Sensitivity
Val Head поднимает достаточно новую проблему — accessibility для интерфейсной анимации. Некоторый процент людей страдает от укачивания и для них современные продукты, напичканные изощренными переходами, не очень-то комфортны. Она рассуждает о конкретных проблемах и предлагает даже задуматься о единой кнопке отключения анимации на сайте.

Designing Safer Web Animation For Motion Sensitivity

Why Performance Matters — The Perception Of Time
Денис Мишунов рассказывает о бюджете оптимизации производительности для веб-сервисов. Очень интересно, как он высчитывает оптимальное время загрузки для сервиса с учетом особенностей восприятия и состояния конкурентов.

Why Performance Matters — The Perception Of Time

Исследование физических ограничений пользователей при работе с планшетом
Моя коллега Ксения Стернина делится результатами последнего юзабилити-исследования. Она изучала физические ограничения при работе с планшетом. По результатам исследования удалось создать карту комфортных областей для iPad Air 2.

Accessibility

Microsoft Inclusive Design Toolkit
Руководство Microsoft по безбарьерному дизайну, который касается, в том числе, людей с ограничениями. 20-минутный фильм о нем.

Информационная архитектура, концептуальное проектирование, контент-стратегия

Content Strategy A Guide for UX Designers
Очередная книга (четвертая) от GatherContent про работу с контентом, на этот раз с ориентацией на проектировщиков. Это скорее набор хороших практик, но, в силу редкости толковых материалов по работе с контентом, она должна быть интересна многим.

https://gathercontent.com/resources/content-strategy-a-guide-for-ux-designers

Chaos Method of Requirements Prioritisation
Геннадий Драгун описывает метод обратного хаоса — простой и эффективный способ приоритезации требований.

Customer Journey Map

Audience-Based Navigation — 5 Reasons to Avoid It
Katie Sherwin пишет о проблемах навигации, которая разделена по группам целевой аудитории. Большинство реализаций заставляют пользователей теряться в попытках понять, к какой именно группе они относятся, а также имеют проблемы с неверными ожиданиями.

Проектирование и дизайн экранов интерфейса

Axure RP 8 Beta is Now Available
В августе появилась возможность поставить бета-версию Axure RP 8. По ссылке полный список нововведений, а в самом блоге продукта детально рассказывается о каждом из них.

Axure RP 8 Beta

Frontify — Collaboration for Web Designers and Front-End Developers
Продукт недавно переродился, теперь это мощнейший инструмент для создания гайдлайнов. Очень, очень круто!

InVision

Sympli
Инструмент для передачи дизайна от дизайнеров разработчикам. Основное его отличие от уже существующих решений в том, что поддерживается несколько графических редакторов (Photoshop и Sketch). А для разработчиков, помимо веб-приложения, предоставляются расширения для IDE (Android Studio и XCode), которые позволяют сэкономить время на натягивании дизайна на приложение. В данный момент проект в бете и бесплатен, после релиза он будет продолжать оставаться бесплатным для ограниченного количества проектов.

Sympli

Atomic ― Interface design software for professionals
Бета завершена, проект официально запущен. От Invision/Marvel выгодно отличается наличием векторных слоев, для которых можно вручную прописывать CSS (привет закругленные уголки, ага) и более тонкой настройкой анимации. Из минусов — нет даже вертикальной прокрутки, что ограничивает работу со многими макетами мобильных приложений плюс ресурсы надо добавлять самостоятельно, нет ни автопарсинга ни плагинов.

Создание интерактивных макетов приложений при помощи Mockup.io
Mockup.io — онлайн платформа для создания и презентации прототипов мобильных приложений с возможностью тестирования на реальных устройствах (iOS и Android). Позволяет работать с прототипами для iOS- и Android-устройств, Apple Watch, а также для устройств с кастомными (настраиваемыми) размерами экранов.

Vectr
До кучи инструментов дизайна: Vectr, браузерный векторный редактор. Сайты, полиграфия и т.п.

Principle

Sketch

Сравнение инструментов прототипирования

Zeplin

Readymag

Пользовательские исследования и тестирование, аналитика

10 Best Practices For Competitive UX Benchmarking
Пачка советов Jeff Sauro по проведению сравнительных исследований.

Опросы

New Mr Tappy — A filming rig for mobile and tablet usability testing
Новая версия Mr.Tappy — крепления для тестирования мобильных устройств.

Presumptive Design — Design Provocations for Innovation
Отрывок из книги Leo Frishberg и Charles Lambdin «Presumptive Design: Design Provocations for Innovation». Часть 1, определение термина.

Визуальное программирование и дизайн в браузере

Живые гайдлайны и компонентные системы

Xcode и Swift для дизайнеров

Framer

Новые скрипты

Работа с SVG

Flexbox

Веб-типографика

UX-стратегия и менеджмент

UX-стратегия

Дизайн-культура

Метрики и ROI

A list of creative exercises for creative teams
Jon Steinback из Foursquare описывает еженедельную практику среди дизайнеров и других сотрудников компании, когда каждую пятницу они решают нестандартную задачу или пробуют другой креативный эксперимент. Он приводит пачку примеров упражнений.

A list of creative exercises for creative teams

UX and CX — Maximize the Value of Your User Experience Team
В блоге компании Tandem Seven описываются подходы по связке инициатив по UX и CX. В том числе пересечение между этими разными гранями одной задачи.

UX and CX — Maximize the Value of Your User Experience Team

Prevent Feature Creep and Bad Product Requests
Простой одностраничник от Intercom для менеджеров продуктов и дизайнеров, который учит отвечать «нет» на запросы, ломающие продукт.

Prevent Feature Creep and Bad Product Requests

Кейсы

UX-Среда AMA: Редизайн Почты России
В сентябре мы запустили первый AMA (ask me anything) от UX-Среды​ и vc.ru — на вопросы отвечали Руслан Лобачев (руководитель проектов, «Ценципер») и Сергей Сурганов (арт-директор, «Медуза», ранее — «Ценципер»), работавшие над новым сайтом Почты России.

UX-Среда AMA: Редизайн Почты России

В компании происходят масштабные изменения и сайт — только верхушка перестройки внутренних процессов, без которых невозможно выдавать хороший сервис. Необходимо подумать о всей экосистеме. Поэтому опыт ребят особенно интересен.

Мы хотели запустить формат AMA в конце прошлого года, но не хватило времени, а потом он появился у Creative Russia и Roem.ru, так что в простом виде это уже не имело смысла. А вот тематический формат еще не затаскан, так что попробуем его на практике. Благодарим Сергея и Руслана за развернутые ответы, а наших читателей на Фейсбуке — за интересные вопросы. Авторы вопросов: Надежда Шпиякина, Сергей Алешин, Яна Москвина, Анатолий Батарейкин, Иван Пришвин, Денис Шумов, Ольга Орешкова, Наталья Харзу, Владислав Ковалев из Wonderfull.

Дизайн карты мира
Андрей Кармацкий открыл свою студию Urbica Design после ухода из Яндекс.Карт. Их первым проектом стал редизайн карт приложения Maps.me. В статье много интересных деталей процесса.

Дизайн карты мира

Games Mechanics in Apps — An Interview with Courtney Christopher of Swarm
Беседа с Courtney Christopher, ведущим дизайнером Swarm, о работе над новой игровой механикой приложения. После разделения Foursquare на два продукта большинство из знаковых фишек пропало, но недавно команда полностью переосмыслила сервис и превратила его в настоящую игру.

Games Mechanics in Apps — An Interview with Courtney Christopher of Swarm

The Making Of FiftyThree’s Beloved Paper App For The iPhone
Толковый кейс работы над новым приложением Paper для iPhone. Почему FiftyThree не стали портировать широко известную iPad-версию, а переосмыслили с нуля.

The Making Of FiftyThree’s Beloved Paper App For The iPhone

Другие кейсы

История

Telephone Keypad Design
Еще одна статья об этом эпохальном юзабилити-тестировании 60-летней давности. Как в Bell Labs выбирали оптимальное расположение кнопок на телефоне. Перевод на русский.

Telephone Keypad Design

Тренды

Subtraction.com Design Tools Survey
Khoi Vinh недавно проводил опрос среди дизайнеров на тему используемых инструментов. По его итогу он опубликовал отчет с выводами по разным категориям. Участвовало 4000 человек из 196 стран. Недавно он перешёл в Adobe, так что все это будет учитываться в развитии продуктов компании.

Design Machines
UX Fox перевели на русский один из лучших материалов месяца от Travis Gertz. Он говорит о том, что современный дизайн в вебе превратился в унылое однообразие и разбирает причины этого засилия клонов. А после предлагает выход — куда смотреть и куда двигаться, чтобы выйти из тупика. Очень вдохновляюще, да и оформлено здорово. В продолжение темы:

Тренды 2015

Для общего и профессионального развития

UX-Марафон 2015: Юрий Ветров — Дайджест продуктового дизайна
Для онлайн-конференции «UX-Марафон» попробовал сделать дайджест в формате презентации. Собрал самые интересные новости за последние пару месяцев. Не знаю, есть ли в этом смысл и спрос, но галочку «попробовать презентацию» себе проставил 🙂 Кстати, Сергей Андронов с прошлого года делает свой дайджест в таком формате.

Курс «Дизайн человеко-компьютерных систем» в ИТМО (Санкт-Петербург)
1 сентября в университете ИТМО группа студентов-магистров приступила к занятиям по программе «Дизайн человеко-компьютерных систем», посвященной проектированию интерфейсов и взаимодействия с пользователями.

Курс «Дизайн человеко-компьютерных систем» в ИТМО (Санкт-Петербург)

В течение двух лет им предстоит получать и углублять навыки в методологии ведения проектов, аналитике, проектировании, психологии, графическом дизайне и программировании. Кроме лекций студентов ждут практические занятия, проекты, исследования в отлично оборудованной юзабилити-лаборатории.

Сообщество UXSPb тесно сотрудничает со студентами и преподавателями кафедры с тем, чтобы обучение было тесно связано с практикующими специалистами и реально работающими компаниями.

P.S. Через два года работодатели смогут смело писать в описании вакансий проектировщиков и дизайнеров интерфейсов — «профильное высшее образование» и такие люди найдутся 🙂

Онлайн-курсы

Шуточки для дизайнеров за 400

Стажерам

UX Hero
Вышел второй выпуск комикса UX Hero от Tal Florentin, посвященный жизни мифического продуктового дизайнера Jonathan Sketch.

UX Hero 2

UX Fox — рассылка дизайнерам интерфейсов
Ярослав Бирзул перезапустил сайт переводов статей UX Fox в виде рассылки. Каждую неделю подписчики получают эксклюзивный перевод крутой статьи, набор бесплатных полезных материалов, референсы для вдохновения и несколько ссылок для профессиональной прокачки.

Death to Bullshit
Brad Frost запустил новый блог Death to Bullshit по мотивам своей презентации. Он собирает в нем примеры плохих практик в дизайне и того, как индустрия борется с ними.

Death to Bullshit

Detox For Facebook
Самый забавный среди браузерных плагинов, облегчающих чтение дизайнерских ресурсов. Detox подменяет ленту Фейсбука на материалы Designer News, Dribbble, Behance, Awwwards, Smashing Magazine и других сайтов. Создан командой известного плагина Panda.

Люди и компании в отрасли

Andrei Herasimchuk — Twenty Years in the Valley
Andrei Herasimchuk, первый UX-дизайнер Adobe, пишет серию статей о своих 20 годах работы. Очень крутая серия материалов от человека, который стоял у истоков профессии.

Andrei Herasimchuk — Twenty Years in the Valley

Первые выпуски:

Cooper and Cooper U, Part 1
Масштабная серия статей о Cooper U, большой инициативе компании Cooper Consulting по дизайн-образованию. Интервью с Tereza Brazen, заведующей программами обучения, а также разбор курсов.

Cooper and Cooper U, Part 1

Покупки дизайн-студий крупными компаниями

John Maeda Interview
Небольшое, но дельное интервью с John Maeda после воркшопа на хакатоне HackMIT. Кстати, он объединил свои мини-сайты под одним зонтиком.

Сессии AMA

Материалы конференций

OFFF RUSSIA 2015
10 и 11 октября ИКРа во второй раз приводит международный фестиваль OFFF в Россию. Он проводится ежегодно в Барселоне и в странах по всему миру. OFFF известен в отечественном профессиональном сообществе — на основное мероприятие в Барселоне регулярно выезжают целые делегации из русскоговорящих стран. Дизайнеры работают над самыми разными типами задач в разных средах, а этой конференции удается сделать хороший срез всего этого многообразия — как делать необычные и свежие решения в интерфейсах, промо- и маркетинговых вещах, реальном мире.

OFFF Russia 2015

В прошлом году он прошел в Петербурге, в этот раз — в офисе Mail.Ru Group. Приедут IDEO, AKQA, Joshua Davis, StinkDigital, MUCHO. Во второй день пройдут мастер-классы от Burton Rast из IDEO и Joshua Davis. Кстати, Burton дал интервью для Look at Me. и поучаствовал в AMA.

UX STRAT 2015
Презентации с конференции UXSTRAT 2015, которая прошла 8-10 сентября в Athens, Georgia (США). Она посвящена дизайн-стратегии и собирает мощный состав тематических спикеров.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.

Получать свежий дайджест по почте

4 Comments Дайджест продуктового дизайна, сентябрь 2015

  1. Антон

    Вторая часть статьи от Tes Mat, где он сравнивает Principle, Flinto for Mac и Tumult Hype 3.
    Первая и вторая часть уже есть в переводе на русский и много других который у вас проскакивают по sketch

    Reply
    1. Юрий Ветров

      Ух ты, как насчет того чтобы взять их для vc.ru с отсылкой на varhal.com?

    2. Антон

      Можете взять без проблем, у нас есть абсолютно все популярные статьи о sketch в переводе. Будет очень удобно пользователям, если вы сможете использовать в своем дайджесте ссылки на уже переведенные статьи.

      Ссылки можете вырезать с комментария

      http://varhal.com/sravnenie-pyati-instrumentov-dlya-prototipirovaniya-prilozhenij-s-podderzhkoj-sketch/
      http://varhal.com/eshhe-tri-instrumenta-dlya-prototipirovaniya-sketch-prilozhenij/

Leave a Reply

Your email address will not be published. Required fields are marked *