Кевина Виньо раздражает, когда на адаптивных сайтах блок «3 преимущества» в десктопной версии располагается горизонтально и занимает один экран, а в версии для смартфонов — вертикально и занимает 3 экрана.

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

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

In English.

Рори Сазерленд снова рассказал, как небольшие изменения меняют восприятие и поведение людей. Например, возможность контролировать ситуацию (даже мнимая) повышает удовлетворение.

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

Обратный отсчёт красного света светофора снизил количество ДТП в Южной Корее, так как нетерпеливость и раздражительность снижаются, когда знаешь, сколько ещё ждать.

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

Илья Бирман написал, как подписывать кнопки и пункты контекстного меню.

1-я функция кнопки — дать команду компьютеру. Кнопка отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме: Отправить; Купить; Добавить; Настроить.

2-я функция кнопки или пункта меню — изменение статуса, отношения к объекту. Отвечает на вопрос о подлежащем «— это что? какое?». Используется существительное, прилагательное, наречие, причастие, числительное, например: Это спам; Важное; Готово; 5.

Формулировки в виде команды в таких случаях избыточны («Отметить как…», «Перевести в категорию…», «Оценить на…»), то есть малоинформативны.

Максим Ильяхов советует с осторожностью упоминать слово «успешно» в системных сообщениях и вообще.

«Платеж успешно отправлен → Платёж отправлен».

Единственный случай, когда «успешный» имеет смысл — когда что-то, о чем мы говорим, может быть провальным:

«Сотрудник МВД отчитался об успешном завершении операции → Операция завершена успешно, задержаны все женщины и дети».

Николай Бабич рассказал, как должна работать страница с результатами поиска. Некоторые из рекомендаций. Некоторые из рекомендаций:

— Не удаляйте запрос после нажатия на кнопку «Найти»;
— Автозаполнение должно работать;
— Исправляйте опечатки;
— Сохраняйте историю запросов;
— Во время поиска показывайте прогресс;
— Подключите возможность сортировать и фильтровать результаты;
— Не выдавайте «Ничего не найдено».

In English (копия в Вебархиве).

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

Советы по правильной геймификации, работе с сообществом и помощи пользователям в создании контента. Примеры из жизни Sports.ru.

Опубликованы доклады с ProfsoUX 2017. Лучшие (по мнению участников конференции):

1. Михаил Фролов — Мама, прости, что-то пошло не так.
2. Тамара Кулинкович — Как точно определить задачи и выбрать метод: канва для исследователя.
3. Eric Reiss — UX strategy — the secret sauce that defines the pixie dust.
4. Илона Саркисова — Математический аппарат в UX. Как проверять гипотезы на статистических данных.
5. Илья Александров — Истории о прототипах.
6. Максим Цепков — Опыт госпроектов и взаимодействия с корпоративными структурами.
7. Ксения Колтун, Станислав Борисевич — Как выучить дизайнеров.

Видео о таком когнитивном искажении как ошибка выжившего.

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

Кирилл Беляев написал о курсе Ильи Бирмана «Пользовательский интерфейс и представление информации».

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

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

Психолог из Valve Майк Амбиндер рассказал о человеческом внимании, предпочтениях, когнитивных искажениях, мотивации и как это использовать при разработке игр. Хороший пример борьбы с «токсичным» поведением:

«В конце матча стали задавать 2 вопроса. Сначала просили оценить уровень командной работы. Отношение игрока к своей команде — полезные данные, но мы спросили это только ради следующего вопроса: оцените собственный уровень работы в команде.

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

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

Видео in English.

Эндрю Койл написал об интерфейсных приёмах, с помощью которых можно упростить работу с большими таблицами.

— Закрепление заголовка;
— Закрепление столбца с параметрами и отдельных столбцов;
— Возможность изменить ширину столбца;
— Чередование фона в строках (зебра);
— Отображение сводки по табличным данным;
— Появление управляющих кнопок при наведении курсора на строку;
— Возможность редактирования данных в строке;
— Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
— Сортировка и фильтрация (разные способы);
— Настройка отображаемых столбцов и их порядка следования.

In English. #table

Рауль Гулати собрал примеры применения эвристик Якоба Нильсена для интерфейса. Несмотря на название статьи, там не только дашборды.

In English. #heuristic

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

Анимации в интерфейсе становится всё больше. Крупные компании вроде Google и IBM в своих рекомендациях уделяют ей отдельное внимание.

Часто разработчики получают от дизайнеров довольно смутное описание задачи: видео или GIF с анимацией в несколько секунд и пара комментариев. Им приходится самостоятельно анализировать происходящее на картинке, а дизайнер часто получает не то, что планировал.

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

In English.

6-я серия Abstract рассказывает о графическом дизайнере Поле Шер из Pentagram — о логотипах, плакатах и работе со шрифтом.

Записал выступление Ольги Павловой на ITGM #10 о навыках и не-навыках проектировщика.

Навыки в смежных темах (начинается в 6:20):
— Компоновка текста;
— Вёрстка в базовом варианте (html&css);
— Преобразование сырого материала в таблицы и схемы;
— Создание бумажных интерфейсов (например, бланков);
— Понимание сырых данных.

Второй блок полезных навыков (начинается в 16:00):
— Проработка концепции решения;
— Создание интерактивных прототипов;
— Использование реалистичного контента в прототипе;
— Работа ручкой и бумагой (оставаться в этом режиме как можно дольше);
— Повышение скорости работы (клавиатурные сокращения);
— Использование библиотек;
— Автоматизация работы (скрипты для рутинных операций);
— Изучение новых форматов взаимодействия (VR);
— Командная работа (как минимум признавать необходимость команды);
— Вытягивать вводные по задаче;
— Умение внимательно читать;
— Участвовать (не вести его, а только участвовать) в мозговом штурме;
— Презентовать свою работу.

В какие области лезть не стоит. Или если вы этим занимаетесь, стоит задуматься о смене профессии (с 32:10):
— Написание текста, который читает пользователь (включая микротекст);
— Бизнес-анализ и решение бизнес-задач. Проектировщик не должен решать бизнес-проблемы. Он зачастую не способен их даже понять. Лучше учиться пользоваться результатами труда аналитиков;
— Исследование и анализ пользователей (социология);
— Управление проектами;
— Внедрение UX-процессов в компании.

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

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

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

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

Сокращённый отрывок из 35-й главы «100 новых главных принципов дизайна» Сьюзан Уэйншенк.

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

Есть решения, которые подойдут и без тонкой настройки:
— Показывать время доставки вроде «закажи сегодня до 18, получи уже завтра» (было на Озоне);
— На какую сумму положить товаров в корзину, чтобы была бесплатная доставка или скидка;
— Остатки товара (было на Юлмарте);
— Высокий спрос на товар вроде «этот товар просматривает ещё 3 человека» (было на Букинге);
— Понятные условия возврата в карточке товара;
— Наличие пунктов самовывоза.

https://vc.ru/p/25-ecommerce-personalization-samples

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

Структура формы:
— Просите вводить только то, что требуется;
— Последовательность полей должна быть логичной;
— Группируйте связанную информацию;
— Располагайте поля в один столбец.

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

Подписи к полям:
— Делайте их лаконичными;
— Избегайте капса;
— Для быстрого сканирования формы, располагайте подписи над полями;
— Старайтесь не отображать подпись как плейсхолдер.

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

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

https://medium.com/pavljenko/3844211d1e17

Адам Сильвер написал о проблемах паттерна float label — расположение лейбла внутри текстового поля и смещение его вверх после заполнения поля содержимым.

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

http://sketchapp.me/vsplyvayushhie-podskazki-eto-problema/

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

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

http://nobelfaik.livejournal.com/139728.html

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

Как они группируют проблемы, ранжируют по значимости, формируют фронт работ на день шлифовки: vc.ru/p/polish-day

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

В статье Брейдена Ковица из Google Ventures — больше о том, зачем вообще эти мелочи надо исправлять: medium.com/rofldorf/488d08b2854d