Сделал конспект книги Нира Эяля «Покупатель на крючке» — о том, как создавать продукты, вызывающие привыкание.

Компании сейчас конкурируют за наше внимание. Им выгодно, чтобы мы использовали продукты под влиянием не рекламы, а внутренних позывов и привычки. Привычка создаётся с помощью крючка:

Триггер → Действие → Вознаграждение → Инвестиция → Внутренний триггер.

https://vandergrav.ru/hooked-book-big-summary/

Дарья Дундукова написала ёмкую вводную статью о UX-писателях.

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

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

https://netology.ru/blog/07-2020-ux-copywriter

Кирилл Беляев предложил способ уплотнения столбцов в таблице.

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

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

https://kirillbelyaev.com/ru/blog/all/sealing-columns-in-table/

Эндрю Койл написал о дизайне карточек.

Карточка — компонент интерфейса с краткой информацией и точкой перехода к дополнительной информации.

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

https://ux.pub/8-pravil-kotorye-pomogut-vam-sproektirovat-luchshiy-dizayn-kartochki/

В КБ «Собака Павлова» написали о процессе и результате исследования, с помощью которого пытались понять:
— Зачем компании заводят несколько счетов в разных банках;
— Зачем отправляют деньги своим контрагентам в другие банки, когда у них есть счета в одном.

Интересно узнать и об организации такого исследования, и об особенностях ведения бизнеса в России, и почему работникам банка сложно исследовать это самостоятельно.

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

Рекрутировать таких респондентов — нетривиальная задача, и в подобных ситуациях очень помогает выборка „снежного кома“ или доступных случаев. Мы спрашиваем у каждого респондента, есть ли у него знакомые, потенциально готовые поговорить на эту же тему. Конечно, у такой выборки есть ряд ограничений: она не основана на вероятности, а значит, вопиюще не случайна, а точность результатов оценивается субъективно. Поэтому использовать ее можно, когда невозможно подсчитать генеральную совокупность — общее число представителей интересующей группы. Но есть и плюсы: быстро, просто и иногда единственно возможно для сложнодоступного поля».

«Смог бы банк провести такое исследование сам? Возможно. Существуют варианты исследований, когда интервьюер не сообщает место своей работы. Но объяснить, откуда ты взялся и зачем тебе это, в таких ситуациях становится сложнее. А скрытность может повлиять на откровенность респондента и результаты исследования.

Это одно из главных преимуществ независимого исследования — возможность выстроить доверительное общение с респондентами и получить ценные инсайты».

https://vc.ru/finance/144855

Джозеф Мюллер проанализировал мобильные проигрыватели разных видеостриминговых платформ и сформулировал рекомендации.

Устраняйте причины, из-за которых пользователю приходится выходить из приложения и останавливать просмотр. Например, Netflix даёт возможность изменить яркость, заблокировать экран, настроить язык и прочее прямо в проигрывателе. Ivi идёт по тому же пути, но смена звуковой дорожки приводит к перезагрузке видео, что плохо.

Обращайте внимание на нюансы мотивации пользователя, так как это может вдохновить на новые решения. Например, Hulu перематывает видео вперёд на 30 секунд (удобнее пропускать ненужные сцены), а назад — всего на 10 (можно точнее находить нужные). Значения можно привязать к длине ролика.

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

Прорабатывайте моменты, когда пользователь заканчивает просмотр и переворачивает экран телефона. В этот момент можно предложить посмотреть что-то ещё или оценить просмотренное.

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

[English] https://uxdesign.cc/6aa81a8f4d2b

Заметка подготовлена совместно с @vanillatime.

Дэнни Сапио поделился примечательными советами из Human Interface Guidelines.

Проверяйте цветовую гамму приложения при разном освещении: в помещении, на улице, в разное время суток и при разной погоде. У приложения для работы с циклами сна Sleep Cycle успокаивающий тёмный интерфейс. Он не давит на глаза и идеален, чтобы ставить будильник перед сном.

Откладывайте момент авторизации или, если это возможно, вовсе убирайте регистрацию. Дайте получить максимум от приложения до того, как пользователю придётся ввести пароль.

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

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

Ищите, где пользователь может застрять, и придумывайте, как ему помочь: подсказки, быстрые советы, чат с консультантом, ответы на частые вопросы и так далее.

Если действие пользователя ведёт к потере введённых им данных, сообщите об этом и объясните, как избежать потери.

Не включайте в пуш-уведомления чувствительную, личную или конфиденциальную информацию.

https://habr.com/ru/company/skillfactory/blog/510848/

Виктор Губанов рассказал, зачем и как дизайнерам-новичкам получать обратную связь о своей работе.

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

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

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

Уточняйте область, по которой хотите получить фидбек. Просите не просто посмотреть макет, а укажите, на что именно обратить внимание: типографика, сетка, цвета, динамика и так далее.

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

Обратную связь можно запросить у заказчика или арт-директора. Чем раньше вы это сделаете, тем меньше вложите сил в неправильное решение в случае, если поняли задачу неправильно.

https://ux.pub/kak-dizayneru-novichku-rabotat-s-fidbekom-chtoby-stat-profi/

Люси Тодд рассказала о разных способах визуализации данных: гистограммах, линейных графиках, круговых и кольцевых диаграммах, квантограммах и типографике.

Если данных мало, линейные графики используйте аккуратно. Если есть данные для точек 1 и 3 и ничего не известно о точке 2, скорее всего, вы соедините известные точки прямой линией. Люди могут решить, что это настоящее значение промежуточной точки.

Круговыми и кольцевыми диаграммами нельзя показывать процент изменения показателя. Если просмотры брендированного видео на Ютубе увеличилось на 99%, нельзя показывать это круговой диаграммой, заполненной на 99%.

Квантограмма — повторение пиктограммы или иконки, показывающее количество. Отлично подходит для изображения небольших чисел. Например: на улице открылись 12 новых ресторанов; на улице 3 из 4 ресторанов подают пиццу.

https://vc.ru/design/145809

Евгений Игнашов написал о GOMS-анализе.

Стоит ли использовать его для оценки удобства интерфейса? Нет, если при работе с интерфейсом никто не умирает от задержки в 0,3 секунды.

The model of Goals, Objects, Methods, and Selection rules (GOMS) — метод исследования, позволяющий предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции при использовании конкретного интерфейса.

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

Для примера Евгений проанализировал два разных интерфейса перевода градусов из Цельсия в Фаренгейт и наоборот.

https://habr.com/ru/post/512712/

Пейдж Лаубхаймер из Nielsen Norman Group написал о трёх типах персон.

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

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

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

[English] https://www.nngroup.com/articles/persona-types/

Заметка подготовлена совместно с @vanillatime.

Михаил Озорнин написал о типе визуализации «Регулярные карты».

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

Самое сложное — сохранить узнаваемость. Для США таких карт полно, а Россия в карте из квадратов становится неузнаваемой, так как регионы очень разные по размеру.

В 2017 году прошёл конкурс регулярных карт для России, где победил вариант Ивана Дианова.

— Пост Михаила: http://mikeozornin.ru/blog/all/election-chart-redesign/
— Работы конкурсантов и итоги: https://telegra.ph/Uchastniki-i-ih-raboty-12-03
— О проекте Ивана [English]: https://medium.com/kompany/92190d14e41e

Сделал конспект книги Майка Монтейро «Дизайн — это работа».

Вот, например, маркеры плохого клиента:

— С порога диктует, что нужно, и объясняет, в какой цвет это покрасить. Это не дизайн, а производство;
— Даёт понять, что опускает свою планку, работая с вами. Хорошая работа получится только при взаимном уважении;
— Обратился к вам неохотно и не ценит дизайн. Если он не ценит вашу работу, он неохотно будет платить и сотрудничать. Штатные дизайнеры могут считать, что проект стоило поручить им. Стартаперы — что работа с подрядчиком затормозит работу. Они будут стремиться доказать, что ваши услуги не нужны, и пытаться абстрагироваться от процесса;
— Предлагает работать за долю в бизнесе;
— Говорит, что это хороший проект для портфолио, и хочет работать по ценам ниже рыночных. Если он с самого начала не уважает вас, результат вряд ли будет выдающимся;
— Это не ключевой для бизнеса проект. Не стоит участвовать в конъюнктурных попытках заполнить нишу на рынке. Пока вы работаете, кто-нибудь другой заполнит её, и клиент решит заняться чем-то другим.

https://vandergrav.ru/design-is-job-book-summary/

Тесс Гадд написала о радиокнопках и чекбоксах.

Что это такое, анатомия радиокнопки и чекбокса, разница между ними, встречающиеся стили отображения, возможные состояния.

Когда использовать радиокнопки:
— Пользователь может выбрать только один вариант;
— Вариантов меньше шести;
— У пользователя не должно быть возможности «не выбирать», если он уже выбрал один из вариантов. Нажатие на выбранный вариант в группе радиокнопок не приводит к отмене выбора этого варианта;
— Для сохранения выбора пользователь нажимает на специальный контрол (например, кнопку «Сохранить»).

Когда использовать чекбоксы:
— Пользователь может выбрать несколько вариантов или не выбрать ни одного;
— Один вариант, на который пользователь должен ответить «да» или «нет». Например: «[v] Я соглашаюсь с офертой».

https://ux.pub/radio-buttons-checkboxes-i-drugie-vidy-selektorov/

Джордж Кейв объяснил правила хорошего интерфейса на примере панелей управления из Лего.

Во время Второй мировой войне пилоты «Летающей крепости» при посадке часто выпускали закрылки вместо шасси. Ошибка происходила из-за одинаковой формы рычагов. Придумали обклеивать рычаги разными накладками — пример кодирования по форме.

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

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

https://vc.ru/design/148285

В студии Pragmatica сделали 7-й выпуск «ДжонФёдора»:

— Мнения пожилых людей с улицы о качестве и стоимости логотипа «Памплона кэпитал» (экспресс-дизайн Студии Артемия Лебедева) и логотипа «Общероссийского голосования»;
— Реально ли создавать дизайн нейросетями, в частности, дизайн логотипов — с помощью Николая Иронова. Мнение Юрия Ветрова, который следит за новинками генеративного дизайна;
— Обсуждение вау-сайтов с Евгением Кудрявченко из украинской студии Vintage;
— Новая школа дизайн-студий: иметь сильные стороны кроме самого дизайна (например: 3D, скорость работы, лучшее понимание клиентского бизнеса); быть заметными (выкладывать работы, рассказывать о подходах и кейсах); продавать часы; быть открытыми (показывать процесс);
— Конкурс Артёма Геллера «Нетти» и расчеловечивание.

https://www.youtube.com/watch?v=c_qK13iZ1a8

Кристиан Холст из Baymard Institute написал о кнопке «Назад».

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

Часто проблем с кнопкой «Назад» доставляют:
1. Всплывающие блоки (например, панель фильтрации на мобильном устройстве или диалоговое окно) и лайтбоксы. Пользователи ожидают, что нажатие «Назад» закроет всплывающий блок или лайтбокс;
2. Результаты фильтрации и сортировки. Пользователи ожидают отменить фильтрацию или вернуться к предыдущим её значениям;
3. Аккордеон оформления заказа. Пользователи ожидают вернуться на предыдущий элемент аккордеона, а не закрывать форму заказа полностью;
4. Страница товара. Пользователи ожидают вернуться в то место списка товаров, где они были перед переходом на страницу товара. Особенно это важно на мобильных устройствах после утомительной прокрутки списка.

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

https://ux.pub/4-dizayn-patterna-ne-sootvetstvuyuschih-ozhidaniyam-polzovateley-otnositelno-knopki-nazad/

Алёна Юрьева написала, что делать, если заказчик не ставит никаких ограничений, и как в таком режиме она создала конструктор иллюстраций.

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

«Задав определённые константы в положении головы или ног, я заложила возможность выбирать из общей базы различные детали персонажа, начиная с бровей и заканчивая ботинками.

Добавить новое выражение глаз, причёску или наряд — вопрос пары минут для дизайнера. А для пользователя конструктора — это несколько дополнительных персонажей».

https://vc.ru/design/154303

Макс Десятых опубликовал 2-й параграф будущего учебника по управлению компанией, создающей цифровые продукты на заказ.

Почему такие компании могут загнать себя в финансовую пирамиду из предоплат:

1. Продажа проектов по фиксированной стоимости. С большими проектами больше вероятность ошибиться в оценке;
2. Убыточные проекты приходится компенсировать предоплатами за следующие проекты;
3. Растущие расходы на команду, которая должна все эти проекты делать, разгоняют процесс. Большой команде нужно много больших проектов (см. пункт 1);
4. Проекты постоянно заканчиваются. Надо искать новые проекты, чтобы загрузить команду. Слабая позиция на переговорах приводит к контрактам на плохих условиях, с фиксированной стоимостью. Круг замыкается.

Что делать:
— Договариваться на Time & Materials или Retainer;
— Считать потраченные на проекты часы;
— Сокращать расходы на команду;
— Отдавать приоритет клиентам, с которыми можно работать годами. Руководителю — лично работать над отношениями с заказчиками;
— Понять, что большинство расходов зависит от времени, а доходы — от менее надёжных вещей: успехов в продажах, качества работ, платёжной дисциплины клиентов.

https://vc.ru/finance/135918

Павел Шерер опубликовал первую статью цикла о функциональной архитектуре.

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

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

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

Так проектировщики перекладывают свои обязанности (а с ними и риски) на разработчиков, которые вынуждены принимать решения и искать ответы на вопросы вроде «Что будет, если соцсеть не вернула имейл пользователя?»

ФА призвана снизить риски, стабилизировать разработку, заранее найти ответы на значительную часть вопросов, не заставлять обычных программистов принимать общие архитектурные или тонкие юиксовые решения.

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

#functional_architecture

Игорь Штанг поделился записью мастер-класса по стиранию линеек.

Метод:
1. Убрать все линейки и плашки;
2. Если что-то ломается, решить проблему с помощью отступов, выравнивания, оформления;
3. Если не получается, вернуть часть линеек или плашек.

На видео Игорь перевёрстывает 5 макетов и отвечает на вопросы.

01:18 — Вступление;
03:40 — Таблица «Допустимое рабочее давление»;
24:55 — Календарь цен авиакомпании «Победа»;
40:55 — Вклад «Восточного банка»;
47:58 — Интерфейс выписки по счету «Бинбанка»;
1:02:58 — Лицензии словолитни CJ Type;
1:11:57 — Вывод;
1:15:10 — Вопросы.

https://www.youtube.com/watch?v=lAqfdjvxT0U