Евгений Игнашов написал о 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

Ирина Моторина написала, зачем и как составлять сторифреймы.

Сторифреймы — это дизайн-схема продукта. Никаких серых прямоугольников, только текст. Они помогают с логикой продукта, фичами и tone of voice.

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

Пишет сторифреймы в диалогах. Так легче представить, какие вопросы могут появиться у человека и как ему ответит продукт.

Сторифреймы помогают думать о продукте быстрее.

https://medium.com/irinagriaznykh/f0481b0ddf7a

Мэтт Андерсон написал о проблемах подхода Mobile First.

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

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

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

На дизайн влияет контекст. Например, дизайн приложения Spotify отличается при использовании за рулём (Car Mode).

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

Для гироскопа, GPS, камеры, сканера отпечатков пальцев, датчика освещённости, наличия и скорости интернета тоже есть API.

Всегда отправляйте необходимый минимум данных, сжимайте файлы.

— Перевод: https://ux.pub/ne-proektiruyte-dlya-mobilnyh-ustroystv-mobile-first/
— Но лучше читать в оригинале [English]: https://mattanddesign.com/dont-design-for-mobile/

Опубликованы видео с ProfsoUX 2020:

1. Lutz Schmitt — Blank Screens and Muse’s Kisses
https://vimeo.com/453012022

2. Константин Гаврюков — Changing the future of E-commerce. Designing for people, not conversion
https://vimeo.com/453012044

3. Валерия Курмак — CJM как каргокульт
https://vimeo.com/453011954

4. Paula Mariani — Design Leadership
https://vimeo.com/453011944

5. Яна Кулигина — Enterprise UX. Когда твой пользователь – бизнес
https://vimeo.com/408665464

6. Valentina Salvi — Service Design for Social Innovation in Uganda
https://vimeo.com/453011914

7. Brock Dubbels — The role of the mobile app in the new physical market place
https://vimeo.com/408665329

8. Anna Bek — The ugly UX duckling
https://vimeo.com/453011996

9. Анастасия Хапалова — Антиманипуляция. Как убедиться, что вы задаете правильные вопросы
https://vimeo.com/453012096

10. Шейла Шейх, Кирилл Улитин — Как мы заново изобретали интерфейс редактора документов
https://vimeo.com/453011897

11. Антон Дуканич — Матрица компетенций для дизайн-команды
https://vimeo.com/453011836

12. Анна Кануникова — Научный подход к проектированию
https://vimeo.com/408665597

13. Татьяна Фокина — Пишем для тех, кто плохо знает язык
https://vimeo.com/408665779

14. Дмитрий Сергутов — Платформа мессенджера Авито как продукт
https://vimeo.com/324745834

15. Олег Бухтияр — Путь к персонализации контента
https://vimeo.com/453012009

16. Борис Юшенков — Урбанистика и UX
https://vimeo.com/453011818

17. Ольга Ржанова — Что делать, если UX-исследователей мало, а вопросов и гипотез много
https://vimeo.com/453011864

— Все видео в одном месте: http://0x1.tv/Category:ProfsoUX-2020
— Альбом в ВК: https://vk.com/videos-50773057?section=album_40

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

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

Рациональные:
1) Микротекст;
2) Иконки и условные обозначения;
3) Фотографии, рисунки, чертежи, диаграммы;
4) Образные сообщения, говорящие о функциональном характере элемента. Залитый прямоугольник со скошенными углами и коротким текстом посередине — кнопка;
5) Разделители, отступы, размеры элементов и так далее — примитивны на уровне восприятия, но важны для понимания предыдущих сообщений. Они показывают иерархию сообщений, что важно, а что — нет.

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

Иррациональные сообщения (стиль):
1) Манера текста (tone of voice);
2) Выбранный шрифт;
3) Качество и способ обработки изображений;
4) Следование трендам или их нарушение и так далее.

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

Мы должны добавлять явные и узкие сообщения там, где их отсутствие может быть истолковано широко.

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

https://9dots.ru/2020/09/09/damn-messages/

Ребекка Хьюго написала о лучших практиках проектирования форм оплаты на примере магазина L.L. Bean.

1. Проверяйте правильность заполнения поля с номером карты (53% изученных сайтов делают это неправильно).

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

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

2. Автоматически разделяйте номер карты пробелами (51% делают это неправильно).

Разделённый на блоки номер читать проще. 16 цифр можно разделить на 4 блока по 4 цифры (совпадает с тем, как они отображаются на карте). 15 цифр — на 4, 5 и 6 цифр.

3. Показывайте, что всё защищено и данные никуда не утекут (68% делают это неправильно).

Самые популярные причины бросить корзину: слишком дорогая доставка и налоги (50%), необходимость регистрироваться (28%), долгое оформление заказа (21%), непрозрачная калькуляция цен (18%), долгая доставка (18%), неуверенность в сохранности данных (17%).

Поможет хороший дизайн, так как люди привыкли доверять тем, кто им нравится. Можно повесить бейджи вроде «Защищено», логотипы партнёров и визуальные подсказки, чтобы прояснить непонятные термины. Также поможет поддержка https.

4. Отодвигайте иконки платёжных систем от полей ввода (63% делают это неправильно).

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

5. Располагайте поля для ввода данных карты в таком же порядке, как эти данные на ней расположены (36% делают это неправильно).

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

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

[English] https://baymard.com/blog/credit-card-form-ux-llbean

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

Опубликованы видео с онлайн-митапа «Сила взаимодействия: как прокачать проектирование продукта».

1. Настя Тарасова и Аня Нагорная из Контура — Конфликты при совместной работе аналитика и проектировщика
youtube.com/watch?v=noyS0ZnVWDo

2. Маша Чусовитина и Катя Ильиных — Юзабилист: кто он и как эффективно взаимодействовать с ним?
youtube.com/watch?v=MviOpXeWyb8

3. Игорь Глотов и Катя Шипулина из Контура — Разработчик и дизайнер: как найти общий язык и повысить продуктивность
youtube.com/watch?v=qBY961WFU6E

4. Макс Черемных из Movavi — UX-воркшоп: как провести в своей команде сессию дизайн-мышления
youtube.com/watch?v=v__NZy7YgFc

Николай Пегасов на примере создания 4-й редакции Dungeons & Dragons рассказал, что бывает, если заниматься геймдизайном, не понимая игроков.

«4-я редакция не была нужна ни игрокам, ни разработчикам 3-й редакции (по развитию которой у них были планы), да и никому в компании, кроме стратегов отдела продаж. За разработку принялась новая команда, не задействованная в 3-й редакции, а возглавил её Роб Хейнзо, трудившийся над скирмиш-варгеймом D&D Miniatures».

«Разработчики заявляли, что в D&D было «неинтересно играть воинами» после того, как маги становились сильнее. Выяснилось, что «неинтересно» было только Хейнзо и его разработчикам. Свой игровой опыт, свои эмоции они спутали с игровыми впечатлениями всех игроков. Разработчики даже не задумались о том, что в D&D исторически играют очень разные люди, с разными характерами и мотивациями, и удовольствие они получают от разных элементов игры.

Игроки, которые любят сложные правила и большой выбор действий (ради чего нужно штудировать увесистые книги дополнительных правил), в D&D зачастую играют магами. Те, кто не любит заморачиваться с правилами, кто хочет просто почувствовать себя героем-победителем («я дерусь, потому что я дерусь»), играют воинами — и им не нужен сложный выбор в развитии персонажа. А ещё есть те, кто вообще не любит боёвку, кто играет в D&D ради социальной составляющей — они могут играть слабыми в бою, но важными для решения прочих проблем классами: бардами, ворами, монахами и т.п.

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

https://pegasoff.livejournal.com/545887.html

Павел Шерер описал идеальную схему регистрации (через электронную почту и соцсети), логина и восстановления пароля.

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

«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».

Статья заняла 1-е место в конкурсе инструкций на VC.

https://vc.ru/dev/156552

В Markswebb рассказали, как на сайте объяснять клиентам дорогу до магазина или офиса компании.

«Выберите для своей локации такой адрес, по которому Яндекс Карты и Google Maps лучше всего построят маршрут, даже если этот адрес не совпадает с вашим фактическим. При публикации не забудьте упомянуть, что это адрес для навигатора».

«Если существует корпоративный транспорт — специальные регулярные автобусы, фирменные шаттлы, маршрутки — укажите место и ориентиры остановки. И стоимость проезда, даже если он бесплатный».

«Посетителей на своём автомобиле волнует, где оставить машину. Подскажите финальную точку маршрута для навигатора — ближайшую парковку. Укажите время работы и стоимость парковки».

«Время применяется в расписании движения транспорта, но оно плохо подходит для определения расстояний. Указание «Идите прямо около 5 минут» может запутать, ведь у каждого свой темп ходьбы».

https://markswebb.ru/report/location-framework/