Юрий Ветров, который с 2012 года строит в Mail.Ru Group дизайн-систему Paradigm, прочитал почти все книги о дизайн-системах и выбрал те, что показывают правильные точки зрения:

1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (1977);
2. Nathan Curtis — Modular Web Design (2009);
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (2013);
4. Brad Frost — Atomic Design (2017);
5. InVision — Design Systems Handbook (2017).

В статье он рассказал про достоинства этих книг, а также дал ссылки на другие полезные материалы.

https://jvetrau.com/designsystems-books/

Сергей Сурганов из Notion взял интервью у Павла Грозяна, дизайнера в финтех-стартапе Zero.

Поговорили про банковские сервисы, жизнь в Сан-Франциско, зарплаты в стартапах, продукты MacPaw вроде Clean My Drive, как стать дизайнером (делать проекты, а не забивать голову книжками, следить за работой хороших дизайнеров).

«В среднем в стартапах платят $120−140 тысяч в год. $100 тысяч — это очень маленькие деньги. Однокомнатная квартира в Сан-Франциско стоит около $3000 в месяц, это половина всех денег после уплаты налогов. И ещё где-то половину от того, что осталось, ты тратишь на еду».

«Самая дорогая валюта, которая есть сейчас — это наше время и внимание. Snapchat, например, — это один из способов монетизации внимания человечества. Даёт ли он какую-то ценность, зависит от того, что ты смотришь в ленте. Ты можешь в Instagram читать публикации голожопых философов, а можешь следить за людьми из индустрии, быть в теме и иметь возможность с ними встретиться и поговорить».

Видео.

Игорь Штанг написал и показал на примерах, когда можно опускать знаки препинания.

В нумерованном заголовке после цифры точку можно не ставить, когда цифра:
— Стоит на отдельной строке;
— Отделена увеличенным пробелом;
— Обозначена другим начертанием, шрифтом, размером или цветом;
— Отделена другим знаком, например, →.

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

Копия статьи на Awdee.

Появились записи докладов с ProfsoUX 2018:

1. Проектирование скорости. Сделать данные мотокросса полезными (Кевин Ричардсон): vimeo.com/267044938
2. Дизайн-система «Paradigm» (Юрий Ветров): vimeo.com/267044813
3. Проектируем привычки (Брайан Пэган): vimeo.com/267044765
4. Фетишизм и удовлетворение потребностей: как влюбить в свой продукт (Тамара Кулинкович): vimeo.com/267044807
5. Каждый дашборд — это отчет, но не каждый отчет — это дашборд (Алексей Колоколов): vimeo.com/267044930
6. Локализация интерфейсов на иностранные языки. Основные принципы и нюансы (Федор Кондратович): vimeo.com/267044732
7. UX of Decentralized Blockchain Applications (Hester Bruikman-Pagán и Андрей Миронов): vimeo.com/267044912
8. Нейрофизиологические исследования при разработке игр (Ксения Стернина): vimeo.com/267044935
9. UX БЛА. Истории про интерфейсы для беспилотников (Алексей Гапонов): vimeo.com/267044699
10. Выбор инструмента для сборки прототипа. Как найти свой (Аният Курбанова): vimeo.com/267044750

Ещё 19 — на сайте конференции: 2018.profsoux.ru/speakers

Павел Шерер написал о плюсах и минусах сложных интерактивных прототипов в Axure.

Сложный — такой прототип, который способен предоставить максимально приближенный к реальному пользовательский опыт (хотя бы в сценарном плане). Где логин меняет состояние страниц, попап загрузки изображений показывает реальную последовательность, а листинги имитируют перестройку при асинхронной фильтрации.

Такие прототипы нужны не всегда, их дольше делать и сложнее править. Но есть и плюсы:

1. Можно пройти по сценарию и увидеть все связанные с ним состояния системы. Например, авторизоваться и увидеть меню для авторизованных пользователей.

2. Можно провести пользовательское тестирование, в том числе количественное.

3. Проект станет понятнее разработчикам, и шанс того, что они его сделают, немного увеличится.

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/superprototip-v-axure-maksimum-interaktivnosti-5b03fe7100b3dd0f6c18863a

Юзерфлоу (userflow) — это последовательность шагов, которые пользователь совершает для достижения важной цели. Используется для отображения предполагаемого сценария перехода пользователя на различные страницы (экраны) и его действий в приложении или на сайте.

Принципы создания:

1. Имя юзерфлоу должно описывать цель, которую пользователь достигнет, выполнив определённые шаги.

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

3. Юзерфлоу должен показывать завершённую задачу и ограничиваться одной задачей или целью пользователя.

http://sketchapp.me/rukovodstvo-po-perexodu-ot-chto-za-xren-ya-vizhu-k-chetkomu-yuzerflou/

Надежда Ляшенко рассказала, как UsabilityLab проектировали CRM для операторов контакт-центра банка, и штатные дизайнеры заказчика стали с ними конкурировать.

Проектировщики изучили работу операторов и сформулировали требования к интерфейсу, подготовили и презентовали концепцию системы. На этапе прототипов дизайнеры заказчика стали показывать свои варианты макетов.

«Экраны выглядели выигрышно на фоне наших черно-белых макетов, поскольку были оформлены в фирменном стиле банка. Однако на них появились элементы, которых не было на наших макетах и которые не всегда удачно вписывались в рабочий процесс будущих пользователей. Вместо того, чтобы продолжать работать, две команды спорили о том, насколько удобным для пользователя будет то или иное решение».

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

(В быстро развивающихся проектах нужно забыть, что такое «план проекта».)

https://usabilitylab.ru/blog/proektirovanie-crm-sistemyi-dlya-tinkoff-banka-vzaimodejstvie-dvux-komand-na-slozhnom-proekte/

Любопытная статья о том, как Фейсбук борется с недостоверными публикациями.

Внимание пользователей в ленте привлекают 3 области (порядок индивидуален):
— Аватар друга, группы или страницы, которые поделились публикацией;
— Лица (если есть) в превью статьи;
— Заголовок статьи.

Рядом с заголовком будет кнопка «About this article», анимировано сжимающаяся до «i».

Нажатие на неё будет приводить к отображению:
— Информации о странице издателя в Фейсбуке;
— Кнопки для подписки на издателя или её отмены;
— Статей других издателей по теме;
— Количества друзей и других пользователей, которые поделились статьёй;
— Карты, которая показывает, откуда эти пользователи.

http://sketchapp.me/proektirovanie-novyx-sposobov-dobavleniya-konteksta-v-novosti-ot-komandy-facebook/

Дмитрий Мрачковский рассказал о нюансах создания структуры интернет-магазина для лучшей индексации поисковиками. Например:

Один товар относится к разным категориям и доступен по нескольким адресам. Лучшее решение — вынести адреса товаров в отдельную директорию. Если все категории располагаются в /catalog/, то товары размещайте в /products/, /goods/, /items/. Это поможет поисковикам понять, какая страница относится именно к товару. А вас избавит от необходимости придумывать сложные решения, чтобы сохранить в URL вложенность товара в категорию.

Если товары привязаны к нескольким категориям, то что выводить в хлебных крошках товара? Самый простой вариант — выбрать главную категорию и отображать её. Вариант посложнее — отслеживать категорию, из которой пользователь перешёл на товар, и подставлять её в крошках. Это удобно и полезно для пользователей, которые переходят на товар из категории в одной вкладке и возвращаются назад по хлебным крошкам. Иногда пользователь переходит на товар с главной страницы, по рекламе или прямой ссылке. В этих случаях стоит выбрать главную категорию и подставлять её по умолчанию.

https://vc.ru/39432-kak-pravilno-strukturirovat-internet-magazin-s-tochki-zreniya-seo

Евгений Романовский написал, почему в профессиональных интерфейсах обычно не бывает онбординга.

1. Разрабатывать и поддерживать туры по системе и т. п. для нескольких тысяч человек, особенно если релизы идут каждый квартал, просто невыгодно. Здесь работают другие инструменты: рассылки новостей со скриншотами, видео или баннер при запуске новой версии. Кроме того, обновляется контекстная справка и большой талмуд-мануал — его профи иногда читают.

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

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

https://medium.com/sobaka/e6a63a6da236

Дневниковое исследование — одна из методик сбора качественных данных, которая позволяет узнать, как меняется поведение и опыт потребителей с течением времени (от нескольких дней до нескольких месяцев).

Что таким образом можно узнать:
— В какое время суток люди взаимодействуют с продуктом;
— Как часто это делают;
— Как выглядит сценарий работы при выполнении долгосрочной задачи;
— Легко ли обучиться использованию системы;
— Как меняется лояльность с течением времени;
— Как выглядит взаимодействие с компанией, проходящее через разные каналы связи (сайт, почта, телефон, социальные медиа и так далее).

В статье расписаны этапы исследования и даны советы, например, как мотивировать участников.

https://lpgenerator.ru/blog/2016/06/21/dnevnikovyj-metod-v-izuchenii-polzovatelskogo-opyta/

Николас Крамер рассказал, как оптимизировать навигацию для людей с ограниченными возможностями.

Если пользователь использует для навигации клавишу Tab, в начале страницы покажите ему скрытую ссылку для перехода к основному содержимому страницы. Википедия даёт перейти к общей навигации или строке поиска.

Добавьте специальное меню, доступное с клавиатуры. В Фейсбуке таких три. Первое позволяет перейти к определённым секциям на странице. Второе даёт быстрые ссылки на разные страницы. Третье — на все специальные возможности Фейсбука.

Настройте кнопки быстрого доступа. В Твиттере с помощью кнопок «J» и «K» можно перемещаться между твитами, а с помощью «.» — загрузить новые и переместиться в их начало.

https://vc.ru/39701-chto-nuzhno-uchest-v-razrabotke-specialnoy-navigacii-po-saytam-dlya-lyudey-s-ogranicheniyami-zreniya-i-drugih-vozmozhnostey

Создал канал @uxwork — буду публиковать встречающиеся вакансии для проектировщиков, аналитиков-проектировщиков, информационных архитекторов, UX-дизайнеров и прочих специалистов, которые больше про схемы и прототипы, нежели про финальные макеты.

Подписывайтесь, если ищете работу или просто хотите быть в курсе вакансий.

Если ищете сотрудников, присылайте ссылки на вакансии: @zGrav.

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

Хороший пример кейса в портфолио аналитика-проектировщика:
— Описание предметной области и проблемы;
— Анализ потребности и целевой аудитории с помощью форума;
— Выделение ключевых сценариев;
— Создание в Axure детализированного прототипа с реальным контентом.

Закладывать в прототип реальные данные о билетах и ценах (880 строк) и показывать билеты, которые действительно соответствуют пользовательскому запросу, — это слишком. Но если такая задача у вас всё-таки появится, акшура для неё подойдёт.

https://designpub.ru/9763be9bc739

Грейс Но написала о перетаскивании (drag and drop) на примере интерфейсов VMware.

Где используется:
— Изменение порядка и уровня вложенности элементов дерева;
— Изменение порядка колонок в таблице данных;
— Изменение порядка рядов в таблице данных;
— Перемещение элементов между древовидным меню и таблицей данных;
— Упорядочивание и объединение карточек.

Если элемент можно перетаскивать, надо проработать:
1. Состояние покоя;
2. Состояние перетаскивания;
3. Обозначение исходного местоположения элемента — где он был до начала перетаскивания и куда вернётся, если пользователь не найдёт для него подходящее место приземления;
4. Обозначение места приземления — новое место, в котором элемент окажется после завершения перетаскивания.

В состоянии покоя:
— Специальным маркером обозначить возможность перетаскивания. Особенно важно так делать, если не все элементы можно перетащить;
— При наведении на элемент менять курсор, например, на руку.

В состоянии перетаскивания:
— Стилистически выделять элемент. Например, с помощью тени приподнимать его над соседними. В Трелло перетаскиваемые карточки слегка наклоняются;
— Менять курсор, например, на сжатую руку.

Исходное местоположение можно показывать полупрозрачным экземпляром перетаскиваемого элемента. Его может не быть, если создаётся эффект естественного движения, когда все элементы вокруг сдвигаются и уступают место перетаскиваемому (пример — упорядочивание вкладок в Хроме или Сафари).

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

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

#drag_and_drop

Ольга Шаврина написала о поисках работы UX-дизайнером в Барселоне.

В 1-й части статьи: список сайтов для поиска работы, возможные названия должностей, рекомендации по составлению резюме и прокачке профиля в LinkedIn, а также интересные наблюдения и выводы:

— Описание вакансии на испанском не означает, что компания не рассматривает англоговорящих соискателей. Возможно, просто затупил HR-специалист. Не игнорируйте такие вакансии;
— Чем компания привлекательней, тем меньше в тексте вакансии диких требований и больше собственных ценностей и видения;
— На указанный уровень специалиста можно не смотреть. На наличие или отсутствие в названии слов Senior или Lead — тоже;
— На фото в Линкедине принято улыбаться;
— Список навыков очень важен. В Линкедине есть статистика ключевых навыков для разных должностей, можно подсмотреть и добавить себе;
— Чаще всего небольшие компании и стартапы не помогают с визой. Если у вас есть право на пребывание и работу в стране, много раз напишите об этом;
— Креативное анимированное портфолио с нестандартной сеткой — ад для HRов. Для UI-дизайнера лучше всего Dribbble или Behance. Если улучшил важные бизнес-показатели, надо вынести это в заголовок;
— Не ждите, что найдёте вакансию мечты, отправите резюме, и вас пригласят работать. Поиск работы — воронка. Ваши отклики — лишь её 1-й уровень. Откликайтесь на все вакансии, которые удовлетворяют вашим критериям.

#career

Рассказал об экспериментах в области поведенческой психологии, которые показывают, как разные факторы влияют на поведение людей.

Например, на совершаемый выбор:
— Эффект якоря. Произвольные числа в определённом контексте влияют на то, какую цену мы готовы предложить за товар или какое количество товаров мы покупаем. При этом изначально установленный якорь изменить тяжело.
— Эффект приманки. Добавление варианта, который заведомо хуже другого варианта, делает этот другой вариант более привлекательным.
— Эффект контраста. Добавление очень дорогого варианта смещает распределение выбора к более дорогим вариантам (звучит довольно очевидно).

А также несколько экспериментов, показывающих:
— Как широта выбора влияет на изначальный интерес и итоговую конверсию.
— Какие факторы приводят к снижению уровня мошенничества и его повышению.

https://vandergrav.ru/behavior-design/

Илья Бирман написал, надо ли на сайтах менять курсор мыши на палец над кнопками. Одна из тех заметок, где в конце нет правильного ответа или инструкции, как надо делать.

Если навести курсор на текстовую ссылку, он меняется на палец. Это пример обратной связи в интерфейсе — изменение курсора подсказывает, что на элемент можно нажать.

Интерфейс должен быть последовательным. Если на текстовые ссылки и кнопки можно нажать, менять курсор на палец стоит и там, и там. Но тогда поведение курсора на сайтах и в программах будет отличаться — в программах он не меняется при наведении на кнопки. Это тоже непоследовательно (в более широком контексте) и непривычно пользователям.

В программах кнопки раньше были объёмными. Дополнительная подсказка с помощью курсора не требовалась. А ещё: если поведение курсора в программах изменить, то не получится спокойно провести курсором над каким-нибудь тулбаром — курсор будет постоянно меняться туда-сюда.

https://ilyabirman.ru/meanwhile/all/arrow-and-finger/

Фабрицио Тейшейра написал о сторифреймах — небольших рассказах о продукте, которые стоит написать до создания первого вайрфрейма.

«Даже если вы мастерски владеете инструментом и работаете на низком уровне детализации, часть мозгового ресурса (и времени) всё равно уходит на подбор форм. Гораздо проще и эффективнее сначала зафиксировать, что вы пытаетесь сказать пользователю. Проектирование в инструменте или на бумаге подразумевает принятие дизайнерских решений (2 колонки или 3?),  хотя на начальном этапе вы ещё не уверены, нужен ли вообще этот блок и где его место».

«Вся прелесть (и, вообще-то говоря, цель) написания истории в том, её можно показать людям и собрать их мнения и советы. Можно принимать важные решения по стратегии, процессам и повествованию — и для этого не надо часами копаться в визуальных редакторах».

https://medium.com/советы-по-проектированию-интерфейсов/77835f317def

Александр Мукомелов, владелец студии промышленного дизайна Mukomelov, рассказал о своих проектах, наградах Red Dot (у него их 5), постмодернистском дизайне (форма без функции вроде дома в виде утки), ценообразовании в дизайне предметов (оплата проекта или процент от стоимости проданных предметов), производстве в Европе, жизни в Сан-Франциско.

Кстати, у Александра более 20 000 подписчиков на Behance и место в списке Forbes 30 до 30.

https://www.youtube.com/watch?v=4DvgV3PPtNw

Джон Сайто написал о метафорах в интерфейсе.

Шестерёнка — метафора настройки. Корзина — заказа. Мы видели их так часто, что они вошли в привычный визуальный «лексикон». Встретив такую иконку без подписи, мы поймём её значение просто из контекста.

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

От метафор зависит, насколько интуитивным будет дизайн. Если они строятся на реальных и узнаваемых понятиях, людям будет проще их понять.

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

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

Метафоры наполняют смыслом окружающий мир и помогают нам понимать сложные идеи.

https://medium.com/product-design/455605aa7430