В этом выпуске: 3-я серия Walking head, выдержка о маленькой просьбе о помощи из книги Сьюзан Уэйншенк, статьи о повышении конверсии интернет-магазина, формах ввода, проблемах паттерна Float Label, выключке по знаку.
3-я серия Walking head
Опубликовал третий, самый короткий, выпуск Walking head. Александра Постовалова рассказала:
- Основные специализации проектировщиков;
- Как часто работодатели ищут специалиста по UX/UI в одном лице;
- Какие дополнительные скилы стоит прокачать;
- Что в идеале должен предоставить проектировщик, продумывающий идею проекта, как результат своей работы (интерактивный прототип);
- Требования заказчиков к владению определёнными инструментами (их нет, решение важнее);
- Бежать учить новые инструменты или освежать не стареющую классику по проектированию;
- Задачи проектировщика;
- Главная книга для начала работы («Об интерфейсе» Алана Купера);
- Что такое UX-марафон;
- Примерные зарплаты проектировщиков в Москве (стажёры 40к, с опытом 60-70к, с хорошим опытом 120к, UX-лидер 150к — актуально на октябрь 2016 года).
Все выпуски Walking head вместе в плейлисте YT и альбоме ВК.
Маленькая просьба о помощи
Отредактированный и сокращённый отрывок из 35-й главы «100 новых главных принципов дизайна» Сьюзан Уэйншенк:
Если люди заинтересовались услугой, можно усилить интерес и их внутреннее позиционирование в качестве заинтересованных клиентов, попросив об открытой поддержке.
Предположим, вы работаете в гостиничной сети. Постояльцам отправляется опрос о качестве услуг. Такие опросы — форма публичного признания. Человек, поставивший высокую оценку, признается, что ему понравилось. Обязательно поинтересуйтесь, насколько велика вероятность того, что он захочет остановиться у вас снова. Даже если отзыв никто не увидит, сам процесс его написания человек ощущает как публичное признание.
Если человек пишет положительный отзыв, он захочет, чтобы его действия выглядели последовательно, и поэтому предпримет новые попытки взаимодействия с сайтом, компанией или организацией.
Если за написание отзыва платить, это не изменит внутреннего позиционирования клиентов. Человек будет ощущать себя не как «индивид, который считает данный продукт хорошим», а как «индивид, который пишет о достоинствах продукта, чтобы получить вознаграждение».
Повышение конверсии интернет-магазина
В компании Driveback собрали 25 способов повысить конверсию интернет-магазина. По большей части это всё те же всплывающие блоки и баннеры, но если показывать их подходящему сегменту пользователей в правильный момент, раздражать они вроде бы не должны.
Есть решения, которые подойдут и без тонкой настройки:
- Показывать время доставки вроде «закажи сегодня до 18, получи уже завтра» (было на Озоне);
- На какую сумму положить товаров в корзину, чтобы была бесплатная доставка или скидка;
- Остатки товара (было на Юлмарте);
- Высокий спрос на товар вроде «этот товар просматривает ещё 3 человека» (было на Букинге);
- Понятные условия возврата в карточке товара;
- Наличие пунктов самовывоза.
Формы ввода
Николай Бабич для блога Adobe написал большую статью о формах: о структуре, полях ввода, подписях, кнопках действий и обратной связи.
Структура формы:
- Просите вводить только то, что требуется;
- Последовательность полей должна быть логичной;
- Группируйте связанную информацию;
- Располагайте поля в один столбец.
Поля ввода:
- Полей не должно быть много;
- Отмечайте обязательные или, наоборот, необязательные поля;
- Избегайте заполнения полей значениями по умолчанию, если это не умные умолчания;
- Используйте маски ввода;
- Только для десктопа: подружите форму с клавиатурой, автофокус на первом поле;
- Только для мобильных: если в поле надо вводить цифры, отображайте цифровую клавиатуру;
- Используйте автозаполнение.
Подписи к полям:
- Делайте их лаконичными;
- Избегайте капса;
- Для быстрого сканирования формы, располагайте подписи над полями;
- Старайтесь не отображать подпись как плейсхолдер.
Кнопки действий:
- Выделяйте основное действие;
- Не располагайте кнопку «Назад» прямо под полями формы;
- Избегайте общих слов вроде «Отправить форму»;
- Избегайте кнопок с несколькими действиями;
- Не используйте кнопку «Очистить форму»;
- Кнопка должна визуально реагировать на нажатие;
- Показывайте, что нажатие на кнопку привело к какому-то действию.
Обратная связь:
- Валидируйте поле сразу после его заполнения (принцип «награждать раньше, наказывать позже»);
- Сохраняйте введённые данные локально, пока форма не отправлена.
(Хоть эти рекомендации и озвучены уже множество раз, самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)
Проблемы паттерна Float Label
Адам Сильвер написал о проблемах паттерна Float Label — расположение лейбла внутри текстового поля и смещение его вверх после заполнения поля содержимым:
- Нет места для дополнительных подсказок;
- Такие подписи труднее читать: по умолчанию они серые как плейсхолдеры, а после ввода содержимого — мелкие;
- Поля становятся выше, чтобы было место для смещения лейбла;
- Пользователь может посчитать, что поле уже заполнено (см. проблемы использования плейсхолдеров);
- Непоследовательность: не применить к выпадающим спискам;
- Длина поля может быть меньше длины подсказки.
В обсуждении в ВК рекомендуют прочитать ответ на эту статью [English].
Выключка по знаку
Игорь Штанг дополнил рассказом о выключке по знаку свои заметки о разных вариантах выключки (ссылки на них есть в конце статьи).
Чаще всего такое встречается в таблицах. Числа одной величины выравнивают по запятой, диапазоны — по тире или многоточию. Математические знаки, например, знак умножения, также ставят один под другим. В похожем формате принято записывать игровой счёт.